/*
  Scopara app stylesheet — brand v2.0.0 (LOCKED 2026-08-29)
  Drop-in replacement: every selector below matches the class names already
  used in webapp/templates/*.html, so no template changes are required
  beyond base.html's <title>/brand text and font link (see
  Brand/UI_HANDOFF_NOTES.md for the v1 pass this supersedes).
  Source of truth for the tokens themselves: Brand/tokens.css — copied in
  below so this file has zero external dependencies besides the Google
  Fonts families. Radius is unified to a single value (--radius-sm) per
  Brand/DESIGN_TOKENS.md; v1's separate --radius-md is retired.
*/

/* ---- Tokens (see Brand/tokens.css for the annotated source) ---- */
:root {
  --color-paper: #F1F3EE;
  --color-paper-deep: #E5E7E1;
  --color-ink: #181C21;
  --color-ink-soft: #4C525A;
  --color-correction: #B23A2E;
  --color-correction-soft: #D4695A;
  --color-certified: #2C6155;
  --color-docket: #55606B;
  --color-rule: #D7D9D1;
  --color-rule-on-ink: #2A2E34;

  --font-display: 'IBM Plex Sans Condensed', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius-sm: 3px;
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  font-family: var(--font-body);
  margin: 0;
  color: var(--color-ink);
  background: var(--color-paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-docket); }
:focus-visible { outline: 2px solid var(--color-correction); outline-offset: 2px; }

/* Skip-to-content link (WCAG 2.4.1) -- every page repeats the same nav
   block before the actual content, so a keyboard or screen-reader user
   needs a way to jump past it. Off-screen until it receives focus (the
   first Tab stop on any page), then becomes visible -- sighted mouse
   users never see it, which is correct: they don't need it. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* Screen-reader-only text -- visually hidden but still in the accessibility
   tree (unlike display:none/visibility:hidden, which remove it entirely).
   Used for form labels that would be visually redundant with a nearby
   placeholder/heading but still need a real programmatic label -- a
   placeholder alone isn't a reliable accessible name (it disappears once
   the field has a value, and isn't consistently exposed by every screen
   reader the way a <label> is). */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h1 {
  font-family: var(--font-display); font-weight: 700; font-size: 32px;
  letter-spacing: -0.01em; margin: 4px 0 20px; color: var(--color-ink);
}
h2 {
  font-family: var(--font-body); font-weight: 600; font-size: 17px;
  margin: 0 0 12px; color: var(--color-ink);
}

/* ---- Header / nav ---- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--color-ink);
  color: var(--color-paper);
  border-bottom: 1px solid var(--color-rule-on-ink);
}
.topbar .brand {
  color: var(--color-paper);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  position: relative;
  padding-right: 14px;
}
.topbar .brand::after {
  content: "‸";
  position: absolute;
  top: -0.35em; right: -2px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-correction-soft);
}
.topbar nav { display: flex; align-items: center; flex-wrap: wrap; }
.topbar nav a, .topbar nav span, .topbar nav button {
  color: #C9CCD3;
  text-decoration: none;
  margin-left: 18px;
  font-size: 13.5px;
  font-family: var(--font-body);
}
.topbar nav .who {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #8A8F99;
}
.topbar nav button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.topbar nav a:hover, .topbar nav button:hover { color: var(--color-paper); }

main { max-width: 980px; margin: 0 auto; padding: 32px 24px 64px; }
footer {
  max-width: 980px; margin: 0 auto; padding: 0 24px 32px;
  color: var(--color-ink-soft); font-size: 12px; font-family: var(--font-mono);
  letter-spacing: .02em;
}

/* ---- Cards / forms ---- */
.card {
  background: var(--color-paper-deep);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: 24px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.card label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13.5px; color: var(--color-ink-soft); font-weight: 500;
}
.card input, .card select, .card textarea {
  padding: 9px 10px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-body);
  background: var(--color-paper);
  color: var(--color-ink);
}
.card textarea { resize: vertical; min-height: 90px; }
.card input:focus, .card select:focus, .card textarea:focus { border-color: var(--color-docket); }
.card button, form.inline-form button, .filter-bar button {
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  background: var(--color-ink); color: var(--color-paper);
  border: none; border-radius: var(--radius-sm);
  padding: 10px 18px; cursor: pointer;
}
.card button:hover, form.inline-form button:hover, .filter-bar button:hover {
  background: var(--color-correction);
}
.checkbox-label { flex-direction: row !important; align-items: flex-start; gap: 8px !important; }
.checkbox-label input { width: auto; margin-top: 3px; }

