/* FOF Trend Finder — ink navy / gold / ivory design system */

:root {
  --ink: #0E1520;
  --panel: #16202E;
  --panel-2: #1B2735;
  --line: #243246;
  --paper: #F5F2EA;
  --gold: #BC9D63;
  --gold-dim: #8E7648;
  --text: #D9DFE8;
  --bright: #EDF0F5;
  --muted: #7E8CA0;
  --ok: #63A57E;
  --warn: #C98A5E;
  --err: #C46A6A;
  --ink-on-paper: #26251F;
  --muted-on-paper: #6F6A5C;
}
* { box-sizing: border-box }
html, body { margin: 0; height: 100% }
body {
  background: var(--ink); color: var(--text);
  font: 15px/1.55 -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.serif { font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif; font-weight: 400 }
.mono, .chip, .eyebrow, dt { font-family: "SF Mono", Menlo, Consolas, monospace }
.hidden { display: none !important }
a { color: var(--gold); text-decoration: none }
h1, h2, h3 { text-wrap: balance }

.eyebrow { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold) }
.wrap { max-width: 1060px; margin: 0 auto; padding: 30px 28px 90px }

/* ── buttons, inputs ─────────────────────────────────────── */
.btn {
  font: 600 13.5px/1 -apple-system, "Segoe UI", sans-serif;
  padding: 11px 18px; border-radius: 3px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text);
}
.btn:hover { border-color: var(--gold-dim) }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #141312 }
.btn.gold:hover { background: #CBAD72 }
.btn.ghost { background: transparent }
.btn.small { padding: 7px 12px; font-size: 12px }
.btn:disabled { opacity: .45; cursor: default }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
input, select, textarea {
  width: 100%; padding: 10px 12px; border-radius: 3px;
  border: 1px solid var(--line); background: var(--ink); color: var(--bright);
  font: 14px/1.4 -apple-system, "Segoe UI", sans-serif;
}
label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 14px }
label input, label select, label textarea { margin-top: 6px }
.error { color: var(--err); font-size: 13px }

.chip {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 2px; border: 1px solid var(--line);
  color: var(--muted); white-space: nowrap;
}
.chip.ok { color: var(--ok); border-color: rgba(99,165,126,.45) }
.chip.warn { color: var(--warn); border-color: rgba(201,138,94,.45) }
.chip.err { color: var(--err); border-color: rgba(196,106,106,.45) }
.chip.gold { color: var(--gold); border-color: rgba(188,157,99,.5) }

/* ── login ───────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px }
.login-card {
  width: 400px; max-width: 100%; background: var(--panel);
  border: 1px solid var(--line); border-radius: 4px; padding: 42px 40px 34px;
}
.login-card h1 { font-size: 34px; margin: 12px 0 4px; color: var(--bright) }
.login-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 28px }
.login-card .btn { width: 100%; margin-top: 6px }

/* ── topbar ──────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 34px;
  padding: 0 28px; height: 60px;
  border-bottom: 1px solid var(--line); background: var(--panel);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: baseline; gap: 9px }
.brand-mark {
  font-family: Palatino, Georgia, serif; color: var(--gold);
  font-size: 19px; letter-spacing: .04em;
}
.brand-name { font-size: 13px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase }
#nav { display: flex; gap: 4px; flex: 1 }
#nav a {
  color: var(--muted); font-size: 13.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 3px;
}
#nav a:hover { color: var(--text) }
#nav a.active { color: var(--gold); background: rgba(188,157,99,.08) }
.topbar-right { display: flex; align-items: center; gap: 14px }
.whoami { font-size: 12.5px; color: var(--muted) }

/* ── page headers ────────────────────────────────────────── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 14px 0 8px; flex-wrap: wrap }
.page-head h2 { font-family: Palatino, Georgia, serif; font-weight: 400; font-size: 28px; margin: 0; color: var(--bright) }
.page-sub { color: var(--muted); max-width: 68ch; margin: 4px 0 26px; font-size: 14px }

/* ── control bars ────────────────────────────────────────── */
.controls {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 16px 18px; margin-bottom: 24px;
}
.controls label { margin: 0; flex: 0 0 auto }
.controls input, .controls select { width: auto; min-width: 110px }
.controls .grow { flex: 1 1 220px }
.controls .grow input { width: 100% }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; margin-top: 6px }
.seg button {
  border: 0; background: var(--ink); color: var(--muted); cursor: pointer;
  padding: 9px 14px; font: 600 12.5px/1 -apple-system, sans-serif;
  border-right: 1px solid var(--line);
}
.seg button:last-child { border-right: 0 }
.seg button.active { background: rgba(188,157,99,.14); color: var(--gold) }

