/* NetAcre product app. Components only; tokens live in base.html's critical
   block. Every rule below is sized for an audience that skews 55 and over:
   52px controls, 17px body text, and no state signalled by color alone. */

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
     font:var(--fs-300)/1.6 var(--font-body)}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.2;margin:0 0 var(--sp-sm)}
h1{font-size:var(--fs-700)} h2{font-size:var(--fs-600)} h3{font-size:var(--fs-500)}
a{color:var(--accent)} a:hover{color:var(--accent-hover)}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--sp-sm)}

.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:var(--sp-sm);top:var(--sp-sm);background:var(--bg-card);
                 padding:var(--sp-xs) var(--sp-sm);border-radius:var(--r-sm);z-index:10}

/* Focus is never removed. Removing it without replacing it is the single most
   common accessibility regression in a form-heavy app. */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.app-header{background:var(--bg-card);border-bottom:1px solid var(--border)}
.app-header__inner{display:flex;align-items:center;justify-content:space-between;
                   gap:var(--sp-md);min-height:72px;flex-wrap:wrap}
.wordmark{font-family:var(--font-body);font-weight:600;font-size:var(--fs-500);
          color:var(--text);text-decoration:none}
.wordmark sup{font-size:.42em;top:-.9em;position:relative}
.nav{display:flex;align-items:center;gap:var(--sp-md)}
.nav a{text-decoration:none;font-weight:600}
.nav__form{margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;
     min-height:52px;padding:0 var(--sp-md);border:0;border-radius:var(--r-md);
     font:600 var(--fs-300)/1 var(--font-body);cursor:pointer;text-decoration:none}
.btn--primary{background:var(--accent);color:var(--cream)}
.btn--primary:hover{background:var(--accent-hover);color:var(--cream)}
.btn--quiet{background:transparent;color:var(--accent);
            border:1px solid var(--border-strong)}

.card{background:var(--bg-card);border:1px solid var(--border-strong);
      border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.4rem);
      box-shadow:var(--shadow-md);margin:var(--sp-lg) 0}
.card--narrow{max-width:34rem}

.form label{display:block;font-weight:600;margin:0 0 var(--sp-2xs)}
/* Not scoped to .form: candidate.html's table caption and signin_sent.html's
   "check the spam folder" line both carry class="hint" outside any form, and
   a form-scoped rule silently left them at default (unmuted, full-size, and
   for a <caption>, centered) styling instead. */
.hint{color:var(--text-muted);font-size:var(--fs-200);margin:0 0 var(--sp-xs)}
caption.hint{caption-side:top;text-align:left}
.form input[type=text],.form input[type=email],.form input[type=number],.form select{
  width:100%;min-height:52px;padding:.75rem 1rem;font:inherit;
  background:var(--parch-100);border:1px solid var(--border-strong);
  border-radius:var(--r-md);margin:0 0 var(--sp-md)}
.form input:focus{border-color:var(--accent);
                  box-shadow:0 0 0 3px rgba(166,60,26,.18);outline:none}
/* Never color alone: an invalid field gets a heavier border AND an inline
   warning glyph, matching the proven pattern in website/static/css/site.css
   (lines 114-117) and bestpractices/style-guide.md - not a separate
   .field-error text block, which exists nowhere in website/'s CSS. */
.form input[aria-invalid=true]{border-color:var(--rust-700);border-width:2px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A3013' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 8v5'/><path d='M12 16.4h.01'/></svg>");
  background-repeat:no-repeat;background-position:right .85rem center;
  background-size:20px 20px;padding-right:2.75rem}
.form input[aria-invalid=true]:focus{border-color:var(--rust-700);
  box-shadow:0 0 0 3px rgba(138,48,19,.22)}
.form input[type=checkbox]{width:24px;height:24px;accent-color:var(--accent)}
.form .row{display:flex;gap:var(--sp-md);flex-wrap:wrap}
.form .row > *{flex:1 1 12rem}
.form .btn{width:100%}

.notice{border-left:4px solid var(--accent);background:var(--bg-panel);
        padding:var(--sp-sm) var(--sp-md);border-radius:var(--r-sm);
        margin:0 0 var(--sp-md);color:var(--text-soft)}
.notice--good{border-left-color:var(--sage)}
.notice--bad{border-left-color:var(--rust-700)}

