/* PhySlim Portal shared look: tokens, app shell (top bar), home page. Light only by brand rule. */
:root {
  --page:#ffffff; --canvas:#f3f0e9; --dark:#16191e; --cream:#faf8f2;
  --ink:#1a1815; --ink-2:#3a3530; --ink-3:#6b6660; --ink-4:#9c988f; --ink-5:#b8b4a9;
  --rule:#dddacf; --rule-soft:#e5e1d6; --healthy:#14a38b; --watch:#f5b53f; --attention:#ee5e4e;
  --sans:"Plus Jakarta Sans", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing:border-box; }
html, body { background:var(--canvas); }
body { margin:0; color:var(--ink-2); font-family:var(--sans); font-size:15px; line-height:24px; }
p { margin:0 0 12px; }
.muted { color:var(--ink-3); font-size:14px; line-height:22px; }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.wordmark { font-size:13px; line-height:16px; font-weight:800; letter-spacing:3px; color:var(--ink); margin:0; }
.tag { font-size:8.5px; line-height:13px; font-weight:600; letter-spacing:1.8px; color:var(--ink-4); margin:4px 0 0; text-transform:uppercase; }
.test-bar { background:var(--dark); color:var(--ink-5); font-size:12px; line-height:18px; padding:8px 16px; text-align:center; }
.test-bar b { color:var(--cream); }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; }
.dot.live, .dot.signed { background:var(--healthy); } .dot.planned { background:var(--ink-5); }
.dot.waiting, .dot.saving { background:var(--watch); } .dot.expired, .dot.save-failed { background:var(--attention); }

