/** Shopify CDN: Minification failed

Line 385:26 Unexpected ";"

**/
/*
  FILE:        28-pui-shell.css
  PROJECT:     MetaScore / BioScore — Practitioner UI
  VERSION:     3.26.0
  LAST UPDATED: 2026-06-13
  CHANGELOG:   3.26.0 — T101 DARK MODE ZONE COLOUR FIX. zone-green (Watch)
               tokens corrected to pink (#F9A8D4) to match T101 intent.
               zone-purple (Optimal) tokens corrected to green (#4ADE80 /
               rgba(61,158,82,...)) to match T101 intent. The light mode
               file (28-pui-shell-light.css) was updated in T101 but dark
               mode was missed. Mirrors 30-cui-shell.css dark mode tokens.
               No class names changed. No clinical logic.
  CHANGELOG:   3.25.0 — ENROLMENT FLOW CSS. Three new classes:
               .enrol-progress (6-dot progress row), .enrol-dot
               (.active and .done states), .enrol-scroll
               (constrained agreement scroll area on Card 4),
               .enrol-stamp (DM Mono date/time stamp on Card 5).
               All sizes use var(--pui-ts-*) — scale with
               pui-text-md and pui-text-lg automatically.
               Spec ref: PUI Practitioner Enrolment v1.2.0.
  CHANGELOG:   3.24.0 — CLINICAL SAFETY FIX. Removed blanket
               white-space:nowrap on .btn-primary and .btn-secondary
               in pui-text-md and pui-text-lg. The rule was added
               as orphan prevention but was truncating the
               safeguarding Session Blocked acknowledgement button
               ("I understand — session cancelled, client advised
               to seek medical advice") for every practitioner on
               the default text-md scale. Clinical acknowledgement
               text must be fully readable. Buttons now wrap
               naturally. No effect on single-line buttons which
               fit regardless.
               3.23.1 — pui-hero-gauge gap increased from 8px to
               16px. The MetaScore ring extends 3px beyond its
               110px box (result-orb-ring inset:-3px) and the MA
               ring extends the same via viewBox expansion, so
               the effective clearance between the gauge label
               and the ring top edge was only 5px. Felt cramped
               on both rings. Now 13px clear.
  CHANGELOG:   3.23.0 — Favourite star CSS added. Classes
               pui-avatar-col and pui-fav-star were used in the
               client list render but no CSS existed, so the star
               fell to default browser styles — tiny, left-aligned.
               Now centred under the avatar, 18px, gold when on
               and dim when off.
  CHANGELOG:   3.22.0 — Dual-ring hero gauge classes. Mirrors the
               CUI cui-ma-dual / cui-ma-gauge pattern from
               30-cui-ma-engine.js. Two equal gauges side by side,
               each with a label, a ring, and a sublabel. Used for
               MetaScore + Metabolic Age on the PUI client hero.
               Classes: pui-hero-dual, pui-hero-gauge,
               pui-hero-gauge-head, pui-hero-gauge-label,
               pui-hero-gauge-sub, pui-hero-ring-box, pui-ma-svg,
               pui-ma-ring-center, pui-ma-hero, pui-ma-hero-sub.
               Static labels use the design-spec bold weight with
               variable values lighter. DM Mono used for numbers.
  CHANGELOG:   3.20.0 — Added missing styles for the three PUI trend
               cards (Health Drift spectrum, Time in Zone stacked bar,
               Habits vs MetaScore chart). Render functions and HTML
               were already in 28-pui-app.js and the liquid template,
               but no CSS existed for pui-trend-card, pui-spectrum-bar,
               pui-spectrum-seg, pui-spectrum-marker, pui-tiz-bar,
               pui-tiz-seg, pui-tiz-legend, pui-tiz-item, pui-tiz-dot,
               pui-trend-header, pui-trend-label, pui-trend-info,
               pui-hvm-chart, pui-hvm-day, pui-hvm-bar-am, pui-hvm-bar-pm,
               pui-hvm-dot, pui-hvm-legend. Cards were rendering into
               empty divs with no dimensions so collapsed to invisible.
               Styling matches the CUI equivalent so practitioner sees
               the same visualisation the client does on BaseLine.
  CHANGELOG:   3.12.0 — Version bump. No dark mode changes.
  CHANGELOG:   3.11.0 — Nav bar: height extends into safe area zone.
               align-items:flex-start + padding-top:14px keeps icons
               elegantly centred in the 82px visible band on all iPhones.
  CHANGELOG:   3.10.0 — legend-desc scale rules added.
  CHANGELOG:   3.9.0 — Mobile PWA: html+body background set to
               var(--surface) so status bar area matches device-frame.
  CHANGELOG:   3.8.0 — Complete CSS class scale rules. Every named class
               that has font-size now has a pui-text-md and pui-text-lg
               rule. No CSS-classed text left unscaled.
  CHANGELOG:   3.7.0 — Scale factors increased: Medium=1.38x Large=1.62x. Difference now clearly visible.
  CHANGELOG:   3.4.0 — Mobile PWA support: @media (max-width:430px) makes
               device-frame full-screen on real phones. --vvh / 100dvh fixes
               iPhone 13 overflow. body position:fixed locks iOS viewport.
               top-nav safe-area-inset-top clearance added. nav-tab padding
               corrected so icons sit clear of nav bar top on mobile.
               Text scale CSS: .pui-text-md and .pui-text-lg rules added for
               all key PUI text classes (parallel to CUI text scale system).
  PURPOSE:     All styles for the BioScore PUI — design tokens, shell layout,
               component library (cards, buttons, inputs, modals, zone pills,
               graphs, nav). Shared across all PUI screens.
  DEPENDS ON:  Google Fonts (DM Sans, DM Mono) — load in page.28-pui.liquid <head>
  OWNED BY:    MetaScore / Tony
  DO NOT:      - Add screen-specific logic here — keep in 28-pui-app.js
               - Override shell layout rules without explicit approval
               - Remove or rename CSS custom properties (--zone-*, --surface etc)
               - Add !important except where explicitly documented
*/

  :root {
  /* ── Zone colours (single source of truth) ── */
  --zone-purple:  #4ADE80;
  --zone-blue:    #38BEFF;
  --zone-green:   #F9A8D4;
  --zone-amber:   #FCD34D;
  --zone-purple-bg: rgba(61,158,82,0.16);
  --zone-blue-bg:   rgba(56,190,255,0.15);
  --zone-green-bg:  rgba(249,168,212,0.12);
  --zone-amber-bg:  rgba(252,211,77,0.15);
  --zone-purple-border: rgba(61,158,82,0.25);
  --zone-blue-border:   rgba(56,190,255,0.25);
  --zone-green-border:  rgba(249,168,212,0.25);
  --zone-amber-border:  rgba(252,211,77,0.25);
    --bg:#0A1A19; --surface:#0F1F1E; --raised:#1A322F; --elevated:#223D3A;
    --border:rgba(45,212,191,0.12); --border-bright:rgba(45,212,191,0.25);
    --teal:#2DD4BF; --blue:#38BEFF; --text:#E8F4F3;
    --muted:rgba(232,244,243,0.72); --dim:rgba(232,244,243,0.50);
    --zone-purple-text:#4ADE80;
    --zone-blue-text:#38BEFF;
    --zone-green-text:#F9A8D4;
    --zone-amber-text:#FCD34D;
    --zone-red-bg:rgba(185,28,28,0.2); --zone-red-text:#FCA5A5;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{background:#060F0F;color:var(--text);font-family:'DM Sans',sans-serif;font-size:var(--pui-ts-md);min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:20px;gap:24px;}
  
  .device-frame{width:390px;height:844px;background:var(--surface);border-radius:44px;border:1.5px solid var(--border-bright);overflow:hidden;position:relative;box-shadow:0 40px 120px rgba(0,0,0,0.7),0 0 0 1px rgba(45,212,191,0.08),inset 0 1px 0 rgba(45,212,191,0.15);display:flex;flex-direction:column;}

  /* ── TEXT SCALE CUSTOM PROPERTIES v3.7.0 ────────────────────────────
     Default=1.0x  Medium=1.38x  Large=1.62x
     Only wrapping / proven-headroom elements scale.
     Data values, stat grids, zone pills, score heroes: fixed.          */
  .device-frame {
    --pui-ts-micro: 9px;
    --pui-ts-xs:   10px;
    --pui-ts-sm:   11px;
    --pui-ts-base: 13px;
    --pui-ts-md:   14px;
    --pui-ts-lg:   16px;
    --pui-ts-xl:   18px;
    --pui-ts-2xl:  22px;
  }
  .device-frame.pui-text-md {
    --pui-ts-micro: 12px;
    --pui-ts-xs:   14px;
    --pui-ts-sm:   15px;
    --pui-ts-base: 18px;
    --pui-ts-md:   19px;
    --pui-ts-lg:   22px;
    --pui-ts-xl:   25px;
    --pui-ts-2xl:  28px;
  }
  .device-frame.pui-text-lg {
    --pui-ts-micro: 14px;
    --pui-ts-xs:   16px;
    --pui-ts-sm:   18px;
    --pui-ts-base: 21px;
    --pui-ts-md:   23px;
    --pui-ts-lg:   26px;
    --pui-ts-xl:   29px;
    --pui-ts-2xl:  32px;
  }
  .device-frame.pui-text-md {
    --pui-ts-micro: 10px;
    --pui-ts-xs:   12px;
    --pui-ts-sm:   13px;
    --pui-ts-base: 15px;
    --pui-ts-md:   16px;
    --pui-ts-lg:   18px;
    --pui-ts-xl:   21px;
    --pui-ts-2xl:  25px;
  }
  .device-frame.pui-text-lg {
    --pui-ts-micro: 11px;
    --pui-ts-xs:   13px;
    --pui-ts-sm:   14px;
    --pui-ts-base: 17px;
    --pui-ts-md:   18px;
    --pui-ts-lg:   21px;
    --pui-ts-xl:   23px;
    --pui-ts-2xl:  28px;
  }


  /* ── SYNC BAR — loading indicator ── */
  .pui-sync-bar{height:3px;background:var(--elevated);overflow:hidden;flex-shrink:0;}
  .pui-sync-bar-fill{height:100%;width:40%;background:var(--teal);border-radius:2px;animation:pui-sync-slide 1.2s ease-in-out infinite;}
  @keyframes pui-sync-slide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

  .screen{display:none;flex-direction:column;flex:1;overflow:hidden;}
  .screen.active{display:flex;animation:fadeIn 0.18s ease;}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}

  /* NAV */
  .top-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px 12px;flex-shrink:0;}
  .nav-title{font-size:var(--pui-ts-xl);font-weight:600;letter-spacing:-0.3px;}
  .nav-sub{font-size:var(--pui-ts-sm);color:var(--muted);margin-top:1px;font-family:'DM Mono',monospace;letter-spacing:0.5px;text-transform:uppercase;}
  .nav-icon-btn{width:36px;height:36px;border-radius:10px;background:var(--raised);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--teal);font-size:var(--pui-ts-lg);transition:all 0.15s;}
  .nav-icon-btn:hover{background:var(--elevated);border-color:var(--border-bright);}
  .back-btn{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--pui-ts-base);cursor:pointer;padding:4px 0;}
  .back-btn:hover{color:var(--text);}

  /* SCROLL */
  .scroll-area{flex:1;overflow-y:auto;padding:0 20px 100px;-webkit-overflow-scrolling:touch;}
  .scroll-area::-webkit-scrollbar{display:none;}

  /* PULL-TO-REFRESH */
  .pui-ptr-indicator{display:flex;align-items:center;justify-content:center;overflow:hidden;transition:height 0.2s,opacity 0.2s;height:0;opacity:0;}
  .pui-ptr-spinner{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);border-top-color:var(--teal);animation:pui-ptr-spin 0.6s linear infinite;}
  @keyframes pui-ptr-spin{to{transform:rotate(360deg);}}

  /* BOTTOM NAV */
  .bottom-nav{position:absolute;bottom:0;left:0;right:0;height:82px;background:rgba(10,26,25,0.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-around;padding:0 8px calc(16px + env(safe-area-inset-bottom, 0px));}
  .nav-tab{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:8px 16px;border-radius:12px;transition:all 0.15s;color:var(--dim);}
  .nav-tab.active{color:var(--blue);}
  .nav-tab svg{width:20px;height:20px;}
  .nav-tab span{font-size:var(--pui-ts-xs);font-family:'DM Mono',monospace;letter-spacing:0.5px;}

  /* CARDS */
  .card{background:var(--raised);border:1px solid rgba(255,255,255,0.04);border-radius:22px;padding:18px;margin-bottom:14px;}
  .card-label{font-size:var(--pui-ts-sm);font-family:'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase;color:var(--text);font-weight:600;margin-bottom:12px;}

  /* INPUTS */
  .input-group{margin-bottom:12px;}
  .input-label{font-size:var(--pui-ts-xs);font-family:'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
  .input-field{width:100%;background:var(--elevated);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:10px 13px;color:var(--text);font-family:'DM Mono',monospace;font-size:var(--pui-ts-md);outline:none;transition:border-color 0.15s;-webkit-appearance:none;}
  .input-field:focus{border-color:var(--border-bright);}
  .input-field[readonly]{opacity:0.6;color:var(--teal);}
  .input-field::placeholder{color:var(--dim);}
  select.input-field{cursor:pointer;}
  select.input-field option{background:#1A322F;color:var(--text);}
  .input-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .input-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}

  /* ZONE PILLS */
  .zone-pill{padding:4px 10px;border-radius:20px;font-size:var(--pui-ts-xs);font-weight:600;font-family:'DM Mono',monospace;letter-spacing:0.5px;flex-shrink:0;}
  .zone-blue{background:var(--zone-blue-bg);color:var(--zone-blue-text);}
  .zone-green{background:var(--zone-green-bg);color:var(--zone-green-text);}
  .zone-amber{background:var(--zone-amber-bg);color:var(--zone-amber-text);}
  .zone-red{background:var(--zone-red-bg);color:var(--zone-red-text);}
  .zone-purple{background:var(--zone-purple-bg);color:var(--zone-purple-text);}

  /* SCORE BAR */
  .score-bar-wrap{background:var(--elevated);border-radius:8px;height:6px;overflow:hidden;margin-top:6px;}
  .score-bar{height:100%;border-radius:8px;transition:width 0.4s ease;}

  /* DATA ROWS */
  .data-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);}
  .data-row:last-child{border-bottom:none;}
  .data-label{font-size:var(--pui-ts-sm);color:var(--muted);}
  .data-val{font-size:var(--pui-ts-sm);font-weight:500;font-family:'DM Mono',monospace;}

  /* SAFETY */
  .safety-card{background:rgba(185,28,28,0.08);border:1px solid rgba(252,165,165,0.25);border-radius:20px;padding:18px;margin-bottom:12px;}
  .safety-title{font-size:var(--pui-ts-md);font-weight:600;color:var(--zone-red-text);margin-bottom:8px;}
  .safety-q{margin-bottom:10px;}
  .safety-q .input-label{color:rgba(252,165,165,0.6);}
  .amber-banner{background:rgba(146,64,14,0.1);border:1px solid rgba(252,211,77,0.2);border-radius:14px;padding:12px 14px;margin-bottom:12px;font-size:var(--pui-ts-sm);color:var(--zone-amber-text);line-height:1.5;display:none;}

  /* BUTTONS */
  .btn-primary{width:100%;background:linear-gradient(135deg,rgba(45,212,191,0.15),rgba(56,190,255,0.15));border:1px solid rgba(45,212,191,0.3);border-radius:16px;padding:14px;color:var(--teal);font-size:var(--pui-ts-md);font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all 0.2s;margin-top:4px;}
  .btn-primary:hover{background:linear-gradient(135deg,rgba(45,212,191,0.25),rgba(56,190,255,0.25));}
  .btn-secondary{width:100%;background:var(--elevated);border:1px solid var(--border);border-radius:16px;padding:12px;color:var(--muted);font-size:var(--pui-ts-base);font-family:'DM Sans',sans-serif;cursor:pointer;transition:all 0.2s;margin-top:4px;}
  .btn-secondary:hover{color:var(--text);border-color:var(--border-bright);}
  .btn-danger{background:rgba(185,28,28,0.15);border:1px solid rgba(252,165,165,0.2);color:var(--zone-red-text);}

  /* STEP INDICATOR */
  .step-indicator{display:flex;align-items:center;gap:6px;padding:0 4px 16px;}
  .step-dot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:all 0.2s;}
  .step-dot.active{background:var(--blue);width:20px;border-radius:3px;}
  .step-dot.done{background:var(--teal);}
  .step-label{font-size:var(--pui-ts-sm);font-family:'DM Mono',monospace;color:var(--muted);margin-left:4px;}

  /* DISCLAIMER */
  .disclaimer{background:rgba(252,211,77,0.06);border:1px solid rgba(252,211,77,0.2);border-radius:12px;padding:10px 14px;font-size:var(--pui-ts-sm);color:var(--zone-amber-text);margin-bottom:14px;line-height:1.5;}

  /* RESULT CARD */
  .result-orb-wrap{display:flex;flex-direction:column;align-items:center;padding:16px 0;}
  .result-orb{width:96px;height:96px;border-radius:50%;position:relative;margin-bottom:10px;}
  .result-orb-ring{position:absolute;inset:-3px;border-radius:50%;}
  .result-orb-inner{position:absolute;inset:3px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#1A322F,#0A1A19);display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .result-score{font-size:var(--pui-ts-2xl);font-weight:600;font-family:'DM Mono',monospace;line-height:1;}
  .result-denom{font-size:var(--pui-ts-xs);color:var(--muted);margin-top:2px;}
  .result-split{display:flex;gap:28px;margin-top:8px;}
  .result-half{text-align:center;}
  .result-half-val{font-size:var(--pui-ts-base);font-family:'DM Mono',monospace;}
  .result-half-key{font-size:var(--pui-ts-micro);color:var(--dim);margin-top:2px;}

  /* BREAKDOWN ROW */
  .breakdown-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);}
  .breakdown-row:last-child{border-bottom:none;}
  .breakdown-name{font-size:var(--pui-ts-sm);color:var(--muted);}
  .breakdown-pill{padding:3px 8px;border-radius:20px;font-size:var(--pui-ts-xs);font-weight:600;font-family:'DM Mono',monospace;}

  /* CADENCE */
  .cadence-row{display:flex;gap:8px;}
  .cadence-btn{flex:1;padding:10px;background:var(--elevated);border:1px solid var(--border);border-radius:12px;color:var(--muted);font-family:'DM Mono',monospace;font-size:var(--pui-ts-sm);cursor:pointer;text-align:center;transition:all 0.15s;}
  .cadence-btn.selected{border-color:var(--blue);color:var(--blue);background:rgba(56,190,255,0.08);}
  .note-area{width:100%;background:var(--elevated);border:1px solid var(--border);border-radius:12px;padding:12px 14px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:var(--pui-ts-base);outline:none;resize:none;min-height:72px;}

  /* CLIENT LIST STYLES */
  .pending-banner{background:rgba(56,190,255,0.08);border:1px solid rgba(56,190,255,0.2);border-radius:14px;padding:12px 16px;margin-bottom:12px;display:flex;align-items:center;gap:10px;cursor:pointer;}
  .pending-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex-shrink:0;animation:pulse 2s infinite;}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
  .section-label{font-size:var(--pui-ts-xs);font-family:'DM Mono',monospace;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);padding:8px 4px;}
  .client-row{background:var(--raised);border:1px solid var(--border);border-radius:16px;padding:14px 16px;margin-bottom:8px;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:12px;}
  .client-row:hover{border-color:var(--border-bright);background:var(--elevated);}
  .client-avatar{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:var(--pui-ts-md);font-weight:600;flex-shrink:0;}
  .client-info{flex:1;min-width:0;}
  .client-name{font-size:var(--pui-ts-md);font-weight:500;margin-bottom:2px;}
  .client-meta{font-size:var(--pui-ts-sm);color:var(--muted);font-family:'DM Mono',monospace;}
  .review-badge{display:flex;align-items:center;gap:4px;font-size:var(--pui-ts-xs);color:var(--zone-amber-text);background:rgba(146,64,14,0.15);border-radius:8px;padding:3px 8px;font-family:'DM Mono',monospace;}
  .add-btn{width:100%;background:rgba(56,190,255,0.06);border:1px dashed rgba(56,190,255,0.25);border-radius:16px;padding:10px;color:var(--blue);font-size:var(--pui-ts-base);font-family:'DM Sans',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all 0.15s;margin-bottom:6px;}
  .add-btn:hover{background:rgba(56,190,255,0.1);}
  /* Filter pills — client list toolbar */
  .pui-filter-pill{padding:6px 12px;border-radius:8px;font-size:var(--pui-ts-sm);font-family:'DM Mono',monospace;color:var(--text);background:rgba(255,255,255,0.04);border:1px solid var(--border);cursor:pointer;white-space:nowrap;transition:all 0.15s;flex-shrink:0;}
  .pui-filter-pill.active{background:rgba(45,212,191,0.12);border-color:rgba(45,212,191,0.3);color:var(--teal);font-weight:600;}

  /* PROFILE */
  .profile-header{background:var(--raised);border:1px solid var(--border);border-radius:20px;padding:20px;margin-bottom:12px;}
  .profile-top{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
  .profile-avatar{width:52px;height:52px;border-radius:14px;background:rgba(45,212,191,0.1);display:flex;align-items:center;justify-content:center;font-size:var(--pui-ts-2xl);font-weight:600;color:var(--teal);}
  .profile-name{font-size:var(--pui-ts-lg);font-weight:600;margin-bottom:3px;}
  .profile-since{font-size:var(--pui-ts-xs);color:var(--muted);font-family:'DM Mono',monospace;}
  .profile-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
  .stat-box{background:var(--elevated);border-radius:12px;padding:10px;text-align:center;}
  .stat-val{font-size:var(--pui-ts-md);font-weight:600;color:var(--teal);font-family:'DM Mono',monospace;}
  .stat-key{font-size:var(--pui-ts-xs);color:var(--muted);margin-top:2px;}
  .tab-row{display:flex;gap:6px;margin-bottom:12px;background:var(--raised);border-radius:14px;padding:4px;border:1px solid var(--border);}
  .tab-btn{flex:1;padding:8px 4px;border-radius:10px;font-size:var(--pui-ts-sm);font-family:'DM Mono',monospace;text-align:center;cursor:pointer;color:var(--muted);transition:all 0.15s;border:none;background:none;}
  .tab-btn.active{background:var(--elevated);color:var(--text);border:1px solid var(--border-bright);}

  /* ROLE PICKER */
  .role-picker{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;gap:14px;}
  .role-logo{font-size:var(--pui-ts-sm);font-family:'DM Mono',monospace;letter-spacing:2px;color:var(--teal);text-transform:uppercase;margin-bottom:6px;}
  .role-greeting{font-size:var(--pui-ts-2xl);font-weight:600;letter-spacing:-0.5px;text-align:center;margin-bottom:2px;}
  .role-sub{font-size:var(--pui-ts-base);color:var(--muted);text-align:center;margin-bottom:20px;}
  .role-card{width:100%;background:var(--raised);border:1px solid var(--border);border-radius:20px;padding:20px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;gap:14px;}
  .role-card:hover{border-color:var(--border-bright);background:var(--elevated);}
  .role-icon{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:var(--pui-ts-2xl);flex-shrink:0;}
  .role-card-title{font-size:var(--pui-ts-md);font-weight:600;margin-bottom:2px;}
  .role-card-sub{font-size:var(--pui-ts-sm);color:var(--muted);}
  .role-arrow{margin-left:auto;color:var(--dim);font-size:var(--pui-ts-2xl);}

  /* CERT */
  .prof-option{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--raised);border:1px solid var(--border);border-radius:16px;cursor:pointer;transition:all 0.15s;-webkit-tap-highlight-color:transparent;}
  .prof-option.selected{background:rgba(45,212,191,0.06);border-color:var(--border-bright);}
  .prof-option.selected-advanced{background:rgba(252,211,77,0.05);border-color:rgba(252,211,77,0.25);}
  .prof-radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all 0.15s;}
  .prof-option.selected .prof-radio{border-color:var(--teal);background:rgba(45,212,191,0.15);}
  .prof-option.selected .prof-radio::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--teal);}
  .prof-option.selected-advanced .prof-radio{border-color:#FCD34D;background:rgba(252,211,77,0.12);}
  .prof-option.selected-advanced .prof-radio::after{content:'';width:8px;height:8px;border-radius:50%;background:#FCD34D;}
  .prof-label{font-size:var(--pui-ts-base);font-weight:600;color:var(--text);margin-bottom:2px;}
  .prof-sub{font-size:var(--pui-ts-sm);color:var(--muted);}

  .gate-row{display:flex;align-items:flex-start;gap:14px;padding:14px 4px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .gate-check{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--border);background:var(--raised);display:flex;align-items:center;justify-content:center;font-size:var(--pui-ts-sm);color:transparent;flex-shrink:0;margin-top:1px;transition:all 0.15s;}
  .gate-row.checked .gate-check{background:rgba(45,212,191,0.15);border-color:var(--teal);color:var(--teal);}
  .gate-label{font-size:var(--pui-ts-base);color:var(--muted);line-height:1.6;transition:color 0.15s;}
  .gate-row.checked .gate-label{color:var(--text);}
  .gate-divider{height:1px;background:var(--border);margin:0 4px;}

  /* ── ENROLMENT FLOW (v3.25.0) ─────────────────────────────
     Three classes only. Everything else reuses existing patterns.
     .enrol-progress — 6-dot progress row at top of screen-onboarding.
     .enrol-scroll   — constrained scroll for agreement text on Card 4.
     .enrol-stamp    — date/time stamp above agreement tick on Card 5.
     All sizes use var(--pui-ts-*) so they scale with pui-text-md
     and pui-text-lg automatically. No overrides needed.
  ─────────────────────────────────────────────────────────── */
  .enrol-progress{display:flex;justify-content:center;gap:8px;padding:20px 0 4px;}
  .enrol-dot{width:7px;height:7px;border-radius:50%;background:var(--border);transition:all 0.2s;flex-shrink:0;}
  .enrol-dot.active{background:var(--teal);transform:scale(1.2);}
  .enrol-dot.done{background:rgba(45,212,191,0.35);}

  .enrol-scroll{max-height:280px;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;font-size:var(--pui-ts-sm);color:var(--muted);line-height:1.7;}
  .enrol-scroll::-webkit-scrollbar{display:none;}

  .enrol-stamp{font-size:var(--pui-ts-xs);font-family:'DM Mono',monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--teal);margin-bottom:16px;line-height:1.6;}

background:var(--elevated);border:1px solid var(--border);border-radius:20px;padding:6px 14px;font-size:var(--pui-ts-sm);font-family:'DM Mono',monospace;color:var(--muted);cursor:pointer;white-space:nowrap;transition:all 0.15s;}
  .bday-tab.active{background:rgba(252,211,77,0.12);border-color:rgba(252,211,77,0.3);color:#FCD34D;}

  @keyframes orb-breathe {
    0%,100%{ box-shadow:0 0 40px rgba(45,212,191,0.12),inset 0 1px 0 rgba(45,212,191,0.2); }
    50%    { box-shadow:0 0 60px rgba(45,212,191,0.22),inset 0 1px 0 rgba(45,212,191,0.3); }
  }
  .cert-tier{background:var(--raised);border:1px solid var(--border);border-radius:16px;padding:14px 16px;margin-bottom:8px;display:flex;align-items:center;gap:12px;}
  .cert-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:var(--pui-ts-md);flex-shrink:0;}
  .cert-info{flex:1;}
  .cert-name{font-size:var(--pui-ts-base);font-weight:500;margin-bottom:2px;}
  .cert-desc{font-size:var(--pui-ts-sm);color:var(--muted);}
  .cert-status{font-size:var(--pui-ts-xs);font-family:'DM Mono',monospace;padding:3px 8px;border-radius:20px;}
  .cert-status.done{background:rgba(45,212,191,0.1);color:var(--teal);}
  .cert-status.current{background:rgba(56,190,255,0.1);color:var(--blue);}


  /* TIMERS */
  .timer-card{background:var(--elevated);border-radius:16px;padding:16px;margin-bottom:10px;}
  .timer-instruction{font-size:var(--pui-ts-sm);color:var(--muted);line-height:1.5;margin-bottom:12px;}
  .timer-display{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:12px;}
  .timer-number{font-size:52px;font-weight:600;font-family:'DM Mono',monospace;color:var(--blue);line-height:1;transition:color 0.3s;}
  .timer-number.urgent{color:var(--zone-amber-text);}
  .timer-number.done{color:var(--zone-green-text);}
  .timer-unit{font-size:var(--pui-ts-sm);color:var(--dim);font-family:'DM Mono',monospace;margin-top:8px;}
  .timer-btn-row{display:flex;gap:8px;}
  .timer-btn{flex:1;padding:11px;border-radius:12px;font-size:var(--pui-ts-base);font-weight:600;font-family:'DM Sans',sans-serif;cursor:pointer;border:none;transition:all 0.15s;}
  .timer-btn-start{background:rgba(56,190,255,0.15);color:var(--blue);border:1px solid rgba(56,190,255,0.3);}
  .timer-btn-start:hover{background:rgba(56,190,255,0.25);}
  .timer-btn-reset{background:var(--raised);color:var(--muted);border:1px solid var(--border);}
  .timer-btn-reset:hover{color:var(--text);}
  .timer-status{font-size:var(--pui-ts-sm);font-family:'DM Mono',monospace;text-align:center;margin-top:8px;min-height:16px;color:var(--muted);}
  .timer-status.active{color:var(--blue);}
  .timer-status.finished{color:var(--zone-green-text);}
  /* SUCCESS OVERLAY */
  .success-overlay{position:absolute;inset:0;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px;z-index:10;}
  .success-icon{font-size:56px;}
  .success-title{font-size:var(--pui-ts-2xl);font-weight:600;letter-spacing:-0.3px;text-align:center;}
  .success-sub{font-size:var(--pui-ts-base);color:var(--muted);text-align:center;line-height:1.6;max-width:240px;}
  .success-meta{font-family:'DM Mono',monospace;font-size:var(--pui-ts-sm);color:var(--teal);text-align:center;}

  /* ADD CLIENT / PENDING / REVIEWS / EMPTY */
  .modal-screen{position:absolute;inset:0;background:var(--surface);z-index:20;display:none;flex-direction:column;overflow:hidden;}
  .modal-screen.open{display:flex;}
  .modal-header{display:flex;align-items:center;gap:12px;padding:20px 20px 12px;flex-shrink:0;}
  .modal-title{font-size:var(--pui-ts-lg);font-weight:600;letter-spacing:-0.3px;}
  .modal-close{width:34px;height:34px;border-radius:10px;background:var(--raised);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:var(--pui-ts-xl);margin-left:auto;flex-shrink:0;}
  .modal-close:hover{color:var(--text);}
  .modal-scroll{flex:1;overflow-y:auto;padding:0 16px 40px;-webkit-overflow-scrolling:touch;}
  .modal-scroll::-webkit-scrollbar{display:none;}

  /* PENDING CARD */
  .pending-card{background:var(--raised);border:1px solid rgba(56,190,255,0.2);border-radius:18px;padding:16px;margin-bottom:10px;display:flex;align-items:center;gap:12px;}
  .pending-avatar{width:44px;height:44px;border-radius:12px;background:rgba(56,190,255,0.1);display:flex;align-items:center;justify-content:center;font-size:var(--pui-ts-md);font-weight:600;color:var(--blue);flex-shrink:0;}
  .pending-info{flex:1;}
  .pending-name{font-size:var(--pui-ts-md);font-weight:500;margin-bottom:2px;}
  .pending-detail{font-size:var(--pui-ts-sm);color:var(--muted);font-family:'DM Mono',monospace;}
  .pending-actions{display:flex;gap:6px;margin-top:10px;}
  .btn-approve{flex:1;padding:9px;border-radius:10px;background:rgba(45,212,191,0.12);border:1px solid rgba(45,212,191,0.3);color:var(--teal);font-size:var(--pui-ts-sm);font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;}
  .btn-decline{flex:1;padding:9px;border-radius:10px;background:rgba(185,28,28,0.08);border:1px solid rgba(252,165,165,0.2);color:var(--zone-red-text);font-size:var(--pui-ts-sm);font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;}

  /* REVIEW SCHEDULE ROW */
  .review-row{background:var(--raised);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:10px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all 0.15s;}
  .review-row:hover{border-color:var(--border-bright);}
  .review-date-box{min-width:48px;padding:8px 6px;border-radius:12px;background:var(--elevated);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;gap:1px;}
  .review-date-day{font-size:var(--pui-ts-lg);font-weight:700;font-family:'DM Mono',monospace;line-height:1;}
  .review-date-mon{font-size:var(--pui-ts-micro);color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-top:1px;}
  .review-info{flex:1;}
  .review-client{font-size:var(--pui-ts-base);font-weight:500;margin-bottom:2px;}
  .review-meta{font-size:var(--pui-ts-sm);color:var(--muted);font-family:'DM Mono',monospace;}
  .review-overdue{border-color:rgba(252,211,77,0.25);background:rgba(146,64,14,0.06);}
  .review-overdue .review-date-box{background:rgba(146,64,14,0.15);}
  .review-overdue .review-date-day{color:var(--zone-amber-text);}

  /* EMPTY STATE */
  .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center;gap:10px;}
  .empty-icon{font-size:40px;opacity:0.4;}
  .empty-title{font-size:var(--pui-ts-md);font-weight:600;color:var(--muted);}
  .empty-sub{font-size:var(--pui-ts-sm);color:var(--dim);line-height:1.6;max-width:200px;}

  /* ZONE LEGEND */
  .zone-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
  .legend-item{background:var(--raised);border:1px solid var(--border);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:8px;}
  .legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
  .legend-text{font-size:var(--pui-ts-sm);}
  .legend-name{font-weight:600;font-size:var(--pui-ts-sm);}
  .legend-desc{font-size:var(--pui-ts-xs);color:var(--muted);margin-top:1px;}

  /* SESSION NEW BUTTON — PROMINENT */
  .session-cta{background:rgba(56,190,255,0.1);border:1px solid rgba(56,190,255,0.3);border-radius:16px;padding:14px 18px;margin-bottom:12px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all 0.2s;}
  .session-cta:hover{background:rgba(56,190,255,0.18);}
  .session-cta-icon{width:36px;height:36px;border-radius:10px;background:rgba(56,190,255,0.15);display:flex;align-items:center;justify-content:center;font-size:var(--pui-ts-xl);flex-shrink:0;}
  .session-cta-text{flex:1;}
  .session-cta-title{font-size:var(--pui-ts-base);font-weight:600;color:var(--blue);}
  .session-cta-sub{font-size:var(--pui-ts-sm);color:var(--muted);margin-top:1px;}
  .session-cta-arrow{color:var(--blue);font-size:var(--pui-ts-xl);}

  /* SESSION HISTORY CARD */
  .session-hist{background:var(--raised);border:1px solid var(--border);border-radius:16px;padding:14px 16px;margin-bottom:8px;}
  .session-hist-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
  .session-hist-date{font-size:var(--pui-ts-sm);font-weight:500;}
  .session-hist-body{display:flex;gap:10px;}
  .session-hist-stat{flex:1;background:var(--elevated);border-radius:10px;padding:8px;text-align:center;}
  .session-hist-val{font-size:var(--pui-ts-md);font-weight:600;font-family:'DM Mono',monospace;color:var(--teal);}
  .session-hist-key{font-size:var(--pui-ts-micro);color:var(--dim);margin-top:2px;}


  /* SIMPLE / DETAIL VIEW */
  .status-hero{background:var(--raised);border:1px solid var(--border);border-radius:20px;padding:20px;margin-bottom:12px;}
  .status-hero-top{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
  .status-avatar{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:var(--pui-ts-2xl);font-weight:600;flex-shrink:0;}
  .status-name{font-size:var(--pui-ts-lg);font-weight:600;margin-bottom:2px;}
  .status-since{font-size:var(--pui-ts-xs);color:var(--muted);font-family:'DM Mono',monospace;}
  .status-zone-bar{border-radius:12px;padding:14px 16px;margin-bottom:12px;display:flex;align-items:center;gap:12px;}
  .status-zone-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
  .status-zone-text{font-size:var(--pui-ts-md);font-weight:500;line-height:1.4;}
  .status-zone-name{font-size:var(--pui-ts-sm);font-family:'DM Mono',monospace;margin-top:2px;}
  .status-row{display:flex;gap:8px;margin-bottom:12px;}
  .status-box{flex:1;background:var(--elevated);border-radius:12px;padding:10px;text-align:center;}
  .status-box-val{font-size:var(--pui-ts-md);font-weight:600;font-family:'DM Mono',monospace;color:var(--teal);}
  .status-box-key{font-size:var(--pui-ts-xs);color:var(--muted);margin-top:2px;}
  .status-next{font-size:var(--pui-ts-sm);font-family:'DM Mono',monospace;color:var(--muted);text-align:center;padding:8px 0 0;}

  /* VIEW TABS */
  .view-tabs{display:flex;gap:6px;margin-bottom:12px;background:var(--raised);border-radius:14px;padding:4px;border:1px solid var(--border);}
  .view-tab{flex:1;padding:9px 4px;border-radius:10px;font-size:var(--pui-ts-sm);font-family:'DM Sans',sans-serif;font-weight:500;text-align:center;cursor:pointer;color:var(--muted);transition:all 0.15s;border:none;background:none;}
  .view-tab.active{background:var(--elevated);color:var(--text);border:1px solid var(--border-bright);}

  /* SUMMARY PLAIN ENGLISH */
  .summary-item{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid var(--border);}
  .summary-item:last-child{border-bottom:none;}
  .summary-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px;}
  .summary-text{font-size:var(--pui-ts-base);line-height:1.5;color:var(--text);}
  .summary-sub{font-size:var(--pui-ts-sm);color:var(--muted);margin-top:2px;}




  /* PRE-POPULATED FIELDS */
  .prefill-card{background:var(--raised);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:12px;}
  .prefill-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);}
  .prefill-row:last-child{border-bottom:none;}
  .prefill-label{font-size:var(--pui-ts-xs);font-family:'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase;color:var(--muted);}
  .prefill-value{font-size:var(--pui-ts-md);font-weight:700;color:var(--text);}
  .prefill-value.from-supabase{color:var(--teal);}
  .prefill-value.today{color:var(--muted);}
  .prefill-edit-btn{font-size:var(--pui-ts-sm);font-family:'DM Mono',monospace;color:var(--blue);background:rgba(56,190,255,0.08);border:1px solid rgba(56,190,255,0.2);border-radius:8px;padding:4px 10px;cursor:pointer;}
  .prefill-source{font-size:var(--pui-ts-micro);font-family:'DM Mono',monospace;color:var(--teal);opacity:0.6;margin-top:1px;}
  .prefill-override{display:none;margin-top:8px;}
  .prefill-override input{width:100%;box-sizing:border-box;background:var(--elevated);border:1px solid var(--border-bright);border-radius:10px;padding:10px 12px;color:var(--text);font-size:var(--pui-ts-md);font-family:'DM Sans',sans-serif;}
  .prefill-override input:focus{outline:none;border-color:var(--teal);}

  /* METRIC ACCORDIONS */
  .mac-wrap{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;}
  .mac-item{border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,0.04);background:var(--raised);transition:border-color 0.2s;}
  .mac-item.open{border-color:rgba(45,212,191,0.2);}
  .mac-header{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .mac-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
  .mac-title{font-size:var(--pui-ts-base);font-weight:700;flex:1;letter-spacing:0.02em;}
  .mac-status{font-size:var(--pui-ts-sm);font-family:'DM Mono',monospace;opacity:0.7;}
  .mac-chevron{font-size:var(--pui-ts-md);color:var(--muted);transition:transform 0.25s;flex-shrink:0;}
  .mac-item.open .mac-chevron{transform:rotate(180deg);}
  .mac-body{display:none;padding:0 16px 16px;}
  .mac-item.open .mac-body{display:block;}

  /* VISUAL SUMMARY */
  .vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
  .vs-block{border-radius:18px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;min-height:110px;position:relative;overflow:hidden;}
  .vs-block-wide{border-radius:18px;padding:16px;margin-bottom:8px;position:relative;overflow:hidden;}
  .vs-label{font-size:var(--pui-ts-xs);font-family:'DM Mono',monospace;letter-spacing:1px;text-transform:uppercase;opacity:0.6;margin-bottom:8px;}
  .vs-value{font-size:32px;font-weight:700;line-height:1;letter-spacing:-1px;}
  .vs-word{font-size:var(--pui-ts-base);font-weight:600;margin-top:4px;}
  .vs-arrow{font-size:var(--pui-ts-2xl);position:absolute;top:14px;right:16px;opacity:0.5;}
  .vs-trend-row{display:flex;align-items:center;gap:6px;margin-top:6px;}
  .vs-trend-bar{height:4px;border-radius:4px;flex:1;background:rgba(255,255,255,0.08);}
  .vs-trend-fill{height:100%;border-radius:4px;transition:width 0.4s;}
  .vs-session-block{border-radius:18px;padding:18px;display:flex;align-items:center;gap:14px;margin-bottom:8px;}
  .vs-session-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:var(--pui-ts-2xl);flex-shrink:0;}
  .vs-session-text{flex:1;}
  .vs-session-title{font-size:var(--pui-ts-md);font-weight:600;margin-bottom:2px;}
  .vs-session-sub{font-size:var(--pui-ts-sm);opacity:0.6;font-family:'DM Mono',monospace;}
  .vs-phase-row{display:flex;gap:8px;margin-bottom:8px;}
  .vs-phase-block{flex:1;border-radius:14px;padding:12px;text-align:center;}
  .vs-phase-val{font-size:var(--pui-ts-md);font-weight:700;}
  .vs-phase-key{font-size:var(--pui-ts-micro);font-family:'DM Mono',monospace;letter-spacing:0.8px;text-transform:uppercase;opacity:0.6;margin-top:3px;}


  /* GLUCOSE ZONE GRAPH */
  .gzg-wrap{background:var(--raised);border:1px solid var(--border);border-radius:18px;padding:16px;margin-bottom:8px;}
  .gzg-range-row{display:flex;gap:4px;margin-bottom:16px;background:var(--elevated);border-radius:10px;padding:3px;}
  .gzg-range-btn{flex:1;padding:7px 4px;border-radius:8px;font-size:var(--pui-ts-sm);font-family:'DM Mono',monospace;text-align:center;cursor:pointer;color:var(--muted);border:none;background:none;transition:all 0.15s;letter-spacing:0.5px;}
  .gzg-range-btn.active{background:var(--raised);color:var(--text);border:1px solid var(--border-bright);}
  .gzg-bars{display:flex;align-items:flex-end;gap:3px;height:72px;}
  .gzg-bar{flex:1;border-radius:3px 3px 0 0;min-height:4px;transition:height 0.3s ease;}
  .gzg-xlabels{display:flex;gap:3px;margin-top:3px;margin-bottom:8px;}
  .gzg-xlabel{flex:1;font-size:7px;font-family:'DM Mono',monospace;color:rgba(232,244,243,0.22);text-align:center;overflow:hidden;}
  .gzg-legend{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px;}
  .gzg-legend-item{display:flex;align-items:center;gap:4px;font-size:var(--pui-ts-xs);font-family:'DM Mono',monospace;color:var(--muted);}
  .gzg-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
  .gzg-no-data{text-align:center;padding:24px;font-size:var(--pui-ts-sm);color:var(--dim);}

  /* MINI CHART */
  .mini-chart{display:flex;align-items:flex-end;gap:3px;height:30px;}
  .mini-bar{flex:1;border-radius:3px 3px 0 0;background:rgba(45,212,191,0.12);border-top:1.5px solid rgba(45,212,191,0.35);}

  /* ── Utility: zone colours ── */
  .text-purple { color: var(--zone-purple); }
  .text-blue   { color: var(--zone-blue); }
  .text-green  { color: var(--zone-green); }
  .text-amber  { color: var(--zone-amber); }

  /* ── Utility: flex layouts ── */
  .flex-row         { display:flex; flex-direction:row; }
  .flex-col         { display:flex; flex-direction:column; }
  .flex-center      { display:flex; align-items:center; justify-content:center; }
  .flex-between     { display:flex; align-items:center; justify-content:space-between; }
  .flex-1           { flex:1; }
  .gap-6            { gap:6px; }
  .gap-8            { gap:8px; }
  .gap-10           { gap:10px; }
  .gap-12           { gap:12px; }
  .gap-16           { gap:16px; }

  /* ── Utility: spacing ── */
  .mb-4  { margin-bottom:4px; }
  .mb-6  { margin-bottom:6px; }
  .mb-8  { margin-bottom:8px; }
  .mb-10 { margin-bottom:10px; }
  .mb-12 { margin-bottom:12px; }
  .mb-16 { margin-bottom:16px; }
  .mt-4  { margin-top:4px; }
  .mt-8  { margin-top:8px; }
  .mt-10 { margin-top:10px; }
  .mt-12 { margin-top:12px; }

  /* ── Utility: typography ── */
  .label-mono  { font-size:var(--pui-ts-xs); font-family:'DM Mono',monospace; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
  .score-large { font-size:var(--pui-ts-2xl); font-weight:700; }
  .score-sub   { font-size:var(--pui-ts-sm); color:var(--muted); font-weight:400; }
  .text-muted  { color:var(--muted); }
  .text-dim    { color:var(--dim); }
  .text-small  { font-size:var(--pui-ts-sm); }
  .text-xs     { font-size:var(--pui-ts-xs); }
  .text-bold   { font-weight:700; }
  .line-relaxed { line-height:1.6; }

  /* ── Component: score breakdown item ── */
  .score-item       { background:var(--elevated); border-radius:12px; padding:12px; }
  .score-item-bar   { height:4px; border-radius:2px; background:var(--border); margin-top:8px; }
  .score-item-fill  { height:4px; border-radius:2px; }

  /* ── Component: stat boxes ── */
  .stat-box         { flex:1; background:var(--elevated); border-radius:8px; padding:5px 8px; text-align:center; }
  .stat-box-val     { font-size:var(--pui-ts-base); font-weight:700; }
  .stat-box-label   { font-size:var(--pui-ts-micro); color:var(--muted); font-family:'DM Mono',monospace; }

  /* ── Component: progress bar strip ── */
  .progress-strip       { display:flex; gap:3px; margin-top:12px; }
  .progress-strip-seg   { flex:1; height:4px; border-radius:2px; }
  .progress-seg-done    { background:var(--teal); opacity:0.9; }
  .progress-seg-empty   { background:var(--border); }


  /* ── SESSION NAV BAR ─────────────────────────────────────────── */
  .nav-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px 10px;flex-shrink:0;}
  .nav-bar .nav-title{font-size:var(--pui-ts-lg);font-weight:700;font-family:'DM Sans',sans-serif;letter-spacing:-0.2px;color:var(--text);}
  .nav-bar .back-btn{font-size:var(--pui-ts-sm);font-weight:500;color:var(--muted);}


  /* ── THEME TOGGLE ── */
  .theme-toggle-knob[data-theme="light"]{ transform:translateX(24px); }
  .theme-toggle-knob[data-theme="dark"]{ transform:translateX(0); }
  [data-theme="light"] #theme-toggle{ background:rgba(45,212,191,0.15); }


  /* ══════════════════════════════════════════════════════════════
     REDESIGN ADDITIONS v3.27.0
     All rules below are additive — nothing above is modified.
     ══════════════════════════════════════════════════════════════ */

  /* ── SLIDE ANIMATIONS (ported from CUI) ── */
  .screen{position:relative;}
  .screen.slide-enter-left{
    display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;
    transform:translateX(100%);
    animation:pui-slide-in-left 0.28s ease-in-out forwards;
  }
  .screen.slide-enter-right{
    display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;
    transform:translateX(-100%);
    animation:pui-slide-in-right 0.28s ease-in-out forwards;
  }
  .screen.slide-exit-left{
    display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;
    animation:pui-slide-out-left 0.28s ease-in-out forwards;
  }
  .screen.slide-exit-right{
    display:flex;position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;
    animation:pui-slide-out-right 0.28s ease-in-out forwards;
  }
  @keyframes pui-slide-in-left  { from{transform:translateX(100%)} to{transform:translateX(0)} }
  @keyframes pui-slide-in-right { from{transform:translateX(-100%)} to{transform:translateX(0)} }
  @keyframes pui-slide-out-left { from{transform:translateX(0)} to{transform:translateX(-100%)} }
  @keyframes pui-slide-out-right{ from{transform:translateX(0)} to{transform:translateX(100%)} }


  /* ── SKELETON LOADING ── */
  @keyframes pui-shimmer{
    0%  { background-position: -400px 0; }
    100%{ background-position:  400px 0; }
  }
  .pui-skeleton{
    background: linear-gradient(90deg,
      rgba(255,255,255,0.04) 25%,
      rgba(255,255,255,0.09) 50%,
      rgba(255,255,255,0.04) 75%
    );
    background-size: 800px 100%;
    animation: pui-shimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
  }
  .pui-skel-row{
    height:14px; border-radius:6px; margin-bottom:10px;
  }
  .pui-skel-row--short{ width:55%; }
  .pui-skel-row--med  { width:78%; }
  .pui-skel-row--full { width:100%; }
  /* Skeleton client row — matches real .client-row dimensions */
  .pui-skel-client{
    background:var(--raised);border:1px solid var(--border);
    border-radius:16px;padding:14px 16px;margin-bottom:8px;
    display:flex;align-items:center;gap:12px;
  }
  .pui-skel-avatar{
    width:40px;height:40px;border-radius:12px;flex-shrink:0;
  }
  .pui-skel-lines{ flex:1;display:flex;flex-direction:column;gap:8px; }


  /* ── SECTION HEADER (matches CUI cui-sec-head) ── */
  .pui-sec-head{
    font-size:var(--pui-ts-xs);font-family:'DM Mono',monospace;
    letter-spacing:1.5px;text-transform:uppercase;
    color:var(--muted);margin:16px 0 8px;padding-left:2px;
  }


  /* ── OVERDUE NUDGE STRIP ── */
  .pui-nudge-strip{
    background:rgba(232,164,74,0.08);
    border:1px solid rgba(232,164,74,0.22);
    border-radius:14px;padding:10px 14px;
    margin-bottom:12px;
    display:flex;align-items:center;gap:10px;
    cursor:pointer;transition:background 0.15s;
  }
  .pui-nudge-strip:hover{ background:rgba(232,164,74,0.13); }
  .pui-nudge-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--zone-amber);flex-shrink:0;
    animation:pulse 2s infinite;
  }
  .pui-nudge-text{ font-size:var(--pui-ts-sm);color:var(--zone-amber-text);flex:1;line-height:1.4; }
  .pui-nudge-arrow{ font-size:var(--pui-ts-lg);color:var(--zone-amber);flex-shrink:0; }


  /* ── CLIENT ROW — REDESIGNED ── */
  /* Replaces old .client-row for roster screen.
     Old .client-row kept intact for any screen still using it. */
  .pui-client-row{
    background:var(--raised);border:1px solid var(--border);
    border-radius:16px;padding:14px 14px 14px 16px;
    margin-bottom:8px;transition:border-color 0.15s;
    display:flex;align-items:center;gap:12px;
  }
  .pui-client-row:hover{ border-color:var(--border-bright); }
  .pui-client-row--overdue{
    border-color:rgba(232,164,74,0.28);
    background:rgba(146,64,14,0.05);
  }
  .pui-client-body{
    flex:1;min-width:0;cursor:pointer;
  }
  .pui-client-name-row{
    display:flex;align-items:center;gap:8px;margin-bottom:4px;
  }
  .pui-client-name{
    font-size:var(--pui-ts-md);font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .pui-client-status{
    font-size:var(--pui-ts-xs);font-family:'DM Mono',monospace;
    color:var(--muted);line-height:1.4;
  }
  .pui-client-status--overdue{ color:var(--zone-amber-text); }
  .pui-client-status--new    { color:var(--zone-blue-text); }
  /* Engagement dot — logging frequency indicator */
  .pui-engage-dot{
    width:7px;height:7px;border-radius:50%;flex-shrink:0;
    background:var(--dim);
  }
  .pui-engage-dot--active { background:var(--teal);box-shadow:0 0 6px rgba(45,212,191,0.5); }
  .pui-engage-dot--fading { background:var(--zone-amber); }
  .pui-engage-dot--gone   { background:rgba(255,255,255,0.12); }
  /* Start session button — right side of row */
  .pui-start-btn{
    flex-shrink:0;
    padding:8px 12px;
    border-radius:10px;
    background:rgba(56,190,255,0.1);
    border:1px solid rgba(56,190,255,0.25);
    color:var(--zone-blue-text);
    font-size:var(--pui-ts-sm);font-weight:600;
    font-family:'DM Sans',sans-serif;
    cursor:pointer;white-space:nowrap;
    transition:all 0.15s;
  }
  .pui-start-btn:hover{
    background:rgba(56,190,255,0.18);
    border-color:rgba(56,190,255,0.4);
  }


  /* ── NEW BOTTOM NAV — 4 TABS ── */
  /* Replaces old 4-tab bottom-nav for screen-clients and screen-client.
     Old .bottom-nav kept intact for session screens. */
  .pui-bottom-nav{
    position:absolute;bottom:0;left:0;right:0;
    /* Height = 82px icon zone + safe-area below — never squish icons */
    height:calc(82px + env(safe-area-inset-bottom,0px));
    background:rgba(10,26,25,0.97);
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    border-top:1px solid var(--border);
    display:flex;align-items:flex-start;justify-content:space-around;
    /* 14px top padding centres icons elegantly in the 82px visible zone */
    padding:14px 8px env(safe-area-inset-bottom,0px);
    z-index:10;
  }
  .pui-nav-tab{
    flex:1;display:flex;flex-direction:column;
    align-items:center;gap:4px;cursor:pointer;
    padding:8px 0 2px;color:var(--dim);
    transition:color 0.2s;border:none;background:none;
    position:relative;
  }
  .pui-nav-tab:hover{ color:var(--muted); }
  .pui-nav-tab.active{ color:var(--teal); }
  .pui-nav-tab svg{ width:20px;height:20px; }
  .pui-nav-tab span{
    font-size:var(--pui-ts-xs);font-family:'DM Mono',monospace;letter-spacing:0.3px;
  }
  /* Badge on tab (e.g. comms notification) */
  .pui-tab-badge{
    position:absolute;top:4px;right:calc(50% - 18px);
    background:var(--teal);color:#000;
    font-size:var(--pui-ts-micro);font-weight:700;
    border-radius:10px;padding:1px 5px;
    font-family:'DM Mono',monospace;
  }


  /* ── SETTINGS ROWS (Profile tab additions) ── */
  .pui-settings-section{
    margin-top:4px;
  }
  .pui-settings-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:13px 0;border-bottom:1px solid var(--border);
  }
  .pui-settings-row:last-child{ border-bottom:none; }
  .pui-settings-label{
    font-size:var(--pui-ts-base);color:var(--text);font-weight:500;
  }
  .pui-settings-control{
    display:flex;gap:4px;
  }
  /* Segment chip — units / text size / theme */
  .pui-seg-btn{
    padding:5px 11px;border-radius:8px;
    font-size:var(--pui-ts-sm);font-family:'DM Mono',monospace;
    background:var(--elevated);border:1px solid var(--border);
    color:var(--muted);cursor:pointer;transition:all 0.15s;
  }
  .pui-seg-btn.active{
    background:rgba(45,212,191,0.12);
    border-color:rgba(45,212,191,0.3);
    color:var(--teal);font-weight:600;
  }
  /* Toggle switch — vibration */
  .pui-toggle{
    width:44px;height:26px;border-radius:13px;
    border:none;cursor:pointer;position:relative;
    transition:background 0.2s;flex-shrink:0;
  }
  .pui-toggle--on { background:var(--teal); }
  .pui-toggle--off{ background:var(--elevated); }
  .pui-toggle-knob{
    position:absolute;top:3px;width:20px;height:20px;
    border-radius:50%;background:white;transition:all 0.2s;
  }
  .pui-toggle--on  .pui-toggle-knob{ right:3px; }
  .pui-toggle--off .pui-toggle-knob{ left:3px; }


  /* ── MY HEALTH LINK (Profile tab — conditional) ── */
  .pui-my-health-card{
    background:var(--raised);border:1px solid var(--border);
    border-radius:16px;padding:14px 16px;
    display:flex;align-items:center;gap:12px;
    cursor:pointer;transition:all 0.15s;margin-bottom:8px;
  }
  .pui-my-health-card:hover{ border-color:var(--border-bright); }
  .pui-my-health-icon{
    width:38px;height:38px;border-radius:11px;
    background:rgba(45,212,191,0.1);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
  }
  .pui-my-health-label{ font-size:var(--pui-ts-base);font-weight:600;color:var(--text); }
  .pui-my-health-sub  { font-size:var(--pui-ts-sm);color:var(--muted);margin-top:2px; }
  .pui-my-health-arrow{ margin-left:auto;color:var(--dim);font-size:var(--pui-ts-xl); }


  /* ── GREETING BAR (roster screen) ── */
  .pui-greeting{
    padding:14px 0 10px;
  }
  .pui-greeting-name{
    font-size:var(--pui-ts-xl);font-weight:700;letter-spacing:-0.3px;color:var(--text);
  }
  .pui-greeting-sub{
    font-size:var(--pui-ts-sm);font-family:'DM Mono',monospace;
    color:var(--muted);margin-top:3px;
  }
  .pui-greeting-sub--warn{ color:var(--zone-amber-text); }


  /* ── CERT TIER — CPD countdown ── */
  .pui-cpd-due{
    font-size:var(--pui-ts-xs);font-family:'DM Mono',monospace;
    color:var(--zone-amber-text);margin-top:3px;
  }
  .pui-cpd-ok{
    font-size:var(--pui-ts-xs);font-family:'DM Mono',monospace;
    color:var(--teal);margin-top:3px;
  }

  /* ── OUTAGE BANNER ── */
  .pui-outage-banner{
    background:rgba(232,164,74,0.08);
    border-bottom:1px solid rgba(232,164,74,0.2);
    padding:10px 20px;
    font-size:var(--pui-ts-sm);color:var(--zone-amber-text);
    text-align:center;font-weight:500;
    flex-shrink:0;display:none;
  }


  /* ── IDENTITY LOCK OVERLAY ── */
  .pui-identity-overlay{
    position:absolute;inset:0;
    background:var(--bg);z-index:300;
    display:flex;align-items:center;justify-content:center;
    border-radius:44px;
  }
  .pui-identity-card{
    text-align:center;max-width:280px;width:100%;
    padding:40px 30px;
    animation:puiIdentityIn 0.5s ease both;
  }
  @keyframes puiIdentityIn{
    0%  { opacity:0;transform:scale(0.92) translateY(12px); }
    100%{ opacity:1;transform:scale(1)    translateY(0); }
  }
  .pui-identity-avatar{
    width:80px;height:80px;border-radius:50%;
    background:rgba(45,212,191,0.1);
    border:2px solid rgba(45,212,191,0.25);
    display:flex;align-items:center;justify-content:center;
    font-size:var(--pui-ts-2xl);font-weight:700;color:var(--teal);
    margin:0 auto 20px;
    animation:puiAvatarPulse 3s ease-in-out infinite;
  }
  @keyframes puiAvatarPulse{
    0%,100%{ box-shadow:0 8px 30px rgba(45,212,191,0.12); }
    50%    { box-shadow:0 8px 40px rgba(45,212,191,0.22); }
  }
  .pui-identity-name{
    font-size:var(--pui-ts-2xl);font-weight:700;color:var(--text);
    margin-bottom:6px;
  }
  .pui-identity-sub{
    font-size:var(--pui-ts-xs);color:var(--muted);
    font-family:'DM Mono',monospace;
    letter-spacing:1.5px;text-transform:uppercase;
    margin-bottom:32px;
  }
  .pui-identity-confirm{
    width:100%;padding:14px;border-radius:16px;
    background:linear-gradient(135deg,rgba(45,212,191,0.15),rgba(56,190,255,0.15));
    border:1px solid rgba(45,212,191,0.3);
    color:var(--teal);font-size:var(--pui-ts-md);font-weight:600;
    font-family:'DM Sans',sans-serif;cursor:pointer;
    margin-bottom:10px;
  }
  .pui-identity-signout{
    width:100%;padding:12px;border-radius:14px;
    background:transparent;border:1px solid rgba(255,255,255,0.08);
    color:var(--muted);font-size:var(--pui-ts-base);font-weight:500;
    font-family:'DM Sans',sans-serif;cursor:pointer;
  }

