/* Taam — base.css: tokens, reset, type, layout primitives, the two shells and every SHARED component.
   Screen styles live in client.css, report.css, studio.css and library.css and build on the classes below.
   Theme: the drafting table (docs/spec/ux.md section 5). One theme, RTL only, logical properties throughout.
   Breakpoints: phone < 600px, tablet 600–1099px, desk >= 1100px.

   CLASS VOCABULARY
   ----------------
   Type        .t-display .t-h1 .t-h2 .t-h3 .t-body .t-body-s .t-label .t-annot .t-figure
               .c-ink .c-graphite .c-pencil .c-blue .c-redline .c-mat      text colours
               .measure (62 characters max)   .nums (tabular figures)   .nowrap   .truncate
   Layout      .stack (column; gap = --gap, default 16px)  .stack--2 … .stack--8 (gap = --s-N)
               .row (wrapping row, centred, gap 12px)  .row--between  .row--end  .row--top  .row--tight  .row--nowrap
               .grow (flex: 1)   .section (space between page sections: 48px phone / 72px desk)
               .only-phone  .not-phone  .only-desk  .not-desk   .sr-only   .no-print   .print-only
   Surfaces    .panel (paper on the board)  .panel--vellum  .panel--blue  .panel--trace  .panel--red  .panel--flush
               Every surface sets --surface, which labelled dimension lines use to "break" the line.
               .hatch-red  .hatch-graphite (45 degree hatch fills)
   Shells      .shell  .shell--client  .shell--studio  .shell--bare (swipe: no header, fixed viewport)
               .hdr  .wordmark  .hdr__end  .snav  .snav__link  .shell__main
               .col (client column: 1040px max, gutters)   .split > .split__text + .split__visual (6 + 5 of 12 from tablet up)
               .page (studio container: 1200px max, gutters 16/24/40, margin column on desk)
               .page-head (title at the start, actions at the end)   .band (offline / in-person band)   .alert
   Controls    .btn  .btn--primary  .btn--secondary  .btn--quiet  .btn--danger  .btn--quiet-danger  .btn--full  .btn--sm
               .icon-btn   .link   .field  .field__label  .field__input  .field__hint  .field__error  .field--error
               .copyfield  .token  .token--swatch  .tokens (wrapping token row)  .tokens--scroll (one scrolling row)
               .seg  .seg__item   .pill  .pill--none/--invited/--open/--done   .tag  .tag--shared/--clash/--gap
               .disclosure
   Drafting    .dim (dimension line; .dim--draw animates it)  .dim__label
               .sec-head  .sec-marker   .tblock  .tblock__main  .tblock__cell  .tblock--link
               .void  .void--glyph   .empty (empty state)   .revision   .crumb
   Styles      .chip  .chip--sm/--md/--lg  .chip--avoid  .swatch  .swatch--sm/--md/--lg  .swatch--hatch
               .sbar (strength bar)  .sbar--hatch   .conf (confidence ticks)
               .scale (bipolar scale bar)  .scale--clear/--mild/--none  .scale--household
               .bubble  .bubble--16/--24/--32  .bubble--loved  .bubble--active
               .mtile (material tile)  .mood (mood token)
   Photos      .photo (4:5 tile with fade-in; .photo--fill fills its parent instead)  .photo.is-loaded
               .pgrid (grid; --cols)  .pgrid--3  .pgrid--studio (3/4/6)  .pgrid--library (2/4/6)  .pgrid--mood
               .ptile  .ptile__flag  .ptile__cap  .ptile__hover  .ptile__strip  .ptile--hero (2 x 2)
               .card (swipe card face)  .card__photo  .card__label   .stamp  .stamp--like/--dislike/--love  .stamp--sm
   Overlays    .scrim  .modal  .modal--dialog  .modal--drawer  .modal__title  .modal__body  .modal__actions
               .menu  .menu__list  .menu__item   .lightbox   .toast-host  .toast
*/

/* ---------- tokens (ux.md 5.2 – 5.7) ---------- */

:root {
  /* surfaces */
  --c-board:  #E6E9E8;
  --c-sheet:  #FBFCFB;
  --c-vellum: #F1F3F2;

  /* ink */
  --c-ink:      #15212B;
  --c-graphite: #465460;
  --c-pencil:   #5A6670;

  /* lines */
  --c-rule:        #C9CFD1;
  --c-rule-strong: #76828A;

  /* blueprint */
  --c-blue:      #1D4E89;
  --c-blue-deep: #153A66;
  --c-blue-wash: #E2EBF5;

  /* tracing paper */
  --c-trace:      #F2CB3D;
  --c-trace-wash: #FBF1C7;
  --c-trace-ink:  #6B5000;

  /* correction pencil */
  --c-redline:      #B3261E;
  --c-redline-wash: #FBE9E7;

  /* cutting mat */
  --c-mat:      #1F6B52;
  --c-mat-wash: #E1F0EA;

  --c-scrim: rgba(21, 33, 43, 0.56);
  --c-scrim-text: rgba(21, 33, 43, 0.7);  /* scrim that carries text: sheet-on-scrim stays above 4.5:1 even over a white photo */
  --c-outline: rgba(21, 33, 43, 0.18);   /* outline of swatch strips and material tiles */

  --font-text: "IBM Plex Sans Hebrew", "Noto Sans Hebrew", "Segoe UI", "Arial Hebrew", Arial, system-ui, sans-serif;
  --font-label: "Miriam Libre", "Miriam", "IBM Plex Sans Hebrew", "Arial Hebrew", Arial, sans-serif;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;

  --r-1: 2px;
  --r-2: 6px;
  --r-card: 10px;
  --r-round: 999px;

  --e-card: 0 1px 2px rgba(21,33,43,.12), 0 14px 30px -10px rgba(21,33,43,.30);
  --e-pop:  0 2px 6px rgba(21,33,43,.10), 0 18px 44px -12px rgba(21,33,43,.34);

  --t-1: 90ms;  --t-2: 140ms; --t-3: 220ms; --t-4: 260ms; --t-5: 360ms;
  --ease-out:    cubic-bezier(.2, .8, .2, 1);
  --ease-exit:   cubic-bezier(.5, 0, .9, .4);
  --ease-spring: cubic-bezier(.3, 1.45, .5, 1);
  --ease-std:    cubic-bezier(.4, 0, .2, 1);

  /* layout */
  --gutter: 16px;
  --hdr-h: 56px;
  --btn-h: 48px;
  --section-gap: var(--s-7);
  --margin-col: 0px;            /* the studio's marker margin; only desk gives it a width */
  --surface: var(--c-board);    /* the colour under the current element; panels override it */

  /* Section hatching. A CSS hatch has to be a repeating gradient; it reads as line work, not as a blend. */
  --hatch-red: repeating-linear-gradient(45deg, var(--c-redline) 0 1.5px, transparent 1.5px 5px);
  --hatch-graphite: repeating-linear-gradient(45deg, var(--c-graphite) 0 1.5px, transparent 1.5px 5px);
}