/* App shell */
.appbar { background:var(--page); border-bottom:1px solid var(--rule); position:sticky; top:env(safe-area-inset-top, 0px); z-index:5; }
.appbar-in { max-width:1180px; margin:0 auto; padding:0 20px; height:64px; display:flex; align-items:center; gap:24px; }
.brandmark { display:grid; gap:2px; flex:none; text-decoration:none; }
.brandmark .tag { margin:0; }
.crumbs { display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink-3); min-width:0; flex:1; }
.crumbs a { color:var(--ink-3); text-decoration:none; }
.crumbs a:hover { color:var(--ink); }
.crumbs .sep { color:var(--ink-5); }
.crumbs .here { color:var(--ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user { display:flex; align-items:center; gap:10px; flex:none; font-size:13.5px; color:var(--ink-2); }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--dark); color:var(--cream); display:grid; place-items:center; font-size:12.5px; font-weight:700; letter-spacing:.5px; }
.user .name { font-weight:600; color:var(--ink); }
.user .out { background:none; border:0; padding:0; font:inherit; font-size:12.5px; color:var(--ink-3); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
@media (max-width:640px) { .user .name { display:none; } .crumbs { display:none; } .appbar-in { justify-content:space-between; } }
.appmain { max-width:1180px; margin:0 auto; padding:28px 20px 56px; }
.panel-card { background:var(--page); max-width:860px; margin:0 auto; border:1px solid var(--rule); border-radius:12px; padding:28px 22px 32px; }
@media (min-width:700px) { .panel-card { padding:40px 56px 44px; } }
.panel-card.slim { max-width:460px; margin-top:6vh; }
.panel-card h1:first-child, .panel-card > section > h1:first-child { margin-top:0; }

/* Shared form bits */
h1 { font-size:28px; line-height:34px; font-weight:700; letter-spacing:-0.8px; color:var(--ink); margin:26px 0 8px; text-wrap:balance; }
h2 { font-size:18px; line-height:24px; font-weight:700; letter-spacing:-0.3px; color:var(--ink); margin:0 0 10px; }
label.field { display:grid; gap:6px; margin-top:16px; }
label.field > span { font-size:10px; font-weight:700; letter-spacing:1.4px; color:var(--ink-3); text-transform:uppercase; }
input.text { font:inherit; color:var(--ink); background:var(--page); border:0; border-bottom:1.5px solid var(--ink-3); padding:8px 2px; border-radius:0; width:100%; }
input.text:focus { outline:none; border-bottom-color:var(--ink); }
.pill { font:inherit; font-size:15px; font-weight:700; color:var(--cream); background:var(--dark); border:0; border-radius:999px; padding:13px 26px; cursor:pointer; }
.pill.ghost { color:var(--ink); background:var(--page); border:1.5px solid var(--ink); }
.pill[disabled] { opacity:.35; cursor:not-allowed; }
.err { color:var(--ink); font-size:13.5px; margin-top:12px; } .err::before { content:"● "; color:var(--attention); }
.foot { margin-top:28px; padding-top:12px; border-top:1px solid var(--rule-soft); font-size:12px; line-height:19px; color:var(--ink-3); }

/* Home */
.hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:20px 24px; align-items:end; margin-bottom:28px; }
.hero > div:first-child { grid-column:1; grid-row:1; }
.hero .stats { grid-column:2; grid-row:1; }
.hero .date { font-size:12.5px; font-weight:600; letter-spacing:.4px; color:var(--ink-3); margin:0 0 6px; }
.hero h1 { font-size:36px; line-height:42px; letter-spacing:-1px; margin:0 0 8px; }
.hero p { margin:0; max-width:56ch; }
.stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stat { background:var(--page); border:1px solid var(--rule); border-radius:12px; padding:16px 18px; }
.stat .k { font-size:12.5px; color:var(--ink-3); display:flex; align-items:center; gap:7px; }
.stat .v { font-size:30px; line-height:36px; font-weight:700; letter-spacing:-0.8px; color:var(--ink); font-variant-numeric:tabular-nums; margin-top:4px; }
.how { grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.how .f { display:flex; gap:12px; align-items:flex-start; background:var(--page); border:1px solid var(--rule); border-radius:12px; padding:16px 18px; }
.how .n { width:24px; height:24px; border-radius:50%; background:var(--canvas); color:var(--ink); font-size:12px; font-weight:700; display:grid; place-items:center; flex:none; margin-top:1px; }
.how .f.hz .n { background:var(--dark); color:var(--cream); }
.how b { display:block; color:var(--ink); font-size:14px; line-height:20px; }
.how div > span { display:block; color:var(--ink-3); font-size:12.5px; line-height:18px; margin-top:2px; }
@media (max-width:820px) { .hero { grid-template-columns:1fr; } .hero > div:first-child, .hero .stats, .how { grid-column:1; grid-row:auto; } .how { grid-template-columns:1fr; } }
.home-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start; }
@media (max-width:980px) { .home-grid { grid-template-columns:1fr; } }
.h-sec { font-size:13px; font-weight:700; letter-spacing:.2px; color:var(--ink); margin:0 0 12px; display:flex; justify-content:space-between; align-items:baseline; }
.h-sec small { font-weight:500; color:var(--ink-3); font-size:12.5px; }
.app-tools { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; }
.app-tool { position:relative; display:grid; grid-template-rows:auto auto 1fr auto; gap:8px; text-align:left; padding:18px; border:1px solid var(--rule); border-radius:12px; background:var(--page); font:inherit; color:inherit; cursor:pointer; min-height:178px; text-decoration:none; transition:border-color .15s, transform .15s, box-shadow .15s; }
.app-tool:hover { border-color:var(--ink-4); transform:translateY(-1px); box-shadow:0 6px 18px rgba(26,24,21,.06); }
@media (prefers-reduced-motion: reduce) { .app-tool { transition:none; } .app-tool:hover { transform:none; } }
.app-tool .row { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--ink-2); white-space:nowrap; }
.ico { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:var(--canvas); color:var(--ink-2); }
.ico svg { width:20px; height:20px; }
.app-tool.live .ico { background:var(--dark); color:var(--cream); }
.app-tool b { color:var(--ink); font-size:16px; line-height:21px; letter-spacing:-0.2px; }
.app-tool .desc { color:var(--ink-3); font-size:13.5px; line-height:20px; }
.app-tool .go { color:var(--ink); font-weight:600; font-size:13px; }
.app-tool.planned .go { color:var(--ink-3); font-weight:500; }
.app-tool[aria-expanded="true"] { border-color:var(--ink); }
.app-tool.live { grid-column:1 / -1; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto auto; align-items:center; column-gap:18px; row-gap:4px; min-height:0; padding:22px; border-color:var(--ink-4); }
.app-tool.live .row { grid-row:1 / span 2; }
.app-tool.live b { grid-column:2; font-size:18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.app-tool.live .desc { grid-column:2; }
.app-tool.live .go { grid-column:3; grid-row:1 / span 2; background:var(--dark); color:var(--cream); border-radius:999px; padding:10px 20px; white-space:nowrap; }
.app-tool.live .ico { width:48px; height:48px; border-radius:12px; }
.app-tool.live .ico svg { width:24px; height:24px; }
@media (max-width:560px) { .app-tool.live { grid-template-columns:auto minmax(0,1fr); } .app-tool.live .go { grid-column:1 / -1; grid-row:auto; justify-self:start; margin-top:10px; } }
.planned-note { margin-top:14px; background:var(--page); border:1px solid var(--rule); border-radius:12px; padding:18px 20px; }
.planned-note h2 { margin-bottom:6px; }
.side-panel { background:var(--page); border:1px solid var(--rule); border-radius:12px; padding:18px 18px 8px; margin-bottom:16px; }
.act { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; padding:12px 0; border-top:1px solid var(--rule-soft); }
.act:first-child { border-top:0; padding-top:4px; }
.act .dot { margin-top:8px; }
.act b { color:var(--ink); font-size:14px; font-weight:600; }
.act span.m { grid-column:2; color:var(--ink-3); font-size:12.5px; line-height:18px; }