/* CareLog: the approved cream, forest and sage identity. */
:root, :root:not([data-theme="light"]) {
  color-scheme: light;
  --bg:#ffffef; --surface:#fffef7; --ink:#192d27; --muted:#65716a; --line:#dce0d0;
  --brand:#193c34; --brand-ink:#fffef0; --brand-soft:#e8eedc;
  --warn:#82520b; --warn-soft:#fff0ce; --bad:#963f36; --bad-soft:#fbe6df;
  --ok:#276047; --ok-soft:#e4efdf; --radius:10px; --shadow:none;
}
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--ink); }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
a { text-underline-offset:4px; }
button,.btn,a { transition:background-color .18s,color .18s,border-color .18s,transform .18s; }
button:hover,.btn:hover { border-color:#98a991; background:#edf1e4; }
button.primary:hover { background:#2b5144; color:#fff; }
button:active,.cl-button:active { transform:translateY(1px); }
:focus-visible { outline:3px solid #668c65; outline-offset:4px; }
[hidden] { display:none!important; }
.cl-brand { display:inline-flex; align-items:center; gap:8px; font-size:25px; font-weight:600; letter-spacing:-1px; text-decoration:none; color:#193c34; flex-shrink:0; }
.cl-brand img { display:block; width:35px; height:35px; flex:0 0 35px; }
.cl-wordmark { font:600 25px/1.2 "DM Sans",sans-serif; letter-spacing:-1px; }
.cl-button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 24px; border:1.5px solid #243c2e; border-radius:6px; background:#d2e5ce; color:#172b22; text-decoration:none; font-size:14px; font-weight:500; box-shadow:inset 0 0 0 2px #f6f7e9; }
.cl-button:hover { background:#c5dbb6; }
.cl-eyebrow { font-size:11px; font-weight:500; letter-spacing:1.8px; text-transform:uppercase; color:#687269; }
.cl-nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:34px; max-width:1056px; min-height:72px; margin:24px auto 0; padding:10px 16px; border:1px solid #d9ddc7; border-radius:10px; }
.cl-nav-links { display:flex; align-items:center; justify-content:center; gap:28px; margin:0; }
.cl-nav a:not(.cl-brand):not(.cl-button) { font-size:13px; text-decoration:none; color:#37483c; }
.cl-nav-actions { display:flex; align-items:center; justify-self:end; gap:24px; }
.cl-nav .cl-button { min-height:44px; padding:9px 17px; }
.cl-menu { display:none; }
.cl-landing { padding:0; }
.cl-hero { max-width:1200px; margin:auto; padding:108px 32px 62px; text-align:center; }
.cl-hero h1 { margin:28px auto 40px; font-family:'Libre Caslon Text',Georgia,serif; font-weight:400; font-size:clamp(44px,5.8vw,82px); line-height:1.17; letter-spacing:-4px; color:#17241d; }
.cl-hero h1 em { display:block; font-weight:400; padding-bottom:6px; }
.cl-hero>.cl-button { min-width:212px; }
.cl-story { display:flex; align-items:center; justify-content:center; gap:24px; max-width:1000px; margin:94px auto 0; text-align:left; }
.cl-conversation { flex:0 1 auto; width:max-content; max-width:100%; min-width:0; }
.cl-line { display:flex; align-items:baseline; gap:13px; margin-bottom:9px; font:19px/1.5 'Libre Caslon Text',Georgia,serif; letter-spacing:-.65px; }
.cl-line .cl-speaker { flex-shrink:0; }
.line-one { color:#7d8476; } .line-two { color:#646c5d; margin-left:25px; } .line-three { color:#26362b; margin-left:50px; }
.cl-speaker,.cl-person { display:inline-flex; align-items:center; gap:4px; border-radius:20px; padding:4px 8px; font:10px/1.2 'DM Sans',sans-serif; letter-spacing:0; color:#394b3d; white-space:nowrap; }
.cl-wave { display:inline-flex; align-items:center; justify-content:center; gap:1.4px; width:13px; height:12px; }
.cl-wave i { display:block; width:1.5px; height:5px; border-radius:1px; background:currentColor; }
.cl-wave i:nth-child(2),.cl-wave i:nth-child(4) { height:9px; }
.cl-wave i:nth-child(3) { height:12px; }
.rose { background:#e6c9bf; } .sage { background:#d2e5ce; } .amber { background:#f8cf90; }
.cl-records { flex:0 1 430px; min-width:0; width:100%; padding:0; }
.cl-record { display:flex; align-items:center; gap:10px; padding:13px 14px; min-height:51px; background:#f7f7e8; border:1.5px solid #344534; border-radius:6px; font-size:12px; white-space:nowrap; }
.cl-record.recorded { transform:rotate(.7deg) translate(10px,3px); margin-right:18px; }
.cl-record.open { position:relative; transform:rotate(1.1deg); margin-top:-2px; }
.cl-record .cl-person { margin-left:auto; }
.cl-check { display:block; width:16px; height:16px; flex:0 0 16px; }
.cl-open { display:block; width:16px; height:16px; border:1.5px solid #344534; border-radius:3px; flex-shrink:0; }
.cl-open-label { color:#64725b; font-size:11px; margin-left:auto; }

.cl-explanation { display:grid; grid-template-columns:1fr 1fr; gap:100px; max-width:1100px; margin:64px auto 0; padding:96px 24px; border-top:1px solid var(--line); scroll-margin-top:24px; }
.cl-explanation h2,.cl-family h2 { font-family:'Libre Caslon Text',Georgia,serif; font-size:40px; font-weight:400; line-height:1.3; letter-spacing:-1.8px; margin:20px 0; }
.cl-explanation h2 em,.cl-family h2 em { display:block; }
.cl-explanation p,.cl-contexts p { color:#5f6c5d; line-height:1.7; font-size:15px; max-width:42ch; }
.cl-steps { list-style:none; margin:0; padding:0; }
.cl-steps li { display:flex; gap:23px; padding:0 0 30px; }
.cl-step-number { font-size:12px; color:#6d7e65; padding-top:3px; font-variant-numeric:tabular-nums; }
.cl-steps h3 { font-size:17px; font-weight:500; margin-bottom:8px; }
.cl-steps p { font-size:14px; }
.cl-family { max-width:1100px; margin:auto; padding:72px 24px 96px; border-top:1px solid var(--line); }
.cl-contexts { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin:44px 0; }
.cl-contexts article { border-top:1px solid #bdc8af; padding-top:23px; }
.cl-contexts h3 { font-size:17px; font-weight:500; margin-bottom:12px; }
.cl-footer { display:flex; gap:28px; align-items:center; flex-wrap:wrap; max-width:1100px; margin:auto; padding:32px 24px; border-top:1px solid var(--line); }
.cl-footer>p { margin:0 auto 0 0; font-size:13px; color:var(--muted); }
.cl-footer>a:not(.cl-brand) { font-size:13px; }
.cl-footer .cl-boundary { width:100%; font-size:11px; }
/* Account screens share the identity; inputs keep their existing automation hooks. */
.cl-auth { min-height:100dvh; }
.cl-auth-nav { display:flex; align-items:center; justify-content:space-between; max-width:1200px; padding:30px 32px; margin:auto; }
.cl-auth-nav>a:last-child { font-size:13px; }
.cl-auth-main { display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:100px; max-width:1100px; padding:100px 32px; margin:auto; }
.cl-auth-story h1 { font:400 48px/1.28 'Libre Caslon Text',Georgia,serif; letter-spacing:-2px; margin:22px 0; }
.cl-auth-story h1 em { display:block; }
.cl-auth-story>p:last-child { max-width:38ch; color:var(--muted); line-height:1.8; }
.cl-auth-form { border:1px solid var(--line); background:#fffef7; padding:36px; border-radius:12px; }
.cl-auth-form h2 { font-weight:500; font-size:24px; margin-bottom:26px; letter-spacing:-.7px; }
.cl-auth-form .field { margin-bottom:20px; }
.cl-auth-form label { font-size:13px; font-weight:500; }
.cl-auth-note { margin:26px 0 0; font-size:11px; line-height:1.65; color:var(--muted); }
/* All authenticated screens use one consistent workspace. */
.cl-app-layout { display:grid; grid-template-columns:238px minmax(0,1fr); min-height:100dvh; }
.cl-sidebar { display:flex; flex-direction:column; position:sticky; top:0; height:100dvh; overflow:auto; background:#193c34; color:#f7f8ec; padding:30px 18px 18px; }
.cl-sidebar .cl-brand { color:#fffef0; margin:0 8px 32px; font-size:26px; }
.cl-sidebar .cl-brand img { filter:brightness(0) invert(.96); }
.cl-recipient { display:flex; align-items:center; gap:10px; margin:0 4px 24px; padding:15px 0 24px; border-bottom:1px solid #ffffff24; color:inherit; text-decoration:none; }
.cl-recipient strong { font-size:14px; font-weight:500; }
.cl-recipient small,.cl-sidebar-bottom small { display:block; font-size:10px; color:#c0cfc1; margin-top:3px; }
.cl-avatar { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#d2e5ce; color:#193c34; font-size:15px; flex-shrink:0; }
.cl-sidebar-intro { color:#c3d1c2; font-size:13px; line-height:1.8; padding:0 8px 24px; }
.cl-side-nav { display:flex; flex-direction:column; gap:3px; }
.cl-side-nav>a { display:flex; align-items:center; gap:12px; color:#e0e8dc; text-decoration:none; font-size:13px; padding:12px 14px; border-radius:7px; min-height:44px; }
.cl-side-nav>a:hover { background:#ffffff0e; }
.cl-side-nav>a[aria-current=page] { background:#ffffff1d; color:#fff; }
.cl-nav-dot { width:7px; height:7px; border:1px solid #bed1bb; border-radius:2px; }
.cl-side-nav>a[aria-current=page] .cl-nav-dot { background:#cfdfbd; }
.cl-sidebar-label { font-size:9px; text-transform:uppercase; letter-spacing:1.6px; color:#b8cbb9; padding:26px 14px 7px; margin:0; }
.cl-sidebar-bottom { margin-top:auto; padding:28px 4px 0; display:flex; align-items:center; gap:9px; }
.cl-sidebar-bottom strong { font-weight:500; font-size:12px; }
.cl-signout { margin-left:auto; min-height:36px; padding:4px 0; border:0; background:transparent; color:#cbd9c7; font-size:10px; }
.cl-signout:hover { color:#fff; background:transparent; }
.cl-workspace { min-width:0; background:#f8f8ee; }
.cl-workspace-header { min-height:80px; padding:20px 40px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); }
.cl-workspace-header p { margin:0; font-size:12px; color:#657166; }
.cl-workspace-header p span { margin:0 14px; color:#a2aa98; }
.cl-emergency-link { font-size:11px; color:#815342; text-decoration:none; border:1px solid #ddd3bf; padding:8px 12px; border-radius:6px; }
.wrap.cl-app-main { max-width:1200px; padding:34px 40px 90px; }
.cl-page-context { font-size:12px; color:#71806c; margin:0 0 20px; }
.cl-app-main h1 { font-size:32px; letter-spacing:-1.4px; font-weight:500; margin-bottom:28px; }
.cl-app-main .row.between { gap:20px; margin-bottom:22px; }
.cl-app-main .row.between h1 { margin-bottom:0; }
.cl-app-main h2 { font-size:18px; font-weight:500; margin-bottom:20px; letter-spacing:-.4px; }
.cl-app-main h3 { font-size:14px; font-weight:500; }
.cl-app-main .card { border:1px solid #dce0d1; border-radius:10px; padding:25px; background:#fffff7; box-shadow:none; margin-bottom:20px; }
.cl-app-main .card .card { border-radius:7px; padding:18px; background:transparent; }
.cl-app-main .plain>li { border-color:#e5e7db; padding:18px 0; }
.cl-app-main .plain>li:first-child { padding-top:4px; }
.cl-app-main button,.cl-app-main .btn { font-size:14px; font-weight:500; padding:10px 16px; border-radius:6px; }
.cl-app-main button.primary,.cl-auth button.primary { background:#d2e5ce; border:1px solid #36513a; color:#193c34; }
.cl-app-main button.primary:hover,.cl-auth button.primary:hover { background:#c7dcb6; }
.cl-app-main .badge { font-weight:500; font-size:12px; padding:4px 9px; }
.cl-app-main input,.cl-app-main textarea,.cl-app-main select,.cl-auth input { background:#fffef8; border-color:#cdd6c1; border-radius:6px; font-size:14px; }
.cl-app-main .table { font-size:13px; }
.cl-app-main pre { font:13px/1.8 'DM Sans',sans-serif; }
input:focus,textarea:focus,select:focus { border-color:#668363; outline:2px solid #d6e3c9; outline-offset:1px; }
dialog { background:#fffff2; color:#193c34; border:1px solid #cdd6bd; border-radius:14px; padding:32px; width:min(520px,calc(100vw - 32px)); box-shadow:0 24px 100px #0b261f2b; }
dialog::backdrop { background:#17352b65; backdrop-filter:blur(3px); }
dialog h2 { font-size:24px; font-weight:500; letter-spacing:-.8px; margin-bottom:12px; }
dialog .field { margin-top:18px; }
dialog label { font-size:12px; font-weight:500; }
dialog form>.row:last-child { margin-top:26px; }
dialog button.primary { background:#d2e5ce; color:#193c34; border-color:#506745; }
.alert { border-radius:6px; font-size:13px; }
#toast { background:#193c34; color:#fffef0; font-family:'DM Sans',sans-serif; }
@media(min-width:1600px) { .cl-hero { padding-top:130px; } .cl-story { margin-top:110px; } }
@media(max-width:1100px) { .cl-nav { margin:18px 24px 0; gap:24px; } .cl-story { gap:20px; max-width:940px; margin:64px auto 0; } .cl-conversation { flex-basis:auto; } .cl-line { font-size:16px; } .cl-records { flex-basis:44%; margin:0; } .cl-explanation { gap:48px; } .cl-app-layout { grid-template-columns:200px minmax(0,1fr); } .wrap.cl-app-main { padding:28px 24px 64px; } .cl-workspace-header { padding:20px 24px; } .cl-auth-main { gap:48px; } }
@media(max-width:760px) {
  .cl-nav { display:flex; margin:16px; min-height:64px; padding:10px 12px; gap:12px; flex-wrap:wrap; }
  .cl-nav .cl-brand { font-size:21px; } .cl-nav .cl-brand img { width:35px; height:35px; }
  .cl-nav-actions { margin-left:auto; gap:12px; } .cl-nav-actions>.cl-button { display:none; }
  .cl-menu { display:inline-flex; background:transparent; padding:6px 10px; min-height:40px; font-size:12px; }
  .cl-nav-links { display:none; justify-content:center; order:4; width:100%; padding:16px 4px 8px; border-top:1px solid var(--line); }
  .cl-nav-links.is-open { display:flex; }
  .cl-hero { padding:72px 22px 42px; } .cl-hero h1 { font-size:clamp(36px,6.8vw,54px); letter-spacing:-2px; line-height:1.24; margin:25px -5px 32px; }
  .cl-hero .cl-eyebrow { font-size:9px; letter-spacing:1.4px; }
  .cl-story { flex-direction:column; margin:64px auto 0; gap:24px; max-width:480px; }
  .cl-conversation,.cl-records { flex:auto; width:100%; }
  .cl-conversation { align-self:center; width:fit-content; max-width:100%; }
  .cl-line { font-size:14px; letter-spacing:-.4px; gap:8px; align-items:flex-start; }
  .line-two { margin-left:10px; } .line-three { margin-left:20px; }
  .cl-line .cl-speaker { margin-top:3px; font-size:9px; }
  .cl-record { font-size:12px; gap:8px; padding:12px 10px; min-height:48px; }
  .cl-record .cl-person { font-size:10px; } .cl-open-label { font-size:9px; }
  .cl-record.recorded { transform:rotate(.5deg) translate(4px,2px); margin-right:8px; }
  .cl-record.open { transform:rotate(.6deg); } .cl-story figcaption { font-size:10px; line-height:1.7; margin-top:4px; }
  .cl-explanation { grid-template-columns:1fr; gap:36px; margin:24px 22px 0; padding:56px 0 32px; }
  .cl-explanation h2,.cl-family h2 { font-size:32px; letter-spacing:-1.3px; }
  .cl-family { margin:0 22px; padding:56px 0; } .cl-contexts { grid-template-columns:1fr; gap:26px; margin:32px 0; }
  .cl-contexts article { padding-top:18px; } .cl-footer { margin:0 22px; padding:28px 0; gap:20px; }
  .cl-footer>p:not(.cl-boundary) { display:none; } .cl-footer>a:last-of-type { margin-left:auto; }
  .cl-auth-nav { padding:20px; } .cl-auth-nav>a:last-child { font-size:11px; }
  .cl-auth-main { grid-template-columns:1fr; padding:36px 22px 70px; gap:28px; max-width:540px; }
  .cl-auth-story h1 { font-size:34px; letter-spacing:-1px; } .cl-auth-story>p:last-child { display:none; }
  .cl-auth-form { padding:26px 22px; }
  .cl-app-layout { display:block; }
  .cl-sidebar { height:auto; position:relative; padding:16px 16px 0; overflow:visible; }
  .cl-sidebar .cl-brand { font-size:23px; margin:0 0 12px; }
  .cl-sidebar-intro,.cl-sidebar-label { display:none; }
  .cl-recipient { position:absolute; right:16px; top:17px; border:0; padding:0; margin:0; }
  .cl-recipient .cl-avatar { display:none; } .cl-recipient strong { font-size:11px; } .cl-recipient small { font-size:8px; }
  .cl-side-nav { flex-direction:row; overflow-x:auto; scrollbar-width:thin; scrollbar-color:#8aa48b #193c34; gap:3px; padding-bottom:10px; }
  .cl-side-nav>a { white-space:nowrap; font-size:11px; padding:9px 11px; min-height:40px; } .cl-nav-dot { display:none; }
  .cl-sidebar-bottom { position:absolute; top:18px; right:17px; padding:0; } .cl-sidebar-bottom>.cl-avatar,.cl-sidebar-bottom>span:not(.cl-avatar) { display:none; }
  .cl-sidebar:has(.cl-recipient) .cl-sidebar-bottom { position:static; justify-content:flex-end; padding:0; margin-top:-4px; }
  .cl-sidebar-bottom .cl-signout { min-height:28px; font-size:10px; }
  .cl-workspace-header { min-height:54px; padding:12px 18px; } .cl-workspace-header p { font-size:10px; } .cl-workspace-header p span { margin:0 7px; }
  .cl-emergency-link { font-size:9px; padding:7px; }
  .wrap.cl-app-main { padding:24px 18px 64px; } .cl-app-main h1 { font-size:27px; letter-spacing:-1px; margin-bottom:22px; }
  .cl-page-context { font-size:11px; line-height:1.6; margin-bottom:16px; }
  .cl-app-main .card { padding:18px; margin-bottom:16px; } .cl-app-main .card .card { padding:14px; }
  .cl-app-main .row { gap:10px; } .cl-app-main .row.between { align-items:flex-start; }
  .cl-app-main input,.cl-app-main select,.cl-app-main textarea,.cl-auth input { font-size:16px; }
  .cl-app-main .table { display:block; overflow-x:auto; }
  dialog { padding:24px; } dialog h2 { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }
@media print { .cl-sidebar,.cl-workspace-header,button { display:none; } .cl-app-layout { display:block; } .cl-app-main { max-width:none; } }

@media (min-width:761px) and (max-width:980px) {
 .cl-nav { grid-template-columns:1fr auto 1fr; gap:16px; }
 .cl-nav-actions { gap:14px; }
 .cl-nav .cl-button { font-size:11px; padding:9px 10px; }
 .cl-story { flex-direction:column; max-width:500px; gap:24px; }
 .cl-conversation,.cl-records { flex:auto; width:100%; }
 .cl-conversation { width:fit-content; }
}

/* ---------- Product polish (Oct 23) ---------- */
/* Confirmations: one calm stack in the corner, never a slab over the content. */
#toast { background:none; position:fixed; left:auto; right:24px; bottom:24px; transform:none; display:flex; flex-direction:column; align-items:flex-end; gap:8px; z-index:40; pointer-events:none; }
#toast div { pointer-events:auto; display:flex; align-items:center; gap:10px; margin:0; background:#193c34; color:#fffef0; font:500 14px/1.4 'DM Sans',sans-serif; padding:12px 16px; border-radius:10px; box-shadow:0 10px 30px #0b261f33; max-width:360px; }
#toast div::before { content:''; flex:none; width:8px; height:8px; border-radius:50%; background:#cfe3b8; }
@media(max-width:760px) { #toast { left:16px; right:16px; bottom:16px; align-items:stretch; } #toast div { max-width:none; } }

/* Labels read as words, not data: 'Owner', 'Observation', 'Given by …'. */
.badge::first-letter { text-transform:uppercase; }

/* Forms: one size, one radius, brand-coloured controls everywhere. */
input, select, textarea { font-size:15px; }
select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23193c34' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
input[type=checkbox], input[type=radio] { accent-color:#193c34; width:18px; height:18px; vertical-align:-3px; }
dialog label { font-size:13px; color:#3d5a50; }
dialog .field .small, dialog .help { font-size:12.5px; }

/* Your care circles */
.cl-circle-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.cl-circle-card { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid #e1e5d3; border-radius:12px; background:#fffff7; color:#193c34; text-decoration:none; transition:border-color .15s, background .15s; }
.cl-circle-card:hover { border-color:#9fb894; background:#fbfdf2; }
.cl-circle-card:focus-visible { outline:2px solid #668363; outline-offset:2px; }
.cl-circle-card .cl-avatar { width:40px; height:40px; font-size:16px; }
.cl-circle-text { display:flex; flex-direction:column; flex:1; min-width:0; }
.cl-circle-text strong { font-size:16px; font-weight:600; }
.cl-circle-text small { font-size:13px; color:#5f6f68; }
.cl-circle-open { font-size:13px; color:#506745; white-space:nowrap; }
.cl-empty { padding:8px 4px; }
.cl-empty h2 { font-size:20px; font-weight:500; margin:0 0 6px; }
.cl-steps { margin:16px 0 14px; padding-left:20px; display:grid; gap:6px; color:#193c34; }

/* Sidebar markers: a soft dot instead of a hollow square. */
.cl-nav-dot { border-radius:50%; width:6px; height:6px; }

/* Landing nav: a short label on phones so the header stays on one row. */
.ref-label-short { display:none; }
@media(max-width:520px) { .ref-label-long { display:none; } .ref-label-short { display:inline; } }
.cl-app-main .cl-steps { list-style:decimal; }
.cl-app-main .cl-steps > li { padding:0 0 0 4px; border:0; margin:0; font-size:15px; }
.cl-app-main .cl-circle-list > li { padding:0; border:0; }

/* ---------- Workspace v2: light sidebar, icon navigation, centred column ---------- */
.cl-app-layout { grid-template-columns:248px minmax(0,1fr); background:#f6f6ec; }
.cl-sidebar { background:#f6f6ec; color:#193c34; padding:24px 14px 16px; border-right:1px solid #e3e5d6; }
.cl-sidebar .cl-brand { color:#193c34; margin:0 10px 22px; font-size:22px; }
.cl-sidebar .cl-brand img { filter:none; }
.cl-recipient { margin:0 0 14px; padding:10px; border:1px solid #e3e5d6; border-radius:12px; background:#fffff7; align-items:center; }
.cl-recipient:hover { border-color:#c5d3b8; }
.cl-recipient > span:nth-child(2) { flex:1; min-width:0; }
.cl-recipient strong { font-size:14px; font-weight:600; color:#193c34; }
.cl-recipient small { color:#6b7a70; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cl-recipient .cl-icon { color:#8a978c; }
.cl-side-nav { gap:2px; }
.cl-side-nav>a { color:#2f4a40; font-size:14px; font-weight:500; padding:9px 12px; min-height:40px; border-radius:9px; gap:12px; }
.cl-side-nav>a .cl-icon { color:#5d7067; flex:none; }
.cl-side-nav>a:hover { background:#ecede0; }
.cl-side-nav>a[aria-current=page] { background:#e3ead3; color:#193c34; }
.cl-side-nav>a[aria-current=page] .cl-icon { color:#193c34; }
.cl-side-rule { border:0; border-top:1px solid #e3e5d6; margin:10px 6px; }
.cl-side-card { margin:16px 2px 0; padding:14px; border:1px solid #e3e5d6; border-radius:12px; background:#fffff7; }
.cl-side-card strong { display:block; font-size:13px; font-weight:600; }
.cl-side-card p { font-size:12px; line-height:1.5; color:#5f6f68; margin:4px 0 10px; }
.cl-side-card .btn { display:inline-flex; align-items:center; gap:7px; font-size:13px; min-height:34px; padding:6px 11px; background:#d2e5ce; border:1px solid #506745; color:#193c34; border-radius:8px; text-decoration:none; }
.cl-sidebar-bottom { border-top:1px solid #e3e5d6; padding:14px 6px 0; margin-top:auto; }
.cl-sidebar-bottom strong { font-size:13px; font-weight:600; }
.cl-sidebar-bottom small { color:#6b7a70; font-size:11px; }
.cl-signout { color:#506745; font-size:12px; }
.cl-signout:hover { color:#193c34; }
.cl-workspace { min-width:0; }
.cl-app-main.wrap { max-width:920px; margin:0 auto; padding:44px 40px 80px; }
.cl-app-main > div > .row.between:first-child, .cl-app-main > div > h1:first-child { margin-bottom:22px; }
.cl-app-main h1 { font-size:30px; font-weight:500; letter-spacing:-.8px; margin:0; }
.cl-app-main .card { border-radius:14px; border-color:#e3e5d6; background:#fffff7; box-shadow:0 1px 0 #0b261f08; }
.cl-app-main .card > h2:first-child, .cl-app-main .card > h3:first-child { font-size:12px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:#6b7a70; margin:0 0 14px; }
@media(max-width:760px) {
  .cl-sidebar { padding:14px 14px 0; border-right:0; border-bottom:1px solid #e3e5d6; }
  .cl-sidebar .cl-brand { font-size:20px; margin:0 0 10px; }
  .cl-recipient { position:absolute; right:14px; top:10px; padding:6px 8px; margin:0; }
  .cl-recipient small, .cl-recipient .cl-icon { display:none; }
  .cl-side-nav { scrollbar-color:#b9c7b5 #f6f6ec; }
  .cl-side-nav>a { font-size:13px; padding:8px 11px; }
  .cl-side-nav>a .cl-icon { width:16px; height:16px; }
  .cl-side-rule, .cl-side-card { display:none; }
  .cl-app-main.wrap { padding:24px 16px 64px; }
}
.cl-side-nav>a { min-height:36px; padding:7px 12px; }
.cl-side-rule { margin:8px 6px; }
.cl-side-card { margin-top:12px; padding:12px; }
.cl-sidebar .cl-brand { margin-bottom:18px; }
/* Empty states read as a calm centred message, not a stray line. */
.cl-app-main .card > p.muted:only-child, .cl-app-main .card > p.muted:only-of-type:last-child { text-align:center; padding:26px 0; margin:0; }
/* Settings */
.cl-side-settings { display:flex; align-items:center; gap:12px; margin-top:12px; padding:7px 12px; min-height:36px; border-radius:9px; color:#2f4a40; font-size:14px; font-weight:500; text-decoration:none; }
.cl-side-settings .cl-icon { color:#5d7067; }
.cl-side-settings:hover { background:#ecede0; }
.cl-side-settings[aria-current=page] { background:#e3ead3; color:#193c34; }
.cl-settings h1 { margin-bottom:22px; }
.cl-settings .card { margin-bottom:16px; }
.cl-settings .field { margin-top:14px; max-width:440px; }
.cl-settings .field label { display:block; font-size:13px; font-weight:500; color:#3d5a50; margin-bottom:6px; }
.cl-settings .row { margin-top:18px; }
.cl-readonly { margin:0; padding:10px 0; font-size:15px; color:#193c34; }
.ok-text { color:#2f6a3f; margin-top:12px; } .bad-text { color:#a33a2b; margin-top:12px; }
@media(max-width:760px) { .cl-side-settings { display:inline-flex; margin:0 0 8px; min-height:30px; font-size:12px; padding:4px 8px; } }