/* ===========================================================================
   AEGIS — elevation layer
   SPN Solutions Inc. for CDC | RFQ 75D301-26-Q-00146

   The CDC foundation decides what the system IS. This layer decides how it
   FEELS. The discipline throughout: motion explains a change, depth expresses
   hierarchy, and nothing moves or glows without a reason a user could name.
   A federal health service should feel precise and calm, not decorated.

   Everything here degrades to nothing under prefers-reduced-motion.
   ======================================================================== */

/* ---------------------------------------------------------------------------
   Typography refinement — Public Sans wants tighter tracking at display sizes
   and looser at small sizes. Setting it once here beats guessing per-component.
   ------------------------------------------------------------------------ */
h1 { letter-spacing: -.022em; font-weight: 700; }
h2 { letter-spacing: -.016em; font-weight: 650; }
h3, h4 { letter-spacing: -.008em; }
.kpi-value, .mono, table.data td.num { font-feature-settings: 'tnum' 1, 'zero' 1; }
.tiny, .small { letter-spacing: .002em; }

/* ---------------------------------------------------------------------------
   View transition — content arrives rather than appearing. 180ms is long
   enough to read as motion and short enough never to feel like waiting.
   ------------------------------------------------------------------------ */
@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.view > * { animation: view-in 260ms var(--ease-out) both; }
/* Stagger the first few blocks so the page assembles instead of flashing. */
.view > *:nth-child(1) { animation-delay: 0ms; }
.view > *:nth-child(2) { animation-delay: 40ms; }
.view > *:nth-child(3) { animation-delay: 80ms; }
.view > *:nth-child(4) { animation-delay: 110ms; }
.view > *:nth-child(n+5) { animation-delay: 130ms; }

/* ---------------------------------------------------------------------------
   Rail — precision navigation
   ------------------------------------------------------------------------ */
.rail { background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); }
.rail-brand { border-bottom-color: var(--line); }
.rail-mark {
  background: var(--grad-primary);
  box-shadow: 0 4px 14px -4px rgba(0,94,170,.65), inset 0 1px 0 rgba(255,255,255,.25);
}
.rail-link { border-radius: var(--r); }
.rail-link::before { border-radius: 0 2px 2px 0; background: var(--grad-primary); }
.rail-link[aria-current="page"] {
  background: linear-gradient(90deg, var(--cdc-blue-4), transparent 85%);
  box-shadow: inset 0 0 0 1px rgba(0,94,170,.10);
}
.rail-link:hover { transform: translateX(1px); }

/* ---------------------------------------------------------------------------
   Topbar — glass, and a live system pulse
   ------------------------------------------------------------------------ */
.topbar {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--line);
}
.topbar-title b { letter-spacing: -.012em; color: var(--cdc-slate); }

/* System status: a small, honest instrument. Green when the service and its
   database are healthy, amber while checking, red when they are not. */
.sys-pulse {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .55rem; border-radius: 99px;
  border: var(--hair) solid var(--line);
  background: var(--surface); font-size: .6875rem; font-weight: 600;
  color: var(--ink-3); white-space: nowrap;
}
.sys-pulse__dot {
  width: .45rem; height: .45rem; border-radius: 50%; flex: none;
  background: var(--ok); position: relative;
}
.sys-pulse__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; animation: pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: .55; }
  70%  { box-shadow: 0 0 0 .42rem transparent; opacity: 0; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 0; }
}
.sys-pulse.is-ok   { color: var(--ok); border-color: rgba(73,125,12,.28);  background: var(--ok-wash); }
.sys-pulse.is-warn { color: var(--warn); border-color: rgba(187,77,0,.28); background: var(--warn-wash); }
.sys-pulse.is-bad  { color: var(--bad); border-color: rgba(175,68,72,.3);  background: var(--bad-wash); }
.sys-pulse.is-ok   .sys-pulse__dot { background: var(--ok); }
.sys-pulse.is-warn .sys-pulse__dot { background: var(--warn); }
.sys-pulse.is-bad  .sys-pulse__dot { background: var(--bad); }
.sys-pulse__val { font-family: var(--mono); font-size: .625rem; opacity: .85; }
@media (max-width: 1100px) { .sys-pulse__val { display: none; } }
@media (max-width: 860px)  { .sys-pulse { display: none; } }

