/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* --- Type families ------------------------------------------------ */
  --font-display:"Noto Serif",Georgia,"Times New Roman",serif;
  --font-text:"Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-data:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-dzongkha:"Noto Serif Tibetan","Jomolhari","Wangdi29",serif;

  /* --- M3 type scale ------------------------------------------------
     size / line-height / letter-spacing / weight, per m3 spec. Sizes are
     rem so a reader's browser text-size setting is honoured.            */
  --display-lg:3.5625rem;   --display-lg-lh:4rem;    --display-lg-ls:-.015em;
  --display-md:2.8125rem;   --display-md-lh:3.25rem; --display-md-ls:-.005em;
  --display-sm:2.25rem;     --display-sm-lh:2.75rem; --display-sm-ls:0em;
  --headline-lg:2rem;       --headline-lg-lh:2.5rem; --headline-lg-ls:0em;
  --headline-md:1.75rem;    --headline-md-lh:2.25rem;--headline-md-ls:0em;
  --headline-sm:1.5rem;     --headline-sm-lh:2rem;   --headline-sm-ls:0em;
  --title-lg:1.375rem;      --title-lg-lh:1.75rem;   --title-lg-ls:0em;
  --title-md:1rem;          --title-md-lh:1.5rem;    --title-md-ls:.009em;
  --title-sm:.875rem;       --title-sm-lh:1.25rem;   --title-sm-ls:.006em;
  --body-lg:1rem;           --body-lg-lh:1.5rem;     --body-lg-ls:.031em;
  --body-md:.875rem;        --body-md-lh:1.25rem;    --body-md-ls:.016em;
  --body-sm:.75rem;         --body-sm-lh:1rem;       --body-sm-ls:.033em;
  --label-lg:.875rem;       --label-lg-lh:1.25rem;   --label-lg-ls:.006em;
  --label-md:.75rem;        --label-md-lh:1rem;      --label-md-ls:.042em;
  --label-sm:.6875rem;      --label-sm-lh:1rem;      --label-sm-ls:.045em;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* Fluid display sizes for marketing type, clamped so they never dwarf
     a phone or look lost on a 27-inch screen. */
  --text-hero:clamp(2.25rem,6vw,4rem);
  --text-money:clamp(2.25rem,5vw,3.25rem);

  /* --- M3 colour roles: light scheme -------------------------------
     Tonal palettes from Clearwater's hues. Tone numbers in comments are
     the M3 positions these values stand in for.                        */
  /* Primary — GLACIER. Every action. */
  --primary:#0B6E86;                    /* 40 */
  --on-primary:#FFFFFF;                 /* 100 */
  --primary-container:#BDE9F7;          /* 90 */
  --on-primary-container:#002A35;       /* 10 */
  --primary-fixed-dim:#8FD6EA;
  --inverse-primary:#6DD3E8;            /* 80 */

  /* Secondary — PINE. Supporting, quieter actions and success. */
  --secondary:#14705C;                  /* 40 */
  --on-secondary:#FFFFFF;
  --secondary-container:#BFEDDF;        /* 90 */
  --on-secondary-container:#00251C;     /* 10 */

  /* Tertiary — RIDGE. Data categories and the organisation side. */
  --tertiary:#35508F;                   /* 40 */
  --on-tertiary:#FFFFFF;
  --tertiary-container:#DCE1FF;         /* 90 */
  --on-tertiary-container:#001349;      /* 10 */

  /* Error — CLAY. */
  --error:#B33B2C;                      /* 40 */
  --on-error:#FFFFFF;
  --error-container:#FFDAD4;            /* 90 */
  --on-error-container:#410000;         /* 10 */

  /* Custom role — LARCH. Money, and only money. Text tone runs one step
     deeper than the decorative hue so small figures in a table still
     clear 4.5:1 on white. */
  --money:#8A5000;                      /* text */
  --larch:#BF6E05;                      /* decorative only */
  --on-money:#FFFFFF;
  --money-container:#FFDDB3;            /* 90 */
  --on-money-container:#2C1600;         /* 10 */

  /* Warning — used for held/pending states, not for money. */
  --warn:#7A4E00;
  --warn-container:#FFDEA8;

  /* Neutral ramp. M3's surface-container family replaces "one grey";
     every layer of the interface picks the tone that matches its depth. */
  --surface:#F6F9FB;                    /* 98 */
  --surface-dim:#D6DFE3;                /* 87 */
  --surface-bright:#F6F9FB;             /* 98 */
  --surface-container-lowest:#FFFFFF;   /* 100 */
  --surface-container-low:#F0F4F7;      /* 96 */
  --surface-container:#EAEFF2;          /* 94 */
  --surface-container-high:#E4EAEE;     /* 92 */
  --surface-container-highest:#DEE5E9;  /* 90 */
  --on-surface:#171C1F;                 /* 10 */
  --on-surface-variant:#3F484C;         /* 30 */
  --surface-variant:#DBE4E8;            /* 90 */
  --outline:#6F797D;                    /* 50 */
  --outline-variant:#C0C9CD;            /* 80 */
  --inverse-surface:#2B3134;            /* 20 */
  --inverse-on-surface:#EFF3F5;         /* 95 */
  --scrim:#000000;
  --shadow-rgb:13,38,50;

  /* --- Compatibility aliases ---------------------------------------
     The app's ~40 page modules speak the older vocabulary. Mapping it onto
     the M3 roles here means every screen inherits the new system without a
     single line of markup changing. */
  --bg:var(--surface);
  --surface-2:var(--surface-container-low);
  --surface-3:var(--surface-container-high);
  --ink:var(--on-surface);
  --ink-70:var(--on-surface-variant);
  --muted:#576165;
  --line:var(--outline-variant);
  --line-2:#A9B3B7;
  --primary-dark:#08566A;
  --primary-tint:var(--primary-container);
  --good:var(--secondary); --good-tint:var(--secondary-container);
  --warn-tint:var(--warn-container);
  --danger:var(--error); --danger-tint:var(--error-container);
  --indigo:var(--tertiary); --indigo-tint:var(--tertiary-container);
  --pine:var(--secondary); --pine-tint:var(--secondary-container);
  --clay:var(--error); --clay-tint:var(--error-container);
  --ridge:var(--tertiary); --ridge-tint:var(--tertiary-container);
  --money-tint:var(--money-container);
  --gold:var(--money); --gold-soft:var(--money-container);
  --madder:var(--error); --madder-tint:var(--error-container);
  --larch-tint:var(--money-container);
  --text-body:var(--body-lg); --text-body-line:1.55;
  --text-h1:clamp(1.875rem,3.4vw,2.5rem);
  --text-h2:var(--headline-md); --text-h3:var(--headline-sm); --text-h4:var(--title-lg);
  --text-sm:var(--body-md); --text-xs:var(--body-sm);
  --text-eyebrow:var(--label-md); --track-eyebrow:.14em;
  --text-chip:var(--label-lg); --track-chip:.006em;
  --track-display:-.012em; --track-hero:-.02em; --track-money:-.015em;

  --mark-1:#0B6E86; --mark-2:#BF6E05;

  /* --- Chart palette ------------------------------------------------
     Twelve steps so a question with ten options never repeats a colour, in
     a deliberate order: the four brand hues first, then tints and shades
     that stay distinguishable side by side. Every one clears 3:1 on both
     schemes' surfaces, which is the graphical-object contrast floor. */
  --chart-1:#0B6E86; --chart-2:#BF6E05; --chart-3:#14705C; --chart-4:#35508F;
  --chart-5:#3D8B9C; --chart-6:#B33B2C; --chart-7:#5C7A2E; --chart-8:#7A4E9C;
  --chart-9:#2F7F9E; --chart-10:#A8620A; --chart-11:#3C8F76; --chart-12:#5B6EA8;
  --chart-grid:#C0C9CD; --chart-axis:#6F797D;

  /* --- M3 shape scale ---------------------------------------------- */
  --shape-none:0; --shape-xs:4px; --shape-sm:8px; --shape-md:12px;
  --shape-lg:16px; --shape-xl:28px; --shape-full:999px;
  /* older names, mapped */
  --radius-sm:var(--shape-sm); --radius:var(--shape-md);
  --radius-lg:var(--shape-lg); --radius-xl:var(--shape-xl); --radius-pill:var(--shape-full);

  /* --- M3 elevation. Level 0-5. -------------------------------------- */
  --elev-0:none;
  --elev-1:0 1px 2px rgba(var(--shadow-rgb),.10), 0 1px 3px 1px rgba(var(--shadow-rgb),.07);
  --elev-2:0 1px 2px rgba(var(--shadow-rgb),.10), 0 2px 6px 2px rgba(var(--shadow-rgb),.08);
  --elev-3:0 1px 3px rgba(var(--shadow-rgb),.10), 0 4px 8px 3px rgba(var(--shadow-rgb),.09);
  --elev-4:0 2px 3px rgba(var(--shadow-rgb),.10), 0 6px 10px 4px rgba(var(--shadow-rgb),.09);
  --elev-5:0 4px 4px rgba(var(--shadow-rgb),.10), 0 8px 12px 6px rgba(var(--shadow-rgb),.09);
  --shadow-xs:var(--elev-1); --shadow:var(--elev-2); --shadow-lg:var(--elev-4);

  /* --- M3 state layers. Opacity of the tint laid over a component. --- */
  --state-hover:.08; --state-focus:.10; --state-press:.10; --state-drag:.16;
  --state-disabled-content:.38; --state-disabled-container:.12;
  --ring:0 0 0 3px color-mix(in srgb,var(--primary) 40%,transparent);

  /* --- Spacing. A 4px grid, as M3 specifies. ------------------------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px; --sp-11:80px;
  --gutter:16px; --container:1200px;
  --tap:48px;   /* M3 minimum touch target */

  /* --- M3 motion. Easing + duration tokens. -------------------------- */
  --ease-emphasized:cubic-bezier(.2,0,0,1);
  --ease-emphasized-decel:cubic-bezier(.05,.7,.1,1);
  --ease-emphasized-accel:cubic-bezier(.3,0,.8,.15);
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-standard-decel:cubic-bezier(0,0,0,1);
  --ease-standard-accel:cubic-bezier(.3,0,1,1);
  --dur-short1:50ms;  --dur-short2:100ms; --dur-short3:150ms; --dur-short4:200ms;
  --dur-med1:250ms;   --dur-med2:300ms;   --dur-med3:350ms;   --dur-med4:400ms;
  --dur-long1:450ms;  --dur-long2:500ms;  --dur-long3:550ms;  --dur-long4:600ms;
  /* older names */
  --dur-fast:var(--dur-short2); --dur:var(--dur-short4); --dur-slow:var(--dur-med2);
  --dur-signature:var(--dur-long4);
  --ease:var(--ease-standard); --ease-out:var(--ease-emphasized-decel);

  color-scheme:light;
}

