/* Equifruit Hub — shared UI components (October 2026): the refined classic style, first
   shipped on ChilliTracker. Load it on a page after /assets/eq-motion.css and before the
   page's own <style>, so the page can adjust anything with a plain class rule:

     <link rel="stylesheet" href="/assets/eq-motion.css">
     <script src="/assets/eq-motion.js"></script>
     <link rel="stylesheet" href="/assets/eq-ui.css">

   Every class starts with eq-. Colours come from the page's own tokens (--ink, --ink-2,
   --muted, --paper, --paper-2, --surface, --banana, --banana-2, --orange, --mint, --sky,
   --purple, --on-bright), with the classic values as fallbacks; [data-theme="dark"] pages
   get dark hairlines and black shadows. States are is-… classes (or aria attributes).

   THE RULES
   - Depth: cards are the only blocks with the hard shadow (plus primary buttons, the page's
     segmented control, menus and dialogs). Inside a card: hairlines and soft fills only.
   - Rhythm: 24px between cards, 16px from a card's header to its content, rows 52px.
   - Colour by role (icon chips, tokens): banana = an action you take / you / today,
     mint = your own records, sky = the team, purple = reference, orange = off / attention.
   - Type: card titles 700 1.02rem, body 400 .92rem, meta 500 .8rem muted, small labels 700
     .68rem UPPERCASE .08em. Buttons in sentence case, 600. Text inherits the page's tracking
     (-.01em on body, from eq-motion.css); buttons, fields and tabs set their own.
   - Icons inside these components are sized by the component (a page's own svg helper class
     such as svg.ic { width:1em } doesn't change them).

   CARD
     <section class="eq-card">
       <header class="eq-card-head">
         <span class="eq-chip-ico eq-ico-team"><svg viewBox="0 0 24 24">…</svg></span>
         <h2 class="eq-card-title">Out this week</h2>
         <span class="eq-card-meta">3 people</span>
       </header>
       …
     </section>
     With a sub-line, stack title and sub:
       <div class="eq-card-titles"><h2 class="eq-card-title">Book time off</h2>
         <p class="eq-card-sub">Weekends aren't counted.</p></div>
     Icon chip roles: eq-ico-action (banana) · eq-ico-yours (mint) · eq-ico-team (sky) ·
       eq-ico-ref (purple) · eq-ico-attn (orange).
     A whole card that opens something: <a class="eq-card eq-card-link" href="…">…</a>
       (lifts on hover, presses on click).

   SEGMENTED CONTROL (page tabs; one style everywhere)
     <div class="eq-seg" role="tablist">
       <button class="eq-seg-btn" role="tab" aria-selected="true"><svg …/>Calendar</button>
       <button class="eq-seg-btn" role="tab" aria-selected="false"><svg …/>Holidays</button>
     </div>
     Active: aria-selected="true", aria-pressed="true" or .is-active. On phones the page
     control fills the width and drops its icons. Inside a card or a dialog (no shadow, compact;
     the active segment is banana here too):
     <div class="eq-seg eq-seg-flat"><button class="eq-seg-btn" aria-label="Previous">‹</button>
       <button class="eq-seg-btn">Today</button><button class="eq-seg-btn" aria-label="Next">›</button></div>
     Many segments (filters): add eq-seg-scroll — on phones the control keeps each label whole and
     scrolls sideways instead of squeezing the segments into the width:
     <div class="eq-seg eq-seg-scroll" role="group"><button class="eq-seg-btn" aria-pressed="true">All</button>…</div>
     A segment that can't be picked: the disabled attribute (greyed out, no hover).

   CHOICE CHIPS (small options in a form: a template, a tag, a choice)
     <div class="eq-chips" role="group">
       <button type="button" class="eq-chip">Yes / No</button>                  an action
       <button type="button" class="eq-chip" aria-pressed="true">Pick a date</button>
     </div>
     Picked: aria-pressed="true" (several at once), aria-checked="true" inside role="radiogroup"
     (one at a time; give each role="radio"), or .is-active. Disabled: the disabled attribute.

   FIELDS
     <div class="eq-form">                                  (two columns; eq-full spans both)
       <div><label class="eq-label" for="start">Start date</label><input class="eq-input" id="start" type="date"></div>
       <div><label class="eq-label" for="end">End date</label><input class="eq-input" id="end" type="date"></div>
       <div class="eq-full"><label class="eq-label" for="note">Note</label><input class="eq-input" id="note"></div>
     </div>
     <select class="eq-input">…</select>  <textarea class="eq-input"></textarea>
     <p class="eq-help">The calendar follows this province's holidays.</p>

   NOTES (inside a card; the next one sits 8px under the first)
     <div class="eq-note"><svg …/><span><strong>3 working days</strong></span></div>
     <div class="eq-note eq-note-warn"><svg …/>2 also off: Marianne, Naomi</div>
     <div class="eq-note eq-note-error">The end date can't be before the start date.</div>

   BUTTONS
     <button class="eq-btn"><svg …/>Book these dates</button>          primary (banana, real press)
     <button class="eq-btn eq-btn-secondary">Book from this day</button> surface, 2px ink, no shadow
     <button class="eq-btn eq-btn-ghost">Cancel</button>                  transparent until hover
     <button class="eq-btn eq-btn-sm">…</button>                          36px compact
     <button class="eq-icon-btn" aria-label="Edit" title="Edit"><svg …/></button>   36px
     Destructive: add eq-danger (rust text) to a ghost, secondary or icon button.
     Disabled: the disabled attribute (paper fill, muted text, no shadow).

   ROWS
     <div class="eq-row">
       <span class="eq-ava"><img src="…" alt=""></span>              or initials: <span class="eq-ava">MS</span>
       <div class="eq-row-main"><div class="eq-row-title">Marianne Stamatelos</div>
         <div class="eq-row-meta">Sep 30 → Oct 4 · Family trip</div></div>
       <span class="eq-row-value">5 days</span>                      or <span class="eq-tok">2 days</span>
       <button class="eq-icon-btn eq-danger" aria-label="Remove">…</button>
     </div>
     Consecutive rows get hairlines. A finished one: eq-row is-past (dimmed). Rows that flow
     into columns: <div class="eq-rows-grid" style="--eq-col:320px">…rows…</div>.
     A date leaf in front of a row: <span class="eq-leaf"><span class="eq-leaf-m">Oct</span><span class="eq-leaf-d">24</span></span>
     Faces: eq-ava (32px), eq-ava eq-ava-sm (28px), eq-ava eq-ava-xs (16px); any size with
       style="--eq-ava-size:24px". Initials under the photo, so a missing photo still shows someone:
       <span class="eq-ava" data-i="MS"><img src="…" alt="" onerror="this.remove()"></span>
     Tokens: eq-tok (banana, yours) · eq-tok eq-tok-quiet (paper) · eq-tag (tiny UPPERCASE, e.g. NEXT).

   EMPTY STATE AND LOADING
     <div class="eq-empty"><span class="eq-empty-ico"><svg …/></span>
       <span class="eq-empty-title">Nobody off this week</span>
       <span class="eq-empty-sub">Everyone's around.</span>
       <button class="eq-btn eq-btn-sm">…</button></div>                   (action optional)
     <div class="eq-empty eq-empty-page">…</div>   a whole page's state (no access, an error): roomier
     <div class="eq-skel-row"><span class="eq-skel eq-skel-ava"></span>
       <span class="eq-skel-lines"><span class="eq-skel eq-skel-line"></span><span class="eq-skel eq-skel-line eq-skel-short"></span></span></div>
     (eq-motion counts skel… as busy: a list keeps waiting for real rows.)

   INSET PANEL (a soft box inside a card, e.g. a picked day's list)
     <div class="eq-inset">…</div>

   TABLE
     <table class="eq-table"><thead><tr><th>Date</th><th>Holiday</th></tr></thead>
       <tbody><tr class="is-past"><td>…</td><td>…</td></tr>…</tbody></table>

   SPLIT (a narrow settings column beside the main content, stacked under 900px)
     <div class="eq-split"><div>…province…</div><div>…list…</div></div>

   MONTH GRID
     <div class="eq-cal-head"><h2 class="eq-cal-title">October 2026</h2><div class="eq-seg eq-seg-flat">…</div></div>
     <div class="eq-cal-dows"><div class="eq-cal-dow">Mon</div>…</div>
     <div class="eq-cal">                                    columns: --eq-cal-cols (default 7 equal)
       <div class="eq-cal-day is-other"><span class="eq-cal-dhead"><span class="eq-cal-num">28</span></span></div>
       <button class="eq-cal-day is-today is-selected" aria-pressed="true">
         <span class="eq-cal-dhead"><span class="eq-cal-num">1</span><span class="eq-cal-note">Thanksgiving</span></span>
         <span class="eq-cal-items">
           <span class="eq-cal-bar is-you"><span class="eq-ava eq-ava-xs">…</span><span class="eq-cal-bar-name">Sam</span></span>
           <span class="eq-cal-more">+2</span></span></button>
       <div class="eq-cal-day is-weekend">…</div>
     </div>
     Day states: is-weekend, is-other (neighbouring month), is-holiday (hatch), is-today,
     is-selected. Cell height: --eq-cal-h (104px; phones --eq-cal-h-phone 58px). On phones
     the bars shrink to faces ringed in their colour.
     Legend: <div class="eq-legend"><span><span class="eq-sw" style="--eq-sw:var(--orange)"></span>Off</span>
       <span><span class="eq-sw eq-sw-hatch"></span>Holiday</span><span><span class="eq-sw eq-sw-today"></span>Today</span></div>

   DIALOG (the scrim, then the panel; open it with .is-open — .open works too)
     <div class="eq-dialog eq-fade eq-exit" id="newDlg">
       <div class="eq-dialog-panel eq-pop" role="dialog" aria-modal="true" aria-labelledby="newDlgTitle">
         <header class="eq-dialog-head">
           <div class="eq-dialog-titles"><h2 class="eq-dialog-title" id="newDlgTitle">New album</h2>
             <p class="eq-dialog-sub">Albums are shared with the whole team.</p></div>
           <button type="button" class="eq-icon-btn eq-dialog-close" aria-label="Close"><svg …/></button>   (optional)
         </header>
         <div class="eq-dialog-body">…eq-label + eq-input fields…</div>
         <footer class="eq-dialog-foot"><button class="eq-btn eq-btn-ghost">Cancel</button><button class="eq-btn">Create</button></footer>
       </div>
     </div>
     The panel is 560px wide (style="--eq-dialog-w:500px" to change it), scrolls inside when long, and
     on phones takes the width (10px from each edge). With eq-fade + eq-exit on the scrim and eq-pop
     on the panel it fades and settles in and back out; closing (Esc, the scrim, Cancel) is the page's.

   PAGE DESCRIPTION
     <p class="eq-page-desc">…</p> — shown standalone, hidden inside the hub (the hub's top
     bar names the page; no description after a title).

   ── ALIGNMENT (v4, 2026-10-04: "things are not aligned, boxes are not the same heights, the right
      side goes far down while the left doesn't … not acceptable") — THE RULES, checked by the polish
      gate (scratchpad h/mk-polish.cjs) with real-sized AND rich data:
   1. ONE FRAME for every app: <div class="eq-frame">…</div> — max 1600px of content, centred, 32px
      gutters (16px on phones), 24px above the first block. Every app starts at the same top and the
      same left edge. Narrower reading layouts (a feed, a form) sit centred INSIDE the frame.
   2. ROWS, NOT COLUMNS. Side-by-side blocks share their top and their bottom. A grid of cards
      stretches each row to one height (the default for eq-grid / eq-bento); cards pin their footer to
      the bottom (eq-item-foot, eq-card-foot) so the stretch reads as intended, not as a hole.
   3. A SIDE COLUMN NEVER ENDS BELOW THE MAIN ONE. Either the rail is short and sticky (lists that
      scroll), or the two columns are aligned with eq-layout is-aligned (both end together: the last
      block of the shorter column grows), or — for a collection that may hold only a few items — there
      is no rail at all: the helpers become a band above the grid or the grid's add slot.
   4. NO HOLLOW BOXES. A box taller than its content centres it (empty states) or pins its footer; a
      lone placeholder never stands as tall as real cards with nothing in it.
   5. EVERY STATE IS DESIGNED: real data today is sparse (nobody in, no open poll, one task). A page
      with little in it still fills a composed screen (an empty-state feature, not a sea of beige).

   FRAME      <div class="eq-frame">…</div>
   ALIGNED    <div class="eq-layout is-aligned"><div>…main…</div><aside class="eq-rail">…</aside></div>
              (both columns end together; the last block of each column grows — a card there gets
              display:flex/column, so give it an eq-card-foot or a centred eq-empty)
   BENTO      <div class="eq-bento"><section class="eq-card eq-span-8">…</section><section class="eq-card eq-span-4">…</section>…</div>
              a 12-column dashboard grid; rows stretch to one height; spans 3·4·5·6·7·8·9·12 (from
              1100px), all spans become 6 or 12 under 1100px and 12 on phones
   CARD FOOT  <footer class="eq-card-foot">…</footer> — pinned to the bottom of a stretched card
   FILL       .eq-fill on any flex child that should take the remaining height (a list, an empty state)

   ── COMPOSITION (v3, "make it exceptional") ──────────────────────────────────────────────
   A page is composed for a 1937px screen: a main column and, from 1100px, a side rail with the
   page's helpers; sections sit on the page with a heading row (no box around a list of boxes);
   collections are grids of items that SHOW their content (a cover, faces, a bar); one thing can
   be featured. Reference page: slides.html.

   MAIN + RAIL (stacked under 1100px, so the hub on a 1366px laptop keeps the rail; the rail can stick while the main column scrolls)
     <div class="eq-layout">                         (rail on the left: eq-layout eq-layout-left)
       <div>…main…</div>
       <aside class="eq-rail is-sticky"><section class="eq-card">…</section>…</aside>
     </div>                                          rail width: style="--eq-rail:360px"

   SECTION (a heading row on the page, then its content)
     <section class="eq-sec">
       <header class="eq-sec-head"><h2 class="eq-sec-title">Needs your vote</h2><span class="eq-count">2</span>
         <a class="eq-sec-link" href="…">All polls<svg …/></a></header>
       <div class="eq-grid" style="--eq-min:320px">…items…</div>
     </section>

   ITEM (one thing in a collection: a deck, a poll, an idea, a board, an album, an event)
     <a class="eq-item" href="…">                    (a whole item that opens; or <div class="eq-item is-link">)
       <div class="eq-item-cover" style="--eq-cover:var(--sky)">           (optional; 16:9 — --eq-cover-ratio)
         <img src="…" alt="">  or  <span class="eq-cover-art"><svg …line icon…/></span>
         <span class="eq-cover-tag"><span class="eq-tag">Today</span></span></div>
       <div class="eq-item-body">
         <div class="eq-item-top"><span class="eq-status" style="--eq-status:var(--mint)">Public</span></div>
         <h3 class="eq-title eq-clamp-2" title="full title">…</h3>
         <p class="eq-item-desc eq-clamp-2">…</p></div>
       <div class="eq-item-foot"><span class="eq-avas">…faces…</span><span class="eq-meta">8 cards</span><button class="eq-icon-btn">⋯</button></div>
     </a>
     Items in a row line up: the body grows, the footer sits at the bottom. A static item (not
     clickable) is a <div class="eq-item"> without is-link: no lift.

     Variants: eq-grid eq-grid-fit (a short row stretches across), eq-grid eq-strip (one row only,
     the rest hidden — a "next up" preview), eq-item eq-item-row (cover on the left; wrap the body
     and footer in <div class="eq-item-main">), and the slot that invites the next one:
     <button class="eq-item-add"><svg …/>New album<span class="eq-sub">Share the photos of an event</span></button>
   TOOLBAR PIECES  counts in tabs: <button class="eq-seg-btn">Mine<span class="eq-count">3</span></button>
     a search: <label class="eq-search"><svg …magnifier…/><input class="eq-input" type="search" placeholder="Find…"></label>
   STICKY RAIL: only when the rail is shorter than the screen — a taller rail hides its lower cards.
   NUMBERS: ClaudiaShouter's 0 is nearly solid below ~1.4rem; small counts stay in the text face (eq-count, eq-tok).

   STATS (headline numbers in one card)
     <div class="eq-stats"><a class="eq-stat" href="…"><span class="eq-stat-label"><span class="eq-sw" style="--eq-sw:var(--sky)"></span>In today</span>
       <span class="eq-stat-num">11</span><span class="eq-stat-sub">of 24 people</span></a>…</div>

     A stat that filters the page: a <button class="eq-stat" aria-pressed="true"> (banana underline when picked).
     Phones: two per row.
   RAIL ROW   <a class="eq-mini" href="…"><span class="eq-mini-sw" style="--eq-sw:var(--sky)"></span>
     <span class="eq-mini-main"><span class="eq-mini-title">Confirm the giveaway order</span><span class="eq-mini-meta">IFPA Show · Booth</span></span>
     <span class="eq-tok">Oct 3</span></a>   (title and meta on one line each; a <button class="eq-mini"> works too)
   FACES IN A ROW   <span class="eq-avas"><span class="eq-ava eq-ava-sm">…</span>…<span class="eq-avas-more">+5</span></span>
   BAR              <div class="eq-bar"><span style="width:40%"></span></div>   (a breakdown: several spans,
                    each with style="width:…;--eq-bar:var(--mint)"; eq-bar-lg is 12px)
   STATUS           <span class="eq-status" style="--eq-status:var(--sky)">In review</span>   (a dot and a word)
   TAG COLOURS      <span class="eq-tag eq-tag-quiet">New</span> · eq-tag-mint · eq-tag-sky · eq-tag-purple · eq-tag-orange
   QUIET FIELD      <select class="eq-input eq-input-quiet">…</select>   (in a table row: soft fill, edge on hover)

   FEATURE (the one thing to see first: today's birthday, the next gathering, a pinned post)
     <article class="eq-feature" style="--eq-feature:var(--banana)">
       <div class="eq-feature-art"><img …> or <span class="eq-cover-art"><svg …/></span></div>
       <div class="eq-feature-body"><span class="eq-eyebrow">Today</span><h2 class="eq-title-lg">…</h2>
         <p class="eq-text">…</p><div class="eq-feature-actions"><a class="eq-btn">…</a></div></div>
     </article>                                      art width: style="--eq-feature-art:44%"

   CHOICES (big options in a form: a store type, a poll type)
     <div class="eq-choices" role="radiogroup">
       <button type="button" class="eq-choice" role="radio" aria-checked="true"><span class="eq-chip-ico">…</span>
         <span class="eq-choice-title">Costco</span><span class="eq-choice-sub">Warehouse club</span></button>…</div>
     (or <label class="eq-choice"><input type="radio" name="…">…</label>)

   PERSON   <div class="eq-person"><span class="eq-ava">…</span><div><div class="eq-person-name">Owain Hoefle</div>
              <div class="eq-person-line">Today · October 2</div></div></div>
*/

