/* ============================================================
   SENTINEL BENCHMARKING PLATFORM — Design System
   ------------------------------------------------------------
   BRANDING: All brand values live in :root below.
   To apply Sentinel's official brand, replace the hex values
   and font names in the "BRAND TOKENS" block only. Nothing
   else in the app hard-codes a color.
   ============================================================ */

:root {
  /* ---------- BRAND TOKENS (swap these for official assets) ---------- */
  --brand-navy:        #0C4B39;  /* Sentinel forest green — top bar, headings */
  --brand-navy-2:      #08382B;  /* deeper green — gradient partner */
  --brand-blue:        #0071BC;  /* Sentinel blue — links, primary data series */
  --brand-blue-soft:   #E4F1FB;  /* tinted blue background */
  --brand-gold:        #5E9E2E;  /* readable lime-green accent (chips, rules) */
  --brand-gold-soft:   #E7F2D8;
  --brand-teal:        #2E8B57;  /* medium green — secondary chart accent */
  --brand-lime:        #8BC63F;  /* Sentinel CTA lime */
  --brand-lime-dark:   #5E9E2E;  /* lime button offset shadow */
  --brand-forest:      #0C4B39;  /* alias for text on lime */

  /* ---------- SEMANTIC / STATUS ---------- */
  --ok:        #1E874B;   --ok-soft:   #E4F4EA;
  --warn:      #C77D12;   --warn-soft: #FBF0DD;
  --risk:      #C0392B;   --risk-soft: #FBE7E4;
  --info:      var(--brand-blue);

  /* ---------- NEUTRALS ---------- */
  --ink:        #1A2230;
  --ink-2:      #45505F;
  --ink-3:      #6B7683;
  --line:       #E2E7EE;
  --line-2:     #EDF1F6;
  --paper:      #FFFFFF;
  --canvas:     #F5F7FA;
  --canvas-2:   #EEF2F7;

  /* ---------- TYPE ---------- */
  --font-head: "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-num:  "SF Mono", "Roboto Mono", "Consolas", monospace;

  /* ---------- SHAPE ---------- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16,32,58,.06), 0 1px 3px rgba(16,32,58,.08);
  --shadow-md: 0 4px 14px rgba(16,32,58,.08);
  --shadow-lg: 0 12px 34px rgba(16,32,58,.12);
  --maxw: 1180px;
}

/* ---------- RESET ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-body); color: var(--ink);
  background: var(--canvas); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--font-head); color: var(--brand-navy); line-height: 1.2; margin: 0 0 .4em; font-weight: 600; }
h1 { font-size: 1.9rem; } h2 { font-size: 1.45rem; } h3 { font-size: 1.12rem; } h4 { font-size: .98rem; }
p { margin: 0 0 .9em; }
a { color: var(--brand-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
small { color: var(--ink-3); }

/* ============================================================
   TOP BAR / NAV
   ============================================================ */
.topbar {
  background: linear-gradient(100deg, var(--brand-navy), var(--brand-navy-2));
  color: #fff; position: sticky; top: 0; z-index: 40;
  box-shadow: var(--shadow-md);
}
.topbar__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; gap: 26px; height: 62px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand__mark {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-lime), var(--brand-teal) 52%, var(--brand-blue));
  display: grid; place-items: center; color: #fff; font-family: var(--font-head);
  font-weight: 700; font-size: 1.1rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.brand__name { color: #fff; font-family: var(--font-head); font-size: 1.16rem; font-weight: 600; letter-spacing: .2px; }
.brand__name span { color: var(--brand-lime); }
.brand__sub { display:block; font-family: var(--font-body); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:#9FB4CE; margin-top:1px;}
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  color: #D7E1EE; padding: 8px 14px; border-radius: 8px; font-size: .9rem;
  font-weight: 500; transition: background .15s, color .15s;
}
.nav a:hover { background: rgba(255,255,255,.10); color: #fff; text-decoration: none; }
.nav a.is-active { background: rgba(255,255,255,.16); color: #fff; }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 28px 22px 80px; }
.section { margin-bottom: 30px; }
.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
.grid-5 { grid-template-columns: repeat(5,1fr); }
@media (max-width: 940px){ .grid-3,.grid-4,.grid-5{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 640px){ .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr;} }

.page-head { margin-bottom: 22px; }
.page-head .eyebrow { color: var(--brand-blue); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.page-head h1 { margin: 5px 0 6px; }
.page-head p { color: var(--ink-2); max-width: 760px; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 20px; box-shadow: var(--shadow-sm);
}
.card--pad-lg { padding: 26px; }
.card--navy { background: linear-gradient(120deg,var(--brand-navy),var(--brand-navy-2)); color:#fff; border:0; }
.card--navy h1,.card--navy h2,.card--navy h3 { color:#fff; }
.card__title { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.card__title h3 { margin:0; }
.card__title .n { width:24px;height:24px;border-radius:6px;background:var(--brand-blue-soft);color:var(--brand-blue);display:grid;place-items:center;font-weight:700;font-size:.82rem; }
.card__hd { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px; }
.card__hd h3 { margin:0; }

/* ============================================================
   BUTTONS / TAGS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family: var(--font-body); font-weight:600; font-size:.9rem;
  padding: 10px 18px; border-radius: 8px; border:1px solid transparent;
  transition: transform .05s, box-shadow .15s, background .15s;
}
.btn:hover { text-decoration:none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand-lime); color: var(--brand-forest); box-shadow: 2px 2px 0 var(--brand-lime-dark); font-weight:700; }
.btn--primary:hover { background:#7CB934; color: var(--brand-forest); box-shadow: 3px 3px 0 var(--brand-lime-dark); }
.btn--navy { background: var(--brand-navy); color:#fff; }
.btn--navy:hover { background: var(--brand-navy-2); color:#fff; }
.btn--ghost { background:#fff; color: var(--brand-navy); border-color: var(--line); }
.btn--ghost:hover { background: var(--canvas-2); color: var(--brand-navy); }
.btn--gold { background: var(--brand-lime); color: var(--brand-forest); box-shadow: 2px 2px 0 var(--brand-lime-dark); }
.btn--sm { padding:7px 13px; font-size:.82rem; }

.tag { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:3px 9px; border-radius:999px; }
.tag--ok   { background:var(--ok-soft);   color:var(--ok); }
.tag--warn { background:var(--warn-soft); color:var(--warn); }
.tag--risk { background:var(--risk-soft); color:var(--risk); }
.tag--info { background:var(--brand-blue-soft); color:var(--brand-blue); }
.tag--gold { background:var(--brand-gold-soft); color:var(--brand-gold); }

.pill { display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff; }

/* ============================================================
   SCORE VISUALS
   ============================================================ */
.scorehero { display:grid; grid-template-columns: auto 1fr; gap:30px; align-items:center; }
@media (max-width:640px){ .scorehero{ grid-template-columns:1fr; text-align:center; justify-items:center;} }
.gauge { position:relative; width:190px; height:190px; }
.gauge__num { position:absolute; inset:0; display:grid; place-items:center; flex-direction:column; text-align:center; }
.gauge__val { font-family:var(--font-head); font-size:3.2rem; font-weight:700; line-height:1; color:#fff; }
.gauge__grade { font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-lime); font-weight:700; margin-top:4px; }

.dim-score { text-align:left; }
.dim-score .bar { height:9px; border-radius:6px; background: rgba(255,255,255,.16); overflow:hidden; margin-top:8px; }
.dim-score .bar > span { display:block; height:100%; border-radius:6px; }
.dim-score__top { display:flex; justify-content:space-between; align-items:baseline; }
.dim-score__label { font-size:.86rem; color:#DCE6F2; }
.dim-score__val { font-family:var(--font-num); font-weight:700; color:#fff; }

/* stat tiles */
.stat { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; }
.stat__k { font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); font-weight:600; }
.stat__v { font-family:var(--font-head); font-size:1.7rem; color:var(--brand-navy); font-weight:600; margin-top:2px; }
.stat__d { font-size:.8rem; margin-top:2px; }
.up{color:var(--ok);} .down{color:var(--risk);} .flat{color:var(--ink-3);}

.ring { --p:0; --c:var(--brand-blue); width:64px;height:64px;border-radius:50%;
  background: conic-gradient(var(--c) calc(var(--p)*1%), var(--line-2) 0);
  display:grid;place-items:center; }
.ring::after{ content:""; width:48px;height:48px;border-radius:50%;background:var(--paper); position:absolute; }
.ring__wrap{ position:relative; display:grid; place-items:center; }
.ring__num{ position:relative; z-index:2; font-family:var(--font-num); font-weight:700; font-size:.92rem; color:var(--brand-navy);}

/* ============================================================
   TABLES
   ============================================================ */
.table { width:100%; border-collapse:collapse; font-size:.9rem; }
.table th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:700; padding:10px 12px; border-bottom:2px solid var(--line); }
.table td { padding:11px 12px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.table tr:last-child td { border-bottom:0; }
.table tbody tr:hover { background: var(--canvas); }
.table .num { font-family:var(--font-num); text-align:right; }
.table__foot td { font-weight:700; border-top:2px solid var(--line); background:var(--canvas); }
.subtle { color:var(--ink-3); }

/* fiduciary callout */
.callout { border-left:4px solid var(--brand-blue); background:var(--brand-blue-soft); padding:14px 18px; border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:.9rem; color:var(--ink-2); }
.callout--gold { border-color:var(--brand-gold); background:var(--brand-gold-soft); }
.callout--risk { border-color:var(--risk); background:var(--risk-soft); }
.callout strong { color:var(--ink); }

/* flag list (diagnostic findings) */
.flags { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.flags li { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); }
.flags .dot { width:10px;height:10px;border-radius:50%;margin-top:6px; }
.flags .dot--ok{background:var(--ok);} .flags .dot--warn{background:var(--warn);} .flags .dot--risk{background:var(--risk);}
.flags h4 { margin:0 0 2px; font-family:var(--font-body); font-size:.92rem; color:var(--ink); }
.flags p { margin:0; font-size:.84rem; color:var(--ink-2); }

/* legend */
.legend { display:flex; flex-wrap:wrap; gap:16px; font-size:.8rem; color:var(--ink-2); }
.legend span { display:inline-flex; align-items:center; gap:6px; }
.legend i { width:12px;height:12px;border-radius:3px;display:inline-block; }

/* selector row */
.selectorbar { display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); padding:14px 18px; box-shadow:var(--shadow-sm); margin-bottom:22px; }
.field { display:flex; flex-direction:column; gap:4px; }
.field label { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:700; }
.field select, .field input {
  font-family:var(--font-body); font-size:.92rem; padding:9px 12px; border:1px solid var(--line);
  border-radius:8px; background:#fff; color:var(--ink); min-width:200px;
}
.field input[type=range]{ padding:0; min-width:220px; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { border-top:1px solid var(--line); background:var(--paper); }
.foot__inner { max-width:var(--maxw); margin:0 auto; padding:26px 22px; color:var(--ink-3); font-size:.82rem; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; }
.foot a{ color:var(--ink-2); }

/* disclaimer */
.disclaimer { font-size:.74rem; color:var(--ink-3); line-height:1.5; border:1px dashed var(--line); border-radius:var(--r-sm); padding:12px 14px; background:var(--canvas); }

/* utility */
.mono{font-family:var(--font-num);} .center{text-align:center;} .right{text-align:right;}
.mt0{margin-top:0;} .mb0{margin-bottom:0;} .mt24{margin-top:24px;}
.muted{color:var(--ink-3);} .b{font-weight:700;}
.hr{height:1px;background:var(--line);border:0;margin:22px 0;}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}

/* ============================================================
   PRINT (Sentinel Plan Analysis + proposal)
   ============================================================ */
@media print {
  .topbar, .nav, .no-print, .selectorbar .btn { display:none !important; }
  body { background:#fff; }
  .wrap { padding:0; max-width:100%; }
  .card { box-shadow:none; border-color:#ccc; break-inside:avoid; }
  .page-break { break-before:page; }
  a { color:var(--ink); }
}