/* --- M3 colour roles: dark scheme ------------------------------------
   Not an inversion. Dark tones lift the primary to tone 80 so it still
   reads as the action colour, and the surface ramp compresses upward so
   elevation stays legible without shadows carrying it alone. */
[data-theme="dark"]{
  --primary:#6DD3E8;                    /* 80 */
  --on-primary:#00363F;                 /* 20 */
  --primary-container:#004E5C;          /* 30 */
  --on-primary-container:#BDE9F7;       /* 90 */
  --inverse-primary:#0B6E86;

  --secondary:#43D1AE;
  --on-secondary:#00382A;
  --secondary-container:#00513E;
  --on-secondary-container:#BFEDDF;

  --tertiary:#B6C4FF;
  --on-tertiary:#032978;
  --tertiary-container:#1D3F8F;
  --on-tertiary-container:#DCE1FF;

  --error:#FFB4A6;
  --on-error:#690000;
  --error-container:#930000;
  --on-error-container:#FFDAD4;

  --money:#FFB955;
  --larch:#F0A63C;
  --on-money:#472A00;
  --money-container:#663D00;
  --on-money-container:#FFDDB3;

  --warn:#F0C070;
  --warn-container:#4A3200;

  --surface:#0E1417;                    /* 6 */
  --surface-dim:#0E1417;
  --surface-bright:#343A3D;             /* 24 */
  --surface-container-lowest:#090F11;   /* 4 */
  --surface-container-low:#171C1F;      /* 10 */
  --surface-container:#1B2124;          /* 12 */
  --surface-container-high:#252B2E;     /* 17 */
  --surface-container-highest:#303639;  /* 22 */
  --on-surface:#DEE3E6;                 /* 90 */
  --on-surface-variant:#BFC8CC;         /* 80 */
  --surface-variant:#3F484C;            /* 30 */
  --outline:#899297;                    /* 60 */
  --outline-variant:#3F484C;            /* 30 */
  --inverse-surface:#DEE3E6;
  --inverse-on-surface:#2B3134;
  --shadow-rgb:0,0,0;

  --muted:#A4AEB3;
  --line-2:#4E585C;
  --primary-dark:#9BE3F3;

  --mark-1:#6DD3E8; --mark-2:#F0A63C;

  --chart-1:#6DD3E8; --chart-2:#F0A63C; --chart-3:#43D1AE; --chart-4:#B6C4FF;
  --chart-5:#9BE3F3; --chart-6:#FFB4A6; --chart-7:#B7D96B; --chart-8:#D3B0F0;
  --chart-9:#4FB3CE; --chart-10:#FFC98A; --chart-11:#79E0C2; --chart-12:#8FA0DC;
  --chart-grid:#3F484C; --chart-axis:#899297;

  --elev-1:0 1px 2px rgba(0,0,0,.40), 0 1px 3px 1px rgba(0,0,0,.30);
  --elev-2:0 1px 2px rgba(0,0,0,.40), 0 2px 6px 2px rgba(0,0,0,.32);
  --elev-3:0 1px 3px rgba(0,0,0,.40), 0 4px 8px 3px rgba(0,0,0,.34);
  --elev-4:0 2px 3px rgba(0,0,0,.40), 0 6px 10px 4px rgba(0,0,0,.36);
  --elev-5:0 4px 4px rgba(0,0,0,.40), 0 8px 12px 6px rgba(0,0,0,.38);
  --ring:0 0 0 3px color-mix(in srgb,var(--primary) 45%,transparent);
  color-scheme:dark;
}
@media (prefers-contrast:more){
  :root{--muted:#394347;--outline:#4A5458;--outline-variant:#8A9498}
  [data-theme="dark"]{--muted:#CBD4D8;--outline:#AAB4B8;--outline-variant:#6B7579}
}

/* ==========================================================================
   2. RESET / FOUNDATION
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--surface);color:var(--on-surface);
  font-family:var(--font-text);font-size:var(--body-lg);line-height:var(--text-body-line);
  letter-spacing:var(--body-lg-ls);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
  transition:background-color var(--dur-med2) var(--ease-standard),color var(--dur-med2) var(--ease-standard)}
::selection{background:var(--primary-container);color:var(--on-primary-container)}
*{scrollbar-width:thin;scrollbar-color:var(--outline-variant) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--outline-variant);border-radius:var(--shape-sm)}
::-webkit-scrollbar-track{background:transparent}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
a{color:var(--primary);text-decoration:none;text-underline-offset:3px;
  transition:color var(--dur-short4) var(--ease-standard)}
a:hover{color:var(--primary-dark);text-decoration:underline}
img,svg,video{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--outline-variant);margin:var(--sp-7) 0}

/* Headings take the display serif; body copy never does. */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);color:var(--on-surface);
  font-weight:var(--weight-semibold);line-height:1.2;text-wrap:balance;margin-top:0}
h1{font-size:var(--text-h1);letter-spacing:-.014em;line-height:1.12}
h2{font-size:var(--headline-md);letter-spacing:var(--headline-md-ls)}
h3{font-size:var(--headline-sm);letter-spacing:var(--headline-sm-ls)}
h4{font-size:var(--title-lg);letter-spacing:var(--title-lg-ls)}
h5{font-size:var(--title-md)}
h6{font-size:var(--title-sm)}
p{margin:0 0 1rem;text-wrap:pretty}
.brand-word{font-family:var(--font-display)}

/* M3 type-role utilities, for new markup that wants to name a role. */
.t-display-lg{font-family:var(--font-display);font-size:var(--display-lg);line-height:var(--display-lg-lh);letter-spacing:var(--display-lg-ls)}
.t-headline-md{font-family:var(--font-display);font-size:var(--headline-md);line-height:var(--headline-md-lh)}
.t-title-lg{font-family:var(--font-display);font-size:var(--title-lg);line-height:var(--title-lg-lh)}
.t-title-md{font-size:var(--title-md);line-height:var(--title-md-lh);letter-spacing:var(--title-md-ls);font-weight:var(--weight-medium)}
.t-body-lg{font-size:var(--body-lg);line-height:var(--body-lg-lh);letter-spacing:var(--body-lg-ls)}
.t-body-md{font-size:var(--body-md);line-height:var(--body-md-lh);letter-spacing:var(--body-md-ls)}
.t-label-lg{font-size:var(--label-lg);line-height:var(--label-lg-lh);letter-spacing:var(--label-lg-ls);font-weight:var(--weight-medium)}
.t-label-md{font-size:var(--label-md);line-height:var(--label-md-lh);letter-spacing:var(--label-md-ls);font-weight:var(--weight-medium)}

.h4{font-size:var(--title-lg);font-weight:var(--weight-semibold);font-family:var(--font-display);letter-spacing:-.008em}
.h5{font-size:var(--title-md);font-weight:var(--weight-semibold);font-family:var(--font-display);letter-spacing:-.004em;line-height:1.35}
.h6{font-size:var(--title-sm);font-weight:var(--weight-semibold);font-family:var(--font-display);letter-spacing:0;line-height:1.4}
.muted,.text-muted{color:var(--muted)!important}
.text-brand{color:var(--primary)!important}
.text-success{color:var(--secondary)!important}
.text-danger{color:var(--error)!important}
.text-warning{color:var(--warn)!important}
.text-dark{color:var(--on-surface)!important}
.small{font-size:.875em}.fw-bold{font-weight:var(--weight-bold)}.fw-semibold{font-weight:var(--weight-semibold)}
.dz{font-family:var(--font-dzongkha);line-height:2}
.visually-hidden,.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Rule: every number is mono and tabular, so figures align down a column. */
.num,.reward,.display-4,.plan-price{font-family:var(--font-data);
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;letter-spacing:-.01em}
.display-4{font-size:var(--display-sm);font-weight:var(--weight-medium)}
/* Rule: larch means money, and only money — and money is set loud. */
.money,.text-gold{color:var(--money)!important}
.money-figure{font-family:var(--font-data);font-variant-numeric:tabular-nums;
  font-size:var(--text-money);letter-spacing:var(--track-money);line-height:1.05;
  color:var(--money);font-weight:var(--weight-medium)}
.money .unit,.money-figure .unit{font-size:.44em;letter-spacing:.05em;color:var(--muted);
  margin-right:.4em;font-weight:var(--weight-medium);font-family:var(--font-text)}
.num .unit-after{font-size:.68em;letter-spacing:.06em;color:var(--muted);margin-left:.35em}
@keyframes settle{0%{transform:translateY(7px);opacity:0}62%{transform:translateY(-2px);opacity:1}100%{transform:translateY(0)}}
.is-settling{animation:settle var(--dur-long4) var(--ease-emphasized-decel) both}

/* Skip link and focus. M3 requires a visible focus indicator on everything. */
.skip{position:absolute;left:-999px;top:0;z-index:2000;background:var(--primary);
  color:var(--on-primary);padding:var(--sp-3) var(--sp-4);border-radius:0 0 var(--shape-sm) 0;font-weight:var(--weight-semibold)}
.skip:focus{left:0}
:where(a,button,.btn,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--primary);outline-offset:2px;border-radius:var(--shape-xs)}

/* ==========================================================================
   3. FRAMEWORK SUBSET — self-contained, no CDN at runtime.
      Covers exactly the classes this app uses, so styling can never break
      when a CDN or a mobile network fails.
      Breakpoints follow M3 window size classes: compact <600, medium 600-839,
      expanded 840-1199, large 1200+.
   ========================================================================== */
