/* styles.css — the production application's rules. The screen rules are demo1/product/styles.css (the accepted R3 baseline) LINE FOR
   LINE, so the three ported screens render as the baseline does; every colour, radius, size and family is a token from tokens.css (the
   canonical Foundation light export, synced by scripts/token-sync.mjs). The apps/web additions follow the baseline at the end, each value
   a token or a custom property declared in the additions' own :root. Fonts: the token families when installed, system fallbacks
   otherwise; nothing is fetched (font-src 'none').
   Shared rules (Foundation v2 §13, restated in every Surface Spec):
     - the 44px interactive floor: every control reaches 44px through min-height; a row link inline in a cell is the one exemption
     - focus renders with --focus / --focus-ring on every interactive surface; nothing relies on hover alone
     - pending (--pending-*) and unknown (--unk-*) treatments are the only treatments for those states
     - typography from the --fs-* scale: page title --fs-page, lead --fs-lead, micro --fs-micro */
:root {
  --page-max: 1180px;
  --control-min: 44px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--sunken); color: var(--charcoal); font-family: var(--ui); font-size: var(--fs-body); line-height: 1.45; }
a { color: var(--teal); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 4px var(--focus-ring); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: var(--sp-2); background: var(--charcoal); color: var(--nav-fg); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-ctl); z-index: 10; min-height: var(--control-min); display: inline-flex; align-items: center; }
.skip:focus { left: var(--sp-2); }

/* navigation */
.nav { display: flex; align-items: center; gap: var(--sp-4); background: var(--nav-bg); color: var(--nav-fg); padding: 0 var(--sp-5); height: 52px; border-bottom: 1px solid var(--nav-line); }
.nav-brand { font-family: var(--display); font-size: var(--fs-heading); font-weight: 600; color: var(--nav-fg); margin-right: var(--sp-3); }
.nav nav { display: flex; gap: var(--sp-2); }
.nav-item { background: transparent; border: 1px solid transparent; color: var(--nav-dim); font: inherit; font-size: var(--fs-label); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; padding: 0 12px; min-height: var(--control-min); display: inline-flex; align-items: center; border-radius: var(--r-ctl); cursor: pointer; }
.nav-item:hover { color: var(--nav-fg); }
.nav-item[aria-current="page"] { background: var(--nav-current-bg); color: var(--nav-fg); }

/* page */
.page { max-width: var(--page-max); margin: 0 auto; padding: var(--sp-5) var(--sp-5) 64px; }
.page:focus { outline: none; }
.page-head { margin-bottom: var(--sp-5); }
h1 { font-family: var(--display); font-size: var(--fs-page); font-weight: 500; margin: 0 0 var(--sp-2); line-height: 1.2; }
h1:focus { outline: none; }
h2 { font-family: var(--display); font-size: var(--fs-heading); font-weight: 500; margin: 0; }
h3 { font-family: var(--ui); font-size: var(--fs-object); font-weight: 600; margin: 0; }
.lede { margin: 0; color: var(--tm); font-size: var(--fs-lead); max-width: 70ch; }
.micro { font-size: var(--fs-micro); color: var(--tm); }
.mono { font-family: var(--mono); }
.crumb { margin: 0 0 var(--sp-2); font-size: var(--fs-meta); color: var(--tm); }
.meta { font-size: var(--fs-meta); color: var(--tm); }
.absent { color: var(--tm); font-style: italic; }

/* panels */
.panel { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--r-panel); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); }
.panel-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.panel-note { margin: 0 0 var(--sp-3); color: var(--tm); font-size: var(--fs-panel); max-width: 72ch; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--sp-5); margin: 0; font-size: var(--fs-panel); }
.facts dt { color: var(--tm); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.facts dd { margin: 0; }

/* table */
.grid { width: 100%; border-collapse: collapse; background: var(--sf); border: 1px solid var(--bd); border-radius: var(--r-panel); font-size: var(--fs-cell); }
.grid th, .grid td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); }
.grid thead th { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; color: var(--tm); font-weight: 600; background: var(--sunken); border-bottom: 1px solid var(--bd); }
.grid tbody th { font-weight: 600; }
.grid tbody tr:last-child th, .grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover { background: var(--hov); }
.ref-link { font-family: var(--mono); font-size: var(--fs-cell); text-decoration: none; }
.ref-link:hover { text-decoration: underline; }
.row-act { text-align: right; white-space: nowrap; }
.row-act .btn { text-decoration: none; }

