/* ChiefRiskBot shared design tokens & shell — see frontend-design-ideal/DESIGN.md */
:root{
  --paper:#fff8f6; --paper-2:#f9f2f0; --paper-3:#f4ecea; --paper-4:#eee7e4;
  --rule:#e8ddd6; --rule-strong:#d3c3bc;
  --ink:#1e1b1a; --ink-soft:#4f453f; --ink-mute:#81756f;
  --brand:#72594c; --brand-deep:#584236;
  --accent:#1B2B5E; --accent-soft:#3a4a7a;
  --gold:#C9A449; --teal:#006972;
  --pri-fg:#B91C1C; --pri-bg:#FBE9E7;
  --ele-fg:#C2741C; --ele-bg:#FBF1E2;
  --wat-fg:#A38108; --wat-bg:#FAF5DC;
  --good-fg:#3F7A4F; --good-bg:#E8F1EA;
  --shadow:0 1px 0 rgba(114,89,76,.04),0 1px 2px rgba(30,27,26,.03);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:'Inter Tight',sans-serif;font-size:13px;font-weight:500;-webkit-font-smoothing:antialiased}
.mono{font-family:'JetBrains Mono',monospace;font-feature-settings:"tnum"}
.serif{font-family:'Fraunces',serif;font-optical-sizing:auto}
.uplabel{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
a{color:inherit;text-decoration:none}
.ms{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20;vertical-align:middle}

.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.sidebar{background:var(--paper-2);border-right:1px solid var(--rule);padding:18px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
.brand-row{display:flex;align-items:center;gap:10px;padding:4px 6px}
.logo{width:28px;height:28px;border-radius:6px;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:'Fraunces';font-weight:900;font-size:15px}
.brand-name{font-family:'Fraunces';font-weight:900;font-size:17px;letter-spacing:-.01em}
.client{border:1px solid var(--rule);border-radius:6px;padding:10px 12px;background:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer}
.client .who{display:flex;flex-direction:column;gap:2px}
.client small{font-size:10px;color:var(--ink-mute);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.client b{font-size:13px;font-weight:700}
.nav{display:flex;flex-direction:column;gap:1px;margin-top:4px}
.nav .section{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);padding:14px 8px 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:5px;color:var(--ink-soft);font-weight:500}
.nav a:hover{background:var(--paper-3);color:var(--ink)}
.nav a.active{background:var(--paper);color:var(--accent);font-weight:600;box-shadow:inset 2px 0 0 var(--accent)}
.nav a .ms{font-size:18px;color:inherit}
.side-foot{margin-top:auto;border-top:1px solid var(--rule);padding-top:12px;display:flex;align-items:center;gap:10px}
.avatar{width:30px;height:30px;border-radius:999px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}

.top{height:56px;border-bottom:1px solid var(--rule);background:var(--paper);display:flex;align-items:center;padding:0 24px;gap:18px;position:sticky;top:0;z-index:5}
.crumbs{display:flex;align-items:center;gap:8px;color:var(--ink-mute);font-size:12px;font-weight:500}
.crumbs b{color:var(--ink);font-weight:600}
.crumbs .ms{font-size:14px}
.top .grow{flex:1}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--rule);background:var(--paper-2);border-radius:6px;padding:6px 10px;width:280px;color:var(--ink-mute)}
.search input{border:0;background:transparent;outline:0;font:inherit;color:var(--ink);width:100%}
.kbd{font-family:'JetBrains Mono';font-size:10px;background:var(--paper-3);border:1px solid var(--rule);border-radius:3px;padding:1px 5px;color:var(--ink-mute)}
.iconbtn{width:32px;height:32px;border-radius:6px;border:1px solid var(--rule);background:var(--paper-2);display:grid;place-items:center;color:var(--ink-soft);cursor:pointer}
.iconbtn:hover{background:var(--paper-3);color:var(--ink)}

main{display:flex;flex-direction:column;min-width:0}
.content{padding:28px 32px;display:flex;flex-direction:column;gap:20px;min-width:0}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.page-head h1{font-family:'Fraunces';font-weight:900;font-size:28px;letter-spacing:-.02em;margin:0;line-height:1.05}
.page-head p{margin:6px 0 0;color:var(--ink-soft);font-size:13px;max-width:640px}
.head-actions{display:flex;gap:8px}

