/* The command palette — Ctrl+K.
 *
 * Same visual language as everything else: near-black, monospace, dense, thin
 * rules instead of boxes, muted grey with one amber accent. Nothing here invents
 * a colour or a spacing step — every value is a token from base.css, so the
 * palette follows the app rather than drifting away from it.
 *
 * The one place amber appears is the selected row's left rule, and it is there
 * because it means something: that row is what Enter opens. A selected row that
 * shouts is worse than one that whispers — people are reading names, not
 * admiring a highlight.
 *
 * Every rule is scoped to .palette / #palette-*. This file loads on every page,
 * and a bare `dialog` or `li` selector in it would reach into screens that have
 * nothing to do with the palette.
 */

/* A <dialog> is display:none until it is open, so the layout lives on [open].
   Putting `display: flex` on .palette itself would show the palette on every
   page, permanently. */
.palette {
	width: min(560px, calc(100vw - var(--s4) * 2));
	max-width: none;
	max-height: 80vh;
	/* Top-anchored rather than centred: the list grows downward, and a box that
	   grows from the middle of the screen moves the row under the cursor. */
	margin: 12vh auto auto;
	padding: 0;
	color: var(--text);
	font-family: var(--mono);
	font-size: 13px;
	/* Solid, not the translucent --surface: this sits over a moving canvas and
	   a name has to be readable regardless of what is drifting behind it. */
	background: var(--surface-solid);
	border: 1px solid var(--border-bright);
	border-radius: var(--radius);
	box-shadow: 0 24px 60px var(--scrim-shadow);
	overflow: hidden;
}
.palette[open] { display: flex; flex-direction: column; }
.palette:focus { outline: none; }

/* The app behind it stays visible but stops competing. Dark enough that the
   palette is obviously the only live thing on screen. */
.palette::backdrop {
	background: var(--scrim-shadow);
	backdrop-filter: blur(3px);
}

/* ── the query box ───────────────────────────────────────────────────────── */
/* base.css gives every input a border, a radius and an amber focus ring. None
   of that applies here: this input is the whole top of the box, so it is a
   surface with one rule under it rather than a control sitting in a panel. */
.palette input[type="search"] {
	width: 100%;
	margin: 0;
	padding: var(--s3) var(--s4);
	font-family: var(--mono);
	font-size: 14px;
	color: var(--text-bright);
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	flex: none;
}
/* It is focused the entire time the palette is open, so an amber focus ring
   would be permanent decoration rather than a signal. */
.palette input[type="search"]:focus {
	outline: none;
	border-bottom-color: var(--border-bright);
}
.palette input[type="search"]::placeholder { color: var(--text-dim); }
/* The UA's clear button is a second, unlabelled way to empty the box, drawn in
   a colour this app does not use. Escape already does it. */
.palette input[type="search"]::-webkit-search-cancel-button { display: none; }

/* ── results ─────────────────────────────────────────────────────────────── */
.palette-results {
	list-style: none;
	margin: 0;
	padding: var(--s1) 0;
	overflow-y: auto;
	/* The results are the only part that scrolls; the query box and the hint keep
	   their size. min-height:0 is what lets a flex child shrink below its content
	   at all — without it the list refuses to scroll and pushes the hint off the
	   bottom of the dialog instead. */
	flex: 1 1 auto;
	min-height: 0;
	/* Scrolling stops at the palette instead of continuing into the page under
	   the backdrop, which on a phone reads as the whole app sliding away. */
	overscroll-behavior: contain;
}

/* Two kinds of thing in one list, so each group says which it is. Recessive by
   design — a heading is a label, not a result. */
.palette-group {
	padding: var(--s2) var(--s4) var(--s1);
	font-size: 9.5px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-dim);
}
.palette-group:not(:first-child) {
	margin-top: var(--s1);
	border-top: 1px solid var(--border);
	padding-top: var(--s2);
}

