/* ============================================================
   INTERACTIVE FRAMES
   Each figure that used to be a screenshot is a small working
   piece of the thing it depicts. One interaction per frame, the
   one the surrounding paragraph is arguing about.
   ============================================================ */

.frame{
  --fr-line:#D8D5CE;
  --fr-ink:#16181C;
  --fr-soft:#5A6068;
  --fr-faint:#8A9098;
  --fr-wash:#F4F1EB;
  --fr-white:#fff;

  /* the two products keep their own color so a frame reads as the
     software rather than as this site */
  --pal-navy:#12294D;
  --pal-blue:#1B4C8C;
  --pal-blue-soft:#E8EFF8;
  --pal-slate:#5B5F87;
  --pal-slate-soft:#EEF0F8;
  --pal-red:#B3243B;
  --pal-green:#2F6B4F;
  --pal-amber:#9A6B12;

  position:relative;
  border:1px solid var(--fr-line);
  background:var(--fr-white);
  font-size:clamp(11px,1.12vw,14px);
  line-height:1.45;
  color:var(--fr-ink);
  container-type:inline-size;
}
.case-fig .frame{margin:0}

/* ---------- chrome ---------- */
.fr-bar{
  display:flex;align-items:center;gap:1em;
  padding:.62em .9em;
  border-bottom:1px solid var(--fr-line);
  background:var(--fr-wash);
  font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);
  font-size:.72em;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--fr-soft);
}
.fr-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-do{
  color:var(--ochre-deep,#845A24);
  white-space:nowrap;
  display:flex;align-items:center;gap:.5em;
}
.fr-do::before{
  content:"";width:.5em;height:.5em;border-radius:50%;
  background:currentColor;flex:none;
  animation:fr-pulse 2.6s ease-in-out infinite;
}
@keyframes fr-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.fr-orig{
  color:var(--fr-soft);text-decoration:none;white-space:nowrap;
  border:0;background:none;font:inherit;cursor:zoom-in;padding:.2em;
  text-decoration:underline;text-decoration-color:var(--fr-line);
  text-underline-offset:.3em;
}
.fr-orig:hover{color:var(--fr-ink);text-decoration-color:currentColor}

/* ---------- stage ---------- */
.fr-stage{position:relative;overflow:hidden}
.fr-pad{padding:1.15em}

/* ---------- generic bits shared by several frames ---------- */
.fr-app{background:#F2F4F7}
.fr-top{
  display:flex;align-items:center;gap:1.4em;
  padding:.8em 1.1em;background:var(--pal-navy);color:#fff;
  font-size:.86em;
}
.fr-top--slate{background:var(--pal-slate)}
.fr-mark{font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:.55em}
.fr-mark span{font-weight:400;opacity:.72;font-size:.9em}
.fr-topnav{display:flex;gap:1.15em;margin-left:auto;opacity:.9;font-size:.94em}

.fr-btn{
  font:inherit;font-family:var(--sans,'Archivo',-apple-system,sans-serif);
  border:1px solid var(--fr-line);background:var(--fr-white);color:var(--fr-ink);
  padding:.5em .95em;cursor:pointer;line-height:1.3;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.fr-btn:hover{border-color:var(--fr-soft)}
.fr-btn[aria-pressed="true"],.fr-btn.is-on{background:var(--fr-ink);border-color:var(--fr-ink);color:#fff}
.fr-btn:disabled{opacity:.45;cursor:not-allowed}
.fr-btn:disabled:hover{border-color:var(--fr-line)}
.fr-btn--primary{background:var(--pal-blue);border-color:var(--pal-blue);color:#fff}
.fr-btn--primary:hover{background:#16407a;border-color:#16407a}
.fr-btn--quiet{background:transparent;border-color:var(--fr-line);color:var(--fr-soft)}
.fr-btn--quiet:hover{color:var(--fr-ink)}

.fr-chip{
  font:inherit;font-family:var(--sans,'Archivo',-apple-system,sans-serif);font-size:.86em;
  border:1px solid var(--fr-line);background:var(--fr-white);color:var(--fr-soft);
  border-radius:2em;padding:.34em .85em;cursor:pointer;white-space:nowrap;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.fr-chip:hover{border-color:var(--fr-soft);color:var(--fr-ink)}
.fr-chip[aria-pressed="true"]{background:var(--pal-navy);border-color:var(--pal-navy);color:#fff}
.fr-chips{display:flex;flex-wrap:wrap;gap:.4em}

.fr-tag{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:.68em;letter-spacing:.05em;text-transform:uppercase;
  padding:.24em .55em;border-radius:2px;background:var(--fr-wash);color:var(--fr-soft);
}
.fr-tag--warn{background:#FBEEDA;color:var(--pal-amber)}
.fr-tag--bad{background:#FBE4E8;color:var(--pal-red)}
.fr-tag--ok{background:#E3F0E9;color:var(--pal-green)}

.fr-dot{width:.55em;height:.55em;border-radius:50%;background:currentColor;flex:none}

.fr-note{
  margin-top:.85em;padding-top:.7em;border-top:1px solid var(--fr-line);
  font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:.72em;line-height:1.5;letter-spacing:.02em;
  color:var(--fr-soft);
}
.fr-note b{color:var(--fr-ink);font-weight:500}
.fr-note--flush{margin:0;padding:.75em 1.15em;border-top:1px solid var(--fr-line);background:var(--fr-wash)}

.fr-doc{background:var(--fr-white);border:1px solid var(--fr-line);padding:1em}
.fr-lines{display:grid;gap:.42em}
.fr-lines i{display:block;height:.5em;background:#E7E4DE;border-radius:1px}

.fr-hd{font-weight:600;letter-spacing:-.01em}
.fr-sub{color:var(--fr-soft);font-size:.9em}
.fr-mono{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:.72em;letter-spacing:.05em;text-transform:uppercase;color:var(--fr-faint)}

/* ---------- charts ---------- */
.fr-svg{display:block;width:100%;height:auto;overflow:visible}
.fr-legend{display:flex;flex-wrap:wrap;gap:.5em 1.1em;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);
  font-size:.72em;letter-spacing:.04em;color:var(--fr-soft)}
.fr-legend span{display:inline-flex;align-items:center;gap:.45em}
.fr-key{width:1.6em;height:0;border-top:2px solid currentColor;flex:none}

/* ---------- range control ---------- */
.fr-range{
  -webkit-appearance:none;appearance:none;width:100%;height:1.6em;
  background:none;cursor:ew-resize;
}
.fr-range::-webkit-slider-runnable-track{height:2px;background:var(--fr-line)}
.fr-range::-moz-range-track{height:2px;background:var(--fr-line)}
.fr-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:1.15em;height:1.15em;border-radius:50%;
  background:var(--fr-ink);border:2px solid var(--fr-white);
  box-shadow:0 0 0 1px var(--fr-ink);margin-top:-.53em;
}
.fr-range::-moz-range-thumb{
  width:1.15em;height:1.15em;border-radius:50%;border:2px solid var(--fr-white);
  background:var(--fr-ink);box-shadow:0 0 0 1px var(--fr-ink);
}
.fr-range:focus-visible{outline:3px solid var(--ochre,#92662D);outline-offset:4px}

/* ---------- segmented switch ---------- */
.fr-seg{display:inline-flex;border:1px solid var(--fr-line);background:var(--fr-white)}
.fr-seg button{
  font:inherit;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:.72em;letter-spacing:.06em;
  text-transform:uppercase;padding:.6em 1em;border:0;background:none;
  color:var(--fr-soft);cursor:pointer;
}
.fr-seg button + button{border-left:1px solid var(--fr-line)}
.fr-seg button[aria-pressed="true"]{background:var(--fr-ink);color:#fff}

/* ---------- focus ---------- */
.frame :focus-visible{outline:3px solid var(--ochre,#92662D);outline-offset:2px;border-radius:1px}

/* ---------- deliverables grid ----------
   Each plate IS a browser window. No frame around the frame, no caption
   under it -- the window's own tab carries the name. */
.plate--live{
  border:0;background:transparent;padding:0;
  transition:transform .34s cubic-bezier(.2,.8,.3,1.2);
  will-change:transform;
}
.plate--live .holder{
  /* one shape for all nine, so the grid reads as a grid */
  aspect-ratio:16/10;
  position:relative;width:100%;padding:0;border:0;background:transparent;
  cursor:pointer;display:block;overflow:visible;
}

.fr-scale{
  position:absolute;top:0;left:0;transform-origin:0 0;
  pointer-events:none;user-select:none;
  transition:box-shadow .28s cubic-bezier(.2,.8,.3,1);
}
.fr-scale .frame{
  box-shadow:0 1px 2px rgba(22,24,28,.05), 0 2px 8px rgba(22,24,28,.05);
  transition:box-shadow .28s cubic-bezier(.2,.8,.3,1);
}
.plate-open{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;background:none;cursor:pointer;font:inherit;color:inherit;
}
.plate-open:focus-visible{outline:3px solid var(--ochre,#92662D);outline-offset:4px;
  border-radius:12px}

/* the lift is suppressed for a beat after closing, so a plate the
   pointer happens to be resting over does not pop back up */
.plate--live.is-cooling,
.plate--live.is-cooling:hover,
.plate--live.is-cooling:focus-within{transform:none}
.plate--live.is-cooling .fr-scale .frame{box-shadow:0 1px 2px rgba(22,24,28,.05),
  0 2px 8px rgba(22,24,28,.05)}

/* it lifts off the page and settles back with a little overshoot */
.plate--live:hover,.plate--live:focus-within{
  transform:translateY(-.5rem) scale(1.028);
  z-index:2;
}
.plate--live:hover .fr-scale .frame,
.plate--live:focus-within .fr-scale .frame{
  box-shadow:0 2px 4px rgba(22,24,28,.06),
             0 14px 34px rgba(22,24,28,.16),
             0 30px 60px rgba(22,24,28,.09);
}
/* pressing it puts it back down */
.plate--live:active{
  transform:translateY(-.12rem) scale(1.004);
  transition-duration:.09s;
}
@media (prefers-reduced-motion:reduce){
  .plate--live,.plate--live:hover,.plate--live:focus-within,.plate--live:active{
    transform:none;transition:none;
  }
}

/* The open frame is fixed and fits the window: only what is inside it
   scrolls. Nothing about the overlay moves. */
.lightbox.is-live{cursor:default;align-items:center;overflow:hidden}
.lightbox-live{
  width:100%;max-width:64rem;cursor:default;
  display:flex;flex-direction:column;min-height:0;max-height:100%;
}
.lightbox-live > .fr-mono{flex:none}

/* the window's own close control, where its dots sit */
.bw-x{
  flex:none;display:grid;place-items:center;
  width:1.6em;height:1.6em;margin-left:-.15em;
  padding:0;border:0;border-radius:50%;cursor:pointer;font:inherit;
  background:color-mix(in srgb, var(--frame-accent) 22%, transparent);
  color:color-mix(in srgb, var(--frame-accent) 78%, #16181C);
  transition:background .14s ease,color .14s ease;
}
.bw-x svg{width:.78em;height:.78em;display:block}
.bw-x:hover{background:var(--pal-red);color:#fff}
.bw-x:focus-visible{outline:3px solid var(--ochre,#92662D);outline-offset:2px}
.lightbox-live .frame{
  box-shadow:0 2px 40px rgba(22,24,28,.10);
  flex:0 1 auto;min-height:0;
}
/* the window keeps its 16:10 until the viewport is too short for it,
   at which point the screen inside gives up height rather than the
   window running off the bottom */
.lightbox-live .frame--browser{display:flex;flex-direction:column;overflow:hidden}
.lightbox-live .frame--browser .bw-bar{flex:none}
.lightbox-live .frame--browser .bw-view{flex:0 1 auto;min-height:0}
.lightbox-live .frame:not(.frame--browser){
  display:flex;flex-direction:column;overflow:hidden;
}
.lightbox-live .frame:not(.frame--browser) > .fr-bar{flex:none}
.lightbox-live .frame:not(.frame--browser) > .fr-stage{
  flex:0 1 auto;min-height:0;overflow:auto;
}

/* ---------- the "before" screenshots keep their caption rhythm ---------- */
.case-fig--live figcaption,.case-pair figure figcaption{margin-top:.7rem}

@container (max-width:420px){
  .fr-topnav{display:none}
  .fr-hide-sm{display:none}
  .fr-stack-sm{grid-template-columns:1fr !important}
}

@media (prefers-reduced-motion:reduce){
  .frame *,.frame *::before,.frame *::after{
    transition-duration:.01ms !important;animation-duration:.01ms !important;
  }
  .fr-do::before{animation:none;opacity:1}
}

/* ============================================================
   08 · duplicate detection  ·  09 · misroute
   ============================================================ */
.fr-dup{display:grid;grid-template-columns:16em minmax(0,1fr)}
.fr-dup-list{padding:1.15em;border-right:1px solid var(--fr-line);background:var(--fr-wash);min-width:0}
.fr-dup-pane{padding:1.15em;min-width:0}
.fr-cand{
  font:inherit;font-family:var(--sans,'Archivo',-apple-system,sans-serif);text-align:left;width:100%;
  display:flex;gap:.6em;align-items:center;
  background:#fff;border:1px solid var(--fr-line);padding:.5em .6em;cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease;
  min-width:0;overflow:hidden;
}
.fr-stack{display:grid;gap:.35em;grid-template-columns:minmax(0,1fr)}
.fr-cand:hover{border-color:var(--fr-soft)}
.fr-cand[aria-pressed="true"]{border-color:var(--pal-slate);box-shadow:inset 3px 0 0 var(--pal-slate)}
.fr-cand.is-static{cursor:default}
.fr-cand.is-you{box-shadow:inset 3px 0 0 var(--pal-slate)}
/* a similarity score reads the same in the list as it does on the panel */
.fr-cand-s{
  flex:none;width:3.1em;text-align:center;padding:.3em 0;
  font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:.72em;letter-spacing:.03em;
  background:#E3F0E9;color:var(--pal-green);
}
.fr-cand-s.is-dup{background:#FBE4E8;color:var(--pal-red)}
.fr-cand-t{display:flex;flex-direction:column;min-width:0;font-size:.86em;line-height:1.3}
.fr-cand-t b{font-weight:500;line-height:1.3;display:block}
.fr-cand-t span{color:var(--fr-soft);font-size:.88em}
/* the score on the panel matches the score in the list */
.fr-dup-head .fr-tag{background:#E3F0E9;color:var(--pal-green)}
.fr-dup-head .fr-tag--bad{background:#FBE4E8;color:var(--pal-red)}
.fr-dup-head{display:flex;gap:.8em;align-items:center;flex-wrap:wrap;margin-bottom:.75em}
.fr-dup-head .fr-hd{flex:1;min-width:0}
.fr-dup-side{display:grid;grid-template-columns:1fr 1fr;gap:1em}
.fr-req-text{font-size:.88em;line-height:1.55;margin-top:.3em}
.fr-req-text mark{background:#FBEEDA;color:var(--fr-ink);
  box-shadow:0 1px 0 var(--pal-amber);padding:0 .1em}
/* the portal's circle check, on the officer's side of the wall: filled
   where the two requests agree, empty where they part */
/* the case study styles its own lists with an indent; a list inside a
   frame is part of the software, not the prose */
.frame ul,.frame ol{margin:0;padding:0;list-style:none}
.fr-reasons{list-style:none;margin:0;padding:0;display:grid;gap:.36em;font-size:.86em}
.fr-reasons li{display:grid;grid-template-columns:1em minmax(0,1fr);gap:.6em;
  align-items:start;padding-left:0;color:var(--fr-soft)}
.fr-reasons li::before{content:none}
.fr-reasons .ck--ring{width:1em;height:1em;margin-top:.15em}
.fr-reasons li.is-miss{color:var(--fr-faint)}

/* ============================================================
   10 · sankey
   ============================================================ */
.fr-sk-rib{fill:var(--ochre,#92662D);opacity:.38;transition:opacity .2s ease,fill .2s ease}
.fr-sk-rib--filed{fill:var(--slate,#3A4A5C);opacity:.20}
.fr-sk-rib--intake{fill:var(--slate,#3A4A5C);opacity:.34}
.fr-sk-rib--triage{fill:#9AA0A8;opacity:.28}
.fr-sk-rib.is-off{opacity:.07}
.fr-sk-rib.is-on{opacity:.68}
.fr-sk-lab{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;fill:var(--ink-soft,#4A5058)}
.fr-sk-lab--l{text-anchor:start}
.fr-sk-split{stroke:var(--fr-line);stroke-width:1;stroke-dasharray:3 4}
/* hovering an outcome already reads it out; clicking adds nothing, so
   the node does not claim to be a button it is not */
.fr-sk-end{cursor:default}
.fr-sk-end-lab{font-family:var(--sans,'Archivo',-apple-system,sans-serif);font-size:13px;fill:var(--ink-soft,#4A5058)}
.fr-sk-end.is-on .fr-sk-end-lab{fill:var(--ink,#16181C);font-weight:600}
.fr-sk-end:focus{outline:none}
.fr-sk-end:focus-visible .fr-sk-end-lab{fill:var(--ink,#16181C);text-decoration:underline}

/* ============================================================
   charts
   Drawn in real pixels (see plot() in frames.js), so the sizes
   here are the sizes on the screen at any width. Text wears the
   text colours; only marks wear the data colours.
   ============================================================ */
.pl-box{position:relative}
.pl-box:focus{outline:none}
.pl-box:focus-visible{outline:3px solid var(--ochre,#92662D);outline-offset:4px;border-radius:2px}
.pl{display:block;width:100%;height:auto;overflow:visible;cursor:default}
.pl text{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace)}
.pl-grid{stroke:#E6E3DC;stroke-width:1;shape-rendering:crispEdges}
.pl-base{stroke:#B8B4AB;stroke-width:1;shape-rendering:crispEdges}
.pl-ax{font-size:10px;letter-spacing:.02em;fill:var(--fr-soft);text-anchor:middle}
.pl-ax--r{text-anchor:end}
.pl-mid{text-anchor:middle}

/* a line over time */
.pl-line{fill:none;stroke:var(--slate,#3A4A5C);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pl-end{fill:var(--slate,#3A4A5C);stroke:#fff;stroke-width:2}
.pl-val{font-size:11px;font-weight:500;fill:var(--fr-ink)}
.pl-cross{stroke:var(--fr-soft);stroke-width:1;shape-rendering:crispEdges}
/* a marked date: a rule the height of the plot, and its flag */
.pl-rule{stroke:var(--ochre,#92662D);stroke-width:1;shape-rendering:crispEdges}
.pl-flag{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;fill:var(--fr-ink)}
.pl-flag--d{fill:var(--fr-soft)}

/* one point for each account */
.pl-dot{fill:var(--slate,#3A4A5C);stroke:#fff;stroke-width:1}
.pl-dot--dim{fill:#9AA0A9;fill-opacity:.8;stroke:none}
.pl .pl-dot-lab{font-family:var(--sans,'Archivo',-apple-system,sans-serif);font-size:10.5px;font-weight:600;fill:var(--fr-ink)}
.pl-ring{fill:none;stroke:var(--fr-ink);stroke-width:1.5}
.pl-band{fill:var(--fr-ink);fill-opacity:.05;stroke:#D8D5CE;stroke-width:1}
.pl-band--bad{fill:var(--pal-red);fill-opacity:.08;stroke:#E3AEB6}
.pl-band--ok{fill:var(--pal-green);fill-opacity:.07;stroke:#B6D2C2}
.pl-band-lab{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;fill:var(--fr-soft)}
.pl-tag{fill:#fff;fill-opacity:1;stroke:#C4C0B8;stroke-width:1}
.pl-tag-n{font-size:9.5px;font-weight:500;fill:var(--fr-ink);text-anchor:middle}

/* the reading beside a mark */
.pl-tip{pointer-events:none}
.pl-tip-bg{fill:#fff;stroke:#C9C5BC;stroke-width:1;filter:drop-shadow(0 1px 2px rgba(22,24,28,.10))}
.pl-tip-v{font-size:12.5px;font-weight:500;fill:var(--fr-ink)}
.pl-tip-l{font-size:10px;letter-spacing:.2px;fill:var(--fr-soft)}

.pl-legend{margin-top:.9em}
.pl-legend--num{counter-reset:pl;list-style:none;margin:.9em 0 0;padding:0}
.pl-legend--num[hidden]{display:none}
.pl-legend--num li{counter-increment:pl;display:inline-flex;align-items:baseline;gap:.45em;margin:0;padding:0}
.pl-legend--num li::before{content:counter(pl);color:var(--fr-ink);font-weight:500}

/* the same numbers, for a screen reader */
.fr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
   18 · intake and triage
   ============================================================ */
.fr-tri-list{display:grid;gap:.5em}
.fr-tri{background:#fff;border:1px solid var(--fr-line);padding:.7em .85em}
.fr-tri-top{display:flex;gap:.8em;align-items:center;flex-wrap:wrap}
.fr-tri-top .fr-mono{flex:none}
.fr-flag{
  font:inherit;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:.68em;letter-spacing:.05em;
  text-transform:uppercase;padding:.28em .6em;cursor:pointer;
  border:1px solid transparent;background:var(--fr-wash);color:var(--fr-soft);
  transition:box-shadow .16s ease;
}
.fr-flag--bad{background:#FBE4E8;color:var(--pal-red)}
.fr-flag--warn{background:#FBEEDA;color:var(--pal-amber)}
.fr-flag:hover{border-color:currentColor}
.fr-flag[aria-pressed="true"]{border-color:currentColor;box-shadow:0 0 0 1px currentColor}
.fr-tri-panel{margin-top:.6em;padding:.85em;background:#fff;
  border:1px dashed var(--fr-line);font-size:.9em}
.fr-tri-panel.is-open{border-style:solid;border-color:var(--pal-slate)}
.fr-tri-panel p{margin:0}

@container (max-width:500px){
  .fr-dup{grid-template-columns:1fr}
  .fr-dup-list{border-right:0;border-bottom:1px solid var(--fr-line)}
  .fr-dup-side{grid-template-columns:1fr}
  .fr-fanwrap{grid-template-columns:1fr;gap:.8em}
  .fr-sysrow{grid-template-columns:1fr;gap:.25em}
}

/* ============================================================
   figure containers in the case studies
   ============================================================ */
/* two concepts, stacked: each frame gets the full column */
.case-two{display:grid;gap:2rem;margin:2.25rem 0}
.case-two .case-fig{margin:0}

/* before as a screenshot, after as a working frame */
.case-ba{display:grid;gap:1.5rem;margin:2.25rem 0}
.case-ba figure{margin:0}
.case-ba .ba-b img{
  width:100%;max-width:24rem;height:auto;display:block;
  border:1px solid var(--rule);background:#fff;cursor:zoom-in;
}
.case-ba figcaption{
  margin-top:.5rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.03em;
  color:var(--ink-soft);line-height:1.45;
}

/* ============================================================
   HOME PAGE CORRECTIONS
   ============================================================ */

/* ---------- the opening must not resize ----------
   Eames is the widest pairing and wraps the headline onto a fourth
   line where the others take three. The reservation was three, so the
   room grew when the coin landed there. It reserves the worst case
   now, and the headline sits at the bottom of that reservation, so
   every pairing occupies exactly the same box. */

/* ---------- the date the coin has walked to ----------
   below 900px the ramp has no gutter, so the date has nowhere to sit
   beside the coin. it goes back into the entry it belongs to. */
@media (max-width:900px){
  .volume-when[hidden]{
    display:block;
    font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;
    text-transform:uppercase;color:var(--ochre);margin-bottom:.4rem;
  }
}

/* ---------- the opening must not resize ----------
   Eames is the widest pairing and wraps the headline onto a fourth
   line where every other pairing takes three. The room reserved three,
   so it grew by one line whenever the coin landed there. It reserves
   four now, and align-content pins the text to the bottom of that
   reservation without opening a flex or grid formatting context, so
   the wrap, the balance and the 15ch measure are all untouched. */
.room h1{
  min-height:4.18em;
  align-content:end;
}


/* ---------- shared list bits ---------- */
.fr-search{display:flex;align-items:center;gap:.6em;background:#fff;
  border:1px solid var(--fr-line);padding:.65em .85em}
.fr-search-i{color:var(--fr-faint);font-size:1.1em;flex:none}
.fr-search-p{color:var(--fr-faint)}
.fr-actions{display:flex;gap:.5em;align-items:stretch;padding:.85em 1.15em;
  border-top:1px solid var(--fr-line);flex-wrap:wrap}
.fr-actions > .fr-mono{align-self:center}
.fr-rr{display:grid}
.fr-rr-row{display:flex;gap:.85em;align-items:baseline;padding:.5em 0;
  border-top:1px solid var(--fr-line);font-size:.92em}
.fr-rr > .fr-sub:first-child{padding-bottom:.35em}
.fr-rr-row:first-of-type{border-top:0}
.fr-rr-row .fr-mono{color:var(--pal-red);flex:none}

/* ============================================================
   08–09 · what the action did
   ============================================================ */
.fr-done{padding:.3em 0}
.fr-done-k{display:inline-block;font-family:var(--mono,monospace);font-size:.7em;
  letter-spacing:.08em;text-transform:uppercase;background:var(--pal-green);color:#fff;
  padding:.28em .7em}
.fr-done--quiet .fr-done-k{background:var(--fr-soft)}
.fr-effect{display:grid;gap:.3em;margin:0}
.fr-effrow{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:.9em;align-items:baseline;
  padding:.5em .7em;background:var(--fr-wash);font-size:.88em}
.fr-effrow dt{font-family:var(--mono,monospace);font-size:.78em;letter-spacing:.04em;
  text-transform:uppercase;color:var(--fr-faint)}
.fr-effrow dd{margin:0;display:flex;gap:.5em;align-items:baseline;flex-wrap:wrap}
.fr-effrow s{color:var(--fr-faint)}
.fr-effrow b{font-weight:600}
.fr-asks{display:grid;gap:.35em}
.fr-ask{display:flex;justify-content:space-between;gap:1em;align-items:baseline;
  padding:.5em .7em;background:var(--fr-wash);font-size:.9em;flex-wrap:wrap}
.fr-ask span{font-family:var(--mono,monospace);font-size:.75em;letter-spacing:.04em;
  text-transform:uppercase;color:var(--pal-red)}
.fr-ask.is-yours{background:#E3F0E9}
.fr-ask.is-yours span{color:var(--pal-green)}

/* ============================================================
   10 · what reaches a case processor
   ============================================================ */
.fr-sk-rib--portal{fill:var(--ochre,#92662D);opacity:.42}
.fr-sk-rib--intake{fill:var(--slate,#3A4A5C);opacity:.40}
.fr-sk-rib--work{fill:#9AA0A8;opacity:.32}
.fr-sk-end-by{font-family:var(--mono,monospace);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;fill:var(--fr-faint)}
.fr-sk-end.is-on .fr-sk-end-by{fill:var(--ink-soft,#4A5058)}

@container (max-width:520px){
  .fr-wiz{grid-template-columns:1fr}
  .fr-dp{grid-template-columns:1fr}
  .fr-dp-side{border-left:0;border-top:1px solid var(--fr-line)}
  .fr-shelf-r{grid-template-columns:1fr}
  .fr-feat{grid-template-columns:repeat(2,1fr)}
  .fr-effrow{grid-template-columns:1fr;gap:.15em}
  .fr-match{grid-template-columns:2.4em minmax(0,1fr)}
  .fr-match-go{display:none}
  .fr-doors{flex-wrap:wrap}
  .fr-door{flex:1 1 45%}
}

/* ============================================================
   FOIAXPRESS · legacy chrome, sampled from the screenshots
   ============================================================ */
.frame--legacy2 .fr-stage,.frame--kit .fr-stage{background:#ECF0F1}
.lg-head{display:flex;align-items:center;gap:1.1em;background:#748EA3;padding:.85em 1.1em;color:#fff}
.lg-mark{font-size:1.9em;font-weight:300;letter-spacing:-.02em;line-height:1;display:flex;align-items:baseline}
.lg-mark b{font-weight:700}
.lg-mark sup{font-size:.32em;margin-left:.15em}
.lg-env{font-size:1em;opacity:.95}
.lg-acct{margin-left:auto;display:flex;gap:.4em}
.lg-nav{display:flex;align-items:center;gap:.5em;background:#334353;padding:.4em .8em;color:#fff}
.lg-navl{display:flex;flex-wrap:wrap}
.lg-navi{font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:.95em;
  background:none;border:0;color:#fff;padding:.35em .55em;cursor:pointer;white-space:nowrap}
.lg-navi:hover,.lg-navi.is-on{background:rgba(255,255,255,.14)}
.lg-navr{margin-left:auto;display:flex;gap:.3em;align-items:center}
.lg-crumb{display:flex;justify-content:space-between;gap:1em;background:#F9F8F5;
  padding:.5em 1.1em;font-size:.9em;border-bottom:1px solid #C9CFD4;flex-wrap:wrap}
.lg-crumb u{color:#1A3E6E}
.lg-sep{color:#5A6A78}
.lg-mand b{color:#EC0001}
.lg-reqbar{display:flex;align-items:center;gap:1.1em;background:#DDE3E8;
  border:1px solid #A7B7C5;margin:.6em .8em;padding:.5em .7em;flex-wrap:wrap}
.lg-doci,.lg-noti{width:1.1em;height:1.1em;background:#8AA0B4;flex:none}
.lg-rd,.lg-st{display:flex;align-items:center;gap:.5em;font-size:.95em}
.lg-over{background:#EC0001;color:#fff;padding:0 .35em}
.lg-pill{background:#C6C9D4;padding:.2em .9em}
.lg-reqbar .lg-b--next{margin-left:auto;min-width:6em}
.lg-body{display:grid;grid-template-columns:15em minmax(0,1fr);gap:.8em;padding:0 .8em .8em}
.lg-rail{background:#718CA1;padding:.15em 0;align-self:start}
.lg-raili{display:block;width:100%;text-align:left;font:inherit;
  font-family:var(--sans,'Archivo',sans-serif);font-size:.92em;
  background:none;border:0;color:#fff;padding:.62em .9em;cursor:pointer}
.lg-raili:hover{background:rgba(255,255,255,.12)}
.lg-raili.is-on{background:#fff;color:#1F323E;border-left:4px solid #4A6480;padding-left:calc(.9em - 4px)}
.lg-main{display:grid;grid-template-columns:minmax(0,1fr);gap:.9em;min-width:0}
.lg-panel{border:1px solid #B9C2D4;background:#fff;min-width:0}
.lg-panel-h{display:flex;align-items:center;gap:.6em;padding:.45em .7em;color:#0E2233;
  font-size:1.05em;background:linear-gradient(#CDEAFA,#A7D9F4)}
.lg-chart{width:.9em;height:.9em;background:#3E6A8C;
  clip-path:polygon(0 60%,25% 60%,25% 100%,0 100%,0 60%,37% 60%,37% 30%,62% 30%,62% 100%,37% 100%,37% 60%,75% 60%,75% 0,100% 0,100% 100%,75% 100%)}
.lg-panel-b{padding:.6em .7em;min-width:0}
.lg-acts{display:flex;gap:.5em;flex-wrap:wrap;margin:.3em 0 .5em}
.lg-b{
  font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:.92em;
  padding:.42em .95em;cursor:pointer;color:#1F323E;
  border:1px solid #8CA3B8;border-radius:2px;
  background:linear-gradient(#F4F7FA,#C8D5E0);
}
.lg-b:hover{background:linear-gradient(#FFFFFF,#D8E4EE)}
.lg-b:active{background:linear-gradient(#B8C9DA,#D8E4EE);box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.lg-b--sm{font-size:.82em;padding:.3em .6em}
.lg-b--mini{font-size:.78em;padding:.2em .45em;min-width:1.9em}
.lg-b--x{color:#1A3E6E}
.lg-b--pg{font-size:.75em;padding:.18em .4em;min-width:1.7em}
.lg-b--pg.is-on{background:#fff;border-color:#4A6480}
.lg-b--blue{background:linear-gradient(#7FC5EC,#3E93C8);border-color:#2E7AA8;color:#fff;
  display:inline-flex;align-items:center;gap:.6em}
.lg-b--blue:hover{background:linear-gradient(#95D2F4,#4FA4D8)}
.lg-b--blue i{border-left:1px solid rgba(255,255,255,.5);padding-left:.5em;font-style:normal}
.lg-b--next{background:linear-gradient(#6E8598,#3E5364);border-color:#293C46;color:#fff}
.lg-b--next:hover{background:linear-gradient(#7E95A8,#4E6374)}
.lg-in{font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:.9em;
  padding:.3em .45em;border:1px solid #8CA3B8;background:#fff;color:#1F323E}
.lg-in--xs{width:4.5em}
.lg-in--w{width:100%}
.lg-in--area{width:100%;resize:none}
.lg-in:focus{outline:2px solid #3E93C8;outline-offset:-1px}
.lg-sel{font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:.88em;
  padding:.28em .4em;border:1px solid #8CA3B8;background:linear-gradient(#FFFFFF,#E4EBF1);color:#1F323E}
.lg-sel--w{width:100%}
.lg-tw{overflow-x:auto}
.lg-t{border-collapse:collapse;width:100%;font-size:.88em}
.lg-t th{background:#56758F;color:#fff;font-weight:400;text-align:left;
  padding:.4em .5em;border-right:1px solid #7E97AC;white-space:nowrap}
.lg-t td{padding:.4em .5em;border-bottom:1px solid #DDE3E8;border-right:1px solid #EDEFF1;white-space:nowrap}
.lg-t .lg-tc{width:1.9em}
.lg-t tbody tr:hover td{background:#EFF5FA}
.lg-pager{display:flex;align-items:center;gap:.8em;padding:.35em 0;flex-wrap:wrap;
  border-top:1px solid #DDE3E8;font-size:.85em}
.lg-pg{display:flex;gap:.15em}
.lg-ps{display:flex;align-items:center;gap:.4em}
.lg-count{margin-left:auto;color:#41525E}
.lg-note{font-size:.85em;color:#1F323E;padding:.5em 0 .1em}

/* the legacy document viewer */
.lv-tools{display:flex;gap:.8em;align-items:center;background:linear-gradient(#F4F7FA,#DCE4EB);
  border-bottom:1px solid #A7B7C5;padding:.3em .5em;flex-wrap:wrap}
.lv-tl,.lv-tr{display:flex;gap:.2em;align-items:center;flex-wrap:wrap}
.lv-tr{margin-left:auto}
.lv-ti{font:inherit;font-size:.9em;line-height:1;padding:.3em .38em;cursor:pointer;
  background:none;border:1px solid transparent;border-radius:2px;color:#1F323E}
.lv-ti:hover{background:#FFF3D0;border-color:#C9A94A}
.lv-ti:active{background:#F0DFA8;box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.lv-body{display:grid;grid-template-columns:16em minmax(0,1fr) 2.6em;min-height:17em}
.lv-tree{background:#fff;border-right:1px solid #A7B7C5;padding:.4em 0;font-size:.85em;overflow:auto}
.lv-tn{display:flex;align-items:center;gap:.3em;padding:.12em .4em;white-space:nowrap}
.lv-tn.is-on .lv-tlab{background:#F7A044;color:#1F323E;padding:0 .25em}
.lv-tex{color:#6C7A85;font-size:.85em}
.lv-tico{font-size:.85em}
.lv-body .lv-sheet{background:#8E9AA3;padding:1em;display:flex;justify-content:center;overflow:auto}
.lv-doc{background:#fff;width:100%;max-width:30em;padding:1.4em 1.6em;
  box-shadow:0 1px 4px rgba(0,0,0,.28);font-size:.86em}
.lv-doc-h{display:flex;justify-content:space-between;border-bottom:2px solid #1F323E;
  padding-bottom:.35em;margin-bottom:.8em;letter-spacing:.06em}
.lv-doc-m{font-family:var(--mono,monospace);font-size:.85em;margin-bottom:.2em}
.lv-redact{margin:.9em 0;background:#000;height:1.15em;position:relative}
.lv-redact span{position:absolute;right:.4em;top:0;color:#fff;font-family:var(--mono,monospace);font-size:.72em}
.lv-right{background:linear-gradient(#F4F7FA,#DCE4EB);border-left:1px solid #A7B7C5;
  display:flex;flex-direction:column;align-items:center;padding:.3em 0;gap:.1em}
.lv-status{display:flex;justify-content:space-between;gap:1em;background:#fff;
  border-top:1px solid #A7B7C5;padding:.35em .7em;font-size:.85em;color:#C00000;flex-wrap:wrap}

/* the legacy search form */
.ls-outer{margin:.6em .8em .9em;border:1px solid #A7B7C5;background:#fff}
.ls-title{display:flex;justify-content:space-between;gap:1em;background:#748EA3;color:#fff;
  padding:.45em .7em;font-size:1em;flex-wrap:wrap}
.ls-hint{font-size:.88em;opacity:.95}
.ls-inner{border:1px solid #B9C2D4;margin:.5em}
.ls-band{display:flex;justify-content:space-between;gap:1em;align-items:center;
  background:linear-gradient(#CDEAFA,#A7D9F4);padding:.4em .7em;font-size:.95em;flex-wrap:wrap;
  border-bottom:1px solid #8FC4E4}
.ls-band .ls-hint{color:#1F323E}
.ls-opt{display:flex;align-items:center;gap:.5em;font-size:.9em}
.ls-grid{display:grid;gap:.45em;padding:.7em}
.ls-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2em}
.ls-f{display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:.6em;align-items:start;font-size:.88em}
.ls-l{text-align:right;padding-top:.35em;color:#1F323E}
.ls-c{display:flex;gap:.3em;align-items:flex-start;flex-wrap:wrap}
.ls-c > .lg-in,.ls-c > .lg-sel{flex:1;min-width:0}
.ls-cb{display:flex;align-items:center;gap:.35em;font-size:.95em;white-space:nowrap}
.ls-cbs{display:grid;gap:.3em;align-content:start;padding-top:.2em}
.ls-radios{gap:1em}
.ls-foot{display:flex;justify-content:flex-end;gap:.5em;padding:.6em .7em;
  border-top:1px solid #DDE3E8}

/* ============================================================
   the two kits
   ============================================================ */
.kit{padding:1.15em;display:grid;gap:1.3em;background:#fff}
.kit--sys{background:#fff}
.kit-h{display:flex;justify-content:space-between;align-items:baseline;gap:1em;
  border-bottom:1px solid var(--fr-line);padding-bottom:.4em;margin-bottom:.7em;flex-wrap:wrap}
.kit-h b{font-weight:600;font-size:.98em}
.kl-wall{display:flex;flex-wrap:wrap;gap:.32em;align-items:center}
.kl-b{font-family:var(--sans,'Archivo',sans-serif);line-height:1.2;white-space:nowrap;
  cursor:pointer;transition:filter .12s ease,transform .06s ease}
.kl-b:hover{filter:brightness(1.14)}
.kl-b:active{filter:brightness(.86);transform:translateY(1px)}
.kl-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em}
.kl-f{display:grid;gap:.2em;font-size:.82em;color:var(--fr-soft)}
.kl-f input,.kl-f select{font:inherit;font-family:var(--sans,'Archivo',sans-serif);
  font-size:1.05em;padding:.3em .4em;color:var(--fr-ink)}
.kl-f--a input{border:2px inset #9AA8B4;background:#fff}
.kl-f--b input{border:1px solid #8CA3B8;background:#F2F6F9;border-radius:0}
.kl-f--c select{border:1px solid #6E8598;background:linear-gradient(#fff,#E4EBF1);border-radius:3px}
.kl-f--d input{border:1px solid #C9CFD4;background:#fff;border-radius:6px}
.kl-f input:focus,.kl-f select:focus{outline:2px solid #3E93C8;outline-offset:1px}
.kl-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em}
.kl-p{border:1px solid #B9C2D4;background:#fff}
.kl-p-h{padding:.4em .6em;font-size:.9em}
.kl-p-h--sky{background:linear-gradient(#CDEAFA,#A7D9F4);color:#0E2233}
.kl-p-h--steel{background:#56758F;color:#fff}
.kl-p-h--grad{background:linear-gradient(#8FA6B8,#6E8598);color:#fff}
.kl-p-b{padding:.5em .6em;display:grid;gap:.35em}
.kl-p-l{display:block;height:.5em;background:#E7E9EC}
.kl-type{display:grid;gap:.4em;align-items:baseline}
.kl-colors{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
.kl-sw{font:inherit;font-family:var(--sans,'Archivo',sans-serif);text-align:left;
  display:grid;grid-template-columns:1.6em 1fr auto;gap:.5em;align-items:center;
  background:#fff;border:1px solid var(--fr-line);padding:.35em .45em;cursor:pointer;font-size:.85em}
.kl-sw:hover{border-color:var(--fr-soft)}
.kl-chip{width:1.6em;height:1.6em;background:var(--c);border:1px solid rgba(0,0,0,.15)}
.kl-hex{font-family:var(--mono,monospace);font-size:.8em;color:var(--fr-faint)}
.kl-sw:hover .kl-hex,.kl-sw:focus-visible .kl-hex{color:var(--fr-ink)}

.ks-btns{display:grid;gap:.5em}
.ks-row{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:.8em;align-items:center}
.ks-states{display:flex;flex-wrap:wrap;gap:.4em}
.ks-b{font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:.9em;
  padding:.5em 1em;cursor:pointer;border:1px solid transparent;border-radius:2px;line-height:1.25;
  transition:background .14s ease,color .14s ease,border-color .14s ease}
.ks-b--pri{background:#41477D;color:#fff;border-color:#41477D}
.ks-b--pri:hover,.ks-b--pri.is-hover{background:#353A66}
.ks-b--pri:active,.ks-b--pri.is-active{background:#2A2E52}
.ks-b--sec{background:#fff;color:#41477D;border-color:#41477D}
.ks-b--sec:hover,.ks-b--sec.is-hover{background:#ECF0F7}
.ks-b--sec:active,.ks-b--sec.is-active{background:#DAE3F1}
.ks-b--ter{background:none;color:#41477D;border-color:transparent;
  text-decoration:underline;text-underline-offset:.25em}
.ks-b--ter:hover,.ks-b--ter.is-hover{background:#ECF0F7}
.ks-b--ter:active,.ks-b--ter.is-active{background:#DAE3F1}
.ks-b--des{background:#E92942;color:#fff;border-color:#E92942}
.ks-b--des:hover,.ks-b--des.is-hover{background:#C81F35}
.ks-b--des:active,.ks-b--des.is-active{background:#A81829}
.ks-b:disabled{opacity:.38;cursor:not-allowed}
.ks-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
.ks-f{display:grid;gap:.22em}
.ks-f-l{font-size:.82em;color:#7D7D7D}
.ks-f input,.ks-f select{font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:.95em;
  padding:.5em .6em;border:1px solid #CDCFD9;border-radius:2px;background:#fff;color:#010203}
.ks-f input:focus,.ks-f select:focus{outline:none;border-color:#41477D;box-shadow:0 0 0 2px #DAE3F1}
.ks-f.is-error input{border-color:#E92942;box-shadow:0 0 0 2px #FADCE4}
.ks-f-e{font-size:.78em;color:#E92942}
.ks-f.is-disabled{opacity:.5}
.ks-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
.ks-c{background:#fff;border:1px solid #DDDDDD;border-radius:3px;padding:.85em;
  display:grid;gap:.45em;align-content:start;transition:box-shadow .16s ease,border-color .16s ease}
.ks-c:hover{border-color:#B0C6E7;box-shadow:0 2px 8px rgba(65,71,125,.12)}
.ks-c b{font-weight:600}
.ks-c p{font-size:.88em;color:#7D7D7D;line-height:1.45}
.ks-c .ks-b{justify-self:start}
.ks-type{display:grid;gap:.15em}
.ks-t{font:inherit;font-family:var(--sans,'Archivo',sans-serif);text-align:left;
  display:grid;grid-template-columns:12em minmax(0,1fr);gap:1em;align-items:baseline;
  background:none;border:0;border-radius:2px;padding:.2em .35em;cursor:pointer}
.ks-t:hover{background:#ECF0F7}
.ks-t-m{font-family:var(--mono,monospace);font-size:.72em;letter-spacing:.03em;color:#7D7D7D;text-align:right}
.ks-t-s{line-height:1.1;font-weight:400}
.ks-colors{display:grid;grid-template-columns:repeat(4,1fr);gap:.5em}
.ks-sw{font:inherit;font-family:var(--sans,'Archivo',sans-serif);text-align:left;
  display:grid;gap:.28em;background:#fff;border:1px solid #DDDDDD;border-radius:3px;
  padding:.5em;cursor:pointer;transition:border-color .16s ease}
.ks-sw:hover{border-color:#41477D}
.ks-ramp{display:grid;grid-template-columns:2fr 1fr 1fr;height:2em}
.ks-ramp i{display:block}
.ks-sw b{font-size:.85em;font-weight:600}
.ks-use{font-size:.76em;color:#7D7D7D;line-height:1.35}
.ks-hex{font-family:var(--mono,monospace);font-size:.66em;color:#B4B4B4}
.ks-bar{border-top:1px solid var(--fr-line);background:var(--fr-wash);
  padding:.7em 1.15em;font-family:var(--mono,monospace);font-size:.75em;
  letter-spacing:.03em;color:var(--fr-soft);min-height:2.4em}
.ks-live:empty::before{content:"Hover or focus anything above";opacity:.6}

/* ============================================================
   FOIAXPRESS · the redesigned chrome
   ============================================================ */
.frame--modern .fr-stage{background:#ECF0F7}
.md-head{display:flex;align-items:center;gap:1.1em;background:#686D8A;padding:.7em 1.1em;color:#fff}
.md-mark{font-size:1.25em;letter-spacing:-.01em}
.md-mark b{font-weight:700}
.md-mark span{opacity:.85;font-weight:300}
.md-nav{display:flex;gap:.2em;flex-wrap:wrap}
.md-navi{font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:.9em;
  background:none;border:0;color:#fff;padding:.4em .7em;border-radius:2px;cursor:pointer}
.md-navi:hover{background:rgba(255,255,255,.16)}
.md-navi.is-on{background:rgba(255,255,255,.22)}
.md-search{margin-left:auto;display:flex;align-items:center;gap:.5em;background:#fff;
  border-radius:3px;padding:.35em .6em;min-width:12em}
.md-si{color:#7D7D7D;flex:none}
.md-in{font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:.9em;
  border:0;background:none;color:#010203;flex:1;min-width:0;padding:.1em 0}
.md-in:focus{outline:none}
.md-icons{display:flex;align-items:center;gap:.35em}
.md-ic{font:inherit;font-size:.92em;line-height:1;background:none;border:0;color:inherit;
  padding:.35em;cursor:pointer;border-radius:2px}
.md-ic:hover{background:rgba(0,0,0,.07)}
.md-head .md-ic:hover{background:rgba(255,255,255,.18)}
.md-av{width:1.9em;height:1.9em;border-radius:50%;background:#DAE3F1;color:#41477D;
  display:inline-flex;align-items:center;justify-content:center;font-size:.75em;font-weight:600;flex:none}
.md-av--sm{width:1.6em;height:1.6em;font-size:.66em}
.md-av--none{background:#EEE;color:#7D7D7D}
.md-page{padding:1.1em;display:grid;gap:.9em}
.md-card{background:#fff;border-radius:3px;box-shadow:0 1px 2px rgba(65,71,125,.10);min-width:0}
.md-hero{padding:1em 1.15em;display:grid;gap:.35em}
.md-hero-t{display:flex;justify-content:space-between;align-items:center;gap:1em}
.md-crumb{font-size:.85em;color:#41477D}
.md-hero-a{display:flex;gap:.15em;color:#7D7D7D}
.md-h4{font-size:1.3em;font-weight:600;letter-spacing:-.014em}
.md-h5{font-size:1.05em;font-weight:600;letter-spacing:-.01em}
.md-sub{font-size:.86em;color:#7D7D7D;line-height:1.45}
.md-meta{display:flex;gap:1.6em;align-items:center;flex-wrap:wrap;margin-top:.5em}
.md-person{display:grid;gap:.15em}
.md-role{font-size:.75em;color:#7D7D7D}
.md-pn{display:flex;align-items:center;gap:.35em;font-size:.88em}
.md-meta-r{margin-left:auto;display:flex;gap:1.1em;flex-wrap:wrap}
.md-status{display:inline-flex;align-items:center;gap:.4em;font-size:.85em;white-space:nowrap}
.md-dot{width:.6em;height:.6em;border-radius:50%;flex:none;display:inline-block}
.md-dot--sky{background:#B0C6E7}.md-dot--blue{background:#686D8A}
.md-dot--green{background:#65995B}.md-dot--red{background:#E92942}
.md-dot--ink{background:#7D7D7D}.md-dot--plum{background:#8A4386}
.md-dot--pink{background:#E4919C}.md-dot--orange{background:#F37021}
.md-two{display:grid;grid-template-columns:15em minmax(0,1fr);gap:.9em;align-items:start}
.md-railcard{padding:.35em}
.md-step{display:grid;grid-template-columns:1em 1fr 1em;gap:.55em;align-items:center;width:100%;
  font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:.9em;text-align:left;
  background:none;border:0;border-radius:2px;padding:.6em .55em;cursor:pointer;color:#010203}
.md-step:hover{background:#ECF0F7}
.md-step.is-on{background:#414770;color:#fff}
.md-chev{font-style:normal;color:#7D7D7D}
.md-step.is-on .md-chev{color:#fff}
.md-mark2{width:.95em;height:.95em;border-radius:50%;display:block}
.md-mark2--done{background:#414770;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #414770}
.md-mark2--half{background:linear-gradient(90deg,#414770 50%,#fff 50%);box-shadow:inset 0 0 0 1px #414770}
.md-mark2--todo{border:1px dashed #B4B4B4}
.md-step.is-on .md-mark2--done{background:#fff;box-shadow:inset 0 0 0 2px #414770,inset 0 0 0 3px #fff}
.md-step.is-on .md-mark2--half{background:linear-gradient(90deg,#fff 50%,#414770 50%);box-shadow:inset 0 0 0 1px #fff}
.md-step.is-on .md-mark2--todo{border-color:#fff}
.md-tbar{display:flex;justify-content:space-between;align-items:center;gap:1em;
  padding:.85em 1em;flex-wrap:wrap}
.md-filters{display:flex;gap:.4em;flex-wrap:wrap;align-items:center}
.md-chip{font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:.84em;
  display:inline-flex;align-items:center;gap:.5em;background:#fff;color:#7D7D7D;
  border:1px solid #CDCFD9;border-radius:3px;padding:.4em .7em;cursor:pointer}
.md-chip:hover{border-color:#41477D;color:#010203}
.md-chip i{font-style:normal;font-size:.85em}
.md-chip--all{color:#41477D;border-color:#41477D}
.md-add{display:inline-flex;align-items:center;gap:.55em}
.md-add i{font-style:normal;border-left:1px solid rgba(255,255,255,.35);padding-left:.5em}
.md-tw{overflow-x:auto}
.md-t{border-collapse:collapse;width:100%;font-size:.86em}
.md-t th{background:#F4F5F9;color:#41477D;font-weight:600;text-align:left;
  padding:.55em .7em;white-space:nowrap;border-bottom:1px solid #E4E6EF}
.md-t th.is-sorted{background:#DAE3F1}
.md-t th i{font-style:normal;margin-left:.4em}
.md-t td{padding:.5em .7em;border-bottom:1px solid #F0F1F6;white-space:nowrap}
.md-t tbody tr:hover td{background:#F7F8FC}
.md-type{display:inline-flex;align-items:center;gap:.4em}
.md-tico{width:.85em;height:.95em;background:#CDCFD9;flex:none}
.md-un{display:inline-flex;align-items:center;gap:.4em}
.md-empty{padding:1.15em;display:grid;gap:.3em;justify-items:center;text-align:center}
.md-empty .md-h5{justify-self:start}
.md-box{width:5.5em;height:3.6em;margin:1em 0 .5em;
  background:linear-gradient(135deg,#E4E6EF,#F4F5F9);border:1px solid #DDDDDD}
.md-vt{display:inline-flex;background:#fff;border:1px solid #CDCFD9;border-radius:3px;overflow:hidden}
.md-vb{font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:.82em;
  background:none;border:0;padding:.4em .9em;cursor:pointer;color:#7D7D7D}
.md-vb[aria-pressed="true"]{background:#414770;color:#fff}
.md-hist{font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:.84em;
  background:none;border:0;color:#41477D;cursor:pointer;display:inline-flex;gap:.4em;align-items:center;padding:.2em 0}
.md-hist i{font-style:normal}

/* the redesigned viewer */
.dv{display:grid;grid-template-columns:16em minmax(0,1fr) 17em 2.6em;min-height:22em;background:#ECF0F7}
.dv-l{background:#fff;border-right:1px solid #E4E6EF;display:grid;grid-template-rows:auto auto 1fr;min-width:0}
.dv-find{display:flex;align-items:center;gap:.4em;padding:.6em .7em;border-bottom:1px solid #F0F1F6}
.dv-lh{display:flex;justify-content:space-between;align-items:center;gap:.5em;padding:.5em .7em}
.dv-lt{display:flex;gap:.05em;color:#7D7D7D}
.dv-tree{overflow:auto;padding-bottom:.5em}
.dv-tn{display:flex;align-items:center;gap:.35em;padding:.35em .7em;font-size:.86em}
.dv-tn i{font-style:normal;color:#7D7D7D}
.dv-box{border:1px solid #CDCFD9;width:1em;height:1em;line-height:.85em;text-align:center;font-size:.8em}
.dv-tn--d{padding-left:1.5em}
.dv-tn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dv-p{display:flex;align-items:center;gap:.45em;padding:.3em .7em .3em 2.2em;font-size:.86em;cursor:pointer}
.dv-p:hover{background:#F7F8FC}
.dv-p.is-on{background:#F4F5F9}
.dv-p input{accent-color:#414770}
.dv-pn{flex:1}
.dv-flag{display:inline-flex;align-items:center;gap:.3em;background:#F4F5F9;border-radius:2em;
  padding:.15em .6em;font-size:.85em;color:#41477D}
.dv-c{display:grid;grid-template-rows:auto 1fr auto;gap:.7em;padding:.7em;min-width:0}
.dv-layer{display:flex;align-items:center;gap:.7em;padding:.5em .7em;justify-self:center;min-width:60%}
.dv-ly,.dv-lyr{display:grid;gap:.1em;font-size:.86em}
.dv-lyr{margin-left:auto;text-align:right}
.dv-lyn{display:inline-flex;align-items:center;gap:.4em}
.dv-sheets{display:grid;gap:.7em;overflow:auto;align-content:start}
.dv-sheet{background:#fff;padding:1.5em 1.8em;box-shadow:0 1px 3px rgba(65,71,125,.14)}
.dv-zoom{display:flex;align-items:center;gap:.35em;padding:.4em .6em;justify-self:center}
.dv-pg{border:1px solid #CDCFD9;border-radius:2px;padding:.25em .4em;width:3.4em;text-align:center;font-size:.85em}
.dv-r{background:#fff;border-left:1px solid #E4E6EF;overflow:auto;min-width:0}
.dv-rh{display:flex;justify-content:space-between;align-items:center;padding:.7em .8em}
.dv-tabs{display:grid;grid-template-columns:1fr 1fr}
.dv-tab{font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:.85em;
  background:none;border:0;border-bottom:2px solid #E4E6EF;padding:.5em;cursor:pointer;color:#7D7D7D}
.dv-tab[aria-pressed="true"]{background:#DAE3F1;border-bottom-color:#414770;color:#010203}
.dv-sec{background:#F4F5F9;padding:.35em .8em;font-size:.8em;color:#7D7D7D}
.dv-h{display:grid;grid-template-columns:1em minmax(0,1fr) auto;gap:.5em;
  padding:.55em .8em;border-bottom:1px solid #F4F5F9;font-size:.85em}
.dv-hi{color:#7D7D7D;font-style:normal}
.dv-hb{display:grid;gap:.05em;min-width:0}
.dv-hp{font-size:.85em;color:#7D7D7D}
.dv-hb b{font-weight:600}
.dv-hb .md-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.85em}
.dv-ht{color:#7D7D7D;font-size:.85em;white-space:nowrap}
.dv-tools{background:#fff;border-left:1px solid #E4E6EF;display:flex;flex-direction:column;
  align-items:center;padding:.4em 0;gap:.1em;color:#7D7D7D}
.dv-tool.is-on{background:#414770;color:#fff;border-radius:2px}

/* the redesigned search */
.sa-top{display:flex;justify-content:space-between;align-items:center;gap:1em;flex-wrap:wrap}
.sa-tip{display:flex;align-items:center;gap:.6em}
.sa-tipb{background:#7D7D7D;color:#fff;font-size:.82em;padding:.5em .8em;border-radius:2px;position:relative}
.sa-tipb::after{content:"";position:absolute;top:-.4em;right:1.6em;border:.4em solid transparent;border-bottom-color:#7D7D7D}
.sa-search{display:flex;align-items:center;gap:.6em;background:#fff;border-radius:3px;
  padding:.7em .9em;box-shadow:0 1px 2px rgba(65,71,125,.10)}
.sa-sh{font:inherit;font-family:var(--sans,'Archivo',sans-serif);background:none;border:0;
  display:inline-flex;align-items:center;gap:.5em;cursor:pointer;padding:.2em 0;color:#010203}
.sa-sh i{font-style:normal;color:#41477D}
.sa-saved{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em}
.sa-sv{font:inherit;font-family:var(--sans,'Archivo',sans-serif);text-align:left;border:0;
  display:grid;grid-template-columns:2em 1fr auto;gap:.6em;align-items:center;padding:.7em .8em;cursor:pointer}
.sa-sv:hover{box-shadow:0 2px 8px rgba(65,71,125,.16)}
.sa-ico{font-style:normal;font-size:1.15em;color:#41477D}
.sa-ico--lg{font-size:1.5em}
.sa-svb{display:grid;gap:.1em;min-width:0}
.sa-svb b{font-size:.9em;font-weight:600}
.sa-svb .md-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8em}
.sa-star{font-style:normal;color:#41477D}
.sa-fy{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em}
.sa-fyc{padding:.85em;display:grid;gap:.3em;align-content:start}
.sa-fyh{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5em}
.sa-fyc b{font-size:.95em}
.sa-fyc .ks-b{justify-self:start;margin-top:.5em;font-size:.82em;padding:.4em .8em}
.sa-allh{display:flex;justify-content:space-between;align-items:center;gap:1em}
.sa-filt{display:flex;gap:.4em;align-items:center;padding:.6em;flex-wrap:wrap}
.sa-fsearch{display:flex;align-items:center;gap:.4em;border:1px solid #CDCFD9;border-radius:3px;
  padding:.32em .6em;flex:1;min-width:8em}
.sa-res{display:grid;grid-template-columns:minmax(0,1fr);gap:.6em}
.sa-rc{padding:.85em 1em;display:grid;gap:.25em}
.sa-rch{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap}
.sa-rcs{display:flex;gap:1em;flex-wrap:wrap}
.sa-clock{font-style:normal;color:#E4919C}
.sa-rc b{font-size:1em}
.sa-rc p{font-size:.86em;color:#7D7D7D;line-height:1.45;max-width:46em}
.sa-rcf{display:flex;justify-content:space-between;align-items:center;gap:1em;margin-top:.35em;
  border-top:1px solid #F4F5F9;padding-top:.4em}
.sa-rci{display:flex;gap:.1em;color:#7D7D7D}

/* ============================================================
   record custodian response times
   ============================================================ */
.cu-rest{fill:#E7E4DE}
.cu-bar{fill:var(--ink,#16181C);transition:fill .16s ease}
.pl .cu-v{font-size:10px;fill:var(--ink,#16181C);text-anchor:middle}
.pl.is-picking .cu-bar{fill:#B4B0A8}
.pl.is-picking .cu-v{fill:#8C8880}
.pl.is-picking .cu-g.is-on .cu-bar{fill:var(--ink,#16181C)}
.pl.is-picking .cu-g.is-on .cu-v{fill:var(--ink,#16181C);font-weight:500}
.cu-key{width:1.1em;height:.7em;display:inline-block;flex:none}
.cu-key--bar{background:var(--ink,#16181C)}
.cu-key--rest{background:#E7E4DE}

@container (max-width:560px){
  /* 1fr has an auto minimum, which a wide table pushes past */
  .lg-body{grid-template-columns:minmax(0,1fr)}
  .md-two{grid-template-columns:minmax(0,1fr)}
  .dv{grid-template-columns:minmax(0,1fr)}
  .dv-l,.dv-r,.dv-tools{border:0;border-top:1px solid #E4E6EF}
  .dv-tools{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .sa-saved,.sa-fy{grid-template-columns:repeat(2,1fr)}
  .ks-colors{grid-template-columns:repeat(2,1fr)}
  .ks-fields,.ks-cards,.kl-fields,.kl-panels,.kl-colors{grid-template-columns:1fr 1fr}
  .ls-row{grid-template-columns:1fr}
  .ks-row{grid-template-columns:1fr}
  .ks-t{grid-template-columns:1fr}
  .lv-body{grid-template-columns:1fr}
}


/* ---------- the six rebuilt screens run denser ---------- */
.frame--legacy2,.frame--modern{font-size:clamp(9px,.92vw,11.5px)}
.lg-tw,.md-tw{position:relative}
.lg-tw::after,.md-tw::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:2.2em;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.92));
}
.lg-tw,.md-tw{scrollbar-width:thin}

.lv-tn input[type=checkbox],.dv-p input[type=checkbox]{width:1em;height:1em;margin:0}
.lg-t input[type=checkbox]{width:1em;height:1em;margin:0}

/* ============================================================
   Carbon's extra-large button: square, label top-left, 64px
   floor, flush in a set, primary on the outside.
   ============================================================ */
.cbset{display:flex;flex-wrap:wrap;border-top:1px solid var(--fr-line)}
.cbset--end{justify-content:flex-end}
.cb{
  flex:1 1 0;min-width:11em;min-height:4.6em;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.1em;
  font:inherit;font-family:var(--sans,'Archivo',sans-serif);text-align:left;
  padding:.95em 3.2em .95em 1em;border:0;border-radius:0;cursor:pointer;
  transition:background .14s ease,box-shadow .14s ease;
}
.cb small{font-size:.84em;opacity:.85;line-height:1.3}
.cb b{font-size:1.05em;font-weight:600;line-height:1.3}
.cb--ghost{background:#DDDDDD;color:#161616}
.cb--ghost:hover{background:#CFCFCF}
.cb--ghost:active{background:#BEBEBE}
.cb--primary{background:#0F62FE;color:#fff}
.cb--primary:hover{background:#0353E9}
.cb--primary:active{background:#002D9C}
.cb--danger{background:#DA1E28;color:#fff}
.cb--danger:hover{background:#BA1B23}
.cb--danger:active{background:#750E13}
.cb:disabled{background:#C6C6C6;color:#8D8D8D;cursor:not-allowed}
.cb:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px currentColor}
/* a requester who has just taken the document probably does not need it requested */
.cb--primary.is-quiet{background:#5A87D8}

/* ============================================================
   01 · the portal with no opinion
   ============================================================ */
.frame--legacy .fr-stage,.fr-legacy{background:#fff}
.fr-legacy-head{background:#1B3A6B;color:#fff;padding:1.1em 1.2em .9em;position:relative}
.fr-legacy-title{font-family:Georgia,'Times New Roman',serif;font-size:1.35em;font-weight:700}
.fr-legacy-sub{font-family:Georgia,'Times New Roman',serif;font-size:1em;opacity:.92;margin-top:.15em}
.fr-legacy-acct{position:absolute;right:1.2em;bottom:.8em;display:flex;gap:1.1em;font-size:.85em}
.fr-legacy-nav{display:flex;flex-wrap:wrap;gap:1.4em;background:#22447A;color:#DCE7F7;
  padding:.55em 1.2em;font-size:.9em}
.fr-legacy-crumb{background:#1B3A6B;color:#fff;padding:.5em 1.2em;font-size:.9em;border-top:2px solid #7A93BE}
.fr-legacy-body{padding:1.15em 1.2em;font-size:.92em;line-height:1.5;border:1px solid #B9C2D4;border-top:0}
.fr-legacy-body p{margin-bottom:.85em}
.fr-legacy-body u{color:#0000EE}
.lg-ul,.lg-ol{margin:0 0 .85em 1.4em}
.lg-ul li,.lg-ol li{margin-bottom:.2em}

/* ============================================================
   09 · the queue changes with the decision
   ============================================================ */
.fr-cand.is-absorbed{opacity:.55;background:#E3F0E9;border-color:#B6D2C2}
.fr-cand.is-absorbed .fr-cand-s{background:var(--pal-green);color:#fff}
.fr-cand.is-gone{opacity:.5;text-decoration:line-through}
.fr-cand.is-flagged{border-color:var(--pal-amber);box-shadow:inset 3px 0 0 var(--pal-amber)}
.fr-cand.is-flagged .fr-cand-s{background:#FBEEDA;color:var(--pal-amber)}
.fr-done--warn .fr-done-k{background:var(--pal-amber)}

/* ============================================================
   11 · the diagram, with its detail back
   ============================================================ */
.sk-node{fill:var(--slate,#3A4A5C)}
.sk-node--src{fill:var(--ink,#16181C)}
.sk-node--mid{fill:var(--slate,#3A4A5C)}
.sk-node--portal{fill:var(--ochre,#92662D)}
.sk-node--intake{fill:var(--slate,#3A4A5C)}
.sk-node--work{fill:#9AA0A8}
.sk-bub{fill:none;stroke:var(--fr-line);stroke-width:1}
.sk-bubt{font-family:var(--mono,monospace);font-size:11px;fill:var(--ink-soft,#4A5058);text-anchor:middle}
.sk-mid{text-anchor:start}
.sk-star{fill:#F5C518}
.sk-startt{font-family:var(--sans,'Archivo',sans-serif);font-size:9px;font-weight:600;
  fill:#161616;text-anchor:middle}
.fr-sk-rib--work{fill:#9AA0A8;opacity:.32}

@container (max-width:560px){
  .sf-cards,.sf-stats,.wz-opts,.af-grid,.ph-most,.ph-stats,.rr-row{grid-template-columns:repeat(2,1fr)}
  .im-split{grid-template-columns:minmax(0,1fr)}
  .dp{grid-template-columns:minmax(0,1fr)}
  .dp-side{border-left:0;border-top:1px solid var(--fr-line)}
  .af-hero{grid-template-columns:minmax(0,1fr)}
  .af-bigseal{display:none}
  .wz-rail{display:none}
  .cb{min-width:100%}
}

/* ---------- the live search and the featured tiles ---------- */
.fr-search--live{padding:.5em .85em}
.fr-search--live:focus-within{border-color:var(--pal-navy);box-shadow:inset 0 0 0 1px var(--pal-navy)}
.fr-input-live{
  font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:1em;
  border:0;background:none;flex:1 1 auto;min-width:0;padding:.2em 0;color:var(--fr-ink);
}
.fr-input-live::placeholder{color:var(--fr-faint)}
.fr-input-live:focus{outline:none}
.fr-tryrow{display:flex;gap:.6em;align-items:center;flex-wrap:wrap;margin-top:.6em}
.fr-feat{display:grid;grid-template-columns:repeat(4,1fr);gap:.55em}
.fr-feattile{
  position:relative;background:#fff;border:1px solid var(--fr-line);padding:.7em .75em;
  display:flex;flex-direction:column;gap:.35em;font-size:.86em;line-height:1.25;
}
.fr-feattile b{font-weight:500}
.fr-feattile span:not(.fr-featflag){font-family:var(--mono,monospace);font-size:.8em;color:var(--fr-faint)}
.fr-feattile.is-hot{border-color:var(--ochre,#92662D);padding-top:1.9em}
.fr-featflag{
  position:absolute;top:0;left:0;right:0;background:var(--ochre,#92662D);color:#fff;
  font-family:var(--mono,monospace);font-size:.68em;letter-spacing:.06em;
  text-transform:uppercase;padding:.25em .6em;
}

/* ============================================================
   CASE STUDY TYPOGRAPHY
   ============================================================ */

/* ---------- the pull statement ----------
   the left bar repeated the rail's marker and the note's border. the
   claim carries its own weight instead: bigger, tighter, indented by
   nothing, with a rule under it rather than beside it. */
.case-main .claim{
  border-left:0;
  padding-left:0;
  padding-bottom:1rem;
  border-bottom:1px solid var(--rule);
  margin:2.5rem 0;
  font-size:clamp(1.35rem,2.6vw,1.7rem);
  font-stretch:var(--head-wd);
  font-weight:var(--head-wt);
  letter-spacing:-.018em;
  line-height:1.2;
  max-width:26ch;
}

/* ---------- the contents list ----------
   the coin is the site's marker for where you are, so the rail wears
   one too instead of a second left bar. */
.case-rail a{border-left:0;padding-left:1.4rem;margin-left:0;position:relative}

/* ---------- what I took from it ----------
   two of them. they did not need numbering. */
.case-main .laws--took .law-n{display:none}
.case-main .laws--took .law{grid-template-columns:1fr}

/* ---------- the next case ----------
   the rule that grows on hover becomes the arrow it was implying */
a.case-next .shell::after{
  height:0;border-top:1px solid currentColor;background:none;
  position:relative;
}
a.case-next .shell{position:relative}
a.case-next .shell::before{
  /* the shell pads its content, so the arrow starts where the rule does */
  content:"";position:absolute;left:clamp(1.25rem,5vw,4rem);bottom:-.16rem;
  width:.42rem;height:.42rem;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translateX(1.55rem) rotate(45deg) scale(.5);
  opacity:0;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),opacity .18s ease;
  pointer-events:none;
}
a.case-next:hover .shell::before,a.case-next:focus-visible .shell::before{
  transform:translateX(4.08rem) rotate(45deg) scale(1);
  opacity:1;
}
@media (prefers-reduced-motion:reduce){
  a.case-next .shell::before{transition:none}
}

/* ============================================================
   02 · the safe concept — modernized, agency themed
   ============================================================ */
.sf{--ag-ink:#172D50;--ag-accent:#005EA2;--ag-wash:#F0F3F8;--ag-face:'Archivo',sans-serif;
  font-family:var(--ag-face);background:#fff}
.sf-head{display:flex;align-items:center;gap:.8em;background:var(--ag-ink);color:#fff;padding:.75em 1.1em}
.sf-seal{width:2em;height:2em;border-radius:50%;background:rgba(255,255,255,.16);
  display:inline-flex;align-items:center;justify-content:center;font-size:.68em;
  font-weight:700;letter-spacing:.04em;flex:none;border:1px solid rgba(255,255,255,.4)}
.sf-name{font-weight:600;font-size:1.02em}
.sf-nav{margin-left:auto;display:flex;gap:1.1em;align-items:center;font-size:.88em;opacity:.95}
.sf-b{font:inherit;font-family:var(--ag-face);font-size:.9em;padding:.5em 1em;cursor:pointer;
  border:1px solid var(--ag-accent);background:#fff;color:var(--ag-accent);border-radius:2px}
.sf-b:hover{background:var(--ag-wash)}
.sf-b--pri{background:var(--ag-accent);color:#fff}
.sf-b--pri:hover{filter:brightness(.92)}
.sf-b--out{border-color:rgba(255,255,255,.6);background:transparent;color:#fff}
.sf-b--out:hover{background:rgba(255,255,255,.14)}
.sf-hero{background:var(--ag-wash);padding:1.3em 1.2em}
.sf-h{font-size:1.5em;font-weight:700;letter-spacing:-.015em;color:var(--ag-ink);line-height:1.2}
.sf-p{margin:.5em 0 .9em;max-width:44em;color:#40474F;font-size:.95em;line-height:1.55}
.sf-cta{display:flex;gap:.6em;flex-wrap:wrap}
.sf-body{padding:1.2em;display:grid;gap:1.1em;align-content:start}
.sf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
.sf-card{font:inherit;font-family:var(--ag-face);text-align:left;cursor:pointer;
  border:1px solid var(--fr-line);background:#fff;padding:.95em;
  display:grid;gap:.35em;align-content:start;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.sf-card:hover{border-color:var(--ag-accent);box-shadow:0 2px 10px rgba(0,0,0,.07);transform:translateY(-1px)}
.sf-card b{font-size:1em;font-weight:600;color:var(--ag-ink)}
.sf-card p{font-size:.88em;color:#5A6068;line-height:1.5}
.sf-notice{margin-top:.9em;background:var(--ag-wash);padding:.8em .95em}
.sf-notice b{display:block;font-size:.95em;color:var(--ag-ink)}
.sf-notice p{font-size:.88em;color:#5A6068;margin-top:.15em}
.sf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.7em;margin-top:1em}
.sf-stat{display:grid;gap:.1em}
.sf-stat b{font-size:1.3em;font-weight:700;color:var(--ag-ink);letter-spacing:-.02em}
.sf-stat span{font-size:.82em;color:#5A6068}






.fr-note--bare{padding:.75em 1.15em}

/* ============================================================
   03–04 · built from the FOIAXpress system
   ============================================================ */
.frame--ds .fr-stage{background:#ECF0F7}
.ic{display:block;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.ds{font-family:var(--sans,'Archivo',sans-serif);color:#010203}
.ds-top{display:flex;align-items:center;gap:1em;background:#41477D;color:#fff;padding:.75em 1.1em}
.ds-mark{display:flex;align-items:baseline;gap:.5em;font-size:1.05em}
.ds-mark b{font-weight:700}
.ds-mark span{opacity:.8;font-size:.88em}
.ds-topr{margin-left:auto;display:flex;gap:1.1em;font-size:.88em;opacity:.9}
.ds-body{padding:1.1em}
.ds-steps{list-style:none;display:flex;gap:.5em;margin:0 0 1em;padding:0}
.ds-step{flex:1;min-width:0;display:grid;gap:.45em;
  font-size:.82em;color:#7D7D7D;
  animation:fr-in .28s cubic-bezier(.2,.7,.2,1) both}
.ds-step span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ds-bar{display:block;height:3px;background:#CDCFD9}
.ds-step.is-now{color:#41477D;font-weight:600}
.ds-step.is-now .ds-bar{background:#41477D}
@keyframes fr-in{from{opacity:0;transform:translateY(-.3em)}to{opacity:1;transform:none}}
.ds-sheet{background:#fff;border-radius:3px;padding:1.3em;box-shadow:0 1px 2px rgba(65,71,125,.10)}
.ds-h4{font-size:1.35em;font-weight:600;letter-spacing:-.014em;line-height:1.2}
.ds-sub{font-size:.9em;color:#7D7D7D;margin:.3em 0 1em;line-height:1.5;max-width:46em}
.ds-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.7em}
.ds-tile{font:inherit;font-family:var(--sans,'Archivo',sans-serif);text-align:left;cursor:pointer;
  background:#ECF0F7;border:2px solid transparent;border-radius:3px;padding:1.1em 1em;
  display:grid;gap:.55em;align-content:start;color:#010203;
  transition:border-color .16s ease,background .16s ease,transform .16s ease}
.ds-tile .ic{color:#41477D}
.ds-tile:hover{background:#DAE3F1;transform:translateY(-1px)}
.ds-tile[aria-pressed="true"]{background:#F2ECF2;border-color:#8A4386}
.ds-tile[aria-pressed="true"] .ic{color:#8A4386}
.ds-tile b{font-size:.98em;font-weight:600;line-height:1.3}
.ds-tile-d{font-size:.86em;color:#7D7D7D;line-height:1.45}
.ds-foot{display:flex;gap:.5em;align-items:center;margin-top:1em}
.ds-filter{display:flex;gap:.6em;align-items:center;flex-wrap:wrap;margin-bottom:1em}
.ds-flabel{font-family:var(--mono,monospace);font-size:.72em;letter-spacing:.06em;
  text-transform:uppercase;color:#7D7D7D}
.ds-chips{display:flex;gap:.35em;flex-wrap:wrap}
.ds-chip{font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:.84em;
  border:1px solid #CDCFD9;background:#fff;color:#7D7D7D;border-radius:2em;
  padding:.34em .8em;cursor:pointer}
.ds-chip:hover{border-color:#41477D;color:#010203}
.ds-chip[aria-pressed="true"]{background:#8A4386;border-color:#8A4386;color:#fff}
.ds-count{margin-left:auto;font-family:var(--mono,monospace);font-size:.72em;
  letter-spacing:.05em;color:#7D7D7D}
.ds-offices{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em}
.ds-office{font:inherit;font-family:var(--sans,'Archivo',sans-serif);text-align:left;cursor:pointer;
  background:#fff;border:1px solid #DDDDDD;border-radius:3px;padding:.85em;
  display:grid;gap:.6em;align-content:start;color:#010203;
  transition:border-color .16s ease,box-shadow .16s ease}
.ds-office:hover{border-color:#41477D;box-shadow:0 2px 8px rgba(65,71,125,.10)}



.ds-holds{list-style:none;margin:0;padding:0;display:grid;gap:.22em}
.ds-holds li{font-size:.84em;color:#7D7D7D;line-height:1.4;padding-left:.8em;position:relative}
.ds-holds li::before{content:"";position:absolute;left:0;top:.55em;
  width:.26em;height:.26em;border-radius:50%;background:#CDCFD9}
.ds-holds li.is-hit{color:#8A4386;font-weight:600}
.ds-holds li.is-hit::before{background:#8A4386}

/* ============================================================
   the document card, used everywhere a record is shown
   ============================================================ */
.dc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.6em}
.dc{font:inherit;font-family:var(--sans,'Archivo',sans-serif);text-align:left;cursor:pointer;
  background:#fff;border:1px solid var(--fr-line);padding:0;
  display:grid;grid-template-rows:auto 1fr;overflow:hidden;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.dc:hover{border-color:var(--pal-navy);box-shadow:0 3px 12px rgba(22,24,28,.10);transform:translateY(-2px)}
.dc:active{transform:translateY(0);box-shadow:0 1px 4px rgba(22,24,28,.10)}
.dc-th{display:block;background:#E9E9E6;padding:.7em .7em 0;overflow:hidden;height:5.2em}
.dc-paper{display:block;background:#fff;padding:.55em .6em;height:100%;
  box-shadow:0 1px 2px rgba(0,0,0,.14);display:grid;gap:.3em;align-content:start}
.dc-title{display:block;height:.42em;width:62%;background:#9A968E}
.dc-lines{display:grid;gap:.26em}
.dc-lines i{display:block;height:.28em;background:#DFDCD6}
.dc:hover .dc-paper{box-shadow:0 2px 6px rgba(0,0,0,.2)}
.dc-b{display:grid;grid-template-rows:1fr auto;gap:.5em;padding:.65em .7em .7em;min-width:0}
.dc-t{font-weight:500;font-size:.88em;line-height:1.3}
.dc-foot{align-self:end}
.dc-chips{display:flex;flex-wrap:wrap;gap:.25em}
.dc-chip{font-family:var(--mono,monospace);font-size:.64em;letter-spacing:.05em;
  text-transform:uppercase;background:var(--fr-wash);color:var(--fr-soft);
  border-radius:2em;padding:.24em .6em;white-space:nowrap}
.dc-chip.is-on{background:var(--pal-navy);color:#fff}

/* ============================================================
   05 · the home page
   ============================================================ */
/* the shell owns this region's height now */
.ph-scroll{overflow-y:auto;scrollbar-gutter:stable}
.ph-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.7em}
.ph-stat{display:grid;gap:.1em}
.ph-stat b{font-size:1.25em;font-weight:600;letter-spacing:-.02em}
.ph-stat span{font-size:.8em;color:var(--fr-soft)}
.ph-cta{background:var(--pal-navy);color:#fff;padding:1.2em 1.3em;
  display:grid;gap:.4em;justify-items:start;cursor:pointer}
.ph-cta .ic{color:#fff;opacity:.85}
.ph-cta b{font-size:1.15em;font-weight:600;letter-spacing:-.012em}
.ph-cta span{font-size:.88em;opacity:.8}
.fr-feattile{font:inherit;font-family:var(--sans,'Archivo',sans-serif);text-align:left;cursor:pointer;
  position:relative;background:#fff;border:1px solid var(--fr-line);padding:.7em .75em;
  display:flex;flex-direction:column;gap:.35em;font-size:.86em;line-height:1.25;
  transition:border-color .16s ease,transform .16s ease}
.fr-feattile:hover{border-color:var(--pal-navy);transform:translateY(-1px)}

/* ============================================================
   06 · the interruption
   ============================================================ */
.im-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.7em;align-items:start}
.im-left{display:grid;gap:.5em;min-width:0}
.fr-wrote{background:#fff;padding:.6em .75em;border:1px solid var(--fr-line)}
.fr-wrote-t{font-size:.88em;line-height:1.5;color:var(--fr-soft)}
.im-rows{display:grid;gap:.4em}
.im-row{font:inherit;font-family:var(--sans,'Archivo',sans-serif);text-align:left;
  background:#fff;border:1px solid var(--fr-line);padding:.65em .75em;cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease}
.im-row:hover{border-color:var(--pal-navy);box-shadow:0 2px 8px rgba(22,24,28,.08)}
.im-row[aria-pressed="true"]{border-color:var(--pal-navy);box-shadow:inset 3px 0 0 var(--pal-navy)}
.im-b{display:grid;gap:.3em;min-width:0}
.im-b b{font-weight:600;font-size:.95em;line-height:1.3}
.im-sum{font-size:.85em;color:var(--fr-soft);line-height:1.5}
.iv{background:#fff;border:1px solid var(--fr-line);display:grid;grid-template-rows:auto 1fr;
  min-width:0;max-width:100%;overflow:hidden;position:sticky;top:.5em;align-self:start}
.iv-head{display:flex;align-items:center;gap:.7em;padding:.5em .7em;min-width:0;
  border-bottom:1px solid var(--fr-line);background:var(--fr-wash)}
.iv-t{font-weight:600;font-size:.88em;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.iv-dl{flex:none;font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:.8em;
  background:#fff;border:1px solid var(--pal-blue);color:var(--pal-blue);
  padding:.32em .8em;cursor:pointer;white-space:nowrap}
.iv-dl:hover{background:var(--pal-blue-soft)}
.iv-pane{padding:.9em 1em;overflow-y:auto;height:15.5em;font-size:.84em;line-height:1.6;
  background:#fff;scrollbar-gutter:stable}
.iv-pane p{margin-bottom:.65em}
.iv-h{font-weight:700;letter-spacing:.03em;border-bottom:1px solid var(--fr-ink);
  padding-bottom:.3em;margin-bottom:.7em}
.iv-hit{background:#FBEEDA;box-shadow:0 0 0 .35em #FBEEDA;border-radius:1px}
.iv-r{background:#161616;height:1.1em;position:relative;margin:.7em 0}
.iv-r span{position:absolute;right:.4em;top:0;color:#fff;font-family:var(--mono,monospace);font-size:.68em}
/* the portal's own blue and red, not Carbon's stock ones */
.cb--primary{background:#1B4C8C}
.cb--primary:hover{background:#163F75}
.cb--primary:active{background:#102E56}
.cb--danger{background:#A8202F}
.cb--danger:hover{background:#8E1A27}
.cb--danger:active{background:#6E141E}
.cb--primary.is-quiet{background:#7B99BE}

/* ============================================================
   07 · the reading room
   ============================================================ */
.rr-topics{display:flex;gap:.6em;align-items:center;flex-wrap:wrap;margin-bottom:1em}
.rr-shelves{display:grid;gap:1.1em}
.rr-shelf .dc-row{grid-template-columns:repeat(3,1fr)}
.rr-sh{display:flex;justify-content:space-between;align-items:baseline;gap:1em;margin-bottom:.5em}
.rr-sh b{font-weight:600;font-size:.95em}
.rr-more{font-size:.85em;color:var(--pal-blue)}
.rr-clear{font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:.82em;
  background:none;border:0;color:var(--pal-blue);cursor:pointer;padding:0}

/* ============================================================
   08 · the record page
   ============================================================ */




.dp{display:grid;grid-template-columns:minmax(0,1fr) 14.5em;min-width:0}
.dp-main{padding:1.1em;min-width:0}
.dp-side{padding:1.1em;border-left:1px solid var(--fr-line);background:var(--fr-wash);min-width:0}
.dp-t{font-size:1.2em;font-weight:600;letter-spacing:-.012em;line-height:1.25;margin-top:.4em}
.dp-meta{display:flex;gap:1em;flex-wrap:wrap;margin-top:.3em;
  font-family:var(--mono,monospace);font-size:.7em;letter-spacing:.04em;color:var(--fr-faint)}
.dp-acts{display:flex;gap:.4em;flex-wrap:wrap;margin-top:.6em}
.dp-a{font:inherit;font-family:var(--sans,'Archivo',sans-serif);font-size:.82em;
  background:#fff;border:1px solid var(--fr-line);color:var(--fr-soft);padding:.35em .8em;cursor:pointer}
.dp-a:hover{border-color:var(--pal-blue);color:var(--pal-blue)}
.dp-sum{background:var(--pal-blue-soft);padding:.7em .8em;margin:.8em 0;font-size:.88em;line-height:1.5}
.dp-sum .fr-mono{display:block;margin-bottom:.2em;color:var(--pal-blue)}
.dp-pane{background:#E9E9E6;padding:.9em;height:19em;overflow-y:auto;
  display:grid;gap:.9em;align-content:start;border:1px solid var(--fr-line);scrollbar-gutter:stable}
.dp-sheet{background:#fff;padding:1.3em 1.5em;box-shadow:0 1px 3px rgba(0,0,0,.16);
  font-size:.84em;line-height:1.65}
.dp-sheet p{margin-bottom:.65em}
.dp-sh{display:flex;justify-content:space-between;font-family:var(--mono,monospace);
  font-size:.75em;color:var(--fr-faint);border-bottom:1px solid var(--fr-line);
  padding-bottom:.4em;margin-bottom:.8em}
.dp-hh{font-weight:700;letter-spacing:.03em;margin-bottom:.7em}
.dp-r{background:#161616;height:1.15em;position:relative}
.dp-r span{position:absolute;right:.4em;top:0;color:#fff;font-family:var(--mono,monospace);font-size:.68em}
.dp-relh{font-family:var(--mono,monospace);font-size:.7em;letter-spacing:.05em;
  text-transform:uppercase;color:var(--fr-faint);margin:.9em 0 .35em}
.dp-relh:first-of-type{margin-top:0}
.dp-rell{font:inherit;font-family:var(--mono,monospace);font-size:1em;letter-spacing:.05em;
  text-transform:uppercase;background:none;border:0;padding:0;cursor:pointer;
  color:var(--pal-blue);text-decoration:underline;text-underline-offset:.25em}
.dp-rell:hover{color:var(--pal-navy)}
.dp-rec{font:inherit;font-family:var(--sans,'Archivo',sans-serif);text-align:left;width:100%;
  background:#fff;border:1px solid var(--fr-line);padding:.55em .65em;cursor:pointer;
  margin-bottom:.35em;transition:border-color .16s ease}
.dp-rec:hover{border-color:var(--pal-navy)}
.dp-rec b{font-weight:500;font-size:.85em;line-height:1.3}

/* ============================================================
   09–10 · the system button bar
   ============================================================ */
.sysbar{display:flex;gap:.5em;align-items:center;flex-wrap:wrap;
  padding:.85em 1.15em;border-top:1px solid var(--fr-line);background:var(--fr-wash)}
.fr-foot-l{flex:1;min-width:8em}
.fr-cand.is-absorbed{opacity:.55;background:#E3F0E9;border-color:#B6D2C2}
.fr-cand.is-absorbed .fr-cand-s{background:var(--pal-green);color:#fff}
.fr-cand.is-gone{opacity:.5;text-decoration:line-through}
.fr-cand.is-flagged{border-color:var(--pal-amber);box-shadow:inset 3px 0 0 var(--pal-amber)}
.fr-cand.is-flagged .fr-cand-s{background:#FBEEDA;color:var(--pal-amber)}
.fr-done--warn .fr-done-k{background:var(--pal-amber)}
.fr-req-text{font-size:.88em;line-height:1.55;margin-top:.3em}

/* ============================================================
   11 · the diagram
   ============================================================ */
.sk-node{fill:var(--slate,#3A4A5C)}
.sk-node--src{fill:var(--ink,#16181C)}
.sk-node--portal{fill:var(--ochre,#92662D)}
.sk-node--work{fill:#9AA0A8}
.fr-sk-rib--work{fill:#9AA0A8;opacity:.32}
.fr-sk-lab--l{text-anchor:start}

@container (max-width:560px){
  .sf-cards,.sf-stats,.ds-tiles,.ds-offices,.dc-row,.ph-stats,.rr-shelf .dc-row{
    grid-template-columns:repeat(2,1fr)}
  .im-split{grid-template-columns:minmax(0,1fr)}
  .dp{grid-template-columns:minmax(0,1fr)}
  .dp-side{border-left:0;border-top:1px solid var(--fr-line)}
  .ds-steps{display:none}
  .cb{min-width:100%}
}

/* ---------- the date rides the coin, not the track ----------
   .ramp-pos has no height, so top:50% resolved to 0 and the date sat
   half a coin above the coin's center. */
.ramp-when{top:.36rem}

/* ---------- the contents list ----------
   the same promenade as the home page: one static track, one coin that
   travels it. Every stop does not get its own dot. */
/* no rule between the contents and the reading column -- the track is
   already a vertical line, and two of them fight */
.case-rail{border-left:0;padding-left:0}
.case-rail ol{position:relative;padding-left:0}
.rail-ramp{position:absolute;left:.22rem;top:.75em;bottom:.75em;
  width:1px;background:var(--rule)}
.rail-pos{position:absolute;left:0;top:0;width:1px;
  transition:transform .18s linear;pointer-events:none}
.rail-coin{position:absolute;left:.22rem;top:0;
  width:.72rem;height:.72rem;margin-left:-.36rem;margin-top:-.36rem;
  border-radius:50%;background:var(--ochre);
  box-shadow:0 0 0 5px var(--paper)}
.rail-pos[hidden]{display:none}
.case-rail li{position:relative}
.case-rail a{border-left:0;padding-left:1.5rem;margin-left:0;position:relative}
.case-rail a::before{content:none}
.case-rail a:hover{color:var(--ink)}
.case-rail a.is-current{color:var(--ink)}

/* ---------- the pull statement ----------
   the site's other voice, set on a panel tinted with the case accent.
   It runs the full column, the way the frames do -- a statement that
   stops short of the figure beside it reads as an aside. */
.case-main .claim{
  border:0;
  margin:2.75rem 0;
  padding:clamp(1.4rem,3.5vw,2rem) clamp(1.5rem,4vw,2.4rem);
  background:color-mix(in srgb, var(--frame-accent) 7%, var(--wash));
  font-family:var(--mono);
  font-weight:400;
  font-size:clamp(.95rem,1.55vw,1.06rem);
  line-height:1.72;
  letter-spacing:-.012em;
  color:var(--ink);
  max-width:none;
}
.case-main .claim::before{content:none}

/* ---------- the reading rhythm ----------
   one vertical unit. Sections are the largest gap, then figures, then
   subheads, then paragraphs, each step a clear tier below the last, so
   the page reads in the order it is built. */
.case-main > section{padding-top:clamp(3.5rem,7.5vw,5.75rem)}
.case-main > section:first-child{padding-top:0}
.case-main h2{margin-bottom:1.6rem;max-width:22ch}
/* a subhead has to outrank the body it introduces */
.case-main h3{
  font-size:1.1rem;
  line-height:1.35;
  letter-spacing:-.008em;
  margin-top:2.4rem;
  margin-bottom:.7rem;
}
.case-main h3:first-child{margin-top:0}
.case-main p{margin-bottom:1.1rem}
.case-fig{margin:2.25rem 0}
.case-fig figcaption{margin-top:.7rem}
/* a figure that opens or closes a section does not need the gap twice */
.case-fig:last-child{margin-bottom:0}

/* ============================================================
   FRAME TYPES
   A screen that lives at a URL is a browser window: the frame
   itself is the window, not a picture of one sitting inside it.
   Modals, component sheets and charts wear the plain label bar.
   Both take their outline from the case study's accent.
   ============================================================ */
/* --frame-accent is set on :root by setAccent() from the case study's
   own kit. On the home page, where the grid mixes all three, the site's
   own ochre carries it. */
:root{--frame-accent:var(--ochre,#92662D)}
.frame{
  border:1px solid color-mix(in srgb, var(--frame-accent) 40%, transparent);
  border-radius:10px;
  overflow:hidden;
}
.frame--browser{
  background:color-mix(in srgb, var(--frame-accent) 8%, #F4F3F0);
  display:grid;grid-template-columns:minmax(0,1fr);min-width:0;
}
.bw-bar{
  display:flex;align-items:center;gap:.75em;
  padding:.6em .85em;
  min-width:0;
  border-bottom:1px solid color-mix(in srgb, var(--frame-accent) 24%, transparent);
}
.bw-dots{display:flex;gap:.36em;flex:none}
.bw-dots i{
  width:.58em;height:.58em;border-radius:50%;display:block;
  background:color-mix(in srgb, var(--frame-accent) 34%, transparent);
}
.bw-tab{
  font-size:.76em;color:var(--fr-soft);max-width:11em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none;
}
.bw-url{
  flex:1;min-width:0;display:flex;align-items:center;gap:.45em;
  background:var(--fr-white);
  border:1px solid color-mix(in srgb, var(--frame-accent) 18%, transparent);
  border-radius:2em;padding:.3em .85em;
}
.bw-lock{width:.6em;height:.48em;border:1px solid var(--pal-green);border-top:0;
  border-radius:0 0 1px 1px;position:relative;flex:none}
.bw-lock::before{content:"";position:absolute;left:50%;top:-.3em;transform:translateX(-50%);
  width:.36em;height:.3em;border:1px solid var(--pal-green);border-bottom:0;border-radius:.3em .3em 0 0}
.bw-urlt{font-family:var(--mono,monospace);font-size:.72em;color:var(--fr-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* every browser window is the same shape, and the screen inside it
   scrolls the way a screen does. 16:10 is the shape of the machines
   this software runs on. */
/* The window is a screen, not a document: it does not scroll. What is
   inside it lays out like an application -- a masthead that stays, one
   region that scrolls, an action bar pinned to the floor. */
.bw-view{background:#fff;min-width:0;border-radius:0 0 9px 9px;
  aspect-ratio:16/10;overflow:hidden;display:grid;
  grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  align-items:stretch}
/* the screen fills the window; anything shorter would show the window's
   own ground under it as a blank band */
.bw-view > *{min-height:0;min-width:0;height:100%}

/* The app shell. A column: whatever is marked shell-scroll or
   shell-fixed absorbs the free space, everything else takes what it
   needs. A flex column, not a grid, so the shell does not have to know
   how many children a given screen has -- a screen with no action bar
   leaves no empty track behind. */
.shell-app{display:flex;flex-direction:column;
  min-height:0;height:100%;background:#fff}
/* flex-shrink stays off: a fixed head must never be squeezed by the
   region that scrolls under it */
.shell-app > *{flex:0 0 auto;min-height:auto}
.shell-app > .shell-scroll,.shell-app > .shell-fixed{min-height:0}
.shell-app > .shell-scroll,.shell-app > .shell-fixed{flex:1 1 0}
.shell-scroll{overflow-y:auto;scrollbar-gutter:stable;min-height:0}
.shell-foot{border-top:1px solid var(--fr-line);background:#fff}
/* a shell whose body is itself split into panes that scroll on their
   own. It sets no tracks -- the screen's own rule owns those. */
.shell-fixed{overflow:hidden;min-height:0;display:grid}
.bw-bar .fr-do,.bw-bar .fr-orig{
  font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);
  font-size:.72em;letter-spacing:.07em;text-transform:uppercase;
  flex:none;
}

/* the component sheets are as tall as a design system is long; they get
   the same window and scroll inside it. Charts stay whole -- a chart you
   have to scroll is a chart you cannot read. */
.frame--kit .fr-stage{aspect-ratio:16/10;overflow:auto;scrollbar-gutter:stable}

/* the plain frame keeps its label bar, tinted to the same accent */
.frame:not(.frame--browser) > .fr-bar{
  background:color-mix(in srgb, var(--frame-accent) 8%, #F4F3F0);
  border-bottom-color:color-mix(in srgb, var(--frame-accent) 24%, transparent);
}

/* ============================================================
   REVISIONS
   ============================================================ */

/* ---------- the demonstration ----------
   A ring blooms where the frame clicks itself, so the eye is told
   where to look before the screen changes under it. */
.is-demohit{position:relative}
.is-demohit::after{
  content:"";position:absolute;inset:-4px;pointer-events:none;z-index:9;
  border-radius:inherit;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--frame-accent) 70%, transparent);
  animation:demo-ping .52s cubic-bezier(.2,.8,.3,1) 1;
}
@keyframes demo-ping{
  0%  {opacity:0;   transform:scale(.97)}
  35% {opacity:1;   transform:scale(1)}
  100%{opacity:0;   transform:scale(1.035)}
}
/* while it performs, the pointer is the frame's, not the reader's */
.frame.is-demoing{cursor:progress}
@media (prefers-reduced-motion:reduce){
  .is-demohit::after{animation:none;box-shadow:none}
}

/* ---------- the circle check ----------
   one control, used wherever something is either chosen or matched */
/* the same control in two states: an outlined check, and a filled one.
   The mark is always there -- filling it is what changes. */
.ck--ring{width:1em;height:1em;flex:none;color:var(--fr-line)}
.ck--ring .ck-o{fill:none}
.ck--ring.is-off{color:#B9B5AC}
.ck--ring.is-on{color:var(--pal-navy)}
.ck--ring.is-on .ck-o{fill:var(--pal-navy);stroke:var(--pal-navy)}
.ck--ring.is-on .ck-m{stroke:#fff}

/* ---------- 03 · the request type step ---------- */
/* one surface: the step rail, the question, the cards and the buttons
   all sit on the same white. No raised sheet. */
.ds-sheet{background:transparent;border-radius:0;padding:0;box-shadow:none}
.ds-h4{margin-bottom:.95em;font-size:1.2em}

/* square, like every other surface in the portal */
.ds-tile{position:relative;grid-template-rows:auto 1fr;min-height:0;
  align-content:start;border-radius:0;background:#fff;
  border:2px solid var(--fr-line);padding:.9em}
.ds-tile-h{display:grid;gap:.45em;align-content:start;min-height:3.9em}
.ds-tile .ic{color:var(--pal-navy)}
.ds-tile:hover{border-color:var(--pal-navy);background:var(--pal-blue-soft)}
/* the choice is marked by the border closing around the card and a
   filled check in its corner */
.ds-tile[aria-pressed="true"]{
  background:var(--pal-blue-soft);
  border-color:var(--pal-navy);
}
.ds-tile[aria-pressed="true"] .ic{color:var(--pal-navy)}
.ds-tick{position:absolute;top:.7em;right:.7em;width:1.15em;height:1.15em;opacity:0;
  transition:opacity .14s ease}
.ds-tile[aria-pressed="true"] .ds-tick{opacity:1}
.ds-tick .ck-o{fill:#fff}
.ds-tile-d{align-self:start}
.ds-step.is-now{color:var(--pal-navy)}
.ds-step.is-now .ds-bar{background:var(--pal-navy)}
/* until they choose, the path ahead is not theirs yet */
.ds-step.is-dim{opacity:.5}
.frame--ds .ds-body{padding:1.1em 1.1em 1.2em}
.frame--ds .ds-steps{margin-bottom:1.5em}
/* the agency finder pins its question and record types above the grid */
.ds--find .ds-filter{padding:1.1em 1.1em 1em;border-bottom:1px solid var(--fr-line);
  display:grid;gap:.95em}
.ds--find .ds-filter .ds-h4{margin-bottom:0;line-height:1.25}
.ds--find .ds-body{padding:1.1em}
/* the whole screen is one white surface down to the buttons */
.frame--ds .ds{background:#fff;display:grid;grid-template-rows:auto 1fr auto;min-height:100%}
/* the step buttons are the floor of the screen, so they take the room
   they need and no more */
.frame--ds .cb{min-height:3.9em;padding:.7em 2.4em .7em .95em}
.frame--ds .cbset{padding-top:0}

/* ---------- 04 · the offices ---------- */
.ds-chip[aria-pressed="true"]{background:var(--pal-navy);border-color:var(--pal-navy);color:#fff}
.ds-filter{display:grid;gap:0}
.ds-chips{margin-top:1.1em}
/* Cards match in height without matching row by row: the list sits
   directly under its own title, and the card fills the track. A short
   name should not leave a hole where a long one would wrap. */
.ds-offices{align-items:stretch}
.ds-office{gap:.7em;padding:1em 1.05em;border-color:var(--fr-line);background:#fff;
  border-radius:0;grid-template-rows:auto auto;align-content:start;height:100%}
.ds-office b{font-size:.95em;font-weight:600;line-height:1.3;align-self:start}
.ds-office:hover{border-color:var(--pal-navy)}
/* a check against everything the office holds; when they name one
   record type the rest step back so only the match is lit */
/* the ring sits on the card's own left edge, in line with the name.
   The list is one tight block; the air goes between the title and the
   block, not between its rows. */
.ds-holds{display:grid;gap:.3em;list-style:none;margin:0;padding:0}
.ds-holds li{display:grid;grid-template-columns:1.05em minmax(0,1fr);
  gap:.55em;align-items:start;padding-left:0;
  font-size:.88em;line-height:1.35;color:var(--fr-soft);
  transition:opacity .16s ease,color .16s ease}
.ds-holds li::before{content:none}
.ds-holds li .ck--ring{width:1.05em;height:1.05em;margin-top:.09em}
.ds-offices.is-filtered .ds-holds li{opacity:.34}
.ds-offices.is-filtered .ds-holds li.is-hit{opacity:1;color:var(--pal-navy);font-weight:500}
/* nine offices do not need to be nine screens tall */
/* the frame must not shrink when the filter thins the results */
.ds-offices{align-content:start;grid-auto-rows:1fr}
.ds-office{align-content:start}

/* ---------- 05 · the home page ---------- */
/* the search and the category tiles are one ground: two ways into the
   same question, so they read as one block rather than two */
.ph-open{background:#F2F4F7;border-bottom:1px solid var(--fr-line)}
.ph-search{padding:1em 1.15em .2em}
.ph-chips{margin-top:.55em}
.ph-results{margin-top:.6em;display:grid;gap:.3em}
.ph-rc{color:var(--fr-faint);margin-bottom:.1em}
.ph-none{font-size:.9em;color:var(--fr-soft)}
.ph-hit{font:inherit;font-family:var(--sans,'Archivo',sans-serif);text-align:left;
  display:flex;gap:.8em;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:#fff;border:1px solid var(--fr-line);padding:.5em .7em;cursor:pointer}
.ph-hit:hover{border-color:var(--pal-navy)}
.ph-hit-t{font-size:.9em;flex:1;min-width:0}
.ph-topics{padding-top:1.1em;padding-bottom:1.3em}
.fr-feattile{display:grid;grid-template-rows:1fr auto;gap:.5em;min-height:5em}
.ft-n{align-self:end;font-family:var(--mono,monospace);font-size:.78em;color:var(--fr-faint)}
/* the form is the floor of the page: the blue runs edge to edge, and its
   label sits on the same left margin as everything above it */
.ph-cta{font:inherit;font-family:var(--sans,'Archivo',sans-serif);text-align:left;cursor:pointer;
  width:100%;background:var(--pal-blue);border:0;color:#fff;
  padding:1.5em 1.15em;display:grid;gap:.15em;
  transition:background .16s ease}
.ph-cta:hover{background:var(--pal-navy);border-color:var(--pal-navy)}
.ph-cta b{font-size:1em;font-weight:600;letter-spacing:0}
.ph-cta span{font-size:.86em;color:rgba(255,255,255,.82)}

/* ---------- 06 · the interruption ---------- */
.im-pad{padding:.9em 1.05em}
/* the question is fixed; the two panes below it fill what is left and
   each scrolls on its own. Nothing else moves. */
.im-wrap{display:grid;grid-template-rows:auto minmax(0,1fr);
  min-height:0;height:100%;gap:.65em}
.im-q{font-size:1.1em}
.im-split{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:.65em;align-items:stretch;min-height:0}
.im-left{height:100%;overflow-y:auto;scrollbar-gutter:stable;padding-right:.15em}
.iv{position:static;max-height:none;height:100%;
  display:grid;grid-template-rows:auto minmax(0,1fr)}
.iv-pane{height:auto;min-height:0;overflow-y:auto}
.im-row{padding:.65em .75em}
.im-b b{font-size:.92em}
/* the same circle-check list the rest of the portal uses: why this
   record answers what they wrote */
.im-why{display:grid;gap:.28em;list-style:none;margin:.6em 0 0;padding:0}
.im-why li{display:grid;grid-template-columns:.95em minmax(0,1fr);gap:.55em;
  align-items:start;font-size:.82em;line-height:1.35;color:var(--fr-soft);
  font-weight:400}
.im-why li::before{content:none}
.im-why .ck--ring{width:.95em;height:.95em;margin-top:.13em}
.im-why li.is-miss{color:var(--fr-faint)}
/* the discard is red from the start. Taking the document makes it the
   likelier answer, so it rises once and stays up. The set reserves the
   travel so the frame's height never moves. */
.cbset{padding-top:.75em;background:var(--fr-white)}
.cb--danger.is-lifted{
  transform:translateY(-.75em);
  box-shadow:0 .5em 1em rgba(122,20,34,.3);
  animation:cb-pop .5s cubic-bezier(.22,.9,.3,1.5) 1;
}
@keyframes cb-pop{
  0%{transform:translateY(0)}
  55%{transform:translateY(-1.15em)}
  100%{transform:translateY(-.75em)}
}
@media (prefers-reduced-motion:reduce){
  .cb--danger.is-lifted{animation:none}
}

/* ---------- 07 · the reading room ---------- */
.rr-shelves{align-content:start}
/* the reading room keeps its search and topics in view */
.rr-head{padding:1.1em 1.15em .95em;border-bottom:1px solid var(--fr-line);
  display:grid;gap:.9em}
.rr .rr-topics{padding-top:0}

/* ---------- 08 · the record page ---------- */
.dp-relh:first-of-type{margin-top:0}
/* the request behind the record */
.dp-req{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.55em 1.2em;margin:.85em 0 .95em;
  padding:.75em .85em;border:1px solid var(--fr-line);background:var(--fr-white)}
.dp-req dt{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);
  font-size:.68em;letter-spacing:.07em;text-transform:uppercase;color:var(--fr-faint)}
.dp-req dd{font-size:.88em;margin-top:.12em}
.dp-num{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);
  font-size:.84em;color:var(--pal-blue);white-space:nowrap}
/* the record and the related list each scroll on their own, so the
   sidebar's ground reaches the floor of the window either way */
.dp{grid-template-columns:minmax(0,1fr) 14.5em;grid-template-rows:minmax(0,1fr);
  align-items:stretch}
.dp-main{overflow-y:auto;scrollbar-gutter:stable;min-height:0}
.dp-side{overflow-y:auto;scrollbar-gutter:stable;min-height:0}

/* ---------- 09 + 10 · intake ---------- */
.fr-dup{grid-template-columns:16em minmax(0,1fr);grid-template-rows:minmax(0,1fr);
  align-items:stretch}
.fr-dup-list{overflow-y:auto;scrollbar-gutter:stable;min-height:0}
.fr-dup-pane{overflow-y:auto;scrollbar-gutter:stable;min-height:0}
/* the reasons are one block; the air sits between them and the title */
.fr-reasons{gap:.28em;margin-top:.1em}
.fr-dup-pane .fr-mono{margin-top:.9em}
/* the action bar is the floor of the screen: one row, never wrapping,
   because a wrapped bar pushes the screen out of its window */
.sysbar.shell-foot{background:var(--fr-wash);padding:.7em 1.1em;flex-wrap:nowrap}
.sysbar.shell-foot .ks-b{white-space:nowrap}
.sysbar.shell-foot .fr-foot-l{min-width:0}
/* the misrouted screen fits at rest; if a longer outcome pushes past
   the window, the body takes the scroll and the bar stays put */
.fr-mis{min-height:0;padding:1em 1.1em}

/* ---------- the deliverables grid keeps its browser too ---------- */
.plate--live .frame--browser .bw-bar{padding:.45em .7em}

@container (max-width:560px){
  .im-left{max-height:none;overflow:visible}
  .bw-tab{display:none}
}

/* [hidden] loses to the class's own display, so say it here */
.ph-chips[hidden],.ph-results[hidden]{display:none}

/* tiles share their rows, so a three-line title cannot shove one
   description below the others */
.ds-tiles{grid-template-rows:auto auto}
.ds-tile{grid-row:span 2;grid-template-rows:subgrid;row-gap:.5em}
@supports not (grid-template-rows:subgrid){
  .ds-tile{grid-template-rows:auto 1fr}
  .ds-tile-h{min-height:5.2em}
}