/* ═══════════════════════════════════════════════════════════════
   chrome.css — nav and footer. Shared by every page.
   Requires tokens.css.
═══════════════════════════════════════════════════════════════ */

/* ═══════════ nav ═══════════ */
.nav {
  height: var(--nav-height);
  position: sticky; top: 0; z-index: 40;
  background: rgba(5, 11, 28, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair);
}
.nav .wrap { display: flex; align-items: center; height: 100%; gap: 34px; }

.nav-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.nav-mark {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: #000; border: 1.5px solid rgba(201, 165, 80, .55);
  display: flex; align-items: center; justify-content: center;
}
.nav-mark svg { width: 16px; height: 19px; stroke: var(--gold); fill: none; stroke-linecap: round; }
.nav-word { display: flex; flex-direction: column; line-height: 1.15; }
.nav-word b { font-size: 14px; font-weight: 700; letter-spacing: .05em; }
.nav-word b span { color: var(--gold); }
.nav-word small {
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dimmer);
}

/* Plain text links, not pill buttons. Buttons implied every destination
   was equally important; an underline marks the current one instead. */
.nav-links { display: flex; align-items: center; gap: 24px; font-size: 14px; }
.nav-links a {
  color: var(--dim); text-decoration: none; padding: 4px 0;
  position: relative; transition: color .15s;
}
.nav-links a:hover { color: var(--paper); }
.nav-links a.is-active { color: var(--paper); }
.nav-links a.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--gold);
}

.nav-end { margin-left: auto; display: flex; align-items: center; gap: 20px; flex-shrink: 0; }

/* Worker health. Written by home.js from /api/heartbeat; empty until
   the first poll returns, so a crawler never sees an outage string. */
/* Both readouts are a dim label plus a bright value. On their own,
   "3 of 3" and "3 today" assume the reader already knows what is being
   counted; the label is what makes them legible cold. */
.nav-workers { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.nav-k { color: var(--dimmer); font-size: 12px; }
.nav-v { color: var(--dim); white-space: nowrap; }
.nav-workers.is-down .pip { background: var(--error); animation: none; }

/* Allowance. Written by home.js from HeraAuth state. */
.nav-allowance {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--dim); text-decoration: none;
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 12px;
  background: none; cursor: pointer; transition: border-color .15s;
}
.nav-allowance:hover { border-color: rgba(201, 165, 80, .4); }
.nav-allowance[aria-expanded="true"] { border-color: var(--gold-edge); background: var(--gold-soft); }
.nav-caret { stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: transform .18s; }
.nav-allowance[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-allowance .nav-v { color: var(--paper); font-weight: 500; }
.nav-allowance.is-none .nav-v { color: var(--error); }
.nav-meter { width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.09); overflow: hidden; flex-shrink: 0; }
.nav-meter > i { display: block; height: 100%; width: 100%; border-radius: 2px; background: var(--live); transition: width .4s ease, background .3s; }
.nav-allowance.is-low  .nav-meter > i { background: var(--gold); }
.nav-allowance.is-none .nav-meter > i { background: var(--error); }


/* ═══════════ AI notice ═══════════ */
/* Shared, so /variant/<id> can use the same block. The svg sizing here
   is load-bearing: an inline SVG with no width/height expands to fill
   its container, and without fill:none it paints solid black. */
