/* ==========================================================================
   Pax HQ — the one shared foundation.
   Tokens, base, and the component vocabulary every HQ page consumes:
   index.html, my.html, onboard.html, pipeline.html, math.html, login.html.
   The design-system cards re-embed this file plus index.html's page styles;
   after editing here, re-run the design-system re-embed.
   ========================================================================== */

:root {
  /* Pax brand, dark expression. Warm ink neutrals: every step keeps
     R >= G >= B so nothing on a calibrated screen reads navy. */
  --bg: #0B0A09;
  --side: #080807;
  --card-bg: #14120F;
  --raise: #1C1916;
  --well: #0E0D0B;
  --paper-dim: #292521;
  --surface: var(--card-bg);

  --text: #EDEAE1;
  --text-soft: #A9A49A;
  --text-mute: #767066;

  --line: rgba(235, 232, 224, .085);
  --line-soft: rgba(235, 232, 224, .05);
  --hover: rgba(235, 232, 224, .045);

  /* brass: the only metal in the building */
  --brass: #C9AC7E;
  --brass-deep: #A8895A;
  --brass-bright: #E2CBA0;
  --brasstext: linear-gradient(105deg, var(--brass-deep), var(--brass) 45%, var(--brass-bright) 70%, var(--brass-deep));
  --btn-grad: linear-gradient(180deg, #DBC08F, var(--brass));
  --ink-on-brass: #14100A;

  /* states, kept in the family: sage, amber, terracotta */
  --green: #7FB48C;
  --amber: #CD9B5F;
  --red: #D3806F;

  /* aliases kept for older inline styles */
  --gold: var(--brass-deep);
  --gold-bright: var(--brass);
  --gold-deep: var(--brass-deep);
  --gold-dim: rgba(201, 172, 126, .6);
  --cream: var(--text);
  --card: var(--card-bg);
  --card-edge: var(--line);
  --muted: var(--text-soft);
  --faint: var(--text-mute);
  --dim: var(--paper-dim);

  --display: "Fraunces", Georgia, serif;
  --serif: "EB Garamond", Georgia, serif;
  --sans: "Manrope", "Avenir Next", "Helvetica Neue", sans-serif;

  --lift: 0 1px 2px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .03);
  --lift-hover: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 16px -8px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
  --ease: cubic-bezier(.25, .6, .3, 1);
}

/* ---------- base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scrollbar-color: rgba(235, 232, 224, .18) transparent; color-scheme: dark; }
body {
  font-family: var(--sans);
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
::selection { background: rgba(201, 172, 126, .4); color: #FFF9EE; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(235, 232, 224, .14); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(235, 232, 224, .26); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [data-ro]:focus-visible, [data-mw]:focus-visible {
  outline: 2px solid rgba(201, 172, 126, .6);
  outline-offset: 1px;
  border-radius: 4px;
}

/* printed-paper grain: barely there, but the page stops feeling like glass */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .04; mix-blend-mode: overlay;
}

/* the gilded thread across the top of every standalone page */
.gild {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10;
  background: linear-gradient(90deg, var(--brass) 0%, var(--brass) 35%, var(--brass-bright) 50%, var(--brass) 65%, var(--brass) 100%);
  background-size: 220% 100%; animation: gild 18s linear infinite;
}
@keyframes gild { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- panel: the room everything lives in ---------- */
.panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--lift);
  padding: .95rem 1.1rem .9rem;
  margin-bottom: .8rem;
}
.panel h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.08rem;
  color: var(--text);
  margin-bottom: .6rem;
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: .6rem; row-gap: .05rem;
  min-width: 0;
}
.panel h2 .cnt {
  font-family: var(--sans);
  color: var(--text-mute); font-weight: 600;
  letter-spacing: 0; text-transform: none;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.panel h2 .line { flex: 1 1 2rem; height: 1px; background: var(--line-soft); align-self: center; }

/* ---------- tiles: the numbers that matter ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .55rem; margin-bottom: .8rem; }
.tile {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .65rem .75rem .55rem;
  cursor: pointer;
  box-shadow: var(--lift);
  transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.tile:hover { border-color: rgba(235, 232, 224, .30); box-shadow: var(--lift-hover); transform: translateY(-1px); }
.tile .n { font-family: var(--display); font-weight: 500; font-size: 1.65rem; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.tile .l { font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-mute); margin-top: .2rem; }
.tile.warn .n { color: var(--amber); }

/* ---------- chips ---------- */
.chip {
  font-size: .64rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-soft);
  border: 1px solid var(--line);
  background: var(--well);
  border-radius: 4px;
  padding: .1rem .38rem;
}
.chip.resend { color: var(--red); border-color: rgba(211, 128, 111, .45); background: rgba(211, 128, 111, .07); }

