/* Order and audit status portal. Builds on the layout and tokens in site.css. */
.portal { padding-top: var(--space-7); padding-bottom: var(--space-6); }
.portal h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; margin: var(--space-2) 0 var(--space-2); overflow-wrap: break-word; }
.portal-sub { color: var(--text-muted); margin-bottom: var(--space-5); max-width: 640px; }
.portal-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.portal-col { display: grid; gap: var(--space-5); min-width: 0; }
@media (max-width: 900px) { .portal-grid { grid-template-columns: minmax(0, 1fr); } }
.portal-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 3px; padding: var(--space-5); min-width: 0; }
.portal-card h2 { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-primary); margin-bottom: var(--space-4); font-family: var(--font-mono); }
.kv { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-2) var(--space-4); font-size: 0.92rem; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.pill { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: 3px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; border: 1px solid var(--border-strong); }
.pill.ok { color: var(--accent-success); border-color: var(--accent-success); background: color-mix(in srgb, var(--accent-success) 10%, transparent); }
.pill.wait { color: var(--accent-warning); border-color: var(--accent-warning); background: color-mix(in srgb, var(--accent-warning) 10%, transparent); }
.pill.proc { color: var(--accent-primary); border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 8%, transparent); }
.readiness-line { margin-bottom: var(--space-4); }
.steps { list-style: none; display: grid; gap: var(--space-4); counter-reset: step; }
.steps li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-3); align-items: start; position: relative; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: calc(0.75rem - 1px); top: 1.5rem; bottom: calc(var(--space-4) * -1); width: 2px; background: var(--border-subtle); }
.steps li.done:not(:last-child)::after { background: var(--accent-success); }
.step-dot { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--border-strong); display: grid; place-items: center; font-size: 0.7rem; color: var(--text-on-accent); background: var(--bg-surface); z-index: 1; }
.steps li.done .step-dot { background: var(--accent-success); border-color: var(--accent-success); }
.step-text { display: grid; gap: var(--space-1); min-width: 0; }
.step-label { font-weight: 600; }
.step-note { color: var(--text-muted); font-size: 0.85rem; }
.email-preview { background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: 3px; padding: var(--space-4); font-size: 0.8rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 14rem; overflow: auto; margin-top: var(--space-3); }
.events { list-style: none; font-size: 0.8rem; color: var(--text-muted); display: grid; gap: var(--space-1); }
.events time { margin-right: var(--space-3); }
.artifact-list { list-style: none; display: grid; gap: 0; }
.artifact-list li { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.artifact-list li:last-child { border-bottom: 0; }
.artifact-pending > span:first-child { color: var(--text-muted); }
.lookup-form .co-error { margin-bottom: var(--space-4); }
.lookup-sent { color: var(--accent-success); font-size: 0.9rem; margin-bottom: var(--space-4); }
.portal-note { color: var(--text-muted); font-size: 0.82rem; margin-top: var(--space-6); }
.portal .code-block { margin: var(--space-3) 0; }
/* Static snapshot only: format check, status readout and the onboarding template shown without a server. */
.ref-format { margin-top: var(--space-2); }
.ref-format.is-ok { color: var(--accent-success); }
.ref-format.is-bad { color: var(--accent-danger); }
.portal-offline { display: grid; gap: var(--space-5); margin-top: var(--space-6); min-width: 0; }
.status-list { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-2) var(--space-4); font-size: 0.85rem; margin: 0; }
.status-list dt { color: var(--text-muted); }
.status-list dd { margin: 0; overflow-wrap: anywhere; }
.status-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.status-actions .btn[hidden] { display: none; }
@media (max-width: 560px) { .status-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } .status-list dd { margin-bottom: var(--space-2); } }
@media (max-width: 560px) { .kv { grid-template-columns: minmax(0, 1fr); gap: 0; } .kv dd { margin-bottom: var(--space-2); } }