/* firewall demo: additions on top of site.css (same tokens; no inline styles anywhere). */

[hidden] { display: none !important; }

.honesty { font-family: var(--mono); font-size: var(--fs-0); color: var(--muted); max-width: 70ch; margin-top: 1.25rem; line-height: 1.5; }
.honesty b { color: var(--ink); font-weight: 500; }
.data-status { font-family: var(--mono); font-size: var(--fs-0); color: var(--faint); }
.needs-js { border-left: 3px solid var(--warn-line); background: var(--warn-tint); padding: 0.7rem 1rem; font-size: var(--fs-1); max-width: var(--measure); margin: 1rem 0; }
.section > .sheet > h2 { margin-bottom: 1.25rem; }
.section .lead { max-width: var(--measure); color: var(--muted); margin-bottom: 1.25rem; }

/* ---------- diagram ---------- */
.diagram { border: 1px solid var(--rule); background: var(--white); padding: 1rem; overflow-x: auto; }
.diagram svg { width: 100%; height: auto; display: block; font-family: var(--sans); font-size: 13px; }
.diagram .d-box { fill: var(--white); stroke: var(--ink); stroke-width: 1.3; }
.diagram .d-box--panel { fill: var(--panel); }
.diagram .d-zone { fill: none; stroke: var(--warn-line); stroke-width: 1.3; stroke-dasharray: 6 4; }
.diagram .d-zone--lan { stroke: var(--accent); stroke-dasharray: none; }
.diagram .d-future { stroke-dasharray: 2 3; stroke: var(--muted); }
.diagram .d-text { fill: var(--ink); }
.diagram .d-text--muted { fill: var(--muted); font-size: 12px; }
.diagram .d-text--mono { font-family: var(--mono); font-size: 11.5px; fill: var(--muted); }
.diagram .d-text--zone { font-family: var(--mono); font-size: 12px; fill: var(--warn-ink); font-weight: 600; }
.diagram .d-text--zone-lan { fill: var(--accent-ink); }
.diagram .d-flow { fill: none; stroke: var(--accent); stroke-width: 1.8; marker-end: url(#arrow-ok); }
.diagram .d-flow--deny { stroke: var(--fail-ink); marker-end: url(#arrow-deny); stroke-dasharray: 5 3; }
.diagram .d-strike { stroke: var(--fail-ink); stroke-width: 2; }
.diagram .d-label { font-size: 12px; fill: var(--accent-ink); }
.diagram .d-label--deny { fill: var(--fail-ink); }
.diagram .d-link { fill: none; stroke: var(--rule-strong); stroke-width: 1.3; }
.diagram .d-arrow-ok { fill: var(--accent); }
.diagram .d-arrow-deny { fill: var(--fail-ink); }
.diagram [data-note] { cursor: default; outline: none; }
.diagram [data-note]:hover .d-box, .diagram [data-note]:focus .d-box, .diagram [data-note]:focus-visible .d-box { stroke: var(--accent); stroke-width: 2; }
.diagram [data-note]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scroll-hint { display: none; font-family: var(--mono); font-size: var(--fs-0); color: var(--faint); margin: 0.4rem 0 0; }
.diagram-note { min-height: 3.2em; font-size: var(--fs-1); margin-top: 0.85rem; }
.legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; font-family: var(--mono); font-size: var(--fs-0); color: var(--muted); margin: 0.75rem 0 0; padding: 0; list-style: none; }
.legend li { margin: 0; display: inline-flex; align-items: center; gap: 0.45em; }
.legend .sw { display: inline-block; width: 1.6em; height: 0; border-top: 2px solid var(--accent); }
.legend .sw--deny { border-top-color: var(--fail-ink); border-top-style: dashed; }
.legend .sw--zone { border-top: 0; width: 1.2em; height: 0.9em; border: 1.5px dashed var(--warn-line); }
.legend .sw--future { border-top-style: dotted; border-top-color: var(--muted); }

/* ---------- Table 1 ---------- */
.rules-table th, .rules-table td { font-size: var(--fs-0); padding-right: 0.7rem; }
.rules-table td.name { white-space: nowrap; }
.rules-table .rule-toggle {
  font: inherit; font-family: var(--mono); font-weight: 500; color: var(--accent-ink); background: none; border: 0; padding: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 0.16em; text-align: left;
}
.rules-table .rule-toggle::before { content: "+ "; color: var(--faint); }
.rules-table .rule-toggle[aria-expanded="true"]::before { content: "\2212 "; }
.no-js .rules-table .rule-toggle { text-decoration: none; cursor: default; }
.no-js .rules-table .rule-toggle::before { content: ""; }
.rules-table td.why { color: var(--muted); }
.rules-table td.sim { font-family: var(--mono); font-size: 0.78rem; min-width: 6.5rem; color: var(--muted); }
.rules-table .prof { display: block; font-family: var(--sans); font-size: 0.72rem; color: var(--muted); }
.rules-table .lines-row p.why { max-width: var(--measure); margin: 0 0 0.65rem; font-size: var(--fs-1); color: var(--ink); }
.rules-table td.act { font-family: var(--mono); white-space: nowrap; }
.rules-table td[data-label="Zones"] { white-space: nowrap; }
.rules-table .lines-row td { background: var(--panel); border-top: 0; padding: 0.75rem 0.9rem 0.9rem; }
.rules-table .lines-row pre { margin: 0 0 0.75rem; font-family: var(--mono); font-size: 0.8rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.rules-table tr.def td { color: var(--muted); }
.rules-table .list { font-family: var(--mono); font-size: 0.78rem; }
.rules-table .neg { color: var(--warn-ink); font-family: var(--mono); font-size: 0.72rem; font-weight: 600; }
.rules-table tbody tr[data-rule] > td:first-child { border-left: 3px solid transparent; padding-left: 0.5rem; }
.rules-table tr.trace-match > td:first-child { border-left-color: var(--accent); }
.rules-table tr.trace-match > td { background: var(--accent-tint); }
.rules-table tr.trace-zone > td:first-child, .rules-table tr.trace-source > td:first-child, .rules-table tr.trace-destination > td:first-child,
.rules-table tr.trace-application > td:first-child, .rules-table tr.trace-service > td:first-child { border-left-color: var(--rule-strong); }
.rules-table tr.trace-none > td { color: var(--faint); }
.rules-table[data-traced="true"] td.sim { color: var(--ink); }
.nat-table td { font-size: var(--fs-0); }
.why-note { margin-top: 1.25rem; }
details.design-notes { max-width: var(--measure); margin-top: 1rem; border-top: 1px solid var(--rule); padding-top: 0.6rem; }
details.design-notes summary { cursor: pointer; font-weight: 500; }
details.design-notes p { font-size: var(--fs-1); color: var(--muted); margin-top: 0.6rem; }

/* ---------- simulator ---------- */
.sim-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.5rem; max-width: 52rem; margin: 1.25rem 0 0; align-items: end; }
.sim-form label { display: grid; gap: 0.3rem; font-size: var(--fs-1); color: var(--muted); }
.sim-form label.chk { grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem; }
.sim-form select, .sim-form input[type="number"] { font: inherit; padding: 0.5rem 0.65rem; border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--white); color: var(--ink); width: 100%; }
.sim-form .actions { grid-column: 1 / -1; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.sim-result { margin-top: 1.25rem; font-family: var(--mono); font-size: var(--fs-1); }
.sim-result strong { font-weight: 600; }
.sim-result .sim-detail { color: var(--muted); }
.model-note { font-size: var(--fs-1); color: var(--muted); max-width: var(--measure); }
.tests-table td { font-size: var(--fs-0); }
.tests-table td.mono, .tests-table .t-sim { font-family: var(--mono); }
.tests-table .t-agree { font-family: var(--mono); white-space: nowrap; }
.tests-table td[data-label="From / to"] { white-space: nowrap; }
.tests-table tr.disagree td { background: var(--fail-tint); }
.tests-table .btn--small { padding: 0.15rem 0.5rem; font-size: var(--fs-0); }
.tests-summary { font-family: var(--mono); font-size: var(--fs-0); color: var(--muted); }

/* ---------- checker ---------- */
.checker { max-width: 60rem; margin-top: 1rem; }
.checker label { display: block; font-size: var(--fs-1); color: var(--muted); margin-bottom: 0.4rem; }
.checker textarea {
  width: 100%; min-height: 14rem; font-family: var(--mono); font-size: 0.82rem; line-height: 1.45; padding: 0.7rem 0.8rem;
  border: 1px solid var(--rule-strong); border-radius: 2px; background: var(--white); color: var(--ink); resize: vertical; tab-size: 4;
}
.check-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 0.75rem; }
.check-actions .mono { color: var(--faint); font-size: var(--fs-0); margin-left: auto; }
.check-summary { font-family: var(--mono); font-size: var(--fs-1); margin: 1rem 0 0.5rem; color: var(--ink); min-height: 1.5em; }
.verdicts { list-style: none; margin: 0 0 2.25rem; padding: 0; border-top: 2px solid var(--ink); max-height: 40rem; overflow-y: auto; }
.verdicts:empty { border-top: 0; }
.verdicts:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.verdict { margin: 0; padding: 0.5rem 0 0.5rem 0.75rem; border-bottom: 1px solid var(--rule); border-left: 3px solid var(--rule-strong); display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 0.15rem 0.75rem; font-size: var(--fs-0); }
.verdict .v-word { font-family: var(--mono); font-weight: 600; display: inline-flex; align-items: center; gap: 0.4em; }
.verdict .v-word::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; border: 1px solid currentColor; background: transparent; flex: none; }
.verdict .v-line { background: none; padding: 0; font-size: 0.82rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.verdict .v-why { grid-column: 2; color: var(--muted); font-size: var(--fs-0); overflow-wrap: anywhere; }
.verdict-ok { border-left-color: var(--accent); }
.verdict-ok .v-word { color: var(--accent-ink); }
.verdict-ok .v-word::before { background: currentColor; }
.verdict-fail { border-left-color: var(--fail-ink); background: var(--fail-tint); }
.verdict-fail .v-word { color: var(--fail-ink); }
.verdict-skip { border-left-color: var(--rule); }
.verdict-skip .v-word { color: var(--faint); }
.verdict-outside { border-left-color: var(--warn-line); background: var(--warn-tint); }
.verdict-outside .v-word { color: var(--warn-ink); }
.verdict-outside .v-word::before { border-style: dashed; }
.examples-table td { font-size: var(--fs-0); }
.examples-table td.line { font-family: var(--mono); font-size: 0.8rem; overflow-wrap: anywhere; }
.examples-table .exp { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.examples-table .exp--ok { color: var(--accent-ink); }
.examples-table .exp--fail { color: var(--fail-ink); }
.examples-table .exp--outside { color: var(--warn-ink); }
.not-checked { border-left: 3px solid var(--rule-strong); background: var(--panel); padding: 0.85rem 1rem; font-size: var(--fs-1); max-width: var(--measure); margin-top: 1.5rem; }
.not-checked p { margin-bottom: 0.4em; }

/* ---------- about ---------- */
.about dl { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.35rem 1rem; font-size: var(--fs-1); max-width: 60rem; margin: 0 0 1.25rem; }
.about dt { font-family: var(--mono); font-size: var(--fs-0); color: var(--faint); padding-top: 0.15rem; }
.about dd { margin: 0; }
.downloads { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: var(--fs-1); }
.downloads li { margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .sim-form { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .about dl { grid-template-columns: 1fr; gap: 0.1rem 0; }
  .about dt { margin-top: 0.6rem; }
  .verdict { grid-template-columns: 4.6rem minmax(0, 1fr); }
  .rules-table td.name, .rules-table td.sim, .rules-table td.why { white-space: normal; min-width: 0; }
  .diagram { padding: 0.5rem; }
  .diagram svg { min-width: 640px; }
  .scroll-hint { display: block; }
  .verdicts { max-height: 32rem; }
  .stack .lines-row td { grid-template-columns: 1fr; }
  .stack .lines-row td::before { content: none; }
  .stack tr[hidden] { display: none; }
  .stack td.sim:empty { display: none; }
  .check-actions .mono { margin-left: 0; flex-basis: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .rules-table tr > td { transition: background-color 120ms ease, border-color 120ms ease; }
}
@media print {
  .checker textarea { min-height: 8rem; }
  .diagram [data-note] .d-box { stroke: #000; }
}