/* DNS Paranoia site styles.
   Built on the Industry design system: every value here comes from a token in
   ds-styles.css, with a literal fallback so the page still renders if the token
   sheet is missing. Square corners, hairline frames, one solid accent object
   per screen. No corner registration marks (removed by request). */

:root {
  --ink: var(--color-text, #1d1f20);
  --ground: var(--color-bg, #f2f2f3);
  --accent: var(--color-accent, #5980a6);
  --accent-text: var(--color-accent-700, #416180);
  --accent-press: var(--color-accent-600, #597ea3);
  --line: rgba(29, 31, 32, 0.16);
  --rule: rgba(29, 31, 32, 0.09);
  --muted: rgba(29, 31, 32, 0.72);
  --muted-soft: rgba(29, 31, 32, 0.6);
  --console-bg: var(--color-accent-900, #1d2d3d);
  --console-ink: #e7edf3;
  --console-accent: var(--color-accent-400, #94bce3);
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body, Barlow, system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--color-accent-800, #2c455d); }
button, input, select { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
::selection { background: var(--color-accent-200, #d6ebff); }
input::placeholder { color: rgba(29, 31, 32, 0.42); }

/* ---- chrome ---- */

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(242, 242, 243, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: 1180px; margin: 0 auto; padding: 12px 24px;
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: baseline; gap: 9px; color: var(--ink); flex-shrink: 0; white-space: nowrap; }
.brand__name { font-family: var(--font-heading, "Barlow Condensed", sans-serif); font-weight: 700; font-size: 21px; letter-spacing: 0.02em; text-transform: uppercase; }
.brand__est { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted-soft); white-space: nowrap; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.site-nav a {
  padding: 7px 12px; color: var(--ink); white-space: nowrap; flex-shrink: 0;
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-weight: 600; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid transparent;
}
.site-nav a:hover { background: rgba(29, 31, 32, 0.06); color: var(--ink); }
.site-nav a[aria-current="page"] { border-color: var(--line); }
.site-nav .server {
  font-family: var(--mono); font-size: 12.5px; padding: 6px 9px;
  border: 1px solid var(--line); color: var(--accent-text); margin-left: 6px;
  white-space: nowrap; flex-shrink: 0;
}
.accent-rule { height: 2px; background: var(--accent); }

main { max-width: 1180px; margin: 0 auto; padding: 0 24px 96px; }

.site-footer { border-top: 1px solid var(--line); }
.site-footer__inner {
  max-width: 1180px; margin: 0 auto; padding: 28px 24px 40px;
  display: flex; flex-wrap: wrap; gap: 14px 32px;
  justify-content: space-between; align-items: baseline;
}
.site-footer p { margin: 0; font-size: 15px; color: var(--muted); max-width: 44ch; }
.site-footer span { font-family: var(--mono); font-size: 12px; color: var(--muted-soft); }

/* ---- type ---- */

h1, h2, h3 { font-family: var(--font-heading, "Barlow Condensed", sans-serif); text-transform: uppercase; }
.page-head { padding: 44px 0 0; }
.kicker {
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-weight: 600; font-size: 13px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted-soft);
}
.h1 { margin: 16px 0 16px; font-weight: 700; font-size: clamp(34px, 5.5vw, 52px); line-height: 1; }
.h1--hero { margin: 0 0 20px; font-size: clamp(40px, 7vw, 68px); line-height: 0.98; letter-spacing: -0.005em; text-wrap: balance; }
.h2 { margin: 0 0 4px; font-weight: 700; font-size: 26px; letter-spacing: 0.04em; }
.label { display: block; font-family: var(--font-heading, "Barlow Condensed", sans-serif); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-soft); margin-bottom: 7px; }
.panel-title { font-family: var(--font-heading, "Barlow Condensed", sans-serif); font-weight: 700; font-size: 19px; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; }
.lede { margin: 0 0 16px; font-size: 18.5px; max-width: 48ch; text-wrap: pretty; }
.sub { margin: 0 0 28px; font-size: 16.5px; color: var(--muted); max-width: 62ch; }
.mono { font-family: var(--mono); }
.section-rule { height: 1px; background: var(--line); margin: 6px 0 28px; }
.section { padding: 64px 0 0; }

/* ---- objects ---- */

.frame { border: 1px solid var(--line); }
.frame--pad { padding: 20px; }
.cell { border-left: 1px solid var(--line); padding: 2px 0 2px 18px; }
.grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--wide { gap: 32px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.grid--cards { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.stack { display: grid; gap: 22px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  padding: 11px 20px; font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-weight: 600; font-size: 16px; letter-spacing: 0.07em; text-transform: uppercase;
}
.btn:hover { background: rgba(29, 31, 32, 0.07); color: var(--ink); }
.btn--primary { border-color: var(--accent); background: var(--accent); color: var(--ground); }
.btn--primary:hover { background: var(--accent-press); color: var(--ground); }
.btn--block { width: 100%; justify-content: center; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

.console {
  background: var(--console-bg); color: var(--console-ink);
  padding: 18px 16px; font-family: var(--mono); font-size: 13.5px;
  line-height: 1.95; overflow-x: auto;
}
.console__prompt, .console__out { color: var(--console-accent); }
.console__note { color: rgba(231, 237, 243, 0.6); }
.console-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; white-space: nowrap;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted-soft);
}
.console-foot { padding: 13px 15px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.copy {
  cursor: pointer; background: transparent; border: 1px solid var(--line);
  padding: 3px 9px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(29, 31, 32, 0.7);
}
.copy:hover { background: rgba(29, 31, 32, 0.07); }

.note { border-left: 1px solid var(--line); padding-left: 18px; }
.note p { margin: 0; font-size: 15px; color: rgba(29, 31, 32, 0.78); text-wrap: pretty; }

/* ---- rows and tables ---- */

.rows { border-top: 1px solid var(--line); }
.row {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  padding: 14px 4px; border-bottom: 1px solid var(--rule);
}
.row:hover { background: rgba(29, 31, 32, 0.04); }
.row--static:hover { background: none; }
.row__query { flex: 0 0 260px; max-width: 100%; min-width: 0; }
.row__name { font-family: var(--mono); font-size: 13.5px; line-height: 1.7; overflow-wrap: anywhere; }
.row__desc { flex: 1 1 300px; min-width: 0; margin: 0; font-size: 15px; text-wrap: pretty; }
.row__case { flex: 0 0 220px; max-width: 100%; font-family: var(--mono); font-size: 13.5px; overflow-wrap: anywhere; }
.row__meaning { flex: 1 1 260px; min-width: 0; margin: 0; font-size: 15px; text-wrap: pretty; }
.row__key { flex: 0 0 180px; max-width: 100%; font-family: var(--font-heading, "Barlow Condensed", sans-serif); font-weight: 600; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
.row__val { flex: 0 0 200px; max-width: 100%; font-family: var(--mono); font-size: 13.5px; color: var(--accent-text); overflow-wrap: anywhere; }
.flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.flag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 2px 6px;
  border: 1px solid var(--line); color: rgba(29, 31, 32, 0.68);
}
.docs-link {
  font-family: var(--font-heading, "Barlow Condensed", sans-serif); font-weight: 600;
  font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid rgba(65, 97, 128, 0.45);
}

/* ---- filters ---- */

.filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.filters input { flex: 1 1 220px; min-width: 0; background: transparent; border: 1px solid var(--line); padding: 9px 12px; font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  cursor: pointer; padding: 6px 11px; border: 1px solid var(--line);
  background: transparent; color: rgba(29, 31, 32, 0.75);
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
}
.chip:hover { background: rgba(29, 31, 32, 0.07); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ground); }
.group { padding: 34px 0 0; }
.group__blurb { margin: 0 0 14px; font-size: 14.5px; color: var(--muted); max-width: 70ch; }
.group__count { font-family: var(--mono); font-size: 12px; color: var(--muted-soft); }
.group__head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-bottom: 4px; }
.empty { padding: 40px 0; font-size: 16px; color: var(--muted-soft); }

/* ---- forms ---- */

.field input, .field select { width: 100%; background: transparent; border: 1px solid var(--line); padding: 9px 12px; font-size: 15.5px; }
.field input { font-family: var(--mono); font-size: 14.5px; }
.field__note { margin: 8px 0 0; font-size: 14.5px; color: var(--muted); }
.seg { display: flex; flex-wrap: wrap; border: 1px solid var(--line); }
.seg button {
  cursor: pointer; flex: 1 1 90px; padding: 9px 10px; border: none;
  border-right: 1px solid var(--line); background: transparent;
  font-family: var(--mono); font-size: 13.5px; color: rgba(29, 31, 32, 0.8);
}
.seg button:last-child { border-right: none; }
.seg button:hover { background: rgba(29, 31, 32, 0.07); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--ground); }
.toggle {
  cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; background: transparent; border: 1px solid var(--line);
  padding: 10px 12px; font-size: 14.5px; color: rgba(29, 31, 32, 0.75);
}
.toggle:hover { background: rgba(29, 31, 32, 0.04); }
.toggle__box { flex: 0 0 auto; width: 12px; height: 12px; border: 1px solid rgba(29, 31, 32, 0.35); }
.toggle[aria-pressed="true"] { color: var(--ink); }
.toggle[aria-pressed="true"] .toggle__box { background: var(--accent); border-color: var(--accent); }
.toggle[disabled] { cursor: default; opacity: 0.55; }
.toggle[disabled]:hover { background: transparent; }
.suffix-field { display: flex; flex-wrap: wrap; align-items: stretch; border: 1px solid var(--line); margin-bottom: 14px; }
.suffix-field input { flex: 1 1 120px; min-width: 0; background: transparent; border: none; padding: 10px 12px; font-family: var(--mono); font-size: 15px; }
.suffix-field span { display: flex; align-items: center; padding: 10px 12px; border-left: 1px solid var(--line); font-family: var(--mono); font-size: 15px; color: var(--muted-soft); white-space: nowrap; }

/* ---- cards ---- */

.card { border: 1px solid var(--line); padding: 18px; }
.card__value { font-family: var(--mono); font-size: 15px; margin-bottom: 10px; }
.card__title { font-family: var(--font-heading, "Barlow Condensed", sans-serif); font-weight: 600; font-size: 17px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 6px; }
.card p { margin: 0; font-size: 14.5px; color: var(--muted); text-wrap: pretty; }
.doc-card { display: block; border: 1px solid var(--line); padding: 16px; color: var(--ink); }
.doc-card:hover { background: rgba(29, 31, 32, 0.04); color: var(--ink); }
.doc-card__name { font-family: var(--mono); font-size: 13.5px; color: var(--accent-text); margin-bottom: 8px; overflow-wrap: anywhere; }
.doc-card p { margin: 0; font-size: 14.5px; color: rgba(29, 31, 32, 0.75); text-wrap: pretty; }
.verdict { border: 1px solid var(--line); padding: 16px; }
.verdict__k { font-family: var(--font-heading, "Barlow Condensed", sans-serif); font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-soft); margin-bottom: 8px; }
.verdict__v { font-family: var(--mono); font-size: 17px; margin-bottom: 6px; overflow-wrap: anywhere; }
.verdict p { margin: 0; font-size: 14px; color: var(--muted); text-wrap: pretty; }

/* ---- doc pages ---- */

.doc-layout { padding: 44px 0 0; display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.doc-body { max-width: 68ch; }
.doc-body h2 { margin: 0 0 8px; font-family: var(--font-heading, "Barlow Condensed", sans-serif); font-weight: 600; font-size: 13px; letter-spacing: 0.18em; color: var(--muted-soft); }
.doc-body p { font-size: 16px; text-wrap: pretty; }
.doc-body ul, .doc-body ol { margin: 0 0 8px; padding-left: 20px; font-size: 16px; }
.doc-body li { margin-bottom: 8px; }
.doc-lede { margin: 0 0 28px; font-size: 18px; color: rgba(29, 31, 32, 0.75); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; margin-bottom: 16px; }
.breadcrumb a { font-family: var(--font-heading, "Barlow Condensed", sans-serif); font-weight: 600; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid rgba(65, 97, 128, 0.45); }
.spec { display: grid; gap: 10px; font-size: 14.5px; }
.spec__row { display: flex; gap: 12px; justify-content: space-between; border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.spec__k { font-family: var(--font-heading, "Barlow Condensed", sans-serif); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-soft); }
.spec__v { font-family: var(--mono); font-size: 13px; text-align: right; overflow-wrap: anywhere; }
.related { display: grid; gap: 8px; }
.related a { font-family: var(--mono); font-size: 13.5px; overflow-wrap: anywhere; }
.aside-title { font-family: var(--font-heading, "Barlow Condensed", sans-serif); font-weight: 700; font-size: 19px; letter-spacing: 0.05em; text-transform: uppercase; margin: 22px 0 10px; }
.aside-title:first-child { margin-top: 0; }

@media print {
  .site-header, .site-nav, .btn, .copy { display: none; }
  main { padding: 0; }
}

/* ---- overflow guards -----------------------------------------------------
   Belt and braces for the verdict cards. The labels are uppercase and
   letter-spaced for a condensed face; if that font ever fails to load the
   fallback is wider and the text used to run past the border. min-width:0 is
   the grid part: a grid item defaults to min-width:auto and will not shrink
   below its content, so a long value pushes the whole track wider instead of
   wrapping. */
.verdict { min-width: 0; }
.verdict__k { overflow-wrap: anywhere; word-break: break-word; }
.verdict p { overflow-wrap: anywhere; }
.grid > * { min-width: 0; }