/* Honeypot field for public unauthenticated forms (report-problem, reporter
   drop-off upload) -- a bot filling in every field it finds trips this;
   a real visitor never sees or focuses it, since it's off-screen rather
   than display:none (some scripted bots skip display:none, this is
   slightly harder to detect as a trap while still being invisible/
   unreachable for anyone using a real browser or a screen reader). */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
}

button.danger, form.inline-form button.danger {
  background: var(--color-paper);
  color: var(--color-correction);
  border: 1px solid var(--color-correction);
}
button.danger:hover, form.inline-form button.danger:hover {
  background: var(--color-correction);
  color: var(--color-paper);
}

.btn-link {
  display: inline-block;
  background: var(--color-ink);
  color: var(--color-paper);
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
}
.btn-link:hover { background: var(--color-correction); }

/* ---- Flash / status banners ---- */
.flash {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  font-size: 14px;
  border-left: 3px solid transparent;
}
.flash-error {
  background: #FBF3F2; color: var(--color-correction);
  border: 1px solid #EBCFCB; border-left-color: var(--color-correction);
}
.flash-ok {
  background: #F2F6F4; color: var(--color-certified);
  border: 1px solid #C7DAD2; border-left-color: var(--color-certified);
}

/* ---- Meta / hint text ---- */
.hint, .meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-ink-soft);
  letter-spacing: .01em;
}
.meta strong { color: var(--color-ink); font-weight: 500; }
.formatting-issues li { margin-bottom: 8px; font-size: 14px; }

/* ---- Tables ---- */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 16px 0 8px;
  background: var(--color-paper);
  font-size: 13.5px;
}
th, td {
  border: 1px solid var(--color-rule);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
th {
  background: var(--color-paper-deep);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-docket);
  font-weight: 500;
}
tr.tier-flagged td { background: #FAF4EC; }

/* ---- Badges ---- */
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .02em;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  background: var(--color-paper-deep);
  color: var(--color-ink-soft);
  border: 1px solid var(--color-rule);
  white-space: nowrap;
}
.badge-ok { background: #E7EFEC; color: var(--color-certified); border-color: #BFD4CB; }
.badge-warn { background: #F7E9E1; color: #8A4A1F; border-color: #E3C6AE; }

/* ---- Downloads ---- */
.downloads { margin: 14px 0 24px; display: flex; gap: 18px; }
.downloads a {
  color: var(--color-docket);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
}
.downloads a:hover { text-decoration: underline; }

/* ---- Filter bar ---- */
.filter-bar { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; align-items: center; }
.filter-bar input[type="text"] {
  padding: 9px 10px; border: 1px solid var(--color-rule); border-radius: var(--radius-sm);
  flex: 1; min-width: 200px; font-family: var(--font-body); font-size: 14px;
  background: var(--color-paper);
}
.filter-bar select {
  padding: 9px 10px; border: 1px solid var(--color-rule); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 14px; background: var(--color-paper);
}
.filter-bar a { font-size: 13.5px; }

/* ---- Comments ---- */
.comment-thread { display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
.comment {
  background: var(--color-paper); border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px;
}
.comment-meta {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--color-ink-soft); font-size: 11.5px; font-family: var(--font-mono);
  margin-bottom: 4px;
}
.comment-body { white-space: pre-wrap; word-break: break-word; color: var(--color-ink); }
.comment-delete {
  background: none; border: none; color: var(--color-correction);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px;
}
.comment-form { display: flex; gap: 6px; margin-top: 4px; }
.comment-form input[type="text"] {
  flex: 1; padding: 6px 8px; border: 1px solid var(--color-rule); border-radius: var(--radius-sm);
  font-size: 13px; min-width: 140px; font-family: var(--font-body); background: var(--color-paper);
}
.comment-form button {
  padding: 6px 12px; border: none; border-radius: var(--radius-sm);
  background: var(--color-ink); color: var(--color-paper); cursor: pointer; font-size: 13px;
}
.comment-form button:hover { background: var(--color-correction); }

/* ---- Review (accept / reject / reset) ---- */
.review-form { display: flex; gap: 4px; margin-bottom: 6px; }
.review-form button {
  border: 1px solid var(--color-rule);
  background: var(--color-paper);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.review-form .review-accept { color: var(--color-certified); }
.review-form .review-reject { color: var(--color-correction); }
.review-form .review-active.review-accept { background: #E7EFEC; border-color: #BFD4CB; }
.review-form .review-active.review-reject { background: #FBF3F2; border-color: #EBCFCB; }
.review-form .review-reset { color: var(--color-ink-soft); }