/* ==========================================================================================================
   Client portal polish (Oct 14, 2026; owner: "make the client portal just as good" as the staff portal).
   Look only: no rule, permission, data or wording change. Loaded LAST on /client/ (after /modern.css) so it wins.
   Same tokens as the staff portal (modern.css): Navy #14284B, Gold #C9A227, Ivory #F6F4EF; Newsreader for the page title,
   Manrope for everything else; 16px card radius, soft shadow, 24px rhythm, gold focus ring. Light by default (theme.js).
   Contrast checked at WCAG AA on light and dark. Motion is off when the device asks for reduced motion (modern.css + below).
   ========================================================================================================== */

/* ---------- page frame ---------- */
.shell{max-width:800px;padding:16px max(16px,env(safe-area-inset-right)) calc(var(--tabbar-h,64px) + 40px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.shell>.card,.shell>.hero,.shell>.tiles,.shell>.subnav,.shell>a.card,.shell>p{margin-top:0;margin-bottom:20px}
.shell .card+.card{margin-top:0}
.shell .topbar{min-height:56px;margin-bottom:16px;gap:12px}
.shell .topbar .btn{min-height:var(--btn-h);border-radius:var(--r-pill);padding:6px 14px;background:var(--panel);box-shadow:var(--shadow)}
@media (pointer:coarse){.shell .topbar .btn{min-height:var(--btn-h)}}
@media (min-width:760px){.shell{padding:24px 24px 56px}.shell>.card,.shell>.hero,.shell>.tiles,.shell>.subnav,.shell>a.card{margin-bottom:24px}}

/* ---------- cards + type scale ---------- */
.shell .card{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);padding:22px}
.shell .card>h2:first-child{margin-top:0}
.shell .card h2{font:600 18px/1.3 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:0 0 14px;color:var(--ink)}
.shell a.card{display:block;text-decoration:none;color:inherit}
.shell a.card:hover{border-color:var(--brand);transform:translateY(-1px)}
.shell .small{font-size:13px}
.shell .muted.small{line-height:1.5}
@media (max-width:480px){.shell .card{padding:18px}}

/* ---------- header nav: pill tab bar on desktop, fixed bottom tab bar with icons on phones ---------- */
.tabbar{padding:4px max(4px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px,env(safe-area-inset-left));z-index:60;
  background:color-mix(in srgb,var(--panel) 94%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px)}
.tabbar a{min-height:56px;min-width:44px;font-weight:600;gap:3px}
.tabbar a .ic{width:52px;height:30px;border-radius:999px;display:grid;place-items:center;transition:background-color var(--t)}
.tabbar a:hover{color:var(--ink);text-decoration:none}
.tabbar a.active .ic{background:var(--brand-l)}
.tabbar a:focus-visible{outline-offset:-3px;border-radius:var(--r-sm)}
.tabbar .dot{font-weight:700;line-height:16px;min-width:18px;text-align:center}
:root[data-theme=dark] .tabbar .dot{color:#2A0D0A}
@media (min-width:760px){
  .tabbar{position:sticky;top:12px;bottom:auto;padding:5px;margin:0 0 24px;border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);
    background:color-mix(in srgb,var(--panel) 92%,transparent)}
  .tabbar a{min-height:44px;padding:0 18px;gap:8px}
  .tabbar a .ic{width:auto;height:auto;background:none!important;border-radius:0}
  .tabbar a:hover:not(.active){background:var(--hover)}
  .tabbar a:focus-visible{outline-offset:2px;border-radius:999px}
}
@media (prefers-reduced-transparency:reduce){.tabbar{background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none}}
@supports not (background:color-mix(in srgb,red 50%,blue)){.tabbar{background:var(--panel)}}

/* Me sub-pages: same pill style as the staff section tabs */
.subnav{gap:8px;padding:2px}
.subnav::-webkit-scrollbar{display:none}
.subnav a{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);font-size:15px;box-shadow:none}
.subnav a:hover:not(.active){background:var(--hover);text-decoration:none}
.subnav a.active{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:var(--shadow)}
.subnav a:focus-visible{border-radius:999px}

