/* ═══════════════════════════════════════════════════════════
   IndCal — design tokens
   The ONLY file that defines colour, type, spacing and motion.
   Change anything here and the whole product follows.
   Nothing outside /src/theme/ may hardcode a colour or a size.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── surfaces ── */
  --bg:            #F2F2F7;
  --bg-elevated:   #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F9F9FB;
  --surface-sunk:  rgba(120,120,128,.09);
  --separator:     rgba(60,60,67,.14);
  --separator-opaque:#D8D8DC;

  /* ── text ── */
  --label:         #0B0B0F;
  --label-2:       rgba(60,60,67,.62);
  --label-3:       rgba(60,60,67,.32);
  --label-4:       rgba(60,60,67,.18);

  /* ── brand + semantic ── */
  --brand:         #0E8272;
  --brand-ink:     #FFFFFF;
  --positive:      #1B8A50;
  --negative:      #C4362F;
  --warning:       #B27A16;

  /* ── category accents (one per calculator group) ── */
  --cat-invest:    #0E8272;
  --cat-loan:      #4A57D2;
  --cat-tax:       #B27A16;
  --cat-payroll:   #3F8C3A;
  --cat-property:  #B65A3C;
  --cat-trade:     #6E8B22;
  --cat-convert:   #2B7CB5;
  --cat-date:      #7A4FC0;
  --cat-everyday:  #B44A6E;

  /* ── type scale (iOS Human Interface defaults) ── */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          system-ui, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --t-large-title: 700 34px/1.12 var(--font);
  --t-title-1:     700 28px/1.2  var(--font);
  --t-title-2:     650 22px/1.25 var(--font);
  --t-title-3:     620 20px/1.3  var(--font);
  --t-headline:    620 17px/1.29 var(--font);
  --t-body:        400 17px/1.41 var(--font);
  --t-callout:     400 16px/1.31 var(--font);
  --t-subhead:     400 15px/1.33 var(--font);
  --t-footnote:    400 13px/1.38 var(--font);
  --t-caption:     400 12px/1.33 var(--font);
  --t-caption-2:   400 11px/1.18 var(--font);
  --tracking-tight:-.022em;

  /* ── spacing (4pt grid) ── */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:20px; --s-6:24px; --s-8:32px; --s-10:40px; --s-12:48px;
  --gutter:16px;
  --content-max:720px;

  /* ── radii ── */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-full:999px;

  /* ── elevation ── */
  --shadow-1:0 1px 2px rgba(16,24,32,.06);
  --shadow-2:0 4px 16px -6px rgba(16,24,32,.16);
  --shadow-3:0 12px 32px -12px rgba(16,24,32,.24);

  /* ── motion ── */
  --ease-out:    cubic-bezier(.22,1,.32,1);
  --ease-spring: cubic-bezier(.34,1.32,.5,1);
  --dur-fast:150ms; --dur-base:280ms; --dur-slow:420ms;

  /* ── controls ── */
  --tap-min:44px;          /* iOS minimum */
  --tabbar-h:49px;
  --navbar-h:44px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:            #000000;
    --bg-elevated:   #1C1C1E;
    --surface:       #1C1C1E;
    --surface-2:     #2C2C2E;
    --surface-sunk:  rgba(118,118,128,.24);
    --separator:     rgba(84,84,88,.6);
    --separator-opaque:#38383A;

    --label:         #FFFFFF;
    --label-2:       rgba(235,235,245,.60);
    --label-3:       rgba(235,235,245,.30);
    --label-4:       rgba(235,235,245,.16);

    --brand:         #3EE3C4;
    --brand-ink:     #06120F;
    --positive:      #35D07F;
    --negative:      #FF6961;
    --warning:       #F2BE55;

    --cat-invest:   #3EE3C4;
    --cat-loan:     #8F98FF;
    --cat-tax:      #F2BE55;
    --cat-payroll:  #74E06B;
    --cat-property: #F49E7C;
    --cat-trade:    #B8DE63;
    --cat-convert:  #6FC0F0;
    --cat-date:     #B99AF0;
    --cat-everyday: #F58BAE;

    --shadow-1:0 1px 2px rgba(0,0,0,.5);
    --shadow-2:0 4px 16px -6px rgba(0,0,0,.6);
    --shadow-3:0 12px 32px -12px rgba(0,0,0,.7);
  }
}

