/* Taam: base.css. Tokens, reset, type, layout primitives, the shells and every SHARED component.
   Screen styles live in client.css, report.css, studio.css, library.css and the two wire files and build on
   the classes below. The look is the approved start screen (css/start.css) written as a system:
   docs/look/system.md. One theme, RTL only, logical properties throughout.
   Breakpoints: phone < 600px, tablet 600 to 1099px, desk >= 1100px.
   Rule: outside the token block no colour, radius, shadow or font value is written as a literal
   (50% for a circle and the geometry of an inset ring are not values of the palette).

   CLASS VOCABULARY
   ----------------
   Type        .t-display .t-h1 .t-h2 .t-h3 .t-body-s .t-eyebrow .t-cap
               .c-ink-2 .c-ink-3 .c-danger .c-ok     .on-dark (text and focus for dark grounds)
               .measure (62 characters max)   .nums (tabular figures)   .truncate
   Layout      .wrap  .grid12 + .span-3/9 (12 columns from desk, one column below)
               .stack (column; gap = --gap, default 16px)  .stack--1 ... .stack--6 (gap = --s-N)
               .row (wrapping row, centred, gap 12px)  .row--tight
               .grow (flex: 1)   .section (space between page sections)
               .only-phone  .only-desk  .not-desk   .sr-only   .no-print   .print-only   .rise
   Shells      .shell  .shell--client  .shell--studio  .shell--bare (swipe: no header, fixed viewport)
               .hdr  .hdr__inner  .hdr__inner--sync  .hdr__brand  .hdr__by  .wordmark  .snav  .snav__link > span
               .shell__main  .skip-link  .col (client page)  .page (studio page)  .page-head  .page-head__actions
               .band (offline / in-person)   .alert   .boot
   Controls    .btn  .btn--primary  .btn--secondary  .btn--quiet  .btn--danger  .btn--quiet-danger  .btn--light
               .btn--sm  .btn--full  .btn--full-phone   .icon-btn   .link  .link--quiet
               .field  .field__label  .field__optional  .field__input  .field__select  .field__hint  .field__error
               .field--error   .capsule   .copyfield
               .token  .token--swatch  .tokens  .tokens--scroll   .seg  .seg__item   .fact  .facts
               .pill  .pill--none/--invited/--open/--done  .pill__mark   .tag  .tag--shared/--clash/--gap/--plain/--quiet/--btn
               .edited   .disclosure  .disclosure__body   .or-sep
   Surfaces    .tile  .tile--stone  .tile--dark  .tile--accent  .tile--brass  .tile--danger  .tile--flush  .tile--row
               .tile__head  .tile__title  .tile__body
               .sum  .sum--link  .sum--stacked  .sum__main  .sum__sub  .sum__stats   .stat  .stat__val  .stat__cap
               .rows  .row-soft   .ph  .ph--glyph  .ph--step  .ph__cap   .empty  .empty__body  .empty__actions
               .sec-head  .sec-head--page  .sec-head__title   .crumb
   Taste       .swatch  .swatch--md  .swatch--lg  .swatch--avoid   .chip  .chip--sm/--md/--lg  .chip--avoid
               .chip__name  .chip__text  .chip__desc  .chip__cap  .chip__strip
               .sbar  .sbar--soft  .sbar__track  .sbar__fill  .sbar__fig  .sbar__range   .conf  .conf__dots
               .scale  .scale--clear/--mild/--none  .scale--named  .scale--household  .scale__name  .scale__pole
               .scale__line  .scale__band  .scale__marker  .scale__member  .scale__gap  .scale__end
               .bubble  .bubble--16/--32  .bubble--loved  .bubble--active  .bubble--no
               .mtile  .mtile__sq  .mtile__name  .mtile__count   .mood  .mood__box  .mood__count
   Photos      .photo  .photo--fill  .photo--contain  .is-loaded  .is-failed
               .pgrid  .pgrid--3  .pgrid--studio (3/4/6)  .pgrid--library (2/4/6)  .pgrid--mood  .pgrid--captioned
               .ptile  .ptile--hero  .ptile__frame  .ptile__heart  .ptile__edited  .ptile__cap  .ptile__credit
               .ptile__hover  .ptile__strip
               .card  .card--top  .card__photo  .card__label  .card__room  .card__no
               .stamp  .stamp--like  .stamp--dislike  .stamp--love  .stamp--sm
   Overlays    .scrim  .scrim--dialog  .scrim--drawer  .scrim--lightbox  .scrim--none
               .modal  .modal--dialog  .modal--drawer  .modal--wide  .modal__head  .modal__title  .modal__body
               .modal__actions  .modal__actions-far  .modal__foot   .menu  .menu__list  .menu__item  .menu__item--danger
               .lightbox  .lightbox__img  .lightbox__cap  .lightbox__btn  .lightbox__close/__prev/__next
               .toast-host  .toast-host--top  .toast  .toast__action  .toast__close
               keyframes: fade-in  sheet-in  drawer-in  rise-in
*/

/* ---------- tokens (docs/look/system.md 2.1) ---------- */

