/* ============================================================
   1. tokens (palette + spacing + type)
   ============================================================ */

:root {
  /* color */
  --bg: #fafafa;
  --bg-surface: #ffffff;
  --bg-sunken: #f1f3f5;
  --bg-decided: rgba(0, 102, 204, 0.07);
  --fg: #1a1c1e;
  --fg-soft: #3a3d40;
  --muted: #6b7077;
  --border: #e3e5e8;
  --border-soft: #ececef;
  --accent: #0066cc;
  --green: #178600;
  --red: #c11;
  --orange: #b56500;

  --warn-bg: #fff8e1;
  --warn-fg: #8a5d00;
  --err-bg: #fdecec;
  --code-bg: #f5f5f7;

  --pill-bg: rgba(120, 120, 120, 0.18);
  --pill-issue: rgba(46, 160, 67, 0.18);
  --pill-issuewild: rgba(63, 116, 218, 0.22);
  --pill-pass-bg: rgba(23, 134, 0, 0.10);
  --pill-pass-border: rgba(23, 134, 0, 0.35);
  --pill-fail-bg: var(--err-bg);
  --pill-fail-border: rgba(204, 17, 17, 0.35);

  /* spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* radii */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-pill: 999px;

  /* shadow */
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);

  /* type, modular scale, only these values are used anywhere */
  --text-xs:   0.75rem;   /* 12px, micro labels, small metadata */
  --text-sm:   0.875rem;  /* 14px, secondary body, form controls */
  --text-base: 1rem;      /* 16px, body */
  --text-md:   1.125rem;  /* 18px, emphasized, h1 */
  --text-lg:   1.25rem;   /* 20px, display */
  --text-xl:   1.5rem;    /* 24px, larger display */

  /* line-heights */
  --leading-tight: 1.4;
  --leading-base:  1.55;

  /* form controls, single source of truth so input + button match */
  --control-py: var(--space-2);
  --control-px: var(--space-3);
  --control-radius: var(--radius-sm);
  --control-border-width: 1px;
  --control-font-size: var(--text-sm);
  --control-leading: 1.4;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1115;
    --bg-surface: #17191e;
    --bg-sunken: #0b0d11;
    --bg-decided: rgba(85, 153, 255, 0.10);
    --fg: #e8eaed;
    --fg-soft: #c5c8cc;
    --muted: #8c9099;
    --border: #2a2d33;
    --border-soft: #1f2228;
    --accent: #5599ff;
    --green: #4cc26b;
    --red: #ff6b6b;
    --orange: #d4a000;

    --warn-bg: rgba(212, 160, 0, 0.10);
    --warn-fg: #d4a000;
    --err-bg: rgba(255, 80, 80, 0.10);
    --code-bg: #1c1f25;

    --pill-bg: rgba(140, 140, 140, 0.18);
    --pill-issue: rgba(76, 194, 107, 0.16);
    --pill-issuewild: rgba(100, 160, 230, 0.22);
    --pill-pass-bg: rgba(76, 194, 107, 0.12);
    --pill-pass-border: rgba(76, 194, 107, 0.4);
    --pill-fail-border: rgba(255, 107, 107, 0.4);

    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
  }
}

/* ============================================================
   2. base reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* sticky-footer layout: header + main + footer in a column,
     main flex-grows so the footer hugs the viewport bottom when
     content is short. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page { flex: 1; }

a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }

code {
  font-family: var(--font-mono);
  background: var(--code-bg);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

/* ============================================================
   3. layout container, .page wraps every screen
   ============================================================ */

.page {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-7);
}

/* ============================================================
   4. page header (top of every screen)
   ============================================================ */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
}

.page-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.page-title a {
  color: var(--fg);
  text-decoration: none;
}
.page-title a:hover { color: var(--accent); }

