/* ============================================================================
   Cortya design system — the single source of truth.
   The marketing site established the "instrument panel" language; this file is
   that language, extracted so EVERY surface (marketing, legal, login, app,
   admin) renders as one designed thing. Page-specific layout stays inline in
   each page AFTER this link, so page rules win the cascade.

   Voice: ink is the screen, teal is healthy data + action, amber is the risk
   warning light, red is critical. Mono is the instrument readout; Bricolage is
   the display face; system sans is the body.
   ============================================================================ */

@font-face{
  font-family:'Bricolage Grotesque';
  src:url('/assets/bricolage.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
}

:root{
  --ink:#0B1220;        /* the "screen" — deep cool ink */
  --ink-2:#111a2e;      /* raised panel on ink */
  --porcelain:#F6F8FB;  /* cool technical page ground */
  --paper:#FFFFFF;
  --line:#E2E7EF;
  --line-ink:#22304d;   /* hairline on dark */
  --text:#0B1220;
  --dim:#56607A;        /* slate muted */
  --dim-ink:#93a0bd;    /* muted on dark */
  --flow:#12B0A0;       /* brand / action / healthy data */
  --flow-deep:#0C8576;
  --signal:#E8A317;     /* RISK ONLY — instrument warning light */
  --signal-ink:#9a6b0c; /* amber legible on light ground */
  --crit:#F0603E;       /* critical severity */
  --crit-ink:#8a2a17;   /* red legible on light ground */
  --radius:14px;
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --shadow-lift:0 18px 40px -24px rgba(11,18,32,.4);
  --shadow-panel:0 30px 70px -30px rgba(0,0,0,.7);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--porcelain);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--flow-deep);text-decoration:none}

/* ---------- shared type helpers ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.display{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.02}
.mono{font-family:var(--font-mono)}
.eyebrow{
  font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--flow-deep);
}

/* focus is a first-class state everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,.btn:focus-visible,.navlink:focus-visible{
  outline:3px solid var(--flow);outline-offset:3px;border-radius:6px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-mono);font-weight:500;font-size:14px;letter-spacing:.01em;
  padding:11px 18px;border-radius:10px;border:1px solid transparent;cursor:pointer;
  text-decoration:none;background:none;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease,color .12s ease;
}
.btn-primary{background:var(--flow);color:#04211d}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(18,176,160,.35)}
.btn-ghost{border-color:var(--line-ink);color:#fff}
.btn-ghost:hover{border-color:var(--flow);color:var(--flow)}
.btn-outline{border-color:var(--line);color:var(--text)}
.btn-outline:hover{border-color:var(--flow);color:var(--flow-deep)}
.btn-block{width:100%}

/* a low-key control used in dark headers + inline actions */
.linkbtn{
  display:inline-flex;align-items:center;gap:6px;background:none;
  border:1px solid var(--line-ink);color:#fff;font-family:var(--font-mono);
  font-size:12px;padding:6px 12px;border-radius:8px;cursor:pointer;text-decoration:none;
  transition:border-color .12s ease,color .12s ease;
}
.linkbtn:hover{border-color:var(--flow);color:var(--flow)}
.linkbtn-quiet{border-color:var(--line);color:var(--dim)}
.linkbtn-quiet:hover{border-color:var(--flow);color:var(--flow-deep)}

