/* ============================================================
   HELIONAI APP SHELL, light theme, left sidebar
   Shared by dashboard.html, framework.html, templates.html
   Type: Space Grotesk (UI) + IBM Plex Mono (codes/labels)
   ============================================================ */
:root{
  --ink:#0F141B;
  --canvas:#F4F5F8;
  --surface:#FFFFFF;
  --surface-2:#FFFFFF;
  --inset:#F5F6FA;
  --acc:#2747D6; --acc-2:#1B2F8F; --acc-weak:rgba(39,71,214,.08);
  --good:#1E7F5C; --good-weak:rgba(30,127,92,.12);
  --warn:#B7791F; --warn-weak:rgba(183,121,31,.13);
  --risk:#C0392B; --risk-weak:rgba(192,57,43,.10);
  --line:#E5E7EE; --line-2:#EEF0F5;
  --tx:#11161D; --tx-mut:#5B6573; --tx-faint:#8B94A3;
  --hover:rgba(15,23,42,.045);
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04);
  --shadow-lift:0 10px 30px -12px rgba(16,24,40,.18);
  --sidebar-w:236px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Space Grotesk",system-ui,sans-serif;background:var(--canvas);color:var(--tx);
  -webkit-font-smoothing:antialiased;font-size:.875rem;line-height:1.5}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
::selection{background:var(--acc);color:#fff}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rise{animation:rise .55s cubic-bezier(.2,.7,.3,1) both}
.r1{animation-delay:.04s}.r2{animation-delay:.1s}.r3{animation-delay:.16s}.r4{animation-delay:.22s}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(192,57,43,.22)}50%{box-shadow:0 0 0 6px rgba(192,57,43,.07)}}
@media(prefers-reduced-motion:reduce){.rise{animation:none}*{animation-duration:.001s!important;transition-duration:.001s!important}}

/* ---------- App layout ---------- */
.app{display:flex;min-height:100vh}
.spacer{flex:1}
.bg-glow{display:none}

/* ---------- Sidebar ---------- */
.sidebar{width:var(--sidebar-w);flex:none;position:fixed;inset:0 auto 0 0;z-index:40;
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:1rem .7rem .8rem}
.side-brand{display:flex;align-items:center;gap:.5rem;padding:.2rem .55rem 1rem;color:var(--ink)}
.side-brand .brand-mark{display:none}
.org-switch{display:flex;align-items:center;gap:.5rem;padding:.45rem .55rem;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;background:var(--surface);transition:.15s;margin-bottom:.85rem}
.org-switch:hover{background:var(--inset);border-color:#D7DBE6}
.org-avatar{width:24px;height:24px;border-radius:7px;background:var(--acc);color:#fff;display:grid;
  place-items:center;font-size:.56rem;font-weight:700;font-family:"IBM Plex Mono",monospace;flex:none}
.org-name{font-size:.78rem;font-weight:600;color:var(--ink);line-height:1.1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;flex:1}
.org-switch svg{opacity:.4;flex:none}

.side-nav{display:flex;flex-direction:column;gap:.12rem}
.side-nav a{position:relative;display:flex;align-items:center;gap:.65rem;padding:.55rem .65rem;border-radius:10px;
  color:var(--tx-mut);font-size:.84rem;font-weight:500;transition:.15s}
.side-nav a svg{width:17px;height:17px;flex:none;opacity:.75}
.side-nav a:hover{background:var(--inset);color:var(--ink)}
.side-nav a .side-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-nav a.active{background:var(--acc-weak);color:var(--acc);font-weight:600}
.side-nav a.active svg{opacity:1;color:var(--acc)}
.side-nav a.active::before{content:"";position:absolute;left:-.7rem;top:50%;transform:translateY(-50%);
  width:3px;height:20px;background:var(--acc);border-radius:0 3px 3px 0}
.side-nav .count{font-family:"IBM Plex Mono",monospace;font-size:.6rem;font-weight:600;flex:none;
  background:var(--inset);border:1px solid var(--line);border-radius:999px;padding:.04rem .42rem;color:var(--tx-mut)}
.side-nav .count.alert{background:var(--risk);border-color:transparent;color:#fff}
.side-foot{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--line-2)}
.side-user{display:flex;align-items:center;gap:.6rem;padding:.45rem .55rem;border-radius:10px;cursor:pointer;transition:.15s}
.side-user:hover{background:var(--inset)}
.u-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--acc),var(--acc-2));
  color:#fff;display:grid;place-items:center;font-size:.66rem;font-weight:700;flex:none}