.container{width:100%;max-width:var(--container);margin:0 auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right))}
.page{flex:1 0 auto;max-width:var(--container);padding-top:var(--sp-6);padding-bottom:var(--sp-10)}
.row{display:flex;flex-wrap:wrap;gap:var(--g,var(--sp-4))}
.g-2{--g:var(--sp-2)}.g-3{--g:var(--sp-4)}
.row>*{min-width:0}
.col{flex:1 1 0%}
.col-auto{flex:0 0 auto;width:auto}
.col-12{flex:0 0 100%;max-width:100%}
[class*="col-md-"],[class*="col-lg-"],[class*="col-sm-"]{flex:0 0 100%;max-width:100%}
@media(min-width:600px){
  .col-sm-2{flex:0 0 calc(16.666% - var(--g,16px));max-width:calc(16.666% - var(--g,16px))}
  .col-sm-4{flex:0 0 calc(33.333% - var(--g,16px)*2/3);max-width:calc(33.333% - var(--g,16px)*2/3)}
  .col-sm-6{flex:0 0 calc(50% - var(--g,16px)/2);max-width:calc(50% - var(--g,16px)/2)}
}
@media(min-width:840px){
  .col-md-1{flex:0 0 calc(8.333% - var(--g,16px));max-width:calc(8.333% - var(--g,16px))}
  .col-md-2{flex:0 0 calc(16.666% - var(--g,16px));max-width:calc(16.666% - var(--g,16px))}
  .col-md-3{flex:0 0 calc(25% - var(--g,16px)*3/4);max-width:calc(25% - var(--g,16px)*3/4)}
  .col-md-4{flex:0 0 calc(33.333% - var(--g,16px)*2/3);max-width:calc(33.333% - var(--g,16px)*2/3)}
  .col-md-5{flex:0 0 calc(41.666% - var(--g,16px)/2);max-width:calc(41.666% - var(--g,16px)/2)}
  .col-md-6{flex:0 0 calc(50% - var(--g,16px)/2);max-width:calc(50% - var(--g,16px)/2)}
  .col-md-7{flex:0 0 calc(58.333% - var(--g,16px)/2);max-width:calc(58.333% - var(--g,16px)/2)}
  .col-md-8{flex:0 0 calc(66.666% - var(--g,16px)/3);max-width:calc(66.666% - var(--g,16px)/3)}
}
@media(min-width:1024px){
  .col-lg-4{flex:0 0 calc(33.333% - var(--g,16px)*2/3);max-width:calc(33.333% - var(--g,16px)*2/3)}
  .col-lg-5{flex:0 0 calc(41.666% - var(--g,16px)/2);max-width:calc(41.666% - var(--g,16px)/2)}
  .col-lg-6{flex:0 0 calc(50% - var(--g,16px)/2);max-width:calc(50% - var(--g,16px)/2)}
  .col-lg-7{flex:0 0 calc(58.333% - var(--g,16px)/2);max-width:calc(58.333% - var(--g,16px)/2)}
}
.d-flex{display:flex}.d-inline{display:inline}.d-none{display:none}
.flex-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-grow-1{flex-grow:1}
.justify-content-between{justify-content:space-between}.justify-content-center{justify-content:center}
.align-items-center{align-items:center}.align-items-start{align-items:flex-start}.align-items-end{align-items:flex-end}
.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-4)}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:var(--sp-1)}.mb-2{margin-bottom:var(--sp-2)}
.mb-3{margin-bottom:var(--sp-4)}.mb-4{margin-bottom:var(--sp-6)}
.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-4)}.mt-4{margin-top:var(--sp-6)}
.me-1{margin-right:var(--sp-1)}.me-2{margin-right:var(--sp-2)}.me-auto{margin-right:auto}
.p-2{padding:var(--sp-2)}.p-3{padding:var(--sp-4)}
.w-100{width:100%}.h-100{height:100%}
.text-center{text-align:center}.text-end{text-align:right}
.shadow-sm{box-shadow:none}
.align-middle td,.align-middle th,td.align-middle,.table.align-middle>tbody>tr>td{vertical-align:middle}
.bg-white{background:var(--surface-container-lowest)!important;color:var(--on-surface)}
.card-subtitle{color:var(--muted)!important}
.card-text{color:var(--on-surface)}
input[readonly]{background:var(--surface-container);cursor:text}
fieldset[disabled]{opacity:.9;border:0;padding:0;margin:0}
.inp-inline{display:inline-block;width:150px;max-width:100%}
.form-control-sm{padding:var(--sp-1) var(--sp-2);font-size:var(--body-md);min-height:2.25rem}
.pw-toggle{flex:0 0 auto;font-size:var(--label-lg)}
.pw-wrap{max-width:100%}
.table{width:100%;caption-side:bottom}
.table th,.table td{text-align:left}
.table .text-end{text-align:right}
.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.collapse:not(.show){display:none}
.form-label{display:block}
.form-control,.form-select,textarea.form-control{display:block;width:100%;font:inherit}
textarea.form-control{resize:vertical}
.input-group{display:flex;width:100%;gap:var(--sp-2)}
.input-group>.form-control{flex:1 1 auto}

/* Navbar framework part (visual skin lives with the nav below). */
.navbar{position:relative}
.navbar .container{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.navbar-nav{display:flex;list-style:none;margin:0;padding:0;gap:2px}
.nav-item{list-style:none}
.navbar-toggler{border:1px solid var(--outline);background:var(--surface-container-low);
  border-radius:var(--shape-md);padding:10px 12px;cursor:pointer;min-height:var(--tap);min-width:var(--tap);
  display:grid;place-items:center;transition:background var(--dur-short4) var(--ease-standard)}
.navbar-toggler:hover{background:color-mix(in srgb,var(--on-surface) 8%,var(--surface-container-low))}
.navbar-toggler-icon{display:block;width:22px;height:16px;
  background:linear-gradient(var(--on-surface),var(--on-surface)) 0 0/100% 2px no-repeat,
             linear-gradient(var(--on-surface),var(--on-surface)) 0 7px/100% 2px no-repeat,
             linear-gradient(var(--on-surface),var(--on-surface)) 0 14px/100% 2px no-repeat}
.navbar-collapse{display:none;flex-basis:100%;width:100%}
.navbar-collapse.show{display:block}
@media(min-width:992px){
  .navbar-toggler{display:none}
  .navbar-collapse{display:flex!important;flex-basis:auto;width:auto;flex:1;align-items:center}
}
@media(max-width:991px){
  .navbar-collapse.show{display:block;background:var(--surface-container-low);
    border:1px solid var(--outline-variant);border-radius:var(--shape-xl);margin-top:var(--sp-2);
    padding:var(--sp-2);box-shadow:var(--elev-3);animation:menuIn var(--dur-med2) var(--ease-emphasized-decel);
    transform-origin:top}
  @keyframes menuIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}}
  .navbar-collapse .navbar-nav{flex-direction:column;padding:2px 0;gap:2px}
  .navbar-collapse .nav-link{padding:var(--sp-3) var(--sp-4);min-height:var(--tap);display:flex;align-items:center}
  .navbar-collapse .nav-right{padding:var(--sp-3) var(--sp-2) var(--sp-2);
    border-top:1px solid var(--outline-variant);margin-top:var(--sp-2);
    display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
}

/* ==========================================================================
   4. PATTERN — the two places the brand is allowed to speak.
   ========================================================================== */
.selvedge,.horizon{height:2px;border:0;margin:0;border-radius:2px;
  background:linear-gradient(90deg,var(--primary) 0%,var(--secondary) 34%,var(--larch) 68%,transparent 100%);
  opacity:.9}
.mist{background:radial-gradient(120% 100% at 12% 0%,var(--surface-container-high) 0%,transparent 62%),var(--surface)}

/* ==========================================================================
   5. TOP APP BAR
   ========================================================================== */
.samchar-nav{position:sticky;top:0;z-index:100;padding:var(--sp-3) 0;
  background:color-mix(in srgb,var(--surface) 84%,transparent);
  backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-short4) var(--ease-standard),
             background-color var(--dur-short4) var(--ease-standard),
             box-shadow var(--dur-short4) var(--ease-standard)}
.samchar-nav.is-stuck{border-bottom-color:var(--outline-variant);
  background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:var(--elev-2)}
.samchar-nav .container{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.navbar-brand{display:flex;align-items:center;gap:var(--sp-2);font-weight:var(--weight-bold);
  color:var(--on-surface);text-decoration:none;font-size:var(--title-lg)}
.navbar-brand:hover{text-decoration:none;color:var(--on-surface)}
.brand-mark{display:block;flex:0 0 auto}
.brand-word{font-size:var(--title-lg);font-weight:var(--weight-bold);letter-spacing:-.01em}
.samchar-nav .nav-link{position:relative;display:block;text-decoration:none;color:var(--on-surface-variant);
  font-weight:var(--weight-medium);font-size:var(--label-lg);letter-spacing:var(--label-lg-ls);
  padding:var(--sp-2) var(--sp-4);border-radius:var(--shape-full);
  transition:background var(--dur-short4) var(--ease-standard),color var(--dur-short4) var(--ease-standard)}
.samchar-nav .nav-link:hover{color:var(--on-surface);text-decoration:none;
  background:color-mix(in srgb,var(--on-surface) 8%,transparent)}
.samchar-nav .nav-link.active{color:var(--on-primary-container);background:var(--primary-container);
  font-weight:var(--weight-semibold)}
.nav-divider{width:1px;height:20px;background:var(--outline-variant);margin:0 var(--sp-1)}
.navbar-toggler{order:-1;margin-right:2px}
.nav-right{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto}
.user-chip{display:flex;align-items:center;gap:var(--sp-3)}
.user-meta{display:flex;flex-direction:column;line-height:1.15;text-align:right}
.user-meta strong{font-size:var(--label-lg);font-weight:var(--weight-bold);color:var(--on-surface)}
.user-meta span{font-family:var(--font-data);font-size:var(--label-sm);color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em}
.theme-toggle{display:grid;place-items:center;width:var(--tap);height:var(--tap);
  border-radius:var(--shape-full);border:1px solid var(--outline-variant);
  background:var(--surface-container-low);color:var(--on-surface);cursor:pointer;font-size:1rem;line-height:1;
  transition:background var(--dur-short4) var(--ease-standard),transform var(--dur-med1) var(--ease-emphasized)}
.theme-toggle:hover{background:color-mix(in srgb,var(--on-surface) 8%,var(--surface-container-low));transform:rotate(-14deg)}
.theme-toggle .ti-sun{display:none}
.theme-toggle .ti-moon{display:inline}
[data-theme="dark"] .theme-toggle .ti-sun{display:inline}
[data-theme="dark"] .theme-toggle .ti-moon{display:none}

/* Breadcrumbs — small, quiet, and a real navigational aid on deep pages. */
.crumbs{margin:0 0 var(--sp-4)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1);
  list-style:none;margin:0;padding:0;font-size:var(--body-md);color:var(--muted)}
.crumbs li+li::before{content:"/";margin:0 var(--sp-2) 0 0;color:var(--outline)}
.crumbs li{display:flex;align-items:center}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--primary)}
.crumbs [aria-current="page"]{color:var(--on-surface-variant);font-weight:var(--weight-medium)}

