/* ==========================================================================
   Equifruit Hub — motion layer (October 2026)
   --------------------------------------------------------------------------
   Smoothness only. Apart from quieter scrollbars, this file never sets a
   colour, font, size, border, shadow or layout: every page keeps the hub's
   theme exactly as it is. Pages link it (with /assets/eq-motion.js) before
   their own <style>; the base rules use :where() so anything a page declares
   itself wins. Motion is skipped when the system asks for reduced motion.
   One exception, at the end: the shared "⋯" menu (button .eq-more + .eq-menu, behaviour and
   markup in eq-motion.js §6) carries the hub's classic look — surface fill, 2px ink border,
   hard offset shadow, Inter items, the danger colour for destructive items — from the page's
   own tokens (--surface, --ink, --paper-2, --line, --muted), so a dark theme follows. Its Inter
   face is declared here, so the menu reads the same on pages that don't load Inter themselves.
     .eq-more          the ⋯ button: a borderless 36px icon button like eq-ui's .eq-icon-btn,
                       paper-2 under the pointer and while its menu is open (a page may resize it)
     .eq-menu          the menu (role="menu"): items role="menuitem" / "menuitemradio" with an svg
                       icon + label; .danger on a destructive item; role="separator" between groups;
                       .eq-menu-label a small heading; .eq-tick the check of a menuitemradio
     hidden / disabled on an item: not shown / greyed out (the keyboard skips both)
     .is-sheet, .eq-menu-scrim   set by the script for the phone bottom sheet
   It eases in like eq-rise (and the sheet like eq-sheet), only with motion allowed.
   ========================================================================== */
