/* Aneligma Web 0.11.0 — calm blue/gray theme, readable type scale and easier layout.
   Loaded last: it overrides the colours and sizes of the earlier CSS layers and adds the new layout rules.
   Inline styles are not used anywhere (the page CSP only allows style files from this site).

   COLOURS (blues and grays only, no greens)
     header  ink slate blue #16283A · hover #1F3448 · active #24425A · text #F7F9FA · secondary text #9FB3BF · divider #2B3D4F
     actions muted steel blue #2B5675 (hover #356689) · active indicator soft steel blue #7FA6C4
     page background #FAF8F5 · cards / surfaces #F2F5F7 · text #22333B · secondary text #5A6B72
     status colours stay functional: warning amber #C98A3B and error red #B4483F (red only for errors and critical alerts);
     "success" uses the blue family with a check icon.
   Status is never colour alone: warnings, errors, success and info messages also carry an icon and a label.

   TYPE (Inter for the interface, Source Sans 3 for notes and large text fields; both with Greek and Greek Extended)
     H1 28–32 · H2 22–24 · H3 18–20 · body 16–17 / 1.6 · notes 17–18 / 1.7 · small labels 13–14 medium · buttons 15–16 */

:root{
  --bg:#faf8f5;--surface:#f2f5f7;--surface-2:#e8edf0;--white:#ffffff;
  --ink:#22333b;--muted:#5a6b72;
  --line:#d5dee3;--line-2:#e1e8ec;
  --blue:#2b5675;--blue-dark:#1f3f58;--blue-tint:#e1eaf1;--blue-soft:#c5d6e3;--blue-ink:#3e6684;
  --sage:#7fa6c4;--sage-accent:#7fa6c4;--sage-ink:#3e6684;--sage-tint:#e4ecf2;--sage-soft:#c5d6e3;
  --success:#7fa6c4;--success-ink:#2b5675;--success-tint:#e3ecf3;
  --warning:#c98a3b;--warning-ink:#6b4510;--warning-tint:#f8ecd9;--warning-line:#e6c690;
  --error:#b4483f;--error-tint:#f7e5e2;--error-line:#e4b5af;
  --ring:#2b5675;
  --navy:#16283a;--navy-2:#1f3448;--navy-active:#24425a;--steel:#7fa6c4;--offwhite:#f7f9fa;--header-line:#2b3d4f;--navy-text:#9fb3bf;--blue-hover:#356689;
  --ui:'Inter Variable','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --notes:'Source Sans 3','Source Sans Pro','Inter Variable','Inter',-apple-system,'Segoe UI',Arial,sans-serif;
  --shadow:0 1px 2px #22333b10,0 6px 22px #22333b0a;
}
html{color-scheme:light}
body{background:var(--bg);color:var(--ink);font-family:var(--ui)}
::selection{background:var(--sage-soft)}

/* ---------- base type and tokens used by the older rules ---------- */
#therapy-flow{--paper:var(--bg);--panel:var(--surface);--ink:#22333b;--muted:#5a6b72;--line:#d5dee3;--sage:var(--blue-tint);--deep:var(--blue);
  background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:16px;line-height:1.6}
