/* legacy-noir.css — the Legacy house style, one file for every hub tool.
 *
 * WHY ONE FILE. Until 2026-09-29 the hub had 57 pages and no shared stylesheet: every tool
 * carried its own copy of the colors, header and cards, so each restyle meant touching every
 * page and they drifted apart between passes. This file is the single source. A tool adopts
 * the look by loading it and using the tokens; it never redefines them.
 *
 * THE DIRECTION (Dave, 2026-09-29): Noir. Near-black and ivory, one warm champagne accent,
 * type doing the work instead of boxes. Retires the navy slate cards, the gold wash, the
 * grid/fabric texture and Playfair everywhere. Headlines and big numbers are Bricolage
 * Grotesque, heavy and upright, the face of the Reenders Noir door. No italic headers
 * (Dave: not a fan). The brand in the corner is the real horizontal logo, never typed.
 *
 * Fonts (load in <head>):
 *   https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Geist:wght@300..700&family=Geist+Mono:wght@400;500&display=swap
 *
 * Theme: dark by default. Light ("ivory") via <html data-theme="light">, persisted in
 * localStorage 'legacyTheme', the key every hub tool already shares.
 */

:root {
  /* surfaces: four luminance steps, no hue */
  --bg:        #0b0b0c;
  --surface:   #131314;
  --surface-2: #1a1a1c;
  --surface-3: #232326;

  /* ink: ivory, three strengths (all at or above 4.5:1 on --bg and --surface) */
  --ink:   #f5f2ec;
  --ink-2: #bdb8af;
  --ink-3: #8f8a83;

  --line:   rgba(245, 242, 236, 0.08);
  --line-2: rgba(245, 242, 236, 0.14);

  /* the one accent: plain ivory (Dave 9/30: no cream, just black and white). Mark, primary action, focus. */
  --accent:    #f5f2ec;
  --accent-ink:#111111;          /* text on an accent fill */
  --focus:     rgba(245, 242, 236, 0.5);

  /* status: dots and small labels only */
  --ok:    #7fc79c;
  --warn:  #e3b56d;
  --alert: #ee8b7b;

  --scrim: rgba(6, 6, 7, 0.72);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line-2);

  --display: 'Bricolage Grotesque', 'Geist', -apple-system, system-ui, sans-serif;
  --sans:  'Geist', -apple-system, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --mono:  'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;

  --page: 1120px;
  --gutter: clamp(16px, 4vw, 40px);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:        #f5f5f4;
  --surface:   #ffffff;
  --surface-2: #eeeeec;
  --surface-3: #e5e5e3;
  --ink:   #111111;
  --ink-2: #4a4843;
  --ink-3: #6b6760;
  --line:   rgba(17, 17, 17, 0.08);
  --line-2: rgba(17, 17, 17, 0.14);
  --accent:     #111111;
  --accent-ink: #f5f5f4;
  --focus:      rgba(17, 17, 17, 0.35);
  --ok:    #2f7a4f;
  --warn:  #9a5f10;
  --alert: #b23a2c;
  --scrim: rgba(246, 245, 242, 0.7);
  --shadow: 0 24px 80px rgba(17, 17, 17, 0.16), 0 0 0 1px var(--line-2);
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
img { max-width: 100%; display: block; }
/* A component's display rule (e.g. .n-btn { display: inline-flex }) would otherwise beat the
   browser's own [hidden] rule and leave hidden controls on screen. */
[hidden] { display: none !important; }

.n-wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.n-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.n-display { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; font-variation-settings: "opsz" 96; }
.n-display-soft { font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.n-h2 { font-size: 13px; font-weight: 500; color: var(--ink-3); letter-spacing: 0.01em; margin: 0; }
.n-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.n-num { font-variant-numeric: tabular-nums; }
.n-muted { color: var(--ink-3); }

/* ---------- brand ----------
 * The kit's recolorable horizontal logo as a mask, so it takes the theme's ink: ivory on
 * Noir, black on ivory. Matches the rule that the mark always wears the theme's color. */
.n-brand { display: inline-flex; align-items: center; gap: 14px; }
.n-logo {
  width: 113px; height: 26px; flex: none; background: var(--ink);
  -webkit-mask: url(/assets/legacy-wordmark.svg) left center / contain no-repeat;
          mask: url(/assets/legacy-wordmark.svg) left center / contain no-repeat;
}
.n-product { font-size: 13px; color: var(--ink-3); font-weight: 400; padding-left: 14px; border-left: 1px solid var(--line-2); line-height: 20px; }

/* ---------- top bar ---------- */
.n-top {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
          backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.n-top.scrolled { border-bottom-color: var(--line); }
.n-top-in { height: 72px; display: flex; align-items: center; gap: 16px; }
.n-top-mid { flex: 1; display: flex; justify-content: center; }
.n-top-end { display: flex; align-items: center; gap: 6px; }

.n-search-btn {
  width: min(440px, 100%); height: 36px; padding: 0 10px 0 12px;
  display: flex; align-items: center; gap: 10px;
  border-radius: 10px; background: var(--surface-2); color: var(--ink-3);
  font-size: 13.5px; transition: background .15s, color .15s;
}
.n-search-btn:hover { background: var(--surface-3); color: var(--ink-2); }
.n-search-btn svg { width: 15px; height: 15px; flex: none; }
.n-search-btn span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-kbd { font-family: var(--mono); font-size: 11px; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; }

.n-icon-btn {
  position: relative; width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; color: var(--ink-2);
  transition: background .15s, color .15s;
}
.n-icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.n-icon-btn svg { width: 18px; height: 18px; }
.n-badge {
  position: absolute; top: 5px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--accent); color: var(--accent-ink);
  font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
}
.n-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink);
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
}