:root {
  /* grounds */
  --ground: #EFEAE2;  --tile: #F9F6F1;  --stone: #E3DCD0;  --stone-deep: #D6CDBF;
  --espresso: #1F1915;  --espresso-2: #2A221C;

  /* ink */
  --ink: #231E1A;  --ink-2: #5A5148;  --ink-3: #6E645A;
  --ivory: #F8F3EA;  --ivory-2: rgba(248,243,234,.82);  --ivory-3: rgba(248,243,234,.72);
  --on-accent: #FFFFFF;

  /* the single accent, and brass */
  --accent: #9A5528;  --accent-hover: #A85F2F;  --accent-press: #864920;
  --accent-ink: #8A4A20;  --accent-soft: #E7B98F;
  --accent-wash: #F3E4D6;
  --brass: #DDBE93;  --brass-wash: #F3E7D3;

  /* status */
  --danger: #9B2C1F;  --danger-hover: #84241A;  --danger-wash: #F4DFD9;
  --ok: #4A6646;  --ok-wash: #E0E8DA;

  /* glass, veils, washes */
  --glass-bar: rgba(239,234,226,.78);  --glass-bar-dark: rgba(27,22,18,.38);
  --glass-panel: rgba(31,25,21,.62);  --glass-field: rgba(255,255,255,.15);  --glass-chip: rgba(255,255,255,.11);
  --glass-ring: inset 0 0 0 1px rgba(255,255,255,.2);  --glass-ring-soft: inset 0 0 0 1px rgba(255,255,255,.12);
  --blur-bar: saturate(180%) blur(20px);  --blur-glass: saturate(160%) blur(22px);
  --wash: rgba(35,30,26,.07);  --wash-2: rgba(35,30,26,.13);
  --wash-dark: rgba(255,255,255,.1);  --wash-dark-2: rgba(255,255,255,.2);
  --scrim: rgba(24,18,13,.5);  --scrim-text: rgba(24,18,13,.7);
  --photo-dim: rgba(31,25,21,.16);
  --ring: inset 0 0 0 1px rgba(35,30,26,.1);
  --ring-field: inset 0 0 0 1px rgba(35,30,26,.5);      /* the edge of a field: 3:1 against the tile and the ground */
  /* Four values the start screen writes as literals in its stamp, capsule and board; named here so the
     shared components can repeat them without a literal. */
  --white-ring: rgba(255,255,255,.85);  --ivory-ring: rgba(248,243,234,.85);  --tile-veil: rgba(249,246,241,.92);
  --shadow-glass: 0 20px 40px -24px rgba(0,0,0,.6);

  /* type */
  --font: -apple-system,"SF Hebrew","SF Pro Display","SF Pro Text",BlinkMacSystemFont,"Assistant","Segoe UI",Arial,sans-serif;
  --font-code: ui-monospace,Consolas,"Courier New",monospace;
  --fs-body: 17px;

  /* space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 72px;
  --gap-tiles: 16px;  --pad-tile: 22px;

  /* radius */
  --r-xl: 32px;  --r-lg: 28px;  --r-md: 20px;  --r-sm: 14px;  --r-xs: 8px;  --pill: 980px;

  /* depth */
  --shadow-card: 0 1px 2px rgba(20,14,9,.18),0 18px 40px -14px rgba(20,14,9,.5),0 44px 80px -30px rgba(20,14,9,.45);
  --shadow-soft: 0 1px 2px rgba(60,44,30,.06),0 16px 40px -22px rgba(60,44,30,.28);
  --shadow-pop: 0 2px 6px rgba(20,14,9,.1),0 24px 60px -20px rgba(20,14,9,.45);
  --shadow-btn: 0 8px 22px -10px rgba(154,85,40,.9);
  --shadow-round: 0 10px 22px -10px rgba(0,0,0,.6);
  --shadow-stamp: 0 6px 16px -6px rgba(0,0,0,.5);
  --shadow-knob: 0 0 0 2px var(--ink),0 6px 12px -4px rgba(20,14,9,.5);

  /* motion. --t-* and the three deck easings keep their names: swipe.js writes them into inline styles */
  --ease: cubic-bezier(.25,.1,.25,1);
  --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: var(--ease);

  /* layout */
  --gutter: 16px;  --wrap: 1480px;  --hdr-h: 52px;  --btn-h: 48px;  --section-gap: var(--s-7);
  /* What a sticky block of a page clears: the height of the bar above it. The studio bar is not sticky on a
     phone (it has two rows there), so the value is 0 in that one case. Use: top: calc(var(--sticky-top) + 12px). */
  --sticky-top: var(--hdr-h);
}
@media (min-width: 600px)  { :root { --gutter: 24px; --pad-tile: 32px; } }
@media (min-width: 1100px) { :root { --fs-body: 18px; --gap-tiles: 20px; --pad-tile: 40px; --section-gap: var(--s-8); } }
.shell--studio { --fs-body: 16px; --pad-tile: 24px; }
html:has(.shell--studio) .modal { --fs-body: 16px; }      /* a dialog opened from the studio reads at the studio's size */
@media (min-width: 1100px) { .shell--studio { --pad-tile: 32px; } }
@media (max-width: 599.98px) { .shell--studio { --sticky-top: 0px; } }

/* ---------- 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(--ground);
  color: var(--ink);
  font: 400 var(--fs-body)/1.5 var(--font);
  letter-spacing: 0;
  text-align: start;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -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);
}
html:has(.shell--bare) body { background: var(--espresso); }     /* the deck: no light flash at the edges */

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(--accent-ink); text-underline-offset: 4px; }
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(--accent); outline-offset: 3px; border-radius: var(--r-xs); }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--ivory); }
/* 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(--stone-deep); color: var(--ink); }

/* ---------- type roles ---------- */

.t-display { font: 700 30px/1.12 var(--font); text-wrap: balance; }
.t-h1, h1  { font: 700 28px/1.15 var(--font); text-wrap: balance; }
.t-h2, h2  { font: 600 22px/1.2 var(--font);  text-wrap: balance; }
.t-h3, h3  { font: 600 18px/1.3 var(--font);  text-wrap: balance; }
.t-body-s  { font: 400 15px/1.45 var(--font); }
.t-eyebrow { font: 600 15px/1.25 var(--font); color: var(--accent-ink); }
.t-cap     { font: 400 14px/1.4 var(--font);  color: var(--ink-3); }
@media (min-width: 600px)  { .t-display { font-size: 36px; } }
@media (min-width: 1100px) {
  .t-display { font-size: 44px; letter-spacing: -.01em; }
  .t-h1, h1  { font-size: 34px; letter-spacing: -.01em; }
  .t-h2, h2  { font-size: 26px; }
  .t-eyebrow { font-size: 17px; }
}
.shell--studio .t-h2, .shell--studio h2 { font-size: 22px; }     /* the studio is denser */

.c-ink-2  { color: var(--ink-2); }
.c-ink-3  { color: var(--ink-3); }
.c-danger { color: var(--danger); }
.c-ok     { color: var(--ok); }

/* ink-3 is never set on stone, and dark grounds take the ivories. */
.tile--stone .t-cap, .tile--stone .c-ink-3 { color: var(--ink-2); }
.on-dark { color: var(--ivory); }
.on-dark .t-cap, .on-dark .c-ink-3 { color: var(--ivory-3); }
.on-dark .c-ink-2 { color: var(--ivory-2); }
.on-dark .t-eyebrow, .on-dark a:not(.btn):not(.icon-btn) { color: var(--accent-soft); }

.measure { max-width: 62ch; }
.nums { font-variant-numeric: tabular-nums; }
.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 > * { --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--tight { gap: var(--s-2); }
.grow { flex: 1 1 0; min-width: 0; }

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

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }

/* The page grid: one column below desk, twelve from desk. Tiles are its cells. */
.grid12 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-tiles); }
.grid12 > * { min-width: 0; }
@media (min-width: 1100px) {
  .grid12 { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .grid12 > * { grid-column: 1 / -1; }
  .grid12 > .span-3 { grid-column: span 3; } .grid12 > .span-9 { grid-column: span 9; }
}

.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: 1099.98px) { .only-desk { display: none !important; } }
@media (min-width: 1100px) { .not-desk { display: none !important; } }