@font-face { font-family: 'ClaudiaShouter-Black'; font-weight: 900; font-display: swap; src: url('/assets/fonts/ClaudiaShouter-Black.woff2') format('woff2'), url('/assets/fonts/ClaudiaShouter-Black.ttf') format('truetype'); }
/* the text face: Inter, the face of the hub's menu (Guillaume, 2026-10-04: "replace the Retor font with whatever
   the font of the left bar is, app wide"), as the alias 'Equifruit Text': one variable font from Regular to Bold,
   set at 90% so every size chosen for the old face keeps its line breaks (Inter runs wider) */
@font-face { font-family: 'Equifruit Text'; font-style: normal; font-weight: 400 700; font-display: swap; size-adjust: 90%; src: url('/assets/fonts/Inter-Variable.woff2') format('woff2'); }
html { font-size: 106.25%; }   /* 17px: the hub reads one step larger (Guillaume, 2026-10-02) */
/* thin scrollbars in the brand ink (Windows shows a grey 17px bar otherwise), and a banana text selection */
html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink, #2E2624) 30%, transparent) transparent; }
::selection { background: rgba(251, 187, 32, .45); color: inherit; }
:root {
  --eq-font-display: 'ClaudiaShouter-Black', 'Archivo Black', 'Arial Black', sans-serif;   /* the brand display face: caps only */
  --eq-font-body: 'Equifruit Text', 'Inter', system-ui, sans-serif;                     /* the text face: Inter */
  /* the colour tokens — Warm white, the default theme (the brand's own "kinda beige" white) */
  --paper: #EAE3DA; --paper-2: #F4EFE7; --surface: #FFFCF6; --surface-2: #FAF6EF;
  --ink: #2E2624; --ink-2: #4A3A34; --muted: #7A6055; --line: rgba(46, 38, 36, .16);
  --banana: #FBBB20; --banana-2: #FFCC3F; --orange: #F08050; --mint: #9AC9B5; --purple: #D8C7E0; --sky: #94CDE9;
  --on-bright: #2E2624;                  /* text and edges on a brand-colour fill, in every theme */
  --eq-border: #2E2624;                  /* the structural 2px edges: cards, buttons, controls */
  --eq-shadow-ink: #2E2624;              /* the hard shadows */
  --eq-hair: rgba(46, 38, 36, .12);      /* hairlines inside cards */
  --eq-hair-2: rgba(46, 38, 36, .22);    /* a disabled button's edge */
  --eq-field: rgba(46, 38, 36, .32);     /* a field's resting border */
  --eq-hover: #FAF6EF;                   /* a clickable cell or row under the pointer */
  --eq-hatch: rgba(46, 38, 36, .055);    /* holiday hatch */
  --eq-hatch-2: rgba(46, 38, 36, .2);    /* the same hatch as a legend swatch */
  --eq-ring: 0 0 0 3px rgba(251, 187, 32, .45);
  --eq-rust: #B4532E;                    /* destructive text, errors */
  --eq-ok: #2F7A57;                      /* success text (saved, done) */
  --eq-chrome: #2E2624; --eq-chrome-ink: #F4EFE7;   /* a page's own top bar outside the hub: dark brown in every theme */
}
/* Themes. assets/eq-motion.js puts data-theme on <html> before the page paints (light · white ·
   dark; "System" resolves to light or dark). html[data-theme] outranks a page's own :root tokens,
   so a page that names its colours through these tokens follows the theme by itself. */
