/* =========================================================================
   pages.css — page-specific pieces that don't belong in a shared primitive:
   the result headline/age/facts display, the address autocomplete, the
   login page's Google-button extras, the admin grid, and the two Data
   selectors (code.key, pre.mono) used by only one page each.

   LOAD ORDER: after tokens.css, base.css, layout.css, components.css,
   header.css; before legacy.css. The `.headline` back-compat alias for
   `.result-headline` lives in legacy.css instead.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Data — page-specific pieces of the shared Data section (see
   components.css for the .tablebox/table/.mono/.num/.truncate primitives).
   ------------------------------------------------------------------------- */
code.key {
  display: block; font-family: var(--font-mono);
  background: var(--surface-sunken); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: var(--space-3);
  font-size: var(--text-sm); word-break: break-all; margin: var(--space-3) 0;
  color: var(--text-body);
}

/* a <pre class="mono"> (e.g. the curl example on keys.html) needs to keep
   its authored line breaks and wrap long lines instead of overflowing */
pre.mono {
  white-space: pre-wrap;
  background: var(--surface-sunken);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* -------------------------------------------------------------------------
   Result headline
   ------------------------------------------------------------------------- */
.result-headline {
  display: flex; gap: var(--space-8); flex-wrap: wrap; align-items: center;
}
.age-num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}
.age-good { color: var(--success); }
.age-warn { color: var(--warning); }
.age-bad  { color: var(--danger); }
.age-label { color: var(--text-muted); font-size: var(--text-xs); margin-top: var(--space-1); text-transform: uppercase; letter-spacing: var(--tracking-caps); }

.facts { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.fact .v { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-heading); }
.fact .k { color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); }

/* -------------------------------------------------------------------------
   Targets — per-state expandable county tables (targets.js's countiesSection)
   ------------------------------------------------------------------------- */
.card__body > details + details { margin-top: var(--space-4); }
.card__body > details > summary {
  cursor: pointer; font-weight: var(--weight-semibold); color: var(--text-heading);
}
.card__body > details[open] > summary { margin-bottom: var(--space-2); }

/* -------------------------------------------------------------------------
   Autocomplete
   ------------------------------------------------------------------------- */
/* `flex: 1 1 380px` here would be a bug: .addr-wrap's parent on the search
   page is `form.stack`, i.e. flex-direction:column, where flex-basis sizes the
   VERTICAL axis -- so a row-oriented basis turned the address field into a
   380px-tall box with the suggestions dropdown floating far below it. Default
   to full width, and only opt into flexing when it actually sits in a `.row`. */
.addr-wrap { position: relative; width: 100%; }
.row > .addr-wrap { flex: 1 1 380px; width: auto; }
.suggestions {
  position: absolute; top: calc(100% + var(--space-1)); left: 0; right: 0; z-index: 20;
  background: var(--surface-raised); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-overlay);
  display: none;
}
.suggestions.open { display: block; }
.suggestions div {
  padding: var(--space-3) var(--space-4); cursor: pointer; font-size: var(--text-base);
  border-bottom: 1px solid var(--border-subtle); color: var(--text-body);
}
.suggestions div:last-child { border-bottom: 0; }
.suggestions div:hover, .suggestions div.sel { background: var(--brand-fill); color: var(--text-on-brand); }

/* -------------------------------------------------------------------------
   Login extras (moved out of login.html's inline <style>, CSP-blocked there)
   ------------------------------------------------------------------------- */
.divider {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-1);
  color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  margin-top: var(--space-3); height: var(--control-h-md); padding: 0 var(--space-4);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-raised); color: var(--text-body);
  font-size: var(--text-base); font-weight: var(--weight-semibold); text-decoration: none;
}
.btn-google:hover { border-color: var(--border-strong); text-decoration: none; }

/* -------------------------------------------------------------------------
   Admin (.toggle, the other half of the original Admin section, is a
   reusable control and lives in components.css)
   ------------------------------------------------------------------------- */
.admin-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.user-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   Portal account checklist
   ------------------------------------------------------------------------- */
