/**
 * Knotful — the shared look.
 *
 * The primitives every product is built from, so Circle, Desk and Gallery are
 * recognisably the same thing rather than three products that happen to use the
 * same colours. Layout stays with each product; this is the vocabulary.
 *
 * Every value here is a --kn- token. The tokens are printed by
 * includes/tokens.php just ahead of this file, and nothing here defines a
 * colour of its own. docs/TOKENS.html lists every token with its value.
 *
 * The house rules, in short: square corners, hairline borders, a serif for
 * anything that speaks and a sans for anything that labels, and the metal used
 * sparingly — a rule, an outline, a marker — rather than as filled colour.
 */

/* ── Box model ────────────────────────────────────────────────────────
   Padding and border are counted inside the width, not added on top of it.
   Without this a full-width field or button measures 100% plus its own
   padding, which is wider than the space it was given, and it hangs off the
   side of the page. Scoped to these components so the stylesheet never
   changes how a product's own markup behaves. */
.kn-panel,
.kn-row,
.kn-field,
.kn-btn,
.kn-tag,
.kn-figure,
.kn-figures,
.kn-table,
.kn-table th,
.kn-table td,
.kn-mode {
	box-sizing: border-box;
}

/* ── Geometry ─────────────────────────────────────────────────────────
   Nothing is rounded. The one exception is a shape that is meant to be a
   circle, which asks for it explicitly. */
.kn-square,
.kn-panel,
.kn-field,
.kn-btn,
.kn-tag {
	border-radius: 0;
}

/* ── Type ─────────────────────────────────────────────────────────── */
.kn-display,
.kn-title {
	font-family: var( --kn-font-display );
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.12;
	margin: 0;
}

.kn-display { font-size: var( --kn-text-display ); }
.kn-title   { font-size: var( --kn-text-title ); }

/* The small uppercase label. The wide spacing is most of the character —
   it is what stops a label looking like ordinary small text. */
.kn-eyebrow {
	font-family: var( --kn-font-body );
	font-size: var( --kn-text-xs );
	font-weight: var( --kn-weight-semibold );
	letter-spacing: var( --kn-tracking-eyebrow );
	text-transform: uppercase;
	color: var( --kn-metal );
	margin: 0;
}

.kn-muted { color: var( --kn-muted ); }

/* ── The rule ─────────────────────────────────────────────────────────
   A short metal hairline under a heading. Used instead of a heavier divider,
   and it is the single most recognisable mark in the house style. */
.kn-rule {
	width: var( --kn-rule-width );
	height: var( --kn-rule-weight );
	background: var( --kn-metal );
	border: 0;
	margin: 18px 0 20px;
}

.kn-rule--full {
	width: 100%;
	background: var( --kn-line );
}

/* ── Buttons ──────────────────────────────────────────────────────────
   Ink on the page colour, square, wide-spaced capitals. Hovering empties it
   to an outline rather than darkening it. */
.kn-btn {
	display: inline-block;
	background: var( --kn-btn-bg );
	color: var( --kn-btn-fg );
	border: 1px solid var( --kn-btn-bg );
	padding: 13px 32px;
	font-family: var( --kn-font-body );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.kn-btn:hover,
.kn-btn:focus-visible {
	background: transparent;
	color: var( --kn-text );
	border-color: var( --kn-text );
}

.kn-btn--quiet {
	background: transparent;
	color: var( --kn-text );
	border-color: var( --kn-line-strong );
}

.kn-btn--quiet:hover {
	border-color: var( --kn-metal );
	color: var( --kn-metal );
}

.kn-btn[disabled] { opacity: 0.55; cursor: default; }

/* ── Tags and states ──────────────────────────────────────────────── */
.kn-tag {
	display: inline-block;
	font-family: var( --kn-font-body );
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --kn-metal );
	border: 1px solid var( --kn-metal );
	padding: 5px 11px;
}

/* The quieter state, in the palette's second color. Grey on grey was too
   faint to read at this size. */
.kn-tag--quiet {
	color: var( --kn-tint );
	border-color: var( --kn-tint );
}

