/* MTV Plan Intake — submitter interface (E7.1).
 *
 * Plain and functional on purpose. This is an internal tool for department
 * staff filing a procurement plan; it carries no organisation's branding
 * because it serves a group of them, and inventing a corporate identity for
 * a shared intake surface would misrepresent whose system it is.
 *
 * No framework and no build step. The deploy is nginx serving this directory
 * (Dockerfile.nginx COPYs nginx/public/) and proxying /api to FastAPI on the
 * same origin — see docs/intake.md for why a Node build stage was not added.
 */

:root {
  color-scheme: light dark;
  --bg: #f7f7f5;
  --panel: #ffffff;
  --ink: #16181d;
  --muted: #5f6672;
  --line: #dcdfe4;
  --accent: #1f5d8c;
  --accent-ink: #ffffff;
  --blocking: #a3271f;
  --material: #8a5a08;
  --enrichment: #3c5a72;
  --ok: #1f6b3a;
  --radius: 6px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --panel: #1c1f25;
    --ink: #e8eaed;
    --muted: #9aa2ae;
    --line: #2e333b;
    --accent: #6aa9d8;
    --accent-ink: #0e1114;
    --blocking: #f08a80;
    --material: #e0b153;
    --enrichment: #9dc0da;
    --ok: #7fc79a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

/* -- chrome ------------------------------------------------------------- */

header.top {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  padding: 0.9rem 1.25rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
header.top h1 { font-size: 1.05rem; margin: 0; letter-spacing: -0.01em; }
header.top .sub { color: var(--muted); font-size: 0.85rem; }
header.top .spacer { flex: 1; }

nav.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0 1.25rem;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
nav.tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
}
nav.tabs button[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

main { padding: 1.25rem; max-width: 1160px; margin: 0 auto; }
section[hidden] { display: none !important; }
h2 { font-size: 1rem; margin: 0 0 0.75rem; }
h3 { font-size: 0.9rem; margin: 1.25rem 0 0.5rem; }

/* -- controls ----------------------------------------------------------- */

.lang { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lang button { border: 0; background: var(--panel); color: var(--muted); font: inherit; padding: 0.25rem 0.6rem; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

button.primary {
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: var(--radius);
  padding: 0.5rem 1rem; font: inherit; font-weight: 600; cursor: pointer;
}
button.primary:disabled { opacity: 0.5; cursor: progress; }
button.ghost {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.4rem 0.75rem; font: inherit; cursor: pointer;
}
button.ghost:hover { border-color: var(--accent); }

label { display: block; margin: 0.6rem 0 0.15rem; font-size: 0.82rem; color: var(--muted); }
input[type="text"], input[type="number"], input[type="file"], textarea, select {
  width: 100%; padding: 0.45rem 0.55rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); font: inherit;
}
textarea { min-height: 8rem; resize: vertical; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row > * { flex: 1 1 14rem; }

/* -- panels ------------------------------------------------------------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.tiles { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.tile {
  flex: 1 1 9rem; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
}
.tile .k { font-size: 0.75rem; color: var(--muted); text-transform: none; }
.tile .v { font-size: 1.15rem; font-weight: 650; margin-top: 0.15rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.scroll { overflow-x: auto; }
th, td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 0.78rem; white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: color-mix(in srgb, var(--accent) 8%, transparent); }

code, .mono { font-family: var(--mono); font-size: 0.85em; }

/* -- severity ----------------------------------------------------------- */

.badge {
  display: inline-block; padding: 0.05rem 0.4rem; border-radius: 3px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  border: 1px solid currentColor;
}
.badge.BLOCKING { color: var(--blocking); }
.badge.MATERIAL { color: var(--material); }
.badge.ENRICHMENT { color: var(--enrichment); }
.badge.ok { color: var(--ok); }

/* -- clarification ------------------------------------------------------ */

.question { border-left: 3px solid var(--line); padding-left: 0.9rem; }
.question.BLOCKING { border-left-color: var(--blocking); }
.question.MATERIAL { border-left-color: var(--material); }
.question.ENRICHMENT { border-left-color: var(--enrichment); }
.question .prompt { font-size: 1rem; font-weight: 600; margin: 0.35rem 0; }
.question .proposal { color: var(--muted); margin: 0 0 0.6rem; }
.question .meta { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.8rem; color: var(--muted); }

.evidence {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.6rem 0.75rem; margin: 0.6rem 0; font-size: 0.84rem;
}
.evidence dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.75rem; margin: 0; }
.evidence dt { color: var(--muted); }
.evidence dd { margin: 0; }

.options { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.7rem; }
.option {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.5rem 0.65rem; background: var(--panel);
}
.option .label { flex: 1 1 16rem; font-weight: 600; }
.option .preview { color: var(--muted); font-size: 0.84rem; }
.option .kind { font-size: 0.72rem; color: var(--muted); font-family: var(--mono); }

details.exceptions { margin-top: 0.6rem; font-size: 0.85rem; }
details.exceptions summary { cursor: pointer; color: var(--material); font-weight: 600; }

.applyall { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; font-size: 0.85rem; color: var(--muted); }
.applyall input { width: auto; }

.notice { padding: 0.6rem 0.8rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.88rem; border: 1px solid var(--line); background: var(--panel); }
.notice.error { color: var(--blocking); border-color: currentColor; }
.notice.ok { color: var(--ok); border-color: currentColor; }

progress { width: 100%; height: 0.5rem; }
.muted { color: var(--muted); }
.empty { color: var(--muted); padding: 1.5rem 0; text-align: center; }
footer { color: var(--muted); font-size: 0.8rem; padding: 1.5rem 1.25rem; text-align: center; }