.portal-summary {
  display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
}
.portal-summary--attention { border-color: var(--warning); }
.portal-summary__progress { display: flex; align-items: baseline; gap: var(--space-2); }
.portal-summary__progress strong {
  color: var(--text-heading); font-family: var(--font-display);
  font-size: var(--text-3xl); line-height: 1;
}
.portal-summary__progress span { color: var(--text-muted); }
.portal-summary > .facts { margin-left: auto; }
.portal-progress {
  width: 100%; height: 8px; overflow: hidden;
  border-radius: 999px; background: var(--surface-raised);
}
.portal-progress span {
  display: block; height: 100%; border-radius: inherit; background: var(--success);
}
.portal-warning { border-color: var(--warning); }
.portal-warning h2 { margin-bottom: var(--space-2); }
.portal-warning p { margin: var(--space-2) 0; }
.portal-list { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.portal-task { margin-top: 0; }
.portal-task--not_started { border-left: 4px solid var(--warning); }
.portal-task--credentials_missing { border-left: 4px solid var(--warning); }
.portal-task--blocked { border-left: 4px solid var(--danger); }
.portal-task--created { border-left: 4px solid var(--success); opacity: .9; }
.portal-work-section { margin-top: var(--space-7); }
.portal-section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
.portal-section__head h2, .portal-section__head p { margin: 0; }
.portal-section__head p { margin-top: var(--space-1); color: var(--text-muted); }
.portal-empty p { margin: var(--space-1) 0 0; color: var(--text-muted); }
.portal-completed { margin-top: var(--space-7); }
.portal-completed > summary {
  cursor: pointer; color: var(--text-heading); font-weight: var(--weight-semibold);
}
.portal-completed > p { color: var(--text-muted); }
.portal-completed[open] > summary { margin-bottom: var(--space-3); }
.portal-task__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
.portal-task__head h2 { margin-top: var(--space-3); }
.portal-task__head p { margin: var(--space-1) 0 0; color: var(--text-muted); }
.portal-task__badges { gap: var(--space-2); }
.portal-task__details {
  margin: var(--space-5) 0; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.portal-task__details summary { cursor: pointer; font-weight: var(--weight-semibold); }
.portal-task__details ol { margin-bottom: 0; padding-left: var(--space-5); }
.portal-task__details li + li { margin-top: var(--space-2); }
.portal-automation {
  margin: var(--space-5) 0; padding: var(--space-4);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.portal-automation__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-3);
}
.portal-automation__head h3, .portal-automation p { margin: 0; }
.portal-automation .facts { margin-bottom: var(--space-3); }
.portal-automation p + p { margin-top: var(--space-2); }
.portal-credentials {
  margin: var(--space-5) 0; padding: var(--space-4);
  border: 1px solid var(--info); border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.portal-credentials__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4);
}
.portal-credentials__head h3, .portal-credentials__head p { margin: 0; }
.portal-credentials__head p { margin-top: var(--space-1); color: var(--text-muted); }
.portal-credentials__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.portal-credential-field label { display: flex; align-items: center; gap: var(--space-2); }
.portal-secret-clear {
  margin-top: var(--space-2); color: var(--danger); font-size: var(--text-sm);
  font-weight: var(--weight-normal);
}
.portal-secret-clear input { width: auto; }
.portal-credentials__actions {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-4); color: var(--text-muted); font-size: var(--text-sm);
}
.portal-task__tracker {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}
.portal-task__tracker .field label { margin-top: 0; }
.portal-task__notes { grid-column: 1 / -1; }
.portal-task__notes textarea { min-height: 90px; }
.portal-task__saved { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--text-xs); }
.portal-no-account { display: grid; gap: var(--space-4); }
.portal-no-account p { margin: var(--space-1) 0 0; color: var(--text-muted); }

/* -------------------------------------------------------------------------
   Roof permit rules — owner research guide
   ------------------------------------------------------------------------- */