/* ---------- header: the dark instrument top strip ---------- */
.hdr{position:sticky;top:0;z-index:40;background:rgba(11,18,32,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-ink)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:18px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:800;font-size:22px;color:#fff;letter-spacing:-.02em}
.brand .beacon{width:11px;height:11px;border-radius:50%;background:var(--flow);box-shadow:0 0 0 4px rgba(18,176,160,.18);animation:pulse 3.2s ease-in-out infinite}
.brand-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-ink);border:1px solid var(--line-ink);border-radius:999px;padding:3px 9px;margin-left:2px}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(18,176,160,.18)}50%{box-shadow:0 0 0 7px rgba(18,176,160,.05)}}
.nav{display:flex;align-items:center;gap:26px}
.nav a.navlink{font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;color:var(--dim-ink)}
.nav a.navlink:hover,.nav a.navlink[aria-current="page"]{color:#fff}
.nav a.navlink[aria-current="page"]{color:var(--flow)}
.nav .signin{color:#fff}
.hdr-user{display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:12.5px;color:var(--dim-ink)}
.hdr-user .who{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hdr-user form{display:inline;margin:0}
@media(max-width:760px){.nav .navlink{display:none}.hdr-user .who{display:none}}

/* ---------- footer: dark, carries the legal links ---------- */
.foot{background:var(--ink);color:var(--dim-ink);border-top:1px solid var(--line-ink);padding:44px 0}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.foot .brand{font-size:19px}
.foot nav{display:flex;gap:24px;flex-wrap:wrap;font-family:var(--font-mono);font-size:13px}
.foot nav a{color:var(--dim-ink)}
.foot nav a:hover{color:#fff}
.foot .copy{font-family:var(--font-mono);font-size:12px;width:100%;color:#5b6788}
.foot .copy a{color:#8b97b8;text-decoration:underline;text-underline-offset:2px}
.foot .copy a:hover{color:#fff}

/* ---------- section scaffolding (marketing + legal share these) ---------- */
.section{padding:88px 0}
.section-ink{background:var(--ink);color:#fff}
.sec-head{max-width:640px;margin-bottom:52px}
.sec-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.7rem);letter-spacing:-.025em;margin:14px 0 14px}
.sec-head p{color:var(--dim);font-size:1.12rem}
.section-ink .sec-head p{color:var(--dim-ink)}

/* ---------- cards ---------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;transition:transform .14s ease,box-shadow .14s ease}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}

/* the app content panel — a paper card with a tighter rhythm */
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:20px}
.panel h2{font-family:var(--font-display);font-weight:700;font-size:1.2rem;letter-spacing:-.01em;margin-bottom:4px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel .lead{color:var(--dim);font-size:.96rem;margin-bottom:18px;max-width:60ch}
.panel-warn{border-color:var(--signal)}

/* ---------- chips (severity is a color, everywhere) ---------- */
.chip{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:999px;font-weight:600;display:inline-block}
.chip-info{background:rgba(18,176,160,.14);color:var(--flow-deep)}
.chip-warn{background:rgba(232,163,23,.16);color:var(--signal-ink)}
.chip-crit{background:rgba(240,96,62,.14);color:var(--crit-ink)}

/* status pill: connection + plan state */
.status{font-family:var(--font-mono);font-size:12.5px;padding:5px 11px;border-radius:999px;display:inline-block}
.status.ok{background:rgba(18,176,160,.14);color:var(--flow-deep)}
.status.off{background:var(--porcelain);color:var(--dim);border:1px solid var(--line)}

/* ---------- governance finding card (the app's live signal) ---------- */
.finding{border:1px solid var(--line);border-left-width:4px;border-radius:10px;padding:14px 16px;margin:10px 0;background:var(--paper)}
.finding.critical{border-left-color:var(--crit)}
.finding.warn{border-left-color:var(--signal)}
.finding.info{border-left-color:var(--flow)}
.finding .kind{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--dim)}
.finding h3{font-family:var(--font-display);font-weight:700;font-size:1.02rem;margin:3px 0 4px;letter-spacing:-.01em}
.finding .ev{font-family:var(--font-mono);font-size:12px;color:var(--dim);word-break:break-word}
.finding .chip{float:right;margin-left:12px}

/* ---------- instrument readouts: stat tiles, bars, chart ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.tile{background:var(--porcelain);border:1px solid var(--line);border-radius:10px;padding:16px}
.tile .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.tile .v{font-family:var(--font-display);font-weight:700;font-size:1.7rem;letter-spacing:-.02em;margin-top:4px}

.chart{width:100%;height:auto;display:block;margin:8px 0}

.bar{display:flex;align-items:center;gap:10px;font-size:.9rem;margin:7px 0}
.bar .lbl{font-family:var(--font-mono);font-size:12px;width:210px;flex-shrink:0;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .track{flex:1;background:var(--porcelain);border:1px solid var(--line);border-radius:6px;height:14px;overflow:hidden}
.bar .fill{height:100%;background:var(--flow)}
.bar .pct{font-family:var(--font-mono);font-size:12px;color:var(--dim);width:44px;text-align:right}

/* ---------- forms ---------- */
label{display:block;font-size:.9rem;font-weight:600;margin:12px 0 6px}
input[type=text],input[type=email],input[type=password]{
  font:inherit;padding:10px 12px;border:1px solid var(--line);border-radius:9px;width:100%;max-width:420px;
  background:var(--paper);color:var(--text);transition:border-color .12s ease,box-shadow .12s ease;
}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus{
  border-color:var(--flow);box-shadow:0 0 0 3px rgba(18,176,160,.18);outline:none;
}
.hint{font-size:.86rem;color:var(--dim);margin-top:6px}
code{font-family:var(--font-mono);font-size:.9em}

/* ---------- flash / toast ---------- */
.flash{border-radius:9px;padding:10px 14px;font-size:.92rem;margin-bottom:16px}
.flash-err{background:rgba(240,96,62,.1);border:1px solid rgba(240,96,62,.3);color:var(--crit-ink)}
.flash-ok{background:rgba(18,176,160,.1);border:1px solid rgba(18,176,160,.3);color:var(--flow-deep)}
.flash-warn{background:rgba(232,163,23,.12);border:1px solid rgba(232,163,23,.5);color:var(--signal-ink)}

/* ---------- pricing tiers (unified: marketing + subscribe share these) ---------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.tier{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column}
.tier.feature{border-color:var(--flow);box-shadow:0 20px 50px -30px rgba(18,176,160,.6);position:relative}
.tier.feature::before{content:attr(data-badge);position:absolute;top:-11px;left:28px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;background:var(--flow);color:#04211d;padding:3px 12px;border-radius:999px;font-weight:600}
.tier.current{border-color:var(--flow);box-shadow:0 12px 30px -20px rgba(18,176,160,.6)}
.tier h3{font-family:var(--font-display);font-weight:800;font-size:1.4rem;letter-spacing:-.01em}
.tier .price{font-family:var(--font-mono);color:var(--dim);font-size:14px;margin:10px 0 4px;letter-spacing:.01em}
.tier .price b{color:var(--text);font-size:16px}
.tier .blurb{color:var(--dim);font-size:.98rem;margin-bottom:20px;min-height:44px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px;flex:1}
.tier li{font-size:.96rem;display:flex;gap:10px;align-items:flex-start;color:#2c3448}
.tier li::before{content:"\2192";color:var(--flow-deep);font-family:var(--font-mono);flex-shrink:0}
.tier .btn{width:100%}
.tier .status{width:100%;text-align:center;box-sizing:border-box}
@media(max-width:880px){.pricing{grid-template-columns:1fr}.tier.feature{order:-1}}

/* ---------- app page frame ---------- */
.page{padding:34px 0 80px}
.page h1{font-family:var(--font-display);font-weight:800;font-size:1.9rem;letter-spacing:-.02em;margin-bottom:6px}
.page .sub{color:var(--dim);margin-bottom:26px}
.page .eyebrow{display:block;margin-bottom:10px}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}