/* The site page (UI-1, #506): every manual input for a site on one page with one Save all, and the 10 eligibility
   checks in full at the top. Colors come from harkey-theme.css; text on tints uses the -ink shades (4.5:1). */

/* While a site page is open it takes the full width; the map comes back when it closes (dfFocusMode, web/app.js). */
.split-2col.df-wide { grid-template-columns: 1fr !important; }
.split-2col.df-wide > .split-gutter, .split-2col.df-wide > .split-right { display: none; }
.split-left .table-wrap:has(> .dev-file) { max-height: none; overflow: visible; }
/* The research drawer opens over the map (web/v2-drawer.js): when it opens from the site page, the map column returns
   beside the page so the drawer shows. */
.split-2col.df-wide:has(> .split-right #v2-drawer:not([hidden])) { grid-template-columns: minmax(300px, 1fr) 10px minmax(300px, 1fr) !important; }
.split-2col.df-wide:has(> .split-right #v2-drawer:not([hidden])) > .split-gutter,
.split-2col.df-wide:has(> .split-right #v2-drawer:not([hidden])) > .split-right { display: block; }

.df-page { max-width: 1360px; }
.df-page .m-section { border-radius: 12px; }
.df-page h4 { font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); border-bottom: 0; padding-bottom: 0; }
.df-page .muted-note, .df-page .hint { color: var(--muted-ink); }
/* The grade as a dark letter on a tint (the brand package's GradeBadge): the solid B, C and D pills read under 3.1:1. */
.df-page .grade-pill { color: var(--ink); min-width: 22px; }
.df-page .grade-pill.grade-a, .df-page .grade-pill.grade-b { background: var(--go-bg); color: var(--go-ink); }
.df-page .grade-pill.grade-c { background: var(--warn-bg); color: var(--warn-ink); }
.df-page .grade-pill.grade-d, .df-page .grade-pill.grade-f { background: var(--no-bg); color: var(--no); }
.df-page .grade-line .grade-reason { color: var(--muted-ink); }
.df-page .df-chip { color: var(--muted-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Header and the Save all bar (top and bottom) */
.df-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 4px 0 12px; }
.df-top .pp-head { flex: 1 1 320px; min-width: 0; }
.df-savebar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 8px 8px 16px; }
.df-savebar[data-where="bottom"] { display: flex; justify-content: flex-end; margin-top: 4px; }
.df-page .btn-ghost, .df-page .btn-gold, .df-page .df-move-row .btn-ghost { min-height: 44px; }
.df-saveall { min-height: 44px; padding: 0 22px; font-size: 14px; }
.df-saveall:disabled { opacity: .55; cursor: default; }
.df-save-state { font-size: 14px; color: var(--muted-ink); }
.df-save-dirty { color: var(--warn-ink); font-weight: 700; }
.df-save-ok { color: var(--go-ink); font-weight: 700; }
.df-save-bad { color: var(--no); font-weight: 700; }

/* The 10 checks, always open */
.df-checks h4 { margin: 0 0 10px; }
.df-check-bar { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; margin-bottom: 10px; }
.df-check-bar span { height: 8px; border-radius: 3px; background: var(--muted-bg); }
.df-check-bar .df-bar-pass { background: var(--go); }
.df-check-bar .df-bar-review { background: var(--warn-mark); }
.df-check-bar .df-bar-fail { background: var(--no); }
.df-check-bar .df-bar-answered { background: var(--go-bg); }
.df-tally { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; font-size: 13px; }
.df-tally span { border-radius: 8px; padding: 6px 10px; font-weight: 600; }
.df-tally b { font-size: 16px; font-variant-numeric: tabular-nums; }
.df-t-pass { background: var(--go-bg); color: var(--go-ink); }
.df-t-review { background: var(--warn-bg); color: var(--warn-ink); }
.df-t-fail { background: var(--no-bg); color: var(--no); }
.df-t-other { background: var(--muted-bg); color: var(--muted-ink); }
.df-check-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 8px; }
.df-check { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel); min-width: 0; }
.df-check-review { background: var(--gold-tint); border-color: var(--warn-mark); }
.df-check-fail { background: #fff1f2; border-color: var(--no); }
.df-check:has(.df-evidence) { grid-column: 1 / -1; }
.df-check-mark { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; background: var(--muted-bg); color: var(--muted-ink); }
.df-check-pass .df-check-mark, .df-check-answered .df-check-mark { background: var(--go-bg); color: var(--go-ink); }
.df-check-review .df-check-mark { background: var(--warn-bg); color: var(--warn-ink); }
.df-check-fail .df-check-mark { background: var(--no-bg); color: var(--no); }
.df-check-body { flex: 1 1 auto; min-width: 0; }
.df-check-head { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.df-check-word { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted-ink); }
.df-check-pass .df-check-word, .df-check-answered .df-check-word { color: var(--go-ink); }
.df-check-review .df-check-word { color: var(--warn-ink); }
.df-check-fail .df-check-word { color: var(--no); }
.df-check-line { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.df-check-src { font-size: 12px; color: var(--muted-ink); margin-top: 2px; overflow-wrap: anywhere; }

/* Evidence that settles a check, in its row */
.df-evidence { margin-top: 10px; padding: 12px; background: var(--panel); border: 1px solid var(--gold-tint-line); border-radius: 10px; }
.df-evidence-head { margin-bottom: 8px; }

/* Two columns: inputs, then the county record, research and history */
.df-cols { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.df-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.df-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.df-main .m-section, .df-side .m-section { margin: 0; }
.df-main > .m-section, .df-page > .df-checks { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--panel); }
.df-page > .df-checks { margin-bottom: 16px; }
.df-main .df-item { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }

/* Fields */
.df-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px 12px; margin-top: 8px; }
.df-field { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--muted-ink); min-width: 0; }
.df-wide-field { grid-column: 1 / -1; }
.df-field input:not([type="checkbox"]):not([type="radio"]), .df-field select, .df-field textarea {
  font: inherit; font-size: 14px; font-weight: 400; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 8px 10px; min-height: 44px; width: 100%; box-sizing: border-box; }
.df-field textarea { min-height: 88px; resize: vertical; }
.df-field input:focus, .df-field select:focus, .df-field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold-dk); }
.df-check-field { flex-direction: row; align-items: center; gap: 8px; grid-column: 1 / -1; min-height: 44px; }
.df-page .df-err:not([hidden]) { color: var(--no); font-weight: 600; font-size: 13px; margin-top: 6px; }

/* Decision pills */
.df-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.df-pill { position: relative; }
.df-pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.df-pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--ink); font-size: 14px; }
.df-pill input:checked + span { background: var(--black); border-color: var(--black); color: #fff; font-weight: 600; }
.df-pill input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }

/* To-dos */
.df-todo-tick { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.df-todo-tick input { width: 20px; height: 20px; accent-color: var(--black); flex: 0 0 auto; }
.df-todo-tick input:checked + span b { text-decoration: line-through; color: var(--muted-ink); }
.df-new-todo { border-top: 1px solid var(--line); padding-top: 10px; }

@media (max-width: 600px) {
  .df-top { flex-direction: column; }
  .df-savebar { width: 100%; justify-content: space-between; box-sizing: border-box; }
  .df-savebar[data-where="top"] { position: sticky; top: 0; z-index: 5; }
  .df-saveall { font-size: 15px; min-height: 48px; }
  .df-pills { flex-direction: column; }
  .df-pill span { width: 100%; box-sizing: border-box; }
}