/* inbox: counts, controls, fixed table, reported sub-row */
.counts { margin: 0 0 var(--sp-3); font-size: var(--fs-meta); color: var(--tm); }
.controls { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: end; margin-bottom: var(--sp-3); }
.seg { display: inline-flex; gap: 0; }
.seg .seg-item { border-radius: 0; margin-left: -1px; }
.seg .seg-item:first-child { border-radius: var(--r-ctl) 0 0 var(--r-ctl); margin-left: 0; }
.seg .seg-item:last-child { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.seg .seg-item[aria-pressed="true"] { background: var(--teal-tint); border-color: var(--teal-tint-bd); color: var(--teal); }
.field-inline { grid-auto-flow: row; }
.field-label { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; color: var(--tm); font-weight: 600; }
.scroll-x { overflow-x: auto; border: 1px solid var(--bd); border-radius: var(--r-panel); background: var(--sf); }
.scroll-x:focus-visible { outline: 2px solid var(--focus); box-shadow: 0 0 0 4px var(--focus-ring); }
.grid-fixed { table-layout: fixed; border: 0; border-radius: 0; }
.grid-fixed th, .grid-fixed td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid-fixed td > div, .grid-fixed th > div { overflow: hidden; text-overflow: ellipsis; }
.rows-comfy tbody th, .rows-comfy tbody td { padding-top: var(--row-comfy); padding-bottom: var(--row-comfy); }
.rows-dense tbody th, .rows-dense tbody td { padding-top: var(--row-compact); padding-bottom: var(--row-compact); }
.wait { color: var(--wait-fg); }
.secondary { color: var(--ts); }
.svc + .svc { margin-top: 4px; }
.row-reported td { background: var(--sunken); border-left: 3px solid var(--wait-bd); white-space: normal; }
.reported { display: grid; gap: var(--sp-2); font-size: var(--fs-panel); }
.reported-head { display: flex; align-items: center; gap: var(--sp-3); }
.reported .facts { grid-template-columns: max-content 1fr max-content 1fr; }

/* tags */
.tag { display: inline-block; font-size: var(--fs-label); font-weight: 600; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.tag-ok   { background: var(--ok-bg);   border-color: var(--ok-bd);   color: var(--ok-fg); }
.tag-wait { background: var(--wait-bg); border-color: var(--wait-bd); color: var(--wait-fg); }
.tag-due  { background: var(--due-bg);  border-color: var(--due-bd);  color: var(--due-fg); }
.tag-mute { background: var(--mute-bg); border-color: var(--mute-bd); color: var(--mute-fg); }
.tag-live { background: var(--live-bg); border-color: var(--live-bd); color: var(--live-fg); }
.tag-pending { background: var(--pending-bg); border-color: var(--pending-bd); color: var(--pending-fg); }
.tag-unk  { background: var(--unk-bg);  border-color: var(--unk-bd);  color: var(--unk-fg); }
.pending { background: var(--pending-bg); border-left: 2px dashed var(--pending-bd); color: var(--pending-fg); padding: var(--sp-2) var(--sp-3); }
.unknown { color: var(--unk-fg); }

/* buttons */
.btn { font: inherit; font-size: var(--fs-panel); font-weight: 600; padding: 0 14px; min-height: var(--control-min); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-ctl); border: 1px solid var(--bd-strong); background: var(--sf); color: var(--charcoal); cursor: pointer; }
.btn:hover { background: var(--hov); }
.btn-primary { background: var(--teal); border-color: var(--teal); color: var(--nav-fg); }
.btn-primary:hover { background: var(--teal-mid); }
.btn-secondary { background: var(--sf); }
.btn-block { width: 100%; }

/* case header, strips, tracks and axes */
.case-title { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: flex-start; flex-wrap: wrap; }
.case-pills { display: flex; gap: var(--sp-4); text-align: right; }
.strip { display: flex; flex-wrap: wrap; gap: 0; margin: var(--sp-3) 0 0; border: 1px solid var(--bd); border-radius: var(--r-panel); background: var(--sf); }
.strip > dt, .strip > dd { margin: 0; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-panel); }
.strip > dt { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; color: var(--tm); border-left: 1px solid var(--rule-soft); }
.strip > dt:first-child { border-left: 0; }
.strip > dd { padding-left: 0; }
.strip-derived { flex-direction: column; }
.strip-derived > dt { border-left: 0; padding-bottom: 0; }
.btn-due { border-color: var(--due-bd); color: var(--due-fg); }
.tracks { display: grid; gap: var(--sp-3); }
.track { border: 1px solid var(--bd); border-radius: var(--r-panel); padding: var(--sp-3) var(--sp-4); background: var(--sunken); }
.track-head { display: flex; justify-content: space-between; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-3); }
.axes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.axis { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--r-ctl); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-panel); }
.verdict-ok { color: var(--ok-fg); }
.empty-inline { padding: var(--sp-4) var(--sp-4); text-align: left; }

