/* DMARC checker & builder: the few things tools.css doesn't cover. Form
   sections that show for one mode at a time, the builder's extra options,
   small stacked text in table cells, and the rollout steps. Each step's state
   is written in a chip beside its marker, so colour is never the only signal. */

.mode-group { display: grid; gap: 14px; min-width: 0; }
.mode-group[hidden] { display: none; }

.small { font-size: 13px; line-height: 1.5; }
p.small, .card-body > p.small { margin: 0; }
.card-body > details.more-detail { min-width: 0; }
.table-wrap[tabindex]:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }

/* Four short figures fit on one row beside the rail */
.summary.dmarc-summary { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.summary.dmarc-summary .stat-value.mono { font-size: 16px; overflow-wrap: break-word; }

/* The builder */
.builder .segmented span { white-space: normal; }
.builder-advanced { display: grid; gap: 14px; margin-top: 14px; min-width: 0; }
.builder-advanced .row { align-items: flex-end; gap: 10px 18px; }
.builder-advanced fieldset.field { flex: 0 1 auto; }
.field.narrow { flex: 0 1 180px; }
.check.test-mode { min-height: 46px; }
#advanced > summary { font-size: 13.5px; }

/* Tables: on phones each row stacks, the first cell leading and the others
   labelled with their column's name (set by dmarc.js as data-label) */
table.data td.tag-cell { min-width: 12ch; max-width: 30ch; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  table.stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stacked, table.stacked tbody, table.stacked tr, table.stacked td { display: block; width: 100%; }
  table.stacked tr { padding: 11px 12px; border-top: 1px solid var(--line); }
  table.stacked tr:first-child { border-top: 0; }
  .card table.stacked td { padding: 0; border: 0; min-width: 0; max-width: none; text-align: left; }
  table.stacked td + td { margin-top: 8px; }
  table.stacked td + td::before {
    content: attr(data-label); display: block; margin-bottom: 3px;
    font-size: 11px; font-weight: 550; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3);
  }
}

/* Text stacked in a table cell */
.stack-tight { display: grid; gap: 4px; min-width: 0; justify-items: start; }
.stack-tight > p { margin: 0; line-height: 1.5; }
.stack-tight > p.note, .stack-tight .note { font-size: 13px; color: var(--ink-3); }
.tag-error { color: var(--fail); }
.tag-error::before { content: "Problem: "; font-weight: 600; }

/* Rollout steps: a numbered line of markers */
.rollout { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.rollout > li {
  position: relative; display: grid; gap: 8px; min-width: 0;
  padding: 0 0 18px 34px; counter-increment: step;
}
.rollout > li:last-child { padding-bottom: 0; }
.rollout > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line-2);
}
.rollout > li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 26px; bottom: 4px; width: 1px; background: var(--line-2); }
.rollout > li.done::before { color: var(--ink); background: var(--panel-3); }
.rollout > li.here::before { color: #0a0b10; background: var(--info); border-color: var(--info); }
.rollout-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rollout h3 { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.rollout p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.rollout li.later p, .rollout li.done p { color: var(--ink-3); }
/* Notes about the steps' records read as notes, not as the steps themselves */
.rollout p.muted, .card-body > p.muted { color: var(--ink-3); font-size: 13px; }