@media (min-width: 600px)  { :root { --gutter: 24px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; --btn-h: 44px; --section-gap: var(--s-8); } }

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--hdr-h) + var(--s-4));
  /* iOS Safari: two quick taps on a button must not zoom the page. Pinch zoom and scrolling stay. */
  touch-action: manipulation;
}
/* The deck screen never scrolls: no elastic bounce or pull-to-refresh on the root either (iOS 16+). */
html:has(.shell--bare), html:has(.shell--bare) body { overscroll-behavior: none; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--c-board);
  color: var(--c-ink);
  font: 400 1rem/1.625 var(--font-text);
  text-align: start;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* viewport-fit=cover: keep content clear of the notch in landscape (both are 0 in portrait). */
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
button:disabled { cursor: default; }
a { color: var(--c-blue); text-underline-offset: 3px; }
table { border-collapse: collapse; border-spacing: 0; }
th { font-weight: inherit; text-align: start; }
em, i, cite, address { font-style: normal; }     /* Hebrew has no italics */
[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
/* A page title only receives focus from the router, so the next Tab starts at the top of the page. */
h1[tabindex="-1"]:focus-visible { outline: none; }

::selection { background: var(--c-blue-wash); color: var(--c-ink); }

/* ---------- type roles (5.3) ---------- */

.t-display {
  font: 600 2.125rem/2.375rem var(--font-text);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.t-h1, h1 { font: 600 1.625rem/2rem var(--font-text); text-wrap: balance; }
.t-h2, h2 { font: 600 1.25rem/1.75rem var(--font-text); text-wrap: balance; }
.t-h3, h3 { font: 600 1.0625rem/1.5rem var(--font-text); text-wrap: balance; }
.t-body   { font: 400 1rem/1.625rem var(--font-text); }
.t-body-s { font: 400 0.875rem/1.375rem var(--font-text); }
.t-label  { font: 700 0.75rem/1rem var(--font-label); letter-spacing: 0.06em; }
.t-annot  { font: 400 0.8125rem/1.125rem var(--font-label); letter-spacing: 0.02em; }
.t-figure { font: 700 1.25rem/1.5rem var(--font-label); font-variant-numeric: tabular-nums; }

@media (min-width: 1100px) {
  .t-display { font-size: 2.75rem; line-height: 3rem; }
  .t-h1, h1  { font-size: 1.875rem; line-height: 2.25rem; }
  .t-h2, h2  { font-size: 1.375rem; line-height: 1.875rem; }
}

.c-ink { color: var(--c-ink); }
.c-graphite { color: var(--c-graphite); }
.c-pencil { color: var(--c-pencil); }
.c-blue { color: var(--c-blue); }
.c-redline { color: var(--c-redline); }
.c-mat { color: var(--c-mat); }

.measure { max-width: 62ch; }
.nums { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------- layout primitives ---------- */

.stack { display: flex; flex-direction: column; gap: var(--gap, var(--s-4)); min-width: 0; }
.stack--1 { --gap: var(--s-1); } .stack--2 { --gap: var(--s-2); } .stack--3 { --gap: var(--s-3); }
.stack--4 { --gap: var(--s-4); } .stack--5 { --gap: var(--s-5); } .stack--6 { --gap: var(--s-6); }
.stack--7 { --gap: var(--s-7); } .stack--8 { --gap: var(--s-8); }
.stack > * { --gap: initial; }            /* a nested stack starts again from the default */

.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); min-width: 0; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.row--top { align-items: flex-start; }
.row--tight { gap: var(--s-2); }
.row--nowrap { flex-wrap: nowrap; }
.grow { flex: 1 1 0; min-width: 0; }

.section + .section { margin-block-start: var(--section-gap); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.print-only { display: none !important; }

@media (min-width: 600px)  { .only-phone { display: none !important; } }
@media (max-width: 599.98px) { .not-phone { display: none !important; } }
@media (max-width: 1099.98px) { .only-desk { display: none !important; } }
@media (min-width: 1100px) { .not-desk { display: none !important; } }

/* ---------- surfaces ---------- */

.panel {
  --surface: var(--c-sheet);
  background: var(--surface);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-1);
  padding: var(--s-4);
}
.panel--vellum { --surface: var(--c-vellum); }
.panel--blue   { --surface: var(--c-blue-wash); border-color: transparent; }
.panel--trace  { --surface: var(--c-trace-wash); border-color: transparent; }
.panel--red    { --surface: var(--c-redline-wash); border-color: transparent; }
.panel--flush  { padding: 0; }
@media (min-width: 600px) { .panel { padding: var(--s-5); } .panel--flush { padding: 0; } }

.hatch-red { background-image: var(--hatch-red); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.hatch-graphite { background-image: var(--hatch-graphite); print-color-adjust: exact; -webkit-print-color-adjust: exact; }

/* ---------- boot (static markup in index.html) ---------- */

.boot {
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--s-7) var(--gutter);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s-3);
  max-width: 520px; margin-inline: auto;
}
.boot__text { color: var(--c-graphite); }
.boot__title { margin-block-start: var(--s-4); }
.boot .btn { margin-block-start: var(--s-3); }

/* ---------- shells (2.0) ---------- */

.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.shell__main { flex: 1 0 auto; display: block; min-width: 0; }

.wordmark {
  font: 700 1.5rem/1 var(--font-text);
  color: var(--c-ink);
  text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
}

.hdr {
  min-height: var(--hdr-h);
  display: flex; align-items: center; gap: var(--s-4);
  padding-inline: var(--gutter);
  border-block-end: 1px solid var(--c-rule-strong);
  background: var(--c-board);
}
.hdr__inner {
  width: 100%; margin-inline: auto;
  display: flex; align-items: center; gap: var(--s-4); min-height: calc(var(--hdr-h) - 1px);   /* + the 1px rule = 56 */
}
.shell--client .hdr__inner { max-width: 1040px; justify-content: space-between; }
.shell--studio .hdr__inner { max-width: 1120px; }
.hdr__end { color: var(--c-graphite); max-width: 60%; }
.hdr__brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--c-ink); }
.hdr__brand .t-label {
  color: var(--c-graphite);
  padding-inline-start: var(--s-3);
  border-inline-start: 1px solid var(--c-rule-strong);
}

