/* CD-UX-SHELL-001 Phase 1 — shared presentation shell. No authority semantics. */
:root {
  color-scheme:dark;
  --cd-bg:#081117;--cd-surface:#101e25;--cd-raised:#162830;
  --cd-border:#2c4550;--cd-text:#f4f6f4;--cd-muted:#a4b9c0;
  --cd-teal:#72d6d0;--cd-amber:#f0c17b;--cd-focus:#a9efec;
  --cd-radius:15px;--cd-font:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --bg:var(--cd-bg);--panel:var(--cd-surface);--line:var(--cd-border);
  --text:var(--cd-text);--muted:#cbd6d6;--teal:var(--cd-teal);--gold:#d9b879;
}
html {scroll-behavior:smooth}
body {
  font:15.5px/1.6 var(--cd-font);color:var(--cd-text);
  background:radial-gradient(ellipse at 83% -8%,rgba(42,114,112,.21),transparent 39%),linear-gradient(180deg,#0b1820,#081117 42%,#070e13)
}
body :is(h1,h2,h3,h4,button,input,label,select,textarea) {font-family:var(--cd-font)}
h1 {font-weight:675;letter-spacing:-.045em;line-height:1.075;font-size:clamp(2.55rem,5.3vw,4.55rem)}
h2 {font-size:clamp(1.35rem,2vw,1.77rem);font-weight:650;line-height:1.22;letter-spacing:-.025em}
.hero {padding:clamp(36px,5vw,66px) 0 36px;max-width:960px}
.hero p {max-width:72ch}
.shell {width:min(1240px,94vw)}
.meta {color:var(--cd-muted);font-weight:650;font-size:11px;letter-spacing:.12em}
.card,.metric,.summary-item,.orientation-block {
  border:1px solid var(--cd-border);border-radius:var(--cd-radius);
  background:linear-gradient(149deg,rgba(22,39,46,.96),rgba(14,24,30,.97))
}
.card {padding:clamp(19px,2.25vw,27px);box-shadow:0 12px 32px rgba(0,0,0,.18)}
.card.wide {border-top-color:rgba(104,196,191,.42)}
.card h2 {margin-top:4px}
.card:focus-within {border-color:#4a7f83}
button,.button {
  border-radius:10px;font-size:.94rem;font-weight:680;min-height:44px;padding:11px 17px;
  background:#175354;border:1px solid #40918e;color:#f2fffd;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease
}
button:hover:not(:disabled),.button:hover {background:#206d6b;border-color:#6bc9c1;box-shadow:0 0 0 1px rgba(77,171,165,.12)}
button.secondary,.button.secondary {background:#142329;border-color:#42606a;color:#ebf4f2}
button.secondary:hover:not(:disabled),.button.secondary:hover {background:#1d3037}
button.consequence {background:#564126;border-color:#b69463;color:#fff2df}
button:disabled {opacity:.65;cursor:not-allowed}
:where(a,button,input,select,textarea,[tabindex]):focus-visible {outline:3px solid var(--cd-focus);outline-offset:3px}
input,select,textarea {min-height:44px;border-radius:10px;border:1px solid #44606a;background:#0b1920;color:var(--cd-text);font-size:16px}
input:hover,select:hover,textarea:hover {border-color:#5c8790}
label {font-size:12px;color:#c3d4d7;font-weight:650}
.rule {color:var(--gold)}
.status {color:#dfebe9;background:#172a30;border-color:#49626a;font-weight:700}
.status.teal {color:#9af0e8;border-color:#4b8a88}
.status.gold {color:#f7d8a4;border-color:#8d7148}
.metric b,.summary-item b,.context-list b {overflow-wrap:anywhere}
/* Accessible shared shell */
.cd-skip {position:absolute;top:-100px;left:12px;z-index:50;background:#d9f9f4;color:#001013;border-radius:8px;padding:9px 16px;font-weight:700}
.cd-skip:focus {top:10px}
.cd-appbar {display:flex;align-items:center;justify-content:space-between;gap:18px;padding:21px 0 18px;border-bottom:1px solid rgba(97,167,168,.32)}
.cd-brand-lockup {display:grid;gap:3px;flex:0 1 auto;min-width:0}
.cd-brand-link {text-decoration:none;color:var(--cd-text);font-size:17px;letter-spacing:.13em;font-weight:750;white-space:nowrap}
.cd-brand-link span {color:var(--cd-teal)}
.cd-surface-name {font-size:11px;color:#b6c9cb;letter-spacing:.15em;font-weight:680;text-transform:uppercase}
.cd-appbar-actions {display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px}
.cd-appbar-actions>button {min-height:38px;padding:7px 11px;font-size:.8rem}
.cd-state-chip {
  display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;min-height:29px;
  padding:5px 10px;border-radius:999px;border:1px solid #4a646e;
  background:#1b2c34;color:#e6eeee;letter-spacing:.07em;text-transform:uppercase;
  font-size:11px;font-weight:750;overflow-wrap:anywhere
}
.cd-state-chip[data-state='READY'],.cd-state-chip[data-state='VALID'],.cd-state-chip[data-state='SUFFICIENT'],.cd-state-chip[data-state='RECONCILED'],.cd-state-chip[data-state='PERMITTED'] {border-color:#448d83;background:#143632;color:#b9fff0}
.cd-state-chip[data-state='WITHHELD'],.cd-state-chip[data-state='PENDING'],.cd-state-chip[data-state='NOT_ESTABLISHED'],.cd-state-chip[data-state='NOT_YET_DESIGNATED'] {border-color:#937143;background:#342819;color:#ffdfa6}
.cd-state-chip[data-state='BLOCKED'],.cd-state-chip[data-state='REVOKED'],.cd-state-chip[data-state='EXPIRED'] {border-color:#985950;background:#39201f;color:#ffc6ba}
.cd-state-chip[data-state='COMMITTED'] {border-color:#7ba0b1;background:#1f3540;color:#eefbff}
.cd-journey {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:20px 0 11px}
.cd-journey-step {
  min-width:0;min-height:66px;display:flex;align-items:center;gap:13px;
  border:1px solid #2b4550;border-radius:12px;padding:11px 16px;background:#0d1b22;
  color:#c5d4d5;text-decoration:none
}
.cd-journey-step .cd-step-no {display:grid;place-items:center;flex:none;width:29px;height:29px;border:1px solid #4d656c;border-radius:50%;font-size:12px;font-weight:750}
.cd-step-copy {min-width:0;display:grid;gap:0}
.cd-step-copy strong {font-size:13px;color:#edf5f3}
.cd-step-copy small {font-size:11px;color:#a8bcc1}
.cd-journey-step[aria-current='step'] {background:linear-gradient(120deg,#153137,#132329);border-color:#59b3b0;box-shadow:inset 3px 0 0 #5fcfca}
.cd-journey-step[aria-current='step'] .cd-step-no {background:#277274;border-color:#71c6c1;color:#fff}
.cd-journey-step:not([aria-disabled='true']):hover {border-color:#62a9a6}
.cd-journey-step[aria-disabled='true'] {opacity:.63;cursor:default}
.cd-context {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;border:1px solid #28414b;border-radius:12px;overflow:hidden;background:#29414a;margin-bottom:10px}
.cd-context-item {display:grid;gap:3px;min-width:0;padding:12px 14px;background:#102027}
.cd-context-item small {font-size:10px;letter-spacing:.11em;font-weight:690;color:#a4bac0;text-transform:uppercase}
.cd-context-item strong {font-size:12px;font-weight:680;color:#e8f1ef;line-height:1.35;overflow-wrap:anywhere}
.cd-context-item .cd-state-chip {font-size:10px;padding:3px 7px;min-height:25px}
.cd-shell-rule {margin:4px 0 0;font-size:11px;color:#afc7c7;text-align:right}
.gate-callout.withheld {border-color:#80643b;box-shadow:inset 3px 0 0 #d6a55f,0 12px 32px rgba(0,0,0,.18)}
.gate-callout.permitted {border-color:#4b9690;box-shadow:inset 3px 0 0 #6cdbcf,0 12px 32px rgba(0,0,0,.18)}
.cockpit-page .cockpit-state-card .metric {border-top:2px solid rgba(110,199,193,.38)}
body .orientation-block h3 {font:690 1.09rem/1.3 var(--cd-font);letter-spacing:-.025em}
@media(max-width:1040px){.cd-context{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){
  .cd-appbar{align-items:flex-start;flex-wrap:wrap;padding-top:18px}
  .cd-appbar-actions{width:100%;justify-content:space-between}
  .cd-journey{gap:5px}.cd-journey-step{padding:10px;min-height:58px;gap:7px}
  .cd-step-copy small{display:none}.cd-journey-step .cd-step-no{width:25px;height:25px}
  .cd-context{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{padding-top:36px}h1{font-size:clamp(2.25rem,9vw,3.25rem)}
}
@media(max-width:390px){
  .shell{width:min(100% - 26px,1240px)}
  .cd-brand-link{font-size:14px;letter-spacing:.07em}
  .cd-journey-step{padding:8px 6px}.cd-step-copy strong{font-size:11px}
  .cd-journey-step .cd-step-no{width:21px;height:21px;font-size:10px}
  .cd-context-item{padding:10px}.cd-context-item strong{font-size:11px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){
  .cd-journey-step[aria-current='step'],.cd-context,.card,.cd-state-chip{border:1px solid CanvasText}
  :where(a,button,input):focus-visible{outline:3px solid Highlight}
}