/* candidates */
.cands { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.cand { display: grid; grid-template-columns: 56px 1fr minmax(220px, 280px); gap: var(--sp-3) var(--sp-4); align-items: start; border: 1px solid var(--bd); border-radius: var(--r-panel); padding: var(--sp-3) var(--sp-4); background: var(--sunken); }
.cand-rank { font-family: var(--display); font-size: var(--fs-page); line-height: 1; color: var(--tm); }
.cand-name { font-family: var(--display); font-size: var(--fs-object); font-weight: 500; margin: 0; }
.cand-strong { border-color: var(--ok-bd); background: var(--sf); }
.cand-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 4px; }
.cand-evidence { margin: 0 0 4px; }
.cand-act { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* form */
.form { display: grid; grid-template-columns: repeat(2, minmax(160px, 260px)); gap: var(--sp-3) var(--sp-4); align-items: end; }
.field { display: grid; gap: 4px; }
.field label { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .04em; color: var(--tm); font-weight: 600; }
.field input, .field select { font: inherit; font-size: var(--fs-body); padding: 0 10px; min-height: var(--control-min); border: 1px solid var(--bd-ctl); border-radius: var(--r-ctl); background: var(--sf); color: var(--charcoal); }
.field-error { grid-column: 1 / -1; margin: 0; color: var(--due-fg); font-size: var(--fs-panel); min-height: 1.2em; }
.form-act { grid-column: 1 / -1; }
.items { margin: 0; padding-left: 20px; }

/* notices and empty states */
.notice { border-radius: var(--r-panel); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); border: 1px solid; font-size: var(--fs-panel); }
.notice-ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok-fg); }
.empty { background: var(--sf); border: 1px dashed var(--bd-strong); border-radius: var(--r-panel); padding: 40px var(--sp-5); text-align: center; color: var(--tm); }
.empty h2, .empty h1 { color: var(--charcoal); }

@media (max-width: 760px) {
  .page { padding: var(--sp-4) var(--sp-4) 48px; }
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: var(--sp-2); }
  .form { grid-template-columns: 1fr; }
  .cand { grid-template-columns: 40px 1fr; }
  .cand-act { grid-column: 1 / -1; }
  .axes { grid-template-columns: 1fr 1fr; }
  .case-pills { text-align: left; }
  .grid thead { position: absolute; left: -9999px; }
  .grid, .grid tbody, .grid tr, .grid th, .grid td { display: block; }
  .grid tr { border-bottom: 1px solid var(--bd); padding: var(--sp-2) 0; }
  .grid th, .grid td { border: 0; padding: 4px 12px; }
  .row-act { text-align: left; }
}

/* ---- apps/web additions (not in the baseline file) --------------------------------------------------------------------------------
   The baseline wrote the inbox's fixed column widths as inline style attributes; the application's CSP (style-src 'self') refuses those,
   so the same widths are custom properties here. The rest: the anchor form of the navigation item (React Router's NavLink), the signed-out
   page title, a refused act (the due treatment), the purpose and local sign-in choices, and the disabled state of a button during an act. */
:root {
  --col-inbox-1: 190px; --col-inbox-2: 190px; --col-inbox-3: 200px; --col-inbox-4: 220px; --col-inbox-5: 96px;
  --col-inbox-6: 120px; --col-inbox-7: 150px; --col-inbox-8: 176px; --col-inbox-9: 120px;
  --inbox-min: calc(var(--col-inbox-1) + var(--col-inbox-2) + var(--col-inbox-3) + var(--col-inbox-4) + var(--col-inbox-5) + var(--col-inbox-6) + var(--col-inbox-7) + var(--col-inbox-8) + var(--col-inbox-9));
  --form-single: 560px;
}
.nav-item { text-decoration: none; }
.page-title { font-family: var(--display); font-size: var(--fs-title); margin: 0 0 var(--sp-3); }
.grid-inbox { min-width: var(--inbox-min); }
.col-inbox-1 { width: var(--col-inbox-1); } .col-inbox-2 { width: var(--col-inbox-2); } .col-inbox-3 { width: var(--col-inbox-3); }
.col-inbox-4 { width: var(--col-inbox-4); } .col-inbox-5 { width: var(--col-inbox-5); } .col-inbox-6 { width: var(--col-inbox-6); }
.col-inbox-7 { width: var(--col-inbox-7); } .col-inbox-8 { width: var(--col-inbox-8); } .col-inbox-9 { width: var(--col-inbox-9); }
.notice-problem { background: var(--due-bg); border-color: var(--due-bd); color: var(--due-fg); }
.form-single { grid-template-columns: minmax(0, var(--form-single)); }
.choice { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-2); min-width: 0; }
.choice legend { padding: 0; margin-bottom: var(--sp-2); }
.choice-item { display: flex; gap: var(--sp-3); align-items: flex-start; min-height: var(--control-min); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--bd-ctl); border-radius: var(--r-ctl); background: var(--sf); cursor: pointer; }
.choice-item:hover { background: var(--hov); }
.choice-item input { width: var(--sp-4); height: var(--sp-4); margin: var(--sp-2) 0 0; accent-color: var(--teal); }
.choice-label { display: block; font-weight: 600; font-size: var(--fs-panel); }
.choice-hint { display: block; }
.btn:disabled { background: var(--neutral); border-color: var(--bd); color: var(--tm); cursor: not-allowed; }
/* the deployed sign-in's Sign out, at the end of the navigation bar (token-valued) */
.nav-actions { margin-left: auto; display: flex; gap: var(--sp-2); }

