/* workspace.css — the controls that arrange Daimond rather than run it.
 *
 * Three surfaces live here, and they are deliberately layered so that no one of
 * them has to carry everything:
 *
 *   the chip row      what is on screen, and one click to change it,
 *   the gallery       every panel there is, searchable, for when the row cannot
 *                     hold them all,
 *   the palette       the same reach from the keyboard, at any fleet size.
 *
 * The row is allowed to be incomplete precisely because the other two are not.
 */

/* ── The chip row ────────────────────────────────────────────────────────────
   Chips are TOGGLES, not summons: every panel keeps a chip whether it is open
   or shut, so a chip never moves when its neighbour opens. An earlier design
   showed only the closed panels, which meant the row was longest when the app
   was emptiest and every chip shifted sideways each time one was used. */
/* The row clips, so it has to leave room for the ring its own chips draw.
   `.ptag:focus-visible` asks for a 2px outline at 2px offset and had 0.0px on
   every side, so the entire keyboard affordance for the primary panel switcher
   was two vertical arcs -- the same "border that stopped at the corners"
   signature as the selected chat tile and the selected tag chip before it. The
   padding is cancelled by negative margins so the top bar does not grow. */
/* A TRANSIENT ELEMENT MUST NEVER SIT IN THE FLOW OF CLICKABLE TARGETS. Either
   it lives outside that flow, or the space it occupies is reserved whether or
   not it is showing. That is the rule this row is laid out to, and it is the
   general form of the two notes below it: a chip that appears where a chip did
   not, or a glyph that widens the chip it is on, both move somebody's target
   while they are reaching for it.
   `flex: 1 1 auto` is what enforces it here. The row used to shrink to its own
   contents inside a right-anchored group, so anything that appeared to its
   RIGHT -- the sync pill, the pairing button, a held-sweep notice -- moved every
   chip in it. Taking the room instead fixes the row's left edge at the wordmark,
   and nothing that happens further along the bar can reach it. */
.panel-tags {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	padding: 4px;
	margin: -4px 2px -4px -4px;
}
/* `flex: none`, not `min-width: 0`: the groups were shrinking past content
   that cannot shrink, so at 761-768px the stage and dock chips were drawn
   on top of each other. The row's own overflow and its `... N` chip are
   what handle a row too full. */
.ptag-group { display: flex; align-items: center; gap: 5px; flex: none; }

/* Zone is legible by position first -- rail, stage and dock groups run
   left to right in the order the zones themselves do -- and the divider only
   confirms it. Position matters more than colour here because the two zones
   behave differently: opening a dock panel ADDS one, while opening a stage
   panel evicts whichever guest is sitting beside the daimon. */
.ptag-div { width: 1px; height: 16px; background: var(--border-2); margin: 0 3px; flex: none; }

.ptag {
	font-size: var(--fs-2xs);
	letter-spacing: 0.02em;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--bg-tertiary);
	color: var(--text-secondary);
	border: 1px solid var(--border-strong);
	white-space: nowrap;
}
.ptag:hover { color: var(--text-primary); border-color: var(--accent); }
.ptag:disabled { opacity: 0.4; cursor: not-allowed; }
.ptag:disabled:hover { color: var(--text-secondary); border-color: var(--border); }

/* An open panel's chip. Filled rather than outlined, so the row reads as a map
   of what is on screen at a glance. */
.ptag.on {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent-text);
}
.ptag.on:hover { color: var(--text-primary); }

/* A stage chip that would displace the guest beside the chat says so before it
   is clicked -- but it must do so WITHOUT changing its own width. A glyph
   appended here re-flowed every chip to its right the moment a stage seat
   filled, which is exactly the shifting the toggle row exists to prevent. A
   border style costs no layout. */
.ptag-stage.will-evict { border-style: dashed; }

.ptag-more { flex: none; font-family: var(--font); letter-spacing: 0.08em; padding: 4px 9px; }
.ptag-more .n { font-size: var(--fs-4xs); opacity: 0.8; margin-left: 3px; letter-spacing: 0; }

