/* ---- bench (hero + controls) ------------------------------------ */
.bench {
  margin-top: 2.6rem;
}
.bench-sub { margin: 0 0 1.75rem; }

.query {
  display: flex;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.query .go {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
}
.query .go:hover { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.query input {
  flex: 1;
  font-family: var(--mono);
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}
.query input::placeholder { color: #6f7266; }
/* "Don't know your IP?" sits between the input and the switchbank - a
   plain underlined link, not a button, so it doesn't compete with the
   9 real tool switches below it for attention. */
.aux { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.5rem; margin: 0 0 1.4rem; }
.aux-label { font-size: 0.82rem; color: var(--muted); font-weight: 500; }
.chip {
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.chip:hover { border-color: var(--amber); background: var(--amber-dim); }
.switch-hint { margin: 0 0 0.55rem; font-size: 0.82rem; color: var(--muted); }
.myip-link {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.myip-link:hover { color: var(--ink); text-decoration-color: var(--amber); }
/* even grid, not a flex-wrap tag row - with 9 checks, a flex row breaks
   raggedly (a lone button orphaned on the last line, e.g. once "SSL"
   became "SSL Check" and no longer fit 8-across at 900px). 3 columns
   divides 9 evenly at any width above the mobile breakpoint; a fixed
   grid keeps every row full and every button the same size. */
@media (pointer: coarse) {
  .chip, .myip-link { min-height: 44px; display: inline-flex; align-items: center; }
  .chip { padding: 0 0.9rem; }
}
@media (max-width: 520px) { .query { gap: 0.5rem; } .query input { padding: 0.85rem 0.75rem; font-size: 0.95rem; } .query .go { padding: 0.85rem 1rem; } .aux .myip-link { margin-left: auto; } }
/* ---- results panel ------------------------------------------------ */
.panel {
  margin-top: 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}
.panel-verdict {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: var(--ink);
  color: var(--paper);
  padding: 1.05rem 1.3rem;
}
.lamp {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 0.3rem;
  flex-shrink: 0;
  background: #5a5e52;
}
.lamp-ok { background: var(--moss); box-shadow: 0 0 10px rgba(76, 122, 94, 0.7); }
.lamp-warn { background: var(--amber); box-shadow: 0 0 10px rgba(217, 142, 43, 0.7); }
.lamp-bad { background: var(--rust); box-shadow: 0 0 10px rgba(181, 80, 47, 0.7); }
.lamp-neutral { background: #5a5e52; }
.lamp-loading { background: var(--amber); animation: lamp-pulse 1s ease-in-out infinite; }
@keyframes lamp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .lamp-loading { animation: none; opacity: 0.75; }
}
.verdict-line {
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.4;
}
.verdict-meta {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--paper-muted);
  margin-top: 0.25rem;
}

.panel-body { padding: 0; }
.panel-empty {
  padding: 1.4rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.status-tag { display: inline-flex; align-items: center; font-size: 0.85rem; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 0.5rem; }
.dot-ok { background: var(--moss); }
.dot-bad { background: var(--rust); }
.dot-warn { background: var(--amber); }
.dot-neutral { background: #c7c9bd; }

/* ---- result card system (every tool uses these) -------------------------
   tiles = the at-a-glance numbers; sections have a bold title; key/value
   rows have a tinted LABEL cell and a dark VALUE cell; tables share the
   same header treatment; hints are small and tight. */
.hc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.hc-tiles.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .hc-tiles.cols-2 { grid-template-columns: minmax(0, 1fr); } }
.hc-tile { background: var(--surface); padding: 1rem 1.15rem 1.05rem; border-top: 3px solid #d9d8cc; min-width: 0; }
.hc-tile.ok { border-top-color: var(--moss); } .hc-tile.warn { border-top-color: var(--amber); }
.hc-tile.bad { border-top-color: var(--rust); } .hc-tile.neutral { border-top-color: #c7c9bd; }
.hc-k { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.hc-v { font-family: var(--mono); font-size: 1.55rem; font-weight: 700; line-height: 1.15; margin-top: 0.3rem; overflow-wrap: anywhere; color: var(--ink); }
.hc-tile.ok .hc-v { color: var(--moss); } .hc-tile.warn .hc-v { color: #b9731a; } .hc-tile.bad .hc-v { color: var(--rust); }
.hc-s { font-size: 0.78rem; color: var(--muted); margin-top: 0.25rem; overflow-wrap: anywhere; }
.hc-lede { margin: 0; padding: 1rem 1.3rem 0.1rem; font-size: 0.92rem; color: var(--ink); }
.hc-sec { padding: 1.15rem 1.3rem 1.25rem; border-top: 1px solid var(--line); }
.hc-tiles + .hc-sec, .hc-lede + .hc-sec, .hc-sec:first-child { border-top: 0; }
.hc-sec > h4 { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin: 0 0 0.7rem; font-family: var(--sans); font-size: 0.98rem; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; }
.hc-sec > h4 small { font-size: 0.78rem; font-weight: 500; color: var(--muted); }
.hc-rows, .table-wrap { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.hc-row { display: grid; grid-template-columns: 10rem minmax(0, 1fr); border-top: 1px solid var(--line); }
.hc-row:first-child { border-top: 0; }
.hc-label { background: var(--paper); padding: 0.6rem 0.9rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); border-right: 1px solid var(--line); }
.hc-value { padding: 0.6rem 0.9rem; font-family: var(--mono); font-size: 0.88rem; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; white-space: pre-line; min-width: 0; }
.hc-value.text { font-family: var(--sans); font-size: 0.9rem; }
.hc-value.dim { color: #8d9082; font-family: var(--sans); font-style: italic; font-weight: 400; }
.hc-chain { list-style: none; margin: 0; padding: 0; }
.hc-step { position: relative; display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto; gap: 0 0.7rem; padding: 0 0 0.9rem; }
.hc-step::before { content: ''; position: absolute; left: 0.52rem; top: 1.1rem; bottom: -0.1rem; width: 2px; background: var(--line); }
.hc-step:last-child { padding-bottom: 0; } .hc-step:last-child::before { display: none; }
.hc-dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; margin: 0.35rem 0 0 0.2rem; background: #c7c9bd; position: relative; z-index: 1; }
.hc-dot.ok { background: var(--moss); } .hc-dot.warn { background: var(--amber); } .hc-dot.bad { background: var(--rust); }
.hc-url { font-family: var(--mono); font-size: 0.88rem; font-weight: 500; overflow-wrap: anywhere; }
.hc-pill { display: inline-block; font-family: var(--mono); font-size: 0.74rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 4px; margin-right: 0.5rem; background: #e6e5da; color: var(--ink); }
.hc-pill.ok { background: rgba(76,122,94,.16); color: #34573f; } .hc-pill.warn { background: var(--amber-dim); color: #8a5712; } .hc-pill.bad { background: rgba(181,80,47,.14); color: #8c3a1e; }
.hc-ms { font-family: var(--mono); font-size: 0.82rem; color: var(--muted); white-space: nowrap; padding-top: 0.15rem; }
.hc-sub { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
.hc-sub.bad { color: var(--rust); }
.hc-wf { display: flex; height: 0.8rem; border-radius: 4px; overflow: hidden; background: var(--line); margin: 0.1rem 0 0.65rem; }
.hc-wf span { display: block; min-width: 3px; }
.wf-dns { background: #b9b59f; } .wf-connect { background: var(--moss); } .wf-tls { background: var(--amber); } .wf-wait { background: var(--ink); }
.hc-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.8rem; color: var(--muted); }
.hc-legend i { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; margin-right: 0.35rem; vertical-align: -1px; }
.hc-legend b { font-family: var(--mono); font-weight: 600; color: var(--ink); }
.hc-finds { list-style: none; margin: 0; padding: 0; }
.hc-finds li { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); font-size: 0.88rem; padding: 0.22rem 0; }
.hc-finds li::before { font-weight: 700; }
.hc-finds li.ok::before { content: '\2713'; color: var(--moss); } .hc-finds li.warn::before { content: '!'; color: #b9731a; }
.hc-gap { height: 0.6rem; }
.hc-tiles + .drawer { border-top: 0; }
.hc-long summary { list-style: none; cursor: pointer; }
.hc-long summary::-webkit-details-marker { display: none; }
.hc-clip { display: block; white-space: pre-line; overflow-wrap: anywhere; }
.hc-toggle { display: inline-block; margin-top: 0.3rem; font-family: var(--sans); font-size: 0.78rem; font-weight: 600; color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.hc-long summary:hover .hc-toggle { color: var(--ink); text-decoration-color: var(--amber); }
.hc-t-open { display: none; } .hc-long[open] .hc-t-open { display: inline-block; } .hc-long[open] .hc-t-closed, .hc-long[open] .hc-clip { display: none; }
.hc-full { white-space: pre-line; overflow-wrap: anywhere; }
.hc-hint { margin: 0.65rem 0 0; font-size: 0.78rem; color: var(--muted); }
.hc-bar { display: inline-block; height: 0.5rem; border-radius: 3px; background: var(--moss); vertical-align: middle; margin-right: 0.5rem; min-width: 2px; }
/* shared table: header cells use the same tint as the key/value label cells */
.table-wrap { overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.dtable th { text-align: left; background: var(--paper); color: var(--muted); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--line); }
.dtable td { padding: 0.6rem 0.9rem; border-top: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; color: var(--ink); }
.dtable tbody tr:first-child td { border-top: 0; }
.dtable td:first-child, .dtable th:first-child { white-space: nowrap; }
.dtable td.mono { font-family: var(--mono); font-size: 0.86rem; font-weight: 500; }
.dtable td.stacked { white-space: pre-line; }
.dtable td.nowrap { white-space: nowrap; }
.dtable td:first-child.wrap { white-space: normal; }
.dtable td.muted-cell { color: #8d9082; font-style: italic; }
.dtable tr.mismatch td { background: var(--amber-dim); }
.dtable tr.timedout td { color: #8d9082; }
@media (max-width: 720px) {
  .hc-row { grid-template-columns: 1fr; }
  .hc-label { border-right: 0; border-bottom: 1px solid var(--line); padding: 0.4rem 0.9rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; }
  .hc-step { grid-template-columns: 1.1rem minmax(0, 1fr); } .hc-ms { grid-column: 2; padding-top: 0.1rem; }
}
.note {
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0.9rem 1.3rem 1.3rem;
}

/* raw command drawer, same ink language as the verdict strip */
.drawer { border-top: 1px solid var(--line); }
.drawer summary {
  cursor: pointer;
  list-style: none;
  padding: 0.75rem 1.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  user-select: none;
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::before { content: '▸  '; }
.drawer[open] summary::before { content: '▾  '; }
.drawer summary:hover { color: var(--ink); }

.console {
  background: var(--ink-2);
  color: #d7dbcc;
  padding: 1.1rem 1.3rem 1.3rem;
  font-family: var(--mono);
  font-size: 0.83rem;
  line-height: 1.6;
}
.cmd-block { margin-bottom: 1rem; }
.cmd-block:last-child { margin-bottom: 0; }
.cmd-line {
  padding-left: 1.2em;
  text-indent: -1.2em;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 0.3rem;
}
.cmd-prompt { color: var(--amber); font-weight: 700; }
.cmd-text { color: #f1efe4; }
.out-line {
  padding-left: 1.4em;
  text-indent: -1.4em;
  white-space: pre-wrap;
  word-break: break-word;
  color: #9ba08c;
}
.out-line.blank { height: 0.7em; }
.out-empty { color: #6b6f60; font-style: italic; }

/* ---- cross-promo (ExpireFile / GhostDisk) ------------------------- */
.promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
}
.promo[hidden] { display: none; }
.promo-body {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}
.promo-icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-top: 0.1rem;
}
.promo-title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}
.promo-text {
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 42ch;
}
.promo-cta {
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--amber);
  color: var(--ink);
}
/* on mobile the CTA wraps below promo-body and, as an inline flex item
   centered by nothing, ends up a small button stranded at the left edge
   with dead space beside it - stack instead, and let the CTA span the
   full card width so it reads as a deliberate button, not a stray link. */
@media (max-width: 640px) {
  .promo {
    flex-direction: column;
    align-items: stretch;
  }
  .promo-cta {
    text-align: center;
    margin-top: 0.15rem;
  }
}

/* ---- blog carryover ------------------------------------------------ */
.articles { margin-top: 3.5rem; }
.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.article-card {
  display: block;
  overflow: hidden;
}
.article-card img {
  display: block;
  width: 100%;
  height: auto;
}
.article-body { padding: 0.9rem 1.1rem 1.1rem; }
.article-body h3 { margin: 0 0 0.35rem; }
.article-body p { margin: 0; }

/* ---- reference / spec sheet -------------------------------------- */
.reference { margin-top: 3.5rem; }
/* "What each check does" mirrors the tool buttons above: Host Check gets
   its own wide row, then the other nine in the same three columns. */
.refbank { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 0.5rem; }
.refbank .ref-item[data-tool="hostcheck"] { grid-column: 1 / -1; }
@media (max-width: 640px) { .refbank { grid-template-columns: 1fr; } }
.ref-item {
  padding: 1rem 1rem 1rem 0;
  border-bottom: 1px solid var(--line);
}

.ref-item h3 {
  margin: 0 0 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.ref-item p { margin: 0; }



/* ---- per-tool landing pages (/ssl-checker/ etc.; built by build/tool-pages.mjs) ----
   Article text is the shared .prose; cards are the shared card; headings the shared ones. */
.tp-crumbs { margin-top: 1.6rem; font-size: 0.8rem; color: var(--muted); }
.tp-crumbs a { color: var(--muted); }
.tp-crumbs a:hover { color: var(--ink); }
.tp-bench { margin-top: 1.1rem; }
.tp-article { margin-top: 3rem; }
dl.hc-rows { margin: 0 0 1.1rem; background: var(--surface); }
dl.hc-rows dt, dl.hc-rows dd { margin: 0; }
/* multi-line explainer text: roomier lines, and the label's first line sits level with the value's */
dl.hc-rows .hc-value.text { line-height: 1.5; }
dl.hc-rows .hc-label { line-height: 1.69; }
.tp-faq { border-top: 1px solid var(--line); }
.tp-q { border-bottom: 1px solid var(--line); }
.tp-q summary { cursor: pointer; padding: 0.95rem 1.6rem 0.95rem 0; font-weight: 600; font-size: 1rem; list-style: none; position: relative; }
.tp-q summary::-webkit-details-marker { display: none; }
.tp-q summary::after { content: '+'; position: absolute; right: 0.2rem; top: 0.8rem; font-family: var(--mono); font-size: 1.2rem; color: var(--amber); }
.tp-q[open] summary::after { content: '\2212'; }
.tp-q .tp-a { padding: 0 0 0.4rem; }
.tp-more { margin-top: 3.5rem; }
.tp-read { margin-top: 3.5rem; }
.tp-post { display: block; padding: 1rem 1.1rem; }
.tp-post strong { display: block; margin-bottom: 0.2rem; }
.ref-item h3 a { text-decoration: none; }
.ref-item h3 a:hover, .ref-more:hover { color: var(--rust); }
/* the link to a tool's own page: its own line, pinned to the bottom of the card so the links line up across a row */
.ref-item { display: flex; flex-direction: column; }
.ref-more { margin-top: auto; padding-top: 0.6rem; width: fit-content; color: var(--ink); font-weight: 600; font-size: 0.83rem; text-decoration-color: var(--amber); text-underline-offset: 2px; }

/* annotated example result on the tool pages (same card as the live output, with a note under each part) */
.example-result { margin: 1.25rem 0 1.5rem; border-style: dashed; }
.example-tag { padding: 0.65rem 1.15rem; background: var(--paper); border-bottom: 1px dashed var(--line-strong); font-size: 0.8rem; color: var(--muted); }
.example-tag strong { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin-right: 0.4rem; }
.example-result .hc-note { display: block; margin-top: 0.15rem; font-family: var(--sans); font-size: 0.83rem; font-weight: 400; line-height: 1.45; color: var(--muted); }
.example-result .hc-value.dim .hc-note { font-style: normal; }
.example-result .hc-hint { margin: 0.65rem 0 0; font-size: 0.78rem; line-height: 1.4; color: var(--muted); }
/* the example sits inside .prose, whose p / ul / li rules would otherwise leak into the live result's lede, chain and findings */
.example-result .hc-lede { margin: 0; padding: 1rem 1.3rem 0.1rem; font-size: 0.92rem; line-height: normal; color: var(--ink); }
.example-result .hc-chain, .example-result .hc-finds { margin: 0; padding: 0; line-height: normal; color: var(--ink); }
.example-result .hc-step, .example-result .hc-finds li { margin: 0; }
.example-result .hc-step { padding-bottom: 0.9rem; } .example-result .hc-step:last-child { padding-bottom: 0; }