.u-meta{min-width:0;flex:1}
.u-name{font-size:.78rem;font-weight:600;color:var(--ink);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-role{font-size:.64rem;color:var(--tx-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Main + topbar ---------- */
.app-main{margin-left:var(--sidebar-w);flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:30;min-height:58px;display:flex;align-items:center;gap:.7rem;
  padding:.6rem 1.6rem;background:rgba(244,245,248,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2)}
.search{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:10px;
  padding:.46rem .7rem;color:var(--tx-faint);background:var(--surface);width:280px;cursor:pointer;transition:.15s}
.search:hover{border-color:#D7DBE6}
.search span{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.search kbd{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:.58rem;border:1px solid var(--line);
  border-radius:5px;padding:.05rem .3rem;color:var(--tx-mut)}
.lang{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.lang button{font-family:"IBM Plex Mono",monospace;font-size:.66rem;font-weight:500;letter-spacing:.04em;
  color:var(--tx-faint);padding:4px 9px;border-radius:999px;line-height:1;transition:.15s}
.lang button.on{color:#fff;background:var(--acc)}
.icon-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--tx-mut);position:relative;transition:.15s;background:var(--surface)}
.icon-btn:hover{background:var(--inset);color:var(--ink)}
.icon-btn .dot{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:var(--risk);
  border:1.5px solid var(--surface);animation:pulse 2.4s ease-in-out infinite}

/* ---------- Content ---------- */
.content{max-width:1320px;width:100%;margin:0 auto;padding:1.6rem 1.6rem 3.5rem;position:relative}
.page-head{display:flex;align-items:flex-end;gap:1rem;margin-bottom:1.3rem;flex-wrap:wrap}
.page-title{font-size:1.6rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.page-sub{color:var(--tx-mut);font-size:.84rem;margin-top:.15rem}

.btn{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;border-radius:10px;
  padding:.55rem 1rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);transition:.16s;white-space:nowrap}
.btn:hover{border-color:#D2D6E0;background:var(--inset)}
.btn.primary{background:var(--acc);border-color:transparent;color:#fff;box-shadow:0 8px 18px -10px var(--acc)}
.btn.primary:hover{background:var(--acc-2);transform:translateY(-1px)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.card-head{display:flex;align-items:center;gap:.75rem;padding:.95rem 1.25rem;border-bottom:1px solid var(--line-2)}
.card-title{font-family:"IBM Plex Mono",monospace;font-size:.66rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-faint)}
.card-link{font-size:.76rem;font-weight:600;color:var(--acc);transition:.15s}
.card-link:hover{color:var(--acc-2)}

.pill{display:inline-flex;align-items:center;gap:.3rem;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  font-weight:600;border-radius:999px;padding:.16rem .55rem;white-space:nowrap}
.pill.good{color:var(--good);background:var(--good-weak)}
.pill.warn{color:var(--warn);background:var(--warn-weak)}
.pill.risk{color:var(--risk);background:var(--risk-weak)}
.pill.acc{color:var(--acc);background:var(--acc-weak)}
.pill.neutral{color:var(--tx-mut);background:var(--inset)}

/* ---------- Shared empty state (guided first-run) ---------- */
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:3rem 1.5rem;color:var(--tx-mut)}
.empty-state .es-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:.95rem;
  background:var(--acc-weak);color:var(--acc)}
.empty-state.good .es-icon{background:var(--good-weak);color:var(--good)}
.empty-state .es-icon svg{width:26px;height:26px}
.empty-state .es-title{font-size:1rem;font-weight:600;color:var(--ink);margin-bottom:.3rem}
.empty-state .es-desc{font-size:.82rem;color:var(--tx-faint);line-height:1.55;max-width:430px;margin:0 auto}
.empty-state .es-cta{margin-top:1.15rem}
.empty-state .es-note{margin-top:.6rem;font-size:.74rem;color:var(--tx-faint);line-height:1.5;max-width:430px}
.empty-state .es-note a{color:var(--acc);font-weight:600}
.empty-state .es-note a:hover{color:var(--acc-2)}

/* ---------- Framework page ---------- */
.summary-chips{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.api-note{font-size:.78rem;color:var(--tx-faint);text-align:center;padding:2.2rem 1rem}
.filterbar{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center;padding:.85rem 1rem;margin-bottom:1.25rem}
.f-input{flex:1;min-width:220px;display:flex;align-items:center;gap:.5rem;border:1px solid var(--line);
  border-radius:9px;padding:.45rem .65rem;background:var(--inset)}
.f-input svg{flex:none;color:var(--tx-faint)}
.f-input input{flex:1;background:none;border:none;outline:none;color:var(--ink);font:inherit;font-size:.8rem}
.f-input input::placeholder{color:var(--tx-faint)}
.catpills{display:flex;gap:.3rem;flex-wrap:wrap}
.catpill{font-family:"IBM Plex Mono",monospace;font-size:.64rem;font-weight:600;border:1px solid var(--line);
  border-radius:999px;padding:.28rem .65rem;color:var(--tx-mut);transition:.15s;white-space:nowrap;background:var(--surface)}
.catpill:hover{border-color:#D2D6E0;color:var(--ink)}
.catpill.on{background:var(--acc);border-color:transparent;color:#fff}
.f-select{font:inherit;font-size:.76rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:.42rem .6rem;outline:none;cursor:pointer}
.f-select option{background:var(--surface);color:var(--ink)}

.group{margin-bottom:1.25rem;overflow:hidden}
.grp-count{font-family:"IBM Plex Mono",monospace;font-size:.66rem;color:var(--tx-faint)}
.ctl{border-bottom:1px solid var(--line-2)}
.ctl:last-child{border-bottom:none}
.ctl-row{display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;padding:.78rem 1.25rem;transition:background .15s}
.ctl-row:hover{background:var(--hover)}
.sdot{width:9px;height:9px;border-radius:50%;flex:none;background:#CDD2DC}
.sdot.compliant{background:var(--good);box-shadow:0 0 0 3px var(--good-weak)}
.sdot.in_progress{background:var(--warn);box-shadow:0 0 0 3px var(--warn-weak)}
.sdot.not_started{background:#CDD2DC}
.sdot.not_applicable{background:#E0E3EA}
.ctl-code{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--tx-mut);flex:none;width:64px}
.ctl-title{flex:1;min-width:0;font-size:.84rem;font-weight:600;line-height:1.35;color:var(--ink)}
.ctl.na .ctl-title{color:var(--tx-faint);text-decoration:line-through;font-weight:500}
.ctl.na .ctl-code{color:var(--tx-faint)}
.ctl-chev{flex:none;color:var(--tx-faint);transition:transform .2s}
.ctl.open .ctl-chev{transform:rotate(90deg)}
.ctl-detail{padding:.35rem 1.25rem 1.25rem 3.1rem;animation:rise .3s cubic-bezier(.2,.7,.3,1) both}
.ctl-detail .desc{font-size:.82rem;color:var(--tx-mut);line-height:1.6;max-width:760px}
.ctl-detail .k{font-family:"IBM Plex Mono",monospace;font-size:.6rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-faint);margin:1rem 0 .3rem}
.ctl-detail .guide{font-size:.8rem;color:var(--tx-mut);line-height:1.6;max-width:760px}
.ctl-detail .legal{font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--tx-faint);line-height:1.6}
.tpl-btns{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.2rem}
.tpl-btn{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;font-weight:600;border:1px solid var(--line);
  border-radius:9px;padding:.4rem .7rem;color:var(--ink);transition:.15s;background:var(--surface)}
.tpl-btn:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-weak)}
.tpl-btn svg{color:var(--acc);flex:none}
.seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--inset);flex-wrap:wrap}
.seg button{font-size:.72rem;font-weight:600;padding:.35rem .7rem;border-radius:7px;color:var(--tx-mut);transition:.15s;white-space:nowrap}
.seg button:hover{color:var(--ink);background:var(--surface)}
.seg button.on{color:#fff;background:var(--tx-mut)}
.seg button.on.compliant{background:var(--good);color:#fff}
.seg button.on.in_progress{background:var(--warn);color:#fff}
.seg button.on.not_started{background:#7A8493;color:#fff}
.seg button.on.not_applicable{background:#9AA3B2;color:#fff}
.note-wrap{max-width:760px}
.note-wrap textarea{width:100%;min-height:76px;resize:vertical;font:inherit;font-size:.8rem;color:var(--ink);
  background:var(--inset);border:1px solid var(--line);border-radius:10px;padding:.6rem .75rem;outline:none;line-height:1.55}
.note-wrap textarea:focus{border-color:var(--acc);background:var(--surface)}
.note-foot{display:flex;align-items:center;gap:.75rem;margin-top:.5rem}
.note-count{font-family:"IBM Plex Mono",monospace;font-size:.64rem;color:var(--tx-faint)}
.note-save{font-size:.74rem;font-weight:600;border:1px solid var(--line);border-radius:9px;padding:.4rem .85rem;transition:.15s;background:var(--surface)}
.note-save:hover{border-color:var(--acc);background:var(--acc-weak);color:var(--acc)}
.note-save.ok{border-color:var(--good);color:var(--good)}
.note-save.err{border-color:var(--risk);color:var(--risk)}
.put-err{font-size:.7rem;color:var(--risk)}
.empty{padding:2.4rem 1rem;text-align:center;color:var(--tx-faint);font-size:.8rem}
.empty-soon{display:flex;align-items:flex-start;gap:.7rem;padding:1.1rem 1.25rem 1.3rem;color:var(--tx-faint)}
.empty-soon svg{flex:none;color:var(--tx-faint);opacity:.7;margin-top:.1rem}
.empty-soon p{margin:0;font-size:.76rem;line-height:1.5}

/* ---------- Templates page ---------- */
.tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.tpl-card{padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;transition:border-color .2s,transform .2s,box-shadow .2s}
.tpl-card:hover{border-color:#D2D6E0;transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.tpl-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.tpl-ico{width:34px;height:34px;border-radius:10px;background:var(--acc-weak);color:var(--acc);display:grid;place-items:center;flex:none}
.tpl-title{font-size:.92rem;font-weight:600;line-height:1.35;color:var(--ink)}
.tpl-desc{font-size:.78rem;color:var(--tx-mut);line-height:1.55;flex:1}
.tpl-actions{display:flex;gap:.5rem;margin-top:.35rem}
.tpl-open{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;font-weight:600;
  border:1px solid var(--line);border-radius:9px;padding:.42rem .75rem;transition:.15s;background:var(--surface);color:var(--ink)}
.tpl-open:hover{border-color:var(--acc);background:var(--acc-weak);color:var(--acc)}
.tpl-open svg{color:var(--acc);flex:none}
.tpl-hint{font-size:.66rem;color:var(--tx-faint);display:flex;align-items:center;gap:.4rem;margin-top:.15rem}
.tpl-hint svg{flex:none;opacity:.7}

/* ---------- Dashboard page ---------- */
.posture{display:flex;gap:2rem;align-items:center;padding:1.5rem 1.7rem;margin-bottom:1.25rem;
  background:linear-gradient(135deg,var(--acc-weak),rgba(39,71,214,.015) 55%,transparent),var(--surface);
  border-color:#D8DEF6}
.ring{position:relative;width:96px;height:96px;flex:none}
.ring svg{width:96px;height:96px}
.ring-bg{fill:none;stroke:#E7E9F1;stroke-width:8}
.ring-fg{fill:none;stroke:var(--acc);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1.3s cubic-bezier(.3,.7,.3,1)}
.ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--ink)}
.ring-num b{font-size:1.7rem;letter-spacing:-.02em}
.ring-num i{font-style:normal;font-size:.85rem;color:var(--tx-mut);margin-left:1px}
.posture-meta{flex:none}
.posture-meta .lbl{font-family:"IBM Plex Mono",monospace;font-size:.62rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-faint)}
.delta{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:600;color:var(--good);
  background:var(--good-weak);border-radius:999px;padding:.18rem .55rem;margin-top:.4rem}
.spark{display:block;margin-top:.55rem}
.posture-bar-wrap{flex:1;min-width:0}
.posture-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;gap:3px;background:var(--inset)}
.posture-bar i{display:block;height:100%;border-radius:3px;transform-origin:left;animation:grow 1s cubic-bezier(.2,.7,.3,1) both .2s}
@keyframes grow{from{transform:scaleX(0)}}
.posture-bar .seg-good{background:var(--good)}
.posture-bar .seg-warn{background:var(--warn)}
.posture-bar .seg-todo{background:#D3D8E2}
.legend{display:flex;gap:1.3rem;margin-top:.7rem;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;color:var(--tx-mut)}
.legend i{width:8px;height:8px;border-radius:50%;flex:none}
.legend b{font-weight:600;color:var(--ink)}
.posture-next{flex:none;border-left:1px solid var(--line-2);padding-left:1.8rem;max-width:250px}
.posture-next .k{font-family:"IBM Plex Mono",monospace;font-size:.6rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-faint);margin-bottom:.35rem}
.posture-next p{font-size:.78rem;color:var(--tx-mut);line-height:1.55}
.posture-next a,.posture-next b{color:var(--ink);font-weight:600}
.posture-next a{color:var(--acc)}
.clocks{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:1.25rem}
.clock{padding:1.05rem 1.2rem;display:flex;gap:.9rem;align-items:flex-start;transition:border-color .2s,transform .2s,box-shadow .2s}
.clock:hover{border-color:#D2D6E0;transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.clock-ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;margin-top:.1rem}
.clock-ico.risk{background:var(--risk-weak);color:var(--risk)}
.clock-ico.warn{background:var(--warn-weak);color:var(--warn)}
.clock-ico.neutral{background:var(--inset);color:var(--tx-mut)}
.clock .v{font-size:1.3rem;font-weight:600;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.clock .v.risk{color:var(--risk)}
.clock .v.warn{color:var(--warn)}
.clock .v small{font-size:.8rem;color:var(--tx-faint);font-weight:500}
.clock .k{font-size:.74rem;font-weight:600;margin-top:.15rem;color:var(--ink)}
.clock .s{font-size:.68rem;color:var(--tx-faint);margin-top:.1rem;line-height:1.4}
.grid{display:grid;grid-template-columns:1fr 340px;gap:1.25rem;align-items:start}
.col{display:flex;flex-direction:column;gap:1.25rem;min-width:0}
.attn-row{display:flex;align-items:center;gap:1rem;padding:.82rem 1.25rem;border-bottom:1px solid var(--line-2);transition:background .15s}
.attn-row:last-child{border-bottom:none}
.attn-row:hover{background:var(--hover)}
.attn-pri{width:8px;height:8px;border-radius:50%;flex:none}
.attn-pri.risk{background:var(--risk);box-shadow:0 0 0 3px var(--risk-weak)}
.attn-pri.warn{background:var(--warn)}
.attn-pri.ok{background:#CDD2DC}
.attn-body{flex:1;min-width:0}
.attn-title{font-size:.84rem;font-weight:600;line-height:1.35;color:var(--ink)}
.attn-title code{font-family:"IBM Plex Mono",monospace;font-size:.64rem;color:var(--tx-mut);
  background:var(--inset);border-radius:5px;padding:.06rem .38rem;margin-left:.45rem;vertical-align:1px}
.attn-meta{font-size:.72rem;color:var(--tx-faint);margin-top:.12rem}
.attn-owner{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.56rem;font-weight:700;color:#fff;flex:none}
.attn-due{flex:none;width:88px;text-align:right}
.attn-due .d{font-size:.78rem;font-weight:600;color:var(--ink)}
.attn-due .d.risk{color:var(--risk)}
.attn-due .d.warn{color:var(--warn)}
.attn-due .s{font-size:.64rem;color:var(--tx-faint)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr)}
.tile{padding:1.05rem 1.25rem;border-right:1px solid var(--line-2);border-top:1px solid var(--line-2);min-width:0;transition:background .15s}
.tile:nth-child(4n){border-right:none}
.tile:nth-child(-n+4){border-top:none}
.tile:hover{background:var(--hover)}
.tile-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.tile code{font-family:"IBM Plex Mono",monospace;font-size:.62rem;color:var(--tx-faint)}
.tile .pct{font-size:1.4rem;font-weight:600;letter-spacing:-.02em;margin-top:.35rem;color:var(--ink)}
.tile .nm{font-size:.76rem;font-weight:600;margin-top:.05rem;color:var(--ink)}
.tile .mini{height:5px;border-radius:999px;background:var(--inset);margin-top:.55rem;overflow:hidden}
.tile .mini i{display:block;height:100%;border-radius:999px;background:var(--acc);transform-origin:left;animation:grow .9s cubic-bezier(.2,.7,.3,1) both .3s}
.tile .mini i.good{background:var(--good)}
.tile .mini i.warn{background:var(--warn)}
.tile .mini i.risk{background:var(--risk)}
.tile .sub{font-size:.66rem;color:var(--tx-faint);margin-top:.4rem}
.tile.cta{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--line-2)}
.tile.cta a{font-size:.78rem;font-weight:600;color:var(--acc);display:inline-flex;align-items:center;gap:.35rem}
.tile.cta a:hover{color:var(--acc-2)}
.deadline{display:flex;gap:.85rem;padding:.8rem 1.25rem;border-bottom:1px solid var(--line-2)}
.deadline:last-child{border-bottom:none}
.cal{width:40px;flex:none;border:1px solid var(--line);border-radius:9px;overflow:hidden;text-align:center;align-self:flex-start}
.cal .m{font-family:"IBM Plex Mono",monospace;font-size:.5rem;font-weight:600;letter-spacing:.1em;
  background:var(--inset);color:var(--tx-mut);padding:.14rem 0;text-transform:uppercase}
.cal .d{font-size:.95rem;font-weight:600;padding:.16rem 0;color:var(--ink)}
.cal.urgent .m{background:var(--risk);color:#fff}
.cal.urgent{border-color:#E6B6B0}
.deadline-title{font-size:.79rem;font-weight:600;line-height:1.3;color:var(--ink)}
.deadline-meta{font-size:.69rem;color:var(--tx-faint);margin-top:.12rem}
.act{display:flex;gap:.8rem;padding:.55rem 1.25rem}
.act-rail{width:22px;flex:none;display:flex;flex-direction:column;align-items:center}
.act-dot{width:8px;height:8px;border-radius:50%;background:#CDD2DC;margin-top:.4rem;flex:none}
.act-dot.good{background:var(--good)}
.act-dot.accent{background:var(--acc)}
.act-dot.warn{background:var(--warn)}
.act-line{width:1px;flex:1;background:var(--line-2);margin-top:.25rem}
.act:last-child .act-line{display:none}
.act-body{flex:1;padding-bottom:.45rem}
.act-text{font-size:.77rem;line-height:1.45;color:var(--tx-mut)}
.act-text b{font-weight:600;color:var(--ink)}
.act-text code{font-family:"IBM Plex Mono",monospace;font-size:.64rem;color:var(--tx-mut);background:var(--inset);border-radius:5px;padding:.04rem .32rem}
.act-time{font-size:.66rem;color:var(--tx-faint);margin-top:.1rem}
.disclaimer{font-size:.68rem;color:var(--tx-faint);line-height:1.5;margin-top:1.5rem;text-align:center}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .grid{grid-template-columns:1fr}
  .clocks{grid-template-columns:repeat(2,1fr)}
  .tpl-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1040px){
  :root{--sidebar-w:64px}
  .side-brand .brand-full,.org-name,.org-switch svg,.side-label,.side-nav .count,.u-meta{display:none}
  .side-brand .brand-mark{display:block}
  .side-brand{justify-content:center;padding:.2rem 0 1rem}
  .org-switch{justify-content:center;padding:.45rem 0}
  .side-nav a{justify-content:center;padding:.55rem 0}
  .side-nav a.active::before{left:-.7rem}
  .side-user{justify-content:center;padding:.45rem 0}
  .search{width:auto}.search span,.search kbd{display:none}
}
@media (max-width:760px){
  .topbar,.content{padding-left:1rem;padding-right:1rem}
  .posture{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .posture-next{border-left:none;padding-left:0;max-width:none}
  .clocks{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tile:nth-child(4n){border-right:1px solid var(--line-2)}
  .tile:nth-child(2n){border-right:none}
  .tpl-grid{grid-template-columns:1fr}
  .ctl-detail{padding-left:1.25rem}
}