/* Contact Coordinator — app.css
   Design system carried over from the Bloodless Care Network prototype.
   All colors flow through CSS variables; themes swap the variable sets
   via <html data-theme="...">. */

/* ---------- Self-hosted fonts (no CDNs) ---------- */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('../fonts/fraunces-var.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/inter-var.woff2') format('woff2');
}

/* ---------- Theme: Warm Paper (default — the prototype) ---------- */
:root{
  --ink:#0f1b24;--ink-2:#172833;--paper:#f4f2ec;--card:#fff;--line:#e2ded4;--line-2:#d3cec2;
  --text:#1c2b34;--muted:#5f6f78;--accent:#0f766e;--accent-d:#0b5a53;
  --amber:#b0740a;--green:#15803d;--slate:#64748b;--rust:#9a3412;
  --shadow:0 1px 2px rgba(15,27,36,.06),0 6px 18px rgba(15,27,36,.06);--radius:14px;
  --bar-text:#eaf1f2;--bar-sub:#9fb2b8;--ghost-text:#cfe0e2;--ghost-border:#33454f;--ghost-hover:#1e313b;
  --tab-text:#8ea1a8;--tab-hover:#dce7e9;--tab-border:#24343d;--dot-bg:#2c3f49;--dot-text:#bcd0d4;
  --chip-bg:#eef4f3;--chip-text:#0d5750;--chip-border:#d6e6e3;--chip-hover:#e0efec;
  --intro-bg:#eef4f3;--intro-border:#d6e6e3;--intro-text:#215750;
  --entry-bg:#f7f6f1;--notes-bg:#faf9f5;--input-bg:#fff;--hover-bg:#faf9f5;
  --tag-bg:#eceef1;--tag-text:#41525c;--tag-border:#dde1e5;--tag-hover:#e0e3e7;
  --cancel-bg:#eef0ee;--cancel-hover:#e3e6e2;
  --danger-bg:#fdf3ee;--danger-border:#9a3412;
  --b-green-bg:#e4f4e9;--b-green-t:#15803d;--b-amber-bg:#faf0dc;--b-amber-t:#b0740a;
  --b-slate-bg:#eef1f4;--b-slate-t:#64748b;--b-rust-bg:#f6e7df;--b-rust-t:#9a3412;
  --b-teal-bg:#e0f0ee;--b-teal-t:#0f766e;--b-plum-bg:#f0e6f4;--b-plum-t:#7e3f98;
  --add-bg:#eef4f3;--add-border:#b6d3ce;--add-hover:#e2efec;
}

/* ---------- Theme: Cool Slate ---------- */
html[data-theme="slate"]{
  --ink:#111827;--ink-2:#1c2536;--paper:#eef1f6;--card:#fff;--line:#dde2ec;--line-2:#c9d0de;
  --text:#1f2937;--muted:#64748b;--accent:#4356c0;--accent-d:#33429b;
  --chip-bg:#eceffb;--chip-text:#33429b;--chip-border:#d8ddf5;--chip-hover:#e0e5f8;
  --intro-bg:#eceffb;--intro-border:#d8ddf5;--intro-text:#33429b;
  --entry-bg:#f4f6fa;--notes-bg:#f8f9fc;--hover-bg:#f6f7fb;
  --bar-sub:#9aa7bd;--ghost-text:#ccd6e8;--ghost-border:#3a465e;--ghost-hover:#252f45;
  --tab-text:#8b98b0;--tab-hover:#dbe2f0;--tab-border:#28324a;--dot-bg:#323e58;--dot-text:#bccbe2;
  --add-bg:#eceffb;--add-border:#b9c3ec;--add-hover:#e0e5f8;
  --b-teal-bg:#e4e8fa;--b-teal-t:#4356c0;
}

/* ---------- Theme: Sage Green ---------- */
html[data-theme="sage"]{
  --ink:#16211a;--ink-2:#203026;--paper:#f0f3ec;--card:#fff;--line:#dee4d6;--line-2:#cbd4c0;
  --text:#22312a;--muted:#61705f;--accent:#3f6f4f;--accent-d:#31573e;
  --chip-bg:#ecf3ea;--chip-text:#31573e;--chip-border:#d6e4d2;--chip-hover:#e1ecdd;
  --intro-bg:#ecf3ea;--intro-border:#d6e4d2;--intro-text:#31573e;
  --entry-bg:#f4f6f0;--notes-bg:#f8faf5;--hover-bg:#f6f8f2;
  --bar-sub:#a2b3a4;--ghost-text:#d0dfd2;--ghost-border:#3b4f40;--ghost-hover:#2a3b2f;
  --tab-text:#93a595;--tab-hover:#dce8de;--tab-border:#2b3d31;--dot-bg:#354a3b;--dot-text:#c2d4c5;
  --add-bg:#ecf3ea;--add-border:#b8d0b8;--add-hover:#e1ecdd;
  --b-teal-bg:#e3efe4;--b-teal-t:#3f6f4f;
}

/* ---------- Theme: Night Mode ---------- */
html[data-theme="dark"]{
  --ink:#0a1216;--ink-2:#101c22;--paper:#0f191e;--card:#17242b;--line:#243440;--line-2:#31485a;
  --text:#d9e4e8;--muted:#8ba1ab;--accent:#22a99b;--accent-d:#1b877c;
  --amber:#d99a3d;--green:#4cc077;--slate:#93a5b8;--rust:#e0805a;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.3);
  --bar-text:#e6eef0;--bar-sub:#8ba1ab;--ghost-text:#c4d5da;--ghost-border:#31485a;--ghost-hover:#1b2c35;
  --tab-text:#7e939d;--tab-hover:#d5e2e6;--tab-border:#1d2d36;--dot-bg:#263a45;--dot-text:#a7bec7;
  --chip-bg:#152e2e;--chip-text:#7dd8cc;--chip-border:#1f4640;--chip-hover:#1a3a38;
  --intro-bg:#132a2a;--intro-border:#1f4640;--intro-text:#8fd3c9;
  --entry-bg:#122029;--notes-bg:#121e25;--input-bg:#101b21;--hover-bg:#1b2a32;
  --tag-bg:#20303a;--tag-text:#a9bcc6;--tag-border:#2c414e;--tag-hover:#273944;
  --cancel-bg:#22323b;--cancel-hover:#2a3d48;
  --danger-bg:#2c1c14;--danger-border:#e0805a;
  --b-green-bg:#143120;--b-green-t:#5fd394;--b-amber-bg:#33270f;--b-amber-t:#e6b566;
  --b-slate-bg:#222f3d;--b-slate-t:#a9bccf;--b-rust-bg:#331d12;--b-rust-t:#eb9a77;
  --b-teal-bg:#0f3330;--b-teal-t:#63d1c3;--b-plum-bg:#2c1d33;--b-plum-t:#cf9fe0;
  --add-bg:#132a2a;--add-border:#2a5a52;--add-hover:#173432;
}

/* ---------- Theme: Ocean (light, blue) ---------- */
html[data-theme="ocean"]{
  --ink:#0c2440;--ink-2:#123255;--paper:#eef4fb;--card:#fff;--line:#dbe6f2;--line-2:#c4d6ea;
  --text:#12283f;--muted:#5a7088;--accent:#2563eb;--accent-d:#1d4ed8;
  --chip-bg:#e7f0fd;--chip-text:#1d4ed8;--chip-border:#cfe0fb;--chip-hover:#dbe9fd;
  --intro-bg:#e7f0fd;--intro-border:#cfe0fb;--intro-text:#1d4ed8;
  --entry-bg:#f2f6fc;--notes-bg:#f7fafe;--hover-bg:#f4f8fd;
  --bar-sub:#9fb6d2;--ghost-text:#cfe0f4;--ghost-border:#34506f;--ghost-hover:#1c3757;
  --tab-text:#8ba3c2;--tab-hover:#dbe8f7;--tab-border:#243f5c;--dot-bg:#2c476a;--dot-text:#bcd2ee;
  --add-bg:#e7f0fd;--add-border:#b9d1f4;--add-hover:#dbe9fd;
  --b-teal-bg:#e2ecfd;--b-teal-t:#2563eb;
}

/* ---------- Theme: Plum (light, purple) ---------- */
html[data-theme="plum"]{
  --ink:#241033;--ink-2:#331a44;--paper:#f6eef8;--card:#fff;--line:#e7dcec;--line-2:#d7c6de;
  --text:#2d1a38;--muted:#6f5f78;--accent:#8e3f9e;--accent-d:#733083;
  --chip-bg:#f3e8f6;--chip-text:#733083;--chip-border:#e6d3ec;--chip-hover:#eddcf1;
  --intro-bg:#f3e8f6;--intro-border:#e6d3ec;--intro-text:#733083;
  --entry-bg:#f6f0f8;--notes-bg:#faf5fb;--hover-bg:#f7f1f9;
  --bar-sub:#b39cbd;--ghost-text:#e0d0e6;--ghost-border:#4b3a54;--ghost-hover:#2f1f39;
  --tab-text:#a992b3;--tab-hover:#ecdff0;--tab-border:#3a273f;--dot-bg:#483450;--dot-text:#d6c2dd;
  --add-bg:#f3e8f6;--add-border:#d9bee2;--add-hover:#eddcf1;
  --b-teal-bg:#f0e2f4;--b-teal-t:#8e3f9e;
}

/* ---------- Theme: Sunrise (light, warm amber) ---------- */
html[data-theme="sunrise"]{
  --ink:#3a1e0c;--ink-2:#4d2a12;--paper:#fdf3ec;--card:#fff;--line:#f0e0d3;--line-2:#e6cbb6;
  --text:#3a2417;--muted:#7a6153;--accent:#c2410c;--accent-d:#9a3412;
  --amber:#b0740a;--green:#15803d;
  --chip-bg:#fbe7d8;--chip-text:#9a3412;--chip-border:#f4d7c2;--chip-hover:#f8ddca;
  --intro-bg:#fbe7d8;--intro-border:#f4d7c2;--intro-text:#9a3412;
  --entry-bg:#fbf1e9;--notes-bg:#fdf7f2;--hover-bg:#fcf4ee;
  --bar-sub:#c9ab97;--ghost-text:#f0dccc;--ghost-border:#5c4030;--ghost-hover:#3f2717;
  --tab-text:#c2a693;--tab-hover:#f6e4d6;--tab-border:#4a2e1c;--dot-bg:#5a3a26;--dot-text:#e8cdb9;
  --add-bg:#fbe7d8;--add-border:#eec6a8;--add-hover:#f8ddca;
  --b-teal-bg:#fbe3d3;--b-teal-t:#c2410c;
}

/* ---------- Theme: Midnight (dark, indigo) ---------- */
html[data-theme="midnight"]{
  --ink:#080d1a;--ink-2:#0e1526;--paper:#0b1220;--card:#151d30;--line:#25304a;--line-2:#33436a;
  --text:#dbe1f0;--muted:#8b97b8;--accent:#6366f1;--accent-d:#4f52d6;
  --amber:#d99a3d;--green:#4cc077;--slate:#93a5b8;--rust:#e0805a;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 18px rgba(0,0,0,.32);
  --bar-text:#e6eaf6;--bar-sub:#8b97b8;--ghost-text:#c7cdf0;--ghost-border:#33436a;--ghost-hover:#1a2540;
  --tab-text:#8390b5;--tab-hover:#d6dcf2;--tab-border:#1d2740;--dot-bg:#28345a;--dot-text:#aeb9e2;
  --chip-bg:#1c2340;--chip-text:#aeb2f5;--chip-border:#2b3358;--chip-hover:#232b4e;
  --intro-bg:#191f3a;--intro-border:#2b3358;--intro-text:#b7bcf7;
  --entry-bg:#141c30;--notes-bg:#121a2c;--input-bg:#0f1728;--hover-bg:#1b2440;
  --tag-bg:#1f2740;--tag-text:#aab6d6;--tag-border:#2c3757;--tag-hover:#26314f;
  --cancel-bg:#222c46;--cancel-hover:#2a3654;
  --danger-bg:#2c1c22;--danger-border:#e0805a;
  --b-green-bg:#12321f;--b-green-t:#5fd394;--b-amber-bg:#33270f;--b-amber-t:#e6b566;
  --b-slate-bg:#232c44;--b-slate-t:#aab6d6;--b-rust-bg:#331d18;--b-rust-t:#eb9a77;
  --b-teal-bg:#1e2350;--b-teal-t:#8f92f6;--b-plum-bg:#2a1d3a;--b-plum-t:#cf9fe0;
  --add-bg:#191f3a;--add-border:#39407a;--add-hover:#1f2645;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}html,body{margin:0}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--text);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
a{color:var(--accent)}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:600}

