/* ArcConverge — the product's design layer on the platform tokens (design.css).
   Direction: daylight console (platform design/directions). No raw colours
   here: every colour is a platform token, so the contrast gate's proof holds.
   Status never relies on colour alone: a mark and a word travel with it. */

:root { --arcc-gutter: var(--space-6); }

/* ---- shell ---- */
body { margin: 0; background: var(--surface); color: var(--text); font-family: var(--font-family-sans); line-height: var(--font-leading-normal); }
.site-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-6); padding: var(--space-4) var(--arcc-gutter); border-bottom: 1px solid var(--border); background: var(--surface-raised); }
.wordmark { font-weight: var(--font-weight-semibold); letter-spacing: var(--font-tracking-tight); text-decoration: none; color: var(--text); font-size: var(--font-size-lg); }
.app-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--font-size-sm); }
.app-nav a, .app-nav button.link { color: var(--text); text-decoration: none; padding: var(--space-1) 0; border-bottom: 2px solid transparent; }
.app-nav a[aria-current="page"] { border-bottom-color: var(--accent); }
.content { max-width: var(--layout-container); margin: 0 auto; padding: var(--space-8) var(--arcc-gutter); }
.content.narrow { max-width: var(--layout-container-sm); }
.site-footer { padding: var(--space-6) var(--arcc-gutter); border-top: 1px solid var(--border); font-size: var(--font-size-sm); color: var(--text-muted); }
.site-footer nav a { color: inherit; }
h1 { font-size: var(--font-size-3xl); line-height: var(--font-leading-tight); letter-spacing: var(--font-tracking-tight); margin: 0 0 var(--space-4); text-wrap: balance; }
h2 { font-size: var(--font-size-xl); margin: var(--space-8) 0 var(--space-3); }
h3 { font-size: var(--font-size-md); margin: var(--space-6) 0 var(--space-2); }
p { max-width: var(--layout-measure); text-wrap: pretty; }
a { color: var(--action); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* ---- text ---- */
.muted { color: var(--text-muted); }
.hint { font-size: var(--font-size-sm); color: var(--text-muted); }
.error { border-left: 3px solid var(--critical); padding-left: var(--space-3); }
.notice { border-left: 3px solid var(--positive); padding-left: var(--space-3); }
code { font-family: var(--font-family-mono); font-size: var(--font-size-sm); word-break: break-all; }

/* ---- forms: 44px targets, visible focus, one column ---- */
form { display: grid; gap: var(--space-3); max-width: 28rem; margin: var(--space-4) 0; }
form.inline { display: inline; margin: 0; }
form.row { display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: none; }
label { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
input, select, textarea { font: inherit; padding: var(--space-2) var(--space-3); min-height: var(--layout-touch-target); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-raised); color: var(--text); }
button { font: inherit; min-height: var(--layout-touch-target); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--action); background: var(--action); color: var(--text-inverse); cursor: pointer; transition: background var(--motion-duration-fast) var(--motion-easing-standard), transform var(--motion-duration-instant) var(--motion-easing-standard); }
button:active { transform: translateY(1px); }
button:disabled { cursor: default; opacity: 0.5; }
button.quiet { background: var(--action-quiet); color: var(--text); border-color: var(--border-strong); }
button.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--action); text-decoration: underline; }
button.link.danger { color: var(--critical); }

/* ---- tables: dense, legible, scannable ---- */
table { border-collapse: collapse; width: 100%; margin: var(--space-4) 0; font-size: var(--font-size-sm); }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: var(--font-weight-semibold); color: var(--text-muted); font-size: var(--font-size-xs); letter-spacing: var(--font-tracking-wide); text-transform: uppercase; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.list { padding-left: 1.2rem; }