/* ---- the ANIRA signed-out page (owner landing-page ruling 2026-10-09): the earlier portal's composition, rebuilt with the tokens.
   Light text on the field is solid or at least 80% white (WCAG AA on #0a2e28..#114e46); the accent circles are decoration only. */
.landing { position: relative; overflow: hidden; min-height: 100vh; display: flex; background: linear-gradient(135deg, var(--teal) 0%, #0c3830 50%, #0a2e28 100%); color: var(--nav-fg); }
.landing-circle { position: absolute; border-radius: 50%; background: var(--acid); pointer-events: none; }
.landing-circle-a { top: -120px; right: -120px; width: 400px; height: 400px; opacity: .04; }
.landing-circle-b { bottom: -80px; left: -80px; width: 300px; height: 300px; opacity: .06; }
.landing-brand { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 3rem 4rem 5rem; max-width: 560px; }
.landing-wordmark { display: block; width: 200px; height: auto; margin: 0 0 32px -16px; }
.landing-headline { font-family: var(--display); font-size: 34px; line-height: 1.25; font-weight: 500; margin: 0 0 16px; color: var(--nav-fg); }
.landing-body { font-size: 16px; line-height: 1.7; margin: 0 0 12px; max-width: 420px; color: rgba(255, 255, 255, .86); }
.landing-support { font-size: 15px; line-height: 1.6; margin: 0; max-width: 420px; color: rgba(255, 255, 255, .86); }
.landing-indicators { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 40px 0 0; padding: 0; }
.landing-indicators li { background: rgba(255, 255, 255, .12); border-radius: 20px; padding: 6px 14px; font-size: 13px; color: var(--nav-fg); }
.landing-footer { position: absolute; bottom: 32px; left: 4rem; margin: 0; font-size: 12px; color: rgba(255, 255, 255, .8); }
.landing-access { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.landing-access:focus { outline: none; }
.access-card { background: var(--sf); color: var(--charcoal); width: 100%; max-width: 440px; border-radius: 20px; padding: 2.75rem 2.5rem; box-shadow: 0 25px 60px rgba(0, 0, 0, .3); }
.access-title { font-family: var(--display); font-size: 30px; font-weight: 500; margin: 0 0 8px; color: var(--charcoal); }
.access-lede { font-size: 17px; margin: 0 0 6px; color: var(--charcoal); }
.access-org { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--teal); }
.access-go { margin-top: 28px; min-height: 48px; font-size: 16px; border-radius: 10px; }
.access-note { font-size: 14px; color: var(--ts); margin: 12px 0 0; }
.access-help { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--bd); font-size: 14px; color: var(--ts); }
.access-help p { margin: 0; }
.access-help-title { font-weight: 600; color: var(--charcoal); margin-bottom: 2px !important; }
@media (max-width: 767px) {
  .landing { flex-direction: column; }
  .landing-brand { max-width: none; padding: 2.5rem 1.5rem 1.5rem; }
  .landing-wordmark { width: 150px; margin-bottom: 20px; }
  .landing-headline { font-size: 26px; }
  .landing-indicators { margin-top: 20px; }
  .landing-brand { flex: none; justify-content: flex-start; }
  .landing-footer { position: static; margin-top: 16px; }
  .landing-access { flex: none; align-items: flex-start; padding: 0 1rem 2rem; }
  .access-card { max-width: 560px; padding: 2rem 1.5rem; }
}
.nav-logo { display: block; height: 35px; width: auto; margin-right: var(--sp-2); }   /* the governed dark wordmark on the deep-teal bar */