/* ---------- App bar & tabs ---------- */
.bar{background:var(--ink);color:var(--bar-text);position:sticky;top:0;z-index:1100}
.bar .wrap{display:flex;align-items:center;gap:18px;padding:14px 20px;flex-wrap:wrap;max-width:none;margin:0;width:100%}
/* in-app emoji picker (Trips "Symbol" fields) */
.emo-wrap{display:flex;gap:5px;align-items:stretch}
.emo-wrap input{flex:1;min-width:0}
.emo-btn{flex:0 0 auto;border:1px solid var(--line-2);background:var(--card);color:var(--text);border-radius:8px;cursor:pointer;font-size:15px;line-height:1;padding:0 9px}
.emo-btn:hover{border-color:var(--accent)}
.emo-pop{position:absolute;z-index:1300;background:var(--card);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 10px 34px rgba(0,0,0,.28);padding:8px;width:250px}
.emo-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;max-height:200px;overflow-y:auto}
.emo-c{border:none;background:none;cursor:pointer;font-size:18px;line-height:1;padding:5px;border-radius:7px}
.emo-c:hover{background:var(--hover-bg,rgba(127,127,127,.16))}
.emo-clear{margin-top:6px;width:100%;border:1px solid var(--line);background:none;color:var(--muted);border-radius:8px;cursor:pointer;font-size:12px;padding:5px}
.emo-clear:hover{border-color:var(--accent);color:var(--accent)}
.brand{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-family:'Fraunces',serif;font-weight:600;font-size:19px;letter-spacing:.2px}
.brand b a{color:inherit;text-decoration:none}
.brand span{font-size:12px;color:var(--bar-sub);margin-top:3px}
.bar-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabs{background:var(--ink-2);border-bottom:1px solid var(--tab-border)}
.tabs .wrap{display:flex;gap:2px;overflow-x:auto;padding:0 20px}
.tab{display:inline-block;background:none;border:none;color:var(--tab-text);text-decoration:none;font-family:inherit;font-size:13.5px;font-weight:600;padding:13px 15px;cursor:pointer;white-space:nowrap;border-bottom:2.5px solid transparent;transition:.15s}
.tab:hover{color:var(--tab-hover)}.tab.active{color:#fff;border-bottom-color:var(--accent)}
.tab .dot{display:inline-block;min-width:18px;padding:0 5px;height:18px;line-height:18px;text-align:center;font-size:11px;border-radius:9px;background:var(--dot-bg);color:var(--dot-text);margin-left:6px;font-weight:700}
main{padding:26px 0 70px}

/* ---------- Buttons ---------- */
.btn{border:1px solid transparent;border-radius:9px;padding:8px 13px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;transition:.15s;text-decoration:none}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-d)}
/* Ghost buttons default to theme-aware text so they stay legible inside page
   content (light or dark bodies). The light-on-dark variant is scoped to the
   dark top bar, where these buttons were originally designed to sit. */
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-2)}.btn-ghost:hover{background:rgba(127,127,127,.14)}
.bar .btn-ghost{color:var(--ghost-text);border-color:var(--ghost-border)}.bar .btn-ghost:hover{background:var(--ghost-hover)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-cancel{background:var(--cancel-bg);color:var(--text)}.btn-cancel:hover{background:var(--cancel-hover)}
.btn-danger{background:var(--rust);color:#fff}
.btn-outline{background:var(--card);color:var(--accent);border-color:var(--line-2)}.btn-outline:hover{border-color:var(--accent)}
.link-btn{background:none;border:none;color:var(--accent);font-family:inherit;font-weight:600;font-size:12.5px;cursor:pointer;padding:2px 0;display:inline-flex;align-items:center;gap:4px;text-decoration:none}
.link-btn:hover{text-decoration:underline}.link-btn.danger{color:var(--rust)}

/* ---------- Cards, grid, stats ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:15px 16px;transition:.15s}
.card:hover{border-color:var(--line-2)}
.c-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.c-name{font-weight:700;font-size:15.5px}
.c-cred{color:var(--muted);font-weight:600;font-size:13px}
.c-spec{color:var(--accent-d);font-size:13px;font-weight:600;margin-top:1px}
html[data-theme="dark"] .c-spec{color:var(--accent)}
.badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.b-green{background:var(--b-green-bg);color:var(--b-green-t)}.b-amber{background:var(--b-amber-bg);color:var(--b-amber-t)}
.b-slate{background:var(--b-slate-bg);color:var(--b-slate-t)}.b-rust{background:var(--b-rust-bg);color:var(--b-rust-t)}
.b-teal{background:var(--b-teal-bg);color:var(--b-teal-t)}.b-plum{background:var(--b-plum-bg);color:var(--b-plum-t)}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.tag{font-size:11px;padding:2px 8px;border-radius:6px;background:var(--tag-bg);color:var(--tag-text);border:1px solid var(--tag-border);cursor:pointer}
.tag:hover{background:var(--tag-hover)}
.c-line{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:12.5px;margin-top:9px}
.c-line a{color:var(--accent);text-decoration:none}
.c-foot{display:flex;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);flex-wrap:wrap;align-items:center}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 16px;box-shadow:var(--shadow)}
.stat .n{font-family:'Fraunces',serif;font-size:30px;font-weight:600;line-height:1}
.stat .l{font-size:12px;color:var(--muted);margin-top:5px}

/* ---------- Location head, chips, notes ---------- */
.hosp-head{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;margin-bottom:18px}
.hosp-head h2{font-size:23px;margin:0 0 4px}
.hosp-meta{display:flex;flex-wrap:wrap;gap:14px;color:var(--muted);font-size:13px;margin-bottom:14px}
.hosp-meta a{color:var(--accent);text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:12px;padding:4px 10px;border-radius:20px;background:var(--chip-bg);color:var(--chip-text);border:1px solid var(--chip-border);cursor:pointer;transition:.12s}
.chip:hover{background:var(--chip-hover)}.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.subhead{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:16px 0 8px}
.notes-area{width:100%;min-height:70px;border:1px dashed var(--line-2);border-radius:10px;background:var(--notes-bg);padding:11px 13px;font-family:inherit;font-size:13.5px;color:var(--text);resize:vertical}
.notes-area:focus{outline:none;border-color:var(--accent);background:var(--input-bg)}
.saved-flag{font-size:11px;color:var(--green);margin-left:8px;opacity:0;transition:.3s}.saved-flag.show{opacity:1}

/* ---------- Toolbar ---------- */
.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.toolbar input:not([type=checkbox]):not([type=radio]),.toolbar select{font-family:inherit;font-size:13px;border:1px solid var(--line-2);border-radius:9px;padding:8px 11px;background:var(--input-bg);color:var(--text)}
.toolbar input:not([type=checkbox]):not([type=radio]){flex:1;min-width:180px}
.toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--accent)}

/* ---------- Overview cards ---------- */
.ov-hosp{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.ov-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow);cursor:pointer;transition:.15s;color:inherit;text-decoration:none}
.ov-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.ov-card h3{font-size:18px;margin:0 0 3px}
.ov-card .addr{font-size:12px;color:var(--muted);margin-bottom:11px}
.ov-counts{display:flex;gap:14px;font-size:12.5px}
.ov-counts b{font-size:17px;display:block;font-family:'Fraunces',serif}
.add-hosp{background:var(--add-bg);border:1.5px dashed var(--add-border);color:var(--accent-d);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;box-shadow:none}
.add-hosp:hover{background:var(--add-hover)}
html[data-theme="dark"] .add-hosp{color:var(--accent)}
.intro{background:var(--intro-bg);border:1px solid var(--intro-border);border-radius:12px;padding:15px 18px;font-size:13.5px;color:var(--intro-text);margin-bottom:20px}
.empty{text-align:center;color:var(--muted);padding:44px 22px;background:var(--card);border:1px dashed var(--line-2);border-radius:var(--radius)}
.empty b{color:var(--text);font-size:15.5px}
.empty-ico{font-size:34px;line-height:1;margin-bottom:10px;opacity:.85}
.empty-sub{max-width:44ch;margin:6px auto 0;font-size:13.5px;line-height:1.5}
.empty-cta{margin-top:14px}

/* ---------- Activity feed ---------- */
.feed{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.feed-row{display:flex;gap:12px;align-items:flex-start;padding:12px 18px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}
a.feed-link{cursor:pointer;transition:background .12s}
a.feed-link:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.feed-row:last-child{border-bottom:none}
.feed-row:hover{background:var(--hover-bg)}
.feed-main{flex:1;min-width:0}
.feed-t{font-size:13.5px}.feed-t .who{color:var(--accent-d);font-weight:600}
html[data-theme="dark"] .feed-t .who{color:var(--accent)}
.feed-note{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.feed-when{text-align:right;white-space:nowrap}
.feed-when .d{font-size:12px;font-weight:700;color:var(--text)}
.feed-when .k{font-size:10.5px;color:var(--muted)}

/* ---------- Interaction log / entries ---------- */
details.log{margin-top:11px;border-top:1px solid var(--line);padding-top:10px}
details.log>summary{list-style:none;cursor:pointer}
details.log>summary::-webkit-details-marker{display:none}
.log h4{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:10px 0 6px;font-weight:700}
.entry{font-size:12.5px;padding:6px 9px;background:var(--entry-bg);border-radius:8px;margin-bottom:5px}
.entry .d{font-weight:700;color:var(--text)}
.entry .by{color:var(--muted);font-size:11px}
.mini-form{display:flex;gap:6px;margin:6px 0 12px;flex-wrap:wrap}
.mini-form input{font-family:inherit;font-size:12.5px;border:1px solid var(--line-2);border-radius:7px;padding:6px 8px;background:var(--input-bg);color:var(--text)}
.mini-form input.date{width:140px}.mini-form input.grow{flex:1;min-width:120px}
.mini-form textarea{font-family:inherit;font-size:12.5px;border:1px solid var(--line-2);border-radius:7px;padding:7px 9px;background:var(--input-bg);color:var(--text);resize:vertical;line-height:1.45;min-height:36px}
.mini-form textarea.grow{flex:1;min-width:120px}
.mini-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.note-form{align-items:flex-start}   /* keep the Add button at the top as the note box grows */
.entry-edit{border:1.5px solid var(--accent);background:var(--chip-bg)}
.danger-box{background:var(--danger-bg);border:1.5px solid var(--danger-border);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.danger-box .t{font-weight:700;color:var(--rust);margin-bottom:6px}

/* ---------- Tasks ---------- */
.task{display:flex;gap:8px;align-items:center;font-size:12.5px;padding:6px 9px;background:var(--entry-bg);border-radius:8px;margin-bottom:5px}
.task.done .txt{text-decoration:line-through;color:var(--muted)}
.task .due{font-weight:700;white-space:nowrap}
.task .due.overdue{color:var(--rust)}
.task form{display:inline;margin:0}

/* ---------- Modals ---------- */
.overlay{position:fixed;inset:0;background:rgba(10,18,22,.55);display:none;align-items:flex-start;justify-content:center;padding:30px 16px;overflow:auto;z-index:1400}
.overlay.show{display:flex}
.modal{background:var(--card);border-radius:16px;max-width:540px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--line);font-family:'Fraunces',serif;font-size:19px;font-weight:600}
.modal-body{padding:18px 22px;display:grid;gap:13px}
.modal-foot{padding:15px 22px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end}
.fld label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px;letter-spacing:.03em;text-transform:uppercase}
.fld input,.fld select,.fld textarea{width:100%;font-family:inherit;font-size:14px;border:1px solid var(--line-2);border-radius:9px;padding:9px 11px;color:var(--text);background:var(--input-bg)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent)}
.fld textarea{min-height:92px;resize:vertical;line-height:1.5}
textarea:not(.rich-body){resize:vertical}   /* all note/log boxes can be dragged taller */
.hint{font-size:11px;color:var(--muted);margin-top:3px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:13px}