/* Android / Material adjustments — applied by platform.css via [data-platform] */
:root[data-platform="android"]{
  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px;   /* Material 3 is rounder */
  --tap-min:48px;
  --tabbar-h:80px;                                       /* M3 navigation bar */
  --navbar-h:56px;
  --t-large-title: 400 32px/1.25 var(--font);            /* M3 headline, not bold */
  --t-headline:    500 16px/1.5  var(--font);
  --tracking-tight:0;
}

/* ═══════════════════════════════════════════════════════════
   IndCal — platform conventions

   The shell sets <html data-platform="ios|android|web">.
   Everything platform-specific is expressed here as overrides,
   so no component ever branches on platform in JavaScript.

   iOS      Human Interface Guidelines — bottom tab bar, large
            titles that collapse, sheets with grabbers, edge-swipe
            back, spring easing, no ripple.
   Android  Material 3 — navigation bar with pill indicator,
            top app bar, ripple, emphasised easing, taller targets.
   Web      iOS structure at desktop widths with hover states and
            keyboard affordances.
   ═══════════════════════════════════════════════════════════ */

/* ── iOS ─────────────────────────────────────────────────── */
:root[data-platform="ios"]{
  --icon-stroke:1.7;
  --nav-blur:saturate(180%) blur(20px);
  --press-scale:.96;
  --ease-ui:var(--ease-spring);
  --tabbar-label:600 10px/1.1 var(--font);
  --tab-indicator-opacity:0;
}
[data-platform="ios"] .tabbar{
  border-top:.5px solid var(--separator);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:var(--nav-blur);-webkit-backdrop-filter:var(--nav-blur);
}
[data-platform="ios"] .tabbar__item[aria-selected="true"]{color:var(--brand)}
[data-platform="ios"] .navbar{
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:var(--nav-blur);-webkit-backdrop-filter:var(--nav-blur);
}
[data-platform="ios"] .navbar__back-label{display:inline}
[data-platform="ios"] .sheet{border-radius:var(--r-xl) var(--r-xl) 0 0}
[data-platform="ios"] .sheet__grabber{display:block}
[data-platform="ios"] .btn{border-radius:var(--r-md)}
[data-platform="ios"] .switch{--switch-w:51px;--switch-h:31px}

/* ── Android / Material 3 ────────────────────────────────── */
:root[data-platform="android"]{
  --icon-stroke:2;
  --nav-blur:none;
  --press-scale:1;                    /* Material uses ripple, not scale */
  --ease-ui:cubic-bezier(.2,0,0,1);   /* M3 emphasised */
  --tabbar-label:500 12px/1.33 var(--font);
  --tab-indicator-opacity:1;
}
[data-platform="android"] .tabbar{
  border-top:0;
  background:var(--surface-2);
  box-shadow:var(--shadow-1);
}
[data-platform="android"] .tabbar__item{flex-direction:column;gap:var(--s-1);padding-top:var(--s-3)}
[data-platform="android"] .tabbar__icon{
  padding:4px 20px;border-radius:var(--r-full);
  transition:background var(--dur-fast) var(--ease-ui);
}
[data-platform="android"] .tabbar__item[aria-selected="true"] .tabbar__icon{
  background:color-mix(in srgb,var(--brand) 18%,transparent);
}
[data-platform="android"] .tabbar__item[aria-selected="true"]{color:var(--label)}
[data-platform="android"] .navbar{background:var(--surface-2);box-shadow:none}
[data-platform="android"] .navbar__title{
  position:static;transform:none;text-align:left;opacity:1;
  margin-left:var(--s-2);font:var(--t-title-3)
}
[data-platform="android"] .navbar__back-label{display:none}
[data-platform="android"] .large-title{display:none}   /* M3 has no large title */
[data-platform="android"] .sheet{border-radius:28px 28px 0 0}
[data-platform="android"] .sheet__grabber{display:block;width:32px;height:4px}
[data-platform="android"] .btn{border-radius:var(--r-full);text-transform:none}
[data-platform="android"] .ripple{position:relative;overflow:hidden}
[data-platform="android"] .switch{--switch-w:52px;--switch-h:32px}

/* ── Web / desktop ───────────────────────────────────────── */
:root[data-platform="web"]{
  --icon-stroke:1.7;
  --nav-blur:saturate(180%) blur(20px);
  --press-scale:.98;
  --ease-ui:var(--ease-out);
  --tabbar-label:600 11px/1.1 var(--font);
  --tab-indicator-opacity:0;
}
@media (hover:hover){
  .tile:hover,.list__item:hover{background:var(--surface-2)}
  .btn:hover{filter:brightness(1.06)}
}

