/* ==========================================================================
   CAMPLAX — "Paper", applied to the console and the ui/ mocks.

   These 32 pages each carry their own inline <style> from the old Midday Light
   system. Rather than gut 32 files and lose their page-specific layout rules,
   this sheet loads AFTER the inline block and overrides the look: the tokens,
   the typeface, the radii, the borders and the shadows. Everything structural
   in each page survives untouched.

   Same rules as the marketing site: pure white canvas, white cards defined by
   a semi-transparent hairline plus a two-layer shadow, rounded rectangles for
   anything you click and pills only for labels, near-black type at weight 500.
   ========================================================================== */

:root{
  /* the old names, pointed at Paper values — this alone re-skins most of it */
  --white:#ffffff;
  --cream:#ffffff;          /* was the card fill; white cards on white now */
  --offwhite:#f5f5f5;       /* quiet fill: active nav, table head, chips */
  --greige:rgba(0,0,0,.08); /* every border in these pages resolves to this */
  --ink:#0a0a0a;
  --smoke:#6e6e73;          /* 4.9:1 on white — clears AA */
  --zinc:#0a0a0a;
  --moss:#12a150;
  --focus:rgba(15,91,255,.18);
  --sans:"Onest","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"Onest","Helvetica Neue",Helvetica,Arial,sans-serif;

  --signal:#0f5bff;
  --edge:rgba(0,0,0,.08);
  --edge-2:rgba(0,0,0,.15);
  --surface:#f5f5f5;
  --surface-2:#ebebeb;
  --night:#0a0a0a;
  --r-btn:11px;
  --r:14px;
  --r-lg:18px;
  --pill:999px;
  --shadow-s:0 1px 2px rgba(0,0,0,.05),0 1px 1px rgba(0,0,0,.03);
  --shadow-m:0 1px 2px rgba(0,0,0,.05),0 8px 20px -8px rgba(0,0,0,.09);
  --shadow-l:0 1px 3px rgba(0,0,0,.06),0 22px 50px -22px rgba(0,0,0,.2);
  --ease:cubic-bezier(.2,.8,.2,1);
}

body{background:#fff;color:#3d3d42;font-family:var(--sans);font-size:14px;
  letter-spacing:-.008em}

/* ------------------------------------------------------------------ type */
/* the serif is gone; hierarchy comes from size, weight and colour */
.serif{font-family:var(--sans);font-weight:500;letter-spacing:-.024em}
h1,h2,h3,h4{color:var(--ink);font-family:var(--sans);font-weight:500;
  letter-spacing:-.022em}
.page-head h1{font-family:var(--sans);font-weight:500;font-size:26px;line-height:1.2;
  letter-spacing:-.028em}
.page-head .sub{color:var(--smoke);font-size:13.5px;line-height:1.5}
.overline{color:var(--smoke);font-size:10.5px;font-weight:500;letter-spacing:.07em}
.caption{color:var(--smoke);font-size:12px;line-height:1.5}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;letter-spacing:-.01em}
.note{color:var(--smoke)}

/* -------------------------------------------------------------- controls */
/* rounded rectangles, not pills — pills are reserved for labels and status */
.pill{border-radius:var(--r-btn);font-weight:500;font-size:13.5px;padding:10px 16px;
  transition:background .18s var(--ease),border-color .18s var(--ease),
  box-shadow .18s var(--ease),color .18s var(--ease)}