/* ═══════════════════════════════════════════════════════════
   MOBILE PWA — FULL-SCREEN BREAKPOINT
   v3.4.0 — 2026-04-10
   Purpose: On a real phone (≤430px wide) the device-frame fills
   the entire screen. Removes desktop padding, locks the iOS
   viewport, clears the status bar, and fixes nav-tab icon position.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 430px) {
  html {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-text-size-adjust: 100% !important;
  }

  body {
    padding: 0 !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    align-items: flex-start !important;
    background: var(--surface) !important;
  }

  html {
    background: var(--surface) !important;
  }

  .device-frame {
    width: 100% !important;
    height: 100vh !important;
    height: var(--vvh, 100dvh) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Status bar clearance — 0px fallback for non-notched/non-PWA contexts */
  .top-nav {
    padding-top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
  }

  /* Nav tabs — both old (.nav-tab) and new (.pui-nav-tab) class names.
     Asymmetric padding centres icons visually inside the 82px nav bar. */
  .nav-tab,
  .pui-nav-tab {
    padding: 10px 0 4px !important;
    gap: 3px !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   TEXT SCALE SYSTEM — v3.4.0
   Three tiers controlled by .pui-text-default / .pui-text-md
   / .pui-text-lg on .device-frame.
   JS writes the class via _puiApplyTextSize() in 28-pui-app.js.
   Storage key: ms.pui.textsize   Values: 'default' | 'md' | 'lg'

   FIXED (never scale):
     nav labels, zone pills, monospace data values, DM Mono
     micro labels (≤11px), chart axis labels.
   SCALABLE (scale at full rate):
     body copy, card labels, names, guidance text, buttons.
   DISPLAY (scale at half rate):
     large numerics, screen titles, orb scores.

   Default=1.0x   Medium=1.25x   Large=1.40x
   ═══════════════════════════════════════════════════════════ */

/* ── 12px base → md:15px  lg:17px ── */
.device-frame.pui-text-md .back-btn,
.device-frame.pui-text-md .data-label,
.device-frame.pui-text-md .breakdown-name,
.device-frame.pui-text-md .breakdown-pill,
.device-frame.pui-text-md .empty-sub,
.device-frame.pui-text-md .cert-desc,
.device-frame.pui-text-md .prof-sub,
.device-frame.pui-text-md .note-area,
.device-frame.pui-text-md .timer-status,
.device-frame.pui-text-md .review-meta,
.device-frame.pui-text-md .pending-detail,
.device-frame.pui-text-md .role-card-sub,
.device-frame.pui-text-md .gate-label { font-size: 15px !important; }

.device-frame.pui-text-lg .back-btn,
.device-frame.pui-text-lg .data-label,
.device-frame.pui-text-lg .breakdown-name,
.device-frame.pui-text-lg .breakdown-pill,
.device-frame.pui-text-lg .empty-sub,
.device-frame.pui-text-lg .cert-desc,
.device-frame.pui-text-lg .prof-sub,
.device-frame.pui-text-lg .note-area,
.device-frame.pui-text-lg .timer-status,
.device-frame.pui-text-lg .review-meta,
.device-frame.pui-text-lg .pending-detail,
.device-frame.pui-text-lg .role-card-sub,
.device-frame.pui-text-lg .gate-label { font-size: 17px !important; }

/* ── 13px base → md:16px  lg:18px ── */
.device-frame.pui-text-md .btn-secondary,
.device-frame.pui-text-md .client-meta,
.device-frame.pui-text-md .review-client,
.device-frame.pui-text-md .pending-name,
.device-frame.pui-text-md .role-sub,
.device-frame.pui-text-md .success-sub,
.device-frame.pui-text-md .cert-name,
.device-frame.pui-text-md .timer-instruction,
.device-frame.pui-text-md .modal-scroll,
.device-frame.pui-text-md .cadence-btn,
.device-frame.pui-text-md .prof-label { font-size: 16px !important; }

.device-frame.pui-text-lg .btn-secondary,
.device-frame.pui-text-lg .client-meta,
.device-frame.pui-text-lg .review-client,
.device-frame.pui-text-lg .pending-name,
.device-frame.pui-text-lg .role-sub,
.device-frame.pui-text-lg .success-sub,
.device-frame.pui-text-lg .cert-name,
.device-frame.pui-text-lg .timer-instruction,
.device-frame.pui-text-lg .modal-scroll,
.device-frame.pui-text-lg .cadence-btn,
.device-frame.pui-text-lg .prof-label { font-size: 18px !important; }

/* ── 14px base → md:18px  lg:20px ── */
.device-frame.pui-text-md .btn-primary,
.device-frame.pui-text-md .client-name,
.device-frame.pui-text-md .input-field,
.device-frame.pui-text-md .role-card-title { font-size: 18px !important; }

.device-frame.pui-text-lg .btn-primary,
.device-frame.pui-text-lg .client-name,
.device-frame.pui-text-lg .input-field,
.device-frame.pui-text-lg .role-card-title { font-size: 20px !important; }

/* ── 15px base → md:19px  lg:21px ── */
.device-frame.pui-text-md .empty-title { font-size: 19px !important; }
.device-frame.pui-text-lg .empty-title { font-size: 21px !important; }

/* ── Display — half rate: 17px base → md:19px  lg:21px ── */
.device-frame.pui-text-md .profile-name,
.device-frame.pui-text-md .modal-title  { font-size: 19px !important; }

.device-frame.pui-text-lg .profile-name,
.device-frame.pui-text-lg .modal-title  { font-size: 21px !important; }

/* ── Display — half rate: 18px base → md:20px  lg:22px ── */
.device-frame.pui-text-md .nav-title { font-size: 22px !important; }
.device-frame.pui-text-lg .nav-title { font-size: 22px !important; }

/* ── Display — half rate: 20px base → md:22px  lg:24px ── */
.device-frame.pui-text-md .success-title { font-size: 22px !important; }
.device-frame.pui-text-lg .success-title { font-size: 24px !important; }

/* ── Display — half rate: 21px base → md:23px  lg:25px ── */
.device-frame.pui-text-md .role-greeting { font-size: 23px !important; }
.device-frame.pui-text-lg .role-greeting { font-size: 25px !important; }

/* ── Display — half rate: 24px base → md:27px  lg:29px ── */
.device-frame.pui-text-md .result-score { font-size: 27px !important; }
.device-frame.pui-text-lg .result-score { font-size: 29px !important; }

/* ── FIXED — never scale ──────────────────────────────────
   nav-tab labels, zone pills, input labels (DM Mono micro),
   data-val (monospace data), stat-val, timer-number (52px display)   */
/* (no rules needed — default sizes are authoritative)           */

/* ── Wrap behaviour at larger sizes ──
   REMOVED v3.24.0 (2026-04-24). A blanket white-space:nowrap on
   .btn-primary and .btn-secondary in pui-text-md and pui-text-lg
   was added to avoid word orphans. It truncated the safeguarding
   Session Blocked acknowledgement button ("I understand — session
   cancelled, client advised to seek medical advice") when any
   practitioner on text-md opened the block modal. Clinical safety
   text must be fully readable. Buttons wrap naturally now. */


/* ═══════════════════════════════════════════════════════════
   TEXT SCALE — ADDITIONAL SAFE ELEMENTS v3.5.0
   Only wrapping text / proven-headroom containers.
   ═══════════════════════════════════════════════════════════ */

/* ── Greeting (clients screen header) ── */
.device-frame.pui-text-md .pui-greeting-name { font-size: 20px !important; }
.device-frame.pui-text-lg .pui-greeting-name { font-size: 23px !important; }
.device-frame.pui-text-md .pui-greeting-sub  { font-size: 13px !important; }
.device-frame.pui-text-lg .pui-greeting-sub  { font-size: 14px !important; }

/* ── Section heads ── */
.device-frame.pui-text-md .pui-sec-head { font-size: 11px !important; }
.device-frame.pui-text-lg .pui-sec-head { font-size: 12px !important; }
.device-frame.pui-text-md .card-label   { font-size: 13px !important; }
.device-frame.pui-text-lg .card-label   { font-size: 14px !important; }

/* ── Settings labels (left side of settings row, wrapping ok) ── */
.device-frame.pui-text-md .pui-settings-label { font-size: 15px !important; }
.device-frame.pui-text-lg .pui-settings-label { font-size: 17px !important; }

/* ── My Health card ── */
.device-frame.pui-text-md .pui-my-health-label { font-size: 15px !important; }
.device-frame.pui-text-lg .pui-my-health-label { font-size: 17px !important; }
.device-frame.pui-text-md .pui-my-health-sub   { font-size: 13px !important; }
.device-frame.pui-text-lg .pui-my-health-sub   { font-size: 14px !important; }

/* ── Nav bar title (heading, plenty of space) ── */
.device-frame.pui-text-md .nav-title { font-size: 22px !important; }
.device-frame.pui-text-lg .nav-title { font-size: 22px !important; }

/* ── Input fields — full width, safe ── */
.device-frame.pui-text-md .input-label { font-size: 11px !important; }
.device-frame.pui-text-lg .input-label { font-size: 12px !important; }

/* ── Summary items in session detail (wrapping) ── */
.device-frame.pui-text-md .summary-text { font-size: 15px !important; }
.device-frame.pui-text-lg .summary-text { font-size: 17px !important; }
.device-frame.pui-text-md .summary-sub  { font-size: 13px !important; }
.device-frame.pui-text-lg .summary-sub  { font-size: 14px !important; }

/* ── View tabs in client detail (wrapping labels, 5-across but text is short) ── */
/* Fixed — 5 tabs in 314px, tight at larger sizes. Leave at default. */

/* ── Nudge strip ── */
.device-frame.pui-text-md .pui-nudge-text { font-size: 14px !important; }
.device-frame.pui-text-lg .pui-nudge-text { font-size: 16px !important; }

/* ── Seg buttons — FIXED. They control the setting, must not scale. ── */
/* .pui-seg-btn intentionally excluded */


/* ═══════════════════════════════════════════════════════════
   TEXT SCALE — COMPLETE CLASS COVERAGE v3.8.0
   Every CSS class with font-size now has a scale rule.
   ═══════════════════════════════════════════════════════════ */

/* ── MAC accordion (client detail: Blood Pressure, Glucose etc) ── */
.device-frame.pui-text-md .mac-title  { font-size: 18px !important; }
.device-frame.pui-text-lg .mac-title  { font-size: 21px !important; }
.device-frame.pui-text-md .mac-status { font-size: 15px !important; }
.device-frame.pui-text-lg .mac-status { font-size: 18px !important; }

/* ── Chart legend ── */
.device-frame.pui-text-md .legend-text { font-size: 15px !important; }
.device-frame.pui-text-lg .legend-text { font-size: 18px !important; }
.device-frame.pui-text-md .legend-name { font-size: 15px !important; }
.device-frame.pui-text-lg .legend-name { font-size: 18px !important; }

/* ── Client detail hero status ── */
.device-frame.pui-text-md .status-name      { font-size: 23px !important; }
.device-frame.pui-text-lg .status-name      { font-size: 27px !important; }
.device-frame.pui-text-md .status-zone-text { font-size: 19px !important; }
.device-frame.pui-text-lg .status-zone-text { font-size: 23px !important; }
.device-frame.pui-text-md .status-zone-name { font-size: 15px !important; }
.device-frame.pui-text-lg .status-zone-name { font-size: 18px !important; }

/* ── Session history / comparison cards ── */
.device-frame.pui-text-md .vs-session-title { font-size: 19px !important; }
.device-frame.pui-text-lg .vs-session-title { font-size: 23px !important; }
.device-frame.pui-text-md .vs-session-sub   { font-size: 15px !important; }
.device-frame.pui-text-lg .vs-session-sub   { font-size: 18px !important; }
.device-frame.pui-text-md .vs-phase-val     { font-size: 21px !important; }
.device-frame.pui-text-lg .vs-phase-val     { font-size: 24px !important; }
.device-frame.pui-text-md .vs-word          { font-size: 18px !important; }
.device-frame.pui-text-lg .vs-word          { font-size: 21px !important; }

/* ── Stat box values in session detail ── */
.device-frame.pui-text-md .stat-box-val  { font-size: 18px !important; }
.device-frame.pui-text-lg .stat-box-val  { font-size: 21px !important; }

/* ── Timer buttons ── */
.device-frame.pui-text-md .timer-btn { font-size: 18px !important; }
.device-frame.pui-text-lg .timer-btn { font-size: 21px !important; }

/* ── Data value rows (DM Mono data) ── */
.device-frame.pui-text-md .data-val { font-size: 15px !important; }
.device-frame.pui-text-lg .data-val { font-size: 18px !important; }

/* ═══════════════════════════════════════════════════════════
   v3.20.0 — TREND CARDS (Health Drift, Time in Zone,
   Habits vs MetaScore). Same shape as the CUI equivalents
   so the practitioner screen matches the client view.
   ═══════════════════════════════════════════════════════════ */

.pui-trend-card {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
}
.pui-trend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.pui-trend-label {
  font-size: var(--pui-ts-micro);
  font-family: 'DM Mono', monospace;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.pui-trend-info {
  background: none;
  border: none;
  color: var(--dim);
  font-size: var(--pui-ts-sm);
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

/* Health Drift spectrum */
.pui-spectrum-bar {
  display: flex;
  height: 20px;
  border-radius: 6px;
  overflow: visible;
  position: relative;
  margin-bottom: 4px;
}
.pui-spectrum-seg { flex: 1; height: 100%; }
.pui-spectrum-seg:first-child { border-radius: 6px 0 0 6px; }
.pui-spectrum-seg:last-child  { border-radius: 0 6px 6px 0; }
.pui-spectrum-marker {
  position: absolute;
  top: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--surface);
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
  transition: left 0.4s ease;
  margin-left: -9px;
}

/* Time in Zone stacked bar + legend */
.pui-tiz-bar {
  display: flex;
  height: 14px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}
.pui-tiz-seg { height: 100%; }
.pui-tiz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.pui-tiz-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--pui-ts-xs);
  color: var(--muted);
  font-family: 'DM Mono', monospace;
}
.pui-tiz-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Habits vs MetaScore chart */
.pui-hvm-chart {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 0 0 20px;
  margin-top: 10px;
}
.pui-hvm-day {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  min-width: 0;
}
.pui-hvm-bar-am,
.pui-hvm-bar-pm,
.pui-hvm-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: height 0.3s ease;
}
.pui-hvm-bar-am { background: var(--teal); opacity: 0.9; }
.pui-hvm-bar-pm { background: var(--teal); opacity: 0.55; }
.pui-hvm-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--teal);
  opacity: 0.4;
}
.pui-hvm-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  border: 2px solid var(--surface);
  margin-left: -4px;
  margin-top: -3px;
}
.pui-hvm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  font-size: var(--pui-ts-xs);
  color: var(--muted);
  font-family: 'DM Mono', monospace;
}
.pui-hvm-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.pui-hvm-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* ── Session history date ── */
.device-frame.pui-text-md .session-hist-date { font-size: 15px !important; }
.device-frame.pui-text-lg .session-hist-date { font-size: 18px !important; }

