/* ============================================================
   THINKBENCH PORTAL — Core Lite private pilot
   App chrome. Calm, premium, trustworthy. Blue → teal brand.
   Source: Claude Design project "Thinkbench Portal" (portal.css),
   adapted as static CSS for the server-rendered Blazor UI — no JS
   framework dependency, same visual language.

   Brand/status tokens and the CSS backing the shared
   Thinkbench.DesignSystem components (ThCard, ThPageHead, ThPill,
   ThStat, ThKpiGrid, ThAlertBanner — .pill/.stat/.kpi-grid/.page-head/
   .soft and the :root token block) now live in that RCL's own
   design-system.css, loaded via App.razor before this file. Everything
   below is Portal-specific chrome only — its own .card look, sidebar,
   buttons, tiles, etc. — see docs/design-system/REVIEW-2026-06-22.md §4.
   ============================================================ */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg-2); color:var(--ink);
  font-family:'Hanken Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:15px; line-height:1.5;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

h1,h2,h3,h4{margin:0;letter-spacing:-.02em;line-height:1.1;font-weight:800;}
.mono{font-family:'Space Mono',monospace;}
/* .muted and .col are defined once, in the shared design-system.css */

.row{display:flex;align-items:center;}
.center{align-items:center;justify-content:center;}
.grow{flex:1;}
.gap6{gap:6px;}.gap8{gap:8px;}.gap10{gap:10px;}.gap12{gap:12px;}.gap16{gap:16px;}

/* ---------- brand logo ---------- */
.logo{width:30px;height:30px;border-radius:9px;background:var(--grad);box-shadow:var(--glow-blue);position:relative;flex:0 0 auto;}
.logo::after{content:'';position:absolute;inset:8px;border-radius:4px;border:2px solid #fff;border-right-color:transparent;border-bottom-color:transparent;}
.logo.lg{width:46px;height:46px;border-radius:13px;}
.logo.lg::after{inset:12px;border-width:2.5px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:-.02em;}

/* ---------- pilot badge ---------- */
.pilot-badge{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:30px;
  font:700 10.5px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;
  background:oklch(0.75 0.13 188 / .14);color:var(--teal-deep);border:1px solid oklch(0.75 0.13 188 / .2);}
.pilot-badge .d{width:6px;height:6px;border-radius:50%;background:var(--teal);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 18px;border-radius:11px;font:700 14.5px/1 'Hanken Grotesk';
  border:1px solid transparent;transition:transform .16s,box-shadow .22s,background .18s,border-color .18s;white-space:nowrap;}
.btn:hover{transform:translateY(-1px);}
.btn-pri{background:var(--grad);color:#fff;box-shadow:var(--glow-blue);}
.btn-soft{background:var(--surface);border-color:var(--line-2);color:var(--ink);box-shadow:var(--sh-sm);}
.btn-ghost{background:transparent;color:var(--ink-2);}
.btn-ghost:hover{color:var(--ink);background:oklch(0.55 0.17 254 / .06);}
.btn.sm{height:34px;padding:0 13px;font-size:13px;border-radius:9px;}
.btn.full{width:100%;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ---------- cards & surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);}

/* glyph tile */
.glyph{display:flex;align-items:center;justify-content:center;border-radius:13px;flex:0 0 auto;
  background:var(--grad-soft);border:1px solid var(--line);color:var(--blue-deep);}

/* .field is defined once, in the shared design-system.css (ThFormField) */
.fhint{font-size:12.5px;color:var(--ink-3);margin-top:7px;}
.ferr{font-size:13px;color:var(--alert);margin:8px 0 0;}
.fgood{color:var(--good);}

/* avatar */
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto;color:#fff;background:var(--grad);width:32px;height:32px;font-size:13px;}

/* ---------- app shell ---------- */
.shell{display:flex;min-height:100vh;background:var(--bg-2);}
.sidebar{width:var(--nav-w);flex:0 0 auto;background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:16px 14px;position:sticky;top:0;height:100vh;}
.side-top{display:flex;align-items:center;gap:10px;padding:4px 6px 14px;}
.tenant-switch{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg-2);margin-bottom:6px;}
.nav-section{font:700 10px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);padding:14px 10px 6px;}
.nav-item{display:flex;align-items:center;gap:11px;height:38px;padding:0 11px;border-radius:10px;
  font:600 14px/1 'Hanken Grotesk';color:var(--ink-2);cursor:pointer;transition:.14s;position:relative;}
.nav-item:hover{background:oklch(0.55 0.17 254 / .06);color:var(--ink);}
.nav-item.on{background:oklch(0.55 0.17 254 / .10);color:var(--blue-deep);}
.nav-item.locked{opacity:.5;cursor:default;}
.side-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);}
.user-chip{display:flex;align-items:center;gap:10px;padding:9px;border-radius:11px;}

/* main column */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{height:62px;flex:0 0 auto;background:oklch(1 0 0 / .8);backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:20;}
.content{padding:30px 26px 60px;max-width:1180px;width:100%;margin:0 auto;}
/* .page-head/.page-title/.page-sub are defined once, in the shared design-system.css */

/* ---------- module tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
.tile{display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .22s;position:relative;overflow:hidden;}
.tile.linked:hover{transform:translateY(-3px);box-shadow:var(--sh);}
.tile.locked{opacity:.78;}
.tile-accent{position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);}
.tile.locked .tile-accent{background:var(--line-2);}

/* .tbl is defined once, in the shared design-system.css (ThDataTable) */

/* subnav tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:24px;overflow-x:auto;}
.tab{padding:11px 14px;font:600 14px/1 'Hanken Grotesk';color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;}
.tab.on{color:var(--blue-deep);border-bottom-color:var(--blue);}

/* auth layout */
.auth-wrap{min-height:100vh;display:flex;}
.auth-aside{width:42%;flex:0 0 auto;background:var(--grad);position:relative;overflow:hidden;color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;padding:46px;}
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 28px;background:var(--bg);}
.auth-card{width:100%;max-width:404px;}

@media (max-width:980px){
  .tiles{grid-template-columns:1fr;}
  .auth-aside{display:none;}
}
.nav-toggle-checkbox{display:none;}
.menu-btn{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--surface);align-items:center;justify-content:center;color:var(--ink-2);cursor:pointer;flex:0 0 auto;}
@media (max-width:860px){
  .sidebar{position:fixed;left:0;top:0;height:100vh;z-index:50;transform:translateX(-100%);transition:transform .22s cubic-bezier(.2,.7,.2,1);}
  .nav-toggle-checkbox:checked ~ .sidebar{transform:translateX(0);box-shadow:var(--sh-lg);}
  .menu-btn{display:flex;}
  .scrim{display:none;position:fixed;inset:0;background:oklch(0.2 0.03 260 / .4);z-index:45;}
  .nav-toggle-checkbox:checked ~ .scrim{display:block;}
  .content{padding:22px 18px 50px;}
}
/* .stat/.kpi-grid/.grid-2 are defined once, in the shared design-system.css */
