/* Shared shell: tokens, sidebar, mobile bar, cards, tables, controls.
   Extracted when the client directory became a second page - one stylesheet
   is the only way two pages stay looking like one product. */

  :root {
    /* Warm ivory and tan, from the reference design. Contrast for every pair
       is measured and recorded in theme.js - do not nudge these by eye. */
    --bg:        #F7F4EE;
    --side:      #F1EDE4;
    --rule:      rgba(42,36,28,.16);
    --card:      #FFFFFF;
    --card-2:    #FAF7F1;
    --line:      #E7E1D6;
    --line-2:    #D9D1C2;
    --ink:       #2A241C;
    --ink-2:     #6B6152;
    /* Was #9A9184. Measured 2.6:1 against the sidebar and 3.0:1 on a glass card
       - well under AA for the 10-12px labels it is used on, and it fails on the
       plain white card too, so this is not something the glass introduced.
       Darkened until every one of its 300-odd uses cleared 4.5:1 against the
       backdrop actually sampled behind it. */
    --ink-3:     #6D6559;
    --accent:      #AE8547;   /* chart marks and fills: 3.4:1 on card */
    --accent-deep: #7E6033;   /* buttons, links, small text: 4.9:1 on card, 4.9:1 on --accent-bg */
    --accent-bg:   #F3EADB;
    --track:     #EAE3D6;
    --down:      #A44E39;   /* negative deltas: 4.9:1 on the tinted tiles they sit in */
    --on-accent: #FFFFFF;
    /* Secondary data hues, chosen to sit with the tan rather than fight it:
       a grey-green and a clay. Same low-chroma register as the brand tone. */
    --sage:      #7A8471;   /* 3.4:1 on card - chart marks, donut second tone */
    --sage-deep: #5E6857;   /* 4.9:1 - small coloured text if ever needed */
    --clay:      #A9714E;
    --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --wordmark: "Fraunces", Georgia, serif;
    /* Layered: a tight contact line plus a wide soft falloff below the tile,
       so cards read as sitting on the page instead of drawn onto it. */
    --shadow: 0 1px 2px rgba(42,36,28,.05), 0 10px 24px -14px rgba(42,36,28,.16), 0 2px 8px rgba(42,36,28,.04);

    /* ---------- glass ----------
       Apple's Liquid Glass, approximated with static layers. There is
       deliberately no SVG/WebGL refraction of the backdrop here: it stutters on
       phones, and this gets read one-handed in a shop. What actually sells the
       material is the edge lighting, and that costs nothing to draw.

       Two tints, and the split matters. Frames - the sidebar, headers, chips,
       controls - are genuinely translucent so the ground reads through them as
       colour. Anything carrying a number sits on --glass-solid, which is close
       enough to opaque to hold its contrast under a bright shop window. Reading
       the figures beats seeing the gradient through them. */
    --glass-frame:  rgba(255,255,255,.56);
    --glass-solid:  rgba(255,255,255,.88);
    --glass-quiet:  rgba(255,255,255,.62);
    --glass-rim:    rgba(255,255,255,.72);
    /* Panels can be edged in white, because their fill already separates them
       from the ground. A control cannot: on a pale card a white rim is
       invisible and the button stops looking pressable. Anything you can press
       gets this instead, and keeps the bright specular ring on top of it. */
    --glass-rim-firm: rgba(42,36,28,.22);
    --glass-blur:   18px;
    --glass-sat:    1.7;
    /* The specular hairline: bright at the top/leading edge, gone by halfway
       down, so a surface reads as catching light rather than being a grey pane. */
    --sheen: linear-gradient(158deg,
      rgba(255,255,255,.98) 0%, rgba(255,255,255,.58) 20%,
      rgba(255,255,255,.08) 48%, rgba(255,255,255,0) 100%);
    --glass-inner: rgba(42,36,28,.17);
    /* Larger radii than before. True continuous-curvature squircles need a
       paint worklet Safari does not ship, so this is the honest approximation. */
    --r-xl: 22px; --r-lg: 17px; --r-md: 13px; --r-sm: 10px; --r-pill: 999px;
    --ease-glass: cubic-bezier(.22,.61,.36,1);
    /* Small text that sits directly on the page gradient rather than on a card.
       --ink-3 measures 2.2:1 against the darkest corner of that gradient, which
       is unreadable; this holds 5.1:1 across the whole ground. */
    --ink-ground: #5E5546;
  }

  /* One rule draws the specular edge on every glass frame in the product. A 1px
     gradient ring, masked to the border box - no filters, nothing recomputed on
     scroll. This selector list IS the definition of "what is glass here"; add a
     frame to it rather than hand-rolling a highlight on the frame itself.

     <select> and <input> are deliberately absent: neither renders a pseudo-
     element. They carry the same tint and inset highlight and simply go without
     the fading ring.

     KEEP IN STEP WITH THE PRINT BLOCK at the foot of this file. This list and
     the kill list down there are the same list written twice - CSS has no way
     to name a selector group once and reuse it. Widening this one without
     widening that one prints every new frame as a grey band with a white
     hairline through it, which is exactly how it went wrong once already. */
  .glass-edge, .card, .mrev, .hchip, .tip, .banner, .sheet,
  button.ctl, .icon-btn, button.ghost, .seg, .toggle,
  .mo, .gp, .pick, .sw-btn, .mini .box { position: relative; }
  .glass-edge::before, .card::before, .mrev::before, .hchip::before, .tip::before,
  .banner::before, .sheet::before, button.ctl::before, .icon-btn::before,
  button.ghost::before, .seg::before, .toggle::before, .mo::before, .gp::before,
  .pick::before, .sw-btn::before, .mini .box::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    padding: 1px; background: var(--sheen); pointer-events: none; z-index: 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
  /* The ring paints over the frame's own background, so anything that draws its
     content as a direct child needs to sit above it. */
  .mrev > *, .hchip > *, .mo > *, .gp > *, .pick > *, .sw-btn > * { position: relative; z-index: 1; }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; }
  /* A still gradient behind everything. Painted on a fixed layer rather than
     background-attachment:fixed, which iOS Safari has never honoured.
     Deliberately strong: the earlier version moved about six points of
     lightness across the whole page and read as a flat wash. The white cards
     are what it is measured against - the further the ground drops, the more
     they lift off it. */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(1200px 620px at 84% -10%, rgba(174,133,71,.30), transparent 62%),
      radial-gradient(1000px 700px at -14% 112%, rgba(108,122,98,.24), transparent 58%),
      linear-gradient(168deg, #FEFCF8 0%, #F7F3EA 38%, #EDE5D6 74%, #E2D7C3 100%);
  }
  .wordmark { font-family: var(--wordmark); font-weight: 600; letter-spacing: .01em; }
  .shell { display: flex; min-height: 100vh; }

  /* ---------- sidebar ---------- */
  aside {
    width: 214px; flex: 0 0 214px;
    /* Translucent rather than the flat --side fill: a solid column would cut a
       hard vertical band out of the gradient down the whole left edge. Now a
       proper glass panel - more blur, a saturation lift so what shows through
       reads as warm colour instead of grey, and a lit leading edge. */
    background: var(--glass-frame);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border-right: 1px solid var(--glass-rim);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 1px 0 0 rgba(255,255,255,.55),
                1px 0 20px -12px rgba(42,36,28,.22);
    display: flex; flex-direction: column;
    padding: 20px 0 14px; position: sticky; top: 0; height: 100vh; z-index: 5;
  }
  /* The sheen runs down the panel's own leading edge rather than round a ring,
     so the column reads as one lit sheet of glass the whole height of the page. */
  aside::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.12) 42%, rgba(255,255,255,0));
  }
  .logo { text-align: center; padding: 2px 0 20px; }
  /* The mark ships with a real alpha channel - the black it was drawn on has
     been removed rather than blended away, so it composites cleanly over
     whichever surface the active theme paints. */
  .logo img { display: block; margin: 0 auto 2px; }
  .logo svg { display: block; margin: 0 auto 10px; }
  .logo .name { font-size: 17px; letter-spacing: 4.5px; font-weight: 400; }
  .logo .wordmark { font-size: 26px; color: var(--ink); padding-top: 6px; }
  .mobbar .wm.wordmark { font-size: 19px; letter-spacing: .01em; text-transform: none; }
  .logo .kicker { font-size: 8.5px; letter-spacing: 2.4px; color: var(--ink-3); margin-top: 5px; }
  nav { padding: 0 12px; flex: 1; overflow-y: auto; }
  nav a {
    display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin-bottom: 2px;
    color: var(--ink-2); text-decoration: none; font-size: 13.5px; border-radius: 8px;
  }
  nav a svg { flex: 0 0 16px; opacity: .8; }
  nav a { border: 1px solid transparent; }
  nav a:hover { background: rgba(255,255,255,.62); border-color: var(--glass-rim); color: var(--ink);
                box-shadow: inset 0 1px 0 rgba(255,255,255,.95); }
  /* The active item is the one lit piece of glass in the column. */
  nav a.on { background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(243,234,219,.86));
             border-color: rgba(255,255,255,.85); color: var(--ink); font-weight: 500;
             box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 4px 12px -8px rgba(42,36,28,.4); }
  nav a .tag { margin-left: auto; font-size: 9px; letter-spacing: .4px; color: var(--ink-3);
               border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; }

  .tip { margin: 14px 14px 12px; background: rgba(255,255,255,.74); backdrop-filter: blur(12px) saturate(var(--glass-sat));
         -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
         border: 1px solid var(--glass-rim); border-radius: var(--r-lg); padding: 14px 15px;
         box-shadow: inset 0 -12px 18px -16px var(--glass-inner); }
  .tip .hd { display: flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: 1.4px;
             color: var(--ink-2); text-transform: uppercase; margin-bottom: 9px; }
  .tip p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
  .tip a { display: inline-block; margin-top: 10px; color: var(--accent-deep); text-decoration: none; font-size: 12.5px; }

  .me { display: flex; align-items: center; gap: 10px; padding: 12px 18px 2px;
        border-top: 1px solid var(--line); margin-top: 4px; }
  .me .av { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-bg);
            color: var(--accent-deep); display: flex; align-items: center; justify-content: center;
            font-size: 11.5px; font-weight: 600; flex: 0 0 32px; }
  .me .nm { font-size: 12.5px; line-height: 1.35; overflow: hidden; }
  .me .nm small { color: var(--ink-3); display: block; font-size: 11px; }

  /* ---------- main ---------- */
  main { flex: 1; padding: 26px 30px 46px; min-width: 0; }
  .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px;
          flex-wrap: wrap; margin-bottom: 22px; }
  h1 { font-family: var(--serif); font-size: 40px; font-weight: 500; margin: 0; letter-spacing: -.4px; }
  .head .sub { color: var(--ink-2); font-size: 13px; margin-top: 7px; }
  .controls { display: flex; gap: 10px; align-items: center; }
  .ctl { background: rgba(255,255,255,.74);
         backdrop-filter: blur(12px) saturate(var(--glass-sat));
         -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
         border: 1px solid var(--glass-rim-firm); border-radius: var(--r-md);
         color: var(--ink); font-size: 13px; font-family: inherit; padding: 10px 13px;
         display: flex; align-items: center; gap: 9px; cursor: pointer;
         box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 8px -5px rgba(42,36,28,.3); }
  .ctl:hover { background: rgba(255,255,255,.88); }
  select.ctl { -webkit-appearance: none; appearance: none; padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236D6559' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; }
  .icon-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.74);
              backdrop-filter: blur(12px) saturate(var(--glass-sat));
              -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
              border: 1px solid var(--glass-rim-firm); display: flex; align-items: center;
              justify-content: center; cursor: pointer;
              box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 8px -5px rgba(42,36,28,.3); }
  .icon-btn:hover { background: rgba(255,255,255,.9); }

  /* Segmented control (Revenue's weekly/monthly). One piece of glass with a
     lit rim; the selected half is filled rather than outlined so it survives
     being glanced at. Was page-local on Revenue. */
  .seg { display: inline-flex; border: 1px solid var(--glass-rim-firm); border-radius: var(--r-md);
         overflow: hidden; background: rgba(255,255,255,.6);
         backdrop-filter: blur(12px) saturate(var(--glass-sat));
         -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
         box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 8px -5px rgba(42,36,28,.3); }
  .seg button { border: 0; background: transparent; padding: 8px 16px; font: inherit; font-size: 12.5px;
                color: var(--ink-2); cursor: pointer; position: relative; z-index: 1; }
  .seg button.on { background: var(--accent-deep); color: var(--on-accent); }

  /* Month picker (Reports). Was page-local; same frame treatment as everything
     else that can be pressed. */
  .mlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
  .mo { text-align: left; border: 1px solid var(--glass-rim-firm); border-radius: var(--r-lg);
        background: rgba(255,255,255,.62);
        backdrop-filter: blur(12px) saturate(var(--glass-sat));
        -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
        padding: 15px 17px; cursor: pointer; font: inherit; color: var(--ink);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 2px 8px -6px rgba(42,36,28,.28); }
  .mo:hover { background: rgba(255,255,255,.85); }
  .mo.on { border-color: var(--accent-deep); box-shadow: inset 0 0 0 1px var(--accent-deep); }
  .mo .m { font-family: var(--serif); font-size: 19px; font-weight: 500; position: relative; z-index: 1; }
  .mo .s { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; position: relative; z-index: 1; }

  .grid { display: grid; gap: 14px; margin-bottom: 14px; }
  .g5 { grid-template-columns: repeat(5, 1fr); }
  .g3 { grid-template-columns: repeat(3, 1fr); }
  .g21 { grid-template-columns: 2fr 1fr; }
  @media (max-width: 1280px) { .g5 { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 1080px) { .g21, .g3 { grid-template-columns: 1fr; } }
  /* ---------- phone ---------- */
  .mobbar { display: none; }
  @media (max-width: 860px) {
    aside { display: none; }
    main { padding: 0 14px 40px; }

    /* The sidebar carried the logo and the whole nav. Hiding it left the phone
       with no branding and no way to jump around a 4,500px page, so both come
       back as a sticky header with a scrollable tab strip. */
    .mobbar { display: block; position: sticky; top: 0; z-index: 20; margin: 0 -14px 14px;
              background: var(--glass-frame);
              backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
              -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
              border-bottom: 1px solid var(--glass-rim);
              box-shadow: inset 0 1px 0 rgba(255,255,255,.92),
                          0 8px 20px -14px rgba(42,36,28,.28); }
    .mobbar .top { display: flex; align-items: center; gap: 10px; padding: 10px 14px 8px; }
    .mobbar .top img { width: 30px; height: 30px; }
    .mobbar .wm { font-size: 14px; letter-spacing: 3px; }
    .mobbar .who { margin-left: auto; width: 32px; height: 32px; border-radius: 50%;
                   background: var(--accent-bg); color: var(--accent-deep); font-size: 11px;
                   font-weight: 600; display: flex; align-items: center; justify-content: center; }
    .mobbar nav { display: flex; gap: 6px; overflow-x: auto; padding: 0 14px 9px;
                  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .mobbar nav::-webkit-scrollbar { display: none; }
    .mobbar nav a { padding: 8px 13px; border-radius: 999px; background: rgba(255,255,255,.72);
                    backdrop-filter: blur(10px) saturate(var(--glass-sat));
                    -webkit-backdrop-filter: blur(10px) saturate(var(--glass-sat));
                    border: 1px solid var(--glass-rim); font-size: 13px; white-space: nowrap;
                    color: var(--ink-2); text-decoration: none; margin: 0;
                    box-shadow: inset 0 1px 0 rgba(255,255,255,.95); }
    .mobbar nav a.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-deep); font-weight: 500; }
    .mobbar nav a svg, .mobbar nav a .tag { display: none; }

    h1 { font-size: 26px; }
    .head { margin-bottom: 16px; gap: 12px; }
    .controls { width: 100%; }
    .controls .ctl:first-child { flex: 1; min-width: 0; }
    .controls .ctl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* 44px is the smallest reliable touch target. */
    .ctl, select.ctl, button.ghost, .sw-btn { min-height: 44px; }
    .icon-btn { width: 44px; height: 44px; }
    .mobbar nav a { min-height: 40px; display: flex; align-items: center; }
    /* Tapping a chip must not park the section under the sticky header. */
    html { scroll-padding-top: 104px; }
    section, #health-sec, #overview { scroll-margin-top: 104px; }

    .g5 { grid-template-columns: repeat(2, 1fr); }
    /* Five tiles in a two-column grid orphans the last one; let it span. */
    .g5 > :last-child { grid-column: 1 / -1; }
    .kpi .value { font-size: 28px; }
    .kpi .label { font-size: 10px; }

    .card { padding: 16px 15px; }
    section { margin-top: 22px; }
    .quote .q { font-size: 23px; }
  }
  /* Small tablets and big phones in landscape have room for three. */
  @media (min-width: 600px) and (max-width: 860px) {
    .g5 { grid-template-columns: repeat(3, 1fr); }
    .g5 > :last-child { grid-column: auto; }
  }
  /* Two tiles a row still reads fine at 390px; only go single-column on the
     genuinely tiny screens, otherwise the page doubles in length for nothing. */
  @media (max-width: 359px) {
    .g5 { grid-template-columns: 1fr; }
    .g5 > :last-child { grid-column: auto; }
  }

  /* Every block in the main column sits on one 14px rhythm. The health card's
     child is a bare .card rather than a .grid, so it needs the gap itself -
     without it the score butted straight up against the tiles below. */
  #health-sec { margin-bottom: 14px; }
  #overview { margin-bottom: 14px; }
  #overview .grid { margin-bottom: 8px; }

  /* Translucent, so the ground reads through the cards instead of stopping at
     their edges. A page of opaque white rectangles makes any background look
     flat no matter how strong it is - the gradient was never the problem. */
  /* Glass, but weighted toward legibility: .88 white over the gradient rather
     than the .66 this started at. The ground still reads through at the edges
     and in the tint; the numbers no longer sit on a wash. */
  .card { position: relative;
          background: var(--glass-solid);
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
          -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
          border: 1px solid var(--glass-rim); border-radius: var(--r-xl);
          padding: 21px 22px;
          box-shadow: var(--shadow), inset 0 -16px 24px -18px var(--glass-inner); }

  /* Not every card is equally important. Identical radius, border, padding and
     weight on all of them is the single biggest reason a layout reads as
     templated - the eye is given nowhere to land first. `.lift` is the hero of
     a screen, `.quiet` is supporting material. */
  .card.lift { background: rgba(255,255,255,.93);
               box-shadow: 0 2px 4px rgba(42,36,28,.06), 0 26px 54px -22px rgba(42,36,28,.32),
                           0 4px 14px rgba(42,36,28,.05),
                           inset 0 -18px 26px -20px var(--glass-inner); }
  /* Supporting material. Raised from .34 - at that opacity the gradient behind
     it was showing through text, which is the one thing glass must not do. */
  .card.quiet { background: var(--glass-quiet); box-shadow: none;
                border-color: rgba(255,255,255,.58); }
  /* ---------- the unboxed stat row ----------
     Lives here, not in a page's <style>, because it had already been written
     twice - Revenue drew it with hairline rules and a hero figure, Reports drew
     it as a five-column grid, and they were drifting apart under the same class
     name. One definition, two modifiers.

     No boxes on purpose. A row of identical bordered cards is the most
     templated shape on the web and gives the eye nowhere to land first; rules
     and space separate these perfectly well. These figures sit directly on the
     page gradient, so their small text uses --ink-ground rather than --ink-3,
     which does not hold up against the dark corner of that gradient. */
  .fig { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0;
         margin: 4px 0 26px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .fig > div { padding: 20px 26px 20px 26px; border-left: 1px solid var(--rule); }
  .fig > div:first-child { border-left: 0; padding-left: 0; }
  .fig .k { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-ground); }
  .fig .v { font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1;
            margin: 12px 0 7px; letter-spacing: -.5px; color: var(--ink); }
  .fig .d { font-size: 11.5px; color: var(--ink-ground); }
  .fig .up { color: var(--accent-deep); font-weight: 600; }
  .fig .dn { color: var(--down); font-weight: 600; }
  /* Revenue: the first figure is the headline and is sized like one. */
  .fig-lead { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .fig-lead > div:first-child .v { font-size: 54px; letter-spacing: -1.2px; }
  @media (max-width: 900px) { .fig-lead { grid-template-columns: 1fr 1fr; } }
  /* Reports, Overview, Clients: equal columns, no headline. */
  .fig-even { grid-template-columns: repeat(var(--fig-n, 5), 1fr); }
  @media (max-width: 1180px) { .fig-even { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 620px)  { .fig-even { grid-template-columns: repeat(2, 1fr); } }
  /* Wrapped rows need their own divider or the second line floats free. */
  @media (max-width: 1180px) { .fig > div { border-top: 1px solid var(--rule); }
                               .fig > div:nth-child(-n+3) { border-top: 0; } }
  @media (max-width: 900px)  { .fig-lead > div:nth-child(3) { border-left: 0; } }
  @media (max-width: 620px)  { .fig > div:nth-child(3) { border-top: 1px solid var(--rule); }
                               .fig > div:nth-child(odd) { border-left: 0; padding-left: 0; } }
  @media (max-width: 620px)  { .fig > div { padding: 16px 14px; }
                               .fig .v { font-size: 27px; }
                               .fig-lead > div:first-child .v { font-size: 38px; } }

  .card h3 { font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase;
             color: var(--ink-2); margin: 0 0 16px; }
  .card .h-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
  .card .h-row h3 { margin: 0; }

  /* KPI */
  .kpi .top { display: flex; justify-content: space-between; align-items: flex-start; }
  .kpi .label { font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-2); }
  .kpi .badge { width: 36px; height: 36px; border-radius: 50%; background: var(--card-2);
                display: flex; align-items: center; justify-content: center; flex: 0 0 36px; }
  .kpi .value { font-family: var(--serif); font-size: 38px; font-weight: 500; margin: 13px 0 9px; line-height: 1; letter-spacing: -.5px; }
  .kpi .chg { font-size: 12.5px; color: var(--accent-deep); display: flex; align-items: center; gap: 4px; }
  .kpi .chg.dn { color: var(--down); }
  .kpi .chg.flat { color: var(--ink-3); }
  .kpi .vs { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }

  /* charts */
  .chart-wrap { position: relative; }
  svg text { font-size: 10.5px; fill: var(--ink-3); font-family: var(--sans); }
  .gl { stroke: var(--line); stroke-width: 1; }
  .tip-pop { position: absolute; pointer-events: none; opacity: 0; transition: opacity .09s;
             background: var(--ink); color: #FFF; border: 1px solid var(--ink); border-radius: 8px; padding: 8px 11px;
             font-size: 12px; white-space: nowrap; z-index: 9; box-shadow: 0 6px 20px rgba(42,36,28,.18); }
  .tip-pop b { font-family: var(--serif); font-size: 15px; font-weight: 400; }
  .hit { fill: transparent; cursor: pointer; }

  /* lists + tables */
  table { width: 100%; border-collapse: collapse; }
  th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 1px;
       text-transform: uppercase; color: var(--ink-3); padding: 0 0 11px; }
  td { padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
  td.r { text-align: right; }
  td.num { text-align: right; font-family: var(--serif); font-size: 15px; }
  .muted { color: var(--ink-2); }
  .dim { color: var(--ink-3); }

  .legend { display: flex; flex-direction: column; gap: 12px; justify-content: center; }
  .legend .row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
  .legend .sw { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 10px; }
  .legend .nm { color: var(--ink-2); }
  .legend .pc { margin-left: auto; color: var(--ink); }
  .legend .vl { width: 46px; text-align: right; color: var(--ink); }

  .goal { margin-bottom: 17px; }
  .goal .top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 9px; }
  .goal .top .amt { color: var(--ink); }
  .bar { height: 7px; background: var(--card-2); border-radius: 4px; overflow: hidden; }
  .bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
  .goal .foot { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); margin-top: 7px; }
  .mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
  /* Nested inside an already-glass card, so this is a lighter touch - a tint
     and an edge, no second blur. Stacking backdrop-filters buys nothing
     visually and costs a compositor layer per box. */
  .mini .box { background: rgba(255,255,255,.5); border: 1px solid var(--glass-rim);
               border-radius: var(--r-md); padding: 13px 13px 14px;
               box-shadow: inset 0 -10px 14px -14px var(--glass-inner); }
  .mini .lbl { font-size: 10.5px; color: var(--ink-2); display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
  .mini .v { font-family: var(--serif); font-size: 22px; margin-bottom: 10px; }
  .mini .p { font-size: 11px; color: var(--ink-3); margin-top: 6px; }

  ul.act { list-style: none; margin: 0; padding: 0; }
  ul.act li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
  ul.act li:first-child { border-top: none; }
  ul.act .ico { width: 28px; height: 28px; border-radius: 8px; background: var(--card-2);
                display: flex; align-items: center; justify-content: center; flex: 0 0 28px; }
  ul.act .when { margin-left: auto; color: var(--ink-3); font-size: 12px; white-space: nowrap; }

  .quote { background: linear-gradient(150deg, rgba(255,255,255,.72) 0%, rgba(243,234,219,.86) 100%);
           backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
           -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
           border: 1px solid var(--glass-rim); border-radius: var(--r-xl); padding: 26px 26px 24px;
           box-shadow: var(--shadow), inset 0 -16px 24px -18px var(--glass-inner);
           display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
  .quote .q { font-family: var(--serif); font-size: 27px; line-height: 1.22; letter-spacing: -.3px; }
  /* --accent is sized for chart marks (3:1 as a graphic). As words it fails,
     so every textual use points at --accent-deep instead. */
  .quote .q em { font-style: italic; color: var(--accent-deep); display: block; }
  .quote .rule { width: 34px; height: 1px; background: var(--line-2); margin: 18px 0 13px; }
  .quote .k { font-size: 9.5px; letter-spacing: 1.7px; color: var(--ink-3); line-height: 1.7; text-transform: uppercase; }

  .empty { color: var(--ink-3); font-size: 12.5px; line-height: 1.6; padding: 8px 0 4px; }
  .note { color: var(--ink-3); font-size: 11.5px; line-height: 1.55; margin-top: 13px; }
  .chip { font-size: 10.5px; border-radius: 5px; padding: 2px 7px; border: 1px solid; white-space: nowrap; }
  .chip.risk { color: var(--down); border-color: #EBD3CC; background: #FBF2EF; }
  .chip.due  { color: var(--accent-deep); border-color: var(--line-2); background: var(--accent-bg); }

  /* ---------- health strip ---------- */
  .health { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
  .health .dial { flex: 0 0 132px; position: relative; }
  .health .dial .mid { position: absolute; inset: 0; display: flex; flex-direction: column;
                       align-items: center; justify-content: center; }
  .health .dial .n { font-family: var(--serif); font-size: 34px; line-height: 1; }
  .health .dial .n small { font-size: 14px; color: var(--ink-3); }
  .health .dial .b { font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase;
                     color: var(--accent-deep); margin-top: 5px; }
  .health .cols { flex: 1; min-width: 300px; display: grid; gap: 11px; }
  .health .c { display: grid; grid-template-columns: 132px 1fr 116px; gap: 12px; align-items: center; }
  .health .c .lb { font-size: 12.5px; color: var(--ink-2); }
  .health .c .lb em { font-style: normal; color: var(--ink-3); font-size: 10px; display: block; }
  .health .c .vl { text-align: right; line-height: 1.35; }
  .health .c .vl b { font-weight: 500; font-size: 13px; }
  .health .c .vl s { text-decoration: none; color: var(--ink-3); font-size: 10.5px; display: block; }
  @media (max-width: 620px) {
    .health .c { grid-template-columns: 1fr auto; grid-template-areas: "lb vl" "bar bar"; row-gap: 6px; }
    .health .c .lb { grid-area: lb; } .health .c .vl { grid-area: vl; } .health .c .bar { grid-area: bar; }
  }
  .health .lead { flex-basis: 100%; font-size: 13px; color: var(--ink-2); line-height: 1.6; }

  /* ---------- onboarding ---------- */
  .veil { position: fixed; inset: 0; background: rgba(5,6,9,.82); z-index: 60;
          display: flex; align-items: center; justify-content: center; padding: 20px; }
  .sheet { background: rgba(255,255,255,.94);
           backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
           -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
           border: 1px solid var(--glass-rim); border-radius: var(--r-xl);
           padding: 30px 30px 26px; width: 100%; max-width: 440px;
           box-shadow: 0 30px 60px -24px rgba(42,36,28,.5),
                       inset 0 -18px 26px -20px var(--glass-inner); }
  .sheet h2 { font-family: var(--serif); font-size: 25px; font-weight: 400; margin: 0 0 6px; }
  .sheet p.k { color: var(--ink-2); font-size: 13.5px; margin: 0 0 24px; line-height: 1.55; }
  .sheet .qlab { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
                 color: var(--ink-3); margin-bottom: 11px; }
  .picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
  .pick { background: rgba(255,255,255,.55); border: 1px solid var(--glass-rim-firm);
          border-radius: var(--r-lg); padding: 20px 12px 16px; text-align: center;
          cursor: pointer; color: var(--ink-2);
          box-shadow: inset 0 -12px 16px -16px var(--glass-inner); }
  .pick:hover { border-color: var(--line-2); }
  .pick.on { border-color: var(--accent); background: var(--accent-bg); color: var(--ink); }
  .pick svg { display: block; margin: 0 auto 10px; }
  .pick .t { font-size: 14px; }

  /* iOS-style picker: scroll-snap column with a fixed selection band */
  .wheel { position: relative; height: 160px; overflow: hidden; margin-bottom: 8px;
           -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
           mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent); }
  .wheel .band { position: absolute; left: 0; right: 0; top: 60px; height: 40px;
                 border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
                 pointer-events: none; background: rgba(255,255,255,.02); }
  .wheel .scroll { height: 100%; overflow-y: scroll; scroll-snap-type: y mandatory;
                   scrollbar-width: none; padding: 60px 0; }
  .wheel .scroll::-webkit-scrollbar { display: none; }
  .wheel .it { height: 40px; line-height: 40px; text-align: center; scroll-snap-align: center;
               font-size: 17px; color: var(--ink-3); transition: color .12s, font-size .12s; }
  .wheel .it.sel { color: var(--ink); font-size: 21px; font-family: var(--serif); }
  .sheet .go { width: 100%; padding: 13px; border-radius: 10px; border: none; cursor: pointer;
               background: var(--accent); color: var(--on-accent, #0A0F18); font-size: 14.5px; font-weight: 600;
               font-family: inherit; margin-top: 14px; }
  .sheet .go:disabled { background: var(--card-2); color: var(--ink-3); cursor: default; }
  .veil { background: rgba(42,36,28,.42); }

  /* ---------- goals ---------- */
  .goalpick { display: grid; gap: 10px; }
  .gp { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.5);
        border: 1px solid var(--glass-rim-firm); border-radius: var(--r-lg); padding: 14px 15px; cursor: pointer;
        box-shadow: inset 0 -10px 14px -14px var(--glass-inner); }
  .gp:hover { border-color: var(--line-2); }
  .gp.on { border-color: var(--accent); }
  .gp .ic { width: 30px; height: 30px; border-radius: 9px; background: var(--card);
            display: flex; align-items: center; justify-content: center; flex: 0 0 30px; }
  .gp .tx { font-size: 13px; }
  .gp .tx small { display: block; color: var(--ink-3); font-size: 11.5px; margin-top: 3px; }
  .gp .pill { margin-left: auto; font-size: 10.5px; color: var(--accent-deep); border: 1px solid var(--line-2);
              border-radius: 5px; padding: 2px 8px; white-space: nowrap; }

  /* ---------- theme swatches ---------- */
  .themes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
  .sw-btn { display: flex; align-items: center; gap: 9px; background: rgba(255,255,255,.6);
            border: 1px solid var(--glass-rim-firm); border-radius: var(--r-md); padding: 10px 14px;
            cursor: pointer; color: var(--ink-2); font-size: 13px; font-family: inherit;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
  .sw-btn:hover { border-color: var(--line-2); }
  .sw-btn.on { border-color: var(--accent); color: var(--ink); }
  .sw-btn i { width: 14px; height: 14px; border-radius: 50%; display: block; }

  .banner { background: rgba(255,255,255,.66); backdrop-filter: blur(12px) saturate(var(--glass-sat));
         -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
            border: 1px solid var(--glass-rim); color: var(--ink-2); border-radius: var(--r-lg);
            padding: 14px 17px; font-size: 13px; line-height: 1.6; margin-bottom: 14px;
            box-shadow: inset 0 -12px 18px -16px var(--glass-inner); }
  /* Was rgba(0,0,0,.35), a near-black chip left over from the dark mock - it
     rendered as a black bar through a line of body copy on this ground. */
  .banner code { background: rgba(42,36,28,.08); border: 1px solid var(--glass-rim);
                 padding: 1px 6px; border-radius: 4px; font-size: 12px; }

  #boot, #out { padding: 70px 34px; color: var(--ink-2); }
  a.plain { color: var(--accent-deep); }
  button.ghost { background: rgba(255,255,255,.62); border: 1px solid var(--glass-rim-firm);
                 color: var(--accent-deep); padding: 10px 15px; border-radius: var(--r-md);
                 font-size: 13px; cursor: pointer; font-family: inherit;
                 backdrop-filter: blur(10px) saturate(var(--glass-sat));
                 -webkit-backdrop-filter: blur(10px) saturate(var(--glass-sat));
                 box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 2px 8px -6px rgba(42,36,28,.3); }
  button.ghost:hover { background: rgba(255,255,255,.82); }
  button.ghost:disabled { color: var(--ink-3); cursor: default; }

/* ---------- header strip: revenue for the period, and the health chip ---------- */
.topline { display: flex; align-items: stretch; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.mrev { background: var(--glass-solid);
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
        border: 1px solid var(--glass-rim); border-radius: var(--r-xl);
        box-shadow: var(--shadow), inset 0 -16px 24px -18px var(--glass-inner);
        padding: 18px 22px; flex: 1; min-width: 220px; }
.mrev .k { font-size: 10.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink-2); }
.mrev .v { font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1; margin: 10px 0 6px; }
.mrev .d { font-size: 12px; color: var(--ink-3); }
.mrev .up { color: var(--accent-deep); font-weight: 600; }
.mrev .dn { color: var(--down); font-weight: 600; }

/* Weekly capacity sits beside revenue and uses the same tile shell. */
.mrev.cap .v { margin-bottom: 8px; }
.capbar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; margin: 0 0 8px; }
.capbar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.capbar i.over { background: var(--down); }
.linkish { background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
           color: var(--accent-deep); font-weight: 600; text-decoration: underline; }

/* ---------- calendar connection panel ---------- */
.conn .cstate { display: flex; align-items: center; gap: 9px; font-size: 15px; margin-bottom: 4px; }
.conn .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.conn .dot.on { background: var(--accent-deep); }
.conn .dot.paused { background: var(--ink-3); }
.conn .dot.off { background: var(--down); }
.conn p.muted { margin: 0; }
.conn .crow { display: flex; align-items: center; gap: 11px; margin-top: 12px; font-size: 13.5px; color: var(--ink-2); }
.conn .crow b { color: var(--ink); font-weight: 600; }
.conn .dnote { color: var(--down); }

/* The switch reads as off/on by position and by fill, not colour alone. */
.toggle { width: 46px; height: 27px; flex: 0 0 46px; border-radius: var(--r-pill); border: 1px solid var(--glass-rim-firm);
      background: rgba(234,227,214,.75); backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 0; cursor: pointer; position: relative;
      box-shadow: inset 0 1px 3px rgba(42,36,28,.18);
      transition: background .2s var(--ease-glass), border-color .2s; }
.toggle i { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%;
        background: linear-gradient(160deg, #FFF, #F4EFE6);
        box-shadow: 0 1px 3px rgba(42,36,28,.3), inset 0 1px 0 rgba(255,255,255,1);
        transition: left .22s var(--ease-glass); }
.toggle.on { background: var(--accent-deep); border-color: var(--accent-deep); }
.toggle.on i { left: 22px; }
.toggle:disabled { opacity: .55; cursor: default; }

/* Collapsed by default; the full breakdown lives in a panel underneath. */
/* Pressable, so it takes the firm rim rather than the panel's white one. */
.hchip { display: flex; align-items: center; gap: 13px; cursor: pointer; text-align: left;
         background: var(--glass-solid);
         backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
         -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
         border: 1px solid var(--glass-rim-firm); border-radius: var(--r-xl);
         box-shadow: var(--shadow), inset 0 -16px 24px -18px var(--glass-inner);
         padding: 16px 20px; font-family: inherit; color: var(--ink); }
.hchip:hover { background: rgba(255,255,255,.95); }
.hchip .ring { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--accent) calc(var(--pc) * 1%), var(--track) 0); position: relative; }
/* The dial's centre punches a hole back to the tile behind it, so it has to be
   the tile's own fill - flat white would show as a disc on glass. */
.hchip .ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%;
                      background: var(--glass-solid); }
.hchip .ring b { position: relative; z-index: 1; font-family: var(--serif); font-size: 19px; font-weight: 500; }
.hchip .lbl { display: flex; flex-direction: column; gap: 3px; }
.hchip .lbl .t { font-size: 10.5px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink-2); }
.hchip .lbl .b { font-size: 14px; font-weight: 500; color: var(--accent-deep); }
.hchip .cv { color: var(--ink-3); transition: transform .16s; display: flex; }
.hchip.open .cv { transform: rotate(180deg); }
@media (max-width: 620px) { .hchip { width: 100%; } }