/* ── Generic text utility classes ── */
.device-frame.pui-text-md .text-small { font-size: 15px !important; }
.device-frame.pui-text-lg .text-small { font-size: 18px !important; }
.device-frame.pui-text-md .text-xs    { font-size: 14px !important; }
.device-frame.pui-text-lg .text-xs    { font-size: 16px !important; }

/* ── Time-in-zone legend items ── */
.device-frame.pui-text-md .pui-tiz-item { font-size: 14px !important; }
.device-frame.pui-text-lg .pui-tiz-item { font-size: 16px !important; }

/* ── Client name in list ── */
.device-frame.pui-text-md .client-name { font-size: 19px !important; }
.device-frame.pui-text-lg .client-name { font-size: 23px !important; }
.device-frame.pui-text-md .client-meta { font-size: 15px !important; }
.device-frame.pui-text-lg .client-meta { font-size: 18px !important; }

/* ── Score large display ── */
.device-frame.pui-text-md .score-large { font-size: 28px !important; }
.device-frame.pui-text-lg .score-large { font-size: 33px !important; }

/* ── Zone legend description text ── */
.device-frame.pui-text-md .legend-desc { font-size: 14px !important; }
.device-frame.pui-text-lg .legend-desc { font-size: 16px !important; }
/* ───────────────────────────────────────────────
   v3.22.0 — Dual-ring hero gauge (MetaScore + Metabolic Age)
   Pattern mirrors CUI cui-ma-dual. Two equal gauges side by side.
   ─────────────────────────────────────────────── */

