/* The application shell and the signed-out entrance. Loaded by the app, never by the site. */

.shell {
  display: grid; grid-template-columns: var(--nav-width) 1fr; grid-template-rows: auto 1fr;
  grid-template-areas: "header header" "nav main"; min-block-size: 100vh;
}
.shell__header {
  grid-area: header; position: sticky; inset-block-start: 0; z-index: 20;
  display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; flex-wrap: wrap;
  min-block-size: var(--header-height); padding: var(--space-2) var(--space-5);
  background: var(--card); border-block-end: 1px solid var(--line);
}
.entrance .logo img { block-size: 2.4rem; }

.shell__nav { grid-area: nav; padding: var(--space-5) var(--space-4); border-inline-end: 1px solid var(--line); }
.shell__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.shell__nav a {
  display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-row);
  color: var(--ink); font-weight: 500; text-decoration: none;
}
.shell__nav a:hover { background: var(--paper-2); color: var(--blue); }
.shell__nav a[aria-current="page"] { background: var(--paper-2); color: var(--blue); font-weight: 600; }
/* The alerts icon, drawn in a fixed ink and sized to the label's own font, sits on its
   baseline like a letter would. */
.nav__icon { inline-size: 1.1em; block-size: 1.1em; vertical-align: text-bottom; margin-inline-end: var(--space-2); }

/* Positioned, so a visually hidden label is placed and clipped inside the main column, not by
   the page. A table too wide for the column scrolls in its own .table-scroll. */
.shell__main { grid-area: main; padding: var(--space-6) var(--space-5); min-inline-size: 0; position: relative; }
.shell__messages { display: grid; gap: var(--space-3); margin-block-end: var(--space-5); }

.page-head {
  display: flex; gap: var(--space-4); align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; margin-block-end: var(--space-5);
}
.page-head h1 { margin: 0; }

.entrance { min-block-size: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: var(--space-5); background: var(--paper-2); }
.entrance__panel { inline-size: min(28rem, 100%); overflow-wrap: anywhere; }

@media (max-width: 640px) {
  /* Three rows here, so the stretching row must be main's: with the desktop's "auto 1fr" a short
     page's leftover height went to the navigation. */
  .shell { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "header" "nav" "main"; }
  .shell__header { position: static; padding-inline: var(--space-4); }
  .shell__nav { border-inline-end: 0; border-block-end: 1px solid var(--line); overflow-x: auto; padding: var(--space-2) var(--space-4); }
  .shell__nav ul { grid-auto-flow: column; justify-content: start; }
  .shell__main { padding: var(--space-5) var(--space-4); }

  /* Tables become stacked cards rather than a horizontal scroll nobody finds. */
  .table thead { display: none; }
  .table caption { display: block; }
  .table, .table tbody, .table tr, .table td { display: block; }
  .table tr { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-row); margin-block-end: var(--space-3); padding: var(--space-2); }
  .table td { border-block-end: 0; padding: var(--space-2); overflow-wrap: anywhere; }
  .table td.indent { padding-inline-start: var(--space-5); }
  /* Only a labelled cell gets a label: an unlabelled one (the explanation, a nested table) would
     otherwise start with a lone colon. */
  .table td[data-label]:not([data-label=""])::before { content: attr(data-label) ": "; color: var(--ink-2); font-size: var(--text-sm); }
  /* A table inside a card (a record's DKIM and SPF results) is three short columns: it stays a
     table with its headings, since its cells carry no labels of their own. */
  .table .table { display: table; }
  .table .table caption { display: table-caption; }
  .table .table :is(th, td) { overflow-wrap: break-word; }
  .table .table thead { display: table-header-group; }
  .table .table tbody { display: table-row-group; }
  .table .table tr { display: table-row; background: none; border: 0; padding: 0; margin: 0; }
  .table .table td { display: table-cell; border-block-end: 1px solid var(--line); }
  /* Repeated here because the rule above turns every tr into a card, and an empty detail row
     would read "Explanation:" with nothing after it. */
  .detail-row:has(td:empty) { display: none; }
}

/* Organization switcher: a disclosure, so it works without any script. */
.switcher { position: relative; }
.switcher > summary { list-style: none; cursor: pointer; }
.switcher > summary::-webkit-details-marker { display: none; }
.switcher__list {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--space-2)); z-index: 10;
  min-inline-size: 14rem; margin: 0; padding: var(--space-2); list-style: none;
  background: var(--card); border-radius: var(--radius-panel); box-shadow: var(--shadow-lift);
}
.switcher__list a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-row); text-decoration: none; color: var(--ink); }
.switcher__list a:hover, .switcher__list a:focus-visible { background: var(--paper-2); color: var(--blue); }
.switcher__list a[aria-current="true"] { font-weight: 600; }