.btn{display:inline-flex;align-items:center;gap:6px;border-radius:6px;padding:9px 14px;font-size:12px;font-weight:600;border:1px solid var(--rule);background:var(--paper-3);color:var(--ink);cursor:pointer}
.btn:hover{background:var(--paper-4)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-soft)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-soft)}
.btn.ghost:hover{background:var(--paper-3);color:var(--ink)}
.btn .ms{font-size:16px}

.card{background:#fffdfb;border:1px solid var(--rule);border-radius:6px;box-shadow:var(--shadow);padding:20px 22px}
.card h2{font-family:'Fraunces';font-weight:700;font-size:16px;letter-spacing:-.01em;margin:0 0 4px}
.card .sub{color:var(--ink-mute);font-size:11px;margin-bottom:14px}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--paper-3);color:var(--ink-soft);border:1px solid var(--rule)}
.pill.pri{background:var(--pri-bg);color:var(--pri-fg);border-color:#f3d4d0}
.pill.ele{background:var(--ele-bg);color:var(--ele-fg);border-color:#f0dfc1}
.pill.wat{background:var(--wat-bg);color:var(--wat-fg);border-color:#ede5b8}
.pill.good{background:var(--good-bg);color:var(--good-fg);border-color:#cfe1d3}
.pill.accent{background:#eef0f7;color:var(--accent);border-color:#dfe3ef}

table.list{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
table.list thead th{background:var(--paper-2);text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
table.list tbody td{padding:12px 14px;border-bottom:1px solid var(--rule);height:44px}
table.list tbody tr:hover td{background:var(--paper-3)}
table.list td.num,table.list th.num{text-align:right;font-family:'JetBrains Mono';font-feature-settings:"tnum";font-weight:600}

.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.field input,.field select,.field textarea{border:1px solid var(--rule);background:var(--paper-2);border-radius:4px;padding:9px 11px;font:inherit;color:var(--ink);outline:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);background:var(--paper)}
.field .hint{font-size:10px;color:var(--ink-mute)}

/* ============================================================
   Responsive architecture — baked into the shell so every page
   that mounts via CRB.mount() gets adaptive behavior for free.

   Breakpoints:
     mobile  ≤ 640px   off-canvas drawer + hamburger
     tablet  641-1024  64px icon rail (labels hidden)
     desktop ≥ 1025    full 240px sidebar
   ============================================================ */

/* Hamburger button injected by _shell.js — hidden on desktop */
.hamburger{display:none;width:36px;height:36px;border-radius:6px;border:1px solid var(--rule);background:var(--paper-2);align-items:center;justify-content:center;color:var(--ink);cursor:pointer;flex-shrink:0}
.hamburger .ms{font-size:20px}

/* Backdrop for mobile drawer */
.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(30,27,26,.4);z-index:40;backdrop-filter:blur(2px)}
.sb-backdrop.open{display:block}

/* ---------- TABLET (641-1024): icon rail ---------- */
@media (max-width:1024px){
  .app{grid-template-columns:64px 1fr !important}
  .layout{grid-template-columns:1fr !important}
  .sidebar{padding:14px 8px;gap:12px;overflow:hidden}
  .sidebar .brand-name,
  .sidebar .client .who,
  .sidebar .client .ms,
  .sidebar .nav .section,
  .sidebar .side-foot > div:not(.avatar){display:none}
  .sidebar .brand-row{justify-content:center;padding:0}
  .sidebar .client{padding:0;border:0;background:transparent;justify-content:center}
  .sidebar .client::before{content:"AF";width:32px;height:32px;border-radius:6px;background:var(--paper);border:1px solid var(--rule);display:grid;place-items:center;font-weight:700;font-size:11px;color:var(--ink)}
  .sidebar .nav a{justify-content:center;padding:10px 0;position:relative}
  .sidebar .nav a > :not(.ms){display:none}
  .sidebar .nav a .ms{font-size:20px}
  .sidebar .side-foot{justify-content:center;padding-top:10px}
  .content{padding:24px 22px;gap:16px}
  .top{padding:0 18px;gap:12px}
  .search{width:200px}
  .page-head h1{font-size:24px}
}

/* ---------- MOBILE (≤640): off-canvas drawer ---------- */
@media (max-width:640px){
  .app{grid-template-columns:1fr !important}
  .sidebar{position:fixed !important;top:0;left:0;width:260px;height:100vh;padding:18px 14px;gap:18px;transform:translateX(-100%);transition:transform .22s ease;z-index:50;overflow-y:auto;box-shadow:0 8px 32px rgba(30,27,26,.18)}
  .sidebar.open{transform:translateX(0) !important}
  /* settings.html and similar inner two-col layouts collapse */
  .layout{grid-template-columns:1fr !important}
  /* restore full labels inside the drawer */
  .sidebar .brand-name,
  .sidebar .client .who,
  .sidebar .client .ms,
  .sidebar .nav .section,
  .sidebar .side-foot > div:not(.avatar){display:initial}
  .sidebar .client{padding:10px 12px;border:1px solid var(--rule);background:var(--paper);justify-content:space-between}
  .sidebar .client::before{display:none}
  .sidebar .brand-row{justify-content:flex-start;padding:4px 6px}
  .sidebar .nav a{justify-content:flex-start;padding:8px 10px}
  .sidebar .nav a > :not(.ms){display:initial}
  .sidebar .side-foot{justify-content:flex-start}

  .hamburger{display:inline-flex}
  .top{padding:0 16px;gap:10px;height:56px}
  .crumbs{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .crumbs .ms{display:none}
  .crumbs > *:not(:last-child){display:none}
  .search{display:none}
  .content{padding:18px 16px;gap:14px}
  .page-head{flex-direction:column;align-items:flex-start;gap:12px}
  .page-head h1{font-size:22px}
  .page-head p{font-size:12px}
  .head-actions{flex-wrap:wrap;width:100%}
  .head-actions .btn{flex:1;min-width:0;justify-content:center}

  /* Tables: horizontal scroll instead of breaking layout */
  table.list{display:block;overflow-x:auto;white-space:nowrap}
  .card{padding:16px 18px}
  /* Force any Tailwind hard-coded grid to single column on mobile */
  .grid-cols-2,.grid-cols-3,.grid-cols-4,.grid-cols-5,.grid-cols-6{grid-template-columns:1fr !important}
}
@media (max-width:1024px){
  .grid-cols-4,.grid-cols-5,.grid-cols-6{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

/* ---------- Universal: prevent horizontal blowout ---------- */
img,svg,video{max-width:100%;height:auto}
.content > *{min-width:0}

/* === Promoted from cockpit.css === */
.sync-status {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--paper-3);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  color: var(--ink-soft);
}

.sync-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

.sync-status .mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
}

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 20px 32px;
  margin: 0 0;
}

.kpi-tile {
  background: var(--paper);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kpi-tile .uplabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.kpi-tile .value {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.kpi-tile .delta {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-mute);
  margin-top: 2px;
}

.kpi-tile .delta.positive { color: var(--good-fg); }
.kpi-tile .delta.negative { color: var(--pri-fg); }

.card-header {
  padding: 20px 22px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.card-header > div:first-child .uplabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 2px;
}

.card-header h2 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  margin: 0;
  margin-top: 4px;
}

.card-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.seg {
  display: inline-flex;
  padding: 3px;
  background: var(--paper-3);
  border-radius: 6px;
  border: 1px solid var(--rule);
  gap: 0;
}

.seg button {
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  border-radius: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.seg button.on {
  background: #fffdfb;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(30, 27, 26, 0.06);
}

.tab-group {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 12px;
}

.tab {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  padding: 4px 0;
  border-bottom: 1.5px solid transparent;
  cursor: pointer;
  transition: color 80ms ease-out, border-color 80ms ease-out;
}

.tab.on {
  color: var(--ink);
  border-color: var(--accent);
}

.chart {
  height: 160px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--paper-2), #fffdfb);
  position: relative;
  overflow: hidden;
  margin: 16px 0;
}

.chart svg {
  width: 100%;
  height: 100%;
}

.var-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  margin-top: 12px;
}

.stat-item .uplabel {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 4px;
}

.stat-item .value {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: "tnum";
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.pill-priority {
  background: var(--pri-bg);
  color: var(--pri-fg);
}

.pill-elevated {
  background: var(--ele-bg);
  color: var(--ele-fg);
}

.pill-watch {
  background: var(--wat-bg);
  color: var(--wat-fg);
}

.pill-good {
  background: var(--good-bg);
  color: var(--good-fg);
}

.pill-accent {
  background: #eef0f7;
  color: var(--accent);
}

.cockpit-footer {
  padding: 12px 32px;
  border-top: 1px solid var(--rule);
  background: rgba(249, 242, 240, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-mute);
}

.footer-status {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer-status-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-status-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

.footer-actions {
  display: flex;
  gap: 20px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.footer-actions button {
  background: transparent;
  border: none;
  color: var(--ink-mute);
  cursor: pointer;
  font-size: 10px;
  transition: color 80ms ease-out;
}

.footer-actions button:hover {
  color: var(--ink);
}