/* Desktop: tab bar becomes a sidebar, content gets a real column */
@media (min-width:900px){
  :root[data-platform="web"]{ --tabbar-h:0px; }
  [data-platform="web"] .app{
    display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100dvh;
  }
  [data-platform="web"] .tabbar{
    position:sticky;top:0;height:100dvh;flex-direction:column;
    justify-content:flex-start;gap:var(--s-1);
    padding:var(--s-6) var(--s-3);border-top:0;
    border-right:.5px solid var(--separator);
  }
  [data-platform="web"] .tabbar__item{
    flex-direction:row;gap:var(--s-3);justify-content:flex-start;
    padding:var(--s-3);border-radius:var(--r-md);width:100%;
  }
  [data-platform="web"] .tabbar__item[aria-selected="true"]{
    background:color-mix(in srgb,var(--brand) 12%,transparent);
  }
  [data-platform="web"] .tabbar__label{font:var(--t-subhead)}
  [data-platform="web"] .scene{padding-bottom:var(--s-12)}
}

/* Respect the user, always */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;transition-duration:.01ms!important;
  }
}

/* ═══════════════════════════════════════════════════════════
   IndCal — components
   Every value here is a token. No literal colours or sizes.
   ═══════════════════════════════════════════════════════════ */

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--label);font:var(--t-body);
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-sm)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s-4);top:var(--s-4);z-index:99;background:var(--surface);padding:var(--s-3)}

/* ── app frame ───────────────────────────────────────────── */
.app{min-height:100dvh}
.scene{
  max-width:var(--content-max);margin:0 auto;
  padding:0 var(--gutter) calc(var(--tabbar-h) + var(--s-10) + env(safe-area-inset-bottom));
}

/* ── navigation bar ──────────────────────────────────────── */
.navbar{
  position:sticky;top:0;z-index:40;padding-top:env(safe-area-inset-top);
  border-bottom:.5px solid transparent;transition:border-color var(--dur-base)
}
.navbar[data-scrolled="true"]{border-bottom-color:var(--separator)}
.navbar__in{
  height:var(--navbar-h);display:flex;align-items:center;
  padding:0 var(--s-2);position:relative;
  max-width:var(--content-max);margin:0 auto;
}
.navbar__back{
  display:flex;align-items:center;gap:var(--s-1);color:var(--brand);
  min-height:var(--tap-min);padding:0 var(--s-3) 0 var(--s-1);
  border-radius:var(--r-full);transition:transform var(--dur-fast) var(--ease-ui)
}
.navbar__back:active{transform:scale(var(--press-scale))}
.navbar__title{
  position:absolute;left:50%;transform:translateX(-50%);
  font:var(--t-headline);letter-spacing:var(--tracking-tight);
  white-space:nowrap;max-width:60%;overflow:hidden;text-overflow:ellipsis;
  opacity:var(--title-opacity,0);transition:opacity var(--dur-base) var(--ease-ui)
}
.navbar__actions{margin-left:auto;display:flex;gap:var(--s-1)}
.iconbtn{
  width:var(--tap-min);height:var(--tap-min);display:grid;place-items:center;
  color:var(--brand);border-radius:var(--r-full);
  transition:background var(--dur-fast),transform var(--dur-fast) var(--ease-ui)
}
.iconbtn:active{background:var(--surface-sunk);transform:scale(var(--press-scale))}

.large-title{
  font:var(--t-large-title);letter-spacing:var(--tracking-tight);
  margin:var(--s-2) 0 var(--s-1)
}
.lede{color:var(--label-2);font:var(--t-subhead);margin:0 0 var(--s-5)}

/* ── tab bar ─────────────────────────────────────────────── */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;align-items:stretch;
}
.tabbar__item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;color:var(--label-3);min-height:var(--tap-min);
  transition:color var(--dur-fast) var(--ease-ui)
}
.tabbar__label{font:var(--tabbar-label);letter-spacing:.01em}
.tabbar__icon{display:grid;place-items:center}

/* ── search ──────────────────────────────────────────────── */
.search{
  display:flex;align-items:center;gap:var(--s-2);
  background:var(--surface-sunk);border-radius:var(--r-md);
  padding:var(--s-2) var(--s-3);margin-bottom:var(--s-4);
  min-height:var(--tap-min)
}
.search svg{color:var(--label-3);flex:none}
.search input{border:0;background:none;outline:none;width:100%;font:var(--t-body)}
.search input::placeholder{color:var(--label-3)}