.ai-note {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid rgba(232, 185, 106, .32);
  background: rgba(232, 185, 106, .07);
  border-radius: 11px; padding: 13px 15px;
  font-size: 12.5px; line-height: 1.6; color: var(--dim);
}
.ai-note svg {
  width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px;
  stroke: var(--warn); fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ai-note b { color: var(--warn); font-weight: 700; }
.ai-note strong { color: var(--paper); font-weight: 600; }

/* ═══════════ footer ═══════════ */
/* Fixed to the viewport, frosted, mirroring the sticky nav. Kept to
   72px rather than the old 90px, and to one compact row, because this
   height is taken off every page for good. body reserves the space via
   padding-bottom in tokens.css. */
.ftr {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: var(--footer-height);
  display: flex; align-items: center;
  background: rgba(5, 11, 28, .86);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.ftr .wrap { display: flex; align-items: center; gap: 32px; width: 100%; }

/* Condensed to what has to be on every screen. The full-length version
   lives in the hero's .ai-note and on /terms. */
.ftr-note {
  display: flex; gap: 10px; align-items: flex-start;
  flex: 1; min-width: 0;
  font-size: 11.5px; line-height: 1.5; color: var(--dimmer);
}
.ftr-note svg {
  width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px;
  stroke: var(--warn); fill: none; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ftr-note b { color: var(--warn); font-weight: 700; }
.ftr-note strong { color: var(--dim); font-weight: 600; }

/* Two stacked rows rather than one long line, so the note keeps most of
   the width — the disclaimer is the part that has to stay readable. */
.ftr-meta { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; align-items: flex-end; }
.ftr-links { display: flex; align-items: center; gap: 16px; font-size: 12px; }
.ftr-links a { color: var(--dim); text-decoration: none; white-space: nowrap; transition: color .15s; }
.ftr-links a:hover { color: var(--gold); }
.ftr-links a.mail { color: var(--gold); }
.ftr-credit { display: flex; align-items: center; gap: 14px; font-size: 11px; color: var(--dimmer); white-space: nowrap; }
.ftr-credit a { color: var(--dim); text-decoration: none; }
.ftr-credit a:hover { color: var(--gold); }

@media (max-width: 900px) {
  /* Two lines of note plus links will not fit; drop to static so the
     footer stops competing for a phone-sized viewport. */
  :root { --footer-height: 0px; }
  body { padding-bottom: 0; }
  .ftr { position: static; height: auto; padding: 18px 0 22px; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ftr .wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ftr-meta { align-items: flex-start; gap: 9px; }
  .ftr-links { flex-wrap: wrap; gap: 10px 16px; }
}

@media (max-width: 980px) { .nav-links { display: none; } }
@media (max-width: 860px) { .nav-k { display: none; } }
@media (max-width: 640px) { .nav-workers { display: none; } }


/* ═══════════ account dropdown ═══════════ */
/* The menu's anchor. Without this, .nav-menu resolves its absolute
   position against .nav — which is position:sticky and spans the whole
   viewport — so right:0 pins it to the screen edge instead of the pill. */
.nav-account { position: relative; }

.nav-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 264px; padding: 6px;
  background: var(--slate); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 18px 44px -12px rgba(0,0,0,.7);
}
@media (prefers-reduced-motion: no-preference) {
  .nav-menu { animation: nm-in .14s ease-out; }
  @keyframes nm-in { from { opacity: 0; transform: translateY(-4px); } }
}

.nm-id { padding: 10px 10px 11px; border-bottom: 1px solid var(--hair); }
.nm-who { display: block; font-size: 13px; color: var(--paper); word-break: break-all; }
.nm-kind { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10.5px; color: var(--dimmer); }
.nm-kind:empty { display: none; }

.nm-quota { padding: 11px 10px 12px; border-bottom: 1px solid var(--hair); }
.nm-quota[hidden] { display: none; }
.nm-row { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 9px; }
.nm-row + .nm-row { margin-top: 8px; }
.nm-k { font-size: 12px; color: var(--dimmer); }
.nm-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.nm-track > i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--live); transition: width .4s ease; }
.nm-v { font-family: var(--mono); font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.nm-row.is-low  .nm-track > i { background: var(--gold); }
.nm-row.is-none .nm-track > i { background: var(--error); }
.nm-row.is-none .nm-v { color: var(--error); }
.nm-reset { margin-top: 9px; font-family: var(--mono); font-size: 10.5px; color: var(--dimmer); }
.nm-reset:empty { display: none; }

.nm-items { padding: 5px 0 1px; }
.nm-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 10px; border: none; border-radius: 8px;
  background: none; color: var(--dim); font-size: 13px; text-align: left;
  text-decoration: none; cursor: pointer; transition: background .12s, color .12s;
}
.nm-item:hover, .nm-item:focus-visible { background: rgba(255,255,255,.045); color: var(--paper); }
.nm-item svg { width: 14px; height: 14px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.nm-item.is-primary { color: var(--gold); }
.nm-item.is-danger:hover { color: var(--error); }

@media (max-width: 640px) {
  .nav-menu { width: min(264px, calc(100vw - 32px)); }
}

/* ═══════════════════════════════════════════════════════════════
   ACCOUNT MODAL
   Styles for auth_modal.html. They live here, not in the partial,
   because the modal is site-wide chrome like the nav and footer.

   The previous version declared its own colours with hardcoded
   fallbacks — var(--line-2, #1e2830), var(--t1, #e8eef2) and so on.
   Those variables only exist on /variant, so on every other page the
   fallbacks fired and the modal rendered grey-green against a navy
   site. Everything below reads tokens directly; nothing falls back.

   Class names are unchanged: auth.js drives .am-overlay.open,
   .am-view.on, .am-msg.err / .am-msg.ok and the field ids.
═══════════════════════════════════════════════════════════════ */

.am-overlay {
  position: fixed; inset: 0; z-index: 900; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(5, 11, 28, .75);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.am-overlay.open { display: flex; }

.am-panel {
  position: relative; width: 100%; max-width: 400px;
  padding: 26px 24px 22px;
  background: var(--slate); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
@media (prefers-reduced-motion: no-preference) {
  .am-overlay.open .am-panel { animation: am-in .16s ease-out; }
  @keyframes am-in { from { opacity: 0; transform: translateY(-6px); } }
}

.am-close {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; color: var(--dimmer);
  font-size: 18px; line-height: 1; transition: color .15s, border-color .15s, background .15s;
}
.am-close:hover { color: var(--paper); border-color: var(--line); background: rgba(255,255,255,.04); }

.am-title { margin: 0 0 7px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--paper); }
.am-sub { margin: 0 0 20px; font-size: 13.5px; line-height: 1.6; color: var(--dim); }
.am-sub b { color: var(--paper); font-weight: 600; }
.am-sub:empty { display: none; margin: 0; }

/* ── fields: same metrics as the /signin and /signup pages ── */
.am-field { margin-bottom: 14px; }
.am-field label { display: block; margin-bottom: 6px; font-size: 12.5px; color: var(--dim); }
.am-field label .opt { color: var(--dimmer); }
.am-field input {
  width: 100%; height: 42px; padding: 0 13px;
  background: var(--well); border: 1px solid var(--line); border-radius: 8px;
  color: var(--paper); font-family: var(--sans); font-size: 14px;
  transition: border-color .18s, box-shadow .18s;
}
.am-field input::placeholder { color: var(--dimmer); }
.am-field input:focus {
  outline: none; border-color: rgba(0, 229, 153, .5);
  box-shadow: 0 0 0 3px rgba(0, 229, 153, .08);
}
.am-row { display: flex; gap: 11px; }
.am-row .am-field { flex: 1; min-width: 0; }
.am-hint { margin-top: 6px; font-size: 11.5px; color: var(--dimmer); }
.am-code-input { font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; }

.am-btn {
  width: 100%; height: 44px; border-radius: 9px; cursor: pointer;
  background: rgba(0, 229, 153, .12); border: 1px solid rgba(0, 229, 153, .45);
  color: var(--live); font-family: var(--sans); font-size: 14.5px; font-weight: 700;
  transition: background .15s, border-color .15s, opacity .15s;
}
.am-btn:hover:not(:disabled) { background: rgba(0, 229, 153, .2); border-color: rgba(0, 229, 153, .65); }
.am-btn:disabled { opacity: .55; cursor: default; }

/* Secondary actions: stacked, left-aligned, no underline. Underlined
   green links at 12px were the loudest thing in the panel and competed
   with the button above them. */
.am-alt {
  display: flex; flex-direction: column; gap: 9px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair);
  font-size: 13px; line-height: 1.5; color: var(--dim); text-align: left;
}
.am-alt button, .am-alt a {
  width: fit-content; padding: 0; background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; color: var(--dim);
  text-decoration: none; transition: color .15s;
}
.am-alt button:hover, .am-alt a:hover { color: var(--gold); }
.am-alt .is-quiet, .am-alt .is-quiet button, .am-alt .is-quiet a { color: var(--dimmer); font-size: 12.5px; }
.am-alt .is-quiet a { color: var(--gold); }

.am-msg { display: none; margin-bottom: 16px; padding: 11px 13px; border-radius: 9px; font-size: 13px; line-height: 1.55; }
.am-msg.err { display: block; color: var(--error); background: rgba(224,112,112,.07); border: 1px solid rgba(224,112,112,.4); }
.am-msg.ok  { display: block; color: var(--live);  background: rgba(0,229,153,.06);  border: 1px solid rgba(0,229,153,.35); }

.am-view { display: none; }
.am-view.on { display: block; }

/* ── account view ── */
.am-quota { display: flex; gap: 11px; margin: 0 0 18px; }
.am-quota > div { flex: 1; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 10px; background: var(--well); }
.am-quota .n { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--paper); line-height: 1; }
.am-quota .l { margin-top: 5px; font-size: 11.5px; color: var(--dimmer); }

.am-link {
  display: block; width: 100%; margin-bottom: 10px; padding: 12px;
  border: 1px solid var(--line); border-radius: 9px; background: none;
  color: var(--paper); font-family: var(--sans); font-size: 13.5px; font-weight: 600;
  text-align: center; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.am-link:hover { border-color: var(--gold-edge); color: var(--gold); background: var(--gold-soft); }

.am-btn.is-quiet {
  background: none; border-color: var(--line); color: var(--dim); font-weight: 500;
}
.am-btn.is-quiet:hover:not(:disabled) { background: rgba(255,255,255,.04); color: var(--paper); border-color: var(--line); }