/* ── Popover furniture, shared by the gallery and the settings menu ───────── */
.pop {
	position: fixed;
	z-index: 3000;
	background: var(--bg-secondary);
	border: 1px solid var(--border-2);
	border-radius: var(--radius-lg);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
	padding: 10px;
	min-width: 260px;
	max-width: min(92vw, 380px);
	max-height: min(72vh, 620px);
	overflow-y: auto;
}
.pop[hidden] { display: none; }
.pop-head {
	font-size: var(--fs-2xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
	padding: 6px 6px 4px;
}
.pop-head:not(:first-child) { margin-top: 6px; border-top: 1px solid var(--border); }
.pop-note {
	font-size: var(--fs-2xs);
	color: var(--text-muted);
	padding: 8px 6px 2px;
	border-top: 1px solid var(--border);
	margin-top: 6px;
	line-height: 1.5;
}
/* The language/currency pickers in the appearance menu. Sized to the popover,
   not to a form -- .settings-select reads oversized at 380px. */
.pop .set-pick { padding: 2px 6px 8px; }
.pop .set-pick select {
	width: 100%;
	font-size: var(--fs-xs);
	padding: 6px 8px;
	background: var(--bg-tertiary);
	color: var(--text-primary);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
}
/* A note explaining the picker directly above it is one thought, not a new
   section -- no divider. */
.pop .set-pick + .pop-note { border-top: none; margin-top: 0; padding-top: 2px; }
.pop-note kbd {
	font-family: var(--font-mono);
	font-size: var(--fs-4xs);
	border: 1px solid var(--border-2);
	border-radius: 4px;
	padding: 1px 4px;
	color: var(--text-secondary);
}

/* ── The settings menu ───────────────────────────────────────────────────────
   Theme, reading size and the dock's tiling, in one place. They belong together
   because they are the same kind of decision: how the app should look and sit,
   as opposed to what it should do. */
.menu-btn { gap: 5px; }
.menu-btn .ic { width: 18px; height: 18px; }

.set-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; }
.set-row > .lbl { flex: 1; font-size: var(--fs-sm); color: var(--text-primary); }

/* A segmented control: the options of one setting, side by side, so the choice
   and what else was available are one glance rather than two. */
.seg { display: flex; gap: 3px; flex-wrap: wrap; padding: 2px 6px 8px; }
.seg button {
	/* `flex-basis: 0`, not `auto`: with `auto` each option starts from the width
	   of its own contents and only the SPARE room is shared out, so a row of
	   five tiles came out 66.3 / 54.6 / 65.6 / 65.6 / 76.6px — the "1" tile 22px
	   narrower than "3x2" beside it. A segmented control that divides its row
	   unevenly reads as five buttons rather than one control, which is the
	   opposite of what a segment is for. From a zero basis the row divides
	   exactly, and `min-width` still stops it collapsing on a phone. */
	flex: 1 1 0;
	min-width: 54px;
	background: var(--bg-tertiary);
	border: 1px solid var(--border-strong);
	color: var(--text-secondary);
	border-radius: var(--radius-sm);
	padding: 6px 8px;
	font-size: var(--fs-xs);
	white-space: nowrap;
}
.seg button:hover { border-color: var(--accent); color: var(--text-primary); }
.seg button[aria-pressed="true"] {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent-text);
}

/* The palette picker. A list rather than a segmented row, because ten of them
   in three bands is something a reader looks DOWN, and because the bands are
   the answer to the only question anyone brings to it -- "a light one" -- which
   a row of ten equal buttons cannot answer at all. Full width of the menu, so
   the longest palette name is never the reason it truncates. */
.theme-pick {
	display: block;
	width: calc(100% - 12px);
	margin: 2px 6px 8px;
	background: var(--bg-tertiary);
	border: 1px solid var(--border-strong);
	color: var(--text-primary);
	border-radius: var(--radius-sm);
	padding: 6px 8px;
	font-size: var(--fs-xs);
	cursor: pointer;
}
.theme-pick:hover { border-color: var(--accent); }
.theme-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* The dropped list is drawn by the platform, which does not inherit the panel's
   colours on every browser; naming both keeps a light palette's list off a
   dark-on-dark default. */
.theme-pick option,
.theme-pick optgroup { background: var(--bg-secondary); color: var(--text-primary); }

/* The reading size, shown as the thing it changes: the sample is set in the
   size being chosen, so the control demonstrates rather than describes. */
.size-row { display: flex; align-items: center; gap: 8px; padding: 2px 6px 8px; }
.size-row button {
	width: 32px; height: 30px;
	background: var(--bg-tertiary);
	border: 1px solid var(--border-strong);
	color: var(--text-secondary);
	border-radius: var(--radius-sm);
}
.size-row button:hover:not(:disabled) { border-color: var(--accent); color: var(--text-primary); }
.size-row button:disabled { opacity: 0.35; cursor: not-allowed; }
.size-row .sample {
	flex: 1;
	text-align: center;
	color: var(--text-primary);
	font-size: var(--fs-base);
	line-height: 1.2;
	overflow: hidden;
	white-space: nowrap;
}
.size-row .pct { font-size: var(--fs-2xs); color: var(--text-muted); font-family: var(--font-mono); min-width: 38px; text-align: right; }

/* A grid option drawn as the grid it selects, because "2 x 3" is a description
   of a picture and the picture is smaller than the sentence. */