/* ── grouped list (iOS inset style) ──────────────────────── */
.section-title{
  font:var(--t-footnote);font-weight:600;color:var(--label-2);
  text-transform:uppercase;letter-spacing:.06em;
  margin:var(--s-6) 0 var(--s-2) var(--s-1)
}
.list{
  background:var(--surface);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-1);margin-bottom:var(--s-3)
}
.list__item{
  display:flex;align-items:center;gap:var(--s-3);width:100%;
  padding:var(--s-3) var(--s-4);min-height:var(--tap-min);text-align:left;
  border-bottom:.5px solid var(--separator);
  transition:background var(--dur-fast)
}
.list__item:last-child{border-bottom:0}
.list__item:active{background:var(--surface-sunk)}
.list__icon{
  width:29px;height:29px;border-radius:var(--r-sm);flex:none;
  display:grid;place-items:center;color:var(--surface);
  background:var(--item-accent,var(--brand))
}
.list__text{flex:1;min-width:0}
.list__name{font:var(--t-callout);font-weight:500;display:block}
.list__desc{
  font:var(--t-footnote);color:var(--label-2);display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.list__chevron{color:var(--label-4);flex:none}

/* ── A–Z scrubber ────────────────────────────────────────── */
.scrubber{
  position:fixed;right:2px;top:50%;transform:translateY(-50%);z-index:30;
  display:flex;flex-direction:column;align-items:center;
  padding:var(--s-2) var(--s-1);user-select:none;touch-action:none
}
.scrubber button{
  font:var(--t-caption-2);font-weight:600;color:var(--brand);
  line-height:1.15;padding:0 var(--s-1)
}
.scrubber__bubble{
  position:fixed;right:var(--s-10);top:50%;
  transform:translateY(-50%) scale(.8);opacity:0;pointer-events:none;
  width:56px;height:56px;border-radius:var(--r-full);
  background:var(--surface);box-shadow:var(--shadow-3);
  display:grid;place-items:center;font:var(--t-title-2);
  transition:opacity var(--dur-fast),transform var(--dur-fast) var(--ease-ui)
}
.scrubber__bubble[data-show="true"]{opacity:1;transform:translateY(-50%) scale(1)}

/* ── fields ──────────────────────────────────────────────── */
.card{
  background:var(--surface);border-radius:var(--r-lg);
  padding:0 var(--s-4);box-shadow:var(--shadow-1);margin-bottom:var(--s-3)
}
.field{padding:var(--s-3) 0;border-bottom:.5px solid var(--separator)}
.field:last-child{border-bottom:0}
.field__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-3);min-height:var(--tap-min)
}
.field__label{font:var(--t-subhead);color:var(--label-2)}
.field__input{
  background:var(--surface-sunk);border:1.5px solid transparent;
  border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);text-align:right;
  font:var(--t-headline);font-variant-numeric:tabular-nums;
  min-width:112px;max-width:190px;outline:none;
  transition:border-color var(--dur-fast),background var(--dur-fast)
}
.field__input:focus{border-color:var(--brand);background:var(--surface)}
.field__hint{font:var(--t-caption);color:var(--label-3);margin:var(--s-2) 0 0}

.field--lines{padding-bottom:var(--s-2)}
.lines{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-3)}
.line{display:flex;align-items:center;gap:var(--s-2)}
.line__label{flex:1;min-width:0;background:var(--surface-sunk);border:1.5px solid transparent;
  border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);font:var(--t-subhead);outline:none;
  transition:border-color var(--dur-fast)}
.line__label:focus{border-color:var(--brand);background:var(--surface)}
.line__amount{width:96px;flex:none;background:var(--surface-sunk);border:1.5px solid transparent;
  border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);text-align:right;
  font:var(--t-subhead);font-weight:600;font-variant-numeric:tabular-nums;outline:none;
  transition:border-color var(--dur-fast)}
.line__amount:focus{border-color:var(--brand);background:var(--surface)}
.line__mode{width:34px;height:34px;flex:none;border-radius:var(--r-sm);
  background:var(--surface-sunk);color:var(--brand);font:var(--t-headline);
  display:grid;place-items:center;transition:transform var(--dur-fast) var(--ease-ui)}
.line__mode:active{transform:scale(.9)}
.line__remove{width:30px;height:34px;flex:none;color:var(--label-3);display:grid;place-items:center;
  border-radius:var(--r-sm);transition:color var(--dur-fast)}