/* ---------- surfaces: tiles ---------- */

.tile {
  background: var(--tile); color: var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
  padding: var(--pad-tile); min-width: 0;
}
.tile--stone  { background: var(--stone); box-shadow: none; }
.tile--accent { background: var(--accent-wash); box-shadow: none; }
.tile--brass  { background: var(--brass-wash); box-shadow: none; }
.tile--danger { background: var(--danger-wash); box-shadow: none; }
.tile--dark   { background: var(--espresso); color: var(--ivory); box-shadow: none; }
.tile--flush  { padding: 0; overflow: hidden; }
/* A notice that is one row: the text, then its action. */
.tile--row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  border-radius: var(--r-md); padding: 14px 20px;
}
/* A tile inside a tile: one radius down and one tone apart, never a border. */
.tile .tile { border-radius: var(--r-md); box-shadow: none; padding: 20px; }
.tile .tile:not([class*="tile--"]) { background: var(--ground); }
.tile--stone .tile:not([class*="tile--"]) { background: var(--tile); }
.tile__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.tile__title { font: 600 22px/1.2 var(--font); text-wrap: balance; }
.tile__body { color: var(--ink-2); text-wrap: pretty; }
.tile--dark .tile__body { color: var(--ivory-2); }
@media (min-width: 1100px) { .shell--client .tile__title { font-size: 26px; } }

/* ---------- 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: center; justify-content: center; gap: var(--s-2);
  text-align: center;
}
.boot__text { color: var(--ink-2); max-width: 46ch; }
.boot__title { margin-block-start: var(--s-3); }
.boot .btn { margin-block-start: var(--s-4); }

/* ---------- shells and the bar ---------- */

.shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-size: var(--fs-body); }
.shell__main { flex: 1 0 auto; display: block; min-width: 0; }

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

/* The start screen's bar in its light state: glass over the page, no line under it. */
.hdr {
  position: sticky; top: 0; z-index: 50;
  min-height: var(--hdr-h);
  display: flex; align-items: center;
  background: var(--glass-bar);
  -webkit-backdrop-filter: var(--blur-bar); backdrop-filter: var(--blur-bar);
}
.hdr__inner {
  width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto;
  display: flex; align-items: center; gap: var(--s-4); min-height: var(--hdr-h);
}
.shell--client .hdr__inner { justify-content: space-between; }
.hdr__brand { display: inline-flex; align-items: baseline; gap: var(--s-3); text-decoration: none; color: var(--ink); }
a.wordmark { text-decoration: none; color: inherit; }   /* the client pages' wordmark leads to the start screen */
.hdr__by { font: 400 14px/1.2 var(--font); color: var(--ink-2); min-width: 0; }
.shell--client .hdr__by { max-width: 60%; }

/* Studio navigation: quiet pills, 34px high inside a 44px target; the current one is ink. */
.snav { display: flex; align-items: center; gap: var(--s-1); margin-inline-start: var(--s-4); }
.snav__link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  font: 400 15px/1 var(--font); color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.snav__link > span {
  display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: var(--pill);
  transition: background .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .snav__link:hover > span { background: var(--wash); } }
.snav__link[aria-current="page"] > span { background: var(--ink); color: var(--ivory); font-weight: 600; }
.snav__link:focus-visible { outline: none; }
.snav__link:focus-visible > span { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 599.98px) {
  /* Phone: the brand row, then the pills as one scrolling row. The bar scrolls away with the page. */
  .shell--studio .hdr { position: static; }
  .shell--studio .hdr__inner { flex-wrap: wrap; gap: 0; padding-block-end: var(--s-1); }
  .hdr__brand { flex: 1 0 100%; min-height: var(--hdr-h); align-items: center; }
  .snav {
    flex: 1 0 100%; margin: 0; margin-inline: -4px;
    overflow-x: auto; scrollbar-width: none;
  }
  .snav::-webkit-scrollbar { display: none; }
}

.skip-link {
  position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 200;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 18px; border-radius: var(--pill);
  background: var(--ink); color: var(--ivory); text-decoration: none;
  font: 600 15px/1.3 var(--font);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; outline: 2px solid var(--accent); outline-offset: 3px; }

/* Client page and studio page: the same wrap as the start screen. */
.col  { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding-block: var(--s-5) var(--s-7); }
.page { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; padding-block: var(--s-5) var(--s-8); }
@media (min-width: 1100px) { .col, .page { padding-block-start: var(--s-6); } }

/* 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; }

.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); }

/* Offline notice, in-person session: a centred pill under the bar. */
.band {
  margin: var(--s-2) auto; width: fit-content; max-width: calc(100% - 2 * var(--gutter));
  min-height: 36px; padding: 6px 16px; border-radius: var(--pill);
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  background: var(--brass-wash); color: var(--ink);
  font: 400 14px/1.4 var(--font);
}
.band .icon { flex: none; width: 18px; height: 18px; }

/* Persistent alert at the top of a page (storage blocked). */
.alert {
  margin: var(--s-2) auto; width: fit-content; max-width: calc(100% - 2 * var(--gutter));
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: 10px 18px; border-radius: var(--r-sm);
  background: var(--danger-wash); color: var(--ink);
  font: 400 14px/1.4 var(--font);
}
.alert .icon { color: var(--danger); flex: none; width: 20px; height: 20px; }

/* ---------- icons ---------- */

.icon {
  width: 24px; height: 24px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.icon--solid { fill: currentColor; stroke: none; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--btn-h); max-width: 100%; padding: 6px 28px;
  border: 0; border-radius: var(--pill);
  font: 600 17px/1.2 var(--font);
  /* A label wraps before it pushes the page sideways (large text sizes). */
  text-decoration: none; text-align: center; white-space: normal;
  cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: background .3s var(--ease), transform .2s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease);
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
.btn .icon { width: 20px; height: 20px; }
.btn:focus-visible { border-radius: var(--pill); }

.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-btn); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: var(--accent-hover); } }
.btn--primary:active:not(:disabled) { background: var(--accent-press); }
.btn--primary:disabled, .btn--primary[aria-disabled="true"] { box-shadow: none; }

.btn--secondary { background: var(--wash); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--secondary:hover { background: var(--wash-2); } }
.tile--stone .btn--secondary { background: var(--tile); }
.on-dark .btn--secondary { background: var(--wash-dark); color: var(--ivory); }
@media (hover: hover) and (pointer: fine) {
  .tile--stone .btn--secondary:hover { background: var(--ground); }
  .on-dark .btn--secondary:hover { background: var(--wash-dark-2); }
}