/* ---------------------------------------------------------------------------
   Cards — depth that expresses hierarchy
   ------------------------------------------------------------------------ */
.card {
  border-radius: var(--r-lg);
  border-color: var(--line);
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.card-accent::before { background: var(--grad-primary); height: 3px; }
.card-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
  border-color: var(--cdc-blue-2);
}
.card-link:focus-visible { box-shadow: var(--sh-3), var(--sh-focus); }

/* KPI — the number is the object; everything else supports it. */
.kpi-value {
  font-weight: 700; letter-spacing: -.035em;
  color: var(--cdc-slate);
  font-variant-numeric: tabular-nums;
}
.kpi-value.is-good { color: var(--ok); }
.kpi-value.is-warn { color: var(--warn); }
.kpi-value.is-bad  { color: var(--bad); }
.kpi-label { color: var(--ink-4); }

/* ---------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------ */
.btn { border-radius: var(--r-sm); letter-spacing: -.004em; }
.btn-primary {
  background: var(--cdc-blue);
  box-shadow: 0 1px 2px rgba(0,71,127,.28), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-primary:hover:not(:disabled) {
  background: var(--cdc-blue-deep);
  box-shadow: 0 6px 18px -6px rgba(0,94,170,.55), inset 0 1px 0 rgba(255,255,255,.16);
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-secondary { color: var(--cdc-blue); border-color: var(--line-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--cdc-blue-4); border-color: var(--cdc-blue-2); }

/* ---------------------------------------------------------------------------
   Hero — an atmospheric field built from CDC's own blues, plus a faint
   instrumentation grid. Slow enough (28s) that it reads as depth rather than
   animation; most people will never consciously notice it moving.
   ------------------------------------------------------------------------ */
.hero {
  background:
    radial-gradient(1000px 460px at 8% -20%,  rgba(0,94,170,.16),  transparent 60%),
    radial-gradient(760px 420px at 92% 0%,    rgba(0,123,145,.13), transparent 58%),
    radial-gradient(620px 380px at 50% 120%,  rgba(136,195,234,.20), transparent 62%),
    var(--surface);
  background-size: 200% 200%, 200% 200%, 200% 200%, auto;
  animation: aurora 28s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { background-position: 0% 50%, 100% 0%, 50% 100%, 0 0; }
  100% { background-position: 30% 30%, 70% 20%, 40% 80%, 0 0; }
}
.hero::before {
  background-image:
    linear-gradient(rgba(0,94,170,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,94,170,.05) 1px, transparent 1px);
  background-size: 2.75rem 2.75rem;
}
.hero h1 { color: var(--cdc-slate); }
.hero-eyebrow {
  color: var(--cdc-cyan); background: var(--cdc-cyan-4);
  border-color: rgba(0,123,145,.24);
}
.hero-eyebrow .pulse { background: var(--cdc-cyan); }

/* ---------------------------------------------------------------------------
   Public band — the emergency notice. Deliberately the loudest thing on the
   public page, because it is the only element that could matter medically.
   ------------------------------------------------------------------------ */
.pub-band {
  background: var(--cdc-slate);
  border-bottom: 3px solid var(--cdc-amber);
}
.pub-nav a { border-radius: var(--r-sm); font-weight: 550; }
.pub-nav a:hover { background: var(--cdc-blue-4); color: var(--cdc-blue); }

/* ---------------------------------------------------------------------------
   Tables — dense, quiet, scannable
   ------------------------------------------------------------------------ */
.table-wrap { border-radius: var(--r-lg); }
table.data thead th {
  background: var(--surface-2);
  color: var(--ink-3);
  border-bottom: 2px solid var(--line);
  letter-spacing: .06em;
}
table.data tbody tr:hover { background: var(--cdc-blue-4); }
table.data tbody tr.is-clickable:hover { box-shadow: inset 3px 0 0 var(--cdc-blue); }

/* ---------------------------------------------------------------------------
   Chips, callouts, steps
   ------------------------------------------------------------------------ */
.chip { letter-spacing: .015em; border-radius: 99px; }
.chip-ok    { background: var(--ok-wash);   color: var(--ok);   border-color: rgba(73,125,12,.26); }
.chip-warn  { background: var(--warn-wash); color: var(--warn); border-color: rgba(187,77,0,.26); }
.chip-bad   { background: var(--bad-wash);  color: var(--bad);  border-color: rgba(175,68,72,.28); }
.chip-info  { background: var(--cdc-blue-4);color: var(--cdc-blue); border-color: rgba(0,94,170,.22); }

.callout { border-radius: var(--r); border-left-width: 3px; }
.callout-teal  { border-left-color: var(--cdc-cyan);  background: var(--cdc-cyan-4); }
.callout-green { border-left-color: var(--ok);        background: var(--ok-wash); }
.callout-gold  { border-left-color: var(--cdc-amber); background: var(--warn-wash); }
.callout-red   { border-left-color: var(--bad);       background: var(--bad-wash); }

.step { border-radius: 99px; font-weight: 600; }
.step[aria-current="step"] {
  background: var(--cdc-blue); border-color: var(--cdc-blue);
  box-shadow: 0 4px 12px -4px rgba(0,94,170,.55);
}
.step.is-done { background: var(--ok-wash); border-color: rgba(73,125,12,.3); color: var(--ok); }
.step.is-done .step-n { background: var(--ok); }

.progress { background: var(--surface-3); height: .4rem; }
.progress-bar { background: var(--grad-primary); }

/* ---------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------ */
.input, .select, .textarea { border-radius: var(--r-sm); border-color: var(--line-strong); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--cdc-blue-2); }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--cdc-blue); box-shadow: var(--sh-focus);
}
.choice { border-radius: var(--r-lg); }
.choice:has(input:checked) {
  border-color: var(--cdc-blue); background: var(--cdc-blue-4);
  box-shadow: 0 8px 24px -12px rgba(0,94,170,.5);
}
.choice:has(input:checked) .choice-check { border-color: var(--cdc-blue); background: var(--cdc-blue); }
.choice-title { color: var(--cdc-slate); }
.choice-badge { background: var(--cdc-cyan); }
.opt:has(input:checked) { border-color: var(--cdc-blue); background: var(--cdc-blue-4); }
.dropzone:hover, .dropzone.is-over { border-color: var(--cdc-blue); background: var(--cdc-blue-4); }