/* ==========================================================================
   6. BUTTONS — M3 button anatomy: 40dp tall, full-radius, label-large.
      Never a money button; larch is reserved for figures.
   ========================================================================== */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font:inherit;font-size:var(--label-lg);font-weight:var(--weight-semibold);letter-spacing:var(--label-lg-ls);
  text-decoration:none;cursor:pointer;border:1px solid transparent;text-align:center;user-select:none;
  border-radius:var(--shape-full);padding:10px var(--sp-6);min-height:40px;white-space:nowrap;
  overflow:hidden;isolation:isolate;
  transition:background var(--dur-short4) var(--ease-standard),
             border-color var(--dur-short4) var(--ease-standard),
             color var(--dur-short4) var(--ease-standard),
             box-shadow var(--dur-short4) var(--ease-standard),
             transform var(--dur-short2) var(--ease-standard)}
/* The M3 state layer: a tint of the label colour, composited over the
   container, rather than a second hand-picked background per variant. */
.btn::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;
  transition:opacity var(--dur-short4) var(--ease-standard);pointer-events:none;z-index:-1}
.btn:hover::after{opacity:var(--state-hover)}
.btn:focus-visible::after{opacity:var(--state-focus)}
.btn:active::after{opacity:var(--state-press)}
.btn:active{transform:scale(.985);transition-duration:var(--dur-short1)}
a.btn:hover{text-decoration:none}
.btn:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;transform:none;box-shadow:none;
  background:color-mix(in srgb,var(--on-surface) 12%,transparent);
  border-color:transparent;color:color-mix(in srgb,var(--on-surface) 38%,transparent)}
.btn:disabled::after,.btn[aria-disabled="true"]::after{opacity:0}
/* Sizes. Touch keeps the M3 48dp minimum whatever the type size. */
.btn-sm{padding:var(--sp-1) var(--sp-4);font-size:var(--label-md);min-height:32px}
.btn-lg{padding:var(--sp-4) var(--sp-7);font-size:var(--title-md);min-height:56px}
@media(pointer:coarse){.btn-sm{min-height:var(--tap);padding-top:var(--sp-2);padding-bottom:var(--sp-2)}}
/* Filled (M3 "filled button") — the primary action. */
.btn-brand,.btn-success{background:var(--primary);border-color:var(--primary);color:var(--on-primary);box-shadow:var(--elev-0)}
.btn-brand:hover,.btn-success:hover{color:var(--on-primary);box-shadow:var(--elev-1)}
/* Outlined (M3 "outlined button") — the secondary action. */
.btn-ghost{background:var(--surface-container-lowest);border-color:var(--outline);color:var(--primary)}
.btn-ghost:hover{color:var(--primary);border-color:var(--outline)}
.btn-outline-primary{color:var(--primary);border-color:var(--outline);background:transparent}
.btn-outline-secondary{color:var(--on-surface-variant);border-color:var(--outline);background:transparent}
.btn-outline-danger{color:var(--error);border-color:var(--error);background:transparent}
.btn-danger{background:var(--error);border-color:var(--error);color:var(--on-error)}
/* Tonal (M3 "filled tonal") — an action that matters but is not THE action. */
.btn-tonal{background:var(--primary-container);border-color:transparent;color:var(--on-primary-container)}
/* Text (M3 "text button") — lowest emphasis. */
.btn-quiet{background:transparent;border-color:transparent;color:var(--primary);padding-left:var(--sp-3);padding-right:var(--sp-3)}
.btn.is-loading{color:transparent!important;pointer-events:none}
.btn.is-loading::before{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;
  margin:-9px 0 0 -9px;border:2px solid var(--on-primary);border-right-color:transparent;
  border-radius:50%;animation:spin .7s linear infinite}
.btn-ghost.is-loading::before,.btn-outline-primary.is-loading::before,
.btn-outline-secondary.is-loading::before,.btn-outline-danger.is-loading::before,
.btn-quiet.is-loading::before,.btn-tonal.is-loading::before{border-color:var(--primary);border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn.is-loading::before{animation:none}}

/* ==========================================================================
   7. SURFACES — M3 cards. Filled/outlined, elevation on interaction only.
   ========================================================================== */
.card,.panel{background:var(--surface-container-lowest);border:1px solid var(--outline-variant);
  border-radius:var(--shape-lg);color:var(--on-surface);box-shadow:var(--elev-0);
  transition:border-color var(--dur-short4) var(--ease-standard),
             box-shadow var(--dur-short4) var(--ease-standard),
             transform var(--dur-med1) var(--ease-emphasized),
             background-color var(--dur-med2) var(--ease-standard)}
.panel{padding:var(--sp-6);margin-bottom:var(--sp-5)}
.card{overflow:hidden}
.card .card-body{padding:var(--sp-5)}
.card-title{color:var(--on-surface);font-weight:var(--weight-semibold);font-family:var(--font-display)}
.card-meta{font-size:var(--body-sm);color:var(--muted);font-family:var(--font-data);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
a.card:hover,a.panel:hover,.card-survey:hover{border-color:var(--outline);box-shadow:var(--elev-2);
  transform:translateY(-2px);text-decoration:none}
.card-survey{position:relative}
.card-survey::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));opacity:0;
  transition:opacity var(--dur-short4) var(--ease-standard)}
.card-survey:hover::before{opacity:1}

/* Stat tiles — auto-fit, so a 4-up grid never gets stuck 4-up on a phone. */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3);margin:var(--sp-5) 0}
.stat-grid--3{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.stat-grid--flush{margin:0}
.stat{background:var(--surface-container-lowest);border:1px solid var(--outline-variant);
  border-radius:var(--shape-lg);padding:var(--sp-5);box-shadow:var(--elev-0);
  transition:background-color var(--dur-med2) var(--ease-standard),box-shadow var(--dur-short4) var(--ease-standard)}
.stat .n{font-family:var(--font-data);font-variant-numeric:tabular-nums;letter-spacing:-.015em;
  font-size:clamp(1.375rem,2.4vw,1.875rem);font-weight:var(--weight-medium);line-height:1.05;
  color:var(--on-surface);overflow-wrap:anywhere}
.stat .l{color:var(--muted);font-size:var(--body-md);font-weight:var(--weight-medium);margin-top:var(--sp-2)}
.stat.gold .n{color:var(--money)}
.stat-link{display:block;text-decoration:none;color:inherit;cursor:pointer}
.stat-link:hover{text-decoration:none;color:inherit;border-color:var(--outline);
  box-shadow:var(--elev-2);transform:translateY(-2px)}
.stat-link:active{transform:translateY(0);transition-duration:var(--dur-short1)}

/* Hero — a glacier gradient, not a black slab. */
.hero{border-radius:var(--shape-xl);padding:var(--sp-7);display:grid;
  grid-template-columns:1.6fr .9fr;gap:var(--sp-7);align-items:center;color:#fff;
  background:linear-gradient(140deg,var(--primary-dark) 0%,var(--primary) 55%,var(--secondary) 130%)}
[data-theme="dark"] .hero{color:var(--on-primary);
  background:linear-gradient(140deg,#0A4E5E 0%,#0B6E86 55%,#0F5D4C 130%);color:#EAF7FB}
.hero h1{color:inherit;font-size:clamp(1.5rem,3.4vw,2.25rem);margin:0 0 var(--sp-2)}
.hero p{color:color-mix(in srgb,currentColor 84%,transparent);margin:0;max-width:56ch}
.hero .btn-ghost,.hero-ghost{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);color:#fff}
.hero .btn-ghost:hover,.hero-ghost:hover{background:rgba(255,255,255,.26);color:#fff}
.hero-solid{background:#fff;border-color:#fff;color:var(--primary);box-shadow:none}
.hero-solid:hover{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.92);color:#08566A}
.hero-cta{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.level-card{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  border-radius:var(--shape-lg);padding:var(--sp-5);backdrop-filter:blur(6px)}
.level-card .tier{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--title-lg);color:#fff}
.level-card .sub{color:rgba(255,255,255,.8);font-size:var(--body-md);margin-bottom:var(--sp-3)}
.lc-streak{margin-top:var(--sp-3);font-size:var(--label-lg);font-weight:var(--weight-semibold);
  color:rgba(255,255,255,.92);display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-1) var(--sp-3);border-radius:var(--shape-full);background:rgba(255,255,255,.18)}
.bar{height:8px;border-radius:var(--shape-full);background:rgba(255,255,255,.24);overflow:hidden}
.bar>i{display:block;height:100%;background:#fff;border-radius:var(--shape-full);
  transition:width var(--dur-long4) var(--ease-emphasized-decel)}

.wallet-panel{border-radius:var(--shape-xl);padding:var(--sp-5) var(--sp-6);
  background:var(--surface-container-lowest);border:1px solid var(--outline-variant);box-shadow:var(--elev-1)}
.wallet-label{font-family:var(--font-data);font-size:var(--label-md);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.wallet-amount{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:1.875rem;
  font-weight:var(--weight-medium);color:var(--money);letter-spacing:-.015em;line-height:1.2;margin-top:var(--sp-1)}
.hero .wallet-panel{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);
  backdrop-filter:blur(6px);box-shadow:none}
.hero .wallet-label{color:rgba(255,255,255,.74)}

/* ==========================================================================
   8. PROGRESS — the signature fill. Turns larch on completion.
   ========================================================================== */
.thread-wrap{margin:var(--sp-3) 0}
.thread{height:10px;border-radius:var(--shape-full);overflow:hidden;background:var(--surface-container-high)}
.thread-weft{height:100%;border-radius:var(--shape-full);
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  transition:width var(--dur-long4) var(--ease-emphasized-decel)}
.thread-weft.is-complete{background:linear-gradient(90deg,var(--money),var(--larch))}
.thread-cap{display:block;margin-top:var(--sp-1);font-size:var(--body-sm);color:var(--muted);
  font-family:var(--font-data);font-variant-numeric:tabular-nums}
.meter{height:8px;background:var(--surface-container-high);border-radius:var(--shape-full);overflow:hidden}
.meter>i{display:block;height:100%;border-radius:var(--shape-full);background:var(--primary);
  transition:width var(--dur-med2) var(--ease-emphasized-decel)}
@media (prefers-reduced-motion:reduce){.thread-weft,.bar>i,.meter>i{transition:none}}

/* ==========================================================================
   9. CHIPS / BADGES — M3 chip: 32dp tall, 8dp radius, label-large.
   ========================================================================== */
.chip,.badge{display:inline-flex;align-items:center;gap:var(--sp-1);font-family:var(--font-text);
  font-size:var(--label-md);font-weight:var(--weight-semibold);letter-spacing:var(--track-chip);
  padding:var(--sp-1) var(--sp-3);border-radius:var(--shape-sm);border:1px solid var(--outline-variant);
  background:var(--surface-container-low);color:var(--on-surface-variant);line-height:1.5;
  white-space:nowrap;min-height:26px}
.chip-good,.badge.bg-success{background:var(--secondary-container)!important;color:var(--on-secondary-container)!important;border-color:transparent!important}
.chip-warn,.badge.bg-warning{background:var(--warn-container)!important;color:var(--warn)!important;border-color:transparent!important}
[data-theme="dark"] .chip-warn,[data-theme="dark"] .badge.bg-warning{color:var(--warn)!important}
.chip-bad,.badge.bg-danger{background:var(--error-container)!important;color:var(--on-error-container)!important;border-color:transparent!important}
[data-theme="dark"] .chip-bad,[data-theme="dark"] .badge.bg-danger{color:var(--error)!important}
.chip-muted,.badge.bg-secondary{background:var(--surface-container)!important;color:var(--muted)!important;border-color:var(--outline-variant)!important}
.chip-org{background:var(--tertiary-container);color:var(--on-tertiary-container);border-color:transparent}
/* The reward chip is the one place money sits on a background. */
.chip-gold{background:var(--money-container);color:var(--on-money-container);border-color:transparent;
  font-family:var(--font-data);font-variant-numeric:tabular-nums}
.reward{font-weight:var(--weight-medium);color:var(--money);font-family:var(--font-data);font-variant-numeric:tabular-nums}
/* Verified issuer — a live dot, the one always-on animation. */
.chip-verified{background:var(--primary-container);color:var(--on-primary-container);border-color:transparent}
.chip-verified::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:currentColor;box-shadow:0 0 0 0 currentColor;animation:pulse 2.6s var(--ease-standard) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 50%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.chip-verified::before{animation:none}}

/* Filter chips (M3 "filter chip") — pill links, so every view is a real URL. */
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-6)}
.chip-btn{position:relative;display:inline-flex;align-items:center;gap:var(--sp-2);min-height:32px;
  padding:var(--sp-1) var(--sp-4);border-radius:var(--shape-sm);border:1px solid var(--outline);
  background:transparent;color:var(--on-surface-variant);font-size:var(--label-lg);
  font-weight:var(--weight-medium);text-decoration:none;white-space:nowrap;overflow:hidden;isolation:isolate;
  transition:background var(--dur-short4) var(--ease-standard),border-color var(--dur-short4) var(--ease-standard),
             color var(--dur-short4) var(--ease-standard)}
.chip-btn::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;
  transition:opacity var(--dur-short4) var(--ease-standard);z-index:-1}
.chip-btn:hover::after{opacity:var(--state-hover)}
.chip-btn:hover{color:var(--on-surface);text-decoration:none}
.chip-btn.is-on{background:var(--secondary-container);border-color:transparent;
  color:var(--on-secondary-container);font-weight:var(--weight-semibold)}
.filter-sep{width:1px;align-self:stretch;min-height:26px;background:var(--outline-variant);margin:0 var(--sp-1)}
@media(pointer:coarse){.chip-btn{min-height:var(--tap)}}

/* Segmented button (M3) — for a small set of mutually exclusive views. */
.seg{display:inline-flex;border:1px solid var(--outline);border-radius:var(--shape-full);overflow:hidden;
  background:transparent}
.seg>a,.seg>button{appearance:none;background:transparent;border:0;border-right:1px solid var(--outline);
  padding:var(--sp-2) var(--sp-4);min-height:40px;display:inline-flex;align-items:center;gap:var(--sp-2);
  font:inherit;font-size:var(--label-lg);font-weight:var(--weight-medium);color:var(--on-surface-variant);
  cursor:pointer;text-decoration:none;transition:background var(--dur-short4) var(--ease-standard)}
.seg>*:last-child{border-right:0}
.seg>a:hover,.seg>button:hover{background:color-mix(in srgb,var(--on-surface) 8%,transparent);text-decoration:none}
.seg>.is-on{background:var(--secondary-container);color:var(--on-secondary-container);font-weight:var(--weight-semibold)}

/* ==========================================================================
   10. PAGE HEAD
   ========================================================================== */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4) var(--sp-7);
  flex-wrap:wrap;margin:2px 0 var(--sp-6)}