.btn--quiet, .btn--quiet-danger { color: var(--accent-ink); padding: 0 6px; min-height: 44px; }
@media (hover: hover) and (pointer: fine) {
  .btn--quiet:hover, .btn--quiet-danger:hover { text-decoration: underline; text-underline-offset: 4px; }
}
.btn--quiet-danger { color: var(--danger); }
.on-dark .btn--quiet { color: var(--accent-soft); }

.btn--danger { background: var(--danger); color: var(--on-accent); }
@media (hover: hover) and (pointer: fine) { .btn--danger:hover { background: var(--danger-hover); } }

/* For dark grounds (the coach, the deck's end states). */
.btn--light { background: var(--ivory); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--light:hover { background: var(--tile); } }

.btn--full { display: flex; width: 100%; }
.btn--sm { min-height: 40px; padding: 4px 18px; font-size: 15px; }
.btn--sm.btn--quiet, .btn--sm.btn--quiet-danger { padding: 0 6px; }
@media (pointer: coarse) { .btn--sm { min-height: 44px; } }
@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: 50%; color: var(--ink);
  text-decoration: none;
  transition: background .3s var(--ease), transform .2s var(--ease);
}
.icon-btn:focus-visible { border-radius: 50%; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--wash); } }
.icon-btn:active:not(:disabled) { transform: scale(.94); }
.icon-btn:disabled { opacity: .35; }
.on-dark .icon-btn { color: var(--ivory); }
@media (hover: hover) and (pointer: fine) { .on-dark .icon-btn:hover { background: var(--wash-dark); } }

.link { color: var(--accent-ink); text-decoration: none; text-underline-offset: 4px; cursor: pointer; }
.link:hover { text-decoration: underline; }
p .link, li .link { text-decoration: underline; }       /* inside running text a link is always marked */
.link--quiet, p .link--quiet, li .link--quiet { text-decoration: none; }
.link--quiet:hover { text-decoration: underline; }
.on-dark .link { color: var(--accent-soft); }
/* A link standing alone in a caption line or in a fact chip: a 44px touch area without moving the line. */
@media (pointer: coarse) {
  .t-cap > .link, .fact > .link { position: relative; }
  .t-cap > .link::after, .fact > .link::after { content: ""; position: absolute; inset: -15px 0; }
}

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

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font: 600 15px/1.4 var(--font); color: var(--ink); display: flex; align-items: center; gap: var(--s-2); }
.field__optional { font-weight: 400; color: var(--ink-3); }
.field__input {
  width: 100%; min-height: 52px; padding: 0 20px;
  border: 0; border-radius: var(--pill);
  background: var(--tile); color: var(--ink);
  font: 400 17px/1.4 var(--font);
  box-shadow: var(--ring-field);
  transition: box-shadow .3s var(--ease);
  appearance: none;
}
.tile .field__input, .modal .field__input { background: var(--ground); }   /* a field inside a tile sits one tone down */
.tile--stone .field__input, .tile--accent .field__input, .tile--brass .field__input, .tile--danger .field__input { background: var(--tile); }
textarea.field__input { border-radius: var(--r-md); padding: 14px 20px; min-height: 120px; resize: vertical; line-height: 1.5; }
.field__input::placeholder { color: var(--ink-3); opacity: 1; }
.field__input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.field__input[readonly] { background: var(--stone); box-shadow: none; }
.field__input[readonly]:focus { box-shadow: inset 0 0 0 2px var(--accent); }
/* 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 14px/1.4 var(--font); color: var(--ink-3); }
.tile--stone .field__hint, .tile--stone .field__optional { color: var(--ink-2); }
.field__error {
  display: flex; align-items: flex-start; gap: 6px;
  font: 400 14px/1.4 var(--font); color: var(--danger);
}
.field__error .icon { width: 18px; height: 18px; margin-block-start: 1px; }
.field--error .field__input { box-shadow: inset 0 0 0 2px var(--danger); }
/* Select: the same pill with a chevron at its end. */
.field__select { position: relative; display: block; }
.field__select .field__input { padding-inline-end: 44px; cursor: pointer; }
.field__select .icon {
  position: absolute; top: 50%; inset-inline-end: 16px; width: 18px; height: 18px; margin-top: -9px;
  transform: rotate(-90deg); color: var(--ink-2); pointer-events: none;
}
/* Fields on a dark tile take the glass of the start screen's capsule. */
.on-dark .field__label { color: var(--ivory); }
.on-dark .field__optional, .on-dark .field__hint { color: var(--ivory-3); }
.on-dark .field__input { background: var(--glass-field); color: var(--ivory); box-shadow: var(--glass-ring); }
.on-dark .field__input::placeholder { color: var(--ivory-3); }
.on-dark .field__input:focus { box-shadow: inset 0 0 0 1.5px var(--ivory-ring); }

/* Capsule: a field and its button in one pill (the start screen's capsule on a light ground). */
.capsule {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  min-height: 60px; padding: 6px; padding-inline-start: 8px;
  border-radius: var(--pill); background: var(--tile); box-shadow: var(--ring-field);
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.tile .capsule, .modal .capsule { background: var(--ground); }
.tile--stone .capsule { background: var(--tile); }
.capsule:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.capsule > .field { flex: 1 1 0; }
.capsule input, .capsule .field__input, .tile .capsule .field__input, .modal .capsule .field__input {
  flex: 1 1 0; min-width: 0; width: 100%; min-height: 48px; padding: 0 16px;
  border: 0; border-radius: var(--pill); background: transparent; box-shadow: none; outline: none;
  font: 400 17px/1.4 var(--font); color: inherit;
}
.capsule .btn { flex: none; }

/* Link field: a capsule with the read-only link and a round copy button at its end. */
.copyfield {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  min-height: 56px; padding: 6px; padding-inline-start: 8px;
  border-radius: var(--pill); background: var(--stone);
}
.tile--stone .copyfield { background: var(--tile); }
.copyfield:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.copyfield .field__input, .tile .copyfield .field__input, .modal .copyfield .field__input {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 12px;
  background: transparent; box-shadow: none;
  font: 400 14px/1.4 var(--font-code); color: var(--ink-2);
  text-overflow: ellipsis;
}
.copyfield .icon-btn { background: var(--wash); }
@media (hover: hover) and (pointer: fine) { .copyfield .icon-btn:hover { background: var(--wash-2); } }

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

.facts { display: flex; flex-wrap: wrap; gap: var(--s-2); min-width: 0; }
.fact {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  height: 32px; padding: 0 14px; border-radius: var(--pill);
  background: var(--wash); color: var(--ink-2);
  font: 400 14px/1 var(--font); white-space: nowrap;
}
.fact .icon { width: 16px; height: 16px; }
.tile--stone .fact { background: var(--tile); }
.on-dark .fact { background: var(--glass-chip); color: var(--ivory-2); }

.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: 36px; padding: 0 16px;
  background: var(--tile); color: var(--ink);
  border-radius: var(--pill); box-shadow: var(--ring);
  font: 400 15px/1.3 var(--font); white-space: nowrap;
  transition: background .3s var(--ease);
}
.token:focus-visible { border-radius: var(--pill); }
@media (pointer: coarse) { .token { min-height: 44px; } }
@media (hover: hover) and (pointer: fine) { .token:hover { background: var(--stone); } }
.token[aria-pressed="true"], .token[aria-checked="true"] { background: var(--ink); color: var(--ivory); box-shadow: none; }
.token:disabled { opacity: .4; }
.token .icon { width: 16px; height: 16px; }
/* Style token: keeps its palette readable, so selection is a heavier ring and a check, not a fill. */
.token--swatch { padding-inline: 10px 14px; }
.token--swatch[aria-pressed="true"], .token--swatch[aria-checked="true"] {
  background: var(--tile); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink);
}