/* Confidence is a WORD with an explanation, never a bare percentage. */
.band{display:inline-block;padding:.15rem .6rem;border-radius:var(--r-pill);
      font-size:var(--fs-200);font-weight:600;border:1px solid var(--border-strong);
      background:var(--bg-panel);color:var(--text-muted-panel)}
.band--high{border-color:var(--sage);color:#3F4A2C}
.band--low{border-color:var(--rust-700);color:var(--rust-700)}

.candidates{list-style:none;margin:0;padding:0}
.candidates li{border:1px solid var(--border-strong);border-radius:var(--r-lg);
               background:var(--bg-card);padding:var(--sp-md);margin:0 0 var(--sp-md)}
.candidates h3{font-size:var(--fs-500);margin:0 0 var(--sp-2xs)}
.candidates .where{color:var(--text-soft);margin:0 0 var(--sp-xs)}
.candidates .why{color:var(--text-muted);font-size:var(--fs-200);margin:0 0 var(--sp-sm)}

/* Wide content scrolls inside its own container; the page body never does. */
.table-wrap{overflow-x:auto}
table.properties{width:100%;border-collapse:collapse;min-width:44rem}
table.properties th,table.properties td{text-align:left;padding:.7rem .6rem;
  border-bottom:1px solid var(--border);vertical-align:top}
table.properties th{font-size:var(--fs-200);text-transform:uppercase;
  letter-spacing:.04em;color:var(--text-muted)}
table.properties td.value{white-space:nowrap}
/* The roll year and certification travel with every value, never a bare
   dollar figure: 19 counties are on preliminary numbers. Not scoped to
   table.properties: the same qualifier also sits inline in a sentence on
   search.html's card and the candidate/portfolio summary lines, and a
   table-scoped rule left those three rendering at full body size in body
   colour instead of small and muted - the same class of scoping bug already
   fixed once for .hint in this file. Inside a table it additionally drops
   to its own line, which reads better stacked under the dollar figure than
   run on after it. */
.roll{font-size:var(--fs-100);color:var(--text-muted)}
table.properties .roll{display:block}
table.properties tr.excluded td{opacity:.55}
table.properties .flag{display:block;font-size:var(--fs-100);color:var(--text-muted)}

.app-footer{background:var(--espresso-950);color:var(--cream-90);
            margin-top:var(--sp-xl);padding:var(--sp-lg) 0}
.app-footer .pledge{font-family:var(--font-display);font-size:var(--fs-400);
                    color:var(--cream);margin:0 0 var(--sp-sm)}
.app-footer .fine{font-size:var(--fs-200);margin:0}
.app-footer a{color:var(--amber-soft)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* Task 8: the settings page's followed-county list. */
.inline{display:inline}
ul.plain{list-style:none;padding:0}

/* The no-match page's remedies. A bare <ul> inherits the browser's 40px
   indent, which pulls it out of line with every paragraph in the card. */
.remedies{margin:0 0 var(--sp-sm);padding-left:1.25rem}
.remedies li{margin:0 0 var(--sp-2xs)}

/* Plan 5: the property page. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--sp-sm) var(--sp-md);margin:0 0 var(--sp-sm)}
.facts dt{font-size:var(--fs-200);text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.facts dd{margin:0;font-weight:600}
.property-map{height:480px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--parch-200);margin:0 0 var(--sp-sm)}
.property-map:empty{display:none}
.attribution{margin-top:var(--sp-xs)}
.timeline tr.is-highlighted td{background:var(--parch-200)}
.charts{display:grid;gap:var(--sp-md);margin:0 0 var(--sp-sm)}
.chart{width:100%;height:auto;font-family:var(--font-body)}
.chart__bar{fill:var(--rust)}
.chart__bar:hover{fill:var(--rust-700)}
.chart__axis{stroke:var(--ink-700);stroke-width:1}
.chart__tick{stroke:var(--border);stroke-width:1}
.chart__label{font-size:12px;fill:var(--text-muted)}
.chart__title{font-size:14px;font-weight:600;fill:var(--text)}
.chart--empty .chart__label{font-size:15px;fill:var(--text-soft)}
details summary{cursor:pointer;font-weight:600;margin:var(--sp-sm) 0}
@media (max-width:640px){.property-map{height:60vh;margin-left:calc(-1 * var(--sp-sm));margin-right:calc(-1 * var(--sp-sm));border-radius:0}}