/* ── Panels and rows ──────────────────────────────────────────────────
   Rows separated by hairlines read better than floating cards, and they keep
   a long list calm.

   Two line weights, used for two jobs. Anything that draws a box around
   something (a panel, a field, a quiet button, the figures, a card, a month)
   takes the stronger line, so every outline on a screen is the same color.
   Lines that only separate one row from the next take the lighter one. */
.kn-panel {
	background: transparent;
	border: 1px solid var( --kn-line-strong );
	padding: 20px 22px;
}

.kn-rows { border-top: 1px solid var( --kn-line ); }

.kn-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var( --kn-line );
}

/* ── Figures ──────────────────────────────────────────────────────────
   Numbers are set in the serif and drawn in the metal; it is where a screen
   full of data earns a little shine. */
.kn-figures {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 120px, 1fr ) );
	gap: 1px;
	background: var( --kn-line-strong );
	border: 1px solid var( --kn-line-strong );
}

.kn-figure {
	background: var( --kn-bg );
	padding: 15px 12px;
	text-align: center;
}

.kn-figure b {
	display: block;
	font-family: var( --kn-font-display );
	font-weight: 400;
	font-size: 28px;
	color: var( --kn-metal );
}

.kn-figure span {
	font-family: var( --kn-font-body );
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --kn-muted );
}

/* ── Fields ───────────────────────────────────────────────────────── */
.kn-field {
	width: 100%;
	min-height: var( --kn-touch );
	background: transparent;
	color: var( --kn-text );
	border: 1px solid var( --kn-line-strong );
	padding: 12px 14px;
	font-family: var( --kn-font-body );
	font-size: var( --kn-input-text ); /* 16px keeps iOS from zooming the page on focus. */
}

.kn-field:focus {
	outline: 0;
	border-color: var( --kn-metal );
}

.kn-label {
	display: block;
	font-family: var( --kn-font-body );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --kn-muted );
	margin: 0 0 6px;
}

/* ── The light / dark switch ──────────────────────────────────────────
   The same control on every product, so the gesture is learned once. */
.kn-mode {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 0;
}

.kn-mode svg { width: 20px; height: 20px; display: block; }

/* Show the sun on a dark page and the moon on a light one: the icon offers
   what you would get, not what you already have. */
.kn-mode .kn-sun  { display: block; }
.kn-mode .kn-moon { display: none; }

:root[data-theme="light"] .kn-mode .kn-sun  { display: none; }
:root[data-theme="light"] .kn-mode .kn-moon { display: block; }

@media ( prefers-color-scheme: light ) {
	:root:not([data-theme]) .kn-mode .kn-sun  { display: none; }
	:root:not([data-theme]) .kn-mode .kn-moon { display: block; }
}

/* ── Tables ───────────────────────────────────────────────────────────
   A table is the thing that breaks on a phone: it either runs off the side or
   squashes into columns nobody can read. On a narrow screen each row becomes a
   little stack instead, with the column name shown beside its value. Give each
   cell a data-label and it works without any markup change beyond that.

   <td data-label="Wedding">Amelia &amp; Rowan</td>
*/
.kn-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var( --kn-font-body );
}

.kn-table th {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --kn-muted );
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var( --kn-line );
}

.kn-table td {
	padding: 13px 12px;
	border-bottom: 1px solid var( --kn-line );
	vertical-align: top;
}

/* ── Mobile ───────────────────────────────────────────────────────────
   The products are shown to friends on a phone as often as they are worked on
   at a desk, so this is not an afterthought. */

/* Never let anything push the page sideways. A single wide image or a long
   unbroken word is all it takes, and the whole layout starts sliding. */
.kn-panel,
.kn-row,
.kn-figures,
.kn-table {
	max-width: 100%;
}

.kn-panel img,
.kn-row img {
	max-width: 100%;
	height: auto;
}

.kn-title,
.kn-display,
.kn-row {
	overflow-wrap: anywhere;
}