.pill.dark{background:var(--ink);color:#fff;box-shadow:var(--shadow-s)}
.pill.dark:hover{background:#000;opacity:1;box-shadow:var(--shadow-m)}
.pill.ghost{background:#fff;border-color:var(--greige);color:var(--ink);
  box-shadow:var(--shadow-s)}
.pill.ghost:hover{border-color:var(--edge-2);box-shadow:var(--shadow-m)}
.pill.sm{padding:7px 13px;font-size:12.5px}
.pill:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,button:focus-visible{outline:none;
  box-shadow:0 0 0 3px var(--focus),0 0 0 1px var(--signal)}

/* labels and status keep the pill shape */
.chip{border-radius:var(--pill);border-color:var(--greige);background:#fff;
  color:var(--smoke);font-size:11.5px;font-weight:500;padding:4px 11px}
.chip.fill{background:var(--offwhite);border-color:transparent;color:var(--ink)}
.dot{background:var(--smoke)}
.dot.moss{background:var(--moss);box-shadow:0 0 0 3px rgba(18,161,80,.14)}
.ok{color:var(--moss)}
.hi{color:var(--ink);font-weight:500}

/* inputs */
.input,input[type=text],input[type=email],input[type=password],input[type=search],
input[type=number],textarea,select{border-radius:var(--r-btn);border:1px solid var(--greige);
  background:#fff;color:var(--ink);font-family:var(--sans);font-size:14px;
  letter-spacing:-.008em;transition:border-color .18s var(--ease)}
.input:hover,textarea:hover,select:hover{border-color:var(--edge-2)}
::placeholder{color:var(--smoke)}
.field label,.field > span{color:var(--smoke)}
.switch{border-radius:var(--pill)}

/* ----------------------------------------------------------- app shell */
.side{border-right:1px solid var(--greige);background:#fff}
.brand{color:var(--ink);font-weight:600;letter-spacing:-.024em}
.proj{border-radius:var(--r-btn);border-color:var(--greige);background:#fff;
  box-shadow:var(--shadow-s);font-weight:500;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
.proj:hover{border-color:var(--edge-2);box-shadow:var(--shadow-m)}
.nav a{border-radius:9px;color:var(--smoke);font-size:13.5px;font-weight:400;
  transition:background .16s var(--ease),color .16s var(--ease)}
.nav a:hover{background:var(--offwhite);color:var(--ink)}
.nav a.on{background:var(--offwhite);color:var(--ink);font-weight:500}
.cost-mini{border-radius:var(--r);border-color:var(--greige);background:#fff;
  box-shadow:var(--shadow-s)}
.bar{border-radius:var(--pill);background:var(--surface-2)}
.bar i{border-radius:var(--pill);background:var(--ink)}
.user-chip,.user-menu-btn{color:var(--smoke);font-size:12.5px}
.user-menu-pop{border-radius:var(--r);border-color:var(--greige);background:#fff;
  box-shadow:var(--shadow-l);padding:6px}
.user-menu-pop a,.user-menu-pop button{border-radius:9px;font-size:13px;color:var(--ink)}
.user-menu-pop a:hover,.user-menu-pop button:hover{background:var(--offwhite)}
.ava{border-radius:var(--pill);background:var(--offwhite);color:var(--ink);font-weight:500}

/* the top bar separates itself with blur and a hairline, never a hard rule */
.app-topbar,.topbar{border-bottom:1px solid var(--greige);
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px)}

/* -------------------------------------------------------- cards & data */
.card{border-radius:var(--r-lg);border:1px solid var(--greige);background:#fff;
  box-shadow:var(--shadow-s);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.card:hover{border-color:var(--edge-2);box-shadow:var(--shadow-m)}
.card h3{color:var(--ink);font-size:14.5px;font-weight:500;letter-spacing:-.018em}
.card .desc{color:var(--smoke);font-size:13px;line-height:1.5}
.stat .val{color:var(--ink);font-size:22px;font-weight:500;letter-spacing:-.028em;
  font-variant-numeric:tabular-nums}
.stat .sub{color:var(--smoke);font-size:11.5px}
.sect-head h2,.sect-head h3{color:var(--ink);font-weight:500;letter-spacing:-.02em}
.divider{border-color:var(--greige);background:var(--greige)}

/* a console data table is genuinely tabular — keep it, soften every rule */
.tbl{border-radius:var(--r-lg);border:1px solid var(--greige);background:#fff;
  box-shadow:var(--shadow-s);overflow:hidden}
.tbl-head{background:var(--offwhite);border-bottom:1px solid var(--greige);
  color:var(--smoke);font-size:10.5px;font-weight:500;letter-spacing:.07em}
.trow{border-top:1px solid var(--greige);transition:background .16s var(--ease)}
.trow:first-child{border-top:0}
.trow:hover{background:#fafafa}
.t-main{color:var(--ink);font-weight:500;letter-spacing:-.014em}
.t-sub,.t-meta{color:var(--smoke);font-size:12px}
.t-amt{color:var(--ink);font-variant-numeric:tabular-nums}

/* log / code surfaces stay light so the syntax colours keep their contrast */
.mono-panel{border-radius:var(--r);border:1px solid var(--greige);background:var(--offwhite);
  color:var(--ink);font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;box-shadow:none}
.filters{gap:8px}
.filters .chip,.filters .pill{white-space:nowrap}

/* --------------------------------------------------------------- auth */
.auth{background:#fff}
.auth-box{border-radius:var(--r-lg);border:1px solid var(--greige);background:#fff;
  box-shadow:var(--shadow-l)}
.auth-brand{color:var(--ink);font-weight:600;letter-spacing:-.024em}
.auth-foot{color:var(--smoke);font-size:13px}
.auth-foot a,.note a{color:var(--signal)}
.auth-foot a:hover,.note a:hover{text-decoration:underline;text-underline-offset:3px}
.or{color:var(--smoke);font-size:12px}
.or::before,.or::after{background:var(--greige)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}