/* The domain tools: SaaS stack, hosting, CDN, DNS provider, technology and subdomains. Loaded after mail-tools.css,
   whose verdict, findings, facts, tables and rail navigation they share; this file holds only what these tools add. */

/* Rail navigation for six lookups with longer names: two columns. */
.mail-next[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Standalone landing introduction: the usable tool is the product demonstration. */
.tb-tool[data-landing] .tb-tool__head { display: grid; gap: var(--tb-space-2); padding: var(--tb-space-6) 0; }
.tb-tool[data-landing] .tb-tool__lede { max-width: 36ch; font-size: var(--tb-font-size-2xl); font-weight: var(--tb-weight-semibold); line-height: var(--tb-leading-snug); letter-spacing: var(--tb-tracking-display); color: var(--tb-text-strong); }
.web-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tb-space-2); margin-top: var(--tb-space-3); }
/* Keep lower sections outside the initial viewport while asynchronous evidence arrives. */
.tb-tool[data-landing] #result[aria-busy="true"], .tb-tool[data-landing] #result:not([data-state]) { min-height: 32rem; }
.web-result-actions .tb-button { white-space: nowrap; }
.web-details { border-top: 1px solid var(--tb-border-subtle); padding-top: var(--tb-space-3); }
.web-details__summary { cursor: pointer; color: var(--tb-text-strong); font-size: var(--tb-font-size-sm); padding: var(--tb-space-2) 0; }
.web-details__summary .tb-output__meta { margin-left: var(--tb-space-2); }
.web-details__summary:focus-visible { outline: 2px solid var(--tb-focus-ring); outline-offset: 2px; border-radius: var(--tb-radius-control); }
.web-details[open] > .web-details__summary { margin-bottom: var(--tb-space-3); }
@media (max-width: 40rem) {
  .tb-tool[data-landing] .tb-tool__head { padding: var(--tb-space-4) 0 var(--tb-space-5); }
  .tb-tool[data-landing] .tb-tool__lede { font-size: var(--tb-font-size-xl); }
  .web-details__summary .tb-output__meta { display: block; margin-left: 0; margin-top: var(--tb-space-1); }
}

/* Small shared parts: a two-letter product glyph (never a logo), a neutral label, a secondary line, mono cells. */
.web-glyph { display: grid; place-items: center; width: var(--tb-control-md); height: var(--tb-control-md); border: 1px solid var(--tb-border-subtle); border-radius: var(--tb-radius-control); background: var(--tb-surface-inset); color: var(--tb-data-header); font: var(--tb-weight-semibold) var(--tb-font-size-2xs) / 1 var(--tb-font-mono); letter-spacing: var(--tb-tracking-wide); }
.web-tag { display: inline-block; padding: 0 var(--tb-space-2); border: 1px solid var(--tb-border-subtle); border-radius: var(--tb-radius-full); background: var(--tb-surface-subtle); color: var(--tb-text-muted); font-size: var(--tb-font-size-2xs); line-height: 1.7; white-space: nowrap; vertical-align: middle; }
.web-sub { display: block; font-size: var(--tb-font-size-xs); color: var(--tb-text-muted); }
.web-mono { font-family: var(--tb-font-mono); font-size: var(--tb-font-size-xs); }

/* Evidence: where a detection came from and the exact text, the matched part marked. */
.web-evidence { display: flex; align-items: baseline; gap: var(--tb-space-2); min-width: 0; margin: 0; }
.web-evidence__where { flex: none; font-size: var(--tb-font-size-2xs); color: var(--tb-text-muted); }
.web-evidence code { min-width: 0; font: var(--tb-font-size-xs) / var(--tb-leading-normal) var(--tb-font-mono); color: var(--tb-text-body); overflow-wrap: anywhere; }
.web-evidence mark { padding: 0 1px; border-radius: 2px; background: var(--tb-highlight-wash); color: var(--tb-text-strong); }

/* The stack: groups by category, each item a glyph, its name and what it shows. */
.web-stack { list-style: none; display: grid; gap: var(--tb-space-5); margin: 0; padding: 0; }
.web-stack__title { display: flex; align-items: baseline; gap: var(--tb-space-2); margin: 0 0 var(--tb-space-2); font-size: var(--tb-font-size-xs); font-weight: var(--tb-weight-semibold); color: var(--tb-text-muted); }
.web-stack__count { font: var(--tb-font-size-2xs) var(--tb-font-mono); }
.web-stack__items { list-style: none; display: grid; margin: 0; padding: 0; border-top: 1px solid var(--tb-border-subtle); }
.web-stack__item { display: grid; grid-template-columns: var(--tb-control-md) minmax(0, 1fr); gap: var(--tb-space-3); padding: var(--tb-space-3) 0; border-bottom: 1px solid var(--tb-border-subtle); }
.web-stack__body { display: grid; gap: var(--tb-space-1); min-width: 0; }
.web-stack__name { margin: 0; font-size: var(--tb-font-size-sm); color: var(--tb-text-strong); }
.web-stack__version { font: var(--tb-font-size-xs) var(--tb-font-mono); color: var(--tb-text-body); }
.web-stack__note { margin: 0; font-size: var(--tb-font-size-xs); color: var(--tb-text-muted); }

