/* „Проверка на цитати" - the form, and the annotated report.

   Four tones carry the whole page: ok (green), bad (red - repealed / missing / unsupported),
   warn (amber - future / partial), unk (grey - can't check). Tokens from _theme.html with
   dark fallbacks. */

main { max-width: var(--page-w,860px); }
h1 { margin-bottom: 6px; }
.lede { font-size: 15.5px; line-height: 1.6; margin: 0 0 18px; }
.small { font-size: 13px; }
.muted { color: var(--muted, #8b98a5); }
.foot { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--border, #2d3744); line-height: 1.55; }

.ask { display: flex; flex-direction: column; gap: 10px; }
.ask label { font-size: 13px; color: var(--muted, #8b98a5); }
.ask textarea { font: inherit; font-size: 15px; line-height: 1.5; padding: 12px 14px; border-radius: 10px;
  background: var(--inset, #0d1218); border: 1px solid var(--border, #2d3744); color: var(--text, #e6edf3);
  resize: vertical; width: 100%; box-sizing: border-box; }
.ask textarea:focus-visible { outline: 2px solid var(--accent, #3fb950); outline-offset: 1px; }
.ask button[type=submit] { align-self: flex-start; }
.row { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; }
.file, .date { display: flex; flex-direction: column; gap: 5px; }
.file input, .date input { font: inherit; font-size: 13.5px; color: var(--text, #e6edf3); }
.date input { padding: 7px 9px; border-radius: 8px; background: var(--inset, #0d1218);
  border: 1px solid var(--border, #2d3744); }
.cap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cap img { border-radius: 8px; border: 1px solid var(--border, #2d3744); background: #fff; }
.cap label { display: flex; flex-direction: column; gap: 4px; }
.cap input { font: inherit; padding: 8px 10px; border-radius: 8px; width: 120px;
  background: var(--inset, #0d1218); border: 1px solid var(--border, #2d3744); color: var(--text, #e6edf3); }
.lnk { background: none; border: 0; padding: 0; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--accent, #3fb950); min-height: 0; text-decoration: underline; }
.err { margin: 0; color: var(--danger, #f85149); font-size: 13.5px; }

.report { margin-top: 26px; }
.tally { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 16px; }
.pill { font-size: 13.5px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border, #2d3744); }
.pill b { font-variant-numeric: tabular-nums; }
.pill.ok  { color: var(--accent, #3fb950); border-color: color-mix(in srgb, var(--accent, #3fb950) 45%, transparent); }
.pill.bad { color: var(--danger, #f85149); border-color: color-mix(in srgb, var(--danger, #f85149) 45%, transparent); }
.pill.unk { color: var(--muted, #8b98a5); }

.cites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cite { padding: 12px 14px; border: 1px solid var(--border, #2d3744); border-radius: 12px;
  background: var(--panel, #1a212b); border-left-width: 3px; }
.cite.ok   { border-left-color: var(--accent, #3fb950); }
.cite.bad  { border-left-color: var(--danger, #f85149); }
.cite.warn { border-left-color: var(--warn, #d29922); }
.cite.unk  { border-left-color: var(--border-2, #30363d); }
.head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ref { font-size: 15px; }
.ref a { color: var(--accent, #3fb950); }
.badge { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.badge.ok   { color: var(--on-accent, #0d1218); background: var(--accent, #3fb950); }
.badge.bad  { color: #fff; background: var(--danger, #f85149); }
.badge.warn { color: var(--on-accent, #0d1218); background: var(--warn, #d29922); }
.badge.unk  { color: var(--text, #e6edf3); background: var(--border, #2d3744); }
.why { margin: 8px 0 0; font-size: 14px; line-height: 1.55; }
.why.sup { color: var(--text, #e6edf3); }
.carried { margin: 6px 0 0; }
.cite blockquote { margin: 8px 0 0; padding: 8px 12px; border-left: 2px solid var(--border-2, #30363d);
  font-size: 13.5px; line-height: 1.55; color: var(--muted, #8b98a5); }
/* „нов код" / „Пробвайте с пример" are 14px text; the target is a thumb's. */
button.lnk { padding: 9px 4px; margin: -9px -4px; min-height: 32px; }

/* Phone: 16px is the floor for a field you type into - under it, iOS Safari zooms the page in
   on focus and does not zoom back out. Appended last so no later rule of equal specificity can
   quietly cancel it (which is exactly how the captcha field's own 16px rule was dead). */
/* the health panel: four checks per citation, always visible, each a number + icon + a state
   in words + the sentence (UX consolidation §47) */
.health { margin-top: 10px; font-size: 13.5px; }
.hl-t { margin: 0 0 4px; font-size: var(--fs-label, .78rem); text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #8b98a5); }
.hl { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hl li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 6px 8px;
  border-radius: 8px; background: var(--inset, #0d1218); border-left: 3px solid var(--border-2, #30363d); line-height: 1.45; }
.hn { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--panel-2, #243140); color: var(--muted, #8b98a5); font-variant-numeric: tabular-nums; }
.hb { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.hs { font-size: var(--fs-label, .78rem); font-weight: 600; padding: 0 7px; border-radius: 999px; background: var(--neutral-bg); color: var(--muted, #8b98a5); }
.ht { flex-basis: 100%; overflow-wrap: anywhere; color: var(--text, #e6edf3); }
.hl li.h-ok   { border-left-color: var(--accent, #3fb950); }
.hl li.h-ok .hs { background: var(--success-bg); color: var(--success); }
.hl li.h-warn { border-left-color: var(--warn, #d29922); }
.hl li.h-warn .hs { background: var(--warn-bg); color: var(--warn, #d29922); }
.hl li.h-bad  { border-left-color: var(--danger, #f85149); }
.hl li.h-bad .hs { background: var(--danger-bg); color: var(--danger, #f85149); }
.hl li.h-na   { border-left-color: var(--border-2, #30363d); }
.hl li.h-na .ht { color: var(--muted, #8b98a5); }
.hl li.h-unk  { border-left-color: var(--warn, #d29922); border-left-style: dashed; }
.hl .hi { display: inline-block; width: 1.1em; font-weight: 700; }
.hl li.h-bad .hi, .hl li.h-bad b { color: var(--danger, #f85149); }
.hl li.h-warn .hi { color: var(--warn, #d29922); }
.hl li.h-ok .hi { color: var(--accent, #3fb950); }
.prov-d { margin-top: 8px; }
.prov-d > summary { cursor: pointer; color: var(--muted, #8b98a5); min-height: 32px; display: flex; align-items: center; }
.prov > summary { cursor: pointer; color: var(--muted, #8b98a5); margin-top: 6px; }
.cmp del { color: var(--danger, #f85149); }
.cmp ins { color: var(--accent, #3fb950); text-decoration: underline; }
.cmpbtn { margin-top: 6px; min-height: 32px; }

@media (max-width:600px) {
  .ask textarea, .ask input, input[type=date], .opts input, .opts select { font-size:16px; }
}

/* the entry switch (§46) */
.back { margin: 0 0 8px; }
.entry-tabs { margin-top: 4px; }
.entry { margin: 0 0 14px; }
.entry[hidden] { display: none; }
.pick-row { display: flex; flex-direction: column; gap: 6px; }
.pick-row label { font-size: 13px; color: var(--muted, #8b98a5); }
.pick-line { display: flex; gap: 8px; flex-wrap: wrap; }
.pick-line select { flex: 1 1 260px; min-width: 0; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 8px;
  background: var(--inset, #0d1218); border: 1px solid var(--border, #2d3744); color: var(--text, #e6edf3); min-height: 38px; }
@media (max-width:600px) { .pick-line select { font-size: 16px; min-height: 44px; } }

/* target size (refinement, Sep 2026): the file picker rendered 21px tall */
.ask input[type=file] { min-height:32px; padding-block:4px; }