/* Studio navigation: three text links; the current one carries a 2px ink underline. */
.snav { display: flex; align-items: stretch; gap: var(--s-5); margin-inline-start: var(--s-5); }
.snav__link {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: calc(var(--hdr-h) - 1px);
  font: 500 0.9375rem/1.25rem var(--font-text);
  color: var(--c-graphite);
  text-decoration: none;
  white-space: nowrap;
}
.snav__link:hover { color: var(--c-ink); }
.snav__link[aria-current="page"] { color: var(--c-ink); font-weight: 600; }
.snav__link[aria-current="page"]::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--c-ink);
}
@media (max-width: 599.98px) {
  .shell--studio .hdr { padding-inline: 0; }
  .shell--studio .hdr__inner { flex-wrap: wrap; gap: 0; }
  .hdr__brand { padding-inline: var(--gutter); min-height: calc(var(--hdr-h) - 1px); flex: 1 0 100%; }
  .snav {
    flex: 1 0 100%; margin: 0; padding-inline: var(--gutter); gap: 0 var(--s-5);
    border-block-start: 1px solid var(--c-rule);
    /* One row at the default text size; at a large one the links wrap, so all three stay on screen. */
    flex-wrap: wrap;
  }
  .snav__link { min-height: 40px; }
}

.skip-link {
  position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 200;
  padding: 10px 16px; border-radius: var(--r-2);
  background: var(--c-ink); color: var(--c-sheet); text-decoration: none;
  font: 600 0.875rem/1.25rem var(--font-text);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; outline: 2px solid var(--c-trace); outline-offset: 2px; }

/* Client column and the text / visual split. */
.col { width: 100%; max-width: calc(1040px + 2 * var(--gutter)); margin-inline: auto; padding: var(--s-5) var(--gutter) var(--s-7); }
.split { display: grid; gap: var(--s-5); }
@media (min-width: 600px) {
  .split { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-5); align-items: start; }
  .split__text { grid-column: 1 / span 6; }
  .split__visual { grid-column: 8 / span 5; }
}

/* The swipe route: the screen owns the whole viewport, nothing scrolls. */
.shell--bare { height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.shell--bare .shell__main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* Studio page container. On desk the content starts one grid column in; markers hang in that margin. */
.page {
  width: 100%; max-width: 1200px; margin-inline: auto;
  padding: var(--s-5) var(--gutter) var(--s-8);
}
@media (min-width: 1100px) {
  .shell--studio { --margin-col: 96px; }
  .page { padding-inline-start: calc(var(--gutter) + var(--margin-col)); padding-block-start: var(--s-6); }
}
.page--narrow > * { max-width: 640px; }
.page--report > * { max-width: 860px; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-4); }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }

/* 36px band under the header: offline notice, in-person session. */
.band {
  min-height: 36px; padding: 6px var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  background: var(--c-trace-wash); color: var(--c-ink);
  border-block-end: 1px solid var(--c-rule-strong);
  font: 400 0.875rem/1.375rem var(--font-text);
}
.band .icon { flex: none; }

/* Persistent alert at the top of a page (storage blocked). */
.alert {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--gutter);
  background: var(--c-redline-wash); color: var(--c-ink);
  border-block-end: 1px solid var(--c-redline);
  font: 400 0.875rem/1.375rem var(--font-text);
}
.alert .icon { color: var(--c-redline); flex: none; }

/* ---------- icons (5.10) ---------- */

.icon {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter;
}
.icon--solid { fill: currentColor; stroke: none; }

/* ---------- buttons (5.8.15) ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--btn-h); max-width: 100%; padding: 8px 20px;
  border: 1px solid transparent; border-radius: var(--r-2);
  font: 600 1rem/1.25rem var(--font-text);
  /* A label wraps before it pushes the page sideways (large text sizes, 6.1). */
  text-decoration: none; text-align: center; white-space: normal;
  cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: transform var(--t-1) var(--ease-std), opacity var(--t-2) var(--ease-std);
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
.btn .icon { width: 20px; height: 20px; }

.btn--primary { background: var(--c-blue); color: var(--c-sheet); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: var(--c-blue-deep); } }
.btn--primary:focus-visible { outline-color: var(--c-ink); }

.btn--secondary { background: var(--c-sheet); color: var(--c-ink); border-color: var(--c-ink); }
@media (hover: hover) and (pointer: fine) { .btn--secondary:hover { background: var(--c-vellum); } }

.btn--quiet, .btn--quiet-danger { color: var(--c-blue); padding-inline: var(--s-2); min-height: 44px; }
.btn--quiet:hover, .btn--quiet-danger:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn--quiet-danger { color: var(--c-redline); }

.btn--danger { background: var(--c-redline); color: var(--c-sheet); }
@media (hover: hover) and (pointer: fine) { .btn--danger:hover { background: #8F1E18; } }
.btn--danger:focus-visible { outline-color: var(--c-ink); }

.btn--full { display: flex; width: 100%; }
.btn--sm { min-height: 36px; padding: 6px 14px; font-size: 0.875rem; }
@media (max-width: 599.98px) { .btn--full-phone { display: flex; width: 100%; } }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-2); color: var(--c-ink);
  text-decoration: none;
  transition: transform var(--t-1) var(--ease-std);
}
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--c-vellum); } }
.icon-btn:active:not(:disabled) { transform: scale(.94); }
.icon-btn:disabled { opacity: .35; }