/* Simple rows: a name, an optional count, then the value in mono. */
.web-rows { list-style: none; display: grid; margin: 0; padding: 0; border-top: 1px solid var(--tb-border-subtle); }
.web-rows__item { display: grid; grid-template-columns: minmax(8rem, 12rem) auto minmax(0, 1fr); align-items: baseline; gap: var(--tb-space-1) var(--tb-space-3); padding: var(--tb-space-2) 0; border-bottom: 1px solid var(--tb-border-subtle); font-size: var(--tb-font-size-sm); }
.web-rows__item > b { font-weight: var(--tb-weight-medium); color: var(--tb-text-strong); }
.web-rows__item > b[data-muted] { color: var(--tb-text-muted); font-weight: var(--tb-weight-regular); }
.web-rows__item > code { grid-column: 3; min-width: 0; font: var(--tb-font-size-xs) / var(--tb-leading-normal) var(--tb-font-mono); color: var(--tb-text-body); overflow-wrap: anywhere; white-space: pre-wrap; }
.web-rows__item > b + code { grid-column: 2 / -1; }
.web-rows__item > .web-rows__lead { grid-column: 1 / 3; color: var(--tb-text-strong); }
.web-rows__item > .web-rows__lead + .web-tag { grid-column: 3; justify-self: start; }
.web-rows__count { font: var(--tb-font-size-xs) var(--tb-font-mono); color: var(--tb-text-muted); white-space: nowrap; }

/* Hosting: one card per name, its alias chain, then its addresses. */
.web-host { display: grid; gap: var(--tb-space-3); padding: var(--tb-space-4); border: 1px solid var(--tb-border-subtle); border-radius: var(--tb-radius-card); background: var(--tb-surface-card); }
.web-host__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--tb-space-2); }
.web-host__name { margin: 0; font: var(--tb-weight-semibold) var(--tb-font-size-sm) var(--tb-font-mono); color: var(--tb-text-strong); overflow-wrap: anywhere; }
.web-path { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--tb-space-1) var(--tb-space-2); margin: 0; padding: 0; }
.web-path > li { display: inline-grid; gap: 1px; min-width: 0; }
.web-path > li + li::before { content: "→"; grid-row: 1 / 3; align-self: center; margin-right: var(--tb-space-2); color: var(--tb-text-muted); }
.web-path > li + li { grid-template-columns: auto minmax(0, 1fr); }
.web-path code { font: var(--tb-font-size-xs) var(--tb-font-mono); color: var(--tb-text-strong); overflow-wrap: anywhere; }
.web-path__step { font-size: var(--tb-font-size-2xs); color: var(--tb-text-muted); }
.web-addresses td { vertical-align: top; }
.web-addresses td:nth-child(2) { min-width: 9rem; }
.web-addresses td:nth-child(3), .web-addresses td:nth-child(4) { white-space: nowrap; }
.web-addresses td:last-child { white-space: normal; overflow-wrap: anywhere; }
.web-addresses td:first-child { white-space: nowrap; }

/* CDN: three lanes of evidence side by side. A lane that was not checked is quieter, not hidden. */
.web-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tb-space-2); }
.web-lane { display: grid; align-content: start; gap: var(--tb-space-2); min-width: 0; padding: var(--tb-space-3); border: 1px solid var(--tb-border-subtle); border-radius: var(--tb-radius-card); background: var(--tb-surface-card); }
.web-lane[data-status="pass"] { border-color: var(--tb-status-success-border); }
.web-lane[data-status="warn"] { border-color: var(--tb-status-warning-border); }
.web-lane[data-status="off"] { background: var(--tb-surface-inset); }
.web-lane__head { display: flex; align-items: center; justify-content: space-between; gap: var(--tb-space-2); }
.web-lane__title { margin: 0; font-size: var(--tb-font-size-sm); font-weight: var(--tb-weight-semibold); color: var(--tb-text-strong); }
.web-lane__sub { margin: 0; font-size: var(--tb-font-size-xs); color: var(--tb-text-muted); }
.web-lane__list { list-style: none; display: grid; gap: var(--tb-space-2); margin: 0; padding: 0; }
.web-lane__item { display: grid; gap: 2px; min-width: 0; }
.web-lane__item code { font: var(--tb-font-size-xs) / var(--tb-leading-normal) var(--tb-font-mono); color: var(--tb-text-body); overflow-wrap: anywhere; }
.web-lane__to { font-size: var(--tb-font-size-xs); font-weight: var(--tb-weight-semibold); color: var(--tb-text-strong); }
.web-lane__to--none { font-weight: var(--tb-weight-regular); color: var(--tb-text-muted); }
.web-lane__none { font-size: var(--tb-font-size-xs); color: var(--tb-text-muted); }