.ph-l{flex:1 1 34ch;min-width:0}
.page-head h1{margin:0}
.ph-l>p{margin:var(--sp-2) 0 0;color:var(--muted);font-size:var(--body-lg);max-width:66ch}
.ph-r{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-left:auto}
.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-data);
  font-size:var(--text-eyebrow);font-weight:var(--weight-medium);letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;color:var(--muted);margin:0 0 var(--sp-2)}
.eyebrow::before{content:"";flex:0 0 auto;width:14px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--primary),var(--secondary))}

/* Survey / ledger rows */
.srow{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) 0;border-bottom:1px solid var(--outline-variant)}
.srow:last-child{border-bottom:0}
.srow h4{margin:0 0 var(--sp-1);font-size:var(--title-md);color:var(--on-surface);font-family:var(--font-display)}
.srow p{margin:0;color:var(--muted);font-size:var(--body-md)}

/* ==========================================================================
   11. FORMS — M3 outlined text field: 4dp radius, 56dp tall, 16dp padding.
   ========================================================================== */
.form-label{display:block;font-weight:var(--weight-medium);font-size:var(--label-lg);
  color:var(--on-surface);margin-bottom:var(--sp-2)}
.form-control,.form-select,textarea.form-control{background-color:var(--surface-container-lowest);
  color:var(--on-surface);border-radius:var(--shape-xs);border:1px solid var(--outline);
  padding:var(--sp-3) var(--sp-4);min-height:48px;font-size:var(--body-lg);
  transition:border-color var(--dur-short4) var(--ease-standard),box-shadow var(--dur-short4) var(--ease-standard)}
textarea.form-control{resize:vertical;min-height:6.5rem;line-height:1.55}
.form-control::placeholder{color:var(--muted);opacity:.85}
.form-control:hover,.form-select:hover{border-color:var(--on-surface-variant)}
.form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary);outline:none}
.form-control[aria-invalid="true"],.form-control.is-invalid{border-color:var(--error)}
.form-control[aria-invalid="true"]:focus{box-shadow:0 0 0 1px var(--error)}
.form-select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233F484C' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right var(--sp-4) center;background-size:16px 12px;padding-right:2.75rem}
[data-theme="dark"] .form-select{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23BFC8CC' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")}
/* A survey answer is a full-width tap target, not a naked checkbox. */
.form-check{display:flex;gap:var(--sp-3);align-items:flex-start;min-height:var(--tap);
  padding:var(--sp-3) var(--sp-4);border:1px solid var(--outline-variant);border-radius:var(--shape-md);
  background:var(--surface-container-lowest);cursor:pointer;margin-bottom:var(--sp-2);
  transition:border-color var(--dur-short4) var(--ease-standard),background var(--dur-short4) var(--ease-standard)}
.form-check:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 6%,var(--surface-container-lowest))}
.form-check:has(:checked){border-color:var(--primary);background:var(--primary-container);
  color:var(--on-primary-container)}
.form-check-input{flex:0 0 auto;width:1.25em;height:1.25em;margin-top:.2em;accent-color:var(--primary);
  background-color:var(--surface-container-lowest);border-color:var(--outline)}
.form-check-label{cursor:pointer}
.form-text{display:block;margin-top:var(--sp-2);font-size:var(--body-md);color:var(--muted);line-height:1.45}
.char-count{color:var(--muted);font-size:var(--body-sm);font-family:var(--font-data)}
.char-count.is-near{color:var(--warn);font-weight:var(--weight-semibold)}
.input-group-text{background:var(--surface-container);border-color:var(--outline-variant);color:var(--muted)}
/* The own-words note under a survey answer. */
.ow-note{color:var(--muted)}
.ow-note.is-warn{color:var(--warn);font-weight:var(--weight-medium)}

/* The launch quote — a receipt, not a price card. */
.quote{border:1px solid var(--outline-variant);border-radius:var(--shape-lg);
  padding:var(--sp-5) var(--sp-6);margin:0;background:var(--surface-container-low)}
.quote-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);
  padding:var(--sp-2) 0;border-bottom:1px solid var(--outline-variant);font-size:var(--body-lg)}
.quote-row b{white-space:nowrap;font-weight:var(--weight-medium);font-family:var(--font-data);font-variant-numeric:tabular-nums}
.quote-total{border-bottom:0;border-top:1px solid var(--outline);margin-top:var(--sp-1);
  padding-top:var(--sp-3);font-weight:var(--weight-bold)}
.quote-total b{font-size:var(--title-lg);color:var(--money)}
.quote-note{margin:var(--sp-3) 0 0;font-size:var(--body-md);color:var(--muted)}
.quote-note.is-short{color:var(--error);font-weight:var(--weight-medium)}

/* ==========================================================================
   12. TABLES
   ========================================================================== */
.table{background:var(--surface-container-lowest);color:var(--on-surface);border-radius:var(--shape-lg);
  overflow:hidden;border:1px solid var(--outline-variant);border-collapse:separate;border-spacing:0}
.table>thead th{background:var(--surface-container-low);color:var(--muted);font-size:var(--label-md);
  letter-spacing:.06em;font-weight:var(--weight-semibold);border-bottom:1px solid var(--outline-variant);
  text-transform:uppercase;position:sticky;top:0;z-index:1}
.table td,.table th{padding:var(--sp-3) var(--sp-4);vertical-align:middle;
  border-bottom:1px solid var(--outline-variant);color:var(--on-surface)}
.table tbody tr:last-child>*{border-bottom:0}
.table tbody tr:hover>*{background:color-mix(in srgb,var(--on-surface) 4%,transparent)}
.table.table-striped>tbody>tr:nth-of-type(odd)>*{background:color-mix(in srgb,var(--on-surface) 2%,transparent)}
.table-responsive{border-radius:var(--shape-lg)}

/* ==========================================================================
   13. ALERTS / FLASHES / STATES
   ========================================================================== */
.alert{display:block;padding:var(--sp-4) var(--sp-5);margin-bottom:1rem;background:var(--primary-container);
  border:1px solid transparent;color:var(--on-primary-container);border-radius:var(--shape-md)}