@media ( max-width: 782px ) {
	/* Comfortable targets. Anything you tap should be at least 48px, which is
	   about the width of an adult fingertip. */
	.kn-btn {
		padding: 16px 28px;
		min-height: 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.kn-mode {
		width: 48px;
		height: 48px;
	}

	.kn-tag { padding: 7px 12px; }

	/* A row that was side by side becomes stacked, so a long name and its
	   status are not fighting over the same line. */
	.kn-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	/* Figures go two across rather than shrinking to nothing. */
	.kn-figures { grid-template-columns: repeat( 2, 1fr ); }

	/* Tables become stacks. */
	.kn-table,
	.kn-table tbody,
	.kn-table tr,
	.kn-table td {
		display: block;
		width: 100%;
	}

	.kn-table thead { display: none; }

	.kn-table tr {
		border-bottom: 1px solid var( --kn-line );
		padding: 12px 0;
	}

	.kn-table td {
		border: 0;
		padding: 5px 0;
		display: flex;
		justify-content: space-between;
		gap: 16px;
	}

	.kn-table td::before {
		content: attr( data-label );
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		color: var( --kn-muted );
		flex: none;
	}

	/* A cell with no label just fills the width. */
	.kn-table td:not([data-label])::before { content: none; }
}

@media ( max-width: 480px ) {
	.kn-figures { grid-template-columns: 1fr; }
	.kn-panel { padding: 16px 16px; }
	.kn-btn { width: 100%; }
}

/* Keep content clear of the rounded corners and the home indicator on a
   modern phone, in landscape as well as portrait. */
@supports ( padding: max( 0px ) ) {
	.kn-safe {
		padding-left: max( 16px, env( safe-area-inset-left ) );
		padding-right: max( 16px, env( safe-area-inset-right ) );
		padding-bottom: max( 16px, env( safe-area-inset-bottom ) );
	}
}

/* Respect a person who has asked for less movement. */
@media ( prefers-reduced-motion: reduce ) {
	.kn-btn { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   The application shell.

   Everything below is the approved Desk layout, made reusable. Every
   client- and vendor-facing product is built from these parts, so Circle,
   Desk, Gallery and the Dashboard are the same product wearing different
   content rather than four things that resemble each other.

   Values are taken from the approved mockup rather than re-derived, so a
   screen built from these classes matches it exactly.
   ═══════════════════════════════════════════════════════════════════════ */

/* As tall as what's in it, and no taller. A height tied to the window
   (it was 60vh) left a long empty column in a tall window and in full-page
   screenshots, which stretch the window to fit the page (owner, 7 November
   2026). Keeping the footer down on a short page is the theme's job. */
.kn-app {
	display: grid;
	grid-template-columns: 200px 1fr;
	background: var( --kn-bg );
	color: var( --kn-text );
}

/* ── The rail ─────────────────────────────────────────────────────────
   One sidebar, and only one. A view with a rail never also carries a tab
   strip repeating it; that has been the most persistent mistake in this
   design and it is worth stating in the stylesheet itself. */
.kn-rail {
	border-right: 1px solid var( --kn-line );
	padding: 26px 0 20px;
}

/* The chrome: on a light page anything marked data-kn-chrome (a top bar,
   its phone menu, a footer) wears the palette's dark roles, printed with the
   tokens, so it fills with the deep color. The rail joins it in the middle
   look, the color menu. */
:root[data-look="menu"] .kn-rail,
:root[data-theme="light"] [data-kn-chrome] {
	background: var( --kn-bg );
	color: var( --kn-text );
}

.kn-rail-mark {
	display: block;
	width: 58px;
	height: 58px;
	color: var( --kn-text );
	margin: 0 20px 20px;
}

.kn-rail-mark svg { display: block; width: 100%; height: 100%; }

.kn-rail-label {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var( --kn-metal );
	padding: 0 20px 12px;
}

.kn-rail nav a {
	display: block;
	padding: 9px 20px;
	color: var( --kn-text );
	opacity: 0.62;
	text-decoration: none;
	font-size: 13px;
	cursor: pointer;
}

.kn-rail nav a:hover { opacity: 0.9; }

.kn-rail nav a.is-current {
	opacity: 1;
	border-left: 2px solid var( --kn-metal );
	padding-left: 18px;
}

/* A product folds to a single line, with a caret to open its pages. Keeps
   the rail short however many features exist behind it. */
.kn-group > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.kn-group > a .kn-caret {
	width: 9px;
	height: 9px;
	flex: none;
	opacity: 0.55;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.kn-group.is-open > a { opacity: 1; }
.kn-group.is-open > a .kn-caret { transform: rotate( 180deg ); opacity: 1; }

.kn-group .kn-subnav { display: none; }
.kn-group.is-open .kn-subnav { display: block; }

.kn-subnav a { padding: 7px 20px 7px 32px; font-size: 12px; opacity: 0.5; }
.kn-subnav a.is-current { opacity: 1; color: var( --kn-metal ); border-left: 0; padding-left: 32px; }

.kn-main { padding: 26px; min-width: 0; }

/* ── Breadcrumbs ──────────────────────────────────────────────────── */
.kn-crumbs {
	padding: 9px 26px;
	border-bottom: 1px solid var( --kn-line );
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --kn-muted );
}

.kn-crumbs b { color: var( --kn-text ); font-weight: 600; }
.kn-crumbs i { color: var( --kn-metal ); font-style: normal; margin: 0 7px; }

/* ── A photograph behind a heading ────────────────────────────────────
   The scrim runs to the page colour, so Cormorant stays readable over any
   photograph in either mode. */
.kn-hero {
	position: relative;
	min-height: 190px;
	background: var( --kn-surface ) center / cover no-repeat;
	border: 1px solid var( --kn-line-strong );
	display: flex;
	align-items: flex-end;
	padding: 20px;
	margin-bottom: 22px;
}

.kn-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, var( --kn-bg ), transparent 68% );
	opacity: 0.9;
}

.kn-hero > * { position: relative; z-index: 2; }

/* ── Photographs ──────────────────────────────────────────────────── */
.kn-masonry { column-count: 3; column-gap: 10px; }

.kn-tile {
	display: inline-block;
	width: 100%;
	margin: 0 0 10px;
	border: 1px solid var( --kn-line-strong );
	padding: 6px;
	position: relative;
}

.kn-tile img { width: 100%; display: block; }

.kn-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 0 var( --kn-metal );
	transition: box-shadow 0.18s ease;
	pointer-events: none;
}

