/* /inspo reference library, "Contact Sheet": a light table for design references. */

:root {
  /* ground and ink */
  --table: #eef0f2;        /* cool grey light-table ground */
  --paper: #ffffff;        /* lit surfaces: frames, bench, dialogs */
  --ink: #000000;
  --ink-2: #4a5058;        /* secondary text, 7.3:1 on --table */
  --ink-3: #6b7178;        /* disabled / placeholder text, 4.6:1 on --paper */
  --rule: #cdd2d7;         /* hairlines */
  --rule-strong: #858b93;  /* control borders, 3.3:1 on --paper */
  --frame: #dfe3e7;        /* empty frame / image placeholder */
  --backdrop: rgb(20 24 28 / 0.6);

  /* the one signal colour: darkroom safelight. Selection state and primary action only. */
  --signal: #c8102e;
  --signal-deep: #9e0c24;
  --signal-ink: #ffffff;
  --signal-wash: #fbe8eb;

  /* type */
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --t-xs: 0.6875rem;   /* 11 */
  --t-sm: 0.75rem;     /* 12 */
  --t-md: 0.8125rem;   /* 13 */
  --t-base: 0.875rem;  /* 14 */
  --t-lg: 1rem;        /* 16 */
  --t-xl: 1.375rem;    /* 22 */
  --t-2xl: 1.75rem;    /* 28 */

  /* space (4px base) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* structure */
  --radius: 2px;
  --top-h: 68px;
  --rail-w: 224px;
  --bench-w: 360px;
  --hit: 44px;
  --bar-h: 72px;
  --z-top: 20;
  --z-bench: 30;
  --z-toast: 60;

  /* motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms;
  --t-mid: 240ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--rule-strong) transparent; }
body {
  margin: 0;
  background: var(--table);
  color: var(--ink);
  font: 400 var(--t-base)/1.45 var(--sans);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--ink); color: var(--paper); }
input, textarea, button { font: inherit; color: inherit; caret-color: var(--signal); }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: var(--s2); top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: var(--s3) var(--s4);
}
.skip:focus { top: var(--s2); }

/* ---------- shell ---------- */
.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "top" "rail" "main";
  min-height: 100dvh;
}
.top { grid-area: top; }
.rail { grid-area: rail; }
.sheet { grid-area: main; }