/* ---------- menu ---------- */
.n-menu-wrap { position: relative; }
.n-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s, transform .14s, visibility .14s; z-index: 50;
}
.n-menu.open { opacity: 1; visibility: visible; transform: none; }
.n-menu-head { padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.n-menu-head b { display: block; font-weight: 500; }
.n-menu-head span { font-size: 12.5px; color: var(--ink-3); }
.n-menu a, .n-menu button {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 8px; font-size: 14px; color: var(--ink-2); text-align: left;
}
.n-menu a:hover, .n-menu button:hover { background: var(--surface-2); color: var(--ink); }
.n-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.n-menu .n-label { padding: 8px 10px 4px; display: block; }

/* ---------- buttons & chips ---------- */
.n-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px;
  border-radius: 10px; font-size: 14px; font-weight: 500;
  background: var(--surface-2); color: var(--ink); transition: background .15s, transform .15s;
}
.n-btn:hover { background: var(--surface-3); }
.n-btn.primary { background: var(--accent); color: var(--accent-ink); }
.n-btn.primary:hover { filter: brightness(1.06); }
.n-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px;
  border-radius: 999px; font-size: 13.5px; color: var(--ink-2);
  border: 1px solid var(--line-2); transition: background .15s, color .15s, border-color .15s;
}
.n-chip:hover { background: var(--surface-2); color: var(--ink); border-color: transparent; }
.n-tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}

/* ---------- sections ---------- */
.n-section { padding: 44px 0 0; }
.n-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.n-section-head a { font-size: 13px; color: var(--ink-3); }
.n-section-head a:hover { color: var(--ink); }

/* ---------- list rows: the main building block (replaces tiles) ---------- */
.n-list { border-top: 1px solid var(--line); }
.n-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 4px; border-bottom: 1px solid var(--line);
  transition: background .12s;
}
a.n-row:hover, button.n-row:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.n-row-lead { flex: none; width: 64px; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.n-row-body { flex: 1; min-width: 0; }
.n-row-title { font-size: 15px; font-weight: 450; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-row-sub { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-row-end { flex: none; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.n-row .n-go { flex: none; width: 16px; height: 16px; color: var(--ink-3); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
a.n-row:hover .n-go { opacity: 1; transform: none; }
.n-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.n-dot.high { background: var(--alert); }
.n-dot.med { background: var(--warn); }
.n-dot.ok { background: var(--ok); }
.n-empty { padding: 18px 4px; color: var(--ink-3); font-size: 14px; border-bottom: 1px solid var(--line); }

/* ---------- numbers ---------- */
.n-stats { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.n-stat { padding: 18px 16px 16px 0; display: block; transition: background .12s; }
.n-stat + .n-stat { padding-left: 16px; border-left: 1px solid var(--line); }
a.n-stat:hover .n-stat-v { color: var(--accent); }
.n-stat-v { font-family: var(--display); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; transition: color .15s; }
.n-stat-v small { font-size: 15px; color: var(--ink-3); letter-spacing: 0; }
.n-stat-l { font-size: 13px; color: var(--ink-3); margin-top: 4px; }

/* ---------- command palette ---------- */
.n-cmd-scrim {
  position: fixed; inset: 0; z-index: 100; background: var(--scrim);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: none; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px;
}
.n-cmd-scrim.open { display: flex; animation: n-fade .14s ease; }
.n-cmd {
  width: min(640px, 100%); max-height: 70vh; display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden;
  animation: n-rise .18s cubic-bezier(.2,.8,.2,1);
}
.n-cmd-in { display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.n-cmd-in svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }
.n-cmd-in input { flex: 1; height: 58px; background: none; border: 0; outline: none; font-size: 17px; }
.n-cmd-in input::placeholder { color: var(--ink-3); }
.n-cmd-list { overflow-y: auto; padding: 6px; }
.n-cmd-group { padding: 10px 12px 4px; }
.n-cmd-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: 10px; text-align: left;
}
.n-cmd-item[aria-selected="true"] { background: var(--surface-2); }
.n-cmd-item .t { flex: 1; min-width: 0; }
.n-cmd-item .t b { display: block; font-weight: 450; font-size: 14.5px; }
.n-cmd-item .t span { display: block; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-cmd-item .k { font-size: 12px; color: var(--ink-3); }
.n-cmd-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.n-cmd-none { padding: 28px 18px; color: var(--ink-3); font-size: 14px; }

@keyframes n-fade { from { opacity: 0; } }
@keyframes n-rise { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes n-in { from { opacity: 0; transform: translateY(6px); } }

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

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .n-top-in { height: 62px; gap: 8px; }
  .n-top-mid { justify-content: flex-end; }
  .n-search-btn { width: 36px; padding: 0; justify-content: center; background: none; }
  .n-search-btn span, .n-search-btn .n-kbd { display: none; }
  .n-logo { width: 100px; height: 23px; }
  .n-product { display: none; }
  .n-stats { grid-template-columns: repeat(2, 1fr); }
  .n-stat { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); }
  .n-stat + .n-stat { padding-left: 0; border-left: 0; }
  .n-stat:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--line); }
  .n-cmd-scrim { padding-top: 10px; }
  .n-cmd { max-height: 86vh; }
}