/* Focus — one treatment, everywhere, never suppressed. */
:focus-visible { outline-color: var(--cdc-blue); outline-width: 3px; }

/* ---------------------------------------------------------------------------
   Command palette
   ------------------------------------------------------------------------ */
.palette { border-radius: var(--r-xl); box-shadow: var(--sh-4); }
.palette-backdrop { background: rgba(41,67,78,.42); }
.palette-item.is-active {
  background: var(--cdc-blue-4);
  box-shadow: inset 2px 0 0 var(--cdc-blue);
}
.palette-trigger { border-radius: 99px; }

/* ---------------------------------------------------------------------------
   Modals and toasts
   ------------------------------------------------------------------------ */
.modal { border-radius: var(--r-xl); box-shadow: var(--sh-4); }
.modal-backdrop { background: rgba(41,67,78,.45); }
.toast { border-radius: var(--r); box-shadow: var(--sh-3); }

/* ---------------------------------------------------------------------------
   Skeleton shimmer — a loading state that suggests shape rather than spinning
   ------------------------------------------------------------------------ */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------------------------------------------------------------------------
   Command rail — CDC Slate.

   The content stays white, as a federal health service should. The navigation
   does not: a dark rail against a white working surface is what an operations
   console looks like, it raises the contrast of everything the analyst is
   actually reading, and it gives the interface a spine. Every colour below is
   measured against the rail ground (#29434e): body links 7.4:1, group labels
   6.0:1, the active label 10.4:1.
   ------------------------------------------------------------------------ */
.rail {
  background: linear-gradient(180deg, #24404b 0%, #29434e 45%, #1e3742 100%);
  border-right: 1px solid rgba(255,255,255,.07);
  color: #dfe6ea;
}
/* A hairline of the signature gradient down the rail's edge. */
.rail::after {
  content: ""; position: absolute; inset: 0 -1px 0 auto; width: 2px;
  background: linear-gradient(180deg, var(--cdc-blue-2), var(--cdc-teal-2) 45%, transparent);
  opacity: .5; pointer-events: none;
}
.rail-brand { border-bottom-color: rgba(255,255,255,.10); }
.rail-mark { box-shadow: 0 4px 14px -4px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.14); }
.rail-word b { color: #fff; }
.rail-word span { color: var(--cdc-blue-2); }
.rail-group-label { color: #b6c6d2; }

.rail-link { color: #cfdce3; }
.rail-link .ico { opacity: .72; }
.rail-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.rail-link:hover .ico { opacity: 1; }
.rail-link[aria-current="page"] {
  background: linear-gradient(90deg, rgba(136,195,234,.20), rgba(136,195,234,.07));
  color: #fff; font-weight: 640;
}
.rail-link[aria-current="page"]::before {
  background: linear-gradient(180deg, var(--cdc-blue-2), var(--cdc-teal-2));
  box-shadow: 0 0 10px rgba(136,195,234,.75);
}
.rail-link:focus-visible { outline: 3px solid var(--cdc-blue-2); outline-offset: 2px; }
.rail-badge {
  background: rgba(251,171,24,.18); color: #ffd68a; border-color: rgba(251,171,24,.32);
}
.rail-foot { border-top-color: rgba(255,255,255,.10); }
/* The SPN mark is a dark lockup; on the slate ground it is knocked out. */
.rail-foot img { filter: brightness(0) invert(1); opacity: .68; }
.rail-scrim { background: rgba(30,55,66,.55); }

/* ---------------------------------------------------------------------------
   Working surface — an atmospheric field at the top of every view.

   CDC blue light falling from above, plus a faint instrumentation grid behind
   the page title. Both are painted as real backgrounds rather than stacked
   pseudo-layers: a negative-z layer under .main puts the sticky, backdrop-
   blurred topbar into its own compositing layer and Chromium renders the whole
   shell offset. Backgrounds paint behind children by definition and need no
   stacking context at all.
   ------------------------------------------------------------------------ */
.main {
  background-color: var(--surface);
  background-image:
    radial-gradient(880px 360px at 10% -12%, rgba(0,94,170,.13), transparent 62%),
    radial-gradient(720px 340px at 90% -8%, rgba(0,123,145,.10), transparent 60%),
    linear-gradient(180deg, var(--cdc-blue-4) 0%, rgba(237,249,255,0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 28rem, 100% 28rem, 100% 28rem;
  background-position: top left, top right, top center;
}

/* The instrumentation grid is scoped to the page title, where it reads as
   depth behind the headline and cannot interfere with anything sticky. */
.view-head { position: relative; }
.view-head::before {
  content: ""; position: absolute; inset: -1.75rem -1.5rem -.5rem;
  pointer-events: none; opacity: .75;
  background-image:
    linear-gradient(rgba(0,94,170,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,94,170,.06) 1px, transparent 1px);
  background-size: 2.75rem 2.75rem;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}
.view-head > * { position: relative; }

/* Cards float on the field rather than sitting flat against it. */
.main .view > .grid .card,
.main .view > .card { box-shadow: var(--sh-2); }

/* ---------------------------------------------------------------------------
   Slim agency masthead — the console carries CDC's identity on every screen,
   not only the public pages.
   ------------------------------------------------------------------------ */
.cdc-masthead--slim .cdc-masthead__inner { padding: .5rem 1.5rem; }
.cdc-masthead--slim .cdc-seal { width: 2rem; height: 2rem; }
.cdc-masthead--slim .cdc-seal svg { width: 1.15rem; height: 1.15rem; }
.cdc-masthead--slim .cdc-lockup__dept { display: none; }
.cdc-masthead--slim .cdc-lockup__name { font-size: .875rem; }
.cdc-masthead--slim .cdc-lockup__sub { font-size: .6875rem; }
.cdc-masthead--slim .cdc-agency-tag {
  font-size: .625rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--cdc-cyan);
  background: var(--cdc-cyan-4); border: var(--hair) solid rgba(0,123,145,.24);
  padding: .2rem .5rem; border-radius: 99px; white-space: nowrap;
}
@media (max-width: 720px) { .cdc-masthead--slim .cdc-agency-tag { display: none; } }

/* ---------------------------------------------------------------------------
   Sign-in — the first screen an evaluator sees.

   A dark CDC-slate panel carrying the argument, beside the credential card.
   The panel is decoration only in the sense that the ground is; every number
   printed on it is checkable inside the system in under a minute.
   ------------------------------------------------------------------------ */
.signin-page { align-items: center; }
.signin-split {
  width: 100%; max-width: 62rem;
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 0; align-items: stretch;
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-4);
  background: var(--surface);
}
.signin-story {
  position: relative; overflow: hidden;
  padding: 2.75rem 2.5rem;
  display: flex; flex-direction: column; justify-content: center;
  color: #e8eff3;
  background:
    radial-gradient(700px 320px at 0% 0%, rgba(0,94,170,.55), transparent 62%),
    radial-gradient(620px 300px at 100% 100%, rgba(0,123,145,.45), transparent 60%),
    linear-gradient(160deg, #2c4954 0%, #24404b 46%, #1b323c 100%);
  background-size: 180% 180%, 180% 180%, auto;
  animation: aurora 30s ease-in-out infinite alternate;
}
.signin-story__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  -webkit-mask-image: radial-gradient(120% 100% at 10% 0%, #000, transparent 78%);
  mask-image: radial-gradient(120% 100% at 10% 0%, #000, transparent 78%);
}
.signin-story__body { position: relative; }
.signin-eyebrow {
  display: inline-block; font-size: .625rem; text-transform: uppercase;
  letter-spacing: .12em; font-weight: 700; color: #a9dcf5;
  border: var(--hair) solid rgba(136,195,234,.38);
  background: rgba(136,195,234,.12);
  padding: .28rem .6rem; border-radius: 99px; margin-bottom: 1.1rem;
}
.signin-headline {
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem); line-height: 1.2;
  letter-spacing: -.02em; font-weight: 700; color: #fff;
  margin: 0 0 .9rem; max-width: 20ch;
}
.signin-lede {
  font-size: .9375rem; line-height: 1.6; color: #c9d8e0;
  margin: 0 0 1.75rem; max-width: 44ch;
}
.signin-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  padding: 1.1rem 0; margin-bottom: 1.25rem;
  border-top: var(--hair) solid rgba(255,255,255,.14);
  border-bottom: var(--hair) solid rgba(255,255,255,.14);
}
.signin-stat b {
  display: block; font-size: 1.6rem; font-weight: 700; color: #fff;
  line-height: 1; letter-spacing: -.02em;
  font-feature-settings: 'tnum' 1;
}
.signin-stat span {
  display: block; font-size: .6875rem; text-transform: uppercase;
  letter-spacing: .09em; font-weight: 700; color: #a9dcf5; margin: .35rem 0 .15rem;
}
.signin-stat em { display: block; font-style: normal; font-size: .6875rem; color: #9fb4bf; }

.signin-pulse {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 600; color: #c9d8e0;
}
.signin-pulse__dot {
  width: .45rem; height: .45rem; border-radius: 50%; flex: none;
  background: var(--cdc-amber); position: relative;
}
.signin-pulse.is-ok  .signin-pulse__dot { background: #84bc49; }
.signin-pulse.is-bad .signin-pulse__dot { background: #e57373; }
.signin-pulse__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: inherit; animation: pulse-ring 2.4s ease-out infinite;
}

/* The card loses its own frame -- the split panel is the frame now. */
.signin-split .signin-card {
  max-width: none; border: none; border-radius: 0; box-shadow: none;
  padding: 2.5rem 2.25rem;
  display: flex; flex-direction: column; justify-content: center;
}

@media (max-width: 900px) {
  .signin-split { grid-template-columns: 1fr; max-width: 30rem; }
  .signin-story { padding: 2rem 1.75rem; animation: none; }
  .signin-headline { max-width: none; }
  .signin-lede { margin-bottom: 1.25rem; }
}
@media (max-width: 420px) {
  .signin-stats { grid-template-columns: 1fr; gap: .75rem; padding: .9rem 0; }
}

/* ---------------------------------------------------------------------------
   Reduced motion — every animation above collapses to nothing.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero, .signin-story { animation: none; }
  .view > * { animation: none; }
  .signin-pulse__dot::after { animation: none; }
  .sys-pulse__dot::after { animation: none; }
  .skeleton { animation: none; }
  .rail-link:hover, .card-link:hover, .btn-primary:hover:not(:disabled) { transform: none; }
}

/* Print — drop the atmosphere, keep the substance. */
@media print {
  .hero { animation: none; background: none; }
  .usa-banner__content, .cdc-footer, .sys-pulse { display: none !important; }
  .cdc-masthead { border-bottom: 1px solid #999; }
}

/* ---------------------------------------------------------------------------
   User-flow strips — PWS Task 1.2.

   The Section 8 deliverable is a set of user flows. Drawn in a PDF they go
   stale the first time the product changes; here each step is a link into the
   running system, so the diagram cannot drift away from what it describes.
   The strip scrolls horizontally inside its own container — the page body
   never scrolls sideways.
   ------------------------------------------------------------------------ */
.flow-strip {
  display: flex; align-items: stretch; gap: .5rem;
  overflow-x: auto; padding: .25rem .25rem 1rem;
  scroll-snap-type: x proximity;
}
.flow-step {
  flex: 0 0 15rem; scroll-snap-align: start;
  display: flex; flex-direction: column; gap: .3rem;
  text-align: left; cursor: pointer;
  padding: .85rem .9rem;
  background: var(--surface); color: inherit; font: inherit;
  border: var(--hair) solid var(--line); border-radius: var(--r);
  border-top: 3px solid var(--cdc-blue-2);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.flow-step:hover {
  border-top-color: var(--cdc-blue); box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.flow-step:focus-visible { outline: 3px solid var(--cdc-blue-bright); outline-offset: 2px; }
.flow-step__n {
  font-size: .625rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--cdc-cyan);
}
.flow-step__t { font-weight: 650; font-size: .875rem; line-height: 1.3; color: var(--ink); }
.flow-step__d { font-size: .75rem; color: var(--ink-3); line-height: 1.45; flex: 1; }
.flow-step__req { margin-top: .35rem; }
.flow-arrow {
  flex: none; align-self: center; color: var(--cdc-blue-2);
  display: grid; place-items: center;
}
/* PATHS.chevron already points right; rotating it turned the arrow upward. */
.flow-arrow svg { width: 1.1rem; height: 1.1rem; }
@media (max-width: 640px) { .flow-step { flex-basis: 12.5rem; } }