.top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3) var(--s5);
  padding: var(--s4) var(--s4) var(--s3);
  border-bottom: 1px solid var(--ink);
  background: var(--table);
}
.brand { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.brand h1 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
.stats { font: var(--t-sm)/1.3 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }

.search {
  position: relative; display: flex; align-items: center;
  flex: 1 1 280px; max-width: 460px;
}
.search-ico { position: absolute; left: var(--s3); display: flex; color: var(--ink-2); pointer-events: none; }
.search input {
  width: 100%; min-height: var(--hit);
  padding: 0 var(--s6) 0 36px;
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font-size: var(--t-base);
  transition: border-color var(--t-fast) var(--ease);
}
.search input::placeholder { color: var(--ink-3); }
.search input:hover { border-color: var(--ink); }
.search input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.search input::-webkit-search-cancel-button { cursor: pointer; }
.search-key {
  position: absolute; right: var(--s2);
  min-width: 22px; height: 22px; display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: var(--radius);
  font: var(--t-sm)/1 var(--mono); color: var(--ink-2); background: var(--table);
}
.search input:focus ~ .search-key, .search input:not(:placeholder-shown) ~ .search-key { display: none; }

.ico {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: square; stroke-linejoin: miter;
}

/* ---------- family filter ---------- */
.rail { padding: var(--s3) var(--s4) 0; }
.rail-title { font-size: var(--t-md); font-weight: 600; margin-bottom: var(--s2); }
.fam-toggle {
  display: flex; align-items: center; gap: var(--s2); width: 100%;
  min-height: var(--hit); padding: 0 var(--s3);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  text-align: left;
}
.fam-toggle span:first-child { color: var(--ink-2); }
.fam-toggle strong { font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-toggle-ico { display: flex; transition: transform var(--t-mid) var(--ease); }
.fam-toggle[aria-expanded="true"] .fam-toggle-ico { transform: rotate(180deg); }
.fam-toggle:hover { border-color: var(--ink); }

.fam-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.fam {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: var(--hit); padding: 0 var(--s3);
  background: transparent; border: 1px solid var(--rule); border-radius: var(--radius);
  text-align: left; white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.fam-count { font: var(--t-sm)/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fam:hover { border-color: var(--ink); background: var(--paper); }
.fam:active { background: var(--frame); }
.fam[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fam[aria-pressed="true"] .fam-count { color: var(--paper); }

/* narrow: the family list sits behind a disclosure so it never runs off-screen */
@media (max-width: 639px) {
  .rail-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fam-list { display: none; margin-top: var(--s2); }
  .fam-list.is-open { display: flex; }
  .fam { flex: 1 1 auto; }
}
@media (min-width: 640px) {
  .rail-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fam-toggle { display: none; }
}

/* ---------- contact sheet ---------- */
.sheet { padding: var(--s3) var(--s4) calc(var(--bar-h) + var(--s7) + env(safe-area-inset-bottom)); min-width: 0; }
.sheet:focus { outline: none; }
.result-line { font: var(--t-sm)/1.3 var(--mono); color: var(--ink-2); min-height: 1.3em; font-variant-numeric: tabular-nums; }

.group { margin-top: var(--s5); }
.group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding-top: var(--s2); margin-bottom: var(--s3);
  border-top: 1px solid var(--ink);
  font-size: var(--t-base); font-weight: 600; letter-spacing: -0.005em;
}
.group-count { font: 400 var(--t-sm)/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5) var(--s3);
}

.card { position: relative; min-width: 0; }
.frame {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--frame);
  border: 1px solid var(--rule);
  transition: border-color var(--t-fast) var(--ease);
}
.frame-open {
  display: block; width: 100%; height: 100%; padding: 0; border: 0;
  background: transparent; overflow: hidden;
}
.frame-open img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.frame-open:focus-visible { outline-offset: 3px; }
.frame-missing {
  display: grid; place-items: center; height: 100%; padding: var(--s3);
  font: var(--t-sm)/1.4 var(--mono); color: var(--ink-2); text-align: center;
}
.frame::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  border: 3px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}
.card:hover .frame { border-color: var(--ink); }

/* select toggle: a hit area of 44px around a visible 28px box, always shown */
.pick {
  position: absolute; top: 0; right: 0;
  width: var(--hit); height: var(--hit);
  display: grid; place-items: center;
  padding: 0; border: 0; background: transparent;
}
.pick-box {
  width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--radius);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pick .i-on { display: none; }
.pick:hover .pick-box { background: var(--ink); color: var(--paper); }
.pick:active .pick-box { transform: scale(0.94); }
.pick:focus-visible { outline: none; }
.pick:focus-visible .pick-box { outline: 2px solid var(--ink); outline-offset: 2px; }

.slot-tag {
  position: absolute; top: 0; left: 0; z-index: 1;
  display: none; align-items: center; height: 24px; padding: 0 var(--s2);
  background: var(--signal); color: var(--signal-ink);
  font: 500 var(--t-sm)/1 var(--mono); font-variant-numeric: tabular-nums;
}

.card.is-selected .frame { border-color: var(--signal); }
.card.is-selected .frame::after { border-color: var(--signal); }
.card.is-selected .slot-tag { display: inline-flex; }
.card.is-selected .pick-box { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.card.is-selected .pick .i-add { display: none; }
.card.is-selected .pick .i-on { display: block; }
.card.is-selected .pick:hover .pick-box { background: var(--signal-deep); border-color: var(--signal-deep); }

.cap { display: grid; gap: 2px; padding-top: var(--s2); min-width: 0; }
.cap-id { font: 500 var(--t-sm)/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.card.is-selected .cap-id { color: var(--signal); }
.cap-title {
  font-size: var(--t-md); font-weight: 500; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cap-fam { font-size: var(--t-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* loading, empty, error */
.state-msg { font: var(--t-sm)/1.4 var(--mono); color: var(--ink-2); margin: var(--s5) 0 var(--s3); }
.grid.is-loading .frame { border-style: dashed; background: transparent; }
.cap-ghost { height: 38px; margin-top: var(--s2); background: linear-gradient(var(--frame) 0 12px, transparent 12px 18px, var(--frame) 18px 30px, transparent 30px); width: 70%; }
.state-block {
  display: grid; gap: var(--s2); justify-items: start;
  max-width: 52ch; margin-top: var(--s5); padding: var(--s5);
  background: var(--paper); border: 1px solid var(--ink);
}
.state-title { font-size: var(--t-lg); font-weight: 600; }
.state-body { color: var(--ink-2); margin-bottom: var(--s2); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--hit); padding: 0 var(--s4);
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); border-radius: var(--radius);
  font-size: var(--t-base); font-weight: 500; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { background: #2a2e33; color: var(--paper); }
.btn:disabled, .btn:disabled:hover { background: transparent; color: var(--ink-3); border-color: var(--rule); }
.btn.small { min-height: var(--hit); padding: 0 var(--s3); font-size: var(--t-md); }
.btn.primary { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.btn.primary:hover { background: var(--signal-deep); border-color: var(--signal-deep); }
.btn.primary:active { background: #7f0a1d; }
.btn.primary:focus-visible { outline-color: var(--ink); }

.icon-btn {
  width: var(--hit); height: var(--hit); flex: none;
  display: inline-grid; place-items: center; padding: 0;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.icon-btn:hover { border-color: var(--ink); }
.icon-btn:active { background: var(--frame); }
.icon-btn:disabled, .icon-btn:disabled:hover { color: var(--rule-strong); border-color: var(--rule); background: transparent; }
.icon-btn.sm { border-color: transparent; background: transparent; }
.icon-btn.sm:hover { border-color: var(--ink); background: var(--paper); }
.icon-btn.sm:disabled, .icon-btn.sm:disabled:hover { color: var(--ink-3); border: 1px dashed var(--rule-strong); background: transparent; }
.icon-btn.sm:disabled .ico { stroke-width: 1.25; }
.icon-btn span { display: contents; }

/* ---------- build bench ---------- */
.bench {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bench);
  display: flex; flex-direction: column;
  background: var(--paper);
  border-top: 1px solid var(--ink);
  padding-bottom: env(safe-area-inset-bottom);
}
.bench-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s4) var(--s3);
  border-bottom: 1px solid var(--rule);
}
.bench-head h2 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; }
.bench-count { font: var(--t-sm)/1 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bench.has-picks .bench-count { color: var(--signal); }

.bench-body { overflow-y: auto; overscroll-behavior: contain; padding: var(--s3) var(--s4) var(--s4); }
.bench-hint { font-size: var(--t-md); color: var(--ink-2); margin-bottom: var(--s3); max-width: 40ch; }

.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.slot {
  display: grid; grid-template-columns: 28px 40px minmax(0, 1fr);
  grid-template-areas: "v thumb text" "v thumb actions";
  align-items: center; column-gap: var(--s3);
  min-height: 66px; padding: var(--s2) var(--s1) var(--s1) var(--s2);
  background: var(--paper); border: 1px solid var(--rule);
}
.slot-v { grid-area: v; align-self: start; padding-top: 3px; font: 500 var(--t-sm)/1 var(--mono); font-variant-numeric: tabular-nums; }
.slot-thumb {
  grid-area: thumb; align-self: start;
  display: block; width: 40px; height: 50px; padding: 0;
  background: var(--frame); border: 1px solid var(--rule); overflow: hidden;
}
button.slot-thumb:hover { border-color: var(--ink); }
.slot-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.slot-text { grid-area: text; display: grid; min-width: 0; line-height: 1.3; }
.slot-id { font: 500 var(--t-xs)/1.4 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.slot-title { font-size: var(--t-md); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-fam { font-size: var(--t-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-actions { grid-area: actions; display: flex; justify-content: flex-end; margin-top: var(--s1); }
.slot:not(.is-empty) { border-color: var(--ink); }
.slot:not(.is-empty) .slot-v { color: var(--signal); }

.slot.is-empty { border-style: dashed; background: transparent; grid-template-areas: "v thumb text"; padding-bottom: var(--s2); }
.slot.is-empty .slot-v { align-self: center; padding-top: 0; }
.slot.is-empty .slot-v { color: var(--ink-3); }
.slot.is-empty .slot-thumb { background: transparent; border-style: dashed; }
.thumb-missing { padding: 2px; font-size: 9px; line-height: 1.15; letter-spacing: 0; }
.slot-empty { grid-area: text; font-size: var(--t-md); color: var(--ink-2); }

/* the one authored moment: a slide exposed onto the table */
.slot.is-new { animation: expose var(--t-mid) var(--ease) both; }
@keyframes expose {
  from { clip-path: inset(0 100% 0 0); background-color: var(--signal-wash); }
  to { clip-path: inset(0 0 0 0); background-color: var(--paper); }
}

.bench-ids { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); display: grid; gap: var(--s2); }
.bench-ids-text { font: var(--t-sm)/1.5 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.bench-ids-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.bench-ids-actions .btn { flex: 1 1 auto; }

.bench-bar {
  order: -1;
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  min-height: var(--bar-h);
}
.bench-toggle {
  flex: 1; min-width: 0; min-height: 56px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s2);
  padding: var(--s1) var(--s2); text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius);
}
.bench-toggle:hover { border-color: var(--rule); }
.bt-title { font-weight: 600; font-size: var(--t-base); }
.bt-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: 2px;
  font: 500 var(--t-xs)/1 var(--mono); border: 1px solid var(--ink); vertical-align: 1px;
}
.bench.has-picks .bt-count { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.bt-summary {
  grid-column: 1; font: var(--t-sm)/1.4 var(--mono); color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bt-ico { grid-column: 2; grid-row: 1 / span 2; display: flex; transition: transform var(--t-mid) var(--ease); }
.bench-toggle[aria-expanded="true"] .bt-ico { transform: rotate(180deg); }
.compose-btn { flex: none; }
/* Reserved: a second primary bench action ("Send to design team") sits beside .compose-btn.
   On desktop both share the row equally; narrow screens hide the long labels. */
.bench-action { flex: none; }
@media (min-width: 1024px) { .bench-action { flex: 1; min-height: 52px; } }
.compose-btn .long { display: none; }

/* mobile / tablet: the bench is a bottom bar that opens into a sheet */
@media (max-width: 1023px) {
  .bench-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; border: 0; }
  .bench-body { display: none; max-height: min(60dvh, 520px); border-top: 1px solid var(--rule); }
  .bench.is-open .bench-body { display: block; order: -2; border-top: 0; border-bottom: 1px solid var(--rule); }
}

/* ---------- breakpoints ---------- */
@media (min-width: 480px) {
  .compose-btn .long { display: inline; }
}
@media (min-width: 640px) {
  .top { position: sticky; top: 0; z-index: var(--z-top); padding: 0 var(--s5); height: var(--top-h); flex-wrap: nowrap; }
  .search { flex-basis: 240px; }
  .rail { padding: var(--s4) var(--s5) 0; }
  .sheet { padding-left: var(--s5); padding-right: var(--s5); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
}
@media (min-width: 900px) and (max-width: 1023px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .app {
    grid-template-columns: minmax(0, 1fr) var(--bench-w);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "top top" "rail bench" "main bench";
  }
  .bench {
    grid-area: bench; grid-row: 2 / span 2;
    position: sticky; top: var(--top-h); align-self: start;
    height: calc(100dvh - var(--top-h));
    border-top: 0; border-left: 1px solid var(--ink);
    padding-bottom: 0;
  }
  .bench-body { flex: 1; }
  .bench-bar { order: 0; border-top: 1px solid var(--ink); padding: var(--s3) var(--s4); min-height: 0; }
  .bench-toggle { display: none; }
  .compose-btn { flex: 1; min-height: 52px; font-size: var(--t-lg); }
  .sheet { padding-bottom: var(--s7); }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .app {
    grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--bench-w);
    grid-template-rows: auto 1fr;
    grid-template-areas: "top top top" "rail main bench";
  }
  .bench { grid-row: 2; }
  .rail {
    position: sticky; top: var(--top-h); align-self: start;
    height: calc(100dvh - var(--top-h)); overflow-y: auto;
    padding: var(--s4) var(--s3) var(--s5);
    border-right: 1px solid var(--rule);
  }
  .rail-title { position: static; width: auto; height: auto; overflow: visible; clip-path: none; padding: 0 var(--s2); }
  .fam-list { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .fam { display: flex; width: 100%; justify-content: space-between; border-color: transparent; white-space: normal; padding: var(--s2); min-height: 40px; }
  .fam { min-height: var(--hit); }
  .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1680px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- dialogs ---------- */
.dlg {
  padding: 0; border: 1px solid var(--ink); border-radius: 0;
  background: var(--paper); color: var(--ink);
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0;
  overflow: hidden;
}
.dlg[open] { display: flex; flex-direction: column; animation: dlg-in var(--t-mid) var(--ease); }
.dlg::backdrop { background: var(--backdrop); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.dlg-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) var(--s2) var(--s2) var(--s4);
  border-bottom: 1px solid var(--ink); flex: none;
}
.dlg-head h2 { font-size: var(--t-lg); font-weight: 600; }
.dlg-actions { display: flex; gap: var(--s1); }
.detail-pos { font: var(--t-sm)/1.3 var(--mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.detail-ref { color: var(--ink); font-weight: 500; font-size: var(--t-base); margin-right: var(--s2); }

.detail-body { flex: 1; min-height: 0; overflow-y: auto; }
.detail-media { background: var(--table); border-bottom: 1px solid var(--rule); }
.detail-media img { width: 100%; height: auto; margin: 0 auto; }
.detail-media .frame-missing { min-height: 240px; }
.detail-panel { padding: var(--s4) var(--s4) var(--s6); display: grid; gap: var(--s4); align-content: start; }
.detail-intro { display: grid; gap: var(--s3); padding: var(--s4); border-bottom: 1px solid var(--rule); }
.detail-family { font-size: var(--t-md); color: var(--ink-2); }
.detail-title { font-size: var(--t-xl); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; margin-top: calc(var(--s2) * -1); text-wrap: balance; }
.detail-link { font-size: var(--t-md); overflow-wrap: anywhere; }

.select-btn { justify-self: stretch; min-height: 48px; background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.select-btn:hover { background: var(--signal-deep); border-color: var(--signal-deep); color: var(--signal-ink); }
.select-btn .sb-ico { display: flex; }
.select-btn .sb-on { display: none; }
.select-btn[aria-pressed="true"] { background: var(--paper); color: var(--signal); border: 2px solid var(--signal); }
.select-btn[aria-pressed="true"]:hover { background: var(--signal-wash); color: var(--signal-deep); }
.select-btn[aria-pressed="true"] .sb-add { display: none; }
.select-btn[aria-pressed="true"] .sb-on { display: flex; }

.field-block { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.detail-panel > section.field-block:first-of-type { border-top: 0; }
.field-block h3, .dirs-head h3, .compose-out h3 { font-size: var(--t-md); font-weight: 600; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.prose { font-size: var(--t-base); line-height: 1.55; max-width: 68ch; }
.prose.boxed { background: var(--table); padding: var(--s3); font-size: var(--t-md); border: 1px solid var(--rule); }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.tags li { font-size: var(--t-sm); padding: 3px var(--s2); border: 1px solid var(--rule-strong); border-radius: var(--radius); }

@media (min-width: 900px) {
  .dlg { width: calc(100vw - var(--s7)); max-width: 1320px; height: calc(100dvh - var(--s7)); margin: auto; }
  .detail-body { display: grid; grid-template-columns: minmax(0, 1fr) 440px; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  .detail-intro { grid-column: 2; grid-row: 1; padding: var(--s5) var(--s5) var(--s4); border-bottom: 1px solid var(--rule); }
  .detail-media { grid-column: 1; grid-row: 1 / span 2; overflow-y: auto; border-bottom: 0; border-right: 1px solid var(--ink); padding: var(--s5); overscroll-behavior: contain; }
  .detail-panel { grid-column: 2; grid-row: 2; }
  .detail-media img { max-width: 720px; border: 1px solid var(--rule); }
  .detail-panel { overflow-y: auto; padding: var(--s5); overscroll-behavior: contain; }
}

/* compose */
.compose-meta { font: var(--t-sm)/1.4 var(--mono); color: var(--ink-2); margin-top: 2px; }
.compose-body { flex: 1; min-height: 0; overflow-y: auto; }
.compose-form { display: grid; gap: var(--s3); padding: var(--s4); align-content: start; }
.compose-form label { display: grid; gap: var(--s1); }
.lbl, .client-box legend { font-size: var(--t-md); font-weight: 600; }
.opt { font-weight: 400; color: var(--ink-2); margin-left: var(--s1); }
.client-box { margin: 0; padding: var(--s3); border: 1px solid var(--ink); display: grid; gap: var(--s2); }
.client-box legend { padding: 0 var(--s1); }
.hint { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }
.compose-form input, .compose-form textarea {
  width: 100%; min-height: var(--hit); padding: var(--s2) var(--s3);
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius);
  font-size: var(--t-base); line-height: 1.45;
  transition: border-color var(--t-fast) var(--ease);
}
.compose-form textarea { resize: vertical; }
.compose-form input::placeholder, .compose-form textarea::placeholder { color: var(--ink-3); }
.compose-form input:hover, .compose-form textarea:hover { border-color: var(--ink); }
.compose-form input:focus-visible, .compose-form textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.compose-form input:user-invalid { border-color: var(--signal); }
.grid2 { display: grid; gap: var(--s3); }
.dirs-head { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--ink); }
.dirs-cue { display: none; font-size: var(--t-sm); color: var(--ink-2); }
.link-btn {
  min-height: var(--hit); padding: 0 var(--s1); border: 0; background: transparent;
  font-size: var(--t-sm); font-weight: 500; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.link-btn:hover { text-decoration-thickness: 2px; }
/* narrow Compose: directions and the live-prompt cue come first, fields follow */
@media (max-width: 899px) {
  .dirs-head { order: -3; margin-top: 0; border-top: 0; }
  #cDirs { order: -2; }
  .dirs-cue { display: block; order: -1; padding-bottom: var(--s3); border-bottom: 1px solid var(--ink); }
}

.compose-out { display: grid; gap: var(--s2); padding: var(--s4); background: var(--table); border-top: 1px solid var(--ink); align-content: start; min-width: 0; }
.compose-out pre {
  margin: 0; padding: var(--s3);
  background: var(--paper); border: 1px solid var(--rule);
  font: var(--t-sm)/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 60dvh; overflow-y: auto;
}

.dlg-foot {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom)) var(--s4);
  border-top: 1px solid var(--ink); background: var(--paper);
}
.dlg-foot .btn { min-height: 48px; padding: 0 var(--s5); }
@media (max-width: 559px) { .dlg-foot .hint { display: none; } .dlg-foot .btn { flex: 1; } }

@media (min-width: 640px) { .grid2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .compose-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; }
  .compose-form { overflow-y: auto; padding: var(--s5); overscroll-behavior: contain; }
  .compose-out { border-top: 0; border-left: 1px solid var(--ink); padding: var(--s5); overflow: hidden; grid-template-rows: auto minmax(0, 1fr); }
  .compose-out pre { max-height: none; height: 100%; }
}

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--bar-h) + var(--s4) + env(safe-area-inset-bottom)); z-index: var(--z-toast);
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--paper); padding: var(--s3) var(--s4); border-radius: var(--radius);
  font: var(--t-md)/1.3 var(--mono);
  max-width: calc(100vw - var(--s6));
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.dlg .toast { bottom: calc(80px + env(safe-area-inset-bottom)); left: 50%; }
@media (min-width: 1024px) { .toast { bottom: var(--s5); left: calc(50% - var(--bench-w) / 2); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* The hidden attribute must win over component display rules (e.g. .btn). */
[hidden] { display: none !important; }

/* ---------- owner: add a reference ---------- */
.add-ref-btn { flex: none; gap: var(--s1); min-height: var(--hit); padding: 0 var(--s3); font-size: var(--t-md); }
.add-ref-btn > span:first-child { display: flex; }
.drop {
  box-sizing: border-box; height: auto;
  display: grid; gap: var(--s1); place-items: center; text-align: center; min-height: 132px; padding: var(--s4);
  border: 1px dashed var(--rule-strong); background: var(--table); cursor: pointer; font-size: var(--t-md);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.drop strong { font-size: var(--t-base); }
.drop:hover, .drop.is-over { border-color: var(--ink); background: var(--paper); }
.drop:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.drop.has-image { min-height: 76px; padding: var(--s3); }
.compose-form > .drop { flex: none; }
.link-like { text-decoration: underline; text-underline-offset: 3px; }
.a-fields { display: grid; gap: var(--s3); }
.a-fields[hidden] { display: none; }
.a-shot { display: grid; place-items: center; min-height: 160px; background: var(--paper); border: 1px solid var(--rule); overflow: auto; max-height: 60dvh; }
.a-shot img { width: 100%; height: auto; display: block; align-self: start; }
@media (min-width: 900px) { .a-shot { max-height: none; height: 100%; place-items: start center; } }
@media (max-width: 559px) { .add-ref-btn > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .add-ref-btn { width: var(--hit); padding: 0; justify-content: center; } }