.alert-warning{background:var(--warn-container);color:var(--warn)}
.alert-danger{background:var(--error-container);color:var(--on-error-container)}
.flash{position:relative;padding:var(--sp-4) 46px var(--sp-4) var(--sp-5);border-radius:var(--shape-md);
  margin-bottom:var(--sp-5);font-size:var(--body-lg);border:1px solid transparent;box-shadow:var(--elev-1);
  animation:flashIn var(--dur-med2) var(--ease-emphasized-decel) both}
@keyframes flashIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.flash-good{background:var(--secondary-container);color:var(--on-secondary-container)}
.flash-bad{background:var(--error-container);color:var(--on-error-container)}
.flash-warn{background:var(--warn-container);color:var(--warn)}
.flash-info{background:var(--primary-container);color:var(--on-primary-container)}
.flash-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;
  display:grid;place-items:center;border:0;border-radius:var(--shape-full);background:transparent;
  font-size:1.25rem;line-height:1;color:inherit;cursor:pointer;opacity:.7}
.flash-x:hover{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)}

.state{border:1px solid var(--outline-variant);border-radius:var(--shape-lg);
  background:var(--surface-container-lowest);padding:var(--sp-7) var(--sp-6);display:flex;
  gap:var(--sp-5);align-items:flex-start;margin-bottom:var(--sp-5)}
.state--center{flex-direction:column;align-items:center;text-align:center}
.state__icon{flex:0 0 auto;width:48px;height:48px;border-radius:var(--shape-full);display:grid;
  place-items:center;background:var(--surface-container);color:var(--muted)}
.state__icon svg{width:22px;height:22px}
.state__body{flex:1 1 auto;min-width:0}
.state__title{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--title-md);
  color:var(--on-surface);margin:0 0 var(--sp-1)}
.state__msg{color:var(--muted);font-size:var(--body-lg);margin:0;max-width:64ch}
.state__actions{margin-top:var(--sp-4);display:flex;gap:var(--sp-2);flex-wrap:wrap}
.state--empty .state__icon{color:var(--primary);background:var(--primary-container)}
.state--error .state__icon{color:var(--error);background:var(--error-container)}

/* ==========================================================================
   14. PAGINATION
   ========================================================================== */
.pagination{display:flex;list-style:none;margin:0;padding:0;gap:var(--sp-1);flex-wrap:wrap}
.pagination .page-link{display:grid;place-items:center;min-width:40px;height:40px;padding:0 var(--sp-3);
  border-radius:var(--shape-full);text-decoration:none;border:1px solid var(--outline-variant);
  background:var(--surface-container-lowest);color:var(--on-surface-variant);font-family:var(--font-data);
  font-size:var(--label-lg);cursor:pointer;transition:background var(--dur-short4) var(--ease-standard)}
.pagination .page-link:hover{background:color-mix(in srgb,var(--on-surface) 8%,var(--surface-container-lowest));text-decoration:none}
.pagination .page-item.active .page-link{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.pagination .page-item.disabled .page-link{background:var(--surface-container-lowest);
  color:color-mix(in srgb,var(--on-surface) 38%,transparent);cursor:not-allowed}

/* ==========================================================================
   15. MARKETING HOME
   ========================================================================== */
.home-hero{padding:var(--sp-11) 0 var(--sp-9);text-align:center;display:flex;flex-direction:column;
  align-items:center;background:radial-gradient(90% 70% at 50% -10%,var(--surface-container-high) 0%,transparent 60%)}
.home-hero h1{font-size:var(--text-hero);line-height:1.02;letter-spacing:var(--track-hero);
  margin:var(--sp-1) 0 var(--sp-5);max-width:17ch}
.home-hero p{color:var(--on-surface-variant);font-size:var(--title-md);max-width:58ch;margin:0 0 var(--sp-6)}
.hh-main{max-width:780px}
.hh-side{border:1px solid var(--outline-variant);border-radius:var(--shape-xl);
  background:var(--surface-container-lowest);padding:var(--sp-1);box-shadow:var(--elev-3);
  margin-top:var(--sp-8);width:min(100%,720px)}
.hh-card{border-radius:var(--shape-lg);padding:var(--sp-5) var(--sp-6);background:var(--surface-container-low);text-align:left}
.hh-cap{font-family:var(--font-data);font-size:var(--label-md);font-weight:var(--weight-medium);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:var(--sp-1) var(--sp-1) var(--sp-3)}
.hh-row{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) 2px;border-bottom:1px solid var(--outline-variant)}
.hh-row:last-child{border-bottom:0}
.hh-k{color:var(--muted);font-size:var(--body-lg)}
.hh-v{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-weight:var(--weight-medium);
  color:var(--on-surface);font-size:var(--title-md)}

/* How it works — numbered, generous, no card row */
.steps{list-style:none;margin:var(--sp-7) 0 0;padding:0;counter-reset:s;display:grid;gap:2px}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:var(--sp-5);
  align-items:start;padding:var(--sp-5);border-radius:var(--shape-lg);
  transition:background var(--dur-short4) var(--ease-standard)}
.steps li:hover{background:var(--surface-container-low)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--font-data);
  font-size:var(--label-lg);font-weight:var(--weight-medium);color:var(--on-primary-container);
  background:var(--primary-container);border-radius:var(--shape-full);padding:var(--sp-2) var(--sp-3);line-height:1}
.steps h3{margin:0 0 var(--sp-1);font-size:var(--title-md)}
.steps p{margin:0;color:var(--muted);font-size:var(--body-lg);max-width:64ch}

/* FAQ — plain and quotable; this is the answer-engine surface */
.faq details{border-bottom:1px solid var(--outline-variant);padding:var(--sp-4) 0}
.faq summary{cursor:pointer;font-family:var(--font-display);font-weight:var(--weight-semibold);
  font-size:var(--title-md);color:var(--on-surface);list-style:none;display:flex;gap:var(--sp-3);
  align-items:baseline;min-height:var(--tap);align-content:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--primary);font-family:var(--font-data);font-weight:400;flex:0 0 auto}
.faq details[open] summary::before{content:"\2212"}
.faq p{margin:var(--sp-2) 0 0 1.6em;color:var(--on-surface-variant);max-width:74ch;font-size:var(--body-lg)}
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}

/* Guide */
.guide-nav{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.guide-sec{scroll-margin-top:96px;padding-top:var(--sp-2)}
.guide-sec h2{display:flex;align-items:baseline;gap:var(--sp-3);margin:0 0 var(--sp-2)}
.guide-sec h2 .n{font-family:var(--font-data);font-size:var(--label-lg);color:var(--muted);letter-spacing:.08em}
.cat-head{font-size:var(--title-md);font-weight:var(--weight-semibold);font-family:var(--font-display);
  margin:var(--sp-7) 0 var(--sp-3);display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  padding-bottom:var(--sp-2);border-bottom:1px solid var(--outline-variant)}
.cat-head>span{font-size:var(--body-md);font-weight:400;color:var(--muted);letter-spacing:0;font-family:var(--font-text)}

/* Footer */
.site-foot{color:var(--muted);font-size:var(--body-lg);padding:var(--sp-8) 0 var(--sp-9);
  background:var(--surface-container-low);border-top:1px solid var(--outline-variant);
  margin-top:var(--sp-7);border-radius:var(--shape-xl) var(--shape-xl) 0 0}
.foot-grid{display:flex;justify-content:space-between;gap:var(--sp-7);flex-wrap:wrap;align-items:flex-start}
.foot-brand{max-width:40ch;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.foot-brand span{font-family:var(--font-display);font-weight:var(--weight-bold);color:var(--on-surface);font-size:var(--title-md)}
.foot-brand p{flex:1 1 100%;margin:var(--sp-2) 0 0;font-size:var(--body-md);color:var(--muted)}
.foot-links{display:flex;flex-direction:column;gap:var(--sp-3)}
.foot-links a{color:var(--on-surface-variant);font-size:var(--body-md);min-height:24px;display:inline-flex;align-items:center}
.foot-legal{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--outline-variant);
  font-size:var(--body-sm);color:var(--muted)}

/* ==========================================================================
   16. NAVIGATION BAR (mobile) — M3: 80dp tall, pill active indicator.
   ========================================================================== */
.bottom-nav{display:none}

/* ==========================================================================
   17. THE CATALOGUE — vouchers, filters, issued codes.
   ========================================================================== */
.reward-card{display:flex;flex-direction:column;margin:0;padding:var(--sp-5)}
.reward-card:hover{border-color:var(--outline);box-shadow:var(--elev-2)}
.rc-top{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-bottom:var(--sp-3)}
.rc-title{margin:0 0 2px;font-size:var(--title-md)}
.rc-provider{margin:0 0 var(--sp-2);font-size:var(--body-md);color:var(--muted);font-weight:var(--weight-medium)}
.rc-desc{flex:1 1 auto;margin:0 0 var(--sp-4);font-size:var(--body-md);line-height:1.5}
.rc-price{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;
  padding-top:var(--sp-3);border-top:1px solid var(--outline-variant);margin-bottom:var(--sp-3)}
.rc-cost{font-size:var(--headline-sm);font-weight:var(--weight-medium);color:var(--on-surface);line-height:1}
.rc-value{font-size:var(--body-md);font-weight:var(--weight-medium);color:var(--muted)}
.rc-value .num{font-size:1em}
.rc-lab{font-size:var(--body-sm);margin-bottom:var(--sp-1)}
.rc-act{margin:0}
.rc-act .thread-wrap{margin:0 0 var(--sp-2)}
.rc-note{margin:var(--sp-3) 0 0;font-size:var(--body-sm);line-height:1.45}

.afford-list{display:grid;gap:2px}
.afford-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3);border-radius:var(--shape-md);color:var(--on-surface);text-decoration:none;
  min-height:var(--tap);transition:background var(--dur-short4) var(--ease-standard)}
.afford-row:hover{background:var(--surface-container-low);color:var(--on-surface);text-decoration:none}
.ar-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ar-t strong{font-size:var(--body-lg);font-weight:var(--weight-semibold)}
.ar-t .muted{font-size:var(--body-sm)}
.ar-c{flex:0 0 auto;font-size:var(--body-lg);font-weight:var(--weight-medium);color:var(--on-surface-variant)}

.redeem-row{padding:var(--sp-5)}
.rr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.rr-title{margin:var(--sp-2) 0 var(--sp-1);font-size:var(--title-md)}
.rr-meta{margin:0;font-size:var(--body-md);line-height:1.6}
.rr-explain{margin:var(--sp-3) 0 0;font-size:var(--body-md)}
.rr-req{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin:var(--sp-3) 0 0;
  padding:var(--sp-2) var(--sp-4);border-radius:var(--shape-md);background:var(--surface-container-low);
  font-size:var(--body-lg)}