.tallyrow { display: flex; gap: 9px; margin-top: 13px; }
.tallyrow .ghost { min-width: 46px; }

/* ---------- client-type ratio guidance ---------- */
:root { --accent-soft: #DCC9A4; }
.ratio { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 15px; }
.ratio .scale { position: relative; height: 7px; border-radius: 4px; background: var(--track); overflow: visible; }
/* The band marks the 75-85% window, so the pin has something to be read against. */
.ratio .band { position: absolute; left: 75%; width: 10%; top: 0; bottom: 0; background: var(--accent); border-radius: 2px; }
.ratio .pin { position: absolute; top: -4px; width: 3px; height: 15px; border-radius: 2px;
              background: var(--ink); transform: translateX(-50%); }
.ratio .lg { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-3); margin-top: 7px; }
.ratio .lg .mid { color: var(--accent-deep); font-weight: 600; }
.ratio p { font-size: 12px; line-height: 1.6; color: var(--ink-2); margin: 11px 0 0; }
.ratio p b { color: var(--ink); font-weight: 600; }

/* ---------- even row heights, with activity scrolling inside ---------- */
/* Recent Activity used to stretch the whole row as entries piled up. Fixing
   the row height and scrolling the list keeps this row matching the one above. */
/* Both rows share one height so the grid reads as a grid. Driven by the chart
   row, which is the taller of the two and sets the rhythm. */