/* Domain and settings sub-navigation: a row of links that scrolls sideways when it runs out of
   room. The current one is underlined in the seal, as the site's menu labels are. */
.subnav, .settings-nav { margin-block-end: var(--space-5); border-block-end: 1px solid var(--line); }
.subnav ul, .settings-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; gap: var(--space-5); overflow-x: auto; }
.subnav a, .settings-nav a {
  display: inline-block; padding: var(--space-2) 0; color: var(--ink-2); font-weight: 500;
  text-decoration: none; border-block-end: 2px solid transparent; white-space: nowrap;
}
.subnav a:hover, .settings-nav a:hover { color: var(--ink); }
.subnav a[aria-current="page"], .settings-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-block-end-color: var(--seal); }

/* DNS check cards: the state's colour on the leading edge, its shape and word in the chip. */
.dns-check { border-inline-start: 4px solid var(--ink-2); }
.dns-check--ok { border-inline-start-color: var(--pass); }
.dns-check--info { border-inline-start-color: var(--info); }
.dns-check--warning { border-inline-start-color: var(--warn); }
.dns-check--error { border-inline-start-color: var(--fail); }
.findings { list-style: none; padding: 0; margin: 0; }
.finding { position: relative; padding-inline-start: 1.75rem; }
.finding::before { inset-inline-start: 0; inset-block-start: 0.45em; color: var(--info); }
.finding > * { margin: 0; }
.finding > * + * { margin-block-start: var(--space-1); }
.finding--ok::before { color: var(--pass); }
.finding--warning::before { color: var(--warn); }
.finding--error::before { color: var(--fail); }

/* A chart: the drawing (aria-hidden, uPlot fills it) sits above the table that is the record. */
.chart { margin: 0; }
.chart__canvas { min-block-size: 220px; margin-block-end: var(--space-3); }
.chart__table summary { cursor: pointer; color: var(--ink-2); }
.chart__table .table { margin-block-start: var(--space-2); }

/* The window and From filter above a trend: two selects that stack under 640 px. */
.window-form { align-items: end; margin-block-end: var(--space-4); }
@media (max-width: 640px) {
  .window-form { flex-direction: column; align-items: stretch; }
  .window-form .field { margin-block-end: 0; }
}

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.checklist li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--space-3); }
.checklist p { margin: var(--space-1) 0 0; }
.checklist .step-done { color: var(--pass); }

/* A QR code is scanned by a camera: the card's white behind it. */
.qr { inline-size: 12rem; block-size: 12rem; padding: var(--space-2); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-row); }

/* The OAuth consent page: the host the browser returns to, in large type, as the MCP
   authorization spec asks. A long host wraps rather than widening the panel. */
.consent-host { margin: 0; font-size: var(--text-xl); font-weight: 600; overflow-wrap: anywhere; }

/* A proposed record: what changes against the current one is marked in the pass colour. */
.diff-add { text-decoration: underline; text-decoration-color: var(--pass); background: var(--pass-bg); }

/* The SPF lookup tree: nested lists, indented on the inline side. */
.spf-tree__list { list-style: none; margin: 0; padding-inline-start: var(--space-4); }
.spf-tree__list > li { margin-block: var(--space-1); }
.spf-tree > .spf-tree__list { padding-inline-start: 0; }
.spf-tree__count { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* The readiness page's policy ladder: a numbered list, the published step marked in bold. */
.ladder { margin: 0; padding-inline-start: var(--space-5); }
.ladder li + li { margin-block-start: var(--space-1); }
.ladder [aria-current="step"] { font-weight: 600; }

/* The read-only share shell (phase 7 decision 45): the app's page head and cards, centred,
   without the navigation column. */
.share-shell { inline-size: min(72rem, 100%); margin-inline: auto; padding: var(--space-5) var(--space-5) var(--space-7); }
.share-shell__header {
  display: flex; gap: var(--space-4); align-items: center; justify-content: space-between;
  flex-wrap: wrap; margin-block-end: var(--space-5);
}
.share-shell__footer { margin-block-start: var(--space-7); padding-block-start: var(--space-4); border-block-start: 1px solid var(--line); }
@media (max-width: 640px) {
  .share-shell { padding-inline: var(--space-4); }
}