.kn-tile:hover::after { box-shadow: inset 0 0 0 2px var( --kn-metal ); }

.kn-frame { border: 1px solid var( --kn-line-strong ); padding: 7px; }
.kn-frame img { width: 100%; display: block; }

/* ── A board ──────────────────────────────────────────────────────── */
.kn-board { display: grid; grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) ); gap: 12px; }
.kn-column { border: 1px solid var( --kn-line-strong ); padding: 12px; }

.kn-column h4 {
	margin: 0 0 10px;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --kn-metal );
}

.kn-card { border: 1px solid var( --kn-line-strong ); padding: 10px; margin-bottom: 8px; font-size: 13px; }

/* ── A month ──────────────────────────────────────────────────────── */
.kn-calendar {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 1px;
	background: var( --kn-line-strong );
	border: 1px solid var( --kn-line-strong );
}

.kn-calendar > div { background: var( --kn-bg ); padding: 9px 6px; text-align: center; font-size: 12px; min-height: 52px; }

.kn-calendar > div.kn-cal-head {
	min-height: 0;
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --kn-muted );
}

.kn-calendar > div.has-event { color: var( --kn-metal ); border-bottom: 2px solid var( --kn-metal ); }

/* ── Bookable times ───────────────────────────────────────────────── */
.kn-slots { display: grid; grid-template-columns: repeat( auto-fit, minmax( 94px, 1fr ) ); gap: 8px; }
.kn-slot { border: 1px solid var( --kn-line-strong ); padding: 12px; text-align: center; font-size: 12px; cursor: pointer; }
.kn-slot:hover, .kn-slot.is-chosen { border-color: var( --kn-metal ); color: var( --kn-metal ); }

