/* Product-surface styles for brain.acheevy.digital.
 *
 * Register split (design-rail): the landing page is the MARKETING layer and
 * runs the ACHIEVEMOR blueprint brand on black. These are PRODUCT surfaces and
 * run the LIGHT app tokens pulled from the owned Agentic Design System file
 * (keqSV0hR8Y58BMCs9MNsNO). Same system, different register -- they do not
 * share hero copy, which is the rule for separate register states.
 */
:root{
  --n-100:#ffffff; --n-200:#f7f7f7; --n-300:#e5e5e5; --n-400:#e0e0e0;
  --n-500:#8f8f8f; --n-600:#616161; --n-700:#363636; --n-800:#191919; --n-900:#000000;
  --blue-400:#70a9ff; --blue-500:#0968f6; --blue-600:#0049b8;
  --teal-500:#1bbfca; --teal-600:#006f93;
  --green-500:#3cc14e; --green-600:#288034;
  --yellow-400:#ffbd14; --yellow-600:#855f00;
  --red-500:#f02d2d; --purple-500:#583aee;

  --bg:var(--n-100); --bg-2:var(--n-200);
  --content:var(--n-800); --content-2:var(--n-600); --content-dis:var(--n-400);
  --border:var(--n-300); --border-med:var(--n-500);

  --pad-8:8px; --pad-12:12px; --pad-16:16px; --pad-24:24px; --pad-32:32px; --pad-48:48px;
  --r-4:4px; --r-6:6px; --r-10:10px; --r-12:12px; --r-16:16px; --r-20:20px; --r-full:9999px;
  --ls-tight:-0.3px; --ls-spacious:0.3px;

  --f-display:"Domaine Display Narrow","Playfair Display",ui-serif,Georgia,serif;
  --f-body:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Departure Mono",ui-monospace,SFMono-Regular,"JetBrains Mono",monospace;

  /* elevation 4 -- the CARD/DROPDOWN/DRAWER/MODAL stack from the file */
  --sh-card:0 1px 2px rgba(0,0,0,.04),0 2px 6px rgba(0,0,0,.05);
  --sh-drawer:0 2px 4px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--content);font-family:var(--f-body);
  font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased}

/* h1: top-level page titles only, one per view -- the file's own usage rule */
h1{font-family:var(--f-display);font-weight:500;font-size:28px;line-height:32px;
  letter-spacing:var(--ls-tight);margin:0}
h2{font-family:var(--f-display);font-weight:500;font-size:24px;line-height:28px;margin:0}
h3{font-family:var(--f-display);font-weight:500;font-size:18px;line-height:24px;
  letter-spacing:var(--ls-spacious);margin:0}
.lbl{font-family:var(--f-mono);font-size:12px;line-height:18px;
  letter-spacing:var(--ls-spacious);text-transform:uppercase;color:var(--content-2)}
.lbl-sm{font-family:var(--f-mono);font-size:10px;line-height:18px;color:var(--content-2)}
.p{color:var(--content-2);margin:8px 0 0;max-width:70ch}
.xs{font-size:13px;line-height:15px;color:var(--content-2)}

.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--pad-24);
  padding:12px clamp(16px,4vw,32px);background:var(--bg);border-bottom:1px solid var(--border)}
.top a.mark{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--content);
  font-family:var(--f-mono);font-size:12px;letter-spacing:var(--ls-spacious);text-transform:uppercase}
.top nav{display:flex;gap:var(--pad-24);margin-left:auto;flex-wrap:wrap}
.top nav a{font-family:var(--f-mono);font-size:12px;letter-spacing:var(--ls-spacious);
  text-transform:uppercase;color:var(--content-2);text-decoration:none;padding:3px 0;
  border-bottom:2px solid transparent}
.top nav a:hover{color:var(--content)}
.top nav a[aria-current=page]{color:var(--content);border-bottom-color:var(--teal-500)}

main{max-width:1180px;margin:0 auto;padding:clamp(24px,4vw,44px) clamp(16px,4vw,32px) 80px}
.head{display:flex;align-items:flex-start;gap:var(--pad-24);flex-wrap:wrap;
  padding-bottom:var(--pad-24);border-bottom:1px solid var(--border);margin-bottom:var(--pad-32)}
.head .p{flex:1 1 380px}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:var(--pad-16)}
.card{border:1px solid var(--border);border-radius:var(--r-12);padding:var(--pad-16);
  background:var(--bg);box-shadow:var(--sh-card)}
.card b{font-family:var(--f-display);font-size:24px;line-height:28px;font-weight:500;
  display:block;font-variant-numeric:tabular-nums}
.card .lbl{display:block;margin-top:6px}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px var(--pad-12);border-bottom:1px solid var(--border);vertical-align:top}
th{font-family:var(--f-mono);font-size:10px;letter-spacing:var(--ls-spacious);
  text-transform:uppercase;color:var(--content-2);font-weight:400}
tbody tr:hover{background:var(--bg-2)}
.num{font-variant-numeric:tabular-nums;text-align:right}

.pill{display:inline-block;font-family:var(--f-mono);font-size:10px;line-height:18px;
  letter-spacing:var(--ls-spacious);padding:1px 8px;border-radius:var(--r-full);
  border:1px solid currentColor}
.pill--ok{color:var(--green-600)}
.pill--blk{color:var(--yellow-600)}
.pill--mis{color:var(--n-500)}
.pill--live{color:var(--blue-600)}

.bar-t{height:6px;border-radius:var(--r-full);background:var(--bg-2);overflow:hidden;min-width:90px}
.bar-t i{display:block;height:100%;background:var(--teal-500);border-radius:var(--r-full)}

.note{border:1px solid var(--border);border-left:3px solid var(--yellow-400);
  border-radius:var(--r-6);padding:var(--pad-16);background:var(--bg-2);margin-top:var(--pad-24)}
.note .lbl{color:var(--yellow-600)}
.note p{margin:6px 0 0;font-size:14px;line-height:22px;color:var(--content-2)}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--pad-16)}
.chip{font-family:var(--f-mono);font-size:11px;line-height:18px;padding:2px 8px;
  border:1px solid var(--border);border-radius:var(--r-6);color:var(--content-2)}
.chip--live{border-color:var(--blue-400);color:var(--blue-600)}

:where(a,button,[tabindex]):focus-visible{outline:2px solid var(--blue-500);outline-offset:2px;border-radius:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- graph ---------- */
.gwrap{position:relative;border:1px solid var(--border);border-radius:var(--r-16);
  background:var(--bg);box-shadow:var(--sh-card);padding:var(--pad-8);overflow:hidden}
#gcanvas{display:block;width:100%}
.gtip{position:absolute;left:var(--pad-16);bottom:var(--pad-16);
  font-family:var(--f-mono);font-size:11px;letter-spacing:var(--ls-spacious);
  background:var(--content);color:var(--bg);padding:5px 10px;border-radius:var(--r-6)}
.glist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r-10);overflow:hidden}
.glist li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  background:var(--bg);padding:10px var(--pad-16);font-size:14px}
.glist span{font-family:var(--f-mono);font-size:12px;color:var(--content-2)}
.glist b{font-variant-numeric:tabular-nums;font-weight:500}