.rr-req-lab{font-family:var(--font-data);font-size:var(--label-sm);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.rr-acts{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:flex-start;margin-top:var(--sp-4);
  padding-top:var(--sp-4);border-top:1px solid var(--outline-variant)}
.rr-issue{flex:1 1 320px;min-width:0}
.rr-side{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--sp-2);min-width:172px}

.voucher{margin-top:var(--sp-4);padding:var(--sp-4) var(--sp-5);border-radius:var(--shape-lg);
  background:var(--money-container);border:1px solid color-mix(in srgb,var(--larch) 30%,transparent)}
.v-lab{font-family:var(--font-data);font-size:var(--label-sm);letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-money-container);margin-bottom:var(--sp-2);font-weight:var(--weight-semibold)}
.v-row{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap}
.voucher-code{font-size:var(--headline-sm);font-weight:var(--weight-medium);letter-spacing:.08em;
  color:var(--on-money-container);word-break:break-all}
.v-note{margin:var(--sp-2) 0 0;font-size:var(--body-sm);color:var(--on-money-container);opacity:.9}
.row-acts{display:inline-flex;gap:var(--sp-1);flex-wrap:wrap;justify-content:flex-end}
.is-copied{color:var(--secondary)!important}

/* ==========================================================================
   18. CITIZEN DASHBOARD
   ========================================================================== */
.win-panel{border-left:3px solid var(--primary);background:var(--primary-container);
  color:var(--on-primary-container);border-color:transparent}
.win-panel .eyebrow{margin-bottom:var(--sp-2);color:inherit;opacity:.8}
.win-panel h2,.win-panel p,.win-panel strong{color:inherit}
.win-panel .muted{color:inherit!important;opacity:.85}
.win-acts{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-4)}

/* ==========================================================================
   19. LEGAL DOCUMENTS — long-form reading with a sticky contents list.
   ========================================================================== */
.legal{display:grid;grid-template-columns:minmax(0,1fr) 258px;gap:var(--sp-7);align-items:start}
.legal-toc{order:2;position:sticky;top:96px;border:1px solid var(--outline-variant);
  border-radius:var(--shape-lg);background:var(--surface-container-lowest);padding:var(--sp-4) var(--sp-5);
  box-shadow:var(--elev-1);max-height:calc(100vh - 128px);overflow-y:auto}
.legal-toc-lab{font-family:var(--font-data);font-size:var(--label-sm);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 var(--sp-3)}
.legal-toc ol{margin:0;padding-left:1.4em;display:grid;gap:var(--sp-2)}
.legal-toc li{font-size:var(--body-md);line-height:1.4;color:var(--muted)}
.legal-toc a{color:var(--on-surface-variant)}
.legal-toc a:hover{color:var(--primary)}
.legal-body{order:1;margin:0;padding:var(--sp-7) var(--sp-8);max-width:78ch}
.legal-lede{font-size:var(--title-md);color:var(--on-surface-variant);margin:0 0 var(--sp-6);
  padding-bottom:var(--sp-5);border-bottom:1px solid var(--outline-variant)}
.legal-body h2{margin:var(--sp-7) 0 var(--sp-2);scroll-margin-top:104px;font-size:var(--title-md)}
.legal-body h2:first-of-type{margin-top:0}
.legal-body p{color:var(--on-surface-variant);font-size:var(--body-lg);line-height:1.7;max-width:72ch}
.legal-body strong{color:var(--on-surface)}
.legal-body h2:target{color:var(--primary)}

/* ==========================================================================
   20. CHARTS — the analysis surface.
   ========================================================================== */
.chart-card{background:var(--surface-container-lowest);border:1px solid var(--outline-variant);
  border-radius:var(--shape-lg);padding:var(--sp-5);margin-bottom:var(--sp-4)}
.chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3);
  flex-wrap:wrap;margin-bottom:var(--sp-4)}
.chart-title{margin:0;font-size:var(--title-md);font-family:var(--font-display)}
.chart-sub{margin:var(--sp-1) 0 0;font-size:var(--body-md);color:var(--muted)}
.chart-wrap{display:flex;gap:var(--sp-6);align-items:center;flex-wrap:wrap}
.chart-svg{display:block;max-width:100%;height:auto;overflow:visible}
.chart-legend{display:grid;gap:var(--sp-2);min-width:180px;flex:1 1 200px;list-style:none;margin:0;padding:0}
.chart-legend li{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--body-md);color:var(--on-surface-variant)}
.legend-dot{flex:0 0 auto;width:12px;height:12px;border-radius:3px}
.legend-lab{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.legend-val{flex:0 0 auto;font-family:var(--font-data);font-variant-numeric:tabular-nums;
  color:var(--on-surface);font-weight:var(--weight-medium)}
.legend-pct{flex:0 0 auto;color:var(--muted);font-family:var(--font-data);font-size:var(--body-sm)}
/* Horizontal bars, in HTML so long labels wrap and the numbers stay selectable. */
.hbars{display:grid;gap:var(--sp-3);margin:0}
.hbar-row{display:grid;grid-template-columns:1fr auto;gap:var(--sp-1) var(--sp-3);align-items:baseline}
.hbar-lab{font-size:var(--body-md);color:var(--on-surface);overflow-wrap:anywhere}
.hbar-val{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:var(--body-md);
  color:var(--on-surface-variant);white-space:nowrap}
.hbar-track{grid-column:1/-1;height:12px;border-radius:var(--shape-full);
  background:var(--surface-container-high);overflow:hidden}
.hbar-fill{display:block;height:100%;border-radius:var(--shape-full);
  transition:width var(--dur-long2) var(--ease-emphasized-decel)}
.hbar-row.is-top .hbar-lab{font-weight:var(--weight-semibold)}
/* A key figure beside a chart. */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:var(--sp-3);margin:0 0 var(--sp-5)}
.kpi{background:var(--surface-container-low);border-radius:var(--shape-md);padding:var(--sp-4)}
.kpi-n{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-size:var(--headline-sm);
  font-weight:var(--weight-medium);line-height:1.1;color:var(--on-surface)}
.kpi-l{font-size:var(--body-sm);color:var(--muted);margin-top:var(--sp-1);line-height:1.35}
.kpi-hint{font-size:var(--body-sm);color:var(--muted);font-family:var(--font-data)}
.kpi.is-money .kpi-n{color:var(--money)}
.kpi.is-warn .kpi-n{color:var(--warn)}
.kpi.is-good .kpi-n{color:var(--secondary)}
/* Scale/rating summary: the average marked on the distribution. */
.avg-mark{font-family:var(--font-data);font-variant-numeric:tabular-nums;font-weight:var(--weight-medium);
  color:var(--primary)}
.chart-note{margin:var(--sp-3) 0 0;font-size:var(--body-sm);color:var(--muted)}
.chart-empty{margin:0;font-size:var(--body-md);color:var(--muted)}
/* Free-text answers, grouped. */
.answer-list{display:grid;gap:var(--sp-2);margin:0}
.answer-item{padding:var(--sp-3) var(--sp-4);border:1px solid var(--outline-variant);
  border-radius:var(--shape-md);background:var(--surface-container-low);font-size:var(--body-md);
  display:flex;gap:var(--sp-3);align-items:flex-start;justify-content:space-between}
.answer-item p{margin:0;overflow-wrap:anywhere}
/* Word frequency cloud, sized by rank not by raw count so one outlier cannot
   flatten everything else. */
.wordbag{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:baseline;margin:0}
.wordbag a,.wordbag span{display:inline-flex;align-items:baseline;gap:6px;padding:var(--sp-1) var(--sp-3);
  border-radius:var(--shape-full);background:var(--surface-container);color:var(--on-surface-variant);
  text-decoration:none;font-size:var(--body-md)}
.wordbag .w-n{font-family:var(--font-data);font-size:var(--body-sm);color:var(--muted)}
.wordbag .w-1{background:var(--primary-container);color:var(--on-primary-container);font-weight:var(--weight-semibold);font-size:var(--title-md)}
.wordbag .w-2{background:var(--secondary-container);color:var(--on-secondary-container);font-weight:var(--weight-medium);font-size:var(--body-lg)}
/* Stacked proportion bar — one row, the whole is the point. */
.stackbar{display:flex;height:22px;border-radius:var(--shape-full);overflow:hidden;
  background:var(--surface-container-high);margin:0 0 var(--sp-3)}
.stack-seg{display:block;height:100%;min-width:2px;
  transition:width var(--dur-long2) var(--ease-emphasized-decel)}
.chart-legend--row{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);min-width:0}
.chart-legend--row li{flex:0 0 auto}
/* Diverging bars — two-sided comparison around a centre line. */
.diverge{display:grid;gap:var(--sp-3)}
.dv-row{display:grid;grid-template-columns:minmax(80px,1fr) minmax(120px,2fr) auto;
  gap:var(--sp-3);align-items:center}
.dv-lab{font-size:var(--body-md);color:var(--on-surface);overflow-wrap:anywhere}
.dv-track{display:flex;align-items:center;height:14px}
.dv-l,.dv-r{flex:1 1 0;height:100%;display:flex;background:var(--surface-container-high);overflow:hidden}
.dv-l{justify-content:flex-end;border-radius:var(--shape-full) 0 0 var(--shape-full)}
.dv-r{justify-content:flex-start;border-radius:0 var(--shape-full) var(--shape-full) 0}
.dv-l>span,.dv-r>span{display:block;height:100%}
.dv-mid{flex:0 0 2px;height:20px;background:var(--outline);align-self:center}
.dv-val{flex:0 0 auto;font-size:var(--body-sm);color:var(--muted);white-space:nowrap}
@media(max-width:640px){
  .dv-row{grid-template-columns:1fr auto}
  .dv-track{grid-column:1/-1}
}

/* ==========================================================================
   21. SURVEY BUILDER
   ========================================================================== */
.qb-list{display:grid;gap:var(--sp-4)}
.question-block{position:relative;background:var(--surface-container-lowest);
  border:1px solid var(--outline-variant);border-radius:var(--shape-lg);overflow:visible}
.question-block:focus-within{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.qb-head{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  background:var(--surface-container-low);border-bottom:1px solid var(--outline-variant);
  border-radius:var(--shape-lg) var(--shape-lg) 0 0;flex-wrap:wrap}
.qb-num{flex:0 0 auto;display:grid;place-items:center;min-width:28px;height:28px;padding:0 var(--sp-2);
  border-radius:var(--shape-full);background:var(--primary-container);color:var(--on-primary-container);
  font-family:var(--font-data);font-size:var(--label-md);font-weight:var(--weight-semibold)}
.qb-kind{flex:1 1 auto;min-width:0;font-size:var(--body-md);color:var(--muted)}
.qb-tools{flex:0 0 auto;display:flex;gap:var(--sp-1);align-items:center}
.qb-tool{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--shape-full);
  border:1px solid transparent;background:transparent;color:var(--on-surface-variant);cursor:pointer;
  font-size:1rem;line-height:1;transition:background var(--dur-short4) var(--ease-standard)}