.link { color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link--quiet { text-decoration: none; }
.link--quiet:hover { text-decoration: underline; }

/* ---------- fields ---------- */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font: 600 0.875rem/1.375rem var(--font-text); display: flex; align-items: center; gap: var(--s-2); }
.field__optional { font-weight: 400; color: var(--c-pencil); }
.field__input {
  width: 100%; min-height: 48px; padding: 0 12px;
  background: var(--c-sheet); color: var(--c-ink);
  border: 1px solid var(--c-rule-strong); border-radius: var(--r-2);
  font: 400 1rem/1.5rem var(--font-text);
  appearance: none;
}
textarea.field__input { padding-block: 12px; min-height: 120px; resize: vertical; line-height: 1.625rem; }
select.field__input { padding-inline-end: 32px; }
.field__input::placeholder { color: var(--c-pencil); opacity: 1; }
.field__input:focus { outline: none; border-color: var(--c-blue); box-shadow: inset 0 0 0 1px var(--c-blue); }
.field__input[readonly] { background: var(--c-vellum); }
/* Links and phone numbers are typed left to right, but their Hebrew placeholder still reads right to left. */
.field__input[dir="ltr"] { text-align: left; }
.field__input[dir="ltr"]:placeholder-shown { direction: rtl; text-align: right; }
.field__hint { font: 400 0.875rem/1.375rem var(--font-text); color: var(--c-pencil); }
.field__error {
  display: flex; align-items: flex-start; gap: 6px;
  font: 400 0.875rem/1.375rem var(--font-text); color: var(--c-redline);
}
.field__error .icon { width: 18px; height: 18px; margin-block-start: 2px; }
.field--error .field__input { border-color: var(--c-redline); box-shadow: inset 0 0 0 1px var(--c-redline); }

/* Link field: read-only LTR text with a copy button joined to its end. */
.copyfield { display: flex; align-items: stretch; min-width: 0; }
.copyfield .field__input {
  flex: 1 1 0; min-width: 0;
  font: 400 0.8125rem/1.125rem var(--font-label); letter-spacing: 0.02em;
  text-overflow: ellipsis;
  border-start-end-radius: 0; border-end-end-radius: 0; border-inline-end: 0;
}
.copyfield .icon-btn {
  height: auto; min-height: 48px; width: 48px;
  background: var(--c-sheet);
  border: 1px solid var(--c-rule-strong);
  border-start-start-radius: 0; border-end-start-radius: 0;
}
@media (hover: hover) and (pointer: fine) { .copyfield .icon-btn:hover { background: var(--c-vellum); } }

/* ---------- tokens, segmented control, pills, tags ---------- */

.tokens { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tokens--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.tokens--scroll::-webkit-scrollbar { display: none; }

.token {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 32px; padding: 0 12px;
  background: var(--c-sheet); color: var(--c-ink);
  border: 1px solid var(--c-rule-strong); border-radius: var(--r-2);
  font: 400 0.875rem/1.375rem var(--font-text); white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .token:hover { background: var(--c-vellum); } }
.token[aria-pressed="true"], .token[aria-checked="true"] { background: var(--c-ink); color: var(--c-sheet); border-color: var(--c-ink); }
.token[aria-pressed="true"]:focus-visible, .token[aria-checked="true"]:focus-visible { outline-offset: 3px; }
.token:disabled { opacity: .4; }
.token .icon { width: 16px; height: 16px; }
/* Style token: keeps its paint chips readable, so selection is a heavier frame and a check, not a fill. */
.token--swatch { padding-inline: 8px 10px; }
.token--swatch[aria-pressed="true"], .token--swatch[aria-checked="true"] {
  background: var(--c-sheet); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink);
}

.seg { display: inline-flex; border: 1px solid var(--c-rule-strong); border-radius: var(--r-2); overflow: hidden; background: var(--c-sheet); }
.seg__item {
  min-height: 36px; min-width: 44px; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font: 400 0.875rem/1.375rem var(--font-text); white-space: nowrap;
}
.seg__item + .seg__item { border-inline-start: 1px solid var(--c-rule-strong); }
@media (hover: hover) and (pointer: fine) { .seg__item:hover { background: var(--c-vellum); } }
.seg__item[aria-checked="true"] { background: var(--c-ink); color: var(--c-sheet); }
.seg__item:focus-visible { outline-offset: -3px; }
.seg__item[aria-checked="true"]:focus-visible { outline-color: var(--c-trace); }

.pill, .tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: var(--r-1);
  font: 700 0.75rem/1rem var(--font-label); letter-spacing: 0.06em;
  white-space: nowrap;
}
/* Status pills: the mark changes shape as well as colour. */
.pill__mark { position: relative; width: 8px; height: 8px; flex: none; border: 1.5px solid currentColor; border-radius: 50%; overflow: hidden; }
.pill--none { color: var(--c-pencil); box-shadow: inset 0 0 0 1px var(--c-rule-strong); }
.pill--invited { color: var(--c-blue); background: var(--c-blue-wash); }
.pill--invited .pill__mark::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 50%; background: currentColor; }
.pill--open { color: var(--c-trace-ink); background: var(--c-trace-wash); }
.pill--open .pill__mark { width: 9px; height: 9px; }
.pill--open .pill__mark::after { content: ""; position: absolute; inset: 1.5px; border-radius: 50%; background: currentColor; }
.pill--done { color: var(--c-mat); background: var(--c-mat-wash); }
.pill--done .pill__mark { background: currentColor; }

.tag--shared { color: var(--c-blue); background: var(--c-blue-wash); }
.tag--clash, .tag--gap { color: var(--c-redline); background: var(--c-redline-wash); }
.tag__hatch { width: 8px; height: 8px; flex: none; background-image: var(--hatch-red); outline: 1px solid var(--c-redline); outline-offset: -1px; }