.permit-rules { padding-bottom: var(--space-8); }
.permit-rules__lede {
  display: grid; gap: var(--space-5); grid-template-columns: 1fr;
  padding: var(--space-6); border: 1px solid var(--border-default);
  border-left: 4px solid var(--info); border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.permit-rules__lede h2, .permit-rules__lede p { margin: 0; }
.permit-rules__steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4); counter-reset: permit-step;
}
.permit-rules__step {
  position: relative; padding: var(--space-5); padding-top: var(--space-7);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-raised); counter-increment: permit-step;
}
.permit-rules__step::before {
  content: counter(permit-step); position: absolute; top: var(--space-3); left: var(--space-5);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  color: var(--text-muted);
}
.permit-rules__step h3 { margin: 0 0 var(--space-2); }
.permit-rules__step p { margin: 0; color: var(--text-muted); }
.permit-rules__lookup {
  display: grid; grid-template-columns: minmax(220px, 1fr) auto;
  gap: var(--space-3); align-items: end;
}
.permit-rules__lookup label { margin-top: 0; }
.permit-rules__answer { display: grid; gap: var(--space-4); }
.permit-rules__answer[hidden] { display: none; }
.permit-rules__answer-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
.permit-rules__answer-head h2, .permit-rules__answer-head p { margin: 0; }
.permit-rules__answer-head p { margin-top: var(--space-1); color: var(--text-muted); }
.permit-rules__answer-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}
.permit-rules__answer-item {
  padding: var(--space-4); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); background: var(--surface-sunken);
}
.permit-rules__answer-item h3 { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.permit-rules__answer-item p { margin: 0; }
.permit-rules__answer-item p + p { margin-top: var(--space-2); }
.permit-rules__special-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5);
}
.permit-rules__special .card__body { display: grid; gap: var(--space-4); }
.permit-rules__special .card__body > p { margin: 0; }
.permit-rules__special details { margin: 0; }
.permit-rules__special details + details { margin-top: 0; }
.permit-rules__special summary { cursor: pointer; color: var(--text-heading); font-weight: var(--weight-semibold); }
.permit-rules__special details[open] summary { margin-bottom: var(--space-3); }
.permit-rules__controls {
  display: grid; grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(170px, auto));
  gap: var(--space-3); margin-bottom: var(--space-4);
}
.permit-rules__controls label { margin-top: 0; }
.permit-rules__research-controls {
  grid-template-columns: minmax(140px, .65fr) minmax(240px, 1.4fr)
    minmax(210px, 1fr) minmax(180px, .8fr);
}
.permit-rules__inventory-facts { margin-bottom: var(--space-4); }
.permit-rules__research {
  padding: var(--space-4); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); background: var(--surface-sunken);
}
.permit-rules__research > summary {
  cursor: pointer; color: var(--text-heading);
  font-weight: var(--weight-semibold);
}
.permit-rules__research[open] > summary { margin-bottom: var(--space-4); }
.permit-rules__research > h3 { margin: var(--space-5) 0 var(--space-3); }
.permit-rules__table td:first-child { font-weight: var(--weight-semibold); color: var(--text-heading); }
.permit-rules__table td { vertical-align: top; }
.permit-rules__source-list { margin: 0; padding-left: var(--space-5); }
.permit-rules__source-list li + li { margin-top: var(--space-2); }
.permit-rules__source-list a { overflow-wrap: anywhere; }
.permit-rules__note {
  padding: var(--space-4); border-left: 3px solid var(--warning);
  background: var(--surface-sunken); color: var(--text-body);
}
.permit-rules__note p { margin: 0; }
.permit-rules__note p + p { margin-top: var(--space-2); }
.permit-rules__empty { padding: var(--space-6); text-align: center; color: var(--text-muted); }

/* =========================================================================
   Responsive — the pages-owned half of app.css's original shared breakpoint
   blocks (.wrap/.narrow/.page-head is in layout.css; .app-header is in
   header.css). Appended after this file's own base rules above so the
   override wins.
   ========================================================================= */
@media (min-width: 720px) {
  .age-num { font-size: var(--text-4xl); }
  .facts { flex-wrap: nowrap; }
}

@media (min-width: 960px) {
  .admin-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 719.98px) {
  .facts { gap: var(--space-4); }
  .admin-grid { grid-template-columns: 1fr; }
  .portal-summary > .facts { margin-left: 0; }
  .portal-task__tracker { grid-template-columns: 1fr; }
  .portal-credentials__grid { grid-template-columns: 1fr; }
  .portal-task__notes { grid-column: auto; }
  .permit-rules__steps, .permit-rules__answer-grid,
  .permit-rules__special-grid, .permit-rules__lookup,
  .permit-rules__controls, .permit-rules__research-controls { grid-template-columns: 1fr; }
}
/* Authenticated local OpenAPI reference. */
.api-docs__ops { display: grid; gap: var(--space-2); }
.api-docs__operation { border: 1px solid var(--line, #d9dee5); border-radius: 6px; padding: .55rem .75rem; }
.api-docs__operation summary { cursor: pointer; display: flex; align-items: center; gap: .7rem; list-style: none; }
.api-docs__operation summary::-webkit-details-marker { display: none; }
.api-docs__operation summary span:last-child { color: var(--text-muted, #667085); margin-left: auto; text-align: right; }
.api-docs__detail { padding: .7rem .25rem .1rem 4.6rem; }
.api-docs__detail h3 { font-size: .85rem; margin-bottom: .25rem; }