/* One pill track; the chosen item is a raised tile-coloured thumb. No dividers. */
.seg { display: inline-flex; max-width: 100%; padding: 4px; border-radius: var(--pill); background: var(--stone); }
.tile--stone .seg { background: var(--ground); }
.seg__item {
  position: relative;      /* the 44px target is the whole height of the track (::before below) */
  min-height: 36px; min-width: 44px; padding: 0 16px; border-radius: var(--pill);
  display: inline-flex; align-items: center; justify-content: center;
  font: 400 15px/1.3 var(--font); color: var(--ink-2); white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .seg__item:hover { color: var(--ink); } }
.seg__item[aria-checked="true"] { background: var(--tile); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-soft); }
.seg__item::before { content: ""; position: absolute; inset: -4px 0; }
.seg__item:focus-visible { outline-offset: -2px; border-radius: var(--pill); }

.pill, .tag {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  min-height: 28px; padding: 2px 12px; border-radius: var(--pill);
  font: 600 14px/1.3 var(--font);
  white-space: nowrap;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
/* Status pills: the mark changes shape as well as colour. */
.pill__mark { position: relative; width: 9px; height: 9px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1.5px currentColor; }
.pill--none { color: var(--ink-2); background: var(--wash); }
.pill--invited { color: var(--accent-ink); background: var(--accent-wash); }
.pill--invited .pill__mark::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 50%; background: currentColor; }
.pill--open { color: var(--ink); background: var(--brass-wash); }
.pill--open .pill__mark::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; }
.pill--done { color: var(--ok); background: var(--ok-wash); }
.pill--done .pill__mark { background: currentColor; }

.tag--shared { color: var(--ok); background: var(--ok-wash); }
.tag--clash, .tag--gap { color: var(--danger); background: var(--danger-wash); }
.tag--plain, .tag--quiet { color: var(--ink-2); background: var(--wash); }
.tag .icon { width: 14px; height: 14px; }
/* A tag that is a button: same fill; the 44px target comes from the padding box around it. */
.tag--btn { position: relative; cursor: pointer; }
.tag--btn::before { content: ""; position: absolute; inset: -8px 0; }
.tag--btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The designer changed this: a small accent dot (its meaning is in its title). */
.edited { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent);
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }

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

/* "or", between two ways of doing the same thing: a centred caption, no line. */
.or-sep { margin-block: var(--s-2); text-align: center; }

/* ---------- section head, summary, rows, placeholder, empty state, breadcrumb ---------- */

.sec-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s-2) var(--s-4); margin-block-end: var(--s-4);
}
.sec-head__title { min-width: 0; }
.sec-head__text { display: grid; gap: 4px; min-width: 0; flex: 1 1 auto; }
.sec-head--page { margin-block-end: var(--s-5); align-items: flex-end; }
.sec-head--page .t-eyebrow { font-size: 17px; }
@media (min-width: 1100px) { .sec-head--page .t-eyebrow { font-size: 21px; } }

/* Summary tile: who or what this page is about, and its few numbers. */
.sum {
  display: grid; gap: var(--s-4); align-items: center;
  background: var(--tile); color: var(--ink); text-decoration: none;
  border-radius: var(--r-lg); box-shadow: var(--shadow-soft);
  padding: var(--pad-tile); min-width: 0;
}
.sum__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sum__sub { font: 400 15px/1.45 var(--font); color: var(--ink-2); }
.sum__stats { display: flex; flex-wrap: wrap; gap: var(--s-2); min-width: 0; }
.stat {
  display: grid; gap: 2px; align-content: start; flex: 1 1 96px; min-width: 96px;
  padding: 12px 16px; border-radius: var(--r-md); background: var(--ground);
  transition: background .3s var(--ease);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.tile--stone .stat { background: var(--tile); }
.stat__val { font: 700 22px/1.1 var(--font); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.stat__val--text { font: 600 16px/1.3 var(--font); }
/* One size per row: beside a value that is words (a date, "2 of 3") a bare number takes the same size. */
.sum__stats:has(.stat__val--text) .stat__val { font: 600 16px/1.3 var(--font); }
.stat__cap { font: 400 14px/1.4 var(--font); color: var(--ink-3); }
@media (min-width: 900px) {
  .sum { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-6); }
  .sum__stats { flex-wrap: nowrap; }
  .stat { flex: 0 1 auto; min-width: 112px; }
  .sum--stacked { grid-template-columns: minmax(0, 1fr); }
  .sum--stacked .sum__stats { flex-wrap: wrap; }
  .sum--stacked .stat { flex: 1 1 96px; min-width: 96px; }
}
/* A summary tile that is a link (the project card): the numbers darken and the chevron moves. */
.sum--link { position: relative; cursor: pointer; align-content: space-between; }
.sum--link .sum__main { padding-inline-end: 32px; }
.sum__go {
  position: absolute; top: var(--pad-tile); inset-inline-end: calc(var(--pad-tile) - 4px);
  width: 20px; height: 20px; color: var(--ink-3); transition: transform .3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .sum--link:hover .stat { background: var(--stone); }
  .sum--link:hover .sum__go { transform: translateX(-4px); }
}
.sum--link:focus-visible { border-radius: var(--r-lg); }

/* Rows of a list: soft blocks with space between them, never a rule. */
.rows { display: grid; gap: var(--s-2); min-width: 0; }
.row-soft {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  min-height: 56px; padding: 12px 16px; border-radius: var(--r-sm);
  background: var(--tile); min-width: 0;
}
.tile .row-soft, .modal .row-soft { background: var(--ground); }
.tile--stone .row-soft { background: var(--tile); }

/* Placeholder: where a photograph did not load. A glyph circle heads an empty state. */
.ph {
  display: grid; place-items: center; align-content: center; gap: 6px;
  background: var(--stone); border-radius: inherit; color: var(--ink-2);
  padding: var(--s-2); text-align: center;
}
.ph > .icon { width: 20px; height: 20px; }
.ph__cap { display: grid; gap: 2px; font: 400 14px/1.4 var(--font); color: var(--ink-2); }
.ph--glyph { width: 56px; height: 56px; flex: none; padding: 0; border-radius: 50%; color: var(--accent-ink); }
.ph--glyph > .icon { width: 24px; height: 24px; }
.tile--stone .ph--glyph { background: var(--tile); }
.on-dark .ph--glyph { background: var(--wash-dark); color: var(--accent-soft); }

.empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  width: 100%; max-width: 720px; margin-inline: auto;
  background: var(--stone); border-radius: var(--r-lg); padding: var(--pad-tile);
}
.empty .ph--glyph { background: var(--tile); margin-block-end: var(--s-1); }
.empty__body { color: var(--ink-2); max-width: 46ch; text-wrap: pretty; }
.empty__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-2); }
.empty .btn--secondary { background: var(--tile); }
.col > .empty:only-child, .page > .empty:only-child { margin-block-start: var(--s-6); }