html[data-theme="white"] {
  --paper: #F6F3EF; --paper-2: #F0EBE4; --surface: #FFFFFF; --surface-2: #FBFAF8;
  --ink: #2E2624; --ink-2: #4A3A34; --muted: #76655B; --line: rgba(46, 38, 36, .13);
  --eq-hair: rgba(46, 38, 36, .1); --eq-hair-2: rgba(46, 38, 36, .2); --eq-field: rgba(46, 38, 36, .3);
  --eq-hover: #F8F5F1;
}
html[data-theme="dark"] {
  /* Dark, neon (Guillaume, 2026-10-03: "more lively and neon"): a near-black warm canvas, the brand
     colours turned up to neon, light rims on the cards and the hard shadow lit in banana */
  color-scheme: dark;
  --paper: #110E0D; --paper-2: #1F1A18; --surface: #1A1514; --surface-2: #241E1C;
  --ink: #F8F2EA; --ink-2: #DDD3C7; --muted: #A69789; --line: rgba(248, 242, 234, .14);
  --banana: #FFC629; --banana-2: #FFD457; --orange: #FF7448; --mint: #3EE0A6; --purple: #BC98FF; --sky: #45C8FF;
  --on-bright: #15100E;
  --eq-border: rgba(248, 242, 234, .3);
  --eq-shadow-ink: #FFC629;
  --eq-hair: rgba(248, 242, 234, .1); --eq-hair-2: rgba(248, 242, 234, .24); --eq-field: rgba(248, 242, 234, .3);
  --eq-hover: rgba(255, 198, 41, .07); --eq-hatch: rgba(248, 242, 234, .06); --eq-hatch-2: rgba(248, 242, 234, .22);
  --eq-ring: 0 0 0 3px rgba(255, 198, 41, .6);
  --eq-rust: #FF8F6B;
  --eq-ok: #3EE0A6;
  --eq-chrome: #0C0A09;
}

/* ── Text roles (v2) ── what people typed or read goes in the text face (Inter), as typed; ClaudiaShouter only for
   short fixed UI words (section headings, buttons, tabs, numbers). */