.grid-opt { display: flex; flex-direction: column; align-items: center; gap: 5px; }
/* Every picture is a different height -- one column of four is 30px, three of
   two is 14px -- and the caption sits under whatever its own picture ends at,
   so the five words came out on five different lines, a visible zigzag along
   the row. Reserving the tallest picture's height and centring the rows in it
   puts every caption on one line. 30px is 4 rows of 6px with 3 gaps of 2px,
   which is the tallest grid the engine offers. */
.grid-opt .cells { display: grid; gap: 2px; min-height: 30px; align-content: center; }
.grid-opt .cells i {
	display: block;
	width: 9px; height: 6px;
	border-radius: 1px;
	background: currentColor;
	opacity: 0.55;
}
.grid-opt[aria-pressed="true"] .cells i { opacity: 1; }
.grid-opt .cells i.maybe { background: none; box-shadow: inset 0 0 0 1px currentColor; }
.grid-opt .cap { font-size: var(--fs-4xs); letter-spacing: 0.02em; }

/* Keyboard focus, themed. The browser's own ring is drawn in a colour of its
   choosing -- black, on a pale theme -- which on a segmented control reads as a
   second kind of "selected" beside the one that means it. */
.seg button:focus-visible,
.size-row button:focus-visible,
.ptag:focus-visible,
.gal-pin:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ── The gallery: every panel, searchable ────────────────────────────────── */
.gal-search {
	width: 100%;
	box-sizing: border-box;
	background: var(--bg-tertiary);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-size: var(--fs-sm);
	padding: 7px 10px;
	margin-bottom: 6px;
}
.gal-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.gal-row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 7px 8px;
	border-radius: var(--radius-sm);
	background: none;
	border: 1px solid transparent;
	color: var(--text-primary);
	font-size: var(--fs-sm);
	text-align: left;
}
.gal-row:hover, .gal-row:focus-visible { background: var(--bg-hover); outline: none; }
.gal-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gal-row .state { font-size: var(--fs-2xs); color: var(--text-muted); flex: none; }
.gal-row.is-open .state { color: var(--ok); }

/* Pinning is what keeps the row predictable: the user says what sits in the
   header, and nothing reorders itself behind their back. */
.gal-pin {
	flex: none;
	width: 26px; height: 26px;
	display: flex; align-items: center; justify-content: center;
	background: none; border: none; border-radius: var(--radius-sm);
	color: var(--text-muted);
}
.gal-pin:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.gal-pin[aria-pressed="true"] { color: var(--accent); }
.gal-pin .ic { width: 15px; height: 15px; }

.gal-empty { padding: 14px 8px; font-size: var(--fs-sm); color: var(--text-muted); text-align: center; }

/* ── The palette ─────────────────────────────────────────────────────────────
   Invisible until asked for, and complete when it arrives. It exists so the
   visible surfaces are free NOT to be complete. */
.pal-scrim {
	position: fixed; inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 4000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh 16px 16px;
}
.pal-scrim[hidden] { display: none; }
.pal-box {
	width: 100%;
	max-width: 520px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-2);
	border-radius: var(--radius-lg);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	max-height: 70vh;
}
/* The search box and the closer share a row, so the rule that used to divide
   the box from the list now divides the ROW from it -- otherwise the cross sat
   below the line it belongs above. */
.pal-top {
	flex: none;
	display: flex; align-items: center; gap: 4px;
	padding-right: 8px;
	border-bottom: 1px solid var(--border);
}
.pal-input {
	flex: 1; min-width: 0;
	box-sizing: border-box;
	background: none;
	border: none;
	color: var(--text-primary);
	font-size: var(--fs-xl);
	padding: 14px 16px;
}
.pal-input:focus { outline: none; }
.pal-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.pal-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: var(--radius-sm);
	font-size: var(--fs-sm);
	color: var(--text-primary);
	cursor: pointer;
}
.pal-item .kind {
	font-size: var(--fs-4xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 2px 7px;
	flex: none;
}
.pal-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pal-item .hint { font-size: var(--fs-2xs); color: var(--text-muted); flex: none; }
.pal-item[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-text); }
.pal-item[aria-selected="true"] .hint { color: var(--accent-text); }
.pal-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: var(--fs-sm); }

/* Below the phone breakpoint the row is the FOOTER. It used to be hidden here,
   on the reasoning that "a chip row on a 380px screen is a scrolling mess" and
   that the drawer and the four-destination bottom bar answered the question it
   would answer. The owner's verdict on that bar, 2026-08-27: "the footer in
   mobile view is currently useless to me". Four seats named four panels out of
   seventeen, and the other thirteen were reachable only through a drawer.
   So the row moves into the bar rather than being hidden from it -- one row,
   still `#panel-tags`, moved by `placeChips` in js/mobile.js -- and it scrolls
   sideways, which is what a phone does with a list too long for its width.
   Its rules are in css/mobile.css, with the rest of the phone shell. */
@media (max-width: 760px) {
	.pal-scrim { padding-top: 6vh; }
}