/* ---------- buttons: one vocabulary ----------
   Primary is ALWAYS the brass gradient with ink text. Never white on brass,
   never blue anywhere. */
.btn,
button.submit, .callbtn, .idea-add button, .cadd button, #chatForm button, .plus {
  font-family: var(--sans);
  font-weight: 800;
  color: var(--ink-on-brass);
  background: var(--btn-grad);
  border: none;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), opacity .15s, filter .15s var(--ease);
}
.btn:hover, button.submit:hover, .callbtn:hover, .idea-add button:hover,
.cadd button:hover, #chatForm button:hover, .plus:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
.btn:disabled, button.submit:disabled, .idea-add button:disabled, .cadd button:disabled { opacity: .55; cursor: wait; transform: none; }

.btn-quiet {
  font-family: var(--sans); font-weight: 700;
  color: var(--text);
  background: rgba(235, 232, 224, .07);
  border: 1px solid rgba(235, 232, 224, .24);
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn-quiet:hover { border-color: rgba(235, 232, 224, .4); }

/* ---------- form fields: one look everywhere ---------- */
.field input, .field textarea, .field select,
.cadd input, .cadd select,
.prow input, .prow select,
.grid2 input, .grid2 select,
.idea-add input, #chatInput {
  width: 100%;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--text);
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: .6rem .75rem;
  outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field textarea:focus, .field select:focus,
.cadd input:focus, .cadd select:focus,
.prow input:focus, .prow select:focus,
.grid2 input:focus, .grid2 select:focus,
.idea-add input:focus, #chatInput:focus {
  border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(235, 232, 224, .07);
}
.field input::placeholder, .field textarea::placeholder,
.cadd input::placeholder, .prow input::placeholder,
.grid2 input::placeholder, .idea-add input::placeholder,
#chatInput::placeholder { color: var(--text-mute); }
.field label {
  display: block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: .4rem;
}
.field label .opt { color: var(--text-mute); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* ---------- states ---------- */
.empty { color: var(--text-mute); font-size: .84rem; text-align: center; padding: 1.1rem 0 1.2rem; }
.empty::before { content: '◈'; display: block; font-size: 1rem; color: var(--text-mute); opacity: .55; margin-bottom: .3rem; }

.skel { display: grid; gap: .5rem; padding: .2rem 0 .4rem; }
.skel-row {
  height: 42px; border-radius: 8px; border: 1px solid var(--line-soft);
  background: linear-gradient(100deg, var(--surface) 40%, rgba(235, 232, 224, .06) 50%, var(--surface) 60%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite;
}
.skel-row.sm { height: 26px; }
.skel-row:nth-child(2) { width: 92%; }
.skel-row:nth-child(3) { width: 84%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* a designed dead-end: something didn't load, and there is a way out */
.err-card {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--lift);
  padding: 2rem 1.4rem 1.8rem;
  max-width: 420px;
  margin: 3rem auto 0;
}
.err-card .mark { width: 40px; height: 40px; margin: 0 auto .8rem; display: block; opacity: .85; }
.err-card h2 { font-family: var(--display); font-weight: 500; font-size: 1.25rem; margin-bottom: .35rem; }
.err-card p { color: var(--text-soft); font-size: .86rem; max-width: 34ch; margin: 0 auto; }
.err-card a.btn-quiet {
  display: inline-block; text-decoration: none;
  border-radius: 9px; padding: .6rem 1.1rem; margin-top: 1rem;
  font-size: .78rem;
}

/* ---------- the sign-off ---------- */
.foot {
  text-align: center;
  margin-top: 2.6rem;
  font-family: var(--serif);
  font-style: italic;
  color: var(--brass);
  font-size: .95rem;
}

/* ---------- comfortable thumbs: 44px targets on touch screens ---------- */
@media (pointer: coarse) {
  .ro-act a, .run-btn, .rec-call, .zap, .del, .rs-chip, .showmore, .addrow {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .ro-act { gap: .45rem; }
}

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