@font-face { font-family: 'Inter'; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/Inter-Variable.woff2') format('woff2'); }

/* Smoother glyphs on macOS (pages that set their own rendering win). */
:where(body) { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Thin scrollbars in the theme's ink instead of the system's thick grey ones. */
:where(html) { scrollbar-color: rgba(46, 38, 36, .32) transparent; }
:where(*) { scrollbar-width: thin; }

/* Inside the hub the top bar carries the announcements bell: the pages' own bells step aside. */
html.eq-embedded .icobtn.bell { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* A page fades in when it opens. Opacity only: a transform on <body> would carry
     fixed bars (toasts, sticky footers) along with it. */
  html.eq-enter body { animation: eq-page-in .28s cubic-bezier(.2, .8, .2, 1) both; }

  /* Hover, focus and state changes ease instead of snapping: colours, borders, shadows
     and opacity. Not transforms — those belong to drags, swipes and the pages' own lifts. */
  :where(a, button, [role="button"], [role="tab"], [role="option"], [role="menuitem"], [role="switch"],
         input, select, textarea, summary, label, tr,
         [class*="btn"], [class*="card"], [class*="tile"], [class*="chip"], [class*="pill"],
         [class*="tab"], [class*="item"], [class*="row"], [class*="badge"], [class*="toggle"]) {
    transition-property: color, background-color, border-color, outline-color, box-shadow, opacity, filter;
    transition-duration: .18s;
    transition-timing-function: cubic-bezier(.2, .8, .2, 1);
  }

  /* Opt-in entrances for things that appear: add the class to a dialog, sheet, menu,
     drawer or tab panel and it eases in each time it is shown (display:none → shown,
     or inserted). Hiding stays instant, so a closed panel never lingers beside the one
     that replaces it. eq-side is a drawer coming in from the right edge.
     A dialog centred with transform: translate(-50%, -50%) needs transform-origin: 0 0
     to pop around its own centre. */
  .eq-fade { transition: opacity .2s cubic-bezier(.2, .8, .2, 1); }
  .eq-pop  { transition: opacity .2s cubic-bezier(.2, .8, .2, 1), scale .2s cubic-bezier(.2, .8, .2, 1); }
  .eq-rise { transition: opacity .24s cubic-bezier(.2, .8, .2, 1), translate .24s cubic-bezier(.2, .8, .2, 1); }
  .eq-sheet, .eq-side { transition: opacity .26s cubic-bezier(.2, .8, .2, 1), translate .26s cubic-bezier(.2, .8, .2, 1); }
  @starting-style {
    .eq-fade { opacity: 0; }
    .eq-pop { opacity: 0; scale: .96; }
    .eq-rise { opacity: 0; translate: 0 10px; }
    .eq-sheet { opacity: 0; translate: 0 32px; }
    .eq-side { opacity: 0; translate: 32px 0; }
  }
  /* Exits, opt-in: where the page also styles the closed state (say
     .overlay:not(.open){opacity:0}), add eq-exit and the element stays shown while it eases out. */
  .eq-exit:is(.eq-fade, .eq-pop, .eq-rise, .eq-sheet, .eq-side) {
    transition-property: opacity, scale, translate, display, overlay;
    transition-behavior: allow-discrete;
  }
}

/* ── The shared "⋯" menu (eq-motion.js §6) ─────────────────────────────────────────────
   .eq-more: the borderless icon button that opens it. .eq-menu: the menu, shown as a popover in the top
   layer (positioned by the script), anchored under its button or, on phones, a bottom sheet. */
:where(.eq-more) { box-sizing: border-box; width: 36px; height: 36px; display: inline-grid; place-items: center; flex-shrink: 0; margin: 0; padding: 0;
  background: transparent; color: var(--ink-2, #4A3A34); border: 0; border-radius: 9px; cursor: pointer; }
:where(.eq-more) svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:where(.eq-more:hover, .eq-more[aria-expanded="true"]) { background: var(--paper-2, #F4EFE7); }
:where(.eq-more):focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(251, 187, 32, .45); }
.eq-menu { position: fixed; inset: auto; margin: 0; z-index: 1000; box-sizing: border-box; min-width: 210px; max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px); overflow: auto; padding: 6px; flex-direction: column;
  background: var(--surface, #FFFCF6); color: var(--ink, #2E2624); border: 2px solid var(--ink, #2E2624); border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink, #2E2624); font-family: 'Inter', system-ui, sans-serif; }
.eq-menu:not([hidden]) { display: flex; }
.eq-menu[popover]:not(:popover-open) { display: none; }
.eq-menu::backdrop { display: none; }
.eq-menu [role^="menuitem"] { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; text-align: left;
  background: none; border: 0; border-radius: 6px; padding: 9px 10px; font: 600 .86rem/1.25 'Inter', system-ui, sans-serif;
  color: inherit; white-space: nowrap; cursor: pointer; }
.eq-menu [role^="menuitem"] svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eq-menu [role^="menuitem"]:hover, .eq-menu [role^="menuitem"]:focus-visible { background: var(--paper-2, #F4EFE7); outline: none; }
.eq-menu [role^="menuitem"]:is(:disabled, [aria-disabled="true"]) { opacity: .45; cursor: default; background: none; }
.eq-menu [hidden] { display: none !important; }
.eq-menu [role^="menuitem"].danger { color: #B4532E; }
[data-theme="dark"] .eq-menu [role^="menuitem"].danger { color: #F4A07C; }
.eq-menu [role="separator"] { border-top: 1.5px solid var(--line, rgba(46, 38, 36, .16)); margin: 5px 4px; }
.eq-menu .eq-menu-label { font-size: .62rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted, #7A6055); padding: 6px 10px 4px; }
.eq-menu .eq-tick { width: 16px; height: 16px; flex-shrink: 0; display: inline-grid; place-items: center; }
.eq-menu [role="menuitemradio"][aria-checked="true"] .eq-tick::before { content: ''; width: 9px; height: 5px; margin-top: -3px;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.eq-menu.is-sheet { left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; min-width: 0; max-width: none; padding: 8px; }
.eq-menu.is-sheet [role^="menuitem"] { padding: 13px 12px; font-size: .95rem; }
.eq-menu-scrim { position: fixed; inset: 0; z-index: 999; background: rgba(46, 38, 36, .35); }
@media (prefers-reduced-motion: no-preference) {
  .eq-menu { transition: opacity .2s cubic-bezier(.2, .8, .2, 1), translate .2s cubic-bezier(.2, .8, .2, 1),
    display .2s allow-discrete, overlay .2s allow-discrete; }
  .eq-menu[popover]:not(:popover-open) { opacity: 0; translate: 0 6px; }
  .eq-menu.is-sheet[popover]:not(:popover-open) { translate: 0 24px; }
  @starting-style {
    .eq-menu:popover-open { opacity: 0; translate: 0 8px; }
    .eq-menu.is-sheet:popover-open { translate: 0 28px; }
  }
  .eq-menu-scrim { animation: eq-fade-in .2s cubic-bezier(.2, .8, .2, 1); }
}

@keyframes eq-page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes eq-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes eq-pop-in { from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } }