/* ============================================================================
   Redline — design system.

   One governing rule, and it comes from the subject rather than from taste:
   CHROME IS NEUTRAL, MEANING IS COLOURED. In a profit-and-loss tool, any
   decorative colour competes with the only colour that carries information.
   So buttons, links, focus rings and accents are all ink; green and red are
   spent exclusively on numbers. That restraint is what makes a financial
   interface feel trustworthy rather than marketed.
   ========================================================================== */

:root{
  --paper:#FCFCFA;
  --surface:#FFFFFF;
  --surface-2:#F5F5F2;
  --ink:#131519;
  --ink-2:#40454C;
  --ink-3:#6B7078;
  --ink-4:#9AA0A8;
  --line:#E7E5E0;
  --line-2:#D6D3CC;

  --profit:#0F7A4F;
  --profit-bg:#EAF3ED;
  --loss:#D0402C;
  --loss-bg:#FCEDEA;

  --ui:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-xs:.75rem; --t-sm:.865rem; --t-md:1rem; --t-lg:1.15rem;
  --t-xl:1.5rem; --t-2xl:2rem; --t-3xl:2.6rem;
  --t-hero:clamp(2.4rem,5.2vw,3.9rem);

  --wrap:74rem; --read:36rem;
  --r-sm:6px; --r:10px; --r-lg:14px;
  --shadow:0 1px 2px rgba(19,21,25,.04), 0 12px 32px -16px rgba(19,21,25,.18);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0C0D10;
    --surface:#141619;
    --surface-2:#1A1D21;
    --ink:#EDEDEF;
    --ink-2:#B8BCC2;
    --ink-3:#8B9098;
    --ink-4:#666B73;
    --line:#232629;
    --line-2:#31353A;
    --profit:#3DBE85;
    --profit-bg:#11241C;
    --loss:#F2705A;
    --loss-bg:#2A1411;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -18px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#0C0D10;
  --surface:#141619;
  --surface-2:#1A1D21;
  --ink:#EDEDEF;
  --ink-2:#B8BCC2;
  --ink-3:#8B9098;
  --ink-4:#666B73;
  --line:#232629;
  --line-2:#31353A;
  --profit:#3DBE85;
  --profit-bg:#11241C;
  --loss:#F2705A;
  --loss-bg:#2A1411;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 16px 40px -18px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:var(--t-md);line-height:1.55;
  letter-spacing:-.006em;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.1;letter-spacing:-.028em;text-wrap:balance}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:3px}
img,svg{max-width:100%;display:block}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2rem)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pos{color:var(--profit)}
.neg{color:var(--loss)}

.label{
  font-size:var(--t-xs);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);
}

/* ---- header ------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;gap:2rem;padding-block:.85rem}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:1.02rem;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
.brand .mark{width:13px;height:13px;border-radius:3px;background:var(--loss);flex:none}
.nav{display:flex;gap:1.6rem;margin-left:auto}
.nav a{font-size:var(--t-sm);color:var(--ink-3);text-decoration:none}
.nav a:hover{color:var(--ink)}
@media (max-width:52rem){.nav{display:none}}
.site-header .btn{margin-left:auto}
@media (min-width:52rem){.site-header .btn{margin-left:0}}

/* ---- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.62rem 1.05rem;border-radius:var(--r-sm);border:1px solid transparent;
  font-family:var(--ui);font-size:var(--t-sm);font-weight:500;letter-spacing:-.01em;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:opacity .13s ease,background .13s ease,border-color .13s ease;
}
.btn-primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-primary:hover{opacity:.86}
.btn-primary:disabled{opacity:.5;cursor:default}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink-3)}

/* ---- generic sections --------------------------------------------------- */
.section{border-top:1px solid var(--line)}
.section-inner{padding-block:clamp(3.2rem,7vw,5rem)}
h2{font-size:var(--t-2xl);max-width:20ch}
.section-lede{margin-top:.85rem;font-size:var(--t-lg);color:var(--ink-3);max-width:var(--read)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}

/* ---- app frame ---------------------------------------------------------- */
.frame{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;
}
.frame-bar{
  display:flex;align-items:center;gap:.75rem;padding:.7rem 1rem;
  border-bottom:1px solid var(--line);background:var(--surface-2);
}
.frame-bar .dots{display:flex;gap:.35rem}
.frame-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.frame-title{font-size:var(--t-xs);color:var(--ink-4);font-family:var(--mono);letter-spacing:.01em}
.frame-scroll{overflow-x:auto}

/* ---- data table --------------------------------------------------------- */
table.data{width:100%;border-collapse:collapse;min-width:41rem}
table.data th{
  text-align:right;padding:.7rem 1rem;font-size:var(--t-xs);font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
table.data th:first-child,table.data td:first-child{text-align:left;padding-left:1.15rem}
table.data th:last-child,table.data td:last-child{padding-right:1.15rem}
table.data td{
  padding:.78rem 1rem;text-align:right;border-bottom:1px solid var(--line);
  font-size:var(--t-sm);white-space:nowrap;
}
table.data tr:last-child td{border-bottom:0}
table.data tr.flag td{background:var(--loss-bg)}
.campname{font-weight:500;letter-spacing:-.01em}
.pill{
  display:inline-flex;align-items:center;gap:.3rem;padding:.13rem .48rem;border-radius:99px;
  font-size:.68rem;font-weight:500;letter-spacing:.03em;text-transform:uppercase;
  background:var(--loss);color:#fff;
}
.pill.ok{background:transparent;color:var(--ink-4);border:1px solid var(--line-2)}

/* ---- footer ------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--line);background:var(--surface-2)}
.site-footer .wrap{
  display:flex;flex-wrap:wrap;gap:1.1rem 2.5rem;justify-content:space-between;
  align-items:flex-start;padding-block:2.2rem;
}
.site-footer p{font-size:var(--t-xs);color:var(--ink-4);line-height:1.7;max-width:46rem}
.site-footer a{color:var(--ink-3)}