/* Primary nav, prominent tab pills, the active one filled. */
.page-nav {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}
.page-nav-link {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-soft);
  text-decoration: none;
  border: 1px solid transparent;
}
.page-nav-link:hover {
  background: var(--bg-sunken);
  color: var(--fg);
  border-color: var(--border-soft);
}
.page-nav-link--active,
.page-nav-link--active:hover {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

/* On narrow viewports, stack the title above the nav, both centred. */
@media (max-width: 640px) {
  .page-header {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
  }
}

.page-footer {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  color: var(--muted);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.page-footer-links {
  display: flex;
  gap: var(--space-4);
}
.page-footer-links a {
  color: var(--accent);
  text-decoration: none;
}
.page-footer-links a:hover { text-decoration: underline; }

/* The company link in the copyright line stays visually identical to the
   surrounding muted text: inherit the colour and keep it underline-free. */
.page-footer-copy a {
  color: inherit;
  text-decoration: none;
}

/* On narrow viewports, stack the footer parts vertically and centre. */
@media (max-width: 640px) {
  .page-footer {
    justify-content: center;
    text-align: center;
  }
}

/* ============================================================
   5. form (the input container, acts like a card)

   Every form control (input, textarea, button, checkbox) shares
   the same control-* tokens above, so heights, padding and font
   sizes line up regardless of element type.
   ============================================================ */

.form {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-label {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 500;
}

/* shared base for every interactive control */
.form-input,
.form-textarea,
.form-button {
  font-family: inherit;
  font-size: var(--control-font-size);
  line-height: var(--control-leading);
  padding: var(--control-py) var(--control-px);
  border: var(--control-border-width) solid var(--border);
  border-radius: var(--control-radius);
  background: var(--bg-sunken);
  color: var(--fg);
  /* derived height: 14 * 1.4 + 8 * 2 + 2 = ~39px, same across all */
}

.form-input,
.form-textarea,
.form select {
  display: block;
  width: 100%;
  font-family: var(--font-mono);
  /* main inputs get a step-up in text size; padding uses em units
     so it scales proportionally if the font-size changes later. */
  font-size: var(--text-md);
  padding: 0.65em 0.9em;
}

.form-textarea {
  resize: vertical;
  /* multi-line: use base leading instead of compact control leading */
  line-height: var(--leading-base);
}

.form-input:focus,
.form-textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  background: var(--bg-surface);
}

.form-button {
  align-self: flex-start;
  background: var(--accent);
  color: white;
  border-color: transparent; /* keep border-width so height matches input exactly */
  font-weight: 600;
  cursor: pointer;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}
.form-button:disabled { opacity: 0.45; cursor: not-allowed; }
.form-button:not(:disabled):hover { filter: brightness(1.08); }

/* native checkboxes, normalised to a consistent size + accent */
input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
  vertical-align: middle;
  flex-shrink: 0;
}

/* htmx loading indicator (used inside the button) */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }

/* ============================================================
   6. issuer chooser (lives inside a form)
   ============================================================ */

.issuers {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-sunken);
}
.issuers-summary {
  cursor: pointer;
  font-size: var(--text-md);
  color: var(--fg-soft);
  user-select: none;
  font-weight: 500;
}
.issuers-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-3);
}
.issuers-list label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-md);
  font-weight: 400;
}
.issuers-actions {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-soft);
  display: flex;
  gap: var(--space-4);
}
.issuers-actions a {
  font-size: var(--text-xs);
  text-decoration: none;
}
.issuers-actions a:hover { text-decoration: underline; }

/* ============================================================
   7. results section (container for panes after form submit)
   ============================================================ */

.results { margin-top: var(--space-5); }
.results > * + * { margin-top: var(--space-5); }

/* ============================================================
   8. pane (titled section of results)
   ============================================================ */

.pane { display: flex; flex-direction: column; gap: var(--space-3); }
.pane-title {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 var(--space-1);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-soft);
}

/* ============================================================
   9. card primitive (visual surface)
        composes with .card-head / .card-body / .card-foot
        so head/body/foot naturally span edge-to-edge and own
        their own padding, no negative-margin hacks needed.
   ============================================================ */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-surface);
}
.card-body {
  padding: var(--space-4) var(--space-5);
}
.card-body > * + * { margin-top: var(--space-3); }

.card-foot {
  padding: var(--space-3) var(--space-5);
  border-top: 1px dashed var(--border);
  color: var(--muted);
  font-size: var(--text-sm);
}

/* ============================================================
   10. banner / error (full-width notices)
   ============================================================ */

.banner {
  background: var(--warn-bg);
  color: var(--warn-fg);
  border-left: 3px solid var(--orange);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.banner--error {
  background: var(--err-bg);
  color: var(--red);
  border-left-color: var(--red);
}

/* ============================================================
   11. pill primitive (small chip, used for tags + statuses)
   ============================================================ */

.pill {
  display: inline-flex;
  align-items: baseline;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: nowrap;
  background: var(--pill-bg);
  color: var(--fg-soft);
}
.pill--issue           { background: var(--pill-issue); }
.pill--issuewild       { background: var(--pill-issuewild); }
.pill--iodef,
.pill--contactemail,
.pill--contactphone    { color: var(--muted); }
.pill--critical        { outline: 1px solid var(--red); outline-offset: 1px; }
.pill--pass {
  background: var(--pill-pass-bg);
  color: var(--green);
  border: 1px solid var(--pill-pass-border);
  font-family: var(--font-sans);
  font-weight: 500;
}
.pill--fail {
  background: var(--pill-fail-bg);
  color: var(--red);
  border: 1px solid var(--pill-fail-border);
  font-family: var(--font-sans);
  font-weight: 500;
}

.pill-ca {
  opacity: 0.72;
  font-style: italic;
  margin-left: var(--space-1);
}

.pill-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ============================================================
   12. walk component
   ============================================================ */

.walk-name {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
}

.walk-flow {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-2);
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--border);
}