/* ---- badges and health: a mark and a word, never colour alone ---- */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: var(--font-size-xs); line-height: 1.8; white-space: nowrap; }
.badge-active, .badge-trial { border-color: var(--positive); }
.badge-suspended { border-color: var(--caution); }
.badge-deactivated { border-color: var(--critical); }
.health { display: inline-flex; align-items: center; gap: var(--space-2); font-variant-numeric: tabular-nums; }
.health::before { content: attr(data-mark); font-family: var(--font-family-mono); font-weight: var(--font-weight-semibold); width: 1.4em; text-align: center; }
.health-healthy { color: var(--positive); }
.health-degraded { color: var(--caution); }
.health-failing { color: var(--critical); }
.health-unknown { color: var(--text-muted); }
.kind-fields { margin-block: var(--space-4); }
.kind-fields[hidden] { display: none; }
.provenance { font-size: var(--font-size-xs); color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 0 var(--space-2); }

/* ---- cards used sparingly: a card carries a decision, not decoration ---- */
.card { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--elevation-sm); }
.stat { display: grid; gap: var(--space-1); }
.stat .value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.stat .label { font-size: var(--font-size-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--font-tracking-wide); }
.grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* ---- drawer and empty states ---- */
.drawer { position: fixed; inset: 0 0 0 auto; width: min(32rem, 100%); background: var(--surface-raised); border-left: 1px solid var(--border); box-shadow: var(--elevation-lg); padding: var(--space-6); overflow: auto; }
.empty { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: var(--space-6); color: var(--text-muted); max-width: var(--layout-measure); }
.empty strong { color: var(--text); }

/* Hover only where a pointer can hover: on a phone the first tap must not be eaten (AW-124). */
@media (hover: hover) {
  a:hover { color: var(--action-hover); }
  button:hover { background: var(--action-hover); border-color: var(--action-hover); color: var(--text-inverse); transform: translateY(-1px); }
  button.quiet:hover { background: var(--surface-sunken); color: var(--text); }
  button.link:hover { background: none; color: var(--action-hover); transform: none; }
  tbody tr:hover { background: var(--surface-sunken); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-width: 40rem) { :root { --arcc-gutter: var(--space-4); } .content { padding-top: var(--space-6); } table { display: block; overflow-x: auto; } }
.crumbs { font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: var(--space-3); }
.crumbs a { color: inherit; }
a.card { text-decoration: none; color: inherit; display: block; }
ol.list { padding-left: 1.4rem; }
textarea { font-family: var(--font-family-mono); font-size: var(--font-size-sm); }
.steps { padding-left: 1.4rem; } .steps li { margin: var(--space-2) 0; }

/* Health (C-27): the mark and the word carry the state; colour agrees. */
.health-failing { color: var(--critical); }
.score { font-family: var(--font-family-mono); font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); }
.lede { font-size: var(--font-size-lg); }
.hero { margin-block: var(--space-4); }
.small { font-size: var(--font-size-sm); }
.dimension { border-block-end: 1px solid var(--border); padding-block: var(--space-2); }
.dimension summary { cursor: pointer; }

/* Understand (C-28, C-29) */
.grid.two { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.attention li { padding-block: var(--space-1); }
.attention-failing::marker { color: var(--critical); }
.attention-not-read::marker { color: var(--caution); }

/* Control (C-30) */
.count { display: inline-block; min-width: 1.4em; padding: 0 var(--space-1); border-radius: 1em; background: var(--critical); color: var(--surface); font-size: var(--font-size-xs); text-align: center; font-variant-numeric: tabular-nums; }
.badge-open, .badge-acknowledged { border-color: var(--caution); }
.badge-in_progress { border-color: var(--positive); }
.badge-awaiting_approval { border-color: var(--critical); }
.badge-resolved, .badge-closed { color: var(--text-muted); }

/* Understand: the investigation layer (C-32) */
.notice.ai { border-inline-start: 4px solid var(--caution); }
.list.small li { font-size: var(--font-size-sm); }

/* Reports (C-35) */
.scroll { overflow-x: auto; }