#therapy-flow .small,#therapy-flow .heading .small,#therapy-flow .person .small{color:var(--muted);font-size:14px;font-weight:500;line-height:1.5}
#therapy-flow .small{font-weight:400}
#therapy-flow button{font-family:var(--ui);font-size:15px;font-weight:500;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
@media(prefers-reduced-motion:reduce){#therapy-flow button{transition:none}}
#therapy-flow button:hover{border-color:var(--sage-accent)}
#therapy-flow button:focus-visible,#therapy-flow summary:focus-visible,#therapy-flow a:focus-visible,
#therapy-flow input:focus-visible,#therapy-flow textarea:focus-visible,#therapy-flow select:focus-visible,
#gate button:focus-visible,#gate input:focus-visible,#gate a:focus-visible,.language-bar select:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
#therapy-flow input:focus,#therapy-flow textarea:focus,#therapy-flow select:focus{outline:2px solid var(--ring);outline-offset:1px;border-color:var(--blue)}

/* headings */
#therapy-flow h2{font-family:var(--ui);font-weight:600;letter-spacing:-.3px;color:var(--ink);font-size:22px;line-height:1.3}
#therapy-flow .heading h2{font-size:30px;line-height:1.25;letter-spacing:-.5px}
#therapy-flow h3,#therapy-flow .overview-context h3{font-family:var(--ui);font-size:19px;font-weight:600;letter-spacing:-.2px;line-height:1.35;color:var(--ink)}
#therapy-flow .report-section h2{font-size:22px}

/* ---------- buttons ---------- */
#therapy-flow button{background:var(--white);border:1px solid var(--line);color:var(--ink);border-radius:10px}
#therapy-flow .primary,#therapy-flow .heading .primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600;font-size:15px}
#therapy-flow .primary:hover,#therapy-flow .heading .primary:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
#therapy-flow form>button:not(.primary):not([type=button]){background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
#therapy-flow form>button:not(.primary):not([type=button]):hover{background:var(--blue-hover)}
#therapy-flow .quiet-action,#therapy-flow .heading .quiet-action{color:var(--muted);background:transparent;border-color:transparent;font-size:14px}
#therapy-flow .quiet-action:hover{background:var(--surface-2);border-color:var(--line)}
#therapy-flow .text-link{font-size:14px}

/* ---------- top bar ---------- */
/* header: ink slate blue for structure; steel blue for actions (lighter on hover) and the active state, red only for urgent */
#therapy-flow header{background:var(--navy);color:var(--offwhite);border-bottom:1px solid var(--header-line)}
#therapy-flow header :focus-visible{outline-color:var(--offwhite)}
#therapy-flow #home-brand{font:600 24px/1 var(--ui);letter-spacing:-.6px;color:#DCE5EB;background:transparent;border:0;border-radius:8px;padding:6px 8px;margin:-6px -8px}
#therapy-flow #home-brand:hover{background:var(--navy-2);border:0}
#therapy-flow header>div:first-child .small{color:var(--navy-text);font-size:14px}
#therapy-flow .alpha-badge{background:var(--navy-2);color:var(--offwhite);border:1px solid var(--header-line);border-radius:999px;padding:3px 11px;font-size:13px;font-weight:500;letter-spacing:0}
.language-bar select{font-family:var(--ui);background:var(--surface);color:var(--ink);border:1px solid transparent;border-radius:9px;font-size:14px;font-weight:500}
.language-bar select:hover{border-color:var(--line)}
#therapy-flow #app-tools>summary{font-size:15px;font-weight:500;color:var(--offwhite);border:1px solid #3b5166;background:transparent;border-radius:10px;padding:8px 13px;position:relative}
#therapy-flow #app-tools>summary:hover{background:var(--navy-2)}
#therapy-flow #app-tools[open]>summary{background:var(--navy-active);box-shadow:inset 0 -3px 0 var(--steel)}
/* urgent dot on Tools when another tab changed the vault (the alert itself also has an icon and text) */
#therapy-flow:has(#web-conflict:not([hidden])) #app-tools>summary::after{content:"";position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:var(--error);border:2px solid var(--navy)}
#therapy-flow .desktop-toolbar{color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px #22333b26}
#therapy-flow .desktop-toolbar button,#therapy-flow .desktop-toolbar .manual-link{font-size:15px;font-weight:500}
#therapy-flow .desktop-toolbar button:hover,#therapy-flow .desktop-toolbar .manual-link:hover{background:var(--blue-tint)}
#therapy-flow .desktop-toolbar p{border-top-color:var(--line-2);color:var(--muted);font-size:13px}
#therapy-flow .desktop-toolbar #save-all,#therapy-flow .desktop-toolbar #lock-all{font-weight:600;color:var(--blue-dark)}
#therapy-flow .recording-controls button{background:var(--sage-tint);border-color:var(--sage-soft);color:var(--blue-dark);font-size:13px}
/* another tab changed the vault: a critical alert, so red with an icon */
#web-conflict{background:var(--error-tint);color:#7d2a23;border-bottom:1px solid var(--error-line);font-size:15px}
#web-conflict::before{content:"⚠ ";font-weight:700}

@media(min-width:801px){body:has(#therapy-flow:not([hidden])) .language-bar select{background:var(--navy-2);color:var(--offwhite);border:1px solid #3b5166}
body:has(#therapy-flow:not([hidden])) .language-bar select:hover{border-color:var(--steel)}
body:has(#therapy-flow:not([hidden])) .language-bar select:focus-visible{outline-color:var(--offwhite)}}

/* ---------- client list (left) ---------- */
#therapy-flow aside{background:var(--surface);border-right:1px solid var(--line)}
#therapy-flow aside>h3{color:var(--muted);font-size:13px;font-weight:600;letter-spacing:.5px}
#therapy-flow #search{background:var(--white);border:1px solid var(--line);border-radius:10px;font-size:15px}
#therapy-flow #filter{color:var(--muted);font-size:14px;font-weight:500}
#therapy-flow .person{font-size:15px;border-radius:10px;border:1px solid transparent;border-left:3px solid transparent;color:var(--ink)}
#therapy-flow .person:hover{background:var(--white);border-color:var(--line);border-left-color:var(--sage-accent)}
#therapy-flow .person[aria-pressed=true]{background:var(--blue-tint);border-color:var(--sage-soft);border-left-color:var(--blue);color:var(--blue-dark);font-weight:600}
#therapy-flow .person[aria-pressed=true] .small{color:var(--blue-dark)}
/* "New client" is the main creation action, so it is the one solid button in the list */
#therapy-flow #add{background:var(--blue);color:#fff;border:1px solid var(--blue);font-weight:600;font-size:15px;border-radius:10px;min-height:44px}
#therapy-flow #add:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
#therapy-flow #finance-all,#therapy-flow #defaults{color:var(--muted);font-size:14px;background:transparent;border:0}
#therapy-flow #finance-all:hover,#therapy-flow #defaults:hover{background:var(--white);color:var(--blue-dark)}

/* ---------- section navigation (second column) ---------- */
#therapy-flow #view>nav{background:var(--surface);border-right:1px solid var(--line)}
/* the client name is already in the page heading, so the repeated name above the menu goes */
#therapy-flow .nav-profile{display:none}
#therapy-flow nav button{color:var(--ink);border-left:3px solid transparent;border-radius:0 10px 10px 0;font-size:15px;font-weight:500;line-height:1.4;padding-left:10px;padding-right:8px}
#therapy-flow nav button:hover{background:var(--white);border-color:transparent;border-left-color:var(--steel)}
#therapy-flow nav button[aria-pressed=true],#therapy-flow nav button[aria-current=page]{background:var(--blue-tint);color:var(--blue-dark);border-left:3px solid var(--steel);font-weight:600}
#therapy-flow nav .nav-icon{color:var(--blue);opacity:.9}
/* group the menu: everyday clinical work / people & paperwork / money & output */
#therapy-flow #view>nav>button:nth-of-type(4),#therapy-flow #view>nav>button:nth-of-type(8){margin-top:10px;position:relative}
#therapy-flow #view>nav>button:nth-of-type(4)::before,#therapy-flow #view>nav>button:nth-of-type(8)::before{content:"";position:absolute;left:12px;right:12px;top:-6px;border-top:1px solid var(--line)}
#therapy-flow #view:has(>nav){grid-template-columns:232px minmax(0,1fr)}
@media(min-width:851px){#therapy-flow #view>nav{min-height:calc(100dvh - 98px)}}

/* ---------- page heading ---------- */
#therapy-flow .profile-heading{background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--shadow);border-radius:16px}
#therapy-flow .heading .primary{border-radius:11px;box-shadow:0 2px 8px #2b567533}

/* ---------- cards and forms ---------- */
#therapy-flow .box{background:var(--surface);border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow)}
#therapy-flow .field>span,#therapy-flow .formulation-card .entry b{color:var(--muted);font-size:14px;font-weight:500}
#therapy-flow input:not([type=checkbox]),#therapy-flow select{font-family:var(--ui);font-size:16px;background:var(--white);border:1px solid #c3d0d6;border-radius:10px;color:var(--ink)}
/* notes and large text fields: Source Sans 3, 17px, relaxed leading */
#therapy-flow textarea,#therapy-flow .saved,#therapy-flow .session-excerpt{font-family:var(--notes);font-size:17px;line-height:1.7}
#therapy-flow textarea{background:var(--white);border:1px solid #c3d0d6;border-radius:10px;color:var(--ink)}
#therapy-flow .saved{color:var(--ink)}
#therapy-flow .session-excerpt{color:var(--ink);font-size:16px}
#therapy-flow .task{font-size:16px;line-height:1.6}
#therapy-flow .task input,#therapy-flow input[type=checkbox]{accent-color:var(--blue)}
#therapy-flow .task:has(input[data-task]:checked){color:var(--muted)}
#therapy-flow .topics-card .task{border-bottom-color:var(--line-2)}
#therapy-flow .add-topic{border-top-color:var(--line-2)}
#therapy-flow .add-topic>summary,#therapy-flow .text-link{color:var(--blue-dark);font-size:14px;font-weight:500}
#therapy-flow .formulation-card .actions button,#therapy-flow .formulation-card details,#therapy-flow .overview-main>details{font-size:14px}
/* reminders are warnings: amber with an icon and a label, never colour alone */
#therapy-flow .notice{background:var(--warning-tint);color:var(--warning-ink);border:1px solid var(--warning-line);border-left:4px solid var(--warning);border-radius:12px;font-size:15px}
#therapy-flow .notice::before{content:"⚠";font-weight:700;margin-right:8px}
#therapy-flow .notice button{margin-left:8px}
#therapy-flow .context-link{background:var(--blue-tint);color:var(--blue-dark);border-radius:10px;font-size:15px}
#therapy-flow .context-link:hover{background:var(--sage-soft)}
#therapy-flow .goal-mark{border-color:#8fa2aa}
#therapy-flow .goal-mark.achieved{background:var(--success-ink);border-color:var(--success-ink);color:#fff}
#therapy-flow .session-date{color:var(--ink);font-size:18px}
#therapy-flow .goal-glance li{color:var(--ink);font-size:15px}
#therapy-flow .empty-note{color:var(--muted);font-size:14px}
#therapy-flow details>summary{cursor:pointer}
#therapy-flow .subtabs [aria-pressed=true]{background:var(--blue-tint);border-color:var(--blue)}
#therapy-flow .reflection-panel,#therapy-flow .source-picker{background:var(--white);border-color:var(--line)}
#therapy-flow .connection{background:var(--white)}
#therapy-flow th,#therapy-flow td{border-bottom-color:var(--line-2);font-size:15px}
#therapy-flow .history-field{border-bottom-color:var(--line-2)}
.history-field,.expense-form{border-color:var(--line-2)}
#therapy-flow .dictate{font-size:13px}

/* quick "add item" row: field and button side by side */
#therapy-flow #task-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
#therapy-flow #task-form .field{flex:1 1 220px;margin:0}
#therapy-flow #task-form button{min-height:44px}

/* dictation microphone sits inside the note box instead of taking its own row */
#therapy-flow label.field{position:relative}
#therapy-flow label.field>textarea{display:block;padding-right:48px;min-height:124px}
#therapy-flow label.field>.local-mic{position:absolute;right:8px;bottom:8px;margin:0;display:block;width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;background:var(--surface);border:1px solid var(--line);opacity:.85}
#therapy-flow label.field>.local-mic:hover,#therapy-flow label.field:focus-within>.local-mic{opacity:1;background:var(--blue-tint);border-color:var(--sage-accent)}
@media(pointer:coarse){#therapy-flow label.field>.local-mic{width:40px;height:40px;min-height:40px}}

/* session form: comfortable width, date field not stretched, save button always in reach */
#therapy-flow #session-form{max-width:860px}
#therapy-flow #session-form input[type=date]{width:auto;min-width:200px}
#therapy-flow #session-form>[data-key],#therapy-flow #session-form>.field{max-width:none}
#therapy-flow #session-form>.actions{position:sticky;bottom:0;z-index:5;margin:22px -27px -25px;padding:14px 27px;background:var(--surface);box-shadow:0 -10px 14px -6px #22333b14;border-top:1px solid var(--line-2);border-radius:0 0 16px 16px}
#therapy-flow #session-form>.actions .primary{min-height:46px;padding:0 22px;font-size:16px}

/* new client form */
#therapy-flow #new-form{max-width:640px;margin:0 auto}
#therapy-flow #new-form h2{margin-bottom:6px}
#therapy-flow #ai-draft{width:100%;background:var(--sage-tint);border-color:var(--sage-soft);color:var(--blue-dark);font-weight:600}
#therapy-flow #ai-draft:hover{background:var(--sage-soft);border-color:var(--sage-accent)}

/* ---------- home ---------- */
#therapy-flow.global-screen #view{max-width:1100px;padding:40px 32px 56px}
.home-intro{padding:20px 0 28px}
.home-intro h1{font:600 32px/1.25 var(--ui);letter-spacing:-.7px;color:var(--ink);margin:12px 0}
.home-intro.compact h1{font-size:28px}
.home-intro em{font-style:normal;font-weight:600;color:var(--blue)}
.home-intro p{color:var(--muted);font-size:17px}
.eyebrow,#therapy-flow .eyebrow{color:var(--blue-dark);font-size:13px;font-weight:600;letter-spacing:1px}
.home-card{background:var(--surface)!important;border:1px solid var(--line-2)!important;box-shadow:var(--shadow);border-radius:18px!important;min-height:200px}
.home-card:hover{border-color:var(--sage-accent)!important;background:var(--white)!important;box-shadow:0 10px 30px #22333b14;transform:translateY(-2px)}
@media(prefers-reduced-motion:no-preference){.home-card{transition:transform .18s,box-shadow .18s,border-color .18s,background-color .18s}}
.card-number,#therapy-flow .card-number{color:var(--sage-ink);font-weight:500;margin-bottom:26px}
.home-card h2{font-family:var(--ui)!important;font-size:22px!important;font-weight:600;color:var(--ink)}
.home-card p{color:var(--muted);font-size:15px;line-height:1.6}
.card-arrow{color:var(--blue)}
.home-bottom p{color:var(--muted);font-size:14px}
#therapy-flow .home-bottom button{background:var(--white);border-radius:10px}

/* "continue from here": recent clients and a quick start, added by home-quick.js */
.home-recent{margin:0 0 30px;padding:22px 24px;background:var(--surface);border:1px solid var(--line-2);border-radius:18px;box-shadow:var(--shadow)}
.home-recent-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:12px}
#therapy-flow .home-recent-head h2{margin:0;font-size:22px}
#therapy-flow .home-recent-new{background:var(--blue);color:#fff;border:1px solid var(--blue);border-radius:11px;padding:10px 18px;font-weight:600;min-height:44px}
#therapy-flow .home-recent-new:hover{background:var(--blue-hover);border-color:var(--blue-hover)}
.home-recent-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
#therapy-flow .home-recent-item{display:flex;width:100%;justify-content:space-between;align-items:center;gap:12px;text-align:left;background:var(--white);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;min-height:62px}
#therapy-flow .home-recent-item:hover{background:var(--blue-tint);border-color:var(--sage-accent)}
.home-recent-name{display:block;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.home-recent-meta{display:block;font-size:14px;font-weight:400;color:var(--muted)}
.home-recent-go{color:var(--blue);font-size:20px;line-height:1}
.home-recent-empty{color:var(--muted);font-size:15px;margin:0}

/* other full-page screens */
.settings-grid .box,.journey-grid .box{background:var(--surface)}
.settings-grid p,.source-detail p,.reflection-prompts p,.journey-item{color:var(--muted);font-size:15px}
.settings-grid button,.source-detail button,.connection-title button{font-size:14px!important}
.source-detail{border-bottom-color:var(--line-2)}
.source-detail summary,.source-detail summary small,.source-excerpt{color:var(--muted);font-size:14px}
.source-detail summary{color:var(--ink);font-size:15px}
/* money: label + icon say what the colour means */
.money-card{background:var(--surface);border-color:var(--line-2);border-radius:14px}
.money-card>span{color:var(--muted);font-size:14px;font-weight:500}
.money-card small{color:var(--muted);font-size:13px}
.money-card strong{font-family:var(--ui);font-weight:600;letter-spacing:-.5px}
.money-card.credit{background:var(--success-tint);border-color:var(--sage-soft);color:var(--success-ink)}
.money-card.credit>span{color:var(--success-ink)}
.money-card.credit>span::before{content:"✓ ";font-weight:700}
.money-card.due{background:var(--warning-tint);border-color:var(--warning-line);color:var(--warning-ink)}
.money-card.due>span{color:var(--warning-ink)}
.money-card.due>span::before{content:"⚠ ";font-weight:700}
.entry-pill{background:var(--surface-2);color:var(--ink);font-size:13px;font-weight:500}
.entry-pill.payment{background:var(--success-tint);color:var(--success-ink)}
.entry-pill.payment::before{content:"✓ "}
.entry-pill.charge::before{content:"+ "}
.balance-label{font-size:14px;font-weight:500}
.balance-label.credit{color:var(--success-ink)}.balance-label.credit::before{content:"✓ "}
.balance-label.due{color:var(--warning-ink)}.balance-label.due::before{content:"⚠ "}
#therapy-flow .money-cell{font-family:var(--ui);font-variant-numeric:tabular-nums}

/* ---------- status bar, back to top ---------- */
#therapy-flow .app-statusbar{background:var(--surface);border-top:1px solid var(--line);color:var(--muted);font-size:13px}
#therapy-flow #desktop-status{color:var(--blue-dark);font-size:13px;font-weight:500}
#therapy-flow #back-to-top{background:var(--white);color:var(--blue);border-color:var(--line)}
#therapy-flow #back-to-top:hover{background:var(--blue-tint)}

/* ---------- sign-in screen ---------- */
#gate{max-width:480px;background:var(--surface);border:1px solid var(--line-2);border-radius:22px;box-shadow:0 20px 70px #22333b14;color:var(--ink);font-family:var(--ui)}
.web-brand{font:600 36px/1 var(--ui);letter-spacing:-1.2px;color:var(--blue);margin-bottom:28px}
.web-brand small{border:1px solid var(--sage-soft);background:var(--sage-tint);color:var(--blue-dark);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:500;letter-spacing:.8px}
#gate h1{font:600 28px/1.25 var(--ui);letter-spacing:-.5px;color:var(--ink);margin:0 0 6px}
#gate>p{color:var(--muted);font-size:14px;margin:0 0 6px}
#gate label{font-size:14px;font-weight:500;color:var(--ink);margin:16px 0}
#gate input{font-family:var(--ui);background:var(--white);border:1px solid #c3d0d6;border-radius:11px;color:var(--ink);font-weight:400;font-size:16px}
#gate input:focus{border-color:var(--blue)}
#gate #create-note{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 14px}
#gate #open-label{background:var(--blue);border-radius:12px;font-family:var(--ui);font-size:16px;font-weight:600;min-height:48px;box-shadow:0 3px 10px #2b567538}
#gate #open-label:hover{background:var(--blue-dark)}
#gate button[data-drive-open]{width:100%;background:var(--white);color:var(--blue-dark);border:1px solid var(--sage-soft);border-radius:12px;min-height:44px;font-family:var(--ui);font-size:15px;font-weight:600;margin-top:10px}
#gate button[data-drive-open]:hover{background:var(--blue-tint)}
#gate #restore-vault,#gate #previous-backup{font-family:var(--ui);color:var(--blue-dark);font-size:15px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#gate .manual-link,#gate a{color:var(--blue-dark);font-size:15px;display:inline-block;margin-top:14px;text-underline-offset:3px}
/* sign-in errors: red, with an icon */
#gate-message{color:#8c2f28;font-size:15px;font-weight:500}
#gate-message:not(:empty){padding:10px 12px;background:var(--error-tint);border:1px solid var(--error-line);border-radius:10px}
#gate-message:not(:empty)::before{content:"✕ ";font-weight:700}
.web-local{border-top:1px solid var(--line-2);color:var(--muted);font-size:14px}

/* ---------- dialogs ---------- */
#web-help,#speech-dialog,#ai-dialog,#drive-dialog{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 80px #22333b33;font-family:var(--ui);font-size:16px;line-height:1.6}
#web-help::backdrop,#speech-dialog::backdrop,#ai-dialog::backdrop,#drive-dialog::backdrop{background:#22333b66}
#web-help h2,#ai-dialog h2,#drive-dialog h2,#speech-dialog h2{font-family:var(--ui);font-size:22px;font-weight:600;letter-spacing:-.3px}
#ai-dialog h3{font-size:18px}
#web-help .manual-callout{background:var(--blue-tint)}
#web-help .manual-link,#ai-dialog a,#drive-dialog a{color:var(--blue-dark)}
#web-help-close,#speech-dialog button,#ai-dialog button,#drive-dialog button{background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:10px;cursor:pointer;font-family:var(--ui);font-size:15px;font-weight:500;padding:10px 16px;min-height:42px}
#ai-dialog .ai-close,#drive-dialog .drive-close,#web-help-close{min-height:36px;padding:6px 12px;font-size:14px}
#ai-dialog button:hover,#drive-dialog button:hover,#speech-dialog button:hover,#web-help-close:hover{background:var(--blue-tint);border-color:var(--sage-accent)}
#ai-dialog>button:not(.ai-close),#ai-dialog .ai-actions button:first-child{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
#ai-dialog>button:not(.ai-close):hover,#ai-dialog .ai-actions button:first-child:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
#ai-dialog>button:not(.ai-close){display:inline-block;margin:6px 12px 6px 0}
#ai-dialog button:disabled,#drive-dialog button:disabled{opacity:.55;cursor:not-allowed}
#ai-dialog textarea,#speech-dialog textarea{font-family:var(--notes);font-size:17px;line-height:1.7;background:var(--white);border:1px solid #c3d0d6;color:var(--ink)}
#drive-dialog input{font-family:var(--ui);font-size:16px;background:var(--white);border:1px solid #c3d0d6;color:var(--ink)}
#ai-dialog textarea:focus,#drive-dialog input:focus,#speech-dialog textarea:focus{outline:2px solid var(--ring);outline-offset:1px;border-color:var(--blue)}
.ai-field,.drive-version{background:var(--white);border-color:var(--line)}
.ai-field span{font-family:var(--notes);font-size:17px;line-height:1.7}
.ai-field b{font-size:14px;font-weight:500;color:var(--muted)}
/* messages in dialogs: neutral information with an icon (the text itself says if something failed) */
#ai-dialog [role=status]:not(:empty),#drive-dialog [role=status]:not(:empty),#ai-pending{background:var(--blue-tint);color:var(--blue-dark);border:1px solid var(--sage-soft);font-size:15px}
#ai-dialog [role=status]:not(:empty)::before,#drive-dialog [role=status]:not(:empty)::before,#ai-pending::before{content:"ℹ ";font-weight:700}
.ai-empty{color:var(--muted)}
#dictation-menu{background:var(--white);border-color:var(--line)}#dictation-menu button{background:var(--white);color:var(--ink);font:500 15px var(--ui)}
#speech-status{color:var(--blue-dark);font-size:15px}#speech-description{color:var(--muted);font-size:14px}

/* ---------- laptop widths ---------- */
@media(max-width:1250px){#therapy-flow .heading h2{font-size:28px}#therapy-flow #view:has(>nav){grid-template-columns:196px minmax(0,1fr)}}

/* ---------- phone and small tablet ---------- */
@media(max-width:800px){
  body{background:var(--bg)}
  /* language selector: a quiet strip, no longer shifted over the header */
  .language-bar{position:static!important;right:auto!important;top:auto!important;height:auto;justify-content:flex-end;padding:6px 12px!important;background:var(--bg)}
  .language-bar select{font-size:15px;padding:6px 10px}
  #therapy-flow header{padding:10px 16px!important;min-height:0}
  #therapy-flow #app-tools>summary{min-height:44px;display:flex;align-items:center}

  /* client list becomes a compact bar: search, "new client", then a scrolling row of clients */
  #therapy-flow .shell>aside{display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px 8px;padding:12px 14px!important;background:var(--surface)}
  #therapy-flow.global-screen .shell>aside{display:none!important}
  #therapy-flow aside>h3{display:none}
  #therapy-flow #search{grid-column:1;grid-row:1;min-height:44px;font-size:16px}
  #therapy-flow #add{grid-column:2;grid-row:1;width:auto;margin:0;padding:0 14px;min-height:44px;white-space:nowrap}
  #therapy-flow aside>.field{grid-column:1/-1;grid-row:3;margin:0}
  #therapy-flow aside>.field #filter{width:auto;max-width:none;min-height:34px;padding:2px 6px}
  #therapy-flow #people{grid-column:1/-1;grid-row:2;margin:0;max-height:none;padding-bottom:4px;min-height:0}
  #therapy-flow #people .person{min-width:150px;max-width:210px;background:var(--white);border:1px solid var(--line);border-left-width:1px;margin:0}
  #therapy-flow #people .person[aria-pressed=true]{background:var(--blue-tint);border-color:var(--blue)}
  /* money summary and defaults stay one tap away from the home screen (click the Aneligma name) */
  #therapy-flow #finance-all,#therapy-flow #defaults{display:none}

  #therapy-flow main{padding:14px!important}
  #therapy-flow #view:has(>nav){padding:0!important;gap:12px}
  #therapy-flow .profile-heading{padding:16px 18px;min-height:0;border-radius:16px;align-items:stretch}
  #therapy-flow .heading h2{font-size:28px}
  #therapy-flow .heading .actions{width:100%;justify-content:flex-start}
  #therapy-flow .heading>div:first-child{text-align:left}
  #therapy-flow #view>nav{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:6px!important;box-shadow:var(--shadow)}
  #therapy-flow #view>nav>button{border-left:0;border-bottom:3px solid transparent;border-radius:10px;min-height:44px}
  #therapy-flow #view>nav>button[aria-pressed=true]{border-left:0;border-bottom:3px solid var(--steel)}
  #therapy-flow #view>nav>button:nth-of-type(4)::before,#therapy-flow #view>nav>button:nth-of-type(8)::before{display:none}
  #therapy-flow #view>nav>button:nth-of-type(4),#therapy-flow #view>nav>button:nth-of-type(8){margin-top:0}
  #therapy-flow .box{padding:18px;border-radius:14px}
  #therapy-flow #session-form>.actions{margin:20px -18px -18px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));border-radius:0 0 14px 14px}
  #therapy-flow #session-form>.actions .primary{flex:1 1 100%}
  #therapy-flow #session-form>.actions button:not(.primary){flex:1 1 100%;min-height:40px;background:transparent;border-color:transparent;color:var(--muted);font-size:14px;text-decoration:underline;text-underline-offset:3px}
  #therapy-flow #new-form{max-width:none}
  .home-intro h1{font-size:28px}
  .home-recent{padding:18px}
  .home-recent-list{grid-template-columns:1fr}
  #therapy-flow.global-screen #view{padding:20px 6px 40px}

  /* "New session" stays within thumb reach while reading a file */
  #therapy-flow .profile-heading .primary{min-height:48px}
  #therapy-flow:not(.global-screen) .heading [data-action=new-session]{position:fixed;right:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:25;border-radius:999px;padding:0 20px;min-height:52px;font-size:16px;box-shadow:0 8px 24px #2b567555}
  #therapy-flow:has(#session-form) .heading [data-action=new-session],
  #therapy-flow:has(#new-form) .heading [data-action=new-session]{display:none}
  #therapy-flow #back-to-top{bottom:calc(84px + env(safe-area-inset-bottom))}
  #therapy-flow .app-statusbar{padding-bottom:max(10px,env(safe-area-inset-bottom))}
}
@media(max-width:800px) and (min-width:0){#therapy-flow .shell>main{padding-bottom:84px!important}}
@media(min-width:1550px){#therapy-flow .saved,#therapy-flow textarea{font-size:18px}}

@media print{.home-recent{display:none!important}}

/* ===== 0.12.0 ===== */
#therapy-flow #header-new{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--ui);color:var(--offwhite);background:transparent;border:1px solid var(--steel);border-radius:10px;padding:9px 14px;min-height:40px;cursor:pointer}
#therapy-flow #header-new:hover{background:var(--navy-2)}
#therapy-flow #header-new:active{background:var(--navy-active)}
#therapy-flow #header-new:focus-visible{outline:3px solid var(--steel);outline-offset:2px}
#therapy-flow #header-new>span:first-child{font-size:20px;line-height:1;font-weight:500}
@media(max-width:800px){#therapy-flow #header-new .cta-label{display:none}#therapy-flow #header-new{min-width:44px;min-height:44px;justify-content:center;padding:0 12px}}

#therapy-flow .chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
#therapy-flow .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid #c5d3dc;border-radius:999px;background:var(--surface,#f2f5f7);color:var(--ink);font-size:14px}
#therapy-flow .overview-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:20px;align-items:start}
#therapy-flow .overview-main,#therapy-flow .overview-context{display:grid;gap:16px;min-width:0}
@media(max-width:1000px){#therapy-flow .overview-grid{grid-template-columns:1fr}}
#therapy-flow .card-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
#therapy-flow .text-link,#therapy-flow .context-link{background:transparent;border:0;color:var(--blue);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 0;min-height:44px}
#therapy-flow .context-link{display:flex;width:100%;justify-content:space-between;text-decoration:none;font-weight:600}
#therapy-flow .understanding-item{border-top:1px solid #dbe3e8;padding:4px 0}
#therapy-flow .understanding-item>summary{display:grid;grid-template-columns:24px auto 1fr;gap:10px;align-items:center;min-height:44px;cursor:pointer;list-style:none}
#therapy-flow .understanding-item .nav-icon{width:22px;height:22px;color:var(--blue)}
#therapy-flow .u-title{font-weight:600}
#therapy-flow .u-excerpt{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#therapy-flow .axis-glance{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#therapy-flow .axis-glance li{display:flex;gap:10px;align-items:center}
#therapy-flow .axis-dot{width:10px;height:10px;border-radius:50%;background:var(--blue);flex:none}
#therapy-flow .thread{list-style:none;margin:0 0 8px;padding:0 0 0 14px;border-left:2px solid #c5d3dc;display:grid;gap:4px}
#therapy-flow .thread li button{display:grid;gap:2px;width:100%;text-align:left;background:transparent;border:0;padding:8px;min-height:44px;border-radius:8px;cursor:pointer;color:var(--ink);font:inherit}
#therapy-flow .thread li button:hover{background:var(--surface,#f2f5f7)}
#therapy-flow .thread li.now button .t-date{font-weight:600}
#therapy-flow .t-date{display:flex;gap:8px;align-items:center}
#therapy-flow .tag{font-size:13px;padding:1px 8px;border-radius:999px;background:#e3ebf1;color:var(--blue)}
#therapy-flow .t-note{color:var(--muted);font-size:15px}
#therapy-flow .task{display:flex;gap:10px;align-items:flex-start;min-height:44px;align-items:center}

/* ratings */
#therapy-flow .quick-rating{border:1px solid #c5d3dc;border-radius:12px;padding:8px 14px;margin:14px 0;background:var(--surface,#f2f5f7)}
#therapy-flow .quick-rating>summary{font-weight:600;min-height:44px;display:flex;align-items:center;cursor:pointer}
#therapy-flow .rate-group{border:0;padding:0;margin:12px 0}
#therapy-flow .rate-group legend{font-weight:600;color:var(--blue);padding:0 0 6px}
#therapy-flow .rate-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid #dbe3e8}
#therapy-flow .rate-q{display:grid;gap:2px}
#therapy-flow .rate-scale{display:flex;gap:6px;flex-wrap:wrap}
#therapy-flow .rate-scale button{min-width:44px;min-height:44px;border:1px solid #9db5c6;border-radius:10px;background:#fff;color:var(--ink);font:600 16px var(--ui);cursor:pointer}
#therapy-flow .rate-scale button[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:inset 0 -3px 0 #16283a}
#therapy-flow .rate-scale .rate-na{padding:0 12px;min-width:0}
@media(max-width:700px){#therapy-flow .rate-row{grid-template-columns:1fr}}
#therapy-flow .rate-list{list-style:none;padding:0;margin:6px 0;display:grid;gap:4px}
#therapy-flow .rate-list li{display:flex;justify-content:space-between;max-width:420px;border-bottom:1px dotted #c5d3dc}
#therapy-flow .rate-pickers{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:10px 0}
#therapy-flow .rating-chart{width:100%;height:auto;max-height:300px;background:#fff;border:1px solid #dbe3e8;border-radius:10px}
#therapy-flow .rate-legend{list-style:none;display:flex;flex-wrap:wrap;gap:16px;padding:0;margin:10px 0}
#therapy-flow .rate-legend li{display:flex;align-items:center;gap:8px}
#therapy-flow .legend-swatch{width:40px;height:14px}
#therapy-flow .table-wrap{overflow-x:auto}
#therapy-flow .rate-table table{border-collapse:collapse;min-width:100%}
#therapy-flow .rate-table th,#therapy-flow .rate-table td{padding:6px 10px;border-bottom:1px solid #dbe3e8;text-align:left}

/* plan */
#therapy-flow .axis-card{border:1px solid #c5d3dc;border-radius:12px;padding:6px 14px;margin:10px 0;background:#fff}
#therapy-flow .axis-card>summary{min-height:48px;display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600}
#therapy-flow .status-chip{font-size:13px;padding:2px 10px;border-radius:999px;border:1px solid #9db5c6;background:#e3ebf1;color:var(--ink);font-weight:500}
#therapy-flow .status-progress{background:#dbe8f2;border-color:var(--blue);color:var(--blue)}
#therapy-flow .status-paused{background:#eef0f1;border-color:#9aa7ad;color:var(--muted)}
#therapy-flow .status-achieved{background:var(--blue);border-color:var(--blue);color:#fff}
#therapy-flow .axis-dialog{border:1px solid #9db5c6;border-radius:14px;padding:20px;max-width:min(640px,94vw);width:100%;background:var(--bg,#faf8f5);color:var(--ink)}
#therapy-flow .axis-dialog::backdrop{background:#16283a99}
#therapy-flow .seg-row{display:inline-flex;border:1px solid #9db5c6;border-radius:10px;overflow:hidden}
#therapy-flow .seg{border:0;border-radius:0;min-height:44px;background:#fff;color:var(--ink)}
#therapy-flow .seg[aria-pressed=true]{background:var(--blue);color:#fff}
#therapy-flow .review-box,#therapy-flow .review-item{border-top:1px solid #dbe3e8;padding:10px 0}
#therapy-flow .measure-block{border-left:3px solid var(--steel);padding-left:12px;margin:10px 0}
#therapy-flow .related-axes{border:1px solid #c5d3dc;border-radius:10px;padding:8px 12px;margin:10px 0}
#therapy-flow .related-axes label{display:flex;gap:10px;align-items:center;min-height:44px}
#therapy-flow .code-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
#therapy-flow .session-mini{border-top:1px solid #dbe3e8;padding:8px 0}

/* upgrade notice */
#upgrade-notice{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;max-width:min(560px,94vw);background:#fff;color:#22333b;border:1px solid #2b5675;border-radius:14px;padding:16px 18px;box-shadow:0 10px 30px #16283a44;display:grid;gap:10px}
#upgrade-notice[hidden]{display:none}
#upgrade-notice .actions{display:flex;gap:10px;flex-wrap:wrap}

/* read aloud */
#therapy-flow .listen-btn,#therapy-flow .listen-controls button{min-height:44px;padding:0 14px;border:1px solid var(--blue);border-radius:10px;background:transparent;color:var(--blue);font:600 15px var(--ui);cursor:pointer}
#therapy-flow .listen-btn[aria-pressed=true]{background:var(--blue);color:#fff}
#therapy-flow .listen-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
#therapy-flow .listen-msg{color:var(--muted)}
#therapy-flow input.has-mic{padding-right:52px}
#therapy-flow .ai-session-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:6px 0 14px}
#ai-dialog{max-width:min(720px,96vw);max-height:92vh;overflow:auto}
#ai-dialog .ai-field{display:grid;gap:4px;margin:10px 0;position:relative}
#ai-dialog .ai-field>label{font-weight:600}
#ai-dialog .ai-field textarea,#ai-dialog .ai-field input{width:100%;box-sizing:border-box;font:16px/1.5 var(--ui)}
#ai-dialog .ai-field-tools{display:flex;justify-content:flex-end}
#ai-dialog .ai-note{border-left:3px solid var(--steel);padding-left:10px}
#ai-dialog .listen-btn,#ai-dialog .listen-controls button{min-height:44px;padding:0 14px;border:1px solid #2b5675;border-radius:10px;background:transparent;color:#2b5675;font:600 15px var(--ui);cursor:pointer}
#ai-dialog .listen-btn[aria-pressed=true]{background:#2b5675;color:#fff}
#ai-dialog .listen-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0;position:sticky;top:0;background:inherit;z-index:1;padding:6px 0}
#ai-dialog .listen-msg{color:#5a6b72}
#ai-dialog .ai-field textarea{min-height:64px}
#therapy-flow #task-form{flex-wrap:nowrap}
#therapy-flow #task-form .field{flex:1 1 120px;min-width:0}
#therapy-flow #task-form button:not(.local-mic){flex:none}
#therapy-flow #task-form .local-mic{min-height:36px}
#therapy-flow .alpha-badge{font-size:13px!important}
#therapy-flow .u-title{color:var(--ink)}
@media(max-width:800px){#therapy-flow #header-new{justify-self:end;width:auto}}

/* 0.12.5 · Κουτί γλώσσας μέσα στο header (βλ. layout.js). Καμία σταθερή απόσταση, καμία επικάλυψη. */
@media(min-width:801px){
 #therapy-flow header{display:flex!important;align-items:center;gap:12px;flex-wrap:nowrap}
 #therapy-flow header>div:first-child{flex:0 0 auto}
 #therapy-flow header>.alpha-badge{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #therapy-flow header>#header-new{margin-left:auto}
 #therapy-flow header>#header-new,#therapy-flow header>#app-tools,#therapy-flow header>.language-bar{flex:0 0 auto;white-space:nowrap}
 #therapy-flow #app-tools{margin:0!important}
 .language-bar.in-header{position:static!important;right:auto!important;top:auto!important;height:auto!important;padding:0!important;margin:0!important;background:none!important;display:flex;align-items:center}
 .language-bar.in-header select{min-height:40px}
}

/* 0.12.8 · Βίντεο «Πώς ξεκινάς» */
#tutorial-dialog{width:min(960px,94vw);max-height:94vh;padding:18px 20px 14px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 80px #22333b33;font-family:var(--ui)}
#tutorial-dialog::backdrop{background:#22333b99}
#tutorial-dialog h2{font-family:var(--ui);font-size:22px;font-weight:600;margin:0 0 12px}
#tutorial-dialog video{display:block;width:100%;height:auto;max-height:70vh;border-radius:12px;background:#16283A}
#tutorial-dialog p{margin:10px 0 0;color:var(--muted,#5A6B72)}
#tutorial-close{float:right;min-height:40px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:0 14px;cursor:pointer;font:500 15px var(--ui)}
.tutorial-open{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:12px;padding:0 16px;border:1px solid #2b5675;background:#e4ecf2;color:#16283A;border-radius:10px;font:600 15px var(--ui,Inter,sans-serif);cursor:pointer}
.tutorial-open:hover{background:#c5d6e3}
.tutorial-open:focus-visible{outline:3px solid #7fa6c4;outline-offset:2px}
#gate .tutorial-open{width:100%;justify-content:center}
#gate button.tutorial-open,#gate button.tutorial-open:hover{background:#e4ecf2;color:#16283A;border:1px solid #2b5675;box-shadow:none}
#gate button.tutorial-open:hover{background:#c5d6e3}
#therapy-flow #view button.tutorial-open{background:#e4ecf2;color:#16283A;border:1px solid #2b5675}