.disclosure { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.disclosure > .btn .icon { transition: transform var(--t-2) var(--ease-std); transform: rotate(-90deg); }
.disclosure > .btn[aria-expanded="true"] .icon { transform: rotate(90deg); }
.disclosure__body { width: 100%; }

/* ---------- drafting devices (5.8.10, 5.8.17) ---------- */

/* Dimension line: replaces <hr>. A label sits on the line with the surface colour behind it. */
.dim { position: relative; display: flex; align-items: center; min-height: 18px; margin: 0; border: 0; }
.dim::before {
  content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; margin-top: -0.5px;
  background: var(--c-rule-strong);
}
.dim__tick {
  position: absolute; top: 50%; width: 1.5px; height: 9px; margin-top: -4.5px;
  background: var(--c-rule-strong); transform: rotate(45deg);
}
.dim__tick--s { inset-inline-start: 4px; }
.dim__tick--e { inset-inline-end: 4px; }
.dim__label {
  position: relative; margin-inline-start: 20px; padding-inline: 8px;
  background: var(--surface); color: var(--c-pencil);
  font: 400 0.8125rem/1.125rem var(--font-label); letter-spacing: 0.02em;
}
.dim--center { justify-content: center; }
.dim--center .dim__label { margin: 0; }
/* The line draws itself from the start (the right-hand side; the app is RTL only). */
.dim--draw::before { transform-origin: 100% 50%; animation: dim-draw var(--draw-ms, var(--t-5)) var(--ease-out) both; }
@keyframes dim-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Section marker and heading. */
.sec-head { position: relative; display: flex; align-items: center; gap: 0; margin-block-end: var(--s-4); }
.sec-marker {
  display: inline-flex; align-items: center; flex: none;
}
.sec-marker__circle {
  width: 28px; height: 28px; border: 1.5px solid var(--c-ink); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 0.875rem/1 var(--font-label); background: var(--surface);
}
.sec-marker::after { content: ""; width: 12px; height: 1.5px; background: var(--c-ink); margin-inline-end: var(--s-2); }
.sec-head__title { min-width: 0; }
@media (min-width: 1100px) {
  /* In the studio the marker hangs in the margin column; its leader reaches the heading. */
  .shell--studio .sec-head .sec-marker { position: absolute; inset-inline-end: 100%; top: 50%; transform: translateY(-50%); }
}

/* Title block: a framed table of cells, like the corner of a drawing sheet. */
.tblock {
  --surface: var(--c-sheet);
  display: grid; gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--c-rule-strong);
  border: 1px solid var(--c-ink); border-radius: var(--r-1);
  overflow: hidden;
  color: var(--c-ink); text-decoration: none;
}
.tblock__main, .tblock__cell { background: var(--c-sheet); padding: 10px 14px; min-width: 0; }
.tblock__main { grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.tblock__cell { display: flex; flex-direction: column; gap: 2px; }
.tblock__cell:last-child:nth-child(even) { grid-column: 1 / -1; }   /* an odd cell out fills its row */
.tblock__cap { font: 700 0.75rem/1rem var(--font-label); letter-spacing: 0.06em; color: var(--c-pencil); }
.tblock__val { font: 700 1.25rem/1.5rem var(--font-label); font-variant-numeric: tabular-nums; min-width: 0; }
.tblock__val--text { font: 600 1.0625rem/1.5rem var(--font-text); }
.tblock__sub { font: 400 0.875rem/1.375rem var(--font-text); color: var(--c-graphite); }
@media (min-width: 600px) {
  .tblock { grid-template-columns: minmax(0, 2fr) repeat(var(--cells, 3), minmax(0, 1fr)); }
  .tblock__main { grid-column: auto; }
  .tblock__cell:last-child:nth-child(even) { grid-column: auto; }
  .tblock--stacked { grid-template-columns: repeat(var(--cells, 3), minmax(0, 1fr)); }
  .tblock--stacked .tblock__main { grid-column: 1 / -1; }
}
/* Project card: a title block that is a link. The frame thickens with an outline so nothing shifts. */
.tblock--link { position: relative; cursor: pointer; }
.tblock--link:hover { outline: 1px solid var(--c-ink); }
.tblock--link:hover::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--c-blue);
}
.tblock--link:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }

/* Void: the plan symbol for an opening. Empty states and photos that did not load. */
.void {
  position: relative; display: block;
  background: var(--c-vellum); border: 1px solid var(--c-rule-strong);
}
.void__x { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; stroke: var(--c-rule-strong); stroke-width: 1; fill: none; }
.void--glyph { width: 72px; height: 56px; flex: none; }
.void__cap {
  position: absolute; inset-inline: 8px; top: 50%; transform: translateY(-50%);
  margin-inline: auto; width: fit-content; max-width: calc(100% - 16px);
  padding: 2px 8px; background: var(--c-vellum); color: var(--c-pencil); text-align: center;
  font: 400 0.8125rem/1.125rem var(--font-label); letter-spacing: 0.02em;
}

.empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding-block: var(--s-5); }
.empty__body { color: var(--c-graphite); max-width: 62ch; }
.empty__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-2); }

/* Revision triangle: marks a tag the designer edited. */
.revision { width: 12px; height: 12px; flex: none; display: inline-block; }
.revision path { fill: var(--c-trace); stroke: var(--c-ink); stroke-width: 1; print-color-adjust: exact; -webkit-print-color-adjust: exact; }

/* Breadcrumb. */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-block-end: var(--s-4);
  font: 400 0.8125rem/1.125rem var(--font-label); letter-spacing: 0.02em; color: var(--c-pencil); }
.crumb ol { display: contents; }
.crumb li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.crumb a { color: var(--c-blue); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.crumb a:hover { text-decoration: underline; }
.crumb .icon { width: 16px; height: 16px; color: var(--c-rule-strong); }
.crumb [aria-current="page"] { color: var(--c-ink); }

/* ---------- styles: chip, swatch, strength, confidence (5.8.5, 5.8.8) ---------- */

.swatch {
  display: inline-flex; flex: none; position: relative; overflow: hidden;
  border-radius: var(--r-1);
  box-shadow: inset 0 0 0 1px var(--c-outline);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.swatch i { display: block; width: 6px; height: 16px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.swatch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--c-outline); pointer-events: none; }
.swatch--md i { width: 12px; height: 28px; }
.swatch--lg { display: flex; width: 100%; }
.swatch--lg i { flex: 1 1 0; width: auto; height: 56px; }
.swatch--hatch::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image: var(--hatch-red); print-color-adjust: exact; -webkit-print-color-adjust: exact;
}

.chip { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; color: var(--c-ink); text-align: start; }
.chip__name { font: 500 0.875rem/1.375rem var(--font-text); min-width: 0; }
.chip__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.chip__desc { font: 400 0.875rem/1.375rem var(--font-text); color: var(--c-graphite); }
.chip__cap { font: 700 0.75rem/1rem var(--font-label); letter-spacing: 0.06em; color: var(--c-pencil); }
.chip--md { display: flex; align-items: flex-start; gap: var(--s-3); }
.chip--md .chip__name { font: 600 1.0625rem/1.5rem var(--font-text); }
.chip--md .swatch { margin-block-start: 2px; }
.chip--lg {
  --surface: var(--c-sheet);
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  background: var(--c-sheet); border: 1px solid var(--c-rule-strong); border-radius: var(--r-1); overflow: hidden;
}
.chip--lg .swatch { border-radius: 0; }
.chip--lg .chip__text { padding: 12px 14px; gap: 4px; }
.chip--lg .chip__name { font: 600 1.25rem/1.75rem var(--font-text); }
.chip--avoid .chip__name { color: var(--c-graphite); }
button.chip, a.chip { cursor: pointer; text-decoration: none; border-radius: var(--r-1); }
button.chip:hover .chip__name, a.chip:hover .chip__name { text-decoration: underline; text-underline-offset: 3px; }
button.chip--lg { width: 100%; }