.line__remove:active{color:var(--negative)}
.grid-rows{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-3)}
.grid-head{display:flex;gap:var(--s-2);padding:0 var(--s-1);
  font:var(--t-caption);color:var(--label-3);font-weight:600;
  text-transform:uppercase;letter-spacing:.05em}
.grid-head__spacer{width:30px;flex:none}
.grid-row{display:flex;align-items:center;gap:var(--s-2)}
.grid-cell{min-width:0;background:var(--surface-sunk);border:1.5px solid transparent;
  border-radius:var(--r-sm);padding:var(--s-2) var(--s-3);font:var(--t-subhead);
  font-variant-numeric:tabular-nums;outline:none;
  transition:border-color var(--dur-fast),background var(--dur-fast)}
.grid-cell:focus{border-color:var(--brand);background:var(--surface)}
.grid-cell[type="date"]{font:var(--t-footnote)}
.grid-add{margin-top:var(--s-3);color:var(--brand);font:var(--t-subhead);font-weight:500;
  padding:var(--s-2) 0;min-height:var(--tap-min);display:flex;align-items:center;gap:var(--s-1)}

.line__add{margin-top:var(--s-3);color:var(--brand);font:var(--t-subhead);font-weight:500;
  padding:var(--s-2) 0;min-height:var(--tap-min);display:flex;align-items:center;gap:var(--s-1)}

.slider{
  -webkit-appearance:none;appearance:none;width:100%;background:none;
  margin:var(--s-3) 0 0;height:28px;display:block
}
.slider::-webkit-slider-runnable-track{
  height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand) var(--fill,0%),var(--surface-sunk) var(--fill,0%))
}
.slider::-moz-range-track{height:4px;border-radius:2px;background:var(--surface-sunk)}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:28px;height:28px;border-radius:var(--r-full);
  background:var(--surface);box-shadow:var(--shadow-2),0 0 0 .5px var(--separator);
  margin-top:-12px;transition:transform var(--dur-fast) var(--ease-ui)
}
.slider:active::-webkit-slider-thumb{transform:scale(1.15)}
.slider::-moz-range-thumb{
  width:28px;height:28px;border:0;border-radius:var(--r-full);
  background:var(--surface);box-shadow:var(--shadow-2)
}

.segmented{
  display:flex;position:relative;background:var(--surface-sunk);
  border-radius:var(--r-sm);padding:2px;margin-top:var(--s-3)
}
.segmented__pill{
  position:absolute;top:2px;bottom:2px;left:0;width:0;
  border-radius:calc(var(--r-sm) - 2px);background:var(--surface);
  box-shadow:var(--shadow-1);z-index:0;
  transition:transform var(--dur-base) var(--ease-ui),width var(--dur-base) var(--ease-ui)
}
.segmented button{
  flex:1;z-index:1;padding:var(--s-2) var(--s-1);
  font:var(--t-footnote);color:var(--label-2);min-height:32px;
  transition:color var(--dur-fast)
}
.segmented button[aria-pressed="true"]{color:var(--label);font-weight:600}

/* ── result ──────────────────────────────────────────────── */
.result{
  background:var(--surface);border-radius:var(--r-lg);
  padding:var(--s-5) var(--s-4) var(--s-4);
  box-shadow:var(--shadow-1);margin-bottom:var(--s-3)
}
.result__label{font:var(--t-footnote);color:var(--label-2);text-align:center}
.result__value{
  font:var(--t-large-title);letter-spacing:var(--tracking-tight);
  font-variant-numeric:tabular-nums;text-align:center;
  color:var(--item-accent,var(--brand));margin:var(--s-1) 0 0;
  word-break:break-word;cursor:pointer;border-radius:var(--r-sm);
  padding:var(--s-1);transition:background var(--dur-fast)
}
.result__value:active{background:var(--surface-sunk)}
.bar{
  display:flex;height:8px;border-radius:var(--r-full);overflow:hidden;
  gap:2px;background:var(--surface-sunk);margin:var(--s-4) 0 var(--s-3)
}
.bar i{display:block;height:100%;border-radius:var(--r-full);
  transition:width var(--dur-slow) var(--ease-out)}