.palette-row {
	display: flex;
	align-items: baseline;
	gap: var(--s2);
	/* The 2px comes off the padding so a name still lines up under its heading. */
	padding: 5px var(--s4) 5px calc(var(--s4) - 2px);
	cursor: pointer;
	/* The selection marker is always present, just transparent, so selecting a
	   row does not shift the text sideways by two pixels. */
	border-left: 2px solid transparent;
}
.palette-name {
	min-width: 0;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Pushed right and dim: the owner, the phone number or the path is context for
   telling two similar rows apart, never the thing being read. */
.palette-meta {
	margin-left: auto;
	padding-left: var(--s2);
	font-size: 10px;
	color: var(--text-dim);
	white-space: nowrap;
}
.palette-flag {
	font-size: 9px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 1px 5px;
	border: 1px solid var(--border);
	border-radius: 3px;
	color: var(--text-dim);
	white-space: nowrap;
}

/* Selected reads as selected: a faint lift, brighter text, and the amber rule
   down the left saying "Enter opens this one". No fill, no glow — this row is
   scanned past dozens of times a day. There is deliberately no separate :hover
   rule: the script moves the selection on hover, so there is never a hovered
   row and a different Enter-opens-this row. */
.palette-row[aria-selected="true"] {
	background: var(--surface-raised);
	border-left-color: var(--amber);
}
.palette-row[aria-selected="true"] .palette-name { color: var(--text-bright); }
.palette-row[aria-selected="true"] .palette-meta { color: var(--text); }

/* "Searching", "no leads match" and "type two characters" all land here. Plain
   dim prose: none of them is an error and none of them earns a colour. */
.palette-note {
	padding: var(--s2) var(--s4) var(--s3);
	font-size: 11px;
	color: var(--text-dim);
}

.palette-hint {
	padding: var(--s2) var(--s4);
	border-top: 1px solid var(--border);
	font-size: 10px;
	color: var(--text-dim);
	flex: none;
}

/* ── phones ──────────────────────────────────────────────────────────────── */
/* Reps work on a handset. Near full-width, close to the top so the keyboard
   does not push the list off-screen, and a 16px query box because anything
   smaller makes iOS zoom the page on focus and never zoom back. */
@media (max-width: 700px) {
	.palette {
		width: calc(100vw - var(--s2) * 2);
		max-height: 88vh;
		margin: var(--s2) auto auto;
	}
	.palette input[type="search"] { padding: var(--s2) var(--s3); font-size: 16px; }
	.palette-group,
	.palette-note,
	.palette-hint { padding-left: var(--s3); padding-right: var(--s3); }
	/* Bigger touch target, and room for a name: the context wraps under it rather
	   than squeezing the thing being read down to an ellipsis. */
	.palette-row {
		padding: var(--s2) var(--s3) var(--s2) calc(var(--s3) - 2px);
		flex-wrap: wrap;
	}
	.palette-meta { margin-left: 0; padding-left: 0; flex-basis: 100%; }
}

/* An entrance animation on a box that appears under the cursor is exactly what
   this setting exists to stop. It appears, fully formed, immediately. */
@keyframes palette-in {
	from { opacity: 0; transform: translateY(-6px); }
}
.palette[open] { animation: palette-in 0.12s ease both; }

@media (prefers-reduced-motion: reduce) {
	.palette[open] { animation: none; }
	.palette::backdrop { backdrop-filter: none; }
}

/* ── The act-as switcher ─────────────────────────────────────────────────────
 * Reuses the palette's shell — same dialog, same surface, same rhythm — because
 * it is the same gesture: a box over the page, type to narrow, pick one. What
 * it does not reuse is the amber highlight: nothing in this list is "act on
 * this now", and spending the accent here would dilute it everywhere else. */
.palette .actas-row { display: block; }
.palette .actas-row[hidden] { display: none; }
.palette .actas-row form { margin: 0; }
.palette .palette-btn {
	display: flex; flex-direction: column; gap: 2px;
	width: 100%; text-align: left;
	padding: var(--s2) var(--s3);
	background: none; border: none; border-left: 2px solid transparent;
	border-radius: 0;
	font-family: var(--mono); font-size: 12px;
	color: var(--text); letter-spacing: 0; text-transform: none;
	cursor: pointer;
}
.palette .palette-btn:hover,
.palette .palette-btn:focus-visible {
	background: var(--surface-raised);
	border-left-color: var(--text-dim);
	color: var(--text-bright);
	outline: none;
}
.palette .palette-name { color: var(--text-bright); }
.palette .palette-btn:hover .palette-name { color: var(--text-bright); }
.palette .palette-sub { font-size: 10px; color: var(--text-dim); }

/* The header control that opens it. Reads as a name with a menu, not a button. */
.bar .who-menu {
	font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
	color: var(--text-dim);
	border: 1px solid transparent; border-radius: var(--radius-sm);
	padding: var(--s1) var(--s2);
	background: none; cursor: pointer;
}
.bar .who-menu:hover { color: var(--text-bright); border-color: var(--border); background: none; }