.pui-hero-dual {
  display: flex;
  gap: 12px;
  padding: 8px 0 10px;
}

.pui-hero-gauge {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pui-hero-gauge-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.pui-hero-gauge-label {
  font-size: var(--pui-ts-micro);
  font-family: 'DM Mono', monospace;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}

.pui-hero-ring-box {
  position: relative;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pui-ma-svg {
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(0deg);
}

.pui-ma-ring-center {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.pui-ma-hero {
  font-family: 'DM Mono', monospace;
  font-size: var(--pui-ts-xl);
  font-weight: 600;
  line-height: 1;
}

.pui-ma-hero-sub {
  font-size: var(--pui-ts-micro);
  font-family: 'DM Mono', monospace;
  font-weight: 700;
  margin-top: 4px;
  text-align: center;
  max-width: 104px;
  line-height: 1.15;
}

.pui-hero-gauge-sub {
  font-size: var(--pui-ts-base);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  margin-top: 4px;
}

/* Text-scale overrides — keep hero readable at md/lg */
.device-frame.pui-text-md .pui-ma-hero   { font-size: 30px !important; }
.device-frame.pui-text-lg .pui-ma-hero   { font-size: 36px !important; }
.device-frame.pui-text-md .pui-ma-hero-sub   { font-size: 12px !important; }
.device-frame.pui-text-lg .pui-ma-hero-sub   { font-size: 14px !important; }
.device-frame.pui-text-md .pui-hero-gauge-sub { font-size: 16px !important; }
.device-frame.pui-text-lg .pui-hero-gauge-sub { font-size: 19px !important; }

/* ───────────────────────────────────────────────
   v3.23.0 — Favourite star (client list row)
   Star rendered inside .pui-avatar-col which sits below the avatar.
   Centred, bigger, gold when on, muted outline when off.
   ─────────────────────────────────────────────── */

.pui-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.pui-fav-star {
  font-size: 18px;
  line-height: 1;
  color: var(--dim);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 0.15s, transform 0.15s;
  user-select: none;
  text-align: center;
}

.pui-fav-star:hover {
  color: var(--muted);
}

.pui-fav-star--on {
  color: #F59E0B;
}

.pui-fav-star--on:hover {
  color: #FBBF24;
}