/* ==========================================================================
   AlcateIA platform · base design system, served at <any host>/cdn/main.css
   Taken from the geth design system (cdn.geth.app/v1/main.css, the one the deals login uses)
   and made product-neutral: the action colour is --accent, and each product paints it with
   its own theme (system/modules theme.color) through /cdn/theme.js.
   tokens -> base -> components. Components take their colours from the tokens only, so the
   dark theme and the product's colour reach all of them.
   ========================================================================== */

/* ---- 1. TOKENS -------------------------------------------------------- */
:root {
  /* light theme */
  --bg:            #faf9f7;
  --surface:       #ffffff;
  --ink:           #16181d;   /* text */
  --ink-soft:      #33373e;   /* text a step below --ink: code on a .pill-code */
  --muted:         #5c6066;   /* supporting text */
  --faint:         #a9ada6;   /* metadata, placeholder */
  --hairline:      #e7e5e0;   /* the main 1px border */
  --hairline-soft: #efede8;   /* a divider inside a card */
  --border:        #d8d5cf;   /* the border of an input or a secondary button */
  --border-strong: #b9beb4;   /* a card's border under the pointer */
  --fill:          #f1efea;   /* a muted tag, the track of a bar */
  --accent:         var(--product, #1fa860);   /* data + action; a product paints --product */
  --accent-tint:    color-mix(in srgb, var(--accent) 15%, #ffffff);
  --accent-sel:     color-mix(in srgb, var(--accent) 22%, #ffffff);   /* ::selection */
  --alert:         #b3541e;   /* a rise, a warning, an error */
  --alert-tint:    #f7e8dd;
  --primary:       var(--ink);   /* the primary button; -hover under the pointer */
  --primary-hover: #2a2e36;

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

  /* shape */
  --r-card: 12px;
  --r-frame: 14px;
  --r-btn: 9px;
  --r-input: 10px;
  --r-pill: 99px;
  --shadow-data: 0 24px 48px -32px rgba(22,24,29,.25);

  /* layout */
  --wrap: 1120px;
  --wrap-narrow: 1040px;
  --gutter: 24px;
}

/* dark theme: the SAME names, other values.
   Use: <body data-theme="dark"> (a dark panel) OR <section data-theme="dark"> for a dark block
   inside a light page (hero, .read, CTA). .read and .pill-code are dark in both themes: they
   wear these tokens on themselves. */
[data-theme="dark"], .read, .pill-code {
  --bg:            #101318;
  --surface:       #171b22;
  --ink:           #f2f3f5;
  --ink-soft:      #c8cdd4;
  --muted:         #9aa0a8;
  --faint:         #5c6470;
  --hairline:      #262b34;
  --hairline-soft: #262b34;
  --border:        #2e343e;
  --border-strong: #5c6470;
  --fill:          #1b2028;
  --accent:         var(--product-dark, var(--product, #3ddc84));
  --accent-tint:    color-mix(in srgb, var(--accent) 18%, #101318);
  --alert:         #e8a06a;
  --alert-tint:    #2a2019;
  --primary:       var(--accent);
  --primary-hover: color-mix(in srgb, var(--accent) 80%, #ffffff);
}

/* ---- 2. BASE --------------------------------------------------------- */
/* Self-hosted fonts (the brand manual asks for it): the .woff2 files live in /cdn/fonts/. */
@font-face { font-family:"Geist"; font-weight:400; font-display:swap; src:url("/cdn/fonts/Geist-Regular.woff2") format("woff2"); }
@font-face { font-family:"Geist"; font-weight:500; font-display:swap; src:url("/cdn/fonts/Geist-Medium.woff2") format("woff2"); }
@font-face { font-family:"Geist"; font-weight:600; font-display:swap; src:url("/cdn/fonts/Geist-SemiBold.woff2") format("woff2"); }
@font-face { font-family:"Geist"; font-weight:700; font-display:swap; src:url("/cdn/fonts/Geist-Bold.woff2") format("woff2"); }
@font-face { font-family:"Geist Mono"; font-weight:400; font-display:swap; src:url("/cdn/fonts/GeistMono-Regular.woff2") format("woff2"); }
@font-face { font-family:"Geist Mono"; font-weight:500; font-display:swap; src:url("/cdn/fonts/GeistMono-Medium.woff2") format("woff2"); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: var(--accent-sel); }
input { font-family: inherit; }
input:focus { outline: none; border-color: var(--ink) !important; }
input::placeholder { color: var(--faint); }

/* the "live" pulse, in the product's colour (var() resolves on the element that pulses) */
@keyframes gpulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---- 3. LAYOUT ------------------------------------------------------- */
.wrap        { max-width: var(--wrap);        margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section     { padding-top: 88px; padding-bottom: 88px; }
.section--sm { padding-top: 48px; padding-bottom: 48px; }
.section--lg { padding-top: 96px; padding-bottom: 96px; }
.hairline-b  { border-bottom: 1px solid var(--hairline); }
.hairline-t  { border-top: 1px solid var(--hairline); }
/* a line of chips, tags or buttons that wraps by itself */
.chips { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ---- 4. TYPE --------------------------------------------------------- */
.h1 { margin:0; font-size: clamp(38px,5vw,56px); line-height:1.06; font-weight:650; letter-spacing:-.035em; text-wrap: pretty; }
.h2 { margin:0; font-size: clamp(28px,3.4vw,38px); font-weight:650; letter-spacing:-.03em; }
.h3 { margin:0; font-size:17px; font-weight:600; }
.lead    { font-size:17px; line-height:1.6; color: var(--muted); max-width:60ch; text-wrap: pretty; }
/* a highlighted or closing sentence: medium weight, not a title */
.quote   { margin:0; font-size: clamp(22px,3vw,32px); line-height:1.35; font-weight:500; letter-spacing:-.025em; text-wrap: pretty; }
.body    { font-size:14.5px; line-height:1.6; color: var(--muted); max-width:60ch; }
.label   { font-family: var(--font-mono); font-size:12px; letter-spacing:.14em; color: var(--accent); text-transform: uppercase; }
/* the same label as .label, but neutral: a card's number, a column's title */
.eyebrow { font-family: var(--font-mono); font-size:11px; letter-spacing:.14em; color: var(--faint); text-transform: uppercase; }
.mono    { font-family: var(--font-mono); }
.tiny    { font-size: 11px; }   /* small print: the surface's name beside the logo, a badge */
.num, .price { font-family: var(--font-mono); font-weight:500; }
.muted   { color: var(--muted); }
.faint   { color: var(--faint); }
.pos     { color: var(--accent); }
.neg     { color: var(--alert); }
.logo    { font-size:21px; font-weight:650; letter-spacing:-.02em; color: var(--ink); }
.logo .dot { color: var(--accent); }

/* ---- 5. BUTTONS ------------------------------------------------------ */
.btn { display:inline-block; font-family:inherit; font-size:14.5px; font-weight:500;
  padding:12px 20px; border-radius: var(--r-btn); border:1px solid transparent; cursor:pointer; transition: background .15s, border-color .15s, transform .15s; }
.btn-primary   { background: var(--primary); color: var(--bg); }
.btn-primary:hover { background: var(--primary-hover); color: var(--bg); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }
.btn-block { display:block; width:100%; text-align:center; }

/* ---- 6. CHIPS / TAGS / CODE PILL ------------------------------------- */
.chip { display:inline-block; font-family: var(--font-mono); font-size:11px; color: var(--muted);
  border:1px solid var(--hairline); padding:4px 10px; border-radius: var(--r-pill); }
.tag  { display:inline-block; font-family: var(--font-mono); font-size:11px; padding:3px 9px; border-radius: var(--r-pill); }
.tag-green { color: var(--accent); background: var(--accent-tint); }
.tag-alert { color: var(--alert); background: var(--alert-tint); }
.tag-muted { color: var(--muted); background: var(--fill); }
.pill-code { font-family: var(--font-mono); font-size:12.5px; color: var(--ink-soft); background: var(--surface);
  border:1px solid var(--hairline); padding:8px 14px; border-radius:10px; display:inline-block; }
.pill-code .verb { color: var(--accent); }
.pill-code-block { display:block; word-break:break-all; padding:12px 14px; font-size:11.5px; }

/* ---- 7. CARD / DATA FRAME -------------------------------------------- */
.card { background: var(--surface); border:1px solid var(--hairline); border-radius: var(--r-card); }
.card-pad { padding:24px; }
.card-pad-lg { padding: clamp(32px,5vw,56px); }
.card-hover { transition: border-color .15s, transform .15s; }
.card-hover:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.frame { background: var(--surface); border:1px solid var(--hairline); border-radius: var(--r-frame);
  box-shadow: var(--shadow-data); overflow:hidden; }
.frame-flat { box-shadow:none; }

/* the frame's title bar: the state of a collection, a mock's address, the time of the data */
.frame-head { display:flex; align-items:center; gap:8px; padding:12px 18px;
  border-bottom:1px solid var(--hairline-soft); font-family: var(--font-mono); font-size:11px; color: var(--muted); }
.frame-head .end { margin-left:auto; color: var(--faint); }

/* a window mock (three dots) and a UI skeleton inside a figure */
.mock-dots { display:flex; gap:6px; }
.mock-dots i { display:block; width:8px; height:8px; border-radius:50%; background: var(--border); }
.sk { display:block; height:8px; background: var(--border); border-radius:4px; }
.sk-on { background: var(--accent); opacity:.85; }
.bars { display:flex; align-items:flex-end; gap:8px; }
.bars > i { display:block; flex:1; background: var(--border); border-radius:4px 4px 0 0; }
.bars > i.on { background: var(--accent); }

/* a reading footer inside a card or frame (a note, a caveat, the data's source) */
.note    { border-top:1px solid var(--hairline-soft); padding:20px 24px; font-size:15px; line-height:1.6; }
.note-sm { border-top:1px solid var(--hairline-soft); padding:14px 24px;
  font-family: var(--font-mono); font-size:10.5px; line-height:1.6; color: var(--faint); }

/* data lines inside a card or frame */
.data-row { display:flex; align-items:baseline; gap:10px; padding:13px 20px; border-bottom:1px solid var(--hairline-soft); }
.data-row:last-child { border-bottom:0; }
.data-row .k { font-size:13.5px; color: var(--muted); }
.data-row .v { margin-left:auto; font-family: var(--font-mono); font-size:13px; color: var(--ink); }

/* ---- 8. STAT (big number + label) ----------------------------------- */
.stat .n { font-family: var(--font-mono); font-size:26px; font-weight:500; letter-spacing:-.02em; }
.stat .l { font-size:13px; color: var(--muted); margin-top:6px; }
.stat-sm .n { font-size:19px; letter-spacing:-.01em; }
.stat-lg .n { font-size:34px; letter-spacing:-.025em; }
.stat-xl .n { font-size: clamp(38px,4.4vw,50px); letter-spacing:-.03em; }

/* a strip of stats split by 1px lines (the "gap" is the hairline itself) */
.stat-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap:1px; background: var(--hairline-soft); }
.stat-grid > .stat { background: var(--surface); padding:28px 24px; }
.stat-grid--wide { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.stat-grid--wide > .stat { padding:36px 30px; }

/* ---- 9. BAR (progress / spread) ------------------------------------- */
.bar { height:6px; background: var(--fill); border-radius: var(--r-pill); overflow:hidden; }
.bar > i { display:block; height:100%; background: var(--ink); border-radius: var(--r-pill); }

/* ---- 10. "LIVE" SIGNAL ---------------------------------------------- */
.live-dot { width:8px; height:8px; border-radius:50%; background: var(--accent); animation: gpulse 2.2s infinite; display:inline-block; }

/* ---- 11. HIGHLIGHT BLOCKS (dark) ------------------------------------ */
/* .panel = a big dark block (hero, manifesto, CTA). It asks for data-theme="dark" on the
   element itself: background, ink and lines then come from the tokens, with no loose hex. */
.panel { background: var(--bg); border-radius: var(--r-frame); padding: clamp(36px,5vw,64px); }
/* .section-dark = a dark section from edge to edge (no corners). It also asks for data-theme="dark". */
.section-dark { background: var(--bg); color: var(--ink); }

/* .read = a dark reading block; it wears the dark tokens by itself (see the dark theme above) */
.read { background: var(--bg); border-radius: var(--r-frame); padding: clamp(28px,4vw,40px); }
.read h3 { color: var(--ink); font-size: clamp(22px,2.8vw,28px); font-weight:650; letter-spacing:-.02em; margin:12px 0; }
.read p  { color: var(--muted); font-size:14.5px; line-height:1.65; margin:0; }
.read .hi { color: var(--accent); }

/* ---- 12. GRID UTILITIES --------------------------------------------- */
.grid { display:grid; gap:16px; }
.grid-auto  { grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); }
.grid-cards { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }
/* two columns that become one when narrow: text + a data figure (hero, a section with a mock) */
.grid-split { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap:56px; align-items:center; }

/* ---- 12b. NUMBERED STEPS -------------------------------------------- */
.steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:28px; }
.step  { border-top:2px solid var(--hairline); padding-top:18px; }
.step-on { border-top-color: var(--accent); }
.step .n { font-family: var(--font-mono); font-size:11.5px; color: var(--faint); margin-bottom:10px; }
.step p  { margin:0; font-size:15px; line-height:1.6; color: var(--muted); }

/* ---- 13. NAV / FOOTER ----------------------------------------------- */
.nav { position:sticky; top:0; z-index:50; background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom:1px solid var(--hairline); }
.nav-row   { display:flex; align-items:center; gap:28px; flex-wrap:wrap; padding-top:14px; padding-bottom:14px; }
.nav-links { display:flex; gap:22px; flex-wrap:wrap; font-size:14px; }
.nav-links a { color: var(--muted); }
.nav-end   { margin-left:auto; display:flex; gap:10px; align-items:center; }
.foot { font-size:13px; color: var(--faint); }

/* ---- 14. THE BELL ---------------------------------------------------- */
/* the person's notices in the header of the admin and the console (shell.js bell()). The hover
   rule keeps the shells' own button:hover, which loads later, off the bell's border. */
.bell { position: relative; }
.bell > button, .bell > button:hover { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--hairline); background: var(--surface); color: var(--muted); cursor: pointer; }
.bell .count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--alert); color: var(--surface); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.bell .bell-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: 0 16px 40px rgb(0 0 0 / .12); }
.bell .top { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--hairline-soft); }
.bell .top .all { border: 0; background: none; color: var(--muted); font-size: 12.5px; cursor: pointer; padding: 0; }
.bell .item { display: grid; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--hairline-soft); color: var(--ink); text-decoration: none; font-size: 13.5px; }
.bell .item span { color: var(--muted); }
.bell .item small { color: var(--faint); font-size: 11.5px; }
.bell .item.unread { background: var(--accent-tint); }
.bell .empty { padding: 18px 14px; color: var(--muted); font-size: 13.5px; }
.bell .pref { display: flex; gap: 8px; align-items: center; padding: 10px 14px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--hairline-soft); }
/* At 960 px and less both shells fold their menus and the header wraps, so the bell can sit anywhere in it: the panel
   hangs from the header's right gutter instead (the header is sticky, so it holds the panel once the bell does not),
   and on a 360 px phone it starts 16 px in from the left edge instead of past it. */
@media (max-width: 960px) {
  .bell { position: static; }
  .bell .bell-panel { right: 16px; }
}