/* Quote Connect — tokens, base, core components
   Brand: navy #002251 · orange #FE4805 · blue #0186DA
   Art direction: "The Quote Engine" — industrial-editorial + mono data layer. */

:root {
  /* cool, clean surfaces */
  --paper: #f4f6fa;
  --surface: #ffffff;
  --surface-2: #eaeff7;
  --ink: #14233f;       /* navy text */
  --ink-2: #51607a;
  --ink-3: #8493ab;
  --line: #dfe5ef;
  --line-strong: #c7d1e0;

  --navy: #002251;      /* brand deep navy */
  --navy-2: #020f2d;    /* near-black navy */

  /* accent — orange (brand), swappable via .pal-* */
  --accent: #fe4805;
  --accent-strong: #e23d00;
  --accent-soft: #ffece4;
  --accent-line: #ffc6b1;
  --accent-gold: #ff8d01;
  --on-accent: #ffffff;

  --blue: #0186da;
  --blue-bright: #01b0fb;
  --blue-deep: #00498f;
  --blue-soft: #e4f2fc;
  --blue-line: #b6ddf6;

  --f-display: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --f-body: "Archivo", system-ui, sans-serif;
  --f-mono: "Space Mono", ui-monospace, monospace;
  --hl-weight: 800;

  --r: 5px;
  --r-lg: 10px;
  --shadow: 0 1px 2px rgba(2,15,45,.06), 0 10px 26px -14px rgba(2,15,45,.22);
  --shadow-lg: 0 2px 5px rgba(2,15,45,.08), 0 28px 56px -22px rgba(2,15,45,.32);

  --card-pad: 20px;
  --grid-gap: 14px;
}

/* palette tweak */
.pal-blue {
  --accent: #0186da; --accent-strong: #006fc0; --accent-soft: #e4f2fc;
  --accent-line: #b6ddf6; --accent-gold: #01b0fb; --on-accent: #ffffff;
}
.pal-navy {
  --accent: #14336b; --accent-strong: #002251; --accent-soft: #e7ecf6;
  --accent-line: #b9c6df; --accent-gold: #0186da; --on-accent: #ffffff;
}

/* density */
.density-compact { --card-pad: 14px; --grid-gap: 10px; }

/* headline family tweak */
.hl-expanded { --f-display: "Archivo Expanded", "Archivo", sans-serif; }
.hl-condensed { --f-display: "Archivo Narrow", "Archivo", sans-serif; }
.hl-slab { --f-display: "Zilla Slab", Georgia, serif; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
#root { min-height: 100vh; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }
input, select, textarea { font-family: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }

.mono { font-family: var(--f-mono); font-feature-settings: "tnum" 1; letter-spacing: -0.01em; }
.display { font-family: var(--f-display); font-weight: var(--hl-weight); letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance; }
.eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.accent { color: var(--accent-strong); }

/* ---------- buttons ---------- */
.qc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--r);
  font-weight: 700; font-size: 14px; white-space: nowrap;
  transition: transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  letter-spacing: -0.01em;
}
.qc-btn:active { transform: translateY(1px); }
.qc-btn.full { width: 100%; }
.qc-btn.s-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.qc-btn.s-md { height: 42px; padding: 0 18px; }
.qc-btn.s-lg { height: 52px; padding: 0 26px; font-size: 15px; }
.qc-btn.v-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 1px 0 rgba(2,15,45,.04), 0 6px 18px -8px var(--accent); }
.qc-btn.v-primary:hover { background: var(--accent-strong); }
.qc-btn.v-dark { background: var(--navy); color: #fff; }
.qc-btn.v-dark:hover { background: var(--navy-2); }
.qc-btn.v-outline { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.qc-btn.v-outline:hover { border-color: var(--navy); }
.qc-btn.v-ghost { background: transparent; color: var(--ink-2); }
.qc-btn.v-ghost:hover { background: var(--surface-2); color: var(--ink); }
.qc-btn:disabled { opacity: .4; cursor: not-allowed; }
.qc-btn .qc-ic { margin: 0 -2px; }

/* ---------- tags ---------- */
.qc-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 3px; text-transform: uppercase; font-weight: 700; }
.qc-tag.t-line { border: 1px solid var(--line-strong); color: var(--ink-2); }
.qc-tag.t-accent { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent-line); }
.qc-tag.t-solid { background: var(--navy); color: #fff; }

/* ---------- stars / verified ---------- */
.qc-stars { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink); }
.qc-stars b { font-weight: 700; }
.qc-stars .star-fill { color: var(--accent-gold); }
.qc-stars .star-fill svg { fill: currentColor; }
.qc-stars-n { color: var(--ink-3); font-size: 12px; }