.sbar { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.sbar__track {
  position: relative; flex: 1 1 auto; min-width: 40px; height: 6px;
  background: var(--c-vellum); border: 1px solid var(--c-rule); overflow: hidden;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.sbar__fill {
  position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--c-ink);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.sbar--hatch .sbar__fill { background: var(--hatch-graphite); }
.sbar__fig { flex: none; font: 400 0.8125rem/1.125rem var(--font-label); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--c-ink); }
.sbar__range { color: var(--c-pencil); }

.conf { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 400 0.8125rem/1.125rem var(--font-label); letter-spacing: 0.02em; color: var(--c-graphite); }
.conf__ticks { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.conf__ticks i { width: 3px; background: var(--c-rule); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.conf__ticks i:nth-child(1) { height: 6px; }
.conf__ticks i:nth-child(2) { height: 10px; }
.conf__ticks i:nth-child(3) { height: 14px; }
.conf__ticks i.is-on { background: var(--c-ink); }

/* ---------- bipolar scale bar (5.8.6) ---------- */
/* The negative pole is at the start (the right-hand side). Marker transforms are physical: RTL only. */

.scale {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "neg pos" "line line" "end end";
  gap: 2px var(--s-3);
}
.scale__pole { font: 700 0.75rem/1rem var(--font-label); letter-spacing: 0.06em; color: var(--c-pencil); font-weight: 400; }
.scale__pole--neg { grid-area: neg; text-align: start; }
.scale__pole--pos { grid-area: pos; text-align: end; }
.scale__pole.is-lean { color: var(--c-ink); }
.scale--clear .scale__pole.is-lean { font-weight: 700; }
.scale__line { grid-area: line; position: relative; height: 24px; margin-inline: 6px; }
.scale__line::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; margin-top: -0.5px; background: var(--c-rule-strong); }
.scale__tick { position: absolute; top: 50%; width: 1px; height: 5px; margin-top: -2.5px; margin-inline-start: -0.5px; background: var(--c-rule-strong); }
.scale__tick--mid { height: 9px; margin-top: -4.5px; }
.scale__tick--end { width: 1.5px; height: 9px; margin-top: -4.5px; transform: rotate(45deg); }
.scale__band {
  position: absolute; top: 50%; height: 6px; margin-top: -3px;
  background: rgba(21,33,43,.14); print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.scale__marker {
  position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
  transform: translate(50%, -50%);
  background: var(--c-sheet); border: 2px solid var(--c-pencil);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.scale--mild .scale__marker { border-color: var(--c-ink); }
.scale--clear .scale__marker { background: var(--c-ink); border: 0; box-shadow: 0 0 0 2px var(--c-sheet); }
.scale__end { grid-area: end; font: 400 0.8125rem/1.125rem var(--font-label); letter-spacing: 0.02em; color: var(--c-graphite); }
.scale__end:empty { display: none; }
/* The name heads its bar at every width; left to auto-placement it would fall under the bar on phone. */
.scale--named { grid-template-areas: "name name" "neg pos" "line line" "end end"; }
.scale__name { font: 500 0.875rem/1.375rem var(--font-text); grid-area: name; }
@media (min-width: 600px) {
  .scale {
    grid-template-columns: minmax(64px, var(--pole-w, 96px)) minmax(120px, 1fr) minmax(64px, var(--pole-w, 96px)) auto;
    grid-template-areas: "neg line pos end";
  }
  .scale--named { grid-template-areas: "name name name name" "neg line pos end"; }
  .scale__pole--neg { text-align: end; }
  .scale__pole--pos { text-align: start; }
}
/* Household variant: one bubble per member above the line, a hatch band under it when the gap is large. */
.scale--household .scale__line { height: calc(44px + var(--rows, 1) * 26px - 26px); }
.scale--household .scale__line::before { top: auto; bottom: 14px; }
.scale--household .scale__tick { top: auto; bottom: 14px; margin: 0 0 -2.5px; margin-inline-start: -0.5px; }
.scale--household .scale__tick--mid, .scale--household .scale__tick--end { margin-bottom: -4.5px; }
@media (min-width: 600px) {
  /* Pole labels and the tag sit level with the line, not with the middle of the bubble area. */
  .scale--household .scale__pole, .scale--household .scale__end { align-self: end; padding-block-end: 6px; }
}
.scale__member { position: absolute; bottom: 14px; transform: translateX(50%); display: flex; flex-direction: column; align-items: center; }
.scale__member::after { content: ""; width: 1px; height: calc(6px + var(--lift, 0) * 26px); background: var(--c-ink); }
.scale__gap { position: absolute; bottom: 4px; height: 8px; background-image: var(--hatch-red); print-color-adjust: exact; -webkit-print-color-adjust: exact; }

/* ---------- member bubble (5.8.7) ---------- */

.bubble {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 24px; height: 24px; padding: 0 3px;
  background: var(--c-sheet); color: var(--c-ink);
  border: 1.5px solid var(--c-ink); border-radius: var(--r-round);
  font: 700 0.75rem/1 var(--font-label);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.bubble--32 { min-width: 32px; height: 32px; font-size: 0.875rem; }
.bubble--16 { min-width: 16px; height: 16px; padding: 0 2px; border-width: 1px; font-size: 10px; }
.bubble--active { background: var(--c-ink); color: var(--c-sheet); }
.bubble--loved { background: var(--c-trace); }

/* ---------- material tile, mood token (5.8.9) ---------- */

.mtile { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.mtile__sq {
  width: 28px; height: 28px; flex: none; border-radius: var(--r-1);
  background: var(--c-vellum); box-shadow: inset 0 0 0 1px var(--c-outline);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.mtile__name { font: 400 0.875rem/1.375rem var(--font-text); }
.mtile__count, .mood__count { font: 400 0.8125rem/1.125rem var(--font-label); letter-spacing: 0.02em; color: var(--c-pencil); }
.mood { display: inline-flex; align-items: center; gap: 6px; }
.mood__box {
  display: inline-flex; align-items: center; height: 28px; padding: 0 10px;
  border: 1px solid var(--c-rule-strong); border-radius: var(--r-1);
  font: 400 0.875rem/1.375rem var(--font-text); background: var(--c-sheet);
}

/* ---------- photos (2.0, 5.8.9) ---------- */

.photo {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; width: 100%;
  background: var(--c-vellum); border-radius: var(--r-1);
}
.photo--fill { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border-radius: 0; }
.photo--contain img { object-fit: contain; }
.photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; opacity: 0;
  transition: opacity var(--t-2) var(--ease-std);
  -webkit-user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.photo.is-loaded img { opacity: 1; }
.photo .void { position: absolute; inset: 0; border: 0; }

.pgrid { display: grid; gap: 4px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.pgrid--3 { --cols: 3; }
.pgrid--studio { --cols: 3; }
.pgrid--library { --cols: 2; }
@media (min-width: 600px)  { .pgrid--studio, .pgrid--library { --cols: 4; } }
@media (min-width: 1100px) { .pgrid--studio, .pgrid--library { --cols: 6; } }
.pgrid--captioned { row-gap: var(--s-3); }

.ptile { position: relative; display: block; min-width: 0; width: 100%; color: inherit; text-decoration: none; text-align: start; }
button.ptile, a.ptile { cursor: pointer; }
.ptile:focus-visible { outline-offset: 2px; z-index: 1; }
.ptile__frame { position: relative; display: block; overflow: hidden; border-radius: var(--r-1); }
.ptile--hero { grid-column: span 2; grid-row: span 2; }
.ptile--hero .photo { height: 100%; }
/* Index flag on loved photos: rises 4px above the tile. */
.ptile__flag {
  position: absolute; z-index: 1; top: -4px; inset-inline-end: 10px;
  width: 14px; height: 22px; background: var(--c-trace); outline: 1px solid var(--c-ink); outline-offset: -1px;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.ptile__cap { display: flex; justify-content: space-between; gap: var(--s-2); padding-block-start: 4px;
  font: 400 0.8125rem/1.125rem var(--font-label); letter-spacing: 0.02em; color: var(--c-pencil); }
/* Hover strip (studio): slides up inside the tile. */
.ptile__hover {
  position: absolute; inset-inline: 0; bottom: 0; min-height: 28px; padding: 3px 8px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  background: var(--c-sheet); font: 400 0.8125rem/1.125rem var(--font-label); color: var(--c-graphite);
  transform: translateY(100%); transition: transform var(--t-2) var(--ease-std);
}
.ptile:hover .ptile__hover, .ptile:focus-visible .ptile__hover, .ptile:focus-within .ptile__hover { transform: none; }
/* Shared-board strip: holds 16px member bubbles. */
.ptile__strip {
  position: absolute; inset-inline: 0; bottom: 0; height: 22px; padding-inline: 4px;
  display: flex; align-items: center; gap: 3px; background: var(--c-sheet);
}

/* Swipe card face (5.8.1): shared by the deck, the landing stack and the invite. */
.card {
  --surface: var(--c-sheet);
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--c-sheet); border: 1px solid rgba(21,33,43,.10); border-radius: var(--r-card);
}
.card--top { box-shadow: var(--e-card); }
.card__photo { position: relative; aspect-ratio: 4 / 5; background: var(--c-vellum); overflow: hidden; }
.card__label {
  height: 40px; flex: none; padding-inline: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  border-block-start: 1px solid var(--c-rule);
}
.card__room { font: 500 0.875rem/1.375rem var(--font-text); }
.card__no { font: 400 0.8125rem/1.125rem var(--font-label); letter-spacing: 0.02em; color: var(--c-pencil); }

/* Approval stamp (5.8.2). Position and rotation are the caller's (they are physical, see 3.5). */
.stamp {
  --stamp-b: var(--c-sheet); --stamp-f: var(--c-ink);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-1);
  background: var(--stamp-b); color: var(--stamp-f);
  box-shadow: inset 0 0 0 2px var(--stamp-f), inset 0 0 0 4px var(--stamp-b), inset 0 0 0 5px var(--stamp-f);
  font: 700 1.375rem/1.5rem var(--font-text); letter-spacing: 0.02em; white-space: nowrap;
  pointer-events: none; -webkit-user-select: none; user-select: none;
}
.stamp .icon { width: 18px; height: 18px; stroke-width: 2; }
.stamp--like { --stamp-b: var(--c-blue); --stamp-f: var(--c-sheet); }
.stamp--love { --stamp-b: var(--c-trace); --stamp-f: var(--c-ink); }
.stamp--sm { font-size: 1rem; line-height: 1.125rem; padding: 4px 10px; }
.stamp--sm .icon { width: 14px; height: 14px; }

/* ---------- overlays (5.8.16) ---------- */

.scrim {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-5) max(var(--s-4), env(safe-area-inset-right)) var(--s-5) max(var(--s-4), env(safe-area-inset-left));
  background: var(--c-scrim);
  animation: fade-in var(--t-2) var(--ease-std) both;
}
.modal {
  --surface: var(--c-sheet);
  position: relative;
  width: min(var(--modal-w, 440px), 100%); max-height: 100%;
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-5); overflow: auto; overscroll-behavior: contain;
  background: var(--c-sheet); border-radius: var(--r-2); box-shadow: var(--e-pop);
}
.modal:focus { outline: none; }
.modal--wide { --modal-w: 560px; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.modal__head .icon-btn { margin: -10px; margin-inline-start: 0; }
.modal__title { font: 600 1.25rem/1.75rem var(--font-text); text-wrap: balance; }
.modal__body { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.modal__body > p { color: var(--c-graphite); }
.modal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.modal__actions-far { margin-inline-start: auto; }

/* On a phone a dialog is a sheet attached to the bottom; buttons stack, primary on top. */
@media (max-width: 599.98px) {
  .scrim--dialog { align-items: flex-end; padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); }
  .scrim--dialog .modal {
    width: 100%; max-height: 92dvh;
    border-radius: var(--r-card) var(--r-card) 0 0;
    padding: var(--s-5) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));
    animation: sheet-in var(--t-4) var(--ease-out) both;
  }
  .scrim--dialog .modal__actions { flex-direction: column; align-items: stretch; }
  .scrim--dialog .modal__actions .btn { width: 100%; }
  .scrim--dialog .modal__actions-far { margin-inline-start: 0; }
}

/* Drawer: on the end side on desk, a full-screen sheet below that. */
.scrim--drawer { padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); align-items: stretch; justify-content: flex-end; }
.scrim--none { background: none; pointer-events: none; animation: none; }
.scrim--none .modal { pointer-events: auto; }
.modal--drawer {
  width: 100%; max-height: none; height: 100%; border-radius: 0;
  animation: sheet-in var(--t-4) var(--ease-out) both;
}
@media (min-width: 1100px) {
  .modal--drawer { width: min(var(--drawer-w, 560px), 100%); animation-name: drawer-in; }
}
.modal__foot {
  position: sticky; bottom: calc(-1 * var(--s-5)); z-index: 2;
  margin: auto calc(-1 * var(--s-5)) calc(-1 * var(--s-5)); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  background: var(--c-sheet); border-block-start: 1px solid var(--c-rule);
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes drawer-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Entrance used by result sections: add .rise and set --i (0, 1, 2 …) for the 80ms stagger. */
.rise { animation: rise-in var(--t-3) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); }

/* Overflow menu. */
.menu { position: relative; display: inline-flex; }
.menu__list {
  position: absolute; z-index: 50; top: calc(100% + 4px); inset-inline-end: 0;
  min-width: 200px; padding: 4px 0;
  background: var(--c-sheet); border: 1px solid var(--c-rule-strong); border-radius: var(--r-2); box-shadow: var(--e-pop);
}
.menu__item {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; min-height: 44px; padding: 0 14px;
  font: 400 0.9375rem/1.25rem var(--font-text); color: var(--c-ink); white-space: nowrap; text-decoration: none;
}
.menu__item:focus-visible { background: var(--c-vellum); }
@media (hover: hover) and (pointer: fine) { .menu__item:hover { background: var(--c-vellum); } }
.menu__item:focus-visible { outline-offset: -2px; }
.menu__item--danger { color: var(--c-redline); }
.menu__item .icon { width: 20px; height: 20px; }

/* Lightbox. */
.lightbox { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); max-width: 92vw; }
.lightbox:focus { outline: none; }
.lightbox__img { display: block; max-width: 92vw; max-height: 82vh; max-height: 82dvh; width: auto; height: auto; background: var(--c-vellum); }
.lightbox__void { width: min(92vw, 420px); aspect-ratio: 4 / 5; }
.lightbox__cap {
  --surface: var(--c-sheet);
  align-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
  padding: 8px 12px; background: var(--c-sheet); border: 1px solid var(--c-ink);
  font: 400 0.8125rem/1.125rem var(--font-label); letter-spacing: 0.02em; color: var(--c-graphite);
}
.lightbox__cap a { color: var(--c-blue); }
.lightbox__btn { position: fixed; z-index: 2; background: var(--c-sheet); border: 1px solid var(--c-ink); }
@media (hover: hover) and (pointer: fine) { .lightbox__btn:hover { background: var(--c-vellum); } }
.lightbox__close { inset-block-start: 12px; inset-inline-start: 12px; }
.lightbox__prev, .lightbox__next { top: 50%; margin-top: -22px; }
.lightbox__prev { right: 12px; }   /* reading order: previous is on the right, next on the left */
.lightbox__next { left: 12px; }

/* Toast (5.8.14). */
.toast-host {
  position: fixed; z-index: 150; pointer-events: none;
  left: max(var(--s-4), env(safe-area-inset-left)); right: max(var(--s-4), env(safe-area-inset-right));
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
}
.toast-host--top { bottom: auto; top: calc(var(--hdr-h) + var(--s-2) + env(safe-area-inset-top)); }
@media (min-width: 1100px) {
  .toast-host { justify-content: flex-start; left: var(--s-5); right: var(--s-5); bottom: var(--s-5); }
  .toast-host--top { bottom: auto; }
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--s-3);
  max-width: 420px; padding: 12px 16px;
  background: var(--c-ink); color: var(--c-sheet);
  border-radius: var(--r-2); box-shadow: var(--e-pop);
  font: 400 0.875rem/1.375rem var(--font-text);
  animation: rise-in var(--t-3) var(--ease-out) both;
}
.toast.is-leaving { animation: none; opacity: 0; transition: opacity var(--t-2) var(--ease-std); }
.toast__action { flex: none; color: var(--c-trace); font-weight: 600; min-height: 32px; padding-inline: 4px; }
.toast__action:hover { text-decoration: underline; text-underline-offset: 3px; }
.toast__close { flex: none; color: var(--c-sheet); width: 32px; height: 32px; margin: -6px; margin-inline-start: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-2); }
.toast__close .icon { width: 18px; height: 18px; }
.toast :focus-visible, .skip-link:focus-visible { outline-color: var(--c-trace); }