.eq-title { margin: 0; font: 700 1.2rem/1.3 var(--eq-font-body); color: var(--ink, #2E2624); letter-spacing: -.01em; text-transform: none; overflow-wrap: anywhere; }
.eq-title-lg { margin: 0; font: 700 1.45rem/1.25 var(--eq-font-body); color: var(--ink, #2E2624); letter-spacing: -.015em; text-transform: none; overflow-wrap: anywhere; }
.eq-text { font: 400 1rem/1.5 var(--eq-font-body); color: var(--ink, #2E2624); letter-spacing: normal; }
.eq-meta { font: 400 .88rem/1.4 var(--eq-font-body); color: var(--muted, #7A6055); letter-spacing: normal; }
.eq-eyebrow { display: block; font: 700 .74rem/1.2 var(--eq-font-body); color: var(--muted, #7A6055); text-transform: uppercase; letter-spacing: .08em; }
/* page containers: content keeps a readable width on wide screens */
.eq-page { box-sizing: border-box; width: 100%; max-width: 1480px; margin: 0 auto; }
.eq-page-narrow { box-sizing: border-box; width: 100%; max-width: 860px; margin: 0 auto; }
/* a toolbar over a list: filters left, search and sort right, wrapping on narrow screens */
.eq-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 20px; }
.eq-toolbar-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* ── Card ─────────────────────────────────────────────────────────────────────────── */
.eq-card { box-sizing: border-box; min-width: 0; margin: 0 0 24px; padding: 22px 24px 24px;
  background: var(--surface, #FFFCF6); color: var(--ink, #2E2624);
  border: 2px solid var(--eq-border, #2E2624); border-radius: 14px; box-shadow: 4px 4px 0 var(--eq-shadow-ink); }
.eq-card-link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.eq-card-link:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--eq-shadow-ink); }
.eq-card-link:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--eq-shadow-ink); }
.eq-card-link:focus-visible { outline: none; box-shadow: 4px 4px 0 var(--eq-shadow-ink), var(--eq-ring); }
.eq-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0 0 16px; }
@media (max-width: 560px) { .eq-card-head:has(.eq-card-sub) { align-items: flex-start; } }   /* a wrapping sub-line keeps the chip on top */
.eq-card-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eq-card-title { margin: 0; font: 400 1rem/1.2 var(--eq-font-display); color: var(--ink, #2E2624); text-transform: uppercase; letter-spacing: .02em; }
.eq-card-sub { margin: 0; font: 400 .95rem/1.4 var(--eq-font-body); color: var(--muted, #7A6055); letter-spacing: normal; }
.eq-card-meta { flex-shrink: 0; margin-left: auto; font: 400 .88rem/1 var(--eq-font-body); color: var(--muted, #7A6055); font-variant-numeric: tabular-nums; letter-spacing: normal; }
.eq-chip-ico { box-sizing: border-box; flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1.5px solid var(--on-bright, #2E2624); border-radius: 8px; background: var(--banana-2, #FFCC3F); color: var(--on-bright, #2E2624); }
.eq-chip-ico.eq-chip-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eq-ico-action { background: var(--banana-2, #FFCC3F); }
.eq-ico-yours { background: var(--mint, #9AC9B5); }
.eq-ico-team { background: var(--sky, #94CDE9); }
.eq-ico-ref { background: var(--purple, #D8C7E0); }
.eq-ico-attn { background: var(--orange, #F08050); }

/* ── Segmented control ────────────────────────────────────────────────────────────── */
.eq-seg { box-sizing: border-box; display: inline-flex; max-width: 100%; overflow: hidden;
  background: var(--surface, #FFFCF6); border: 2px solid var(--eq-border, #2E2624); border-radius: 10px; box-shadow: 3px 3px 0 var(--eq-shadow-ink); }
.eq-seg-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; margin: 0; padding: 0 16px;
  background: var(--surface, #FFFCF6); color: var(--ink, #2E2624); border: 0; border-right: 2px solid var(--eq-border, #2E2624); border-radius: 0;
  font: 400 .78rem/1 var(--eq-font-display); white-space: nowrap; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; }
.eq-seg-btn:last-child { border-right: 0; }
.eq-seg-btn:hover { background: var(--paper-2, #F4EFE7); }
.eq-seg-btn.is-active, .eq-seg-btn[aria-selected="true"], .eq-seg-btn[aria-pressed="true"] { background: var(--banana, #FBBB20); color: var(--on-bright, #2E2624); }
.eq-seg-btn:focus-visible { outline: 2px solid var(--eq-border, #2E2624); outline-offset: -5px; }
.eq-seg-btn.eq-seg-btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eq-seg-flat { flex-shrink: 0; box-shadow: none; }
.eq-seg-flat .eq-seg-btn { height: 32px; min-width: 34px; padding: 0 10px; font-size: .78rem; background: transparent; }
.eq-seg-flat .eq-seg-btn:hover { background: var(--paper-2, #F4EFE7); }
.eq-seg-flat .eq-seg-btn:is(.is-active, [aria-selected="true"], [aria-pressed="true"]) { background: var(--banana, #FBBB20); color: var(--on-bright, #2E2624); }
.eq-seg-btn:disabled { opacity: .45; cursor: default; pointer-events: none; }

/* ── Fields ───────────────────────────────────────────────────────────────────────── */
.eq-label { display: block; margin: 0 0 7px; font: 700 .78rem/1.2 var(--eq-font-body); color: var(--ink-2, #4A3A34); text-transform: uppercase; letter-spacing: .06em; }
.eq-input { box-sizing: border-box; display: block; width: 100%; height: 40px; margin: 0; padding: 0 12px;
  font: 400 1rem/1.2 var(--eq-font-body); color: var(--ink, #2E2624);
  background-color: var(--surface, #FFFCF6); border: 1.5px solid var(--eq-field); border-radius: 8px; transition: border-color .15s ease, box-shadow .15s ease; letter-spacing: normal; }
.eq-input:hover { border-color: var(--eq-border, #2E2624); }
.eq-input:focus { outline: none; border-color: var(--eq-border, #2E2624); box-shadow: var(--eq-ring); }
.eq-input:disabled { background-color: var(--paper-2, #F4EFE7); color: var(--muted, #7A6055); border-color: var(--eq-hair); cursor: not-allowed; }
textarea.eq-input { height: auto; min-height: 88px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
select.eq-input { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E2624' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 15px; }
[data-theme="dark"] select.eq-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1EAE0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); }
.eq-help { margin: 10px 0 0; font: 400 .9rem/1.4 var(--eq-font-body); color: var(--muted, #7A6055); letter-spacing: normal; }
.eq-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.eq-form > .eq-full { grid-column: 1 / -1; }

/* ── Notes ────────────────────────────────────────────────────────────────────────── */
.eq-note { box-sizing: border-box; display: flex; align-items: center; gap: 9px; margin: 16px 0 0; padding: 10px 12px;
  border-radius: 8px; background: var(--paper-2, #F4EFE7); color: var(--ink-2, #4A3A34); font: 400 .95rem/1.4 var(--eq-font-body); letter-spacing: normal; }
.eq-note.eq-note svg { flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eq-note strong { font-weight: 700; color: var(--ink, #2E2624); }
.eq-note-warn { background: rgba(240, 128, 80, .16); color: var(--ink, #2E2624); }
.eq-note-error { background: rgba(180, 83, 46, .10); color: var(--eq-rust); font-weight: 600; }
.eq-note + .eq-note { margin-top: 8px; }

/* ── Buttons ──────────────────────────────────────────────────────────────────────── */
.eq-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; margin: 0; padding: 0 18px;
  font: 400 .86rem/1 var(--eq-font-display); white-space: nowrap; text-decoration: none; cursor: pointer;
  color: var(--on-bright, #2E2624); background: var(--banana, #FBBB20); border: 2px solid var(--on-bright, #2E2624); border-radius: 9px; box-shadow: 3px 3px 0 var(--eq-shadow-ink); text-transform: uppercase; letter-spacing: .04em; }
.eq-btn.eq-btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eq-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--eq-shadow-ink); }
.eq-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--eq-shadow-ink); }
.eq-btn:focus-visible { outline: none; box-shadow: 3px 3px 0 var(--eq-shadow-ink), var(--eq-ring); }
.eq-btn-sm { height: 36px; padding: 0 14px; font-size: .78rem; }
.eq-btn-secondary { color: var(--ink, #2E2624); background: var(--surface, #FFFCF6); border-color: var(--eq-border, #2E2624); box-shadow: none; }
.eq-btn-secondary:hover { background: var(--paper-2, #F4EFE7); transform: none; box-shadow: none; }
.eq-btn-ghost { color: var(--ink, #2E2624); background: transparent; border-color: transparent; box-shadow: none; }
.eq-btn-ghost:hover { background: var(--paper-2, #F4EFE7); transform: none; box-shadow: none; }
.eq-btn-secondary:active, .eq-btn-ghost:active { transform: translate(1px, 1px); box-shadow: none; }
.eq-btn-secondary:focus-visible, .eq-btn-ghost:focus-visible { box-shadow: var(--eq-ring); }
.eq-btn:disabled, .eq-btn[aria-disabled="true"] { cursor: default; transform: none; box-shadow: none;
  color: var(--muted, #7A6055); background: var(--paper-2, #F4EFE7); border-color: var(--eq-hair-2); }
.eq-icon-btn { box-sizing: border-box; flex: 0 0 36px; width: 36px; height: 36px; display: inline-grid; place-items: center; margin: 0; padding: 0;
  color: var(--ink-2, #4A3A34); background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
.eq-icon-btn.eq-icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eq-icon-btn:hover { background: var(--paper-2, #F4EFE7); }
.eq-icon-btn:focus-visible { outline: none; box-shadow: var(--eq-ring); }
.eq-icon-btn:disabled { opacity: .4; cursor: default; }
.eq-danger { color: var(--eq-rust); }

/* ── Rows, faces, tokens ──────────────────────────────────────────────────────────── */
.eq-row { box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 52px; padding: 9px 0; border-top: 1px solid var(--eq-hair); }
.eq-row:first-child { border-top: 0; }
.eq-row-main { flex: 1; min-width: 0; }
.eq-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 1rem/1.3 var(--eq-font-body); color: var(--ink, #2E2624); letter-spacing: normal; }
.eq-row-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 .88rem/1.35 var(--eq-font-body); color: var(--muted, #7A6055); letter-spacing: normal; }
.eq-row-meta:empty { display: none; }
.eq-row-title, .eq-row-meta { display: block; }   /* also when the row is a <button> and these are spans */
.eq-row-value { flex-shrink: 0; font: 700 .9rem/1 var(--eq-font-body); color: var(--ink-2, #4A3A34); font-variant-numeric: tabular-nums; white-space: nowrap; }
.eq-row.is-past { opacity: .55; }
.eq-rows-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--eq-col, 240px), 1fr)); column-gap: 32px; overflow: hidden; }
/* every row keeps its top hairline; the first line of them sits under the clip */
.eq-rows-grid > .eq-row, .eq-rows-grid > .eq-skel-row { border-top: 1px solid var(--eq-hair); margin-top: -1px; }
.eq-rows-grid > .eq-empty { grid-column: 1 / -1; }
.eq-ava { --eq-ava-size: 32px; box-sizing: border-box; flex: 0 0 var(--eq-ava-size); width: var(--eq-ava-size); height: var(--eq-ava-size);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%;
  border: 1.5px solid var(--on-bright, #2E2624); background: var(--banana, #FBBB20); color: var(--on-bright, #2E2624);
  font-family: var(--eq-font-display); font-weight: 400; letter-spacing: .02em; font-size: max(8.5px, calc(var(--eq-ava-size) * .32)); line-height: 1; text-transform: uppercase; }
.eq-ava img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eq-ava[data-i] { position: relative; }
.eq-ava[data-i]::before { content: attr(data-i); }
.eq-ava[data-i] img { position: absolute; inset: 0; }
.eq-ava-sm { --eq-ava-size: 28px; }
.eq-ava-xs { --eq-ava-size: 16px; border-width: 1px; font-size: .42rem; }
.eq-tok { flex-shrink: 0; display: inline-block; padding: 5px 9px; border: 0; border-radius: 6px; background: var(--banana, #FBBB20); color: var(--on-bright, #2E2624); font: 700 .8rem/1 var(--eq-font-body); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .01em; }
.eq-tok-quiet, .is-past .eq-tok { background: var(--paper-2, #F4EFE7); color: var(--ink, #2E2624); }
.eq-tag { display: inline-block; padding: 4px 8px; vertical-align: 1px; border: 0; border-radius: 6px; background: var(--banana, #FBBB20); color: var(--on-bright, #2E2624); font: 700 .72rem/1 var(--eq-font-body); text-transform: uppercase; letter-spacing: .05em; }
.eq-leaf { box-sizing: border-box; flex: 0 0 40px; width: 40px; height: 40px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--paper-2, #F4EFE7); }
.eq-leaf-m { font: 400 .6rem/1 var(--eq-font-display); text-transform: uppercase; color: var(--muted, #7A6055); letter-spacing: .05em; }
.eq-leaf-d { margin-top: 3px; font: 400 1.08rem/1 var(--eq-font-display); color: var(--ink, #2E2624); font-variant-numeric: tabular-nums; letter-spacing: normal;text-transform:uppercase; }

/* ── Empty state, loading rows, inset panel ───────────────────────────────────────── */
.eq-empty { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; padding: 20px 12px 16px; text-align: center; }
.eq-empty-ico { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 50%; background: var(--paper-2, #F4EFE7); color: var(--ink-2, #4A3A34); }
.eq-empty-ico.eq-empty-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.eq-empty-title { font: 700 1.05rem/1.3 var(--eq-font-body); color: var(--ink, #2E2624); letter-spacing: normal; }
.eq-empty-sub { max-width: 38ch; font: 400 .95rem/1.45 var(--eq-font-body); color: var(--muted, #7A6055); letter-spacing: normal; }
.eq-empty .eq-btn { margin-top: 10px; }
/* a whole page's state (no access, nothing yet, an error): roomier */
.eq-empty.eq-empty-page { padding: 48px 16px 40px; }
.eq-empty-page .eq-empty-ico { width: 56px; height: 56px; }
.eq-empty-page .eq-empty-ico.eq-empty-ico svg { width: 26px; height: 26px; }
.eq-empty-page .eq-empty-title { font-size: 1.15rem; }
.eq-skel-row { box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-height: 52px; }
.eq-skel-row + .eq-skel-row { border-top: 1px solid var(--eq-hair); }
.eq-skel { display: block; border-radius: 6px; background: var(--paper-2, #F4EFE7); }
.eq-skel-ava { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; }
.eq-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.eq-skel-line { width: 46%; height: 10px; }
.eq-skel-short { width: 28%; }
.eq-inset { box-sizing: border-box; margin: 16px 0 0; padding: 14px 16px 6px; border-radius: 10px; background: var(--paper-2, #F4EFE7); }

/* ── Table, split ─────────────────────────────────────────────────────────────────── */
.eq-table { width: 100%; border-collapse: collapse; }
.eq-table th { padding: 0 12px 10px; text-align: left; font: 700 .76rem/1.2 var(--eq-font-body); color: var(--muted, #7A6055); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; border-bottom: 1px solid var(--eq-hair); }
.eq-table td { padding: 13px 12px; font: 400 1rem/1.3 var(--eq-font-body); color: var(--ink, #2E2624); border-bottom: 1px solid var(--eq-hair); letter-spacing: normal; }
.eq-table tr:last-child td { border-bottom: 0; }
.eq-table th:first-child, .eq-table td:first-child { padding-left: 0; }
.eq-table tr.is-past td { color: var(--muted, #7A6055); }
.eq-split { display: grid; grid-template-columns: 1fr; gap: 20px; }

/* ── Month grid ───────────────────────────────────────────────────────────────────── */
.eq-cal-head { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.eq-cal-title { flex: 1; min-width: 0; margin: 0; font: 400 1.2rem/1.2 var(--eq-font-display); color: var(--ink, #2E2624); text-transform: uppercase; letter-spacing: .01em; }
.eq-cal-title::first-letter { text-transform: uppercase; }
.eq-cal-dows, .eq-cal { display: grid; grid-template-columns: var(--eq-cal-cols, repeat(7, minmax(0, 1fr))); }
.eq-cal-dows { margin: 0 0 8px; }
.eq-cal-dow { padding: 0 8px; font: 400 .64rem/1 var(--eq-font-display); text-transform: uppercase; color: var(--muted, #7A6055); letter-spacing: .05em; }
.eq-cal { gap: 1px; overflow: hidden; background: var(--eq-hair); border: 1px solid var(--eq-hair); border-radius: 10px; }
.eq-cal-day { position: relative; box-sizing: border-box; min-width: 0; min-height: var(--eq-cal-h, 104px); display: flex; flex-direction: column; gap: 6px;
  margin: 0; padding: 7px 7px 8px; overflow: hidden; background: var(--surface, #FFFCF6); border: 0; border-radius: 0; font: inherit; color: var(--ink, #2E2624); text-align: left; }
button.eq-cal-day { cursor: pointer; }
button.eq-cal-day:hover { background: var(--eq-hover); }
button.eq-cal-day:focus-visible { outline: 2px solid var(--eq-border, #2E2624); outline-offset: -2px; z-index: 1; }
.eq-cal-day.is-weekend, .eq-cal-day.is-other { background: var(--paper-2, #F4EFE7); }
.eq-cal-day.is-weekend .eq-cal-num, .eq-cal-day.is-other .eq-cal-num { color: var(--muted, #7A6055); }
.eq-cal-day.is-other .eq-cal-num { opacity: .55; }
.eq-cal-day.is-holiday { background: repeating-linear-gradient(135deg, var(--eq-hatch) 0 1.5px, transparent 1.5px 8px) var(--surface, #FFFCF6); }
button.eq-cal-day.is-holiday:hover { background-color: var(--eq-hover); }
.eq-cal-day.is-selected { box-shadow: inset 0 0 0 2px var(--eq-border, #2E2624); z-index: 1; }
.eq-cal-dhead { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; min-width: 0; }
.eq-cal-num { flex-shrink: 0; display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin: -2px 0 0 -2px; padding: 0 4px; border-radius: 11px;
  font: 400 .78rem/1 var(--eq-font-display); font-variant-numeric: tabular-nums; color: var(--ink-2, #4A3A34); letter-spacing: normal;text-transform:uppercase; }
.eq-cal-day.is-today .eq-cal-num { background: var(--banana, #FBBB20); color: var(--on-bright, #2E2624); box-shadow: 0 0 0 1.5px var(--on-bright, #2E2624); font-weight: 700; }
.eq-cal-note { flex: 0 0 100%; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font: 400 .8rem/1.25 var(--eq-font-body); color: var(--muted, #7A6055); letter-spacing: normal; }
.eq-cal-items { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.eq-cal-bar { display: flex; align-items: center; gap: 5px; height: 22px; min-width: 0; padding: 0 7px 0 3px; border-radius: 6px;
  background: var(--orange, #F08050); color: var(--on-bright, #2E2624); font: 600 .8rem/1 var(--eq-font-body); letter-spacing: normal; }
.eq-cal-bar.is-you { background: var(--banana, #FBBB20); }
.eq-cal-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-cal-more { padding: 2px 0 0 4px; font: 700 .8rem/1 var(--eq-font-body); color: var(--muted, #7A6055);  letter-spacing: normal; }
.eq-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font: 400 .9rem/1 var(--eq-font-body); color: var(--muted, #7A6055); letter-spacing: normal; }
.eq-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.eq-sw { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--eq-sw, var(--paper-2, #F4EFE7)); }
.eq-sw-hatch { background: repeating-linear-gradient(135deg, var(--eq-hatch-2) 0 1.5px, transparent 1.5px 5px) var(--surface, #FFFCF6); box-shadow: inset 0 0 0 1px var(--eq-hair); }
.eq-sw-today { width: 12px; height: 12px; margin: 1px; border-radius: 50%; background: var(--banana, #FBBB20); box-shadow: 0 0 0 1.5px var(--on-bright, #2E2624); }

/* ── Choice chips ───────────────────────────────────────────────────────────────────── */
.eq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.eq-chip { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; margin: 0; padding: 0 13px;
  font: 700 .92rem/1 var(--eq-font-body); white-space: nowrap; cursor: pointer;
  color: var(--ink, #2E2624); background: var(--surface, #FFFCF6); border: 1.5px solid var(--eq-field); border-radius: 999px; letter-spacing: normal; }
.eq-chip:hover { border-color: var(--eq-border, #2E2624); background: var(--paper-2, #F4EFE7); }
.eq-chip:focus-visible { outline: none; box-shadow: var(--eq-ring); }
/* a chip wrapping a checkbox/radio: picked when it is checked; the input stays for the keyboard */
.eq-chip:has(> input) { position: relative; }
.eq-chip > input:is([type="checkbox"], [type="radio"]) { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.eq-chip:has(> input:focus-visible) { box-shadow: var(--eq-ring); }
.eq-chip:has(> input:checked), .eq-chip:is(.is-active, [aria-pressed="true"], [aria-checked="true"]) { font-weight: 600; color: var(--on-bright, #2E2624); background: var(--banana, #FBBB20); border-color: var(--on-bright, #2E2624); }
.eq-chip:disabled { opacity: .45; cursor: default; pointer-events: none; }
.eq-chip svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── Dialog ───────────────────────────────────────────────────────────────────────── */
.eq-dialog { position: fixed; inset: 0; z-index: 900; display: none; align-items: flex-start; justify-content: center; padding: 40px 18px; background: rgba(46, 38, 36, .45); }
.eq-dialog.is-open, .eq-dialog.open { display: flex; }
.eq-dialog-panel { box-sizing: border-box; width: 100%; max-width: var(--eq-dialog-w, 560px); max-height: calc(100vh - 80px); overflow: auto; padding: 24px 26px 26px;
  background: var(--surface, #FFFCF6); color: var(--ink, #2E2624); border: 2px solid var(--eq-border, #2E2624); border-radius: 14px; box-shadow: 6px 6px 0 var(--eq-shadow-ink); }
.eq-dialog-head { display: flex; align-items: flex-start; gap: 12px; }
.eq-dialog-titles { flex: 1; min-width: 0; }
.eq-dialog-title { margin: 0; font: 400 1.2rem/1.2 var(--eq-font-display); color: var(--ink, #2E2624); text-transform: uppercase; letter-spacing: .01em; }
.eq-dialog-sub { margin: 6px 0 0; font: 400 .98rem/1.45 var(--eq-font-body); color: var(--muted, #7A6055); letter-spacing: normal; }
.eq-dialog-close { margin: -6px -8px 0 0; }
.eq-dialog .eq-label { margin: 18px 0 8px; }
.eq-dialog-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 24px; }
/* a long dialog: the footer stays at the bottom of the panel while the body scrolls (always on phones) */
.eq-dialog-foot.is-sticky { position: sticky; bottom: -26px; z-index: 1; margin: 24px -26px -26px; padding: 14px 26px 22px;
  background: var(--surface, #FFFCF6); border-top: 1px solid var(--eq-hair); border-radius: 0 0 12px 12px; }

/* ── Alignment (v4) — see the header: one frame, rows not columns, aligned columns, no hollow boxes ── */
.eq-frame { box-sizing: border-box; width: 100%; max-width: 1664px; margin: 0 auto; padding: 24px 32px 56px; }
@media (max-width: 760px) { .eq-frame { padding: 16px 16px 40px; } }
/* two columns that end together: both stretch to the taller one; the last block of each grows */
.eq-layout.is-aligned { align-items: stretch; }
.eq-layout.is-aligned > * { display: flex; flex-direction: column; min-width: 0; }
.eq-layout.is-aligned > * > :last-child { flex: 1 1 auto; margin-bottom: 0; }
.eq-layout.is-aligned > * > .eq-card:last-child, .eq-layout.is-aligned > * > .eq-item:last-child { display: flex; flex-direction: column; }
.eq-layout.is-aligned > .eq-rail.is-sticky { position: static; }
/* a 12-column dashboard grid; each row stretches to one height */
.eq-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: stretch; grid-auto-flow: row dense; }
.eq-bento > * { grid-column: span 12; min-width: 0; margin: 0; }
.eq-bento > .eq-card, .eq-bento > .eq-item { display: flex; flex-direction: column; }
@media (min-width: 761px) { .eq-bento > :is(.eq-span-3, .eq-span-4, .eq-span-5, .eq-span-6, .eq-span-7, .eq-span-8, .eq-span-9) { grid-column: span 6; } }
@media (min-width: 1100px) {
  .eq-bento > .eq-span-3 { grid-column: span 3; } .eq-bento > .eq-span-4 { grid-column: span 4; } .eq-bento > .eq-span-5 { grid-column: span 5; }
  .eq-bento > .eq-span-6 { grid-column: span 6; } .eq-bento > .eq-span-7 { grid-column: span 7; } .eq-bento > .eq-span-8 { grid-column: span 8; }
  .eq-bento > .eq-span-9 { grid-column: span 9; }
}
/* a stretched card: its footer sits at the bottom, a list or an empty state takes the rest */
.eq-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 16px; }
.eq-fill { flex: 1 1 auto; min-height: 0; }
.eq-empty.eq-fill { justify-content: center; }
/* grids of cards: every row one height (cards keep their footers pinned) */
.eq-grid { align-items: stretch; }

/* ── Composition (v3) — see the header: main + rail, sections, items, stats, feature ── */
.eq-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.eq-rail { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.eq-rail > .eq-card { margin: 0; }
@media (min-width: 1100px) {
  .eq-layout { grid-template-columns: minmax(0, 1fr) var(--eq-rail, 340px); gap: 32px; }
  .eq-layout.eq-layout-left { grid-template-columns: var(--eq-rail, 300px) minmax(0, 1fr); }
  .eq-rail.is-sticky { position: sticky; top: 24px; }
}
.eq-sec { min-width: 0; margin: 0 0 36px; }
.eq-sec-head { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0 0 14px; }
.eq-sec-title { margin: 0; font: 400 1.05rem/1.2 var(--eq-font-display); color: var(--ink, #2E2624); text-transform: uppercase; letter-spacing: .02em; }
.eq-count { box-sizing: border-box; display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 99px;
  background: var(--surface, #FFFCF6); box-shadow: inset 0 0 0 1.5px var(--eq-hair-2); color: var(--ink-2, #4A3A34); font: 700 .82rem/1 var(--eq-font-body); font-variant-numeric: tabular-nums; letter-spacing: normal; }
:is(.eq-card, .eq-item, .eq-dialog-panel) .eq-count { background: var(--paper-2, #F4EFE7); box-shadow: none; }
.eq-sec-link { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--ink-2, #4A3A34); font: 700 .92rem/1 var(--eq-font-body); text-decoration: none; white-space: nowrap; letter-spacing: normal; }
.eq-sec-link:hover { color: var(--ink, #2E2624); text-decoration: underline; text-underline-offset: 3px; }
.eq-sec-link.eq-sec-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--eq-min, 300px)), 1fr)); gap: var(--eq-gap, 24px); align-items: stretch; }
.eq-item { position: relative; box-sizing: border-box; display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: var(--ink, #2E2624); text-decoration: none;
  background: var(--surface, #FFFCF6); border: 2px solid var(--eq-border, #2E2624); border-radius: 14px; box-shadow: 4px 4px 0 var(--eq-shadow-ink); }
a.eq-item, .eq-item.is-link { cursor: pointer; }
a.eq-item:hover, .eq-item.is-link:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--eq-shadow-ink); }
a.eq-item:active, .eq-item.is-link:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--eq-shadow-ink); }
a.eq-item:focus-visible, .eq-item.is-link:focus-visible { outline: none; box-shadow: 4px 4px 0 var(--eq-shadow-ink), var(--eq-ring); }
.eq-item-cover { position: relative; flex: none; aspect-ratio: var(--eq-cover-ratio, 16 / 9); overflow: hidden; background: var(--eq-cover, var(--paper-2, #F4EFE7)); color: var(--on-bright, #2E2624); border-bottom: 2px solid var(--eq-border, #2E2624); }
.eq-item-cover > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eq-cover-tag { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; }
.eq-cover-tag-end { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; }
.eq-cover-art { position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-bright, #2E2624); }
.eq-cover-art.eq-cover-art svg { width: 28%; max-width: 92px; height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.eq-item-body { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 20px; }
.eq-item-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.eq-item-desc { margin: 0; font: 400 .98rem/1.45 var(--eq-font-body); color: var(--ink-2, #4A3A34); letter-spacing: normal; }
.eq-item-foot { display: flex; align-items: center; gap: 10px; min-width: 0; margin-top: auto; padding: 12px 20px; border-top: 1px solid var(--eq-hair); }
.eq-item-foot > .eq-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-item-foot > :last-child:not(:first-child) { margin-left: auto; }
/* grid variants: eq-grid-fit stretches a short row across the width (empty columns collapse);
   eq-strip keeps ONE row and hides what doesn't fit (a "next up" preview) */
.eq-grid.eq-grid-fit { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--eq-min, 300px)), 1fr)); }
.eq-grid.eq-strip { grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; overflow: hidden; padding: 0 6px 6px 0; margin: 0 -6px -6px 0; }
/* an item side by side: the cover on the left (--eq-cover-w, 40%) */
.eq-item.eq-item-row { flex-direction: row; }
.eq-item-row > .eq-item-cover { flex: 0 0 var(--eq-cover-w, 40%); aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 2px solid var(--eq-border, #2E2624); }
.eq-item-row > .eq-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* the slot that invites the next item (dashed, no shadow; a button or a link) */
.eq-item-add { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 180px; margin: 0; padding: 24px 20px; text-align: center; text-decoration: none; cursor: pointer;
  font: 700 1rem/1.3 var(--eq-font-body); color: var(--ink-2, #4A3A34); background: transparent; border: 2px dashed var(--eq-field); border-radius: 14px; letter-spacing: normal; }
.eq-item-add:hover { color: var(--ink, #2E2624); border-color: var(--eq-border, #2E2624); background: color-mix(in srgb, var(--surface, #FFFCF6) 60%, transparent); }
.eq-item-add:focus-visible { outline: none; box-shadow: var(--eq-ring); }
.eq-item-add .eq-sub { font: 400 .92rem/1.4 var(--eq-font-body); color: var(--muted, #7A6055); }
.eq-item-add svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* counts inside tabs */
.eq-seg-btn .eq-count { height: 20px; min-width: 22px; margin-left: 2px; padding: 0 6px; background: var(--paper-2, #F4EFE7); box-shadow: none; font-size: .76rem; }
.eq-seg-btn:is(.is-active, [aria-selected="true"], [aria-pressed="true"]) .eq-count { background: rgba(46, 38, 36, .14); color: var(--on-bright, #2E2624); }
.eq-seg-btn .eq-count:empty { display: none; }
/* a search field with its icon */
.eq-search { position: relative; display: block; width: var(--eq-search-w, 300px); max-width: 100%; }
.eq-search > svg { position: absolute; top: 50%; left: 12px; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: var(--muted, #7A6055); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.eq-search > .eq-input { padding-left: 38px; }
.eq-clamp-2, .eq-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.eq-clamp-2 { -webkit-line-clamp: 2; }
.eq-clamp-3 { -webkit-line-clamp: 3; }
.eq-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); overflow: hidden; margin: 0 0 28px;
  background: var(--surface, #FFFCF6); border: 2px solid var(--eq-border, #2E2624); border-radius: 14px; box-shadow: 4px 4px 0 var(--eq-shadow-ink); }
.eq-stat { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 22px 20px; color: var(--ink, #2E2624); text-decoration: none; box-shadow: -1px 0 0 var(--eq-hair); }
a.eq-stat:hover, button.eq-stat:hover { background: var(--eq-hover); }
button.eq-stat { margin: 0; font: inherit; text-align: left; background: transparent; border: 0; cursor: pointer; }
.eq-stat-label { display: flex; align-items: center; gap: 8px; font: 700 .76rem/1.2 var(--eq-font-body); color: var(--muted, #7A6055); text-transform: uppercase; letter-spacing: .07em; }
.eq-stat-label .eq-sw { width: 10px; height: 10px; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--on-bright, #2E2624); }
.eq-stat-num { font: 400 2.1rem/1 var(--eq-font-display); color: var(--ink, #2E2624); font-variant-numeric: tabular-nums; text-transform: uppercase; letter-spacing: .01em; }
.eq-stat-sub { display: flex; align-items: center; gap: 8px; min-width: 0; font: 400 .9rem/1.35 var(--eq-font-body); color: var(--muted, #7A6055); letter-spacing: normal; }
/* a stat that filters the page, picked: a banana underline */
.eq-stat:is(.is-active, [aria-pressed="true"]) { box-shadow: -1px 0 0 var(--eq-hair), inset 0 -4px 0 var(--banana, #FBBB20); }
@media (max-width: 560px) { .eq-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eq-stat { padding: 14px 16px 16px; box-shadow: -1px 0 0 var(--eq-hair), 0 -1px 0 var(--eq-hair); } .eq-stat-num { font-size: 1.7rem; }
  .eq-stat:is(.is-active, [aria-pressed="true"]) { box-shadow: -1px 0 0 var(--eq-hair), 0 -1px 0 var(--eq-hair), inset 0 -4px 0 var(--banana, #FBBB20); } }
/* a compact row for rails: a swatch, a one-line title over a meta line, something on the right */
.eq-mini { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 50px; padding: 8px 0; color: inherit; text-decoration: none; border-top: 1px solid var(--eq-hair); }
.eq-mini:first-child { border-top: 0; }
.eq-mini-sw { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--eq-sw, var(--banana, #FBBB20)); box-shadow: 0 0 0 1.5px var(--on-bright, #2E2624); }
.eq-mini-main { flex: 1; min-width: 0; }
.eq-mini-title, .eq-mini-meta { display: block; }
.eq-mini-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .98rem/1.3 var(--eq-font-body); color: var(--ink, #2E2624); letter-spacing: normal; }
.eq-mini-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 .86rem/1.3 var(--eq-font-body); color: var(--muted, #7A6055); letter-spacing: normal; }
a.eq-mini:focus-visible, button.eq-mini:focus-visible { outline: none; border-radius: 6px; box-shadow: var(--eq-ring); }
a.eq-mini:hover .eq-mini-title, button.eq-mini:hover .eq-mini-title { text-decoration: underline; text-underline-offset: 2px; }
button.eq-mini { width: 100%; margin: 0; padding-left: 0; padding-right: 0; font: inherit; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
.eq-avas { display: inline-flex; flex: none; align-items: center; }
.eq-avas > .eq-ava { margin-left: -7px; box-shadow: 0 0 0 2px var(--surface, #FFFCF6); }
.eq-avas > .eq-ava:first-child { margin-left: 0; }
.eq-avas-more { box-sizing: border-box; display: inline-grid; place-items: center; min-width: 28px; height: 28px; margin-left: -7px; padding: 0 6px; border-radius: 99px;
  background: var(--paper-2, #F4EFE7); box-shadow: 0 0 0 2px var(--surface, #FFFCF6); color: var(--ink-2, #4A3A34); font: 700 .76rem/1 var(--eq-font-body); letter-spacing: normal; }
.eq-bar { display: flex; height: 8px; overflow: hidden; border-radius: 99px; background: var(--paper-2, #F4EFE7); }
.eq-bar > span { display: block; height: 100%; background: var(--eq-bar, var(--banana, #FBBB20)); }
.eq-bar > span + span { box-shadow: -2px 0 0 var(--surface, #FFFCF6); }
.eq-bar-lg { height: 12px; }
.eq-status { box-sizing: border-box; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 9px; border-radius: 99px; white-space: nowrap;
  background: color-mix(in srgb, var(--eq-status, var(--banana, #FBBB20)) 30%, var(--surface, #FFFCF6)); color: var(--ink, #2E2624); font: 700 .82rem/1 var(--eq-font-body); letter-spacing: normal; }
.eq-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--eq-status, var(--banana, #FBBB20)); box-shadow: 0 0 0 1.5px var(--on-bright, #2E2624); }
/* Dark (neon): a tint of a brand colour on near-black reads olive or brown, so a status is an outline
   in its colour around a glowing dot, and notes are outlined the same way */
html[data-theme="dark"] .eq-status { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--eq-status, var(--banana)) 75%, transparent); }
html[data-theme="dark"] .eq-status::before { box-shadow: 0 0 6px var(--eq-status, var(--banana)); }
html[data-theme="dark"] .eq-note-warn { background: rgba(255, 116, 72, .08); box-shadow: inset 0 0 0 1px rgba(255, 116, 72, .55); }
html[data-theme="dark"] .eq-note-error { background: rgba(255, 143, 107, .08); box-shadow: inset 0 0 0 1px rgba(255, 143, 107, .55); }
.eq-tag.eq-tag-quiet { background: var(--paper-2, #F4EFE7); color: var(--ink-2, #4A3A34); box-shadow: inset 0 0 0 1px var(--eq-hair-2); }
.eq-tag.eq-tag-mint { background: var(--mint, #9AC9B5); }
.eq-tag.eq-tag-sky { background: var(--sky, #94CDE9); }
.eq-tag.eq-tag-purple { background: var(--purple, #D8C7E0); }
.eq-tag.eq-tag-orange { background: var(--orange, #F08050); }
/* a select or field inside a table row or a dense list: a soft fill, the edge only on hover/focus */
.eq-input.eq-input-quiet { height: 34px; background-color: var(--paper-2, #F4EFE7); border-color: transparent; }
.eq-input.eq-input-quiet:hover { border-color: var(--eq-field); }
.eq-input.eq-input-quiet:focus { border-color: var(--eq-border, #2E2624); }
.eq-feature { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; margin: 0 0 32px; color: var(--ink, #2E2624);
  background: var(--surface, #FFFCF6); border: 2px solid var(--eq-border, #2E2624); border-radius: 16px; box-shadow: 5px 5px 0 var(--eq-shadow-ink); }
.eq-feature-art { position: relative; min-height: 180px; overflow: hidden; background: var(--eq-feature, var(--banana, #FBBB20)); color: var(--on-bright, #2E2624); border-bottom: 2px solid var(--eq-border, #2E2624); }
.eq-feature-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eq-feature-body { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; padding: 26px 30px 28px; }
.eq-feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
@media (min-width: 900px) {
  .eq-feature { grid-template-columns: var(--eq-feature-art, 38%) minmax(0, 1fr); }
  .eq-feature-art { min-height: 240px; border-bottom: 0; border-right: 2px solid var(--eq-border, #2E2624); }
}
.eq-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.eq-choice { position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; margin: 0; padding: 18px;
  font: inherit; text-align: left; color: var(--ink, #2E2624); background: var(--surface, #FFFCF6); border: 2px solid var(--eq-field); border-radius: 12px; cursor: pointer; }
.eq-choice:hover { border-color: var(--eq-border, #2E2624); background: var(--eq-hover); }
.eq-choice:focus-visible, .eq-choice:has(> input:focus-visible) { outline: none; box-shadow: var(--eq-ring); }
.eq-choice-title { font: 700 1.08rem/1.25 var(--eq-font-body); letter-spacing: normal; }
.eq-choice-sub { font: 400 .92rem/1.4 var(--eq-font-body); color: var(--muted, #7A6055); letter-spacing: normal; }
.eq-choice:is(.is-active, [aria-checked="true"], [aria-pressed="true"]), .eq-choice:has(> input:checked) {
  color: var(--on-bright, #2E2624); background: var(--banana, #FBBB20); border-color: var(--on-bright, #2E2624); box-shadow: 3px 3px 0 var(--eq-shadow-ink); }
.eq-choice:is(.is-active, [aria-checked="true"], [aria-pressed="true"]) .eq-choice-sub, .eq-choice:has(> input:checked) .eq-choice-sub { color: var(--on-bright, #2E2624); }
.eq-choice > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.eq-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.eq-person > .eq-ava { --eq-ava-size: 44px; }
.eq-person > div { min-width: 0; }
.eq-person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 1.02rem/1.25 var(--eq-font-body); color: var(--ink, #2E2624); letter-spacing: normal; }
.eq-person-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 .9rem/1.35 var(--eq-font-body); color: var(--muted, #7A6055); letter-spacing: normal; }

/* ── Segmented control that scrolls when it doesn't fit (any width) ─────────────────── */
.eq-seg.eq-seg-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.eq-seg.eq-seg-scroll::-webkit-scrollbar { display: none; }
.eq-seg.eq-seg-scroll .eq-seg-btn { flex-shrink: 0; }

/* ── The hidden attribute always wins over a component's own display ─────────────── */
:is([class^="eq-"], [class*=" eq-"])[hidden] { display: none !important; }

/* ── Page description: standalone only ────────────────────────────────────────────── */
html.eq-embedded .eq-page-desc { display: none; }

/* ── Wider and narrower screens ───────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .eq-split { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 560px) {
  .eq-card { padding: 16px; margin-bottom: 16px; border-radius: 12px; box-shadow: 3px 3px 0 var(--eq-shadow-ink); }
  .eq-seg:not(.eq-seg-flat) { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .eq-seg:not(.eq-seg-flat)::-webkit-scrollbar { display: none; }
  .eq-seg:not(.eq-seg-flat) .eq-seg-btn { flex: 1 0 auto; padding: 0 10px; }
  .eq-seg:not(.eq-seg-flat) .eq-seg-btn.eq-seg-btn svg { display: none; }
  .eq-seg.eq-seg-scroll { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .eq-seg.eq-seg-scroll::-webkit-scrollbar { display: none; }
  .eq-seg.eq-seg-scroll .eq-seg-btn { flex: 1 0 auto; }
  /* more to scroll: while a row hides labels to its right (eq-motion.js marks it), it fades out at that edge — a mask, not a colour */
  .eq-seg.eq-seg-scroll.eq-more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .eq-seg.eq-seg-scroll:not(.eq-seg-flat) .eq-seg-btn { padding: 0 12px; }
  .eq-dialog { padding: 12px 10px; }
  .eq-dialog-panel { max-height: calc(100vh - 24px); padding: 18px 16px 20px; border-radius: 12px; }
  .eq-dialog-foot, .eq-dialog-foot.is-sticky { position: sticky; bottom: -20px; z-index: 1; margin: 20px -16px -20px; padding: 12px 16px 16px;
    background: var(--surface, #FFFCF6); border-top: 1px solid var(--eq-hair); border-radius: 0 0 10px 10px; }
  .eq-seg-flat .eq-seg-btn { height: 30px; min-width: 32px; padding: 0 8px; font-size: .76rem; }
  .eq-rows-grid { grid-template-columns: 1fr; }
  .eq-cal-head { gap: 8px; }
  .eq-cal-title { font-size: 1.15rem; }
  .eq-cal-dow { padding: 0 4px; font-size: .62rem; letter-spacing: .04em; }
  .eq-cal-day { min-height: var(--eq-cal-h-phone, 58px); padding: 4px; gap: 4px; }
  .eq-cal-num { min-width: 20px; height: 20px; margin: 0; font-size: .76rem; }
  .eq-cal-note { display: none; }
  .eq-cal-items { flex-direction: row; flex-wrap: wrap; gap: 3px; }
  .eq-cal-bar { height: auto; padding: 0; background: transparent; }
  .eq-cal-bar-name { display: none; }
  .eq-cal-bar .eq-ava { box-shadow: 0 0 0 2px var(--orange, #F08050); }
  .eq-cal-bar.is-you .eq-ava { box-shadow: 0 0 0 2px var(--banana, #FBBB20); }
  .eq-cal-more { padding: 1px 0 0 1px; font-size: .64rem; }
}

/* ── Motion (only when the system allows it) ──────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .eq-btn { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
  .eq-card-link, a.eq-item, .eq-item.is-link { transition: transform .15s ease, box-shadow .15s ease; }
  .eq-choice { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
  a.eq-stat, button.eq-stat { transition: background-color .15s ease; }
  .eq-seg-btn, .eq-icon-btn, button.eq-cal-day { transition: background-color .15s ease; }
  .eq-chip { transition: border-color .15s ease, background-color .15s ease; }
  .eq-dialog:not(.is-open):not(.open) { opacity: 0; pointer-events: none; }
  .eq-dialog:not(.is-open):not(.open) .eq-dialog-panel { scale: .97; }
  .eq-skel { animation: eq-skel-pulse 1.4s ease-in-out infinite; }
}
@keyframes eq-skel-pulse { 50% { opacity: .5; } }