/* TICS FOUNDRY — the shared design system, vendored.
 *
 * One look across TICA, TICS, Guardian, ATLAS, Genealogy and the Server
 * Control Panel. Source: ~/foundry-ui/foundry.css (Tom's canonical copy).
 * Vendored, not linked, per Foundry's own rule — a marketing site that broke
 * because a different app's host went down would be worse than drift.
 *
 * TRIMMED FOR A MARKETING SITE: the app shell (rail/topbar/page, the gauge/
 * spark/tile telemetry widgets, the privileged "action" pattern) belongs to
 * dashboard apps, not a public website, and is left out. Tokens, base, and
 * the primitives (cards, rows, pills, chips, buttons, disclosure) carry over
 * so this site uses the exact same brass-on-navy language as the product
 * itself. site.css builds the marketing-specific layer on top of this.
 */

/* ---- tokens ------------------------------------------------------------ */
:root{
  --bg:#07111f; --ink:#f2ead8; --brass:#d0aa55; --brass-soft:#1a2d45;
  --line:#3b4b61; --surface:#101e30; --sidebar:#091625; --muted:#a8b5c7;

  --brass-bright:#e6c87e; --brass-deep:#a67f34;

  --good:#4ec98a; --warn:#e0b15a; --bad:#e2685f;

  --glass:color-mix(in srgb,var(--surface) 82%,transparent);
  --glass-line:color-mix(in srgb,var(--brass) 18%,var(--line));
  --glow:0 0 0 1px color-mix(in srgb,var(--brass) 22%,transparent),
         0 18px 50px -18px rgba(0,0,0,.75);
  --glow-brass:0 0 26px -6px color-mix(in srgb,var(--brass) 55%,transparent);

  --radius:16px; --radius-sm:10px;
  color-scheme:dark;
}

/* ---- base ---------------------------------------------------------------*/
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--ink);
  background:radial-gradient(1200px 620px at 78% -12%,#12243a 0%,transparent 62%),var(--bg);
  font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--brass)}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.muted{color:var(--muted)}
.hidden{display:none !important}

/* ---- primitives ----------------------------------------------------------*/
.grid{display:grid;gap:18px}
.grid.cols4{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
.grid.cols3{grid-template-columns:repeat(auto-fit,minmax(275px,1fr))}
.grid.cols2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}

.card{border:1px solid var(--glass-line);border-radius:var(--radius);background:var(--glass);
  padding:13px 15px}
.card h3{margin:0 0 10px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.card .big{font-size:1.3rem;font-weight:650;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.card .sub{color:var(--muted);font-size:.82rem}

.focus{border:1px solid var(--glass-line);border-radius:var(--radius);padding:16px 18px;
  background:linear-gradient(160deg,#0d1d30,#091624);box-shadow:var(--glow)}
.focus h2{margin:0 0 4px;font-size:1.15rem;font-weight:650;letter-spacing:.2px}
.focus p{margin:0;color:var(--muted)}

.rows{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:8px 13px;background:var(--surface)}
.row .name{font-weight:550}
.row .meta{color:var(--muted);font-size:.8rem}

.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);font-size:.72rem;color:var(--muted)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--good);border-color:color-mix(in srgb,var(--good) 35%,var(--line))}
.pill.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}
.pill.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}

.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:8px;
  border:1px solid var(--line);background:var(--brass-soft);font-size:.72rem;color:var(--muted)}

.empty{color:var(--muted);padding:16px;text-align:center}

/* ---- buttons: always the accent, never grey ------------------------------*/
button,.btn{font:inherit;cursor:pointer;border-radius:9px;padding:6px 12px;font-size:.82rem;font-weight:550;
  border:1px solid var(--brass-deep);color:#091522;
  background:linear-gradient(145deg,var(--brass-bright),var(--brass-deep));
  box-shadow:0 6px 18px -10px color-mix(in srgb,var(--brass) 60%,transparent);transition:.15s}
button:hover:not(:disabled),.btn:hover{filter:brightness(1.05)}
button:disabled,.btn:disabled{cursor:not-allowed;transform:none;filter:none;box-shadow:none;
  background:var(--surface);border-color:var(--line);color:var(--muted)}
button.quiet,.btn.quiet{background:transparent;color:var(--brass);box-shadow:none}
button.quiet:hover:not(:disabled),.btn.quiet:hover{background:var(--brass-soft)}

/* ---- disclosure: the "More" that keeps a front door quiet ----------------*/
details.more{border:1px solid var(--line);border-radius:12px;
  background:color-mix(in srgb,var(--surface) 50%,transparent)}
details.more>summary{cursor:pointer;list-style:none;padding:11px 15px;color:var(--muted);
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:9px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"";width:7px;height:7px;margin-bottom:2px;transition:.16s;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg)}
details.more[open]>summary::before{transform:rotate(45deg)}
details.more>summary:hover{color:var(--ink)}
details.more .body{padding:0 15px 15px}