/* ---------- reduced motion (5.7): a 120ms fade, nothing moves ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity !important;
    transition-duration: 120ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- print base (6.3); the report's own rules are in report.css ---------- */

@media print {
  @page { size: A4 portrait; margin: 14mm 12mm 16mm; }

  html, body { background: #fff !important; color: #000; }
  body { font-size: 10pt; line-height: 15pt; min-height: 0; }
  .shell { min-height: 0; display: block; }
  .page, .col { max-width: none; padding: 0; }

  .hdr, .snav, .skip-link, .band, .alert, .crumb, .toast-host, .scrim, .menu,
  .page-head__actions, .disclosure > .btn, .ptile__hover, .no-print { display: none !important; }
  .print-only { display: block !important; }

  .panel, .tblock, .tblock__main, .tblock__cell, .chip--lg, .card { background: #fff !important; box-shadow: none !important; }
  .tblock { border-width: 1pt; }
  * { box-shadow: none; text-shadow: none; }
  .swatch, .mtile__sq { outline: 0.5pt solid rgba(0,0,0,.35); outline-offset: -0.5pt; }

  .t-display { font-size: 22pt; line-height: 26pt; }
  .t-h1, h1 { font-size: 16pt; line-height: 20pt; }
  .t-h2, h2 { font-size: 13pt; line-height: 17pt; }
  .t-h3, h3 { font-size: 11pt; line-height: 15pt; }
  .t-body, p { font-size: 10pt; line-height: 15pt; }
  .t-body-s, .chip__name, .chip__desc, .mtile__name, .mood__box { font-size: 9pt; line-height: 13pt; }
  .t-annot, .dim__label, .ptile__cap, .sbar__fig, .conf, .scale__end, .mtile__count, .mood__count { font-size: 8.5pt; line-height: 11pt; }
  .t-label, .tblock__cap, .scale__pole, .pill, .tag { font-size: 8pt; line-height: 10pt; }
  .t-display, h1, h2, h3, p, .t-body, .t-body-s, .chip__name, .tblock__val { color: #000; }

  .sec-head, .scale, .ptile, .tblock { break-inside: avoid; }
  .sec-head { break-after: avoid; }
  .rise { animation: none; }
  a { color: inherit; text-decoration: none; }
}