/* Catalog Reckoning — web POC. Black canvas, white wordmark, gold accent. */

@font-face { font-family: "Outfit"; font-weight: 400; src: url("assets/fonts/Outfit-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Outfit"; font-weight: 700; src: url("assets/fonts/Outfit-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "DM Mono"; font-weight: 400; src: url("assets/fonts/DMMono-Regular.ttf") format("truetype"); font-display: swap; }

:root {
  --bg: #0a0a0a;
  --bg-elev: #131313;
  --bg-elev2: #1a1a1a;
  --text: #f5f5f0;
  --text2: #9a9a93;
  --text3: #616161;
  --accent: #d4a64c;
  --accent-brt: #e8c547;
  --hairline: #2a2a28;
  --red: #e05252;
  --green: #4ade80;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Outfit", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: "DM Mono", ui-monospace, Menlo, monospace; }

.wrap { max-width: 880px; margin: 0 auto; padding: 56px 24px 80px; }

/* Header */
.brand { display: flex; align-items: center; margin-bottom: 10px; }
.brand img { height: 48px; width: auto; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; font-weight: 700; }
h1 { font-size: 34px; letter-spacing: -0.02em; margin: 18px 0 8px; color: #fff; }
.lede { color: var(--text2); font-size: 16px; max-width: 60ch; margin: 0 0 8px; }
.rule { height: 2px; width: 56px; background: var(--accent); margin: 22px 0 28px; border: 0; }

/* Upload */
.uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.uploads.single { grid-template-columns: 1fr; }
@media (max-width: 640px) { .uploads { grid-template-columns: 1fr; } }
.drop {
  border: 1.5px dashed #3a3a36; border-radius: 12px; background: var(--bg-elev);
  padding: 22px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s;
}
.drop:hover, .drop.over { border-color: var(--accent); background: var(--bg-elev2); }
.drop .label { font-weight: 700; color: #fff; }
.drop .hint { color: var(--text3); font-size: 13px; margin-top: 4px; }
.drop .file { color: var(--accent-brt); font-size: 13px; margin-top: 10px; min-height: 18px; word-break: break-all; }
.drop .opt { color: var(--text3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }

.controls { display: flex; align-items: center; gap: 16px; margin: 22px 0 6px; flex-wrap: wrap; }
button.primary {
  background: var(--accent); color: #1a1a1a; border: 0; border-radius: 10px;
  font-family: inherit; font-weight: 700; font-size: 15px; padding: 12px 22px; cursor: pointer;
}
button.primary:hover { background: var(--accent-brt); }
button.primary:disabled { opacity: .4; cursor: not-allowed; }
a.ghost, button.ghost {
  background: none; border: 0; color: var(--text2); font-family: inherit; font-size: 14px;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
a.ghost:hover, button.ghost:hover { color: var(--text); }

/* Front-door wizard / gate */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .choices { grid-template-columns: 1fr; } }
.choice { text-align: left; background: var(--bg-elev); border: 1px solid var(--hairline); border-radius: 12px;
  padding: 22px; cursor: pointer; font-family: inherit; color: var(--text); transition: border-color .15s, background .15s; }
.choice:hover { border-color: var(--accent); background: var(--bg-elev2); }
.choice .ct { font-weight: 700; font-size: 18px; color: #fff; }
.choice .cd { color: var(--text2); font-size: 13.5px; margin: 8px 0 14px; line-height: 1.45; }
.choice .cb { color: var(--accent-brt); font-weight: 700; font-size: 14px; }
.cta-btn { display: inline-block; background: var(--accent); color: #1a1a1a; text-decoration: none; font-weight: 700;
  padding: 13px 24px; border-radius: 10px; font-size: 15px; margin-right: 14px; }
.cta-btn:hover { background: var(--accent-brt); }

.privacy { display: flex; align-items: center; gap: 8px; color: var(--text2); font-size: 13px; margin-top: 14px; }
.privacy .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }

.err { color: var(--red); font-size: 14px; margin-top: 14px; min-height: 20px; }

/* Results */
.results { margin-top: 40px; display: none; }
.results.show { display: block; }
.kpis { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 22px; }
.kpi { background: var(--bg-elev); border: 1px solid var(--hairline); border-top: 2px solid var(--accent);
  border-radius: 10px; padding: 14px 16px; min-width: 150px; flex: 1; }
.kpi .v { font-size: 24px; font-weight: 800; color: #fff; }
.kpi .l { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.kpi.gold .v { color: var(--accent-brt); font-size: 20px; }

.downloads { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 20px; }
.downloads button {
  background: var(--bg-elev2); color: var(--text); border: 1px solid var(--hairline);
  border-radius: 8px; font-family: inherit; font-size: 13px; padding: 9px 14px; cursor: pointer;
}
.downloads button:hover { border-color: var(--accent); color: #fff; }
.downloads button.pdf { border-color: var(--accent); color: var(--accent-brt); }

.report-frame {
  width: 100%; height: 720px; border: 1px solid var(--hairline); border-radius: 12px;
  background: #fff; box-shadow: 0 8px 40px rgba(0,0,0,.5);
}

footer { margin-top: 56px; color: var(--text3); font-size: 12px; border-top: 1px solid var(--hairline); padding-top: 16px; }