:root { --rowh: 384px; }
#revenue .g21 > *, .evenrow > * { min-height: var(--rowh); display: flex; flex-direction: column; }
.evenrow .scrolllist { flex: 1 1 0; min-height: 0; overflow-y: auto; margin-right: -6px; padding-right: 6px; }
.evenrow .scrolllist::-webkit-scrollbar { width: 6px; }
.evenrow .scrolllist::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.evenrow .scrolllist::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 1080px) {
  #revenue .g21 > *, .evenrow > * { min-height: 0; }
  .evenrow .scrolllist { max-height: 280px; }
}

  /* The coach's written read. Same treatment wherever it appears - an accent
     rule on the left rather than another box, so it reads as commentary on the
     panel it sits in rather than a separate card.

     Revenue used to carry its own near-identical copy of this under a
     different class name, which is how the three pages drifted apart the last
     time. One definition; every panel points at it. */
  .coachread { border-left: 3px solid var(--accent-deep); padding-left: 14px;
               margin: 16px 0 4px; grid-column: 1 / -1; }
  .coachread p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; color: var(--ink); }
  .coachread p:last-child { margin-bottom: 0; }
  /* The header above a coach panel: what it is on the left, whose voice it is
     on the right, so the reading is never mistaken for a stored figure. */
  .coachhd { display: flex; align-items: baseline; justify-content: space-between;
             gap: 12px; margin-bottom: 12px; }
  .coachhd h3 { margin: 0; }
  .coachhd .src { font-size: 11px; color: var(--ink-3); white-space: nowrap; }