.qc-verified { display: inline-flex; align-items: center; gap: 5px; color: var(--blue-deep); font-weight: 700; }
.qc-verified .mono { letter-spacing: 0.04em; text-transform: uppercase; }
.qc-verified.s-sm { font-size: 11px; }
.qc-verified.s-md { font-size: 12.5px; }

/* ---------- avatar / category visual ---------- */
.qc-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r); font-weight: 700; border: 1px solid; flex: none; }
.qc-catvis { display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.qc-catvis.glyph { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent-line); }
.qc-catvis.mono-tile { background: var(--navy); color: #fff; font-weight: 700; letter-spacing: 0.02em; }
.qc-catvis.photo { border: 1px solid var(--line); }
.qc-catvis.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- status pills ---------- */
.qc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 100px; border: 1px solid; letter-spacing: -0.005em; white-space: nowrap; }
.qc-status.tone-wait { color: var(--ink-2); background: var(--surface-2); border-color: var(--line-strong); }
.qc-status.tone-live { color: var(--accent-strong); background: var(--accent-soft); border-color: var(--accent-line); }
.qc-status.tone-good { color: #fff; background: var(--blue); border-color: var(--blue); }
.qc-status.tone-info { color: var(--blue-deep); background: var(--blue-soft); border-color: var(--blue-line); }
.qc-status.tone-dead { color: var(--ink-3); background: var(--surface-2); border-color: var(--line); }

/* ---------- spec cell ---------- */
.qc-spec { display: flex; flex-direction: column; gap: 2px; }
.qc-spec-k { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.qc-spec-v { font-size: 14px; font-weight: 600; color: var(--ink); }
.qc-spec-v.accent { color: var(--accent-strong); }

/* ---------- logo ---------- */
.qc-logo { display: inline-flex; align-items: center; gap: 10px; background: none; border: none; padding: 0; cursor: pointer; }
.qc-logo img { height: 30px; width: auto; }
.qc-foot .qc-logo img { height: 38px; }

/* ---------- shell / nav ---------- */
.qc-app { display: flex; flex-direction: column; min-height: 100vh; }
.qc-nav { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 62px; padding: 0 22px; background: rgba(255,255,255,.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.qc-nav-links { display: flex; align-items: center; gap: 2px; }
.qc-nav-link { background: none; border: none; padding: 8px 13px; border-radius: var(--r); font-size: 13.5px; font-weight: 600; color: var(--ink-2); letter-spacing: -0.01em; white-space: nowrap; }
.qc-nav-link:hover { background: var(--surface-2); color: var(--ink); }
.qc-nav-link.active { background: var(--navy); color: #fff; }
.qc-nav-right { display: flex; align-items: center; gap: 10px; }
.qc-nav-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--ink); }

.qc-main { flex: 1; }
.qc-wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.qc-wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 22px; }

/* mobile drawer */
.qc-drawer { position: fixed; inset: 0; z-index: 60; display: none; }
.qc-drawer.open { display: block; }
.qc-drawer-scrim { position: absolute; inset: 0; background: rgba(2,15,45,.5); }
.qc-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 300px; max-width: 84vw; background: var(--surface); padding: 20px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-lg); overflow-y: auto; }
.qc-drawer-panel .qc-nav-link { text-align: left; font-size: 17px; font-weight: 600; color: var(--ink); padding: 15px 16px; border-radius: var(--r); }
.qc-drawer-panel .qc-nav-link:hover { background: var(--surface-2); color: var(--ink); }
.qc-drawer-panel .qc-nav-link.active { background: var(--navy); color: #fff; }

/* footer */
.qc-foot { border-top: 1px solid var(--line); background: var(--surface); margin-top: 72px; }
.qc-foot-in { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; padding: 32px 0; }
.qc-foot-tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.qc-foot small { color: var(--ink-3); font-size: 12px; }
.qc-foot-link { color: var(--ink-2); font-size: 13.5px; font-weight: 600; text-decoration: none; padding: 4px 0; letter-spacing: -0.01em; border-bottom: 1px solid var(--accent); }
.qc-foot-link:hover { color: var(--accent-strong); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.rule-dot { height: 1px; border: 0; background-image: linear-gradient(90deg, var(--line-strong) 35%, transparent 0); background-size: 7px 1px; background-repeat: repeat-x; }

@media (max-width: 860px) {
  .qc-nav-links, .qc-nav-right .desktop-only { display: none; }
  .qc-nav-burger { display: inline-flex; }
}