/* ── trend cards ─────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px }
.trend-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 18px 18px 14px; cursor: pointer; transition: border-color .15s;
}
.trend-card:hover { border-color: var(--gold-dim) }
.trend-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline }
.trend-card h3 { font-size: 15.5px; font-weight: 600; margin: 0; line-height: 1.35; color: var(--bright) }
.score { font-family: "SF Mono", Menlo, monospace; color: var(--gold); font-size: 15px }
.meter { height: 3px; background: var(--line); border-radius: 2px; margin: 12px 0 }
.meter span { display: block; height: 100%; background: var(--gold); border-radius: 2px }
.why { font-size: 13px; color: var(--muted); margin: 0 0 13px; line-height: 1.5 }
.tstats { display: flex; gap: 22px; margin: 0; padding-top: 11px; border-top: 1px solid var(--line) }
.tstats dt { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }
.tstats dd { margin: 2px 0 0; font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums }
.tstats i { font-style: normal; font-size: 11px; color: var(--muted) }

/* ── research pack ───────────────────────────────────────── */
.pack-grid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start }
@media (max-width: 900px) { .pack-grid { grid-template-columns: 1fr } }
.pack { border: 1px solid var(--line); border-radius: 4px; overflow: hidden }
.src { padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--panel) }
.src:last-child { border-bottom: 0 }
.src-head { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; flex-wrap: wrap }
.domain { font-family: "SF Mono", Menlo, monospace; font-size: 11px; color: var(--gold); letter-spacing: .04em }
.src-title { display: block; font-size: 14px; color: var(--text); margin: 3px 0 6px }
a.src-title:hover { color: var(--gold) }
.src-meta { display: flex; gap: 14px; align-items: center; font-size: 11.5px; color: var(--muted) }
.rep-bar { width: 60px; height: 3px; background: var(--line); border-radius: 2px; display: inline-block; vertical-align: middle }
.rep-bar i { display: block; height: 100%; background: var(--muted); border-radius: 2px }
.src-excerpt { font-size: 13px; color: var(--muted); margin: 8px 0 0; line-height: 1.55; max-width: 78ch }

.gen-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 20px; position: sticky; top: 80px }
.gen-panel h3 { margin: 0 0 4px; font-size: 16px; color: var(--bright) }
.gen-panel .hint { font-size: 12px; color: var(--muted); margin: 0 0 18px }
.gen-panel .btn { width: 100% }
.goal-desc { font-size: 11.5px; color: var(--muted); margin: -8px 0 14px; line-height: 1.5 }

/* ── drafts ──────────────────────────────────────────────── */
.draft-row {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 15px 18px; margin-bottom: 10px; cursor: pointer; flex-wrap: wrap;
}
.draft-row:hover { border-color: var(--gold-dim) }
.draft-row h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--bright) }
.draft-row .sub { font-size: 12px; color: var(--muted); margin-top: 3px }
.draft-row .right { display: flex; gap: 10px; align-items: center }

/* article reader */
.reader-top { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap }
.sheet {
  background: var(--paper); color: var(--ink-on-paper); border-radius: 3px;
  padding: 48px 54px 40px; box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
@media (max-width: 720px) { .sheet { padding: 30px 24px } }
.sheet .kicker {
  font-family: "SF Mono", Menlo, monospace; font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold-dim);
  border-top: 2px solid var(--gold); display: inline-block; padding-top: 10px;
}
.sheet h1 { font-family: Palatino, Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.25; margin: 14px 0 22px }
.sheet .body { font-family: Palatino, Georgia, serif; font-size: 16.5px; line-height: 1.75 }
.sheet .body p { margin: 0 0 17px; max-width: 66ch }
.sheet .body h2 { font-family: Palatino, Georgia, serif; font-size: 19px; font-weight: 600; margin: 28px 0 12px; color: #1E2A38 }
.sheet .body ul { max-width: 62ch }
.sheet .body sup.cite { color: var(--gold-dim); font-weight: 600; font-size: .72em }
.sheet textarea {
  width: 100%; min-height: 480px; background: #FFFDF7; color: var(--ink-on-paper);
  border: 1px solid #DCD6C6; font: 15px/1.7 Menlo, monospace; padding: 16px;
}

/* covers */
.covers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 22px }
.cover { position: relative; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: var(--panel); cursor: pointer }
.cover img { width: 100%; display: block }
.cover figcaption { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font-size: 11.5px; color: var(--muted) }
.cover.sel { border-color: var(--gold) }
.cover.sel figcaption b { color: var(--gold); font-family: "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase }

/* ── job drawer ──────────────────────────────────────────── */
.job-drawer {
  position: fixed; right: 22px; bottom: 22px; width: 460px; max-width: calc(100vw - 44px);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px;
  box-shadow: 0 18px 50px rgba(0,0,0,.5); z-index: 50;
}
.job-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--bright) }
.job-drawer pre {
  margin: 0; padding: 12px 16px; max-height: 220px; overflow: auto;
  font: 11.5px/1.6 "SF Mono", Menlo, monospace; color: var(--muted); white-space: pre-wrap;
}

