/**
 * Frankey app - report theme override layer.
 * Loaded AFTER app.css. Aligns the app with the marketing site's
 * "annotated inspection report" identity: serif display, mono engine text,
 * flat surfaces, square corners, one flat accent. No gradients, no glow.
 */

:root {
 --bg: #0e0d0b;
 --panel: #14120f;
 --panel-2: #191713;
 --text: #efece4;
 --muted: #a9a498;
 --muted-2: #6f6b61;
 --line: rgba(239, 236, 228, 0.16);
 --accent: #ff4d2e;
 --accent-2: #ffcf5c;
 --shadow: none;
 --radius: 0px;
 --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
 --fk-serif: "Fraunces", Georgia, "Times New Roman", serif;
 --fk-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

/* Square document corners everywhere except intentional circles */
*:not(.pipeline-dot):not(.pipeline-pulse):not(.spin) {
  border-radius: 0 !important;
}

body {
  background: var(--bg);
}

::selection { background: var(--accent); color: #14120f; }

/* ---------- typography ---------- */

h1, h2, h3,
.home-hero h1,
.empty-state-title,
.auth-card h1,
.auth-card h2 {
  font-family: var(--fk-serif);
  font-weight: 560;
  letter-spacing: -0.01em;
}

.label,
.crumb,
.chip,
.chip-btn,
.tag,
.home-hero .tag,
.pill,
.status,
.pipeline-label,
.quota-line-side,
.side-help,
.mono-label {
  font-family: var(--fk-mono);
}

.label {
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--muted-2);
}

/* ---------- buttons ---------- */

.btn {
  font-family: var(--fk-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.btn-primary {
  background: var(--accent);
  color: #14120f;
  box-shadow: none;
}
.btn-primary:hover {
  background: #ff6647;
  transform: none;
}
.btn-secondary {
  background: transparent;
  border-color: var(--line);
}
.btn-secondary:hover { border-color: var(--muted-2); }

.chip-btn {
  font-size: 0.78rem;
  font-weight: 500;
}
.chip-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #14120f;
}

/* ---------- sidebar / topbar ---------- */

.side {
  background: var(--panel);
  border-right: 1px solid var(--line);
}
.side-brand .name {
  font-family: var(--fk-serif);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  text-transform: none;
}
.side-brand .by {
  font-family: var(--fk-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
}
.nav-btn {
  font-family: var(--fk-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--fk-rule, rgba(239, 236, 228, 0.09));
}
.nav-btn.active {
  background: transparent;
  border-color: transparent;
  border-left: 3px solid var(--accent);
  color: var(--text);
}
.topbar {
  background: rgba(14, 13, 11, 0.96);
}

/* ---------- flat surfaces (kill gradients + glow) ---------- */

.card,
.report-complete,
.lineage-group,
.auth-card,
.pipeline-card {
  background: var(--panel);
  box-shadow: none;
}
.auth-gate {
  background: var(--bg);
}
.report-sticky-summary {
  background: rgba(20, 18, 15, 0.97);
  box-shadow: none;
}
.paid-lock-pop {
  background: var(--panel-2);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
}
.top-issue {
  background: rgba(255, 77, 46, 0.07);
  border-color: rgba(255, 77, 46, 0.4);
}

.download-copy-card,
.beta-feedback-card,
.intel-card {
  background: var(--panel);
}
.intel-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
}
.download-copy-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--good);
}
.beta-feedback-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-2);
}

/* ---------- inputs ---------- */

textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input:not([type]) {
  background: #0b0a08;
  border-color: var(--line);
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
  box-shadow: 0 0 0 1000px #0b0a08 inset;
}
.sys-dropzone.is-dragover textarea {
  background: var(--panel-2);
  box-shadow: none;
}

/* ---------- pipeline ---------- */

.pipeline-fill {
  background: var(--accent);
  box-shadow: none;
}
.pipeline-node.is-active .pipeline-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #14120f;
  box-shadow: none;
  animation: none;
}
.score-dim-bar span {
  background: var(--accent);
}

/* ---------- home hero tag as document label ---------- */

.home-hero .tag {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--muted-2);
}

#complete-optimize-cta.optimize-cta-locked {
  background: var(--panel);
  border-color: var(--line);
}