/* ---------- motion ----------
   Restrained on purpose. Glass earns its depth by responding to touch, but this
   is a page of numbers read in a hurry, not a showcase - so only things that
   are actually pressable move, and only by a pixel. Data cards stay put. */
@media (prefers-reduced-motion: no-preference) {
  .ctl, .icon-btn, button.ghost, .hchip, .mo, .gp, .pick, .sw-btn,
  nav a, .mobbar nav a, .seg button {
    transition: transform .2s var(--ease-glass), background-color .2s var(--ease-glass),
                border-color .2s, box-shadow .2s var(--ease-glass);
  }
  .ctl:hover, .icon-btn:hover, button.ghost:hover, .hchip:hover, .sw-btn:hover { transform: translateY(-1px); }
  /* Press: settle back down and compress very slightly, the way a physical key
     does. Bigger than this and it reads as a bug rather than a response. */
  .ctl:active, .icon-btn:active, button.ghost:active, .hchip:active,
  .mo:active, .gp:active, .pick:active, .sw-btn:active,
  nav a:active, .mobbar nav a:active { transform: translateY(0) scale(.985); }
}
/* Anyone who has asked the OS to calm things down gets no movement at all -
   the glass stays, the motion goes. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Blur is the expensive part of this, and the page gets read one-handed in a
   shop. Ease off on phones: the tint and the edge lighting carry the look on
   their own, and neither costs a repaint. */
@media (max-width: 860px) {
  :root { --glass-blur: 11px; }
}

/* A monthly report has to come out of a printer clean. Glass is a screen
   material - translucency and blur print as muddy grey - so it all comes off. */
@media print {
  body::before { display: none; }
  /* KEEP IN STEP WITH THE RING at the top of this file: same selector list. */
  .glass-edge::before, .card::before, .mrev::before, .hchip::before, .tip::before,
  .banner::before, .sheet::before, button.ctl::before, .icon-btn::before,
  button.ghost::before, .seg::before, .toggle::before, .mo::before, .gp::before,
  .pick::before, .sw-btn::before, .mini .box::before, aside::after { display: none !important; }
  .card, .card.lift, .card.quiet {
    background: #FFF !important; backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important; border: 1px solid #DDD6C8 !important;
  }
  .mrev, .hchip, .tip, .banner, .quote, .mini .box, .mo, .gp, .pick, .sw-btn, .seg {
    background: #FFF !important; backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important; border: 1px solid #DDD6C8 !important;
  }
  .fig .k, .fig .d { color: #4A4238 !important; }
}