/* ---------- Home: next-session hero (navy, gold primary action, Newsreader greeting like the staff page title) ---------- */
.hero{padding:26px 26px 24px;border-radius:20px;color:#fff}
.hero h2{font:600 32px/1.15 Newsreader,Georgia,"Times New Roman",serif;letter-spacing:-.01em;margin:0 0 8px;color:#fff}
.hero .hero-clin{margin-top:4px}
.hero .hero-kicker{margin:20px 0 4px;font-size:14px;font-weight:600;color:#D7DCE6}
.hero .hero-when{font:600 24px/1.25 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-variant-numeric:tabular-nums;color:#fff}
.hero .hero-pills{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 18px}
.hero .hero-pills .pill{margin:0}
.hero .hero-empty{margin:14px 0 16px;font-size:16px;line-height:1.5;color:#E6EAF2}
.hero .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.hero .hero-actions .btn{min-height:var(--btn-h);padding:10px 22px;font-size:16px;font-weight:700;border-radius:var(--r-pill)}
.hero .hero-actions .btn:not(.ghost){box-shadow:0 6px 18px rgba(201,162,39,.28)}
.hero .hero-wait{display:inline-flex;align-items:center;min-height:32px;color:#F7EED2;background:rgba(247,238,210,.14)}
.hero .btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hero .pill{color:#fff}
@media (max-width:480px){.hero{padding:22px 20px}.hero h2{font-size:28px}.hero .hero-when{font-size:21px}.hero .hero-actions .btn{flex:1 1 auto}}

/* Messages + Balance tiles (same tile as the staff home) */
.hm-tiles{grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.hm-tiles .tile{min-height:104px;justify-content:space-between}
.hm-tiles .tile .t-l{display:flex;align-items:center;gap:8px}
.hm-tiles .tile .t-l .i{width:18px;height:18px}
.hm-tiles .t-quiet{font:600 17px/1.3 Manrope,-apple-system,sans-serif;color:var(--ink)}
.hm-tiles a.tile:focus-visible{border-radius:var(--radius)}
@media (max-width:700px){.hm-tiles{gap:12px}.hm-tiles .tile{min-height:96px}}
@media (min-width:760px){.hm-tiles{margin-bottom:24px}}

/* "Before your first session": same progress bar and check dots as the staff Get started */
.cs-card{border:1px solid var(--line)!important;box-shadow:inset 4px 0 0 var(--accent),var(--shadow)!important}
.shell .cs-card h2{font:600 24px/1.2 Manrope,-apple-system,sans-serif;margin:4px 0 12px}
.cs-kicker{font-size:14px;letter-spacing:0;text-transform:none}
.cs-card .progress{height:8px;background:var(--line);border-radius:99px;margin:0 0 16px}
.cs-card .progress span{border-radius:99px;background:var(--accent);transition:width .4s cubic-bezier(.2,.7,.2,1)}
.cs-card .progress span[style*="width:100%"]{background:var(--ok)}
.cs-next{border-radius:var(--r-sm);min-height:52px}
.cs-list{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.cs-list li{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
.cs-list li.next{border-color:var(--brand);box-shadow:var(--shadow)}
.cs-list a{padding:12px 14px;min-height:56px;align-items:center;border-radius:var(--r-sm)}
.cs-list a:hover{background:var(--hover);text-decoration:none}
.cs-dot{width:32px;height:32px;background:var(--panel)}
.cs-list li.done .cs-dot{background:var(--ok);border-color:var(--ok);color:#fff}
:root[data-theme=dark] .cs-list li.done .cs-dot{color:#0E1726}
.cs-txt b{font-size:16px;color:var(--ink)}
.cs-list li.done .cs-txt b{color:var(--muted);font-weight:600}
.cs-txt .small{color:var(--muted)}

/* ---------- lists, dates and badges ---------- */
.shell .list-item{padding:12px 0;gap:12px}
.shell .list-item .grow{font-variant-numeric:tabular-nums}
.shell .list-item>.badge{flex:none}
.shell .sess-row{padding:12px 12px 12px 14px!important;margin:0 0 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2)}
.shell .sess-row:last-child{margin-bottom:0;border-bottom:1px solid var(--line)}
.shell .badge{font-size:12px;padding:3px 10px}
.shell .badge:not(.ok):not(.warn):not(.bad){background:var(--brand-l);color:var(--brand-d)}
.shell .card .pill{background:var(--brand-l);color:var(--brand-d);font-weight:600;padding:3px 10px;margin:0}
:root[data-theme=dark] .shell .card .pill{color:var(--ink)}

/* friendly empty states */
.shell .empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 12px;font-size:15px;color:var(--muted);text-align:center}
.shell .empty::before{content:"";width:44px;height:44px;border-radius:50%;background:var(--gold-l) no-repeat center/22px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23765C0E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")}
.shell .empty .btn{margin-top:2px}

/* ---------- Sessions ---------- */
.slotday{margin-bottom:14px}
.slotday>b{display:block;margin-bottom:6px;font-size:14px;color:var(--ink)}
.slotbtn{border-radius:10px;font-variant-numeric:tabular-nums;background:var(--panel)}
.slotbtn.sel{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 0 0 3px rgba(201,162,39,.45)}
:root[data-theme=dark] .slotbtn.sel{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.shell .rowbtns{gap:8px}
.shell .lp-card{box-shadow:none;background:var(--surface-2);border-color:var(--line);border-radius:var(--radius)}
.shell .lp-btn{border-radius:var(--r-pill);min-height:var(--btn-h)}
:root[data-theme=dark] .shell .lp-card{background:var(--surface-2);color:var(--ink)}
:root[data-theme=dark] .shell .lp-head{color:var(--ink)}

/* ---------- Messages ---------- */
.shell .msgs{gap:10px;padding:4px 2px}
.shell .bubble{display:block;padding:10px 14px;line-height:1.45;font-size:15px}
.shell .bubble small{display:block;margin-top:4px;font-size:12px;opacity:1;color:var(--muted);font-variant-numeric:tabular-nums}
.shell .bubble.me small{color:#D7DCE6}
.composer input{border-radius:var(--r-sm)}
.composer .btn{border-radius:var(--r-pill)}

/* ---------- Billing ---------- */
.bal-card .bal-n{font:600 34px/1.1 Newsreader,Georgia,serif;font-variant-numeric:tabular-nums;color:var(--ink)}
table.stmt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.stmt td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
table.stmt tr:last-child td{border-bottom:0}
table.stmt td:first-child{white-space:nowrap;color:var(--muted);padding-left:0;width:1%}
table.stmt td:nth-child(3){white-space:nowrap;font-weight:600;text-align:right}
table.stmt td:last-child{padding-right:0;white-space:nowrap}
table.stmt td:last-child .btn+.btn{margin-left:6px}
table.stmt tbody tr:hover>td{background:transparent}
@media (max-width:600px){
  table.stmt tr{padding:14px;margin:0 0 10px;border:1px solid var(--line)!important;border-radius:var(--r-sm);background:var(--surface-2);gap:6px 10px}
  table.stmt tr:last-child{margin-bottom:0}
  table.stmt td{border:0!important;padding:0!important;width:auto}
  table.stmt td:nth-child(2){flex:1 1 60%;font-weight:600;order:-1}
  table.stmt td:first-child{order:-2;flex-basis:100%;font-size:13px}
  table.stmt td:nth-child(3){text-align:left}
  table.stmt td:last-child{padding-top:4px!important}
  table.stmt td:last-child .btn+.btn{margin-left:0}
}

/* ---------- forms (Me) ---------- */
.shell label{font-size:13px}

/* ---------- crisis box: one look everywhere, always shown ---------- */
.crisis{display:block;position:relative;background:var(--crisis-bg);color:var(--crisis-ink);border:1px solid rgba(201,162,39,.45);border-radius:var(--r-sm);
  padding:14px 16px 14px 52px;font-size:14px;line-height:1.5;margin:24px 0 0}
.crisis::before{content:"";position:absolute;left:16px;top:14px;width:22px;height:22px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E") center/contain no-repeat}
.crisis b{color:var(--crisis-ink)}
.crisis a{color:var(--crisis-ink);text-decoration:underline;font-weight:600}
.crisis-short{padding:12px 16px 12px 52px;font-size:14px}
.crisis-short summary{text-align:left;min-height:24px}
.authwrap .crisis{margin-top:16px}
/* the video waiting screen keeps its own quiet line on navy (client.css #call rules) */
#call .crisis{padding:0;border:0;background:none;margin:0}
#call .crisis::before{display:none}

/* ---------- buttons + focus (same as staff) ---------- */
.shell .btn{border-radius:var(--r-pill)}
.shell .btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--line-2))}
.shell .btn.danger:hover{background:var(--danger-l);border-color:var(--danger)}
.shell a:not(.btn):not(.tile):not(.card):focus-visible{border-radius:4px}

@media (prefers-reduced-motion:reduce){.cs-card .progress span,.tabbar a .ic,.shell a.card{transition:none!important}.shell a.card:hover{transform:none}}
@media print{.tabbar,.topbar{display:none!important}}
.slotday>b+br{display:none}

/* Oct 20, 2026 (UX polish): Home "Before your first session" = progress + ONE Next step + short checklist; finished steps folded */
.cs-card{padding:24px}
.cs-card h2{margin:4px 0 12px}
.cs-nextbox{display:flex;flex-direction:column;gap:4px;margin:16px 0 8px;padding:16px;border-radius:var(--r-sm);background:var(--gold-soft,#F7EED2)}
.cs-nextlab{font-size:13px;font-weight:700;color:var(--gold-ink)}
.cs-nexttitle{font-size:18px;color:var(--ink)}
.cs-nextbox .btn.cs-next{margin:8px 0 0}
.cs-list a{align-items:center;min-height:48px;padding:8px 0}
.cs-list .cs-txt{flex:1}
.chip-st{flex:none;display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font-size:13px;font-weight:600;background:#EEF0F4;color:var(--muted)}
.chip-st.ok{background:#E6F2EA;color:#1E5E3A}
.chip-st.next{background:var(--gold-soft,#F7EED2);color:var(--gold-ink)}
.cs-done{margin-top:8px}
.cs-done>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:600;color:var(--muted)}
.cs-done[open]>summary{color:var(--ink)}
.cs-done>summary::before{content:'\25B8';margin-right:8px} .cs-done[open]>summary::before{content:'\25BE'}
.cs-done>summary::-webkit-details-marker{display:none} .cs-done>summary{list-style:none}

body{font-variant-ligatures:no-common-ligatures}  /* Oct 20, 2026: no "(c)" -> copyright ligature in Manrope */

/* ---------- Home, one screen (Oct 22, 2026; One screen per role, item 2): next session, one short list, crisis footer. Phone-first,
   no sideways scroll at 375px; one button per row. Brand: Navy #14284B, Gold #C9A227, Ivory #F6F4EF; Newsreader heading, Manrope body. */
.hm-hi{font:600 30px/1.15 Newsreader,Georgia,"Times New Roman",serif;color:var(--navy,#14284B);margin:4px 0 14px;letter-spacing:-.01em}
.hero.hm-next{margin-bottom:16px}
.hero.hm-next .hero-kicker{margin-top:0}
.hm-with{margin:6px 0 16px;color:#E6EAF2;font-size:15px}
.hm-manage{color:#F7EED2;font-weight:600;text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.hm-list{padding:4px 16px}
.hm-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line,#E4E1D8);min-width:0}
.hm-row:first-child{border-top:0}
.hm-row .grow{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.hm-row>.btn{flex:none;min-height:40px;white-space:nowrap}
.hm-ic{flex:none;width:36px;height:36px;border-radius:50%;background:var(--ivory,#F6F4EF);color:var(--navy,#14284B);display:flex;align-items:center;justify-content:center}
.hm-ic .i{width:18px;height:18px}
.hm-times{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.hm-crisis{margin:18px 0 8px;padding:12px 16px;border-radius:var(--r-sm);text-align:center;font-size:15px}
.hm-guard{margin:8px 2px 0}
@media (max-width:400px){.hm-hi{font-size:26px}.hm-list{padding:2px 12px}.hm-row{gap:10px}}