/* ---------- Auth pages ---------- */
/* warm, premium split layout for all sign-in / account-recovery pages (matches the landing) */
.auth-wrap{position:relative;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:44px;max-width:940px;margin:0 auto;padding:40px 26px}
.auth-wrap::before{content:"";position:fixed;inset:0;z-index:-2;
  background:linear-gradient(158deg,#f4efe4 0%,#eef2ee 55%,#e6efec 100%)}
.auth-wrap::after{content:"";position:fixed;inset:0;z-index:-1;
  background:radial-gradient(620px 440px at 14% 22%,rgba(15,118,110,.12),transparent 60%),
             radial-gradient(560px 420px at 96% 92%,rgba(217,138,78,.10),transparent 60%)}
.auth-brand{text-align:left}
.auth-brand .ab-logo{width:172px;max-width:72%;background:#fff;border-radius:18px;padding:12px;box-shadow:0 10px 30px rgba(16,40,38,.10);display:block}
.auth-brand .ab-name{display:block;font-family:'Fraunces',serif;font-weight:600;font-size:22px;color:#16324a;margin-top:8px}
.auth-brand .ab-tag{color:var(--accent);font-weight:700;letter-spacing:.13em;text-transform:uppercase;font-size:11.5px;margin:16px 0 10px}
.auth-brand .ab-line{font-family:'Fraunces',serif;font-weight:600;font-size:27px;line-height:1.14;color:#16324a;margin:0 0 18px;max-width:19ch;text-wrap:balance}
.auth-brand .ab-points{list-style:none;padding:0;margin:0;color:#41514c;font-size:14.5px}
.auth-brand .ab-points li{position:relative;padding-left:24px;margin-bottom:9px}
.auth-brand .ab-points li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:800}
.auth-card{background:#fff;border:1px solid #e4e6e2;border-radius:18px;box-shadow:0 24px 60px rgba(16,40,38,.16);padding:30px 30px 26px;position:relative;overflow:hidden}
.auth-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,#0f766e,#1a9c8f,#d98a4e)}
.auth-card h1{font-family:'Fraunces',serif;font-size:26px;margin:2px 0 4px;color:#16324a}
.auth-sub{color:#5f6f78;font-size:13.5px;margin-bottom:20px}
.auth-card .fld{margin-bottom:14px}
.auth-card .fld input{background:#fff;color:#1c2b34;border-color:#d3cec2}
.auth-card .btn-primary{background:var(--accent)}.auth-card .btn-primary:hover{background:var(--accent-d)}
.auth-foot{margin-top:16px;font-size:13px;color:#5f6f78;text-align:center}
.auth-foot a{color:var(--accent)}
@media(max-width:760px){.auth-wrap{grid-template-columns:1fr;max-width:430px;gap:22px;padding:32px 20px}
  .auth-brand{text-align:center}.auth-brand .ab-logo{margin:0 auto}.auth-brand .ab-line{max-width:none}
  .auth-brand .ab-points{display:inline-block;text-align:left}}
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{width:100%;padding-right:64px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--accent);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:6px 8px;border-radius:7px}
.pw-toggle:hover{background:var(--chip-bg)}
.remember{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);margin:0 0 16px;cursor:pointer}
.remember input{width:16px;height:16px}
/* rich-text editor */
.rich-bar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.rich-btn{font-family:inherit;font-size:12px;font-weight:700;border:1px solid var(--line-2);background:var(--card);color:var(--text);border-radius:6px;padding:4px 9px;cursor:pointer}
.rich-btn:hover{border-color:var(--accent);color:var(--accent)}
.rich-ed{min-height:140px;border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;background:var(--input-bg);color:var(--text);font-size:14px;line-height:1.5;overflow:auto}
.rich-ed:focus{outline:none;border-color:var(--accent)}
.rich-ed h2{font-size:18px;margin:.4em 0}
.rich-wrap .rich-toggle-label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-bottom:6px;cursor:pointer;font-weight:500;text-transform:none;letter-spacing:normal}
.rich-wrap .rich-toggle-label .rich-toggle{width:auto;margin:0}
.email-preview{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--card);font-size:14px}

/* ---------- Flash + toast ---------- */
.flash{border-radius:10px;padding:11px 38px 11px 15px;font-size:13.5px;font-weight:600;margin-bottom:14px;position:relative}
.flash-x{position:absolute;top:50%;right:9px;transform:translateY(-50%);background:none;border:none;font-size:19px;line-height:1;color:inherit;opacity:.5;cursor:pointer;padding:2px 6px;font-weight:400}
.flash-x:hover{opacity:1}
/* Page legend — (i) beside a heading → concise "what this page does" popover */
.pg-legend{position:relative;display:inline-block;vertical-align:middle;margin-left:7px}
.pg-legend-btn{background:none;border:none;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:2px;border-radius:50%;font-weight:400}
.pg-legend-btn:hover{color:var(--accent-d)}
.pg-legend-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:1150;width:290px;max-width:82vw;background:var(--card);border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow);padding:11px 13px;font-size:13px;font-weight:400;line-height:1.5;color:var(--text);text-transform:none;letter-spacing:normal}
.pg-legend-pop[hidden]{display:none}
/* Help drawer: the ? trigger beside a heading + the slide-in panel it opens */
.pg-help-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:8px;vertical-align:middle;
  background:none;border:1.5px solid var(--line-2);color:var(--muted);font-size:12px;font-weight:700;line-height:1;cursor:pointer;
  border-radius:50%;padding:0;transition:color .12s,border-color .12s,background .12s}
.pg-help-btn:hover{color:#fff;background:var(--accent);border-color:var(--accent)}
.pg-help-btn.pg-help-pulse{animation:pgHelpPulse 1.6s ease-out 3;border-color:var(--accent);color:var(--accent)}
@keyframes pgHelpPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.pg-help-btn.pg-help-pulse{animation:none}}
.cc-help{position:fixed;top:0;right:0;bottom:0;width:var(--help-w,380px);max-width:92vw;z-index:1300;background:var(--card);border-left:1px solid var(--line-2);
  box-shadow:-14px 0 40px rgba(0,0,0,.18);display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .22s ease;overflow:hidden}
.cc-help.open{transform:translateX(0)}
.cc-help[hidden]{display:none}
/* Dimming backdrop — only used on mobile (the desktop drawer pushes the page, no backdrop). */
.cc-help-backdrop{position:fixed;inset:0;z-index:1290;background:rgba(0,0,0,.45);display:none;-webkit-tap-highlight-color:transparent}
/* On a wide screen, opening the drawer squeezes the whole app left so nothing is hidden —
   the page and the drawer are both fully visible. Narrow screens keep the overlay (no room). */
body{transition:margin-right .22s ease}
@media (min-width:1024px){body.cc-help-push{margin-right:var(--help-w,380px)}}
.cc-help-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cc-help-title{font-size:16px;font-weight:700;color:var(--text)}
.cc-help-x{background:none;border:none;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px;border-radius:8px}
.cc-help-x:hover{color:var(--text)}
.cc-help-body{flex:1;overflow-y:auto;padding:14px 16px;font-size:13.5px;line-height:1.55;color:var(--text)}
.cc-help-what{margin:0 0 6px;font-size:14px;color:var(--text)}
.cc-help-body h5{margin:16px 0 6px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.cc-help-list{margin:0;padding-left:20px}
.cc-help-list li{margin:5px 0}
.cc-help-links{list-style:none;padding-left:0}
.cc-help-links li{margin:8px 0;color:var(--muted)}
.cc-help-jump{background:none;border:none;padding:0;font:inherit;font-weight:600;color:var(--accent-d);cursor:pointer;text-decoration:underline}
.cc-help-links b{color:var(--text)}
.cc-help-foot{padding:12px 16px;border-top:1px solid var(--line)}
.cc-help-guide{font-size:13px;font-weight:600;color:var(--accent-d);text-decoration:none}
.cc-help-guide:hover{text-decoration:underline}
/* Mobile: a draggable bottom sheet that leaves the app usable above it (NO backdrop, NO scroll
   lock) — so you can read the help while you scroll, tap and type in the app, exactly like the
   desktop side-push. Drag the handle to a peek / half / full height; JS sets the exact height. */
@media (max-width:640px){
  .cc-help{top:auto;left:0;right:0;bottom:0;width:100%;max-width:100%;height:50vh;max-height:92vh;
    border-left:none;border-top:1px solid var(--line-2);border-radius:18px 18px 0 0;
    transform:translateY(100%);box-shadow:0 -14px 40px rgba(0,0,0,.30)}
  .cc-help.open{transform:translateY(0)}
  .cc-help-head{position:relative;padding-top:22px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
  .cc-help-head::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
    width:44px;height:5px;border-radius:3px;background:var(--line-2)}
}
/* Guide index page */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:14px}
.guide-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 17px;box-shadow:var(--shadow)}
.guide-card h3{margin:0 0 6px;font-size:16px}
.guide-card p{margin:0 0 10px;font-size:13.5px;color:var(--muted);line-height:1.5}
.guide-card .guide-open{background:none;border:none;padding:0;font:inherit;font-weight:600;color:var(--accent-d);cursor:pointer}
/* Time-of-day greeting on the landing */
.greeting{font-family:'Fraunces',serif;font-weight:600;font-size:30px;letter-spacing:-.015em;color:var(--text);margin:0 0 4px}
.greeting-sub{color:var(--muted);font-size:15px;margin:0 0 18px;max-width:62ch}
.flash-ok{background:var(--b-green-bg);color:var(--b-green-t);border:1px solid var(--b-green-t)}
.flash-err{background:var(--b-rust-bg);color:var(--b-rust-t);border:1px solid var(--b-rust-t)}
.toast{position:fixed;top:14px;left:50%;transform:translateX(-50%);background:var(--ink-2);color:#fff;padding:10px 18px;border-radius:10px;font-size:13px;font-weight:600;z-index:1500;box-shadow:0 6px 20px rgba(0,0,0,.3);transition:opacity .3s;max-width:90%}
/* "Did you mean an existing one?" near-match hint under a type-to-create field. */
.dym-sug{margin-top:4px;font-size:12px;color:var(--muted)}
.dym-pick{background:none;border:none;padding:0;margin:0 2px;color:var(--accent);font:inherit;font-size:12px;font-weight:600;cursor:pointer;text-decoration:underline}
.dym-pick:hover{opacity:.8}

/* ---------- Settings lists ---------- */
.set-section{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px}
.set-section h3{margin:0 0 10px;font-size:17px}
.set-row{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font-size:13.5px;flex-wrap:wrap}
.set-row:last-of-type{border-bottom:none}
.set-row .grow{flex:1}
.set-row form{display:inline;margin:0}

/* ---------- Tables (admin / plain lists) ---------- */
table.list{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:13px}
table.list th,table.list td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line)}
table.list th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
table.list tr:last-child td{border-bottom:none}
.table-scroll{overflow-x:auto;border-radius:12px}

/* ---------- Theme picker ---------- */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.theme-opt{border:2px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;background:var(--card);text-align:center;color:var(--text)}
.theme-opt.on{border-color:var(--accent)}
.theme-swatch{height:44px;border-radius:8px;margin-bottom:8px;border:1px solid var(--line)}
.sw-paper{background:linear-gradient(135deg,#f4f2ec 55%,#0f766e 55%)}
.sw-slate{background:linear-gradient(135deg,#eef1f6 55%,#4356c0 55%)}
.sw-sage{background:linear-gradient(135deg,#f0f3ec 55%,#3f6f4f 55%)}
.sw-dark{background:linear-gradient(135deg,#0f191e 55%,#22a99b 55%)}
.sw-ocean{background:linear-gradient(135deg,#eef4fb 55%,#2563eb 55%)}
.sw-plum{background:linear-gradient(135deg,#f6eef8 55%,#8e3f9e 55%)}
.sw-sunrise{background:linear-gradient(135deg,#fdf3ec 55%,#c2410c 55%)}
.sw-midnight{background:linear-gradient(135deg,#0b1220 55%,#6366f1 55%)}
.theme-opt .nm{font-size:12.5px;font-weight:600;color:var(--text)}

@media(max-width:560px){
  .row2{grid-template-columns:1fr}
  .bar .wrap{gap:10px}
  .stats{grid-template-columns:repeat(2,1fr)}
}

/* ================= Calendar (month / week / day / agenda) ================= */
.cal-toolbar{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-bottom:14px}
.cal-views{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:2px;gap:2px}
.cal-view-btn{font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:8px;white-space:nowrap}
.cal-view-btn:hover{color:var(--text)}
.cal-view-btn.on{background:var(--accent);color:#fff}
.cal-nav{display:inline-flex;gap:6px}
.cal-period{font-size:17px;font-weight:800;color:var(--text);margin-left:auto;text-wrap:balance}

/* colour of one event chip comes from inline --evc (per appointment type) */
.cal-ev{--evc:var(--accent);display:block;width:100%;text-align:left;border:none;cursor:pointer;
  background:var(--evc);color:#fff;font-size:11.5px;line-height:1.3;padding:2px 6px;margin:0;
  border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev:hover{filter:brightness(1.08)}
.cal-ev-t{font-weight:700;opacity:.9}
/* Multi-day events: flatten the inner corners so adjacent-day pills join into a continuous bar. */
.cal-ev-span{position:relative}
.cal-ev-span.span-start{border-top-right-radius:0;border-bottom-right-radius:0}
.cal-ev-span.span-end{border-top-left-radius:0;border-bottom-left-radius:0}
.cal-ev-span.span-mid{border-radius:0}
.cal-ev-span.span-mid::before,.cal-ev-span.span-end::before{content:"‹ ";opacity:.75}

/* ---------- Month grid ---------- */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cal-dow{background:var(--card);text-align:center;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:8px 4px}
.cal-cell{background:var(--card);min-height:112px;padding:4px 5px 6px;display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
.cal-out{background:var(--bg)}
.cal-out .cal-dnum-link{color:var(--muted);opacity:.6}
.cal-today{box-shadow:inset 0 0 0 2px var(--accent)}
.cal-daynum{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:700;margin-bottom:1px}
.cal-dnum-link{color:var(--muted);text-decoration:none;padding:1px 5px;border-radius:50%}
.cal-dnum-link:hover{background:var(--hover-bg);color:var(--text)}
.cal-today .cal-dnum-link{background:var(--accent);color:#fff}
.cal-add{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;
  padding:0 3px;border-radius:5px;opacity:0;transition:opacity .12s}
.cal-cell:hover .cal-add{opacity:1}
.cal-add:hover{background:var(--accent);color:#fff}
.cal-more{font-size:11px;font-weight:600;color:var(--muted);text-decoration:none;padding:1px 6px}
.cal-more:hover{color:var(--accent);text-decoration:underline}

/* ---------- Week / Day time grid ---------- */
.cal-tg{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cal-tg-gutter{flex:0 0 58px;width:58px}
.cal-tg-head{display:flex;border-bottom:1px solid var(--line);background:var(--card)}
.cal-tg-dayhead{flex:1;min-width:0;text-align:center;padding:7px 2px;text-decoration:none;color:var(--muted);border-left:1px solid var(--line)}
.cal-tg-dayhead .cal-tg-dow{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.cal-tg-dayhead .cal-tg-dn{display:block;font-size:18px;font-weight:800;color:var(--text);line-height:1.15;margin-top:1px}
.cal-tg-dayhead.on .cal-tg-dn{background:var(--accent);color:#fff;border-radius:50%;width:30px;height:30px;line-height:30px;margin:1px auto 0}
.cal-tg-allday{display:flex;border-bottom:1px solid var(--line);background:var(--card);min-height:26px;max-height:96px;overflow-y:auto}
.cal-tg-allday .cal-tg-gutter{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;display:flex;align-items:center;justify-content:center;text-align:center}
.cal-tg-adcell{flex:1;min-width:0;border-left:1px solid var(--line);padding:2px 3px;display:flex;flex-direction:column;gap:2px}
.cal-tg-body{max-height:640px;overflow-y:auto;background:var(--card)}
.cal-tg-grid{display:flex;position:relative}
.cal-tg-body .cal-tg-gutter{position:relative}
.cal-tg-hour{position:relative;border-top:1px solid var(--line)}
.cal-tg-hour:first-child{border-top:none}
.cal-tg-hour span{position:absolute;top:-8px;right:6px;font-size:10.5px;color:var(--muted);background:var(--card);padding:0 2px}
.cal-tg-col{flex:1;min-width:0;position:relative;border-left:1px solid var(--line)}
.cal-tg-coltoday{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.cal-tg-line{position:absolute;left:0;right:0;border-top:1px solid var(--line);opacity:.55}
.cal-tg-now{position:absolute;left:0;right:0;border-top:2px solid #dc2626;z-index:4}
.cal-tg-now::before{content:"";position:absolute;left:-4px;top:-5px;width:8px;height:8px;border-radius:50%;background:#dc2626}
.cal-tg-ev{position:absolute;overflow:hidden;border:1px solid rgba(255,255,255,.35);border-radius:6px;
  color:#fff;background:var(--accent);text-align:left;cursor:pointer;padding:2px 5px;font-size:11px;line-height:1.25;z-index:2}
.cal-tg-ev:hover{filter:brightness(1.08);z-index:3}
.cal-tg-ev-t{font-weight:700;display:block;font-size:10.5px;opacity:.95}
.cal-tg-ev-x{display:block;overflow:hidden;text-overflow:ellipsis}

/* ---------- Agenda ---------- */
.cal-agenda{display:flex;flex-direction:column}
.cal-ag-day{display:flex;gap:14px;padding:12px 2px;border-top:1px solid var(--line)}
.cal-ag-day:first-child{border-top:none}
.cal-ag-date{flex:0 0 52px;text-align:center;line-height:1.1}
.cal-ag-date .cal-ag-dn{display:block;font-size:22px;font-weight:800;color:var(--text)}
.cal-ag-date .cal-ag-mo{display:block;font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:700}
.cal-ag-date .cal-ag-dw{display:block;font-size:11px;color:var(--muted)}
.cal-ag-date.on .cal-ag-dn{color:var(--accent)}
.cal-ag-list{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.cal-ag-row{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;border:1px solid var(--line);
  background:var(--card);border-radius:10px;padding:9px 11px;cursor:pointer;color:var(--text)}
.cal-ag-row:hover{background:var(--hover-bg)}
.cal-ag-dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;margin-top:4px}
.cal-ag-time{flex:0 0 auto;font-size:12.5px;font-weight:700;color:var(--muted);min-width:64px;font-variant-numeric:tabular-nums}
.cal-ag-main{flex:1;min-width:0;font-size:14px;line-height:1.35}

@media(max-width:640px){
  .cal-period{width:100%;margin-left:0;order:-1;font-size:16px}
  .cal-view-btn{padding:6px 9px;font-size:12px}
  .cal-cell{min-height:78px;padding:2px 2px 4px}
  .cal-daynum{font-size:11px}
  .cal-ev{font-size:9.5px;padding:1px 4px;border-radius:4px}
  .cal-ev-t{display:none}                 /* drop the time on tiny cells; keep the title */
  .cal-add{display:none}                  /* use the day's ＋ via day view instead */
  .cal-more{font-size:10px;padding:0 4px}
  .cal-tg-gutter{flex-basis:42px;width:42px}
  .cal-tg-dayhead .cal-tg-dn{font-size:15px}
  .cal-ag-date{flex-basis:44px}
}

/* ---------- Home: upcoming events feed ---------- */
.home-up{margin:14px 0}
.home-up-head{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;margin-bottom:8px}
.home-up-head .link-btn{margin-left:auto;font-weight:600;font-size:13px}
.home-up-list{display:flex;flex-direction:column;gap:6px}
.home-up-row{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:9px 12px;text-decoration:none;color:var(--text)}
.home-up-row:hover{background:var(--hover-bg)}
.home-up-dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;margin-top:4px}
.home-up-when{flex:0 0 auto;min-width:96px;font-size:12.5px;line-height:1.35;color:var(--muted)}
.home-up-when b{color:var(--text)}
.home-up-main{flex:1;min-width:0;font-size:14px;line-height:1.35}
@media(max-width:640px){.home-up-when{min-width:80px}}

/* ================= Records vault ================= */
.rec-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 12px}
.rec-chips{display:flex;flex-wrap:wrap;gap:6px}
.rec-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text);text-decoration:none;
  border:1px solid var(--line);background:var(--card);border-radius:20px;padding:5px 12px}
.rec-chip:hover{background:var(--hover-bg)}
.rec-chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.rec-chip b{font-weight:700;opacity:.8}
.rec-chip.on b{opacity:1}
.rec-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;display:inline-block}
.rec-search{display:flex;gap:6px}
.rec-search-in{position:relative;display:flex}
.rec-search input{font-size:14px;padding:8px 32px 8px 10px;border:1px solid var(--line-2);border-radius:9px;background:var(--input-bg);color:var(--text);min-width:180px}
.rec-search-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);text-decoration:none;color:var(--muted);font-size:14px;line-height:1;padding:2px 4px;border-radius:6px}
.rec-search-x:hover{color:var(--text);background:var(--hover-bg)}
.rec-loading{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5);z-index:9999}
.rec-loading-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 34px;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--text);font-weight:600;text-align:center;max-width:80vw}
.rec-spinner{width:38px;height:38px;border:4px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;animation:rec-spin .8s linear infinite}
@keyframes rec-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.rec-spinner{animation-duration:2s}}
.rec-list{display:flex;flex-direction:column;gap:8px}
.rec-row{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);background:var(--card);
  border-radius:12px;padding:11px 14px;text-decoration:none;color:var(--text)}
.rec-row:hover{background:var(--hover-bg)}
.rec-row .rec-dot{margin-top:5px}
.rec-main{flex:1;min-width:0;font-size:14px;line-height:1.4}
.rec-cat{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-left:8px}
.rec-meta{display:inline-block;margin-top:2px;font-size:12.5px}
.rec-fu{white-space:nowrap}
.rec-fu.soon{color:var(--amber);font-weight:600}
.rec-fu.past{color:var(--rust);font-weight:600}
.rec-file{flex:0 0 auto;font-size:18px;opacity:.7}
.rec-detail{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.rec-doc{flex:1 1 300px;min-width:0;max-width:440px}
.rec-doc img{width:100%;border:1px solid var(--line);border-radius:12px}
.rec-form{flex:2 1 420px;min-width:0}
.rec-trans summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--accent-d)}
.rec-trans-body{margin-top:8px;font-size:13px;line-height:1.5;color:var(--text);max-height:340px;overflow:auto;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.rec-remind{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:4px 0 12px}
@media(max-width:640px){.rec-doc{max-width:100%;flex-basis:100%}.rec-search input{min-width:120px}}

/* Home sections are flex items the user can reorder (CSS order set per user) */
.home-sections{display:flex;flex-direction:column}
.home-sec:empty{display:none}

/* Customize-home reorder rows */
.hc-list .hc-row{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line)}
.hc-list .hc-row:last-child{border-bottom:none}
.hc-move{display:inline-flex;flex-direction:column;gap:2px}
.hc-move button{width:26px;height:20px;line-height:1;font-size:11px;border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:5px;cursor:pointer;padding:0}
.hc-move button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.hc-row:first-child .hc-up,.hc-row:last-child .hc-down{opacity:.3;pointer-events:none}

/* ---------- Help panel (collapsible) ---------- */
.help-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin:0 0 16px;overflow:hidden}
.help-panel>summary{cursor:pointer;list-style:none;padding:12px 18px;font-weight:700;
  font-size:14px;color:var(--accent-d);user-select:none}
html[data-theme="dark"] .help-panel>summary{color:var(--accent)}
.help-panel>summary::-webkit-details-marker{display:none}
.help-panel>summary:hover{background:var(--hover-bg)}
.help-panel[open]>summary{border-bottom:1px solid var(--line)}
.help-body{padding:14px 20px 6px;font-size:13.5px;line-height:1.6}
.help-body ol{margin:8px 0 8px 20px;padding:0}
.help-body li{margin-bottom:8px}
.help-body code{background:var(--hover-bg);border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;font-size:12px}

/* ---------- Contact photo thumbnail ---------- */
.c-photo{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--line);background:var(--hover-bg)}

/* ---------- Stage tracker / progress stepper ---------- */
.stepper{--done:var(--accent)}
.stepper-track{position:relative;height:4px;border-radius:3px;background:var(--line);margin:2px 0 8px}
.stepper-fill{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:var(--done);transition:width .3s}
.stepper-steps{display:flex;gap:2px}
.step{flex:1;min-width:0;text-align:center;position:relative}
.step-dot{display:block;width:11px;height:11px;border-radius:50%;margin:0 auto 4px;
  background:var(--line);border:2px solid var(--card);box-shadow:0 0 0 1px var(--line)}
.step.done .step-dot{background:var(--done);box-shadow:0 0 0 1px var(--done)}
.step.current .step-dot{background:var(--done);box-shadow:0 0 0 2px var(--done);width:13px;height:13px;margin-top:-1px}
.step-lbl{display:block;font-size:10px;line-height:1.2;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.step.current .step-lbl{color:var(--text);font-weight:700}
.step.done .step-lbl{color:var(--text)}

/* ---------- Progress bar (goals) ---------- */
.pbar{height:10px;border-radius:6px;background:var(--line);overflow:hidden}
.pbar-fill{height:100%;background:var(--accent);border-radius:6px;transition:width .3s}
.pbar-fill.done{background:var(--green)}

/* ---------- Insights charts ---------- */
.hbars{display:flex;flex-direction:column;gap:8px}
.hbar-row{display:flex;align-items:center;gap:10px;font-size:13px}
.hbar-lbl{flex:0 0 34%;max-width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.hbar-track{flex:1;height:16px;background:var(--hover-bg);border-radius:5px;overflow:hidden}
.hbar-fill{height:100%;border-radius:5px;min-width:2px;transition:width .3s}
.hbar-val{flex:0 0 auto;font-weight:600;color:var(--muted);font-size:12.5px}
.vbars{display:flex;gap:6px;align-items:flex-end}
.vbar{flex:1;min-width:0;text-align:center}
.vbar-col{height:120px;display:flex;align-items:flex-end;justify-content:center;gap:3px}
.vbar-col .vbar-fill{width:60%;background:var(--accent);border-radius:4px 4px 0 0;min-height:2px;transition:height .3s}
.vbar-col2 .vbar-fill{width:38%}
.vbar-n{font-size:11px;color:var(--muted);height:14px}
.vbar-lbl{font-size:10.5px;color:var(--muted);margin-top:3px}

/* ============ Left-sidebar app shell (v1.16) ============ */
.wrap-wide{max-width:1220px}
.shell{display:flex;align-items:flex-start;gap:0}
.side{flex:0 0 232px;width:232px;align-self:stretch;position:sticky;top:0;height:100vh;
  overflow-y:auto;background:var(--card);border-right:1px solid var(--line);
  padding:16px 12px 28px;box-sizing:border-box}
.shell-main{flex:1;min-width:0}
.shell-main main,.shell-main{padding-top:0}
.side-top{padding:2px 8px 12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.side-net{font-size:12px;color:var(--muted);text-decoration:none;font-weight:600}
.side-net:hover{color:var(--accent)}
.side-title{font-family:'Fraunces',Georgia,serif;font-size:17px;font-weight:700;color:var(--text);margin-top:6px;line-height:1.25}
.side-type{font-size:11px;font-weight:600;color:var(--accent);margin-top:3px;letter-spacing:.01em}

/* Focus board (Overview pins) */
.focus-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.pin-tile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:13px 14px;display:flex;flex-direction:column;gap:5px;min-height:98px}
.pin-tile .pin-em{font-size:22px;line-height:1}
.pin-tile h4{margin:0;font-size:14px;font-weight:700;letter-spacing:-.005em;padding-right:22px}
.pin-tile .pin-meta{font-size:11.5px;color:var(--muted)}
.pin-tile .pin-note{font-size:12px;color:var(--text);background:var(--input-bg);border-radius:8px;
  padding:6px 8px;margin-top:2px;border-left:2px solid var(--accent)}
.pin-tile.team{border-color:color-mix(in srgb,var(--amber) 55%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--amber) 25%,transparent) inset}
.pin-flag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--amber)}
.pin-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.pin-acts form{margin:0}
.pin-mini{font-size:11px;font-weight:600;border:1px solid var(--line-2);background:var(--card);color:var(--muted);
  border-radius:7px;padding:3px 8px;cursor:pointer}
.pin-mini:hover{border-color:var(--accent);color:var(--accent)}
.pin-mini.danger:hover{border-color:var(--rust);color:var(--rust)}
.pin-mini.go{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line-2))}
.pin-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.pin-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  background:var(--input-bg);border:1px solid var(--line-2);border-radius:999px;padding:4px 11px}
.pin-chip form{margin:0}
.pin-chip button{background:none;border:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;padding:0}
.cc-star{background:none;border:none;cursor:pointer;font-size:18px;line-height:1;color:var(--muted);
  padding:0 2px;position:absolute;top:11px;right:10px}
.cc-star:hover{color:var(--star,#d9a11a)}
.cc-star.on{color:var(--star,#d9a11a)}
.cc-star.inline{position:static;font-size:16px;vertical-align:-2px}
.side-search{margin:0 4px 14px}
.side-search input{width:100%;box-sizing:border-box;font-family:inherit;font-size:13px;
  border:1px solid var(--line-2);border-radius:9px;padding:8px 11px;background:var(--input-bg);color:var(--text)}
.side-search input:focus{outline:none;border-color:var(--accent)}
.side-group{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:12px 10px 5px}
.side-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  color:var(--text);text-decoration:none;font-size:13.5px;line-height:1.2;position:relative}
.side-link:hover{background:var(--hover-bg)}
.side-link.on{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent-d);font-weight:700}
html[data-theme="dark"] .side-link.on,html[data-theme="midnight"] .side-link.on{color:var(--text)}
.side-link.on::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--accent)}
.side-ic{width:20px;text-align:center;font-size:14px;flex:0 0 auto}
.side-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-toggle{display:none;background:none;border:none;color:var(--bar-text);font-size:22px;cursor:pointer;padding:6px 10px;margin-left:-6px;line-height:1;border-radius:8px}
.side-toggle:hover{background:color-mix(in srgb,var(--bar-text) 14%,transparent)}
.side-customize{margin-top:2px;opacity:.72;font-size:13px}
.side-customize:hover{opacity:1}
.home-tools{display:flex;justify-content:flex-end;margin:0 0 8px}
.home-tools .btn{opacity:.75}
.home-tools .btn:hover{opacity:1}

/* ---- first-run welcome + getting-started checklist ---- */
.welcome-hero{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  border-radius:16px;padding:24px 26px;margin:4px 0 14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--card)),var(--card) 70%)}
.welcome-hero::after{content:"";position:absolute;top:-40px;right:-30px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);pointer-events:none}
.wh-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px}
.wh-title{margin:0;font-family:'Fraunces',serif;font-size:27px;line-height:1.15;color:var(--text);text-wrap:balance}
.wh-sub{margin:8px 0 0;color:var(--muted);font-size:14px;max-width:60ch}
.gs-card{border:1px solid var(--line);border-radius:14px;background:var(--card);padding:6px 4px 8px;margin:0 0 16px}
.gs-head{display:flex;align-items:center;gap:10px;padding:12px 16px 10px;border-bottom:1px solid var(--line)}
.gs-title{font-weight:700;color:var(--text)}
.gs-prog{font-size:12px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-radius:999px;padding:2px 10px}
.gs-hide-form{margin:0 0 0 auto}
.gs-hide{background:none;border:none;color:var(--muted);font-size:12.5px;cursor:pointer;padding:4px 6px;border-radius:7px}
.gs-hide:hover{color:var(--text);background:color-mix(in srgb,var(--text) 8%,transparent)}
.gs-list{display:flex;flex-direction:column}
.gs-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.gs-item:last-child{border-bottom:none}
.gs-check{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:14px;
  border:1.5px solid var(--line-2);color:var(--muted);background:var(--input-bg)}
.gs-item.on .gs-check{border-color:var(--green);background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green);font-weight:800}
.gs-main{flex:1;min-width:0}
.gs-lbl{font-weight:600;color:var(--text);font-size:14px}
.gs-item.on .gs-lbl{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 55%,transparent)}
.gs-opt{font-weight:600;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-left:6px}
.gs-hint{font-size:12.5px;color:var(--muted);margin-top:2px}
.gs-go{flex:none;white-space:nowrap}
.gs-act{flex:none;display:flex;align-items:center;gap:8px}
.gs-skip-form{margin:0}
.gs-skip{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:4px 6px;border-radius:7px;white-space:nowrap}
.gs-skip:hover{color:var(--text);background:color-mix(in srgb,var(--text) 8%,transparent)}
.gs-doneflag{flex:none;font-size:12px;font-weight:700;color:var(--green)}
.gs-skipped{color:var(--muted)}
.gs-item.skipped .gs-check{border-color:var(--line-2);background:var(--input-bg);color:var(--muted);font-weight:400}
.gs-item.skipped .gs-lbl{text-decoration-color:color-mix(in srgb,var(--muted) 40%,transparent)}

/* ---- customize pages: item + legend ---- */
.cz-text{display:flex;flex-direction:column;gap:1px}
.cz-lbl{font-weight:600;color:var(--text);font-size:14px}
.cz-hint{font-size:12px;color:var(--muted);line-height:1.4}

/* ---- Home slim pipeline strip ---- */
.pipe-strip{margin:2px 0 18px}
.pipe-strip-head{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.pipe-strip-head .ps-title{font-weight:700;color:var(--text);font-size:14px}
.pipe-strip-head .ps-total{font-size:12px;color:var(--muted)}
.pipe-strip-head .ps-link{margin-left:auto;font-size:12.5px}
.pipe-bar{display:flex;width:100%;height:14px;border-radius:8px;overflow:hidden;background:var(--input-bg);border:1px solid var(--line)}
.pipe-seg{height:100%}
.pipe-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.pipe-key{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.pipe-key .dot{width:10px;height:10px;border-radius:3px;flex:none}
.pipe-key b{color:var(--text)}

/* ---- Pipeline page (kanban) ---- */
.pl-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:14px 0 20px}
.pl-tile{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:12px 14px}
.pl-tile .n{font-size:24px;font-weight:800;line-height:1}
.pl-tile .l{font-size:12.5px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:6px}
.pl-tile .l .dot{width:9px;height:9px;border-radius:3px;flex:none}
.pl-tile .pct{font-size:11.5px;color:var(--muted);margin-top:2px}
.pl-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px}
.pl-col{flex:0 0 260px;min-width:260px;background:var(--input-bg);border:1px solid var(--line);border-radius:12px;padding:10px}
.pl-col-head{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13px;color:var(--text);margin:2px 4px 10px}
.pl-col-head .dot{width:10px;height:10px;border-radius:3px;flex:none}
.pl-col-head .c{margin-left:auto;font-size:12px;color:var(--muted);font-weight:600}
.pl-card{display:block;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:8px;text-decoration:none;color:var(--text)}
.pl-card:hover{border-color:var(--accent)}
.pl-card .nm{font-weight:600;font-size:13.5px}
.pl-card .mt{font-size:12px;color:var(--muted);margin-top:2px}
.pl-col .more{font-size:12px;color:var(--muted);text-align:center;padding:4px}
.pl-empty{font-size:12px;color:var(--muted);text-align:center;padding:14px 4px}

/* ---- tabbed modals (contact / company add-edit) ---- */
.modal-tabs{display:flex;gap:2px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.modal-tabs .mtab{flex:1;background:none;border:none;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;
  color:var(--muted);padding:9px 12px;border-bottom:2.5px solid transparent;white-space:nowrap}
.modal-tabs .mtab:hover{color:var(--text)}
.modal-tabs .mtab.active{color:var(--accent-d);border-bottom-color:var(--accent)}
html[data-theme="dark"] .modal-tabs .mtab.active,html[data-theme="midnight"] .modal-tabs .mtab.active{color:var(--text)}

/* ---- month picker (budget / money insights) ---- */
.cc-month{font-family:inherit;font-size:13px;border:1px solid var(--line-2);border-radius:8px;padding:6px 10px;background:var(--input-bg);color:var(--text);cursor:pointer}

/* ---- print / save-as-PDF (clean snapshot of the current page) ---- */
.print-only{display:none}
@media print {
  *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
  .bar,.side,.side-scrim,.side-toggle,.no-print,.flash-x,form,.js-print,.pg-legend,.cc-month,.home-tools,.subtabs,.tabs,.toolbar,.views-row,.dtile-tools,.btn,.link-btn,.tw-tabs{display:none !important}
  .shell{display:block !important}
  .shell-main{margin:0 !important}
  main,.wrap,.wrap-wide{padding:0 !important;margin:0 !important;max-width:none !important;width:auto !important}
  html,body{background:#fff !important}
  main, main *{color:#111 !important}
  .set-section,.mi-card,.dtile{border:1px solid #ccc !important;background:#fff !important;box-shadow:none !important;break-inside:avoid}
  .dtile .kpi{color:#111 !important}
  .tw-pane .set-section{break-inside:auto !important}          /* long flight lists may flow across pages */
  .tw-chip{background:#fff !important;border:1px solid #ccc !important;color:#111 !important;break-inside:avoid}
  .tw-chip .tw-chip-lbl,.tw-chip .tw-chip-val{color:#111 !important}
  .stat{background:#fff !important;border:1px solid #ddd !important;min-width:0;overflow:hidden}
  .stats{grid-template-columns:repeat(2,1fr) !important;gap:8px !important}
  .stat .n{font-size:20px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .row2{grid-template-columns:1fr 1fr !important}
  /* neutralize dark themed surfaces so nothing prints as a black block */
  .intro,.fx-panel{background:#fff !important;border:1px solid #ddd !important;color:#111 !important}
  .badge,.chip,.tag,.view-chip,.pill,.addr-badge,.rcpt-chip{background:#f1f1f1 !important;color:#111 !important;border:1px solid #ddd !important}
  table.list th,table.list td,table.list tr{background:#fff !important;color:#111 !important;border-bottom:1px solid #ddd !important}
  table.list th{border-bottom:2px solid #999 !important}
  input,select,textarea{background:#fff !important;color:#111 !important;border:1px solid #ccc !important}
  .fx-conv{display:none !important}
  a{color:#111 !important;text-decoration:none}
  .print-only{display:block !important}
  .print-head{border-bottom:2px solid #111;margin-bottom:14px;padding-bottom:8px}
  .print-head .ph-net{font-weight:700;font-size:16px}
  .print-head .ph-sub{color:#555 !important;font-size:12px}
}

/* ---- travel: flexible-date / cabin-comparison strips + fare badges ---- */
.tw-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;overflow-x:auto;padding-bottom:2px}
.tw-chip{display:flex;flex-direction:column;gap:2px;min-width:88px;padding:8px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--card);text-decoration:none;color:var(--text);transition:.12s;flex:none}
.tw-chip:hover{border-color:var(--accent)}
.tw-chip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.tw-chip-lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.tw-chip-val{font-size:15px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.tw-fare-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.tw-fb{font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px}
.tw-fb.ok{color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent)}
.tw-fb.no{color:var(--rust);background:color-mix(in srgb,var(--rust) 12%,transparent)}
.tw-fb.n{color:var(--muted);background:color-mix(in srgb,var(--muted) 14%,transparent)}

/* ---- generic sortable table headers (table.js-sortable) ---- */
table.js-sortable thead th.srt-th{cursor:pointer;user-select:none;white-space:nowrap}
table.js-sortable thead th.srt-th:hover{color:var(--accent)}
table.js-sortable thead th .srt-arrow{font-size:11px;color:var(--accent)}

/* ---- chart legend (donut/line charts) ---- */
.chart-legend{display:flex;flex-direction:column;gap:6px}
.cl-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text)}
.cl-dot{width:11px;height:11px;border-radius:3px;flex:none}
.cl-item b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600}

/* ---- address verified / unverified badge ---- */
.addr-badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;
  padding:2px 8px;border-radius:999px;white-space:nowrap;vertical-align:middle}
.addr-badge.ok{color:var(--green);background:color-mix(in srgb,var(--green) 15%,transparent)}
.addr-badge.approx{color:var(--amber);background:color-mix(in srgb,var(--amber) 16%,transparent)}
.addr-badge.warn{color:var(--rust);background:color-mix(in srgb,var(--rust) 15%,transparent)}
.addr-status{font-size:12px;margin-top:5px;display:flex;align-items:center;gap:6px}
.addr-status.ok{color:var(--green)}
.addr-status.approx{color:var(--amber)}
.addr-status.warn{color:var(--muted)}
.addr-status.off{color:var(--muted)}

/* ---- "Your networks": arrange toolbar + drag-to-reorder ---- */
.net-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.net-arrange{display:flex;align-items:center;gap:8px}
.net-arrange select{font-family:inherit;font-size:13px;border:1px solid var(--line-2);border-radius:8px;padding:6px 9px;background:var(--input-bg);color:var(--text)}
.net-drag-hint{font-size:12px}
#net-grid .ov-card{position:relative}
.net-handle{position:absolute;top:8px;right:10px;font-size:16px;line-height:1;color:var(--muted);cursor:grab;
  padding:4px 6px;border-radius:7px;touch-action:none;user-select:none}
.net-handle:hover{color:var(--text);background:color-mix(in srgb,var(--text) 8%,transparent)}
.ov-card.net-dragging{opacity:.6;outline:2px dashed var(--accent);outline-offset:2px}

/* ---- accessibility: visible keyboard focus + skip link ---- */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a:focus-visible,button:focus-visible,.tab:focus-visible,.tab-btn:focus-visible,.side-link:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:5px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--accent);color:#fff;
  padding:10px 16px;border-radius:0 0 10px 0;font-weight:700;font-size:14px}
.skip-link:focus{left:0}

/* ---- module / option rows (checkbox + label + description) ---- */
.opt-row{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px;cursor:pointer}
.opt-row > input[type=checkbox]{margin-top:3px;flex:none;width:18px;height:18px}
.opt-row .opt-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.opt-row .opt-lbl{font-weight:700;color:var(--text);font-size:14px}
.opt-row .opt-desc{font-size:12.5px;color:var(--muted);line-height:1.45}

/* ---- settings: deal-pipeline stage editor (tidy on mobile) ---- */
.stage-row{align-items:flex-start;gap:10px}
.stage-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.stage-form .st-name{flex:1 1 100%;min-width:0;font-size:13px;border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;background:var(--input-bg);color:var(--text)}
.stage-form .st-num{width:74px;font-size:13px;border:1px solid var(--line-2);border-radius:8px;padding:8px;background:var(--input-bg);color:var(--text)}
.stage-form .st-chk{font-size:12.5px;display:inline-flex;align-items:center;gap:4px;color:var(--text)}
.stage-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:2px}
@media (max-width:640px){
  .stage-form .btn{flex:1 1 100%}
  .stage-row{flex-direction:column;align-items:stretch}
}

/* ---- admin tabbed layout ---- */
.admin-panel{display:none}
.admin-panel.on{display:block}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.tool-card{display:block;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:18px;text-decoration:none;color:var(--text);transition:.15s}
.tool-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.tool-card .tc-ic{font-size:26px;line-height:1;margin-bottom:8px}
.tool-card .tc-title{font-weight:700;font-size:15px}
.tool-card .tc-desc{font-size:12.5px;color:var(--muted);margin-top:3px}
@keyframes onboardRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.onboard-rise{animation:onboardRise .5s cubic-bezier(.2,.7,.2,1) both}
.gs-card.onboard-rise{animation-delay:.08s}
@media (prefers-reduced-motion:reduce){.onboard-rise{animation:none}}
@media (max-width:640px){
  .wh-title{font-size:22px}
  .gs-item{flex-wrap:wrap}
  .gs-act{margin-left:38px}
}
.side-scrim{display:none}

@media(max-width:900px){
  .side{position:fixed;top:0;left:0;z-index:1200;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.3)}
  body.side-open .side{transform:none}
  .side-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1190}
  body.side-open .side-scrim{display:block}
  .side-toggle{display:inline-flex}
  .shell-main .wrap-wide{padding:0 16px}
}

/* In-page secondary tab strip (e.g. network location tabs) */
.subtabs{display:flex;gap:2px;overflow-x:auto;margin:0 0 18px;border-bottom:1px solid var(--line)}
.subtabs .tab{white-space:nowrap;padding:9px 13px;color:var(--muted);text-decoration:none;font-size:13px;border-bottom:2px solid transparent}
.subtabs .tab:hover{color:var(--text)}
.subtabs .tab.active{color:var(--accent-d);border-bottom-color:var(--accent);font-weight:700}
html[data-theme="dark"] .subtabs .tab.active,html[data-theme="midnight"] .subtabs .tab.active{color:var(--text)}
.subtabs .dot{display:inline-block;margin-left:5px;background:var(--hover-bg);border:1px solid var(--line);border-radius:9px;padding:0 6px;font-size:11px}

/* ---------- Saved views + bulk actions (v1.16) ---------- */
.views-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.views-label{font-size:12px;color:var(--muted);font-weight:600}
.view-chip{display:inline-block;font-size:12.5px;text-decoration:none;color:var(--text);
  background:var(--card);border:1px solid var(--line-2);border-radius:999px;padding:4px 12px;cursor:pointer}
.view-chip:hover{border-color:var(--accent);color:var(--accent-d)}
.view-save{color:var(--muted)}
.bulk-bar{position:sticky;top:8px;z-index:20;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:color-mix(in srgb,var(--accent) 12%,var(--card));border:1px solid var(--accent);
  border-radius:12px;padding:10px 14px;margin:0 0 16px;box-shadow:var(--shadow)}
.bulk-count{font-size:13px;font-weight:700}
.bulk-bar select,.bulk-bar input{font-family:inherit;font-size:13px;border:1px solid var(--line-2);
  border-radius:8px;padding:6px 9px;background:var(--input-bg);color:var(--text)}
.bulk-pick{display:inline-flex;align-items:center;margin-right:2px;cursor:pointer}
.bulk-pick input{width:15px;height:15px}

/* Ensure the [hidden] attribute always wins over class display rules */
[hidden]{display:none!important}

/* ---------- v1.17: branding logo, activity type, lost stage ---------- */
.side-logo{max-width:100%;max-height:46px;margin:8px 0 2px;border-radius:8px;background:#fff;padding:4px;display:block}
.act-type{display:inline-block;font-size:11px;font-weight:700;color:var(--accent-d)}
html[data-theme="dark"] .act-type,html[data-theme="midnight"] .act-type{color:var(--accent)}
.stepper-lost{color:var(--rust);font-weight:700;font-size:12.5px}

/* ---------- v1.19: Kanban board + view toggle ---------- */
.viewtoggle{display:inline-flex;gap:2px;margin:0 0 14px;border:1px solid var(--line-2);border-radius:9px;overflow:hidden}
.viewtoggle .vt{padding:7px 14px;font-size:13px;text-decoration:none;color:var(--muted);background:var(--card)}
.viewtoggle .vt.on{background:var(--accent);color:#fff;font-weight:700}
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;align-items:flex-start}
.kan-col{flex:0 0 260px;width:260px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px}
.kan-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:13.5px}
.kan-list{min-height:40px;display:flex;flex-direction:column;gap:8px;border-radius:8px;transition:background .12s}
.kan-list.kan-over{background:color-mix(in srgb,var(--accent) 12%,transparent);outline:2px dashed var(--accent)}
.kan-card{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:9px 11px;box-shadow:var(--shadow);cursor:grab}
.kan-card.dragging{opacity:.5}
.kan-card[draggable=true]:active{cursor:grabbing}
.kan-title{font-weight:600;font-size:13.5px}
.kan-title a{color:var(--text);text-decoration:none}
.kan-title a:hover{color:var(--accent-d)}
.kan-sub{font-size:12px;color:var(--muted);margin-top:2px}
.kan-val{font-family:'Fraunces',Georgia,serif;font-size:14px;margin-top:4px}

/* ---------- v1.19: detail pages ---------- */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:820px){.detail-grid{grid-template-columns:1fr}}
.dl{display:flex;flex-direction:column;gap:2px}
.dl-row{display:flex;gap:12px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.dl-row:last-child{border-bottom:none}
.dl-k{flex:0 0 40%;color:var(--muted)}
.dl-v{flex:1;min-width:0}

/* ---------- v1.20: notification bell ---------- */
.bell-badge{position:absolute;top:-4px;right:-4px;background:var(--rust);color:#fff;font-size:9.5px;
  font-weight:700;line-height:1;padding:2px 4px;border-radius:9px;min-width:14px;text-align:center}

/* ---------- v1.23: contact table view, lead score, column chooser ---------- */
.view-chip.on{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700}
.col-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:var(--card);
  border:1px solid var(--line-2);border-radius:10px;box-shadow:var(--shadow);padding:8px;min-width:160px;
  display:flex;flex-direction:column;gap:4px}
.col-menu label{display:flex;align-items:center;gap:7px;font-size:13px;padding:3px 5px;border-radius:6px;cursor:pointer}
.col-menu label:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.table-wrap{border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:var(--shadow)}
.ctable{width:100%;border-collapse:collapse;font-size:13.5px}
.ctable th,.ctable td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.ctable thead th{position:sticky;top:0;background:var(--card);z-index:2;font-size:12px;font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.ctable th.ct-sortable:hover{color:var(--accent-d)}
.ctable tbody tr:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.ctable tbody tr:last-child td{border-bottom:none}
.ct-arrow{font-size:10px;color:var(--accent)}
.ct-pick{width:34px;text-align:center}
.ct-sub{display:block;font-size:11.5px;color:var(--muted)}
.ctable td a{color:var(--text);text-decoration:none;font-weight:600}
.ctable td a:hover{color:var(--accent-d);text-decoration:underline}
.inline-sel{font-family:inherit;font-size:12.5px;border:1px solid transparent;border-radius:7px;
  padding:4px 6px;background:transparent;color:var(--text);max-width:150px;cursor:pointer}
.inline-sel:hover{border-color:var(--line-2)}
.inline-sel:focus{border-color:var(--accent);background:var(--input-bg);outline:none}
.inline-inp{font-family:inherit;font-size:13px;border:1px solid var(--accent);border-radius:7px;
  padding:4px 7px;width:100%;max-width:200px;background:var(--input-bg);color:var(--text)}
td[data-edit]:hover{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.ctable td.saving{opacity:.5}
.ctable td.saved{background:color-mix(in srgb,var(--green) 18%,transparent)!important;transition:background .3s}
.score-chip{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.score-hot{background:color-mix(in srgb,var(--rust) 20%,transparent);color:var(--rust)}
.score-warm{background:color-mix(in srgb,var(--amber) 22%,transparent);color:var(--amber)}
.score-cold{background:color-mix(in srgb,var(--slate) 20%,transparent);color:var(--muted)}
.changelog{display:flex;flex-direction:column;gap:0}
.cl-row{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.cl-row:last-child{border-bottom:none}
.cl-field{font-weight:700;min-width:64px}
.cl-val{color:var(--muted)}
.cl-val.cl-new{color:var(--text);font-weight:600}
.cl-arr{color:var(--muted)}
.cl-meta{margin-left:auto;color:var(--muted);font-size:11.5px}

/* ---------- v1.25: public booking page ---------- */
.book-chosen{background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid var(--line-2);
  border-radius:10px;padding:9px 12px;font-size:13.5px;margin-top:10px}
.book-chosen a{font-size:12.5px}
.book-days{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:14px}
.book-day{display:flex;flex-direction:column;align-items:center;gap:1px;text-decoration:none;color:var(--text);
  background:var(--card);border:1px solid var(--line-2);border-radius:12px;padding:10px 6px;transition:.12s}
.book-day:hover{border-color:var(--accent);color:var(--accent-d);transform:translateY(-1px);box-shadow:var(--shadow)}
.bd-dow{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.bd-num{font-size:22px;font-weight:700;font-family:'Fraunces',Georgia,serif;line-height:1.1}
.bd-mon{font-size:11px;color:var(--muted)}
.book-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:14px}
.book-slot{text-align:center;text-decoration:none;color:var(--accent-d);background:var(--card);
  border:1px solid var(--line-2);border-radius:9px;padding:10px 6px;font-size:13.5px;font-weight:600;transition:.12s}
.book-slot:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}

/* ---------- v1.30: AI assist ---------- */
.ai-out{border:1px solid var(--line-2);border-radius:9px;padding:11px 13px;font-size:13.5px;line-height:1.55;
  background:var(--card);color:var(--text)}

/* Native date/time pickers: match the theme so the calendar/clock icons are visible. */
html{color-scheme:light}
html[data-theme="dark"],html[data-theme="midnight"]{color-scheme:dark}

/* Recipient "To" chip field + autocomplete (recipients.js) */
.rcpt-field{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--line-2);border-radius:9px;padding:7px 9px;background:var(--input-bg,var(--card));position:relative;min-height:42px}
.rcpt-field:focus-within{border-color:var(--accent)}
.rcpt-chip{display:inline-flex;align-items:center;gap:5px;background:var(--chip-bg,var(--paper));border:1px solid var(--line);border-radius:20px;padding:3px 6px 3px 11px;font-size:12.5px;color:var(--text)}
.rcpt-x{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:0 2px;border-radius:50%}
.rcpt-x:hover{color:var(--rust)}
.rcpt-input{flex:1;min-width:150px;border:none;outline:none;background:transparent;color:var(--text);font-size:14px;padding:4px 2px}
.rcpt-drop{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:40;max-height:260px;overflow-y:auto}
.rcpt-opt{padding:8px 11px;cursor:pointer;font-size:13.5px;color:var(--text)}
.rcpt-opt:hover,.rcpt-opt.active{background:var(--paper)}
.rcpt-sub{color:var(--muted);font-size:12px}

/* Tabbed settings pages (tabs.js) */
.tabs-nav{display:flex;gap:2px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:20px}
.tabs-nav .tab-btn{border:none;background:transparent;color:var(--muted);font-family:inherit;font-size:14px;font-weight:600;padding:10px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;border-radius:9px 9px 0 0}
.tabs-nav .tab-btn:hover{color:var(--text);background:var(--paper)}
.tabs-nav .tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}

/* Rich editor extra toolbar controls (font/size selects, color, separators) */
.rich-sel{font-family:inherit;font-size:12px;border:1px solid var(--line-2);background:var(--card);color:var(--text);border-radius:6px;padding:4px 6px;cursor:pointer;max-width:120px}
.rich-sel:hover{border-color:var(--accent)}
.rich-color{width:30px;height:26px;padding:0;border:1px solid var(--line-2);border-radius:6px;background:var(--card);cursor:pointer;vertical-align:middle}
.rich-sep{width:1px;align-self:stretch;background:var(--line);margin:2px 3px}

/* Sleeker inputs everywhere: soft accent focus ring + refined placeholders (reads
   as a real field, not an empty box — especially in dark mode). */
.fld input,.fld select,.fld textarea,.toolbar input,.toolbar select,.mini-form input,.bulk-bar input,.bulk-bar select,.rich-ed{transition:border-color .15s, box-shadow .15s}
.fld input:focus,.fld select:focus,.fld textarea:focus,.toolbar input:focus,.toolbar select:focus,.mini-form input:focus,.bulk-bar input:focus,.bulk-bar select:focus,.rich-ed:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent)}
.fld input::placeholder,.fld textarea::placeholder,.rcpt-input::placeholder,.conv-reply textarea::placeholder{color:var(--muted);opacity:.65}
.rcpt-field:focus-within{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent)}

/* Rich editor color + highlight swatch menus */
.rich-cwrap{position:relative;display:inline-flex}
.rich-cbtn .ca{display:inline-block;font-weight:800;line-height:1;padding:0 1px 1px}
.rich-cbtn.text .ca{border-bottom:3px solid #9a3412}
.rich-cbtn.hl .ca{background:#fff176;color:#1c2b34;border-radius:3px;padding:0 3px}
.rich-pop{position:absolute;top:100%;left:0;margin-top:5px;background:var(--card);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);padding:9px;z-index:50;width:max-content}
.rich-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.rich-sw{width:22px;height:22px;border-radius:6px;border:1px solid var(--line);cursor:pointer;padding:0;transition:transform .1s}
.rich-sw:hover{transform:scale(1.12)}
.rich-sw.none{display:flex;align-items:center;justify-content:center;background:var(--card);color:var(--muted);font-size:13px}
.rich-customlbl{display:flex;align-items:center;gap:7px;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);cursor:pointer}
.rich-custom{width:28px;height:22px;padding:0;border:1px solid var(--line);border-radius:5px;cursor:pointer;background:var(--card)}

/* one-tap copy field (app.js ccEnhanceCopy) */
.copy-wrap{display:flex;gap:6px;align-items:stretch}
.copy-wrap>input{flex:1;min-width:0}
.copy-btn{flex:none;font:inherit;font-size:12px;font-weight:600;border:1px solid var(--line-2);background:var(--card-2);color:var(--text);border-radius:9px;padding:0 12px;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-color .12s}
.copy-btn:hover{background:var(--hover-bg)}
.copy-btn.copied{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);border-color:var(--accent)}

/* clearer disclosure arrows on <details>/<summary> — CSS-drawn solid triangle */
details > summary{cursor:pointer;list-style:none;display:flex;align-items:center}
details > summary::-webkit-details-marker{display:none}
details > summary::before{
  content:'';display:inline-block;flex:none;
  width:0;height:0;margin-right:10px;
  border-left:9px solid var(--accent);
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  transition:transform .15s ease;
}
details[open] > summary::before{transform:rotate(90deg)}

/* Impersonation ("View as") banner — unmistakable, sticky at the very top. */
.imp-bar{position:sticky;top:0;z-index:2000;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#7a2e12;color:#fff;padding:7px 16px;font-size:13px;font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.25)}
.imp-bar .imp-msg{display:flex;align-items:center;gap:6px}
.imp-bar b{font-weight:800}
.imp-bar .imp-role{margin:0;display:inline-flex;align-items:center;gap:6px;font-weight:500}
.imp-bar .imp-role select{font:inherit;font-weight:600;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);
  color:#fff;border-radius:7px;padding:3px 8px;cursor:pointer}
.imp-bar .imp-role select option{color:#111}
.imp-bar .imp-exit-f{margin:0 0 0 auto}
.imp-bar .imp-exit{font:inherit;font-weight:700;cursor:pointer;background:#fff;color:#7a2e12;border:none;
  border-radius:8px;padding:5px 14px}
.imp-bar .imp-exit:hover{background:#ffe9df}
@media print{.imp-bar{display:none}}
/* Admin user-row actions: a compact "Manage ▾" menu (positioned via JS so the table's
   scroll container can't clip it). */
.rowmenu{position:relative;display:inline-block}
.rowmenu>summary{list-style:none;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--accent);
  padding:4px 11px;border:1px solid var(--line-2);border-radius:8px;white-space:nowrap;user-select:none}
.rowmenu>summary::-webkit-details-marker{display:none}
.rowmenu>summary::marker{content:''}
.rowmenu[open]>summary{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.rowmenu-pop{position:fixed;z-index:1200;background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);padding:6px;min-width:196px;display:flex;flex-direction:column;gap:1px}
.rowmenu-pop form{margin:0}
.rowmenu-pop .link-btn{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:7px;font-size:13px;color:var(--text)}
.rowmenu-pop .link-btn:hover{background:var(--hover-bg)}
.rowmenu-pop .link-btn.danger{color:var(--rust)}
.rowmenu-pop .rm-note{padding:6px 10px;font-size:12px;color:var(--muted)}
.rowmenu-pop .sep{height:1px;background:var(--line);margin:4px 2px}

/* ============================================================
   Per-user appearance — tile & sidebar styles (data attributes on <html>)
   ============================================================ */
/* Border intensity (0..100) + shadow on/off are injected inline per user (cc_appearance_css),
   so a clean/borderless look is possible right through to the inner info tiles + sidebar. */
/* Signature: an optional 'only-ours' connected-node mark in the corner of section tiles. */
html[data-sig="1"] .set-section{position:relative}
html[data-sig="1"] .set-section::before{content:"";position:absolute;left:0;top:0;width:24px;height:24px;
  border-top-left-radius:13px;pointer-events:none;opacity:.8;
  background:radial-gradient(circle at 7px 7px,var(--accent) 2.2px,transparent 2.7px),
             radial-gradient(circle at 15px 7px,color-mix(in srgb,var(--accent) 45%,transparent) 1.8px,transparent 2.3px),
             radial-gradient(circle at 7px 15px,color-mix(in srgb,var(--accent) 45%,transparent) 1.8px,transparent 2.3px)}
/* Sidebar active: 'default' = tint + rail. 'rail' = just the left marker, no fill.
   'soft' = tint only (no rail). 'solid' = accent fill. */
html[data-side="rail"] .side-link.on{background:transparent}
html[data-side="soft"] .side-link.on::before{display:none}
html[data-side="solid"] .side-link.on{background:var(--accent)}
html[data-side="solid"] .side-link.on::before{display:none}

/* ============================ INBOX (relationship inbox) ============================ */
.mail{display:flex;height:min(calc(100vh - 150px),940px);min-height:480px;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;background:var(--card);margin-top:6px}
.mail *{min-width:0}
/* rail */
.mail-rail{width:202px;flex:none;border-right:1px solid var(--line);background:var(--bg);padding:12px 10px;
  overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.mail-scope{display:flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--card);
  border-radius:9px;padding:7px 10px;font-size:12.5px;font-weight:600;color:var(--text);margin-bottom:10px;cursor:pointer}
.mail-scope b{margin-left:auto;color:var(--muted)}
.mail-compose{display:flex;align-items:center;justify-content:center;gap:7px;border:none;background:var(--accent);
  color:#fff;font-weight:650;font-size:13.5px;padding:10px 12px;border-radius:11px;text-decoration:none;
  box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 30%,transparent);margin-bottom:12px}
.mail-compose:hover{filter:brightness(1.05)}
.mail-rl{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:9px;color:var(--text);
  font-size:13px;font-weight:500;text-decoration:none;cursor:pointer}
.mail-rl .i{width:17px;text-align:center}
.mail-rl:hover{background:var(--hover-bg)}
.mail-rl.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:650}
.mail-rl .ct{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:600}
.mail-rl .ct.unread{background:var(--accent);color:#fff;border-radius:10px;min-width:19px;height:19px;
  display:grid;place-items:center;padding:0 5px}
.mail-rail-h{display:flex;align-items:center;font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding:15px 9px 5px;font-weight:700}
.mail-lab-add{margin-left:auto;text-decoration:none;color:var(--muted);font-weight:700;font-size:14px;line-height:1}
.mail-lab-add:hover{color:var(--accent)}
.mail-dot{width:10px;height:10px;border-radius:3px;flex:none}
.mail-rail-empty{font-size:11.5px;color:var(--muted);padding:4px 9px}
/* list */
.mail-list{width:362px;flex:none;border-right:1px solid var(--line);display:flex;flex-direction:column}
.mail-list-top{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mail-list-top h2{font-size:16px;font-weight:650;margin:0}
.mail-count{font-size:11.5px;color:var(--muted);font-weight:600}
.mail-search{margin-left:auto}
.mail-search-in{position:relative;display:flex}
.mail-search-in input{font-size:12.5px;padding:7px 28px 7px 10px;border:1px solid var(--line-2);border-radius:9px;
  background:var(--input-bg);color:var(--text);min-width:150px;width:150px}
.mail-search-x{position:absolute;right:7px;top:50%;transform:translateY(-50%);text-decoration:none;color:var(--muted);font-size:13px;padding:2px}
.mail-rows{overflow-y:auto;flex:1}
.mail-row{display:grid;grid-template-columns:auto 1fr;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line);
  cursor:pointer;position:relative;text-decoration:none;color:var(--text)}
.mail-row:hover{background:var(--hover-bg)}
.mail-row.sel{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.mail-row.sel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.mail-av{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:650;font-size:13px;flex:none}
.mail-av.sm{width:30px;height:30px;border-radius:9px;font-size:11px}
.mail-row-b{min-width:0;display:block}
.mail-row-b .r1{display:flex;align-items:baseline;gap:8px}
.mail-row-b .who{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-row.unread .who{font-weight:750}
.mail-row-b .when{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap;flex:none}
.mail-row-b .subj{display:block;font-size:13px;color:var(--text);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-row.unread .subj{font-weight:650}
.mail-cnt{font-size:11px;color:var(--muted);font-weight:700}
.mail-row-b .snip{display:block;font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-row-b .meta{display:flex;align-items:center;gap:7px;margin-top:6px;min-height:1px}
.mail-udot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
.mail-star-on{color:#eab308}
.mail-clip{font-size:11px;color:var(--muted)}
/* empty states */
.mail-empty{padding:34px 22px;text-align:center;color:var(--muted)}
.mail-empty-ic{width:72px;height:72px;border-radius:20px;margin:0 auto 14px;display:grid;place-items:center;font-size:32px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.mail-empty h3{font-size:18px;font-weight:650;color:var(--text);margin:0 0 7px}
.mail-empty p{font-size:13.5px;margin:0 auto 16px;max-width:280px}
/* reading */
.mail-read-wrap{flex:1;display:flex}
.mail-read-blank{flex:1;display:grid;place-items:center;color:var(--muted);text-align:center;padding:30px}
.mail-read{flex:1;display:flex;flex-direction:column}
.mail-read-top{padding:14px 18px;border-bottom:1px solid var(--line)}
.mail-back{display:none;text-decoration:none;color:var(--accent);font-size:20px;font-weight:700;margin-right:8px}
.mail-read-subj{font-size:19px;font-weight:650;line-height:1.3}
.mail-read-actions{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap;align-items:center}
.mail-af{display:inline;margin:0}
.mail-ra{border:1px solid var(--line-2);background:var(--card);color:var(--text);font-size:12.5px;font-weight:550;
  padding:6px 11px;border-radius:9px;display:inline-flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer}
.mail-ra:hover{border-color:var(--accent);color:var(--accent)}
.mail-ra.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.mail-ra.pri:hover{filter:brightness(1.05);color:#fff}
.mail-ra.danger:hover{border-color:var(--rust);color:var(--rust)}
.mail-labelmenu{position:relative;display:inline-block}
.mail-labelpop{position:absolute;top:calc(100% + 4px);left:0;z-index:20;background:var(--card);border:1px solid var(--line-2);
  border-radius:11px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px;min-width:190px}
.mail-labopt{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;color:var(--text);
  font-size:12.5px;padding:7px 9px;border-radius:7px;cursor:pointer;text-align:left;text-decoration:none}
.mail-labopt:hover{background:var(--hover-bg)}
.mail-labopt.on{font-weight:650}
.mail-labopt.add{color:var(--accent);font-weight:600}
.mail-msgs{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.mail-msg{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--card)}
.mail-msg.out{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.mail-msg-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.mail-msg-who{min-width:0}
.mail-msg-who b{font-size:13.5px;font-weight:650;display:block}
.mail-msg-who span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.mail-msg-time{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap;flex:none}
.mail-msg-body{font-size:13.5px;line-height:1.6;color:var(--text);overflow-x:auto}
.mail-msg-body img{max-width:100%;height:auto}
.mail-msg-body a{color:var(--accent)}
.mail-pruned{color:var(--muted)}
.mail-atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.mail-att{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:var(--bg);
  border-radius:9px;padding:7px 11px;font-size:12px;text-decoration:none;color:var(--text)}
.mail-att:hover{border-color:var(--accent)}
.mail-att .sz{color:var(--muted)}
.mail-reply{border-top:1px solid var(--line);padding:12px 18px;display:flex;flex-direction:column;gap:9px}
.mail-reply textarea{width:100%;border:1px solid var(--line-2);background:var(--input-bg);color:var(--text);
  border-radius:10px;padding:11px 13px;font-family:inherit;font-size:13.5px;min-height:70px;resize:vertical}
.mail-reply-foot{display:flex;align-items:center;gap:10px}
.mail-reply-foot .hint{font-size:11.5px;color:var(--muted)}
.mail-reply-foot .btn{margin-left:auto}
/* contact panel */
.mail-contact{width:302px;flex:none;border-left:1px solid var(--line);background:var(--bg);padding:20px 16px;overflow-y:auto}
.mail-ident{text-align:center;padding-bottom:15px;border-bottom:1px solid var(--line)}
.mail-big{width:64px;height:64px;border-radius:18px;margin:0 auto 10px;display:grid;place-items:center;color:#fff;font-weight:650;font-size:23px}
.mail-ident h3{font-size:16px;font-weight:650;margin:0}
.mail-ident .role{font-size:12.5px;color:var(--muted);margin-top:2px}
.mail-ident .tags{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.mail-ident .tag{font-size:10.5px;font-weight:600;background:var(--card);border:1px solid var(--line-2);color:var(--text);padding:3px 9px;border-radius:999px}
.mail-score-row{display:flex;gap:11px;align-items:center;margin:15px 0}
.mail-score{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center}
.mail-score i{width:36px;height:36px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-style:normal;font-weight:750;font-size:14px;color:var(--text)}
.mail-score-row .sl b{font-size:13px;font-weight:650;display:block}
.mail-score-row .sl span{font-size:11.5px;color:var(--muted)}
.mail-psec{margin-top:15px}
.mail-psec h4{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:0 0 8px}
.mail-tl{display:flex;gap:9px;font-size:12.5px;padding:5px 0;color:var(--text)}
.mail-tl .ti{width:15px;text-align:center;flex:none}
.mail-tl .tt{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.mail-pact{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mail-pact a{border:1px solid var(--line-2);background:var(--card);color:var(--text);font-size:12px;font-weight:550;
  padding:8px 6px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:5px;text-decoration:none}
.mail-pact a:hover{border-color:var(--accent);color:var(--accent)}
.mail-pact a.wide{grid-column:1/-1;background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:transparent;color:var(--accent);font-weight:650}
.mail-compose-modal{max-width:620px;width:100%}
/* ---- responsive ---- */
@media (max-width:1240px){
  .mail-read-wrap{flex-direction:column}
  .mail-contact{width:auto;border-left:none;border-top:1px solid var(--line);max-height:300px}
}
@media (max-width:980px){ .mail-list{width:320px} }
@media (max-width:820px){
  .mail{height:auto;min-height:0;flex-direction:column;border-radius:12px}
  .mail-rail{width:auto;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line);gap:6px;padding:10px}
  .mail-rail .mail-scope,.mail-rail .mail-compose{flex:none;margin:0;white-space:nowrap}
  .mail-rail-h{display:none}
  .mail-rl{flex:none;white-space:nowrap}
  .mail-list{width:auto;border-right:none;border-bottom:1px solid var(--line)}
  .mail-rows{max-height:none}
  .mail-read-wrap{min-height:300px}
}
@media (max-width:640px){
  /* drill-down: when a conversation is open, show only the reading pane */
  .mail.mail-open .mail-rail,.mail.mail-open .mail-list{display:none}
  .mail:not(.mail-open) .mail-read-wrap{display:none}
  .mail-back{display:inline}
  .mail-read-subj{font-size:17px}
  .mail-contact{max-height:none}
  .mail-search-in input{width:120px;min-width:120px}
}

.mail-reply-from{font-size:12px;padding:4px 7px;border:1px solid var(--line-2);border-radius:7px;background:var(--input-bg);color:var(--text);max-width:220px}

.mail-connect{display:flex;align-items:center;gap:12px;margin:12px 14px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:color-mix(in srgb,var(--accent) 7%,transparent);text-decoration:none;color:var(--text)}
.mail-connect:hover{border-color:var(--accent)}
.mail-connect .mc-ic{font-size:22px}
.mail-connect .mc-b b{display:block;font-size:13.5px;font-weight:650}
.mail-connect .mc-b span{font-size:12px;color:var(--muted)}
.mail-connect .mc-cta{margin-left:auto;font-size:12.5px;font-weight:650;color:var(--accent);white-space:nowrap}

/* Inbox scope switcher (Personal / Shared) */
.mail-scopes{display:flex;gap:3px;background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:3px;margin-bottom:11px}
.mail-scope-opt{flex:1;min-width:0;text-align:center;font-size:12px;font-weight:600;color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-scope-opt:hover{color:var(--text)}
.mail-scope-opt.on{background:var(--card);color:var(--accent);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* ===== Inbox refinement: roomier desktop + Outlook-style mobile ===== */
.mail-menu-btn,.mail-fab{display:none}
.mail-msgs{padding:18px 22px}
.mail-msg{border:none;background:none;border-radius:0;padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.mail-msg:last-child{border-bottom:none;margin-bottom:0;padding-bottom:2px}
.mail-msg.out{background:none}
.mail-msg-body{font-size:14px;line-height:1.65}
.mail-read-top{padding:18px 22px}
.mail-read-subj{font-size:21px}
.mail-read-actions{margin-top:13px}
.mail-row{padding:13px 16px}
.mail-list-top{padding:13px 16px;gap:9px}
.mail-fab{position:fixed;right:18px;bottom:calc(20px + env(safe-area-inset-bottom,0px));width:54px;height:54px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:22px;place-items:center;text-decoration:none;box-shadow:0 8px 22px rgba(15,155,142,.45);z-index:50}
.mail-fab:hover{filter:brightness(1.06)}
.mail-menu-btn{border:none;background:none;color:var(--text);font-size:20px;width:34px;height:34px;border-radius:8px;cursor:pointer}
.mail-menu-btn:hover{background:var(--hover-bg)}
.mail-backdrop{display:none}
@media (max-width:820px){
  .mail{flex-direction:column;height:auto;min-height:0}
  .mail-rail{position:fixed;top:0;bottom:0;left:0;width:280px;max-width:84vw;transform:translateX(-100%);
    transition:transform .22s ease;z-index:60;border-right:1px solid var(--line);border-bottom:none;
    flex-direction:column;overflow-y:auto;box-shadow:6px 0 24px rgba(0,0,0,.25);padding:16px 12px;gap:2px}
  .mail.rail-open .mail-rail{transform:none}
  .mail-rail-h{display:flex}
  .mail-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:55}
  .mail.rail-open .mail-backdrop{display:block}
  .mail-menu-btn{display:inline-grid;place-items:center}
  .mail-fab{display:grid}
  .mail-list{width:auto;border-right:none;border-bottom:1px solid var(--line)}
  .mail-rows{max-height:none}
  .mail-row{padding:15px 16px}
  .mail-read-wrap{min-height:320px}
}
@media (max-width:640px){
  .mail.mail-open ~ .mail-fab{display:none}
  .mail.mail-open .mail-menu-btn{display:none}
}

/* ===== Inbox v2: scope bar, collapsible contact panel, robust mobile drawer ===== */
.mail-scopebar{display:flex;gap:4px;padding:10px 14px 2px}
.mail-scopebar .mail-scope-opt{flex:1;min-width:0;text-align:center;font-size:12.5px;font-weight:600;color:var(--muted);
  text-decoration:none;padding:7px 10px;border-radius:9px;border:1px solid var(--line-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-scopebar .mail-scope-opt:hover{color:var(--text)}
.mail-scopebar .mail-scope-opt.on{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);border-color:transparent}
#mail-root:not(.panel-open) .mail-contact{display:none}
.mail-panel-btn{margin-left:auto}
#mail-root .mail-read-top{padding:18px 24px}
#mail-root .mail-msgs{padding:20px 24px}
#mail-root .mail-list{width:340px}
@media (max-width:820px){
  #mail-root{flex-direction:column;height:auto;min-height:0}
  #mail-root .mail-rail{display:none;position:fixed;top:0;left:0;bottom:0;width:84vw;max-width:300px;z-index:60;
    background:var(--bg);border-right:1px solid var(--line);border-bottom:none;overflow-y:auto;padding:16px 12px;
    box-shadow:6px 0 28px rgba(0,0,0,.4);flex-direction:column;gap:2px;transform:none}
  #mail-root.rail-open .mail-rail{display:flex}
  #mail-root .mail-rail-h{display:flex}
  #mail-root .mail-backdrop{display:none}
  #mail-root.rail-open .mail-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55}
  #mail-root .mail-list{width:100%;border-right:none;border-bottom:1px solid var(--line)}
  #mail-root .mail-read-wrap{width:100%;flex-direction:column}
  #mail-root .mail-rows{max-height:none}
  #mail-root .mail-row{padding:15px 16px}
  .mail-menu-btn{display:inline-grid !important;place-items:center}
  .mail-fab{display:grid !important}
  #mail-root:not(.mail-open) .mail-read-wrap{display:none}
  #mail-root.mail-open .mail-list{display:none}
  #mail-root.mail-open .mail-scopebar{display:none}
  #mail-root.mail-open .mail-fab{display:none !important}
  #mail-root.mail-open .mail-menu-btn{display:none !important}
}