/* The four pages about how the site keeps its word: /trust, /status,
   /accessibility and /support. They are guides in shape (a page header and
   .panel.gd sections, from theme.css), and this adds only what they have
   that a guide does not: a quoted header, the status board and the support
   form. Tokens only: every size, corner and colour is the system's. */

/* A header quoted whole. It is one long line, so it wraps anywhere rather
   than pushing the page sideways on a phone. */
.gd pre.tr-quote { white-space: pre-wrap; overflow-wrap: anywhere; }
.tr-policy td:nth-child(2), .tr-map td { overflow-wrap: anywhere; }
.tr-policy { min-width: 560px; }
.tr-map { min-width: 620px; }
.tr-map th[scope="row"] { white-space: nowrap; font-weight: 500; }
.tr-live { font-weight: 600; color: var(--ink); }

/* ------------------------------------------------------------ /status */
.st-summary { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); font-size: var(--text-md); color: var(--ink); }
.st-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-faint); }
.st-dot[data-state="ok"] { background: var(--good); }
.st-dot[data-state="fail"] { background: var(--danger); }
.st-checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.gd .st-checks > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); align-items: center; margin: 0; padding: var(--space-3) 0; border-bottom: 1px solid var(--rule); }
.st-name { font-weight: 600; color: var(--ink); }
.st-detail { grid-column: 2 / -1; font-size: var(--text-sm); color: var(--ink-soft); }
.st-code { font: var(--text-xs)/1.4 var(--font-mono); color: var(--ink-soft); white-space: nowrap; }
.st-bad .st-detail { color: var(--danger); }

/* One cell per run, oldest on the left. The colour is never the only
   signal: each cell has its own label, and the line under the strip says
   the count in words. */
.st-strip { display: flex; gap: 2px; margin: var(--space-2) 0 var(--space-1); overflow: hidden; }
.st-cell { flex: 1 1 0; min-width: 2px; height: 22px; border-radius: var(--radius-sm); background: var(--good); opacity: .85; }
.st-cell[data-state="fail"] { background: var(--danger); opacity: 1; }
.st-cell[data-state="gap"] { background: var(--rule); opacity: 1; }
.st-strip-foot { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-xs); color: var(--ink-faint); margin: 0 0 var(--space-4); }
.st-incidents { list-style: none; margin: 0; padding: 0; }
.gd .st-incidents > li { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--rule-strong); background: var(--paper-inset); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.st-incidents > li[data-severity="outage"] { border-left-color: var(--danger); }
.st-incidents > li[data-severity="degraded"] { border-left-color: var(--warn); }
.st-incidents > li[data-severity="resolved"] { border-left-color: var(--good); }
.st-when { display: block; font: var(--text-xs)/1.4 var(--font-mono); color: var(--ink-faint); margin: 0 0 var(--space-1); }

/* ------------------------------------------------------------ /support */
.sp-form { display: grid; gap: var(--space-1) var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-form .field { margin-bottom: var(--space-3); }
.sp-form .sp-wide { grid-column: 1 / -1; }
.sp-form textarea { min-height: 8em; resize: vertical; }
.sp-check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--ink-soft); margin: 0 0 var(--space-3); }
.sp-check input { margin-top: 3px; }
.gd pre.sp-preview { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 22em; }
.sp-actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; margin: var(--space-3) 0 0; }
.sp-said { font-size: var(--text-sm); color: var(--ink-soft); margin: var(--space-2) 0 0; min-height: 1.5em; }
@media (max-width: 640px) {
  .sp-form { grid-template-columns: minmax(0, 1fr); }
}