/* misc */
.empty { border: 1px dashed var(--line); border-radius: 4px; padding: 40px; text-align: center; color: var(--muted); font-size: 14px }
.back { font-size: 12.5px; color: var(--muted); display: inline-block; margin-bottom: 14px }
.back:hover { color: var(--gold) }
table.plain { width: 100%; border-collapse: collapse; font-size: 13px }
table.plain td { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--muted) }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }

/* ── settings & membership panels ────────────────────────── */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; align-items: start }
.panel-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 22px 24px;
}
.panel-card h3 { margin: 0 0 14px; font-size: 16px; color: var(--bright) }
.panel-card h4 {
  margin: 0 0 12px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); font-family: "SF Mono", Menlo, monospace; font-weight: 600;
}
.panel-card .hint { font-size: 12px; color: var(--muted); margin: -6px 0 16px; line-height: 1.5 }
.form-note { font-size: 12.5px; margin: 10px 0 0 }
.form-note.ok-note { color: var(--ok) }
.list-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  font-family: "SF Mono", Menlo, monospace; font-weight: 600; margin: 0 0 12px }

/* headshot */
.headshot-row { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 20px }
.headshot-preview {
  width: 96px; height: 96px; flex: 0 0 96px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel-2);
  display: flex; align-items: center; justify-content: center;
}
.headshot-preview img { width: 100%; height: 100%; object-fit: cover; display: block }
.hs-empty { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
.headshot-actions { flex: 1; min-width: 0 }
.hs-label { margin-bottom: 8px }
.hs-label input[type=file] { padding: 8px; font-size: 12px; background: var(--ink) }

/* applications */
.app-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 18px 20px; margin-bottom: 12px;
}
.app-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap }
.app-who { display: flex; align-items: center; gap: 12px }
.app-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line); flex: 0 0 auto }
.app-card h3 { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--bright) }
.app-card .sub { font-size: 12.5px; color: var(--muted); margin-top: 3px }
.app-pitch { font-size: 13.5px; color: var(--text); line-height: 1.6; margin: 14px 0 12px; max-width: 78ch; white-space: pre-wrap }
.app-links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 12px }
.app-links a { color: var(--gold) }
.app-date { color: var(--muted); font-family: "SF Mono", Menlo, monospace; font-size: 11px; margin-left: auto }
.app-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line) }
.app-actions .app-note { flex: 1 1 220px; width: auto }

/* ── editorial review (draft feedback) ───────────────────── */
.review {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 22px 24px; margin-top: 26px;
}
.review h3 { margin: 0 0 4px; font-size: 16px; color: var(--bright) }
.review .hint { font-size: 12px; color: var(--muted); margin: 0 0 16px; line-height: 1.5; max-width: 68ch }
.review .seg { margin-top: 0 }
.rv-flags { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 12px }
.chip.toggle { background: transparent; cursor: pointer; font-family: "SF Mono", Menlo, monospace }
.chip.toggle:hover { border-color: var(--gold-dim) }
.chip.toggle.on { color: var(--warn); border-color: rgba(201,138,94,.55); background: rgba(201,138,94,.10) }
.review textarea { min-height: 68px; resize: vertical }
.rv-status { font-size: 12px; color: var(--muted); margin: 8px 0 0; min-height: 17px }
.rv-others { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line) }
.rv-row { padding: 10px 0; border-bottom: 1px solid var(--line) }
.rv-row:last-child { border-bottom: 0 }
.rv-row > div:first-child { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.rv-row b { font-size: 13.5px; color: var(--bright); font-weight: 600 }
.rv-row .sub { font-size: 11px; color: var(--muted); margin-top: 5px; font-family: "SF Mono", Menlo, monospace }
.rv-note-text { font-size: 13.5px; color: var(--text); line-height: 1.6; margin: 8px 0 0; max-width: 78ch; white-space: pre-wrap }