.row{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--s-3);padding:var(--s-3) 0;
  border-bottom:.5px solid var(--separator);font:var(--t-subhead)
}
.row:last-child{border-bottom:0;padding-bottom:0}
.row__key{color:var(--label-2);display:flex;align-items:center;gap:var(--s-2)}
.row__val{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.row--header{border-bottom:0;padding:var(--s-4) 0 var(--s-1)}
.row--header .row__key{
  font:var(--t-caption);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--item-accent,var(--brand))
}
.dot{width:8px;height:8px;border-radius:var(--r-full);flex:none}

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:var(--tap-min);padding:var(--s-3);
  background:var(--brand);color:var(--brand-ink);
  font:var(--t-headline);border-radius:var(--r-md);
  transition:transform var(--dur-fast) var(--ease-ui),filter var(--dur-fast)
}
.btn:active{transform:scale(var(--press-scale))}
.btn--secondary{
  background:var(--surface);color:var(--brand);box-shadow:var(--shadow-1)
}
.btn-row{display:flex;gap:var(--s-2);margin-bottom:var(--s-3)}
.note{
  font:var(--t-caption);color:var(--label-3);line-height:1.5;
  padding:0 var(--s-1);margin:0 0 var(--s-6)
}

/* ── sheet ───────────────────────────────────────────────── */
.scrim{
  position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.36);
  opacity:0;pointer-events:none;transition:opacity var(--dur-base)
}
.scrim[data-open="true"]{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--bg-elevated);box-shadow:var(--shadow-3);
  max-height:88dvh;display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform var(--dur-base) var(--ease-ui);
  padding-bottom:env(safe-area-inset-bottom)
}
.sheet[data-open="true"]{transform:none}
.sheet__grabber{
  display:none;width:36px;height:5px;border-radius:var(--r-full);
  background:var(--label-4);margin:var(--s-2) auto
}
.sheet__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--s-2) var(--s-4) var(--s-3);border-bottom:.5px solid var(--separator)
}
.sheet__title{font:var(--t-headline)}
.sheet__body{overflow:auto;-webkit-overflow-scrolling:touch;padding:var(--s-2) var(--s-4) var(--s-6)}

/* ── toast ───────────────────────────────────────────────── */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tabbar-h) + var(--s-5));z-index:90;
  transform:translate(-50%,120%);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:var(--s-2);
  background:var(--surface);color:var(--label);
  padding:var(--s-3) var(--s-5);border-radius:var(--r-full);
  box-shadow:var(--shadow-3);font:var(--t-subhead);font-weight:500;
  transition:transform var(--dur-base) var(--ease-ui),opacity var(--dur-base)
}
.toast[data-show="true"]{transform:translate(-50%,0);opacity:1}
.toast svg{color:var(--positive)}

/* ── schedule table ──────────────────────────────────────── */
.disclosure{
  background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);margin-bottom:var(--s-3);overflow:hidden
}
.disclosure summary{
  padding:var(--s-4);font:var(--t-callout);font-weight:600;color:var(--brand);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center
}
.disclosure summary::-webkit-details-marker{display:none}
.disclosure__scroll{max-height:340px;overflow:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font:var(--t-footnote);font-variant-numeric:tabular-nums}
th,td{padding:var(--s-2) var(--s-3);text-align:right;border-bottom:.5px solid var(--separator);white-space:nowrap}
th{position:sticky;top:0;background:var(--surface-2);color:var(--label-2);font-weight:600}
th:first-child,td:first-child{text-align:left}

/* ── static document pages (SEO skin) ────────────────────── */
.doc{max-width:var(--content-max);margin:0 auto;padding:var(--s-6) var(--gutter) var(--s-12)}
.doc h1{font:var(--t-large-title);letter-spacing:var(--tracking-tight);margin:0 0 var(--s-2)}
.doc h2{font:var(--t-title-2);margin:var(--s-8) 0 var(--s-3)}
.doc h3{font:var(--t-headline);margin:var(--s-5) 0 var(--s-2)}
.doc p{margin:0 0 var(--s-3);max-width:66ch}
.doc ul{padding-left:var(--s-5);margin:0 0 var(--s-4)}
.doc li{margin-bottom:var(--s-2)}
.doc table{margin:var(--s-3) 0 var(--s-6);background:var(--surface);border-radius:var(--r-md)}
.doc caption{text-align:left;font:var(--t-footnote);color:var(--label-2);padding:var(--s-2) 0}
.crumbs{font:var(--t-footnote);color:var(--label-2);margin-bottom:var(--s-4)}
.verified{
  font:var(--t-caption);color:var(--label-3);text-align:center;
  padding:var(--s-6) var(--gutter) var(--s-10);margin:0
}
.hidden{display:none!important}