/* ── A conversation ───────────────────────────────────────────────── */
.kn-thread { display: flex; gap: 11px; padding: 14px 0; border-bottom: 1px solid var( --kn-line ); }
.kn-avatar { width: 36px; height: 36px; border-radius: var( --kn-radius ); flex: none; background: var( --kn-surface ); object-fit: cover; }

/* ── States keep their meaning in every palette ───────────────────── */
.kn-tag--ok   { color: var( --kn-ok-ink ); border-color: var( --kn-ok-ink ); }
.kn-tag--warn { color: var( --kn-warn-ink ); border-color: var( --kn-warn-ink ); }
.kn-tag--bad  { color: var( --kn-bad-ink ); border-color: var( --kn-bad-ink ); }

/* ── On a phone the rail lies down across the top ─────────────────── */
@media ( max-width: 900px ) {
	.kn-app { grid-template-columns: 1fr; }

	.kn-rail {
		border-right: 0;
		border-bottom: 1px solid var( --kn-line );
		padding: 10px 0;
	}

	.kn-rail-mark, .kn-rail-label { display: none; }
	.kn-rail nav { display: flex; overflow-x: auto; gap: 2px; }
	.kn-rail nav::-webkit-scrollbar { display: none; }
	.kn-group { flex: none; }
	.kn-group > a { padding: 10px 14px; }
	.kn-group .kn-subnav { display: none; }
	.kn-rail nav a.is-current { border-left: 0; border-bottom: 2px solid var( --kn-metal ); padding-left: 14px; }
	.kn-main { padding: 18px 16px 60px; }
	.kn-masonry { column-count: 2; }
	.kn-crumbs { padding: 9px 16px; }
}

@media ( max-width: 480px ) {
	.kn-masonry { column-count: 1; }
}


/* ── A page that holds an app ─────────────────────────────────────────
   Full width under the theme's header, with the same side margins the
   theme uses, so the rail and screens sit where the approved mockups put
   them. */
.kn-app-page {
	box-sizing: border-box;
	width: 100%;
	max-width: var( --kn-width-app );
	margin: 0 auto;
	padding: var( --kn-space-5 ) var( --kn-edge ) 72px;
}

/* Inside an app, a button is a button whatever a theme does to links. The
   doubled class outranks a theme's "every link in an article" rule, so a
   button can never turn into cream text on a cream button again. */
.kn-app a.kn-btn.kn-btn,
.kn-app a.kn-btn.kn-btn:visited {
	color: var( --kn-btn-fg );
	border: 1px solid var( --kn-btn-bg );
	text-decoration: none;
}

.kn-app a.kn-btn.kn-btn:hover,
.kn-app a.kn-btn.kn-btn:focus-visible {
	color: var( --kn-text );
	border-color: var( --kn-text );
}

.kn-app a.kn-btn--quiet.kn-btn--quiet,
.kn-app a.kn-btn--quiet.kn-btn--quiet:visited {
	color: var( --kn-text );
	border-color: var( --kn-line-strong );
}

.kn-app a.kn-btn--quiet.kn-btn--quiet:hover {
	color: var( --kn-metal );
	border-color: var( --kn-metal );
}

/* ── The WordPress toolbar on the front of the site ──────────────────
   Signed-in staff see it above every page. It takes the palette and
   follows the light/dark switch like everything else, rather than
   WordPress's own grey. */
#wpadminbar {
	background: var( --kn-bar ) !important;
	border-bottom: 1px solid var( --kn-line );
}

#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar .ab-empty-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before,
#wpadminbar #adminbarsearch::before {
	color: var( --kn-text ) !important;
}

#wpadminbar .ab-top-menu > li:hover > .ab-item,
#wpadminbar .ab-top-menu > li.hover > .ab-item,
#wpadminbar .ab-top-menu > li > .ab-item:focus,
#wpadminbar .ab-submenu .ab-item:hover,
#wpadminbar .ab-submenu .ab-item:focus {
	background: var( --kn-line ) !important;
	color: var( --kn-metal ) !important;
}

#wpadminbar .ab-top-menu > li:hover > .ab-item::before,
#wpadminbar .ab-top-menu > li.hover > .ab-item::before,
#wpadminbar .ab-top-menu > li:hover .ab-icon::before { color: var( --kn-metal ) !important; }

#wpadminbar .ab-submenu,
#wpadminbar .menupop .ab-sub-wrapper {
	background: var( --kn-surface ) !important;
	border: 1px solid var( --kn-line );
}

#wpadminbar .ab-sub-secondary { background: var( --kn-surface ) !important; }


/* ═══════════════════════════════════════════════════════════════════════
   The picker.

   One button with two linked rings opens the palettes and the sun and moon.
   On a computer it drops down from the button; on a phone the script moves
   it to the end of the page and it rises from the bottom edge, with the page
   dimmed behind it. Approved in docs/mockups/palette-picker.html.
   ═══════════════════════════════════════════════════════════════════════ */

.kn-look {
	position: relative;
	display: inline-block;
}

.kn-look-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --kn-touch );
	height: var( --kn-touch );
	padding: 0;
	background: transparent;
	border: var( --kn-border ) solid transparent;
	border-radius: var( --kn-radius );
	color: inherit;
	cursor: pointer;
	transition: border-color var( --kn-speed-fast ) var( --kn-ease );
}

.kn-look-btn:hover,
.kn-look-btn[aria-expanded="true"] { border-color: var( --kn-line ); }

.kn-look-btn:focus-visible {
	outline: var( --kn-focus-width ) solid var( --kn-metal );
	outline-offset: var( --kn-focus-offset );
}

.kn-look-btn svg { display: block; width: var( --kn-icon ); height: var( --kn-icon ); }

.kn-look-sheet {
	box-sizing: border-box;
	position: absolute;
	top: calc( 100% + 10px );
	right: 0;
	z-index: var( --kn-layer-float );
	width: 392px;
	max-width: calc( 100vw - 32px );
	padding: var( --kn-space-5 ) var( --kn-space-5 ) var( --kn-space-4 );
	background: var( --kn-surface );
	color: var( --kn-text );
	border: var( --kn-border ) solid var( --kn-line );
	border-top-color: var( --kn-metal );
	border-radius: var( --kn-radius );
	box-shadow: var( --kn-shadow-float );
	font-family: var( --kn-font-body );
	font-size: var( --kn-text-base );
	line-height: 1.4;
	text-align: left;
}

.kn-look-sheet[hidden] { display: none; }

.kn-look-sheet *,
.kn-look-sheet *::before,
.kn-look-sheet *::after { box-sizing: border-box; }

.kn-look-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --kn-space-3 );
	margin-bottom: var( --kn-space-4 );
}

.kn-look-title {
	margin: 0;
	font-size: var( --kn-text-xs );
	font-weight: var( --kn-weight-semibold );
	letter-spacing: var( --kn-tracking-eyebrow );
	text-transform: uppercase;
	color: var( --kn-muted );
}

.kn-look-mode {
	display: inline-flex;
	border: var( --kn-border ) solid var( --kn-line );
}

.kn-look-mode button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	min-height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var( --kn-radius );
	color: var( --kn-muted );
	cursor: pointer;
}

.kn-look-mode button[aria-pressed="true"] {
	background: var( --kn-text );
	color: var( --kn-bg );
}

.kn-look-mode svg { display: block; width: 18px; height: 18px; }

.kn-look-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 14px 10px;
}

.kn-look-grid[hidden] { display: none; }

/* A swatch. The square is the palette in the mode the page is in, the strip
   along its foot is its partner in the other mode, and the frame is the
   other mode's page. One shape in all three looks: the swatch stands for
   the palette, not for the look. */
.kn-sw {
	display: flex;
	flex-direction: column;
	gap: 7px;
	min-height: var( --kn-touch );
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var( --kn-radius );
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.kn-sw-chip {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 5px solid var( --sw-l );
	transition: border-color var( --kn-speed-fast ) var( --kn-ease );
}

/* The frame is the other mode's page, so a swatch never sits light on light
   or dark on dark: cream around it on a dark page, the palette's own deep
   color on a light one. */
:root[data-theme="light"] .kn-sw-chip { border-color: var( --sw-d ); }

.kn-sw-main {
	position: absolute;
	inset: 0 0 26% 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 5px;
	padding: 0 9px 9px;
	background: var( --sw-d );
}

.kn-sw-main i { display: block; width: 16px; height: 1px; background: var( --sw-m ); }
.kn-sw-main b { display: block; width: 7px; height: 7px; background: var( --sw-da ); }

.kn-sw-pair {
	position: absolute;
	inset: 74% 0 0 0;
	background: var( --sw-l );
	border-top: 1px solid rgba( 127, 127, 127, 0.25 );
}

:root[data-theme="light"] .kn-sw-main { background: var( --sw-l ); }
:root[data-theme="light"] .kn-sw-main b { background: var( --sw-la ); }
:root[data-theme="light"] .kn-sw-pair { background: var( --sw-d ); }

.kn-sw-name {
	font-size: 12px;
	line-height: 1.3;
	color: var( --kn-muted );
}

.kn-sw:hover .kn-sw-chip { outline: var( --kn-focus-width ) solid var( --kn-muted ); outline-offset: 2px; }
.kn-sw:hover .kn-sw-name { color: var( --kn-text ); }

.kn-sw:focus-visible { outline: none; }
.kn-sw:focus-visible .kn-sw-chip,
.kn-sw[aria-checked="true"] .kn-sw-chip {
	border-color: var( --kn-metal );
	outline: var( --kn-focus-width ) solid var( --kn-metal );
	outline-offset: 2px;
}

.kn-sw[aria-checked="true"] .kn-sw-name {
	color: var( --kn-text );
	font-weight: var( --kn-weight-semibold );
}

.kn-look-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --kn-space-3 );
	margin-top: var( --kn-space-4 );
	padding-top: var( --kn-space-3 );
	border-top: var( --kn-border ) solid var( --kn-line );
	font-size: var( --kn-text-sm );
	color: var( --kn-muted );
}

.kn-look-foot [hidden] { display: none; }

.kn-look-reset {
	min-height: var( --kn-touch );
	padding: 0;
	background: transparent;
	border: 0;
	color: var( --kn-text );
	font: inherit;
	font-size: var( --kn-text-sm );
	text-decoration: underline;
	text-decoration-color: var( --kn-metal );
	text-underline-offset: 4px;
	white-space: nowrap;
	cursor: pointer;
}

.kn-look-done.kn-btn { display: none; }

.kn-look-backdrop {
	position: fixed;
	inset: 0;
	z-index: calc( var( --kn-layer-sheet ) - 1 );
	background: var( --kn-scrim );
}

/* The phone version: a sheet from the bottom edge, all sixteen swatches
   without scrolling on an ordinary phone, and a Done button for a thumb. On
   a short screen the chips go half height so the four rows still fit; on
   the very smallest phones the sheet scrolls rather than crop anything. */
.kn-look-sheet.is-sheet {
	position: fixed;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: var( --kn-layer-sheet );
	width: auto;
	max-width: none;
	max-height: 88vh;
	overflow-y: auto;
	padding: var( --kn-space-5 ) var( --kn-space-4 ) max( var( --kn-space-4 ), env( safe-area-inset-bottom ) );
	box-shadow: var( --kn-shadow-sheet );
}

.kn-look-sheet.is-sheet .kn-sw-name { font-size: 13px; }

@media ( max-height: 760px ) {
	.kn-look-sheet.is-sheet .kn-sw-chip { aspect-ratio: 2 / 1; }
}

.kn-look-sheet.is-sheet .kn-look-foot { flex-wrap: wrap; }

.kn-look-sheet.is-sheet .kn-look-done.kn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var( --kn-touch );
}

@media ( prefers-reduced-motion: reduce ) {
	.kn-look-btn,
	.kn-sw-chip { transition: none; }
}

/* ── Profile photos ───────────────────────────────────────────────────
   Square, like everything else. WordPress gives avatars its own classes;
   these keep them square wherever a theme or plugin rounds them. */
img.avatar.kn-photo { border-radius: var( --kn-radius ); object-fit: cover; }