/* DNS providers: one bar split by share of nameservers, the larger share solid, the rest hatched. */
.web-split { display: flex; gap: 2px; height: var(--tb-space-2); margin-bottom: var(--tb-space-3); }
.web-split:empty { display: none; }
.web-split__part { min-width: var(--tb-space-3); border-radius: var(--tb-radius-sm); background: var(--tb-text-strong); }
.web-split__part[data-rank="minor"] { background: repeating-linear-gradient(135deg, var(--tb-status-warning-solid) 0 2px, var(--tb-status-warning-bg) 2px 4px); }
.web-rows__item[data-rank="minor"] > b::before { content: ""; display: inline-block; width: var(--tb-space-2); height: var(--tb-space-2); margin-right: var(--tb-space-2); border-radius: 2px; background: repeating-linear-gradient(135deg, var(--tb-status-warning-solid) 0 2px, var(--tb-status-warning-bg) 2px 4px); }
.web-rows__item[data-rank="major"] > b::before { content: ""; display: inline-block; width: var(--tb-space-2); height: var(--tb-space-2); margin-right: var(--tb-space-2); border-radius: 2px; background: var(--tb-text-strong); }

/* Technology: redirects on the way to the page. */
.web-redirects { list-style: none; display: grid; gap: var(--tb-space-1); margin: var(--tb-space-3) 0 0; padding: 0; }
.web-redirects > li { display: flex; align-items: baseline; gap: var(--tb-space-2); min-width: 0; font-size: var(--tb-font-size-xs); }
.web-redirects__status { font: var(--tb-weight-semibold) var(--tb-font-size-xs) var(--tb-font-mono); color: var(--tb-text-muted); }
.web-redirects code { min-width: 0; font: var(--tb-font-size-xs) var(--tb-font-mono); overflow-wrap: anywhere; }
.web-redirects > li::after { content: "→"; color: var(--tb-text-muted); }

/* Response headers a detection used are marked. */
.mail-anatomy tr[data-match] .tb-kv__key, .mail-anatomy tr[data-match] .mail-anatomy__value { color: var(--tb-text-strong); }
.mail-anatomy tr[data-match] .tb-kv__meaning { color: var(--tb-text-strong); font-weight: var(--tb-weight-medium); }

/* Subdomains: a filter, the views, Copy; then the names, the domain part quieter than the label. */
.web-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tb-space-2); margin-bottom: var(--tb-space-3); }
.web-toolbar > .tb-input { flex: 1 1 12rem; min-width: 0; }
.web-toolbar__chips { display: flex; flex-wrap: wrap; gap: var(--tb-space-1); }
.web-name { font: var(--tb-font-size-xs) var(--tb-font-mono); color: var(--tb-text-strong); overflow-wrap: anywhere; }
.web-zone { color: var(--tb-text-muted); }
.web-names tr[data-expired] .web-name, .web-names tr[data-expired] td { color: var(--tb-text-muted); }
.web-names td { vertical-align: top; }
.web-names td:nth-child(n+2):nth-child(-n+5) { white-space: nowrap; }
.web-name > span { white-space: nowrap; }

@media (max-width: 60rem) {
  /* Tables with data-cards stack at this tier: each row a block, each value under its column name, nothing scrolled away. */
  .mail-table[data-cards] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mail-table[data-cards], .mail-table[data-cards] tbody { display: block; }
  .mail-table[data-cards] tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--tb-space-2) var(--tb-space-3); padding: var(--tb-space-3) 0; border-top: 1px solid var(--tb-border-subtle); }
  .mail-table[data-cards] td { display: grid; gap: 2px; align-content: start; justify-items: start; padding: 0; border: 0; white-space: normal; min-width: 0; }
  .mail-table[data-cards] td:first-child { grid-column: 1 / -1; }
  .mail-table[data-cards] td[data-label]:not(:first-child)::before { content: attr(data-label); font: var(--tb-font-size-2xs) var(--tb-font-sans); color: var(--tb-text-muted); }
  .mail-table[data-cards] td:empty { display: none; }
  .web-names td:nth-child(n+2):nth-child(-n+5) { white-space: nowrap; }
  .web-lanes { grid-template-columns: minmax(0, 1fr); }
  .web-rows__item { grid-template-columns: minmax(0, 1fr) auto; }
  .web-rows__item > code, .web-rows__item > b + code { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .web-toolbar > .tb-input { flex-basis: 100%; }
  .web-host { padding: var(--tb-space-3); }
}
@media (forced-colors: active) {
  .web-split__part, .web-split__part[data-rank="minor"] { background: CanvasText; forced-color-adjust: none; }
  .web-split__part[data-rank="minor"] { background: GrayText; }
}