.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-block-end: var(--s-3);
  font: 400 15px/1.3 var(--font); color: var(--ink-3); }
.crumb ol { display: contents; }
.crumb li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.crumb a { color: var(--accent-ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.crumb a:hover { text-decoration: underline; }
.crumb .icon { width: 16px; height: 16px; color: var(--ink-3); }
.crumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- taste: palette strip, style chip, strength, confidence ---------- */

.swatch {
  display: inline-flex; flex: none; overflow: hidden;
  border-radius: var(--r-xs);
  box-shadow: var(--ring);
  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:not(.swatch--md):not(.swatch--lg) { border-radius: calc(var(--r-xs) / 2); }
.swatch--md i { width: 12px; height: 28px; }
.swatch--lg { position: relative; display: flex; width: 100%; border-radius: var(--r-sm); box-shadow: none; }
/* The ring lies over the colours, so a palette that opens with a near-white still shows where the strip starts. */
.swatch--lg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--ring); pointer-events: none; }
.swatch--lg i { flex: 1 1 0; width: auto; height: 44px; }
@media (min-width: 1100px) { .swatch--lg i { height: 52px; } }
/* A style to stay away from: the palette fades. The words say "red line", never a pattern. */
.swatch--avoid { filter: saturate(.25) opacity(.55); }

.chip { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; color: inherit; text-align: start; }
.chip__name { font: 600 15px/1.3 var(--font); min-width: 0; }
.chip__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.chip__desc { font: 400 15px/1.45 var(--font); color: var(--ink-2); }
.chip__cap { font: 400 14px/1.4 var(--font); color: var(--ink-3); }
.chip--md { display: flex; align-items: flex-start; gap: var(--s-3); }
.chip--md .chip__name { font: 600 18px/1.3 var(--font); }
.chip--md .swatch { margin-block-start: 1px; }
/* Large: the start screen's style row. The name and its caption, then the palette whose length is the
   strength (--w, 28% at least) resting on a track of the full width. */
.chip--lg { display: grid; gap: var(--s-2); align-items: start; width: 100%; }
.chip--lg .chip__text {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name cap";
  align-items: baseline; gap: 2px var(--s-3);
}
.chip--lg .chip__text > * { grid-column: 1 / -1; }
.chip--lg .chip__name { grid-area: name; font: 600 20px/1.2 var(--font); }
.chip--lg .chip__cap { grid-area: cap; justify-self: end; text-align: end; }
.chip__strip { display: block; border-radius: var(--r-sm); background: var(--ground); overflow: hidden;
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.tile--stone .chip__strip { background: var(--tile); }
.on-dark .chip__strip { background: var(--wash-dark); }
.chip__strip .swatch { width: max(28%, var(--w, 100%)); }
@media (min-width: 1100px) { .chip--lg .chip__name { font-size: 22px; } }
.chip--avoid .chip__name { color: var(--ink-2); }
.on-dark .chip__desc { color: var(--ivory-2); }
.on-dark .chip__cap { color: var(--ivory-3); }
.tile--stone .chip__cap { color: var(--ink-2); }
button.chip, a.chip { cursor: pointer; text-decoration: none; border-radius: var(--r-xs); }
button.chip:hover .chip__name, a.chip:hover .chip__name { text-decoration: underline; text-underline-offset: 4px; }
@media (pointer: coarse) { button.chip:not(.chip--md):not(.chip--lg) { min-height: 44px; } }

.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(--stone); border-radius: var(--pill); overflow: hidden;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.tile--stone .sbar__track { background: var(--stone-deep); }
.sbar__fill {
  position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--ink); border-radius: var(--pill);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.sbar--soft .sbar__fill { background: var(--ink-3); }      /* an uncertain reading */
.sbar__fig { flex: none; font: 400 14px/1.3 var(--font); font-variant-numeric: tabular-nums; color: var(--ink); }
.sbar__range { color: var(--ink-3); }

.conf { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 400 14px/1.3 var(--font); color: var(--ink-2); }
.conf__dots { display: inline-flex; align-items: center; gap: 3px; }
.conf__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--stone-deep); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.conf__dots i.is-on { background: var(--ink); }

/* ---------- leaning: the bipolar scale ---------- */
/* 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: 4px var(--s-3);
}
.scale__pole { font: 400 15px/1.3 var(--font); color: var(--ink-3); }
.tile--stone .scale__pole { color: var(--ink-2); }
.scale__pole--neg { grid-area: neg; text-align: start; }
.scale__pole--pos { grid-area: pos; text-align: end; }
.scale__pole.is-lean, .tile--stone .scale__pole.is-lean { color: var(--ink); font-weight: 600; }
/* The line is a 12px rounded track in a 28px box; its ends reach 10px past the scale so the knob never hangs out. */
.scale__line { grid-area: line; position: relative; height: 28px; margin-inline: 10px; }
.scale__line::before {
  content: ""; position: absolute; inset-inline: -10px; top: 50%; height: 12px; margin-top: -6px;
  border-radius: var(--pill); background: var(--stone);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.tile--stone .scale__line::before { background: var(--ground); }
.scale__line::after {      /* the midpoint */
  content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 50%; background: var(--tile);
}
.scale__band {
  position: absolute; top: 50%; height: 12px; margin-top: -6px; border-radius: var(--pill);
  background: var(--stone-deep); print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.scale__marker {
  position: absolute; z-index: 1; top: 50%; width: 20px; height: 20px; border-radius: 50%;
  transform: translate(50%, -50%);
  background: var(--tile); box-shadow: 0 0 0 2px var(--stone-deep);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.scale--mild .scale__marker { box-shadow: 0 0 0 2px var(--ink-2); }
.scale--clear .scale__marker { background: var(--ink); box-shadow: 0 0 0 2px var(--tile), var(--shadow-knob); }
.scale__end { grid-area: end; font: 400 14px/1.4 var(--font); color: var(--ink-2); }
.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: 600 15px/1.3 var(--font); 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 standing on the track; a bubble that would cover another
   stacks above it. A large gap is a washed band inside the track. */
.scale--household .scale__line { height: calc(28px + (var(--rows, 1) - 1) * 26px); }
.scale--household .scale__line::before { top: auto; bottom: 8px; margin: 0; }
.scale--household .scale__line::after { top: auto; bottom: 12px; margin-top: 0; }
@media (min-width: 600px) {
  /* Pole labels and the tag sit level with the track, not with the middle of the bubble area. */
  .scale--household .scale__pole, .scale--household .scale__end { align-self: end; padding-block-end: 4px; }
}
.scale__member { position: absolute; z-index: 1; bottom: calc(2px + var(--lift, 0) * 26px); transform: translateX(50%); display: flex; }
.scale__gap {
  position: absolute; bottom: 8px; height: 12px; border-radius: var(--pill);
  background: color-mix(in srgb, var(--danger) 30%, transparent);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}

/* ---------- member bubble ---------- */

.bubble {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 24px; height: 24px; padding: 0 3px;
  background: var(--tile); color: var(--ink);
  border-radius: var(--pill); box-shadow: inset 0 0 0 1.5px var(--ink);
  font: 700 12px/1 var(--font);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.bubble--32 { min-width: 32px; height: 32px; font-size: 14px; }
.bubble--16 { min-width: 16px; height: 16px; padding: 0 2px; box-shadow: inset 0 0 0 1px var(--ink); font-size: 10px; }
.bubble--active { background: var(--ink); color: var(--ivory); }
.bubble--loved { background: var(--brass); }
.bubble--no { background: var(--danger-wash); color: var(--danger); box-shadow: inset 0 0 0 1.5px var(--danger); text-decoration: line-through; }

/* ---------- material, mood ---------- */

.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-xs);
  background: var(--stone); box-shadow: var(--ring);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.mtile__name { font: 400 15px/1.3 var(--font); }
.mtile__count, .mood__count { font: 400 14px/1.4 var(--font); color: var(--ink-3); }
.tile--stone .mtile__count, .tile--stone .mood__count { color: var(--ink-2); }
.mood { display: inline-flex; align-items: center; gap: 6px; }
.mood__box {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--pill);
  background: var(--wash); color: var(--ink-2); font: 400 14px/1 var(--font); white-space: nowrap;
}
.tile--stone .mood__box { background: var(--tile); }

/* ---------- photos ---------- */

.photo {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 5; width: 100%;
  background: var(--stone-deep); border-radius: var(--r-sm);
}
.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 .3s var(--ease), transform .6s var(--ease);
  -webkit-user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.photo.is-loaded img { opacity: 1; }
.photo .ph { position: absolute; inset: 0; border-radius: 0; }

.pgrid { display: grid; gap: var(--s-2); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.pgrid--3, .pgrid--mood { --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 { gap: 10px; } .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: 3px; z-index: 1; border-radius: var(--r-sm); }
.ptile__frame { position: relative; display: block; overflow: hidden; border-radius: var(--r-sm); }
@media (hover: hover) and (pointer: fine) {
  button.ptile:hover .photo img, a.ptile:hover .photo img { transform: scale(1.04); }
}
/* "Really loved": the start screen's heart, a brass circle at the top corner (physical, as there). */
.ptile__heart {
  position: absolute; z-index: 1; top: 8px; left: 8px;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brass); color: var(--ink);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.ptile__heart .icon { width: 13px; height: 13px; }
/* "Edited by the designer": the accent dot in a small tile-coloured circle at the top start corner. */
.ptile__edited {
  position: absolute; z-index: 1; top: 8px; inset-inline-start: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; background: var(--tile);
}
.ptile__cap { display: flex; justify-content: space-between; gap: var(--s-2); padding-block-start: 6px;
  font: 400 14px/1.3 var(--font); color: var(--ink-3); }
.tile--stone .ptile__cap, .tile--stone .ptile__credit { color: var(--ink-2); }
/* Credit under a thumbnail: one row, cut with an ellipsis (the full line is the tile's tooltip and in the
   credits list that ends the report). The row keeps its height when empty, so a grid stays even. */
.ptile__credit {
  display: block; min-height: 16px; padding-block-start: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 12px/1.3 var(--font); color: var(--ink-3);
}
/* A 2 x 2 tile with a credit under it: the frame takes what the two rows leave, the photo fills the frame. */
.ptile--hero { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.ptile--hero .ptile__frame { flex: 1 1 auto; min-height: 0; }
.ptile--hero .photo { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
/* Hover strip (studio): glass at the bottom of the frame, slides up. */
.ptile__hover {
  position: absolute; inset-inline: 0; bottom: 0; min-height: 32px; padding: 4px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  background: var(--scrim-text); -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  font: 400 14px/1.3 var(--font); color: var(--ivory);
  transform: translateY(100%); transition: transform .3s var(--ease);
}
.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: 6px; bottom: 6px; min-height: 24px; padding: 4px 8px;
  display: flex; align-items: center; gap: 3px; width: fit-content; max-width: calc(100% - 12px);
  border-radius: var(--pill); background: var(--tile-veil);
}

/* The swipe card: shared by the deck and the invite. The start screen's hero card. */
.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--tile); border: 0; border-radius: calc(var(--card-w, 320px) * .062);
}
.card--top { box-shadow: var(--shadow-card); }
.card__photo { position: relative; aspect-ratio: 4 / 5; background: var(--stone); overflow: hidden; }
.card__label {
  height: 40px; flex: none; padding-inline: calc(var(--card-w, 320px) * .055);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  font-size: clamp(13px, calc(var(--card-w, 320px) * .045), 16px); line-height: 1.3; color: var(--ink);
}
.card__room { font-weight: 600; }
.card__no { font-size: .9em; color: var(--ink-3); }

/* The answer stamp. Position and rotation are the caller's (they are physical). */
.stamp {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .28em .7em .3em; border-radius: .42em;
  background: var(--ivory); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ivory), inset 0 0 0 3.5px var(--ink), var(--shadow-stamp);
  font: 700 clamp(15px, calc(var(--card-w, 320px) * .072), 24px)/1.1 var(--font); white-space: nowrap;
  pointer-events: none; -webkit-user-select: none; user-select: none;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.stamp .icon { width: .8em; height: .8em; stroke-width: 2.25; }
.stamp--like { background: var(--accent); color: var(--on-accent);
  box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 3.5px var(--white-ring), var(--shadow-stamp); }
.stamp--love { background: var(--brass); color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--brass), inset 0 0 0 3.5px var(--ink), var(--shadow-stamp); }
.stamp--sm { font-size: 15px; }

/* ---------- overlays ---------- */

.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(--scrim);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fade-in var(--t-2) var(--ease) both;
}
.modal {
  position: relative;
  width: min(var(--modal-w, 480px), 100%); max-height: 100%;
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: 28px; overflow: auto; overscroll-behavior: contain;
  background: var(--tile); color: var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
  font-size: var(--fs-body);
}
.modal:focus { outline: none; }
.modal--wide { --modal-w: 640px; }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.modal__head .icon-btn { margin: -8px; margin-inline-start: 0; }
.modal__title { font: 700 24px/1.15 var(--font); text-wrap: balance; }
.modal__body { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.modal__body > p:not(.field__error) { color: var(--ink-2); }
.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, with a grabber; 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-lg) var(--r-lg) 0 0;
    padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
    animation: sheet-in var(--t-4) var(--ease-out) both;
  }
  .scrim--dialog .modal::before {
    content: ""; flex: none; align-self: center; width: 40px; height: 5px;
    border-radius: var(--pill); background: var(--stone-deep);
  }
  .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 (the left: the app is RTL only), 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; -webkit-backdrop-filter: none; backdrop-filter: 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;
    border-radius: 0 var(--r-lg) var(--r-lg) 0; margin-block: 12px; height: calc(100% - 24px);
  }
}
.modal__foot {
  position: sticky; bottom: -28px; z-index: 2;
  margin: auto -28px -28px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  background: var(--glass-bar); -webkit-backdrop-filter: var(--blur-bar); backdrop-filter: var(--blur-bar);
  border: 0;
}