.walk-step {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
}
.walk-step::before {
  content: '';
  position: absolute;
  left: calc(var(--space-2) * -1 - 0.31rem);
  top: 1rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--border);
  border: 2px solid var(--bg-surface);
}

.walk-step-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.walk-step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  flex-shrink: 0;
  color: var(--muted);
  font-weight: 700;
}

.walk-step-lookup {
  font-family: var(--font-mono);
  color: var(--fg);
  flex: 1;
  min-width: 0;
}

.walk-step-note {
  color: var(--muted);
  font-size: var(--text-xs);
  font-style: italic;
  white-space: nowrap;
}

.walk-step-records {
  padding-left: calc(1.4em + var(--space-2));
  margin-top: var(--space-2);
}

/* state modifiers, set opacity / color, never structure */
.walk-step--climb     { opacity: 0.75; }
.walk-step--empty     { opacity: 0.7; }
.walk-step--shadowed  { opacity: 0.45; }
.walk-step--err::before { background: var(--red); }
.walk-step--err .walk-step-marker,
.walk-step--err .walk-step-note { color: var(--red); }

.walk-step--decides {
  background: var(--bg-decided);
  border-radius: var(--radius-sm);
  margin-left: calc(var(--space-2) * -1);
  padding-left: calc(var(--space-4) + var(--space-2));
}
.walk-step--decides::before {
  background: var(--accent);
  width: 0.7rem;
  height: 0.7rem;
  left: calc(var(--space-2) * -1 - 0.39rem);
}
.walk-step--decides .walk-step-marker { color: var(--accent); }
.walk-step--decides .walk-step-note {
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-xs);
  background: var(--accent);
  color: white;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}

.walk-fails {
  margin-top: var(--space-2);
  padding-left: calc(1.4em + var(--space-2));
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.walk-fails-label {
  color: var(--red);
  font-size: var(--text-xs);
  font-style: italic;
}

/* ============================================================
   13. verdict component
   ============================================================ */

.verdict { padding: 0; }

.verdict-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
}
.verdict-summary::-webkit-details-marker { display: none; }
.verdict-summary::before {
  content: '▸';
  display: inline-block;
  width: 1em;
  color: var(--muted);
  font-size: var(--text-xs);
}
.verdict[open] > .verdict-summary::before { content: '▾'; }
.verdict[open] > .verdict-summary { border-bottom: 1px solid var(--border-soft); }

.verdict-mark {
  font-weight: 700;
  width: 1.1em;
  flex-shrink: 0;
  font-size: var(--text-base);
}
.verdict-mark--pass { color: var(--green); }
.verdict-mark--fail { color: var(--red); }

.verdict-name { flex: 1; font-weight: 500; }

.verdict-meta {
  color: var(--muted);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
}

.verdict-grid {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-3) var(--space-5) var(--space-4) calc(var(--space-5) + 1.5rem);
  background: var(--bg-sunken);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.verdict-grid a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px dashed var(--muted);
}
.verdict-grid a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  border-bottom-style: solid;
}
.verdict-grid .status { font-weight: 600; }
.verdict-grid .status--pass { color: var(--green); }
.verdict-grid .status--fail { color: var(--red); }
.verdict-grid .meta { color: var(--muted); }

/* ============================================================
   14. record component (CAA detail card)
   ============================================================ */

.record { padding: 0; }
.record-flags {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.record-desc {
  margin: 0;
  color: var(--fg-soft);
  font-size: var(--text-sm);
}

/* On the smallest viewports, drop the prose explanations and keep just the
   values (criticality, raw record, domain, params). */
@media (max-width: 640px) {
  .record-desc,
  .rfc-note {
    display: none;
  }
}

/* On the smallest viewports, drop the prose explanations and keep just the
   values (criticality, raw record, domain, params). */
@media (max-width: 640px) {
  .record-desc,
  .rfc-note {
    display: none;
  }
}

/* ============================================================
   15. field grid (dl primitive, used in record + future detail views)
   ============================================================ */

.field-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  font-size: var(--text-sm);
}
.field-grid dt {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.field-grid dd {
  margin: 0;
  word-break: break-word;
}
.field-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ============================================================
   16. wide-screen polish
   ============================================================ */

@media (min-width: 1200px) {
  .page { padding: var(--space-6) var(--space-6) var(--space-7); }
  .page-header { padding: var(--space-5) var(--space-6); }
  .page-title { font-size: var(--text-lg); }
}