.qb-tool:hover{background:color-mix(in srgb,var(--on-surface) 8%,transparent);color:var(--on-surface)}
.qb-tool.is-danger:hover{background:var(--error-container);color:var(--on-error-container)}
.qb-tool:disabled{opacity:.35;cursor:not-allowed;background:transparent}
@media(pointer:coarse){.qb-tool{width:var(--tap);height:var(--tap)}}
.qb-body{padding:var(--sp-5)}
.qb-row{display:grid;grid-template-columns:1fr 260px;gap:var(--sp-4);align-items:start}
.qb-sub{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px dashed var(--outline-variant)}
.qb-sub-lab{font-size:var(--label-lg);font-weight:var(--weight-semibold);color:var(--on-surface);
  margin-bottom:var(--sp-2);display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.option-row{display:flex;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-2)}
.option-row .opt-dot{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:2px solid var(--outline)}
.option-row .form-control{flex:1 1 auto}
/* A builder hint: quiet, but always visible rather than hidden in a tooltip. */
.hint{display:block;margin-top:var(--sp-2);font-size:var(--body-md);color:var(--muted);line-height:1.5}
.hint strong{color:var(--on-surface-variant)}
.qb-sticky{position:sticky;bottom:0;z-index:40;margin-top:var(--sp-5);
  padding:var(--sp-4) var(--sp-5);border-radius:var(--shape-lg) var(--shape-lg) 0 0;
  background:color-mix(in srgb,var(--surface-container-low) 94%,transparent);
  backdrop-filter:blur(12px);border:1px solid var(--outline-variant);border-bottom:0;
  box-shadow:var(--elev-3);display:flex;gap:var(--sp-4);align-items:center;flex-wrap:wrap}
.qb-sticky .qbs-fig{font-family:var(--font-data);font-variant-numeric:tabular-nums;
  font-size:var(--title-lg);font-weight:var(--weight-medium);color:var(--money)}
.qb-sticky .qbs-lab{font-size:var(--body-sm);color:var(--muted);display:block}
.qb-sticky .qbs-spacer{flex:1 1 auto}
@media (prefers-reduced-transparency:reduce){.qb-sticky{background:var(--surface-container-low);backdrop-filter:none}}

/* ==========================================================================
   22. REVEAL ON SCROLL — decorative only; content is in the HTML regardless.
   ========================================================================== */
.will-reveal{opacity:0;transform:translateY(14px)}
.will-reveal.is-in{opacity:1;transform:none;
  transition:opacity var(--dur-long1) var(--ease-emphasized-decel),transform var(--dur-long1) var(--ease-emphasized-decel)}
@media (prefers-reduced-motion:reduce){.will-reveal{opacity:1;transform:none}}

/* Contact rows (About page). Same panel language as everything else;
   the hover motion is a hint, not a performance. */
.contact-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);
  margin-top:var(--sp-2);border:1px solid var(--outline-variant);border-radius:var(--radius);
  color:inherit;text-decoration:none;
  transition:border-color var(--dur-short4) var(--ease-standard),
             background-color var(--dur-short4) var(--ease-standard),
             transform var(--dur-med1) var(--ease-emphasized)}
.contact-row:hover{text-decoration:none;color:inherit;border-color:var(--outline);
  background:color-mix(in srgb,var(--primary) 6%,transparent);transform:translateX(3px)}
.contact-row:hover .contact-ico{background:var(--primary);color:var(--on-primary)}
.contact-ico{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--primary-container);color:var(--on-primary-container);
  transition:background var(--dur-short4) var(--ease-standard),color var(--dur-short4) var(--ease-standard)}
.contact-ico svg{width:18px;height:18px}
.contact-meta{display:flex;flex-direction:column;min-width:0}
.contact-meta strong{font-weight:var(--weight-semibold);color:var(--on-surface);overflow-wrap:anywhere}
.contact-meta span{font-size:var(--body-sm);color:var(--muted)}
@media (prefers-reduced-motion:reduce){
  .contact-row:hover{transform:none}}

/* ==========================================================================
   23. POLISH
   ========================================================================== */
.guide-sec:target>h2,section:target>h2{animation:landed var(--dur-long4) var(--ease-emphasized-decel) both}
@keyframes landed{from{background:var(--primary-container)}to{background:transparent}}
.panel,.card-body,.state__body{overflow-wrap:break-word}
/* A print stylesheet: the legal documents and a survey analysis both get
   printed, and a sticky nav across every page of a paper copy is useless. */
@media print{
  .samchar-nav,.bottom-nav,.skip,.theme-toggle,.ph-r,.filter-row,.guide-nav,.legal-toc,.qb-sticky{display:none!important}
  body{background:#fff;color:#000}
  .panel,.card,.stat,.chart-card{border-color:#999;box-shadow:none;break-inside:avoid}
  a{color:#000;text-decoration:underline}
  .page{padding:0}
}

/* ==========================================================================
   24. RESPONSIVE — M3 window size classes.
      expanded 840-1199 · medium 600-839 · compact <600
   ========================================================================== */
@media(max-width:1024px){
  .legal{grid-template-columns:minmax(0,1fr)}
  .legal-toc{position:static;order:1;max-height:none}
  .legal-body{order:2;padding:var(--sp-6)}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding:var(--sp-6)}
  .user-chip .user-meta{display:none}
  .qb-row{grid-template-columns:1fr}
}
@media(max-width:840px){
  .page-head{align-items:flex-start}
}
@media(max-width:768px){
  /* One-hand bottom navigation for citizens. M3 navigation bar. */
  .bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:300;display:flex;justify-content:space-around;
    gap:2px;background:color-mix(in srgb,var(--surface-container) 92%,transparent);
    backdrop-filter:blur(16px);border-top:1px solid var(--outline-variant);
    padding:var(--sp-2) var(--sp-1) calc(var(--sp-2) + env(safe-area-inset-bottom,0px))}
  .bottom-nav a{flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;min-width:0;min-height:56px;padding:0;color:var(--on-surface-variant);
    font-size:var(--label-md);font-weight:var(--weight-medium);text-decoration:none;
    transition:color var(--dur-short4) var(--ease-standard)}
  .bottom-nav a:hover{text-decoration:none}
  /* The M3 active indicator: a pill behind the icon, not a whole-item colour. */
  .bn-ind{display:grid;place-items:center;width:64px;height:32px;border-radius:var(--shape-full);
    background:transparent;transition:background var(--dur-med1) var(--ease-emphasized)}
  .bottom-nav a.active{color:var(--on-secondary-container)}
  .bottom-nav a.active .bn-ind{background:var(--secondary-container)}
  .bottom-nav svg{width:24px;height:24px}
  .bn-lab{line-height:1.2;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.has-bnav .page{padding-bottom:var(--sp-5)}
  body.has-bnav .site-foot{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}
  .samchar-nav .nav-link{padding:var(--sp-3) var(--sp-4)}
}
@media(max-width:640px){
  .page{padding-top:var(--sp-4)}
  .panel{padding:var(--sp-4)}
  .stat-grid,.stat-grid--3{gap:var(--sp-2)}
  .stat{padding:var(--sp-4)}
  .stat .n{font-size:1.375rem}
  .nav-right{gap:var(--sp-2)}
  .hero{padding:var(--sp-5)}
  .hero .btn{width:100%}
  .hero-cta{flex-direction:column;align-items:stretch}
  .d-flex.justify-content-between{flex-wrap:wrap;gap:var(--sp-2)}
  .table td,.table th{padding:var(--sp-2) var(--sp-2);font-size:var(--body-md)}
  .table .btn-sm{padding:var(--sp-1) var(--sp-2);font-size:var(--body-sm)}
  form.row.g-2>.col,form.row.g-2>.col-auto{flex:1 1 100%;max-width:100%}
  form.row.g-2 .btn{width:100%}
  .flash{padding:var(--sp-3) 40px var(--sp-3) var(--sp-4)}
  .foot-grid{flex-direction:column;gap:var(--sp-5)}
  .foot-links{flex-direction:row;flex-wrap:wrap;gap:var(--sp-4)}
  .srow{flex-wrap:wrap}
  .srow>*{min-width:0}
  .inp-inline{width:100%}
  .srow form.d-inline{display:flex;gap:var(--sp-1);flex-wrap:wrap;align-items:center}
  /* Filter strips scroll sideways rather than stacking into four lines. */
  .filter-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--sp-1);margin-bottom:var(--sp-4);
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filter-row::-webkit-scrollbar{display:none}
  .chip-btn{flex:0 0 auto}
  .filter-sep{min-height:32px}
  .cat-head{margin:var(--sp-5) 0 var(--sp-3)}
  .rc-cost{font-size:var(--title-lg)}
  .rr-head{flex-direction:column;gap:var(--sp-2)}
  .rr-acts{flex-direction:column;gap:var(--sp-3)}
  .rr-side{width:100%;min-width:0}
  .voucher-code{font-size:var(--title-lg)}
  .row-acts{justify-content:flex-start}
  .chart-wrap{gap:var(--sp-4)}
  .legal-body{padding:var(--sp-4)}
  .qb-body{padding:var(--sp-4)}
  .qb-sticky{padding:var(--sp-3) var(--sp-4);gap:var(--sp-3)}
}
@media(max-width:560px){
  /* Page-head actions are nowrap buttons, so two of them push the document
     wider than the viewport at phone widths. Stack them full-width — which
     is also the easier thumb target. */
  .ph-r{width:100%;margin-left:0;flex-direction:column;align-items:stretch}
  .ph-r>*{width:100%}
  .ph-r .btn,.ph-r .chip{width:100%;justify-content:center}
  .seg{width:100%}
  .seg>a,.seg>button{flex:1 1 0;justify-content:center}
}
/* Reduced transparency — frost these solid rather than silently ignoring it. */
@media (prefers-reduced-transparency:reduce){
  .samchar-nav{background:var(--surface);backdrop-filter:none}
  .bottom-nav{background:var(--surface-container);backdrop-filter:none}
  .hero .wallet-panel,.level-card{background:rgba(255,255,255,.24);backdrop-filter:none}
}