@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: 60; top: calc(100% + 4px); inset-inline-end: 0;
  min-width: 220px; padding: 6px;
  background: var(--tile); border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-pop);
}
.menu__item {
  display: flex; align-items: center; gap: var(--s-2);
  width: 100%; min-height: 44px; padding: 0 14px; border-radius: var(--r-xs);
  font: 400 16px/1.2 var(--font); color: var(--ink); white-space: nowrap; text-decoration: none;
}
.menu__item:focus-visible { background: var(--wash); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .menu__item:hover { background: var(--wash); } }
.menu__item--danger { color: var(--danger); }
.menu__item:disabled { opacity: .4; }
.menu__item .icon { width: 20px; height: 20px; }

/* Lightbox: the photograph whole, glass controls, a glass caption under it. */
.scrim--lightbox { background: var(--scrim-text); }
.lightbox { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); max-width: 92vw; color: var(--ivory); }
.lightbox:focus { outline: none; }
.lightbox__img { display: block; max-width: 92vw; max-height: 80vh; max-height: 80dvh; width: auto; height: auto;
  background: var(--stone-deep); border-radius: var(--r-md); }
.lightbox__void { width: min(92vw, 420px); aspect-ratio: 4 / 5; border-radius: var(--r-md); }
.lightbox__cap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-2) var(--s-3);
  max-width: 100%; padding: 8px 16px; border-radius: var(--r-md);
  background: var(--glass-panel); box-shadow: var(--glass-ring-soft);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
  font: 400 14px/1.4 var(--font); color: var(--ivory-2);
}
.lightbox__cap a { color: var(--accent-soft); }
.lightbox__cap .chip__name { font-weight: 400; font-size: 14px; }
.lightbox__btn {
  position: fixed; z-index: 2; color: var(--ivory);
  background: var(--glass-panel); box-shadow: var(--glass-ring-soft);
  -webkit-backdrop-filter: var(--blur-glass); backdrop-filter: var(--blur-glass);
}
@media (hover: hover) and (pointer: fine) { .lightbox__btn:hover { background: var(--espresso-2); } }
.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: an espresso pill; ivory on the dark deck. */
.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: 460px; padding: 12px 20px;
  background: var(--espresso); color: var(--ivory);
  border-radius: var(--pill); box-shadow: var(--shadow-pop);
  font: 400 15px/1.4 var(--font);
  animation: rise-in var(--t-3) var(--ease-out) both;
}
.toast.is-leaving { animation: none; opacity: 0; transition: opacity var(--t-2) var(--ease); }
.toast__action { flex: none; color: var(--accent-soft); font-weight: 600; min-height: 44px; padding-inline: 4px; }
.toast__action:hover { text-decoration: underline; text-underline-offset: 4px; }
.toast__close { flex: none; color: var(--ivory); width: 44px; height: 44px; margin: -10px; margin-inline-start: -4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.toast__close .icon { width: 18px; height: 18px; }
.toast :focus-visible { outline-color: var(--ivory); }
html:has(.shell--bare) .toast { background: var(--ivory); color: var(--ink); }
html:has(.shell--bare) .toast__action { color: var(--accent-ink); }
html:has(.shell--bare) .toast__close { color: var(--ink); }
html:has(.shell--bare) .toast :focus-visible { outline-color: var(--accent); }

/* ---------- reduced motion: 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; 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, .shell { font-size: 10pt; line-height: 15pt; min-height: 0; }
  .shell { display: block; }
  .page, .col { width: auto; max-width: none; padding: 0; }

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

  .tile, .sum, .stat, .empty, .row-soft, .card { background: #fff !important; box-shadow: none !important; }
  .tile, .sum { border-radius: 0; padding: 0; }
  .sum { display: block; }
  .sum__stats { flex-wrap: nowrap; margin-block-start: 2mm; }
  .stat { padding: 1.5mm 3mm; border-radius: 0; flex: 1 1 0; min-width: 0; }
  * { box-shadow: none; text-shadow: none; }
  .swatch, .mtile__sq { outline: 0.5pt solid rgba(0,0,0,.35); outline-offset: -0.5pt; }
  .photo { border-radius: 0; }

  .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; }
  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-cap, .or-sep, .ptile__cap, .sbar__fig, .conf, .scale__end, .mtile__count, .mood__count { font-size: 8.5pt; line-height: 11pt; }
  .t-eyebrow, .stat__cap, .scale__pole, .pill, .tag { font-size: 8pt; line-height: 10pt; }
  .stat__val { font-size: 12pt; line-height: 14pt; }
  .t-display, h1, h2, h3, p, .t-body-s, .chip__name, .stat__val { color: #000; }

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