/* ============================================================
   REELS
   A figure that plays. Each one is a drawing of a screen with one
   interaction acted out on it by a pointer of its own. Nothing in
   the picture can be clicked, focused or selected. The one control
   is the button under it, beside the caption, which pauses it,
   plays it, or plays it again (reels.js says when).

   The drawing is made once, at 640 by 440, and reels.js scales the
   whole of it to the width of the figure. So it is the same picture
   at every size, only larger or smaller, and nothing in it can
   reflow. Because it is scaled and not re-set in smaller type, a
   browser that enforces a minimum font size cannot break it either.

   Inside the stage 1em is ten pixels of the drawing, a sixty-fourth
   of its width. Lengths are written in em, and only the leaves that
   carry text set a font-size of their own.
   ============================================================ */

:root{--frame-accent:var(--ochre,#92662D)}

.reel{
  --rl-ink:#16181C;
  --rl-soft:#5A6068;
  /* the lightest text in a picture still clears 4.5:1, on white and on
     the portal's grey ground */
  --rl-faint:#676D77;

  /* the two products keep their own color, so a reel reads as the
     software and not as this site */
  --pt-navy:#12294D;
  --pt-blue:#1B4C8C;
  --pt-blue-soft:#E8EFF8;
  --pt-red:#A91F30;
  --pt-gray:#DCDCDC;
  --pt-ground:#EEF0F4;
  --in-indigo:#41477D;
  --in-indigo-soft:#E6E6F6;
  --ok:#2F6B4F;
  --ok-soft:#E3F0E9;
  --hl:#FBE7B5;

  position:relative;display:block;
  aspect-ratio:64/44;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  contain:layout paint;
  pointer-events:none;
  -webkit-user-select:none;user-select:none;
}
/* the outline is laid over the picture, so the picture fills the
   figure exactly and is drawn at its own size when the figure is 640 */
.reel::after{
  content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;
  border:1px solid #D9CDBF;
  border:1px solid color-mix(in srgb, var(--frame-accent) 40%, transparent);
}
/* where aspect-ratio is not understood, the height is held open the old way */
@supports not (aspect-ratio:1/1){
  .reel::before{content:"";display:block;padding-top:68.75%}
}
.case-fig .reel{margin:0}

/* ---------- the caption row ----------
   What the figure shows, on the left; the control for its motion, on
   the right. The button comes before the caption in the page, because
   a caption has to be the last thing in its figure, and the grid puts
   the two side by side. */
.has-reel{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;align-items:start}
.has-reel > .reel{grid-column:1 / -1;grid-row:1}
.has-reel > figcaption{grid-column:1;grid-row:2}
.has-reel > .reel-ctl{grid-column:2;grid-row:2}
.reel-ctl{
  position:relative;
  display:inline-flex;align-items:center;gap:.4em;
  margin:.55rem 0 0;padding:.15rem .6rem .15rem .5rem;
  min-height:1.5rem;
  font:inherit;font-size:.8125rem;line-height:1.5;
  -webkit-appearance:none;appearance:none;
  color:var(--ink-soft,#4A5058);
  /* the outline clears 3:1 against the page, so the button can be found */
  background:none;border:1px solid #85888D;border-radius:999px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:color .15s ease, border-color .15s ease, background-color .15s ease;
}
/* a finger gets a target of 44 pixels without the button looking it */
.reel-ctl::before{content:"";position:absolute;left:-.4rem;right:-.4rem;top:50%;height:2.75rem;transform:translateY(-50%)}
.reel-ctl svg{width:.8em;height:.8em;flex:none;fill:currentColor;overflow:visible}
.reel-ctl:hover{color:var(--ink,#16181C);border-color:currentColor}
.reel-ctl:active{background:var(--wash,#F4F1EB)}
.reel-ctl[hidden]{display:none}
/* A calm reel on a card plays while the card is pointed at, so where
   there is a pointer its control stays out of the way until the card is
   pointed at, the control has the focus, or the reader has used it. It
   can always be reached with the keyboard. Where there is no pointer
   the reel plays by itself and the control is always showing. */
@media (hover:hover) and (pointer:fine){
  [data-reel-card] .reel-ctl{opacity:0;transition:opacity .15s ease, color .15s ease, border-color .15s ease, background-color .15s ease}
  [data-reel-card]:hover .reel-ctl,
  [data-reel-card] .reel-ctl:focus-visible,
  [data-reel-card] [data-reel-state="paused"] .reel-ctl,
  [data-reel-card][data-reel-state="paused"] .reel-ctl{opacity:1}
}
@media (prefers-reduced-motion:reduce){.reel-ctl{transition:none}}
@media print{.reel-ctl{display:none}}

.reel-stage{
  position:absolute;left:0;top:0;width:640px;height:440px;
  transform-origin:0 0;transform:scale(var(--rl-k,1));
  font-size:10px;
  font-family:var(--sans,'Archivo',-apple-system,BlinkMacSystemFont,sans-serif);
  font-stretch:100%;font-weight:400;font-style:normal;
  line-height:1.25;letter-spacing:0;text-align:left;
  color:var(--rl-ink);
  -webkit-text-size-adjust:none;text-size-adjust:none;
}
/* The picture is an image of software, and it keeps its own colors when
   the reader's system forces a palette, as a photograph would. The
   caption and the button take the forced ones. */
@media (forced-colors:active){
  .reel,.reel-stage{forced-color-adjust:none}
  .reel::after{border-color:CanvasText}
}
.reel-stage *,.reel-stage *::before,.reel-stage *::after{box-sizing:border-box}
:where(.reel-stage) *{margin:0;padding:0}
:where(.reel-stage) b{font-weight:600}
:where(.reel-stage) i,:where(.reel-stage) em,:where(.reel-stage) u,:where(.reel-stage) small{
  font-style:normal;text-decoration:none;font-size:inherit}
:where(.reel-stage) svg{display:block;overflow:visible}
/* words that must not be parted at a line end */
.rl-nb{white-space:nowrap}

/* ---------- the window ---------- */
.rl-bar{
  position:absolute;left:0;right:0;top:0;height:4em;
  display:flex;align-items:center;gap:1.2em;padding:0 1.4em;
  background:#F3F0EA;
  background:color-mix(in srgb, var(--frame-accent) 8%, #F4F3F0);
  border-bottom:1px solid #E4DBD0;
  border-bottom:1px solid color-mix(in srgb, var(--frame-accent) 24%, transparent);
}
.rl-dots{display:flex;gap:.55em;flex:none}
.rl-dots i{width:.9em;height:.9em;border-radius:50%;
  background:#D8C8B4;
  background:color-mix(in srgb, var(--frame-accent) 34%, transparent)}
.rl-url{
  flex:0 1 47em;min-width:0;height:2.5em;border-radius:1.25em;
  display:flex;align-items:center;gap:.7em;padding:0 1.1em;
  background:#fff;border:1px solid #E8E1D8;
  border:1px solid color-mix(in srgb, var(--frame-accent) 18%, transparent);
}
.rl-lock{width:.86em;height:.7em;border:1px solid var(--ok);border-top:0;
  border-radius:0 0 .1em .1em;position:relative;flex:none;margin-top:.3em}
.rl-lock::before{content:"";position:absolute;left:50%;top:-.46em;transform:translateX(-50%);
  width:.5em;height:.46em;border:1px solid var(--ok);border-bottom:0;border-radius:.3em .3em 0 0}
.rl-urlt{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.3em;
  color:var(--rl-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.rl-view{position:absolute;left:0;right:0;top:4em;bottom:0;overflow:hidden;background:#fff}
.reel-stage.is-bare .rl-view{top:0}
/* the last frame, left over the first while it dissolves */
.rl-ghost{z-index:50;transition:opacity .5s ease}
.rl-ghost.is-out{opacity:0}

/* ---------- the pointer ---------- */
.rl-cur{position:absolute;left:0;top:0;width:0;height:0;z-index:60;opacity:0;
  transition:transform 0s cubic-bezier(.4,.1,.2,1), opacity .25s ease;will-change:transform}
.rl-cur-y{position:absolute;left:0;top:0;width:0;height:0;
  transition:transform 0s cubic-bezier(.6,0,.25,1);will-change:transform}
.rl-cur.is-on{opacity:1}
.rl-cur svg{position:absolute;left:-.21em;top:-.16em;width:2.1em;height:2.52em;
  fill:#16181C;stroke:#fff;stroke-width:1.5;stroke-linejoin:round;paint-order:stroke;
  filter:drop-shadow(0 .14em .22em rgba(0,0,0,.32));
  transform-origin:10% 6%;transition:transform .12s ease}
.rl-cur.is-down svg{transform:scale(.84)}
.rl-rip{position:absolute;width:5.2em;height:5.2em;margin:-2.6em 0 0 -2.6em;border-radius:50%;z-index:59;
  border:.22em solid #A9835A;
  border:.22em solid color-mix(in srgb, var(--frame-accent) 75%, #fff);
  background:rgba(138,90,31,.16);
  background:color-mix(in srgb, var(--frame-accent) 16%, transparent);
  opacity:0;transform:scale(.2);animation:rl-rip .46s cubic-bezier(.2,.7,.3,1) 1}
@keyframes rl-rip{0%{opacity:.9;transform:scale(.2)}100%{opacity:0;transform:scale(1)}}

/* ---------- shared parts ---------- */
/* a page of a screen: several can be stacked and one shown */
.rl-page{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(.9em);
  transition:opacity .22s ease, transform .34s cubic-bezier(.2,.7,.2,1), visibility 0s linear .34s}
.rl-page.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity .26s ease .08s, transform .38s cubic-bezier(.2,.7,.2,1) .08s, visibility 0s}

.rl-ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* lines standing in for running text */
.rl-sk{display:block;height:.62em;border-radius:.31em;background:#E3E1DB}
.rl-sk + .rl-sk{margin-top:.78em}

/* the mark that closes something. The ring settles and the check is
   drawn into it; nothing else moves. */
.rl-ck{width:1em;height:1em;flex:none}
.rl-ck-o{fill:var(--ok);transform-box:fill-box;transform-origin:50% 50%;transform:scale(.55);opacity:0;
  transition:transform .42s cubic-bezier(.3,1.5,.5,1), opacity .2s ease}
.rl-ck-v{fill:none;stroke:#fff;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:15;stroke-dashoffset:15;transition:stroke-dashoffset .34s cubic-bezier(.4,0,.2,1) .2s}
.is-done > .rl-ck .rl-ck-o,.rl-ck.is-done .rl-ck-o{transform:none;opacity:1}
.is-done > .rl-ck .rl-ck-v,.rl-ck.is-done .rl-ck-v{stroke-dashoffset:0}

/* a field being typed into */
.is-typing::after{content:"";display:inline-block;width:.07em;height:1.05em;margin-left:.06em;
  vertical-align:-.16em;background:currentColor;animation:rl-caret 1s steps(1) infinite}
@keyframes rl-caret{50%{opacity:0}}

/* at rest and on hold nothing blinks: a caret left in a field stands still */
.reel[data-state="ended"] .is-typing::after{animation:none}
.reel[data-state="paused"] .is-typing::after{animation-play-state:paused}

/* ---------- a still, for anyone who has asked for less motion ---------- */
.reel-stage.is-still *,.reel-stage.is-still *::before,.reel-stage.is-still *::after{
  transition:none !important;animation:none !important}
.reel-stage.is-still .rl-cur,.reel-stage.is-still .rl-rip,.reel-stage.is-still .rl-ghost{display:none}
@media print{
  .rl-cur,.rl-rip,.rl-ghost{display:none}
}


/* ============================================================
   THE PUBLIC PORTAL
   navy masthead, a white sheet, square corners, and buttons that
   sit flush along the foot of the sheet in two lines
   ============================================================ */
.pt{position:absolute;inset:0;background:var(--pt-ground)}
.pt--navy{background:var(--pt-navy)}
.pt-mast{position:absolute;left:0;right:0;top:0;height:4.6em;
  display:flex;align-items:center;gap:1em;padding:0 2.4em;background:var(--pt-navy);color:#fff}
.pt--navy .pt-mast{border-bottom:1px solid rgba(255,255,255,.12)}
.pt-mast b{font-size:1.9em;font-weight:700;letter-spacing:.01em}
.pt-mast span{font-size:1.5em;opacity:.74;white-space:nowrap}
.pt-mast em{font-size:1.4em;opacity:.92;margin-left:1.4em;white-space:nowrap}
.pt-mast em:first-of-type{margin-left:auto}

.pt-sheet{position:absolute;left:3em;right:3em;top:5.9em;bottom:1.3em;background:#fff;
  box-shadow:0 .5em 1.8em rgba(4,12,30,.34);overflow:hidden}
.pt-h{display:block;font-size:2.4em;font-weight:600;letter-spacing:-.012em;line-height:1.15;white-space:nowrap}
.pt-sub{display:block;font-size:1.5em;line-height:1.3;color:var(--rl-soft);white-space:nowrap}

.pt-foot{position:absolute;left:0;right:0;bottom:0;height:6.6em;display:flex}
/* the two ways on are the same width, so neither reads as the lesser */
.pt-b{position:relative;flex:1 1 0;display:flex;flex-direction:column;justify-content:center;gap:.4em;padding:0 2em;min-width:0;
  transition:filter .15s ease, transform .15s ease}
.pt-b small{font-size:1.4em;line-height:1.1;white-space:nowrap;opacity:.94}
.pt-b b{font-size:1.85em;line-height:1.1;font-weight:700;white-space:nowrap}
.pt-b .rl-ic{position:absolute;right:2em;top:50%;width:2.2em;height:2.2em;margin-top:-1.1em;stroke-width:1.8}
.pt-b--gray{background:var(--pt-gray);color:var(--rl-ink)}
.pt-b--red{background:var(--pt-red);color:#fff}
.pt-b--blue{background:var(--pt-blue);color:#fff}
.pt-b.is-hover{filter:brightness(1.1)}
.pt-b.is-press{filter:brightness(.9)}


/* ============================================================
   00 · The workload
   ============================================================ */
.ch .wl-yr{font-size:26px;font-weight:600;letter-spacing:-.012em}
.ch .wl-n{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:34px;font-weight:500;letter-spacing:-.03em;text-anchor:end}
.wl-s{fill:var(--rl-ink)}
/* the requests added since: they arrive one at a time */
.wl-s--new{fill:var(--pt-blue);transform-box:fill-box;transform-origin:50% 50%;transform:scale(0);opacity:0;
  transition:transform .26s cubic-bezier(.3,1.6,.5,1), opacity .12s ease;transition-delay:calc(var(--i) * 13ms)}
.wl.is-more .wl-s--new{transform:none;opacity:1}
.wl-more{opacity:0;transform:translateY(5px);transition:opacity .3s ease, transform .4s cubic-bezier(.3,1.4,.5,1)}
.wl-more rect{fill:var(--pt-blue)}
.ch .wl-more text{fill:#fff;font-size:13.5px;font-weight:600;text-anchor:middle}
.wl.is-done .wl-more{opacity:1;transform:none}


/* ============================================================
   01 · The portal as it stood
   ============================================================ */
.lp{position:absolute;inset:0;background:#EDF0F1;font-family:Arial,Helvetica,sans-serif}
.lp-mast{position:absolute;left:0;right:0;top:0;height:7.2em;background:#0D2959;color:#fff;padding:1.3em 3em 0}
.lp-mast > b{display:block;font-family:Georgia,'Times New Roman',serif;font-size:2.3em;font-weight:700;line-height:1.2;white-space:nowrap}
.lp-mast > span{display:block;font-family:Georgia,'Times New Roman',serif;font-size:1.6em;line-height:1.3;white-space:nowrap}
.lp-seal{position:absolute;right:3.2em;top:1em;width:5.2em;height:5.2em}
.lp-acct{position:absolute;right:10.4em;bottom:.8em;display:flex;gap:1.7em}
.lp-acct u{font-size:1.35em;color:#fff;text-decoration:underline;text-underline-offset:.15em;white-space:nowrap}
.lp-nav{position:absolute;left:0;right:0;top:7.2em;height:3.6em;background:#0D2959;
  border-top:1px solid #8FA6CC;display:flex;align-items:center;gap:2.8em;padding:0 3em}
.lp-nav u{font-size:1.55em;color:#fff;text-decoration:underline;text-underline-offset:.15em;white-space:nowrap}
.lp-nav u.is-hover{color:#FFE9A8}
.lp-panel{position:absolute;left:1.6em;right:1.6em;top:11.6em;bottom:0;background:#fff;
  border:1px solid #29406E;border-bottom:0;border-radius:.5em .5em 0 0;overflow:hidden}
.lp-title{position:absolute;left:0;right:0;top:0;height:3.4em;background:#0D2959;color:#fff;
  display:flex;align-items:center;padding:0 1.6em}
.lp-title span{font-size:1.55em;white-space:nowrap}
.lp-body{position:absolute;left:0;right:0;top:3.4em;bottom:0;overflow:hidden}
.lp-pg{position:absolute;inset:0;padding:1.6em 2em 0;display:none}
.lp-pg.is-on{display:block}

.lp-home b{display:block;font-size:1.5em;font-weight:700;line-height:1.3;margin-bottom:.55em}
.lp-p{display:block;font-size:1.25em;line-height:1.4;margin-bottom:.9em;color:#111}
.lp-li{display:list-item;list-style:disc outside;font-size:1.4em;line-height:1.55;margin-left:2.6em}
.lp-li--end{margin-bottom:.65em}
.lp-home u{color:#0000EE;text-decoration:underline}

.lp-rooms .lp-dir{display:flex;align-items:center;gap:.9em;height:3.7em}
.lp-dir svg{width:2.3em;height:2.3em;fill:#E9C46A;stroke:#A77E1B;stroke-width:1.2;stroke-linejoin:round;flex:none}
.lp-dir u{font-size:1.7em;color:#0000EE;text-decoration:underline;text-underline-offset:.12em;white-space:nowrap}
.lp-dir.is-hover u{color:#C00}

.lp-files{padding:0}
.lp-cols{position:absolute;left:0;right:0;top:0;height:2.9em;background:#DCE3EC;border-bottom:1px solid #A9B5C7;
  display:flex;align-items:center;padding:0 3.2em 0 2em;z-index:2}
.lp-cols span{font-size:1.3em;font-weight:700;white-space:nowrap}
.lp-cols span:last-child{margin-left:auto}
.lp-scroll{position:absolute;left:0;right:1.4em;top:2.9em;bottom:0;overflow:hidden}
.lp-list{transition:transform 1.9s cubic-bezier(.45,0,.3,1)}
.lp-row{display:flex;align-items:center;gap:.8em;height:2.95em;padding:0 1.8em 0 2em;border-bottom:1px solid #E1E5EA}
.lp-row:nth-child(even){background:#F5F7F9}
.lp-row svg{width:1.5em;height:1.5em;fill:#fff;stroke:#7A8597;stroke-width:1.5;stroke-linejoin:round;flex:none}
.lp-row u{font-size:1.5em;color:#0000EE;text-decoration:underline;text-underline-offset:.12em;white-space:nowrap}
.lp-row span{font-size:1.3em;color:#444;margin-left:auto;white-space:nowrap}
.lp-track{position:absolute;right:0;top:2.9em;bottom:0;width:1.4em;background:#E8EBEF;border-left:1px solid #C9D0DA}
.lp-thumb{position:absolute;left:.22em;right:.22em;top:.3em;height:3.2em;background:#9AA5B5;border-radius:.2em;
  transition:transform 1.9s cubic-bezier(.45,0,.3,1)}

.lp-lab{display:block;font-size:1.45em;font-weight:700;margin-bottom:.45em;white-space:nowrap}
.lp-lab i{color:#C00}
.lp-area{height:9.2em;border:1px solid #767676;border-radius:.2em;background:#fff;padding:.7em .9em;
  box-shadow:inset 0 .1em .25em rgba(0,0,0,.12);margin-bottom:1.3em}
.lp-area span{font-size:1.7em;line-height:1.35;color:#111}
.lp-pair{display:flex;gap:2em;align-items:flex-end}
.lp-in{width:14em;height:3em;border:1px solid #767676;border-radius:.2em;background:#fff;
  box-shadow:inset 0 .1em .25em rgba(0,0,0,.12)}
.lp-btn{margin-left:auto;height:3.2em;padding:0 1.8em;display:flex;align-items:center;border-radius:.3em;
  background:linear-gradient(#7FC5EC,#3E93C8);border:1px solid #2E7AA8;color:#fff}
.lp-btn span{font-size:1.5em;font-weight:700;white-space:nowrap}


/* ============================================================
   02 · The requested redesign   03 · The second design
   One page in the new design system. Every part of it is placed
   by hand, so that it can be walked from one arrangement to
   another without anything inside a card reflowing.
   ============================================================ */
.rd{position:absolute;inset:0;background:#CDD3E0}
.rd-old,.rd-new{position:absolute;inset:0}
.rd-new{background:#CDD3E0;clip-path:inset(0 100% 0 0);transition:clip-path 1.15s cubic-bezier(.65,0,.3,1)}
.rd.is-new .rd-new{clip-path:inset(0 0 0 0)}
.rd-wipe{position:absolute;top:0;bottom:0;left:0;width:.3em;margin-left:-.15em;background:var(--frame-accent);
  opacity:0;transition:left 1.15s cubic-bezier(.65,0,.3,1), opacity .2s ease}
.rd.is-wiping .rd-wipe{opacity:1}
.rd.is-new .rd-wipe{left:100%}

.rd-page{position:absolute;top:0;bottom:0;left:0;width:64em;background:#ECF0F7;overflow:hidden;
  transition:left .8s cubic-bezier(.5,0,.2,1), width .8s cubic-bezier(.5,0,.2,1), box-shadow .4s ease}
.rd-mast{position:absolute;left:0;right:0;top:0;height:4.8em;background:#5B5F87;color:#fff}
.rd-mark{position:absolute;left:2em;top:1.2em;width:2.4em;height:2.4em;border-radius:50%;background:#fff;opacity:.92;
  transition:left .8s cubic-bezier(.5,0,.2,1)}
.rd-name{position:absolute;left:5.4em;top:0;height:4.8em;display:flex;align-items:center;
  transition:left .8s cubic-bezier(.5,0,.2,1)}
.rd-name b{font-size:1.75em;font-weight:700;white-space:nowrap}
.rd-nav{position:absolute;right:2.2em;top:0;height:4.8em;display:flex;align-items:center;gap:2.2em;transition:opacity .25s ease .5s}
.rd-nav em{font-size:1.4em;opacity:.94;white-space:nowrap}
.rd-burger{position:absolute;right:1.7em;top:1.5em;width:2.4em;height:1.8em;display:flex;flex-direction:column;
  justify-content:space-between;opacity:0;transition:opacity .25s ease}
.rd-burger i{height:.26em;background:#fff;border-radius:.13em}
.rd-hd{position:absolute;left:4em;top:6.9em;transition:left .8s cubic-bezier(.5,0,.2,1), top .8s cubic-bezier(.5,0,.2,1), opacity .3s ease}

.rd-card{position:absolute;width:27.3em;height:11.4em;background:#fff;border:1px solid #C3CADA;border-radius:.3em;
  transition:left .7s cubic-bezier(.5,0,.2,1), width .7s cubic-bezier(.5,0,.2,1),
             top .5s cubic-bezier(.5,0,.2,1), height .5s cubic-bezier(.5,0,.2,1),
             border-color .4s ease, box-shadow .4s ease, opacity .3s ease}
.rd-c1{left:4em;top:11.8em}
.rd-c2{left:32.7em;top:11.8em}
.rd-c3{left:4em;top:24.6em}
.rd-c4{left:32.7em;top:24.6em}
.rd-card.is-pri{background:#5B5F87;border-color:#5B5F87;color:#fff}
.rd-ic{position:absolute;left:1.8em;top:1.7em;width:3em;height:3em;color:#5B5F87;
  transition:left .5s cubic-bezier(.5,0,.2,1), top .5s cubic-bezier(.5,0,.2,1), opacity .3s ease}
.rd-ic .rl-ic{width:100%;height:100%;stroke-width:1.5}
.is-pri .rd-ic{color:#fff}
.rd-tt{position:absolute;left:1.8em;top:5.9em;
  transition:left .5s cubic-bezier(.5,0,.2,1), top .5s cubic-bezier(.5,0,.2,1), opacity .3s ease}
.rd-tt b{display:block;font-size:1.8em;font-weight:600;line-height:1.25;white-space:nowrap;
  transition:font-size .5s cubic-bezier(.5,0,.2,1)}
.rd-card .rl-sk{position:absolute;left:1.8em;top:9em;width:58%;margin:0;transition:opacity .25s ease}
.is-pri .rl-sk{background:rgba(255,255,255,.34)}
.rd-ic2,.rd-t2{opacity:0}
.rd-t2 b{font-weight:400;color:var(--rl-soft)}

/* The page made narrow, in two moves so that no card crosses another.
   First each card becomes a row and takes its place in the order,
   which leaves the two columns staggered. Then the window narrows and
   the right-hand rows slide into the gaps. */
.rd.is-rows .rd-hd{top:6.4em}
.rd.is-rows .rd-card{height:6em}
.rd.is-rows .rd-c1{top:10.6em}
.rd.is-rows .rd-c2{top:17.4em}
.rd.is-rows .rd-c3{top:24.2em}
.rd.is-rows .rd-c4{top:31em}
.rd.is-rows .rd-ic{left:1.5em;top:1.5em}
.rd.is-rows .rd-tt{left:5.7em;top:1.85em}
.rd.is-rows .rd-card .rl-sk{opacity:0}

.rd.is-phone .rd-page{left:18em;width:28em;box-shadow:0 0 0 1px #B4BDD0, 0 1em 3em rgba(20,30,60,.22)}
.rd.is-phone .rd-mark{left:1.5em}
.rd.is-phone .rd-name{left:4.7em}
.rd.is-phone .rd-nav{opacity:0;transition-delay:0s}
.rd.is-phone .rd-burger{opacity:1;transition-delay:.35s}
.rd.is-phone .rd-hd{left:1.6em}
.rd.is-phone .rd-card{left:1.6em;width:24.8em}

/* The second design. Two cards trade places: the reading room rises to
   the head of the page and opens into a search, and the request form
   goes to the end. The reading room passes over; the other two cards
   step out and come back in the last row. */
.sd.is-turned .rd-hd{opacity:0}
.sd.is-turned .rd-c4{left:4em;top:6.6em;width:56em;height:6.4em;z-index:3;
  border-color:#5B5F87;box-shadow:inset 0 0 0 .1em #5B5F87, 0 .5em 1.6em rgba(40,50,90,.2)}
.sd .rd-c4{transition:left .7s cubic-bezier(.5,0,.2,1), width .7s cubic-bezier(.5,0,.2,1),
  top .7s cubic-bezier(.5,0,.2,1), height .7s cubic-bezier(.5,0,.2,1), border-color .3s ease, box-shadow .3s ease}
.sd.is-settled .rd-c4{box-shadow:inset 0 0 0 .1em #5B5F87, 0 .3em 1.2em rgba(40,50,90,.12)}
.sd.is-turned .rd-c4 .rd-ic{left:1.7em;top:1.7em}
.sd.is-turned .rd-c4 .rd-tt{left:6.1em;top:2.05em}
.sd.is-turned .rd-c4 .rd-ic1,.sd.is-turned .rd-c4 .rd-t1{opacity:0}
.sd.is-turned .rd-c4 .rd-ic2,.sd.is-turned .rd-c4 .rd-t2{opacity:1;transition-delay:0s,0s,.3s}
.sd.is-turned .rd-card .rl-sk{opacity:0}

.sd .rd-c1{z-index:1;transition:left .7s cubic-bezier(.5,0,.2,1), width .7s cubic-bezier(.5,0,.2,1),
  top .7s cubic-bezier(.5,0,.2,1), height .7s cubic-bezier(.5,0,.2,1)}
.sd .rd-c1 .rd-tt{transition:left .7s cubic-bezier(.5,0,.2,1), top .7s cubic-bezier(.5,0,.2,1)}
.sd .rd-c1 .rd-tt b{transition:font-size .7s cubic-bezier(.5,0,.2,1)}
.sd.is-turned .rd-c1,.sd.is-turned .rd-c2,.sd.is-turned .rd-c3{top:32em;width:17.8em;height:5.8em}
.sd.is-turned .rd-c2{left:4em}
.sd.is-turned .rd-c3{left:23.1em}
.sd.is-turned .rd-c1{left:42.2em}
.sd.is-turned .rd-c1 .rd-ic,.sd.is-turned .rd-c2 .rd-ic,.sd.is-turned .rd-c3 .rd-ic{opacity:0}
.sd.is-turned .rd-c1 .rd-tt,.sd.is-turned .rd-c2 .rd-tt,.sd.is-turned .rd-c3 .rd-tt{left:1.5em;top:1.85em}
.sd.is-turned .rd-c1 .rd-tt b,.sd.is-turned .rd-c2 .rd-tt b,.sd.is-turned .rd-c3 .rd-tt b{font-size:1.6em}
/* these two go out where they stand, move while they cannot be seen,
   and come back in their new places */
.sd .rd-c2,.sd .rd-c3{transition:opacity .16s ease, left 0s .18s, top 0s .18s, width 0s .18s, height 0s .18s}
.sd .rd-c2 .rd-ic,.sd .rd-c3 .rd-ic{transition:opacity 0s .18s}
.sd .rd-c2 .rd-tt,.sd .rd-c3 .rd-tt{transition:left 0s .18s, top 0s .18s}
.sd .rd-c2 .rd-tt b,.sd .rd-c3 .rd-tt b{transition:font-size 0s .18s}
.sd.is-turned .rd-c2,.sd.is-turned .rd-c3{opacity:0}
.sd.is-settled .rd-c2,.sd.is-settled .rd-c3{opacity:1;transition:opacity .3s ease}
.sd.is-settled .rd-c3{transition-delay:.08s}

.sd-recs{position:absolute;left:4em;top:14.5em;width:56em}
.sd-lab{display:block;height:2.2em;opacity:0;transition:opacity .3s ease}
.sd-lab small{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.2em;
  letter-spacing:.07em;text-transform:uppercase;color:var(--rl-faint)}
.sd.is-settled .sd-lab{opacity:1}
.sd-rec{display:flex;align-items:center;gap:1em;height:4.7em;border-bottom:1px solid #D2D8E4;
  opacity:0;transform:translateY(.8em);transition:opacity .3s ease, transform .45s cubic-bezier(.2,.7,.2,1)}
.sd-rec.is-in{opacity:1;transform:none}
.sd-rec .rl-ic{width:2.4em;height:2.4em;color:#5B5F87;stroke-width:1.4}
.sd-rec b{font-size:1.7em;font-weight:600;white-space:nowrap}
.sd-rec span{font-size:1.3em;color:var(--rl-faint);margin-left:auto;white-space:nowrap}
/* ============================================================
   04 · The agency finder
   ============================================================ */
.pt-chip{height:3.7em;padding:0 1.5em;border-radius:1.85em;border:1px solid #8D95A1;background:#fff;
  display:flex;align-items:center;gap:.7em;flex:none;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease}
.pt-chip span{font-size:1.55em;white-space:nowrap}
.pt-chip .rl-ic{width:1.5em;height:1.5em;stroke-width:2}
.pt-chip.is-hover{border-color:var(--pt-navy)}
.pt-chip.is-on{background:var(--pt-navy);border-color:var(--pt-navy);color:#fff}

/* the ring: an outlined check that fills when it is the answer */
.rl-rk{width:1.8em;height:1.8em;flex:none}
.rl-rk circle{fill:#fff;stroke:#AEB6C2;stroke-width:1.6;transform-box:fill-box;transform-origin:50% 50%;transform:scale(.84);
  transition:fill .2s ease, stroke .2s ease, transform .4s cubic-bezier(.3,1.7,.5,1)}
.rl-rk path{fill:none;stroke:#AEB6C2;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .2s ease}
.is-hit > .rl-rk circle{fill:var(--pt-navy);stroke:var(--pt-navy);transform:none}
.is-hit > .rl-rk path{stroke:#fff}

.fd-hd{position:absolute;left:3em;top:6.5em}
.fd-chips{position:absolute;left:3em;top:11em;display:flex;gap:1.1em}
.fd-grid{position:absolute;left:3em;right:3em;top:16.6em;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3em}
.fd-of{position:relative;height:10.3em;background:#fff;border:1px solid #C8CFDA;padding:1.15em 1.4em 0;
  transition:opacity .3s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease}
.fd-of b{display:block;font-size:1.7em;font-weight:600;line-height:1.25;white-space:nowrap;margin-bottom:.35em}
.fd-row{display:flex;align-items:center;gap:.75em;height:2.6em}
.fd-row span{font-size:1.45em;color:var(--rl-soft);white-space:nowrap;transition:color .2s ease}
.fd-row.is-hit span{color:var(--rl-ink);font-weight:600}
.fd-go{position:absolute;right:1.2em;top:1.2em;width:2em;height:2em;color:var(--pt-navy);
  opacity:0;transform:translateX(-.6em);transition:opacity .2s ease, transform .3s cubic-bezier(.2,.7,.2,1)}
.fd-go .rl-ic{width:100%;height:100%;stroke-width:2}
.fd-grid.is-picked .fd-of{opacity:.36}
.fd-grid.is-picked .fd-of.is-hit{opacity:1;border-color:var(--pt-navy);box-shadow:inset 0 0 0 .1em var(--pt-navy)}
.fd-of.is-hover{transform:translateY(-.3em);
  box-shadow:inset 0 0 0 .1em var(--pt-navy), 0 .5em 1.4em rgba(18,41,77,.18) !important}
.fd-of.is-hover .fd-go{opacity:1;transform:none}
/* ============================================================
   05 · The home page
   ============================================================ */
.pt-btn{height:3.9em;padding:0 1.7em;display:flex;align-items:center;border:1px solid var(--pt-navy);
  background:#fff;color:var(--pt-navy);flex:none}
.pt-btn span{font-size:1.6em;font-weight:600;white-space:nowrap}

.hm-search{position:absolute;left:3em;right:3em;top:6.2em;height:4.8em;background:#fff;border:1px solid #8D95A1;
  display:flex;align-items:center;gap:1em;padding:0 1.4em}
.hm-search .rl-ic{width:2em;height:2em;color:var(--rl-faint)}
.hm-search span{font-size:1.6em;color:var(--rl-faint);white-space:nowrap}
.hm-hd{position:absolute;left:3em;top:12.9em}

.hm-tile{position:absolute;width:28.3em;height:6.6em;background:#fff;border:1px solid #C8CFDA;color:var(--rl-ink);
  transition:top .62s cubic-bezier(.5,0,.2,1), background-color .35s ease, border-color .35s ease,
             color .35s ease, box-shadow .2s ease}
.hm-t1{left:3em;top:17.3em}
.hm-t2{left:32.7em;top:17.3em}
.hm-t3{left:3em;top:25em}
.hm-t4{left:32.7em;top:25em}
.hm-tt{position:absolute;left:1.6em;top:2.25em;transition:top .3s cubic-bezier(.3,.7,.2,1)}
.hm-tt b{display:block;font-size:1.65em;font-weight:600;line-height:1.25;white-space:nowrap}
.hm-flag{position:absolute;left:1.6em;top:1.05em;opacity:0;transition:opacity .25s ease}
.hm-flag small{display:block;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.15em;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
.hm-go{position:absolute;right:1.5em;top:2.3em;width:2em;height:2em;color:var(--rl-faint);transition:color .35s ease}
.hm-go .rl-ic{width:100%;height:100%;stroke-width:1.8}
.hm-tile.is-feat{background:var(--pt-navy);border-color:var(--pt-navy);color:#fff;z-index:2}
.hm-tile.is-feat .hm-tt{top:2.95em}
.hm-tile.is-feat .hm-flag{opacity:.82;transition-delay:.12s}
.hm-tile.is-feat .hm-go{color:#fff}
.hm-tile.is-first{top:17.3em;box-shadow:0 .4em 1.3em rgba(18,41,77,.2)}
.hm-tile.is-third{top:25em}
.hm-tile.is-hover{box-shadow:0 .5em 1.5em rgba(18,41,77,.32)}
.hm-tile.is-press{filter:brightness(1.25)}

/* the page ends on the request form, as the shipped one does */
.hm-end{position:absolute;top:33em;width:28.3em;height:5.4em;background:var(--pt-navy);color:#fff;
  display:flex;align-items:center;gap:1em;padding:0 1.6em}
.hm-e1{left:3em}
.hm-e2{left:32.7em}
.hm-end .rl-ic{width:2.3em;height:2.3em;stroke-width:1.6}
.hm-end b{font-size:1.75em;font-weight:600;white-space:nowrap}

.hm-hd2{position:absolute;left:3em;top:6.5em}
.hm-chips{position:absolute;left:3em;top:11em;display:flex;gap:1.1em}
.hm-recs{position:absolute;left:3em;right:3em;top:16.6em;border-top:1px solid #C8CFDA}
.hm-rec{display:flex;align-items:center;gap:1.1em;height:5.3em;border-bottom:1px solid #C8CFDA;
  opacity:0;transform:translateY(.8em);transition:opacity .3s ease, transform .45s cubic-bezier(.2,.7,.2,1)}
.hm-rec.is-in{opacity:1;transform:none}
.hm-rec .rl-ic{width:2.5em;height:2.5em;color:var(--pt-navy);stroke-width:1.4}
.hm-rec b{font-size:1.7em;font-weight:600;white-space:nowrap}
.hm-rec span{font-size:1.3em;color:var(--rl-faint);margin-left:auto;white-space:nowrap}
/* ============================================================
   06 · The reading room
   ============================================================ */
.reel-stage mark{color:inherit;border-radius:.15em;padding:0 .12em;margin:0 -.12em;
  background:linear-gradient(var(--hl),var(--hl)) no-repeat 0 50%/0% 100%;
  transition:background-size .45s cubic-bezier(.4,0,.2,1) .2s}
.is-in mark,.is-on mark{background-size:100% 100%}

.rm-search{position:absolute;left:3em;right:3em;top:6.1em;height:4.9em;background:#fff;border:1px solid #8D95A1;
  display:flex;align-items:center;gap:1em;padding:0 1.4em;transition:border-color .2s ease, box-shadow .2s ease}
.rm-search.is-focus{border-color:var(--pt-navy);box-shadow:inset 0 0 0 .1em var(--pt-navy)}
.rm-search .rl-ic{width:2.1em;height:2.1em;color:var(--rl-soft)}
.rm-q{font-size:1.85em;white-space:nowrap}
.rm-ph{font-size:1.6em;color:var(--rl-faint);white-space:nowrap}
.rm-search.is-focus .rm-ph{display:none}
.rm-chips{position:absolute;left:3em;right:3em;top:12.3em;display:flex;align-items:center;gap:1em}
.rm-n{margin-left:auto}
.rm-n small{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.2em;
  letter-spacing:.06em;text-transform:uppercase;color:var(--rl-faint);white-space:nowrap}

.rm-hit{position:absolute;left:3em;width:35em;height:6.3em;padding:1.05em 1.3em 0;background:#fff;border:1px solid #C8CFDA;
  opacity:0;transform:translateY(.8em);
  transition:opacity .3s ease, transform .45s cubic-bezier(.2,.7,.2,1), border-color .2s ease, box-shadow .2s ease}
.rm-h1{top:17.4em}
.rm-h2{top:24.5em}
.rm-h3{top:31.6em}
.rm-hit.is-in{opacity:1;transform:none}
.rm-hit.is-gone{opacity:0;transform:translateX(-1.2em);transition:opacity .28s ease, transform .4s cubic-bezier(.4,0,.2,1)}
.rm-hit.is-off{opacity:0;transition:opacity .14s ease}
.rm-hit.is-hover{border-color:var(--pt-navy);box-shadow:inset 0 0 0 .1em var(--pt-navy)}
.rm-top{display:flex;align-items:baseline;gap:1em}
.rm-top b{font-size:1.75em;font-weight:600;white-space:nowrap}
.rm-top small{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.05em;
  letter-spacing:.06em;text-transform:uppercase;color:var(--rl-faint);margin-left:auto;white-space:nowrap}
.rm-snip{display:block;font-size:1.42em;color:var(--rl-soft);white-space:nowrap;margin-top:.3em}
.rm-snip mark{color:var(--rl-ink)}

.rm-prev{position:absolute;left:39.4em;right:3em;top:17.4em;bottom:0;background:#E3E6EB;overflow:hidden}
/* nothing chosen yet */
.rm-prev > .rl-ic{position:absolute;left:50%;top:7.6em;width:4.4em;height:4.4em;margin-left:-2.2em;color:#B4BBC7;stroke-width:1.1;
  transition:opacity .2s ease}
.rm-prev.is-on > .rl-ic{opacity:0}
.rm-page{position:absolute;left:1.5em;right:1.5em;top:1.5em;bottom:-1em;background:#fff;padding:1.6em 1.6em 0;
  box-shadow:0 .1em .5em rgba(0,0,0,.16);opacity:0;transform:translateY(2.2em);
  transition:opacity .28s ease, transform .5s cubic-bezier(.2,.7,.2,1)}
.rm-prev.is-on .rm-page{opacity:1;transform:none}
.rm-page b{display:block;font-size:1.2em;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding-bottom:.55em;border-bottom:1px solid var(--rl-ink);margin-bottom:.9em;white-space:nowrap}
.rm-ln{display:flex;align-items:center;gap:.5em;margin:.34em 0}
.rm-ln .rl-sk{margin:0;flex:none}
.rm-ln .rm-rest{flex:1 1 0;min-width:0;max-width:3.4em}
.rm-ln mark{font-size:1.15em;font-weight:600;line-height:1.3;white-space:nowrap;margin:0;
  transition-delay:.45s}
.rm-page > .rl-sk{margin-top:.78em}
.rm-page > b + .rl-sk{margin-top:0}
.rm-pn{position:absolute;right:.9em;top:.9em;background:#fff;border:1px solid #C8CFDA;padding:.3em .7em;
  opacity:0;transition:opacity .25s ease .2s}
.rm-prev.is-on .rm-pn{opacity:1}
.rm-pn small{display:block;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.05em;
  letter-spacing:.06em;text-transform:uppercase;color:var(--rl-soft);white-space:nowrap}
/* ============================================================
   07 · A record with an address of its own
   ============================================================ */
/* the address changing is the event, so the bar is lit for a moment */
.rl-url{transition:border-color .3s ease, box-shadow .3s ease}
.rl-bar.is-new .rl-url{border-color:var(--frame-accent);
  box-shadow:0 0 0 .28em rgba(138,90,31,.26);
  box-shadow:0 0 0 .28em color-mix(in srgb, var(--frame-accent) 26%, transparent)}
.rl-bar.is-new .rl-urlt{color:var(--rl-ink)}

.ad{position:absolute;inset:0;background:#fff}
.ad-logo{position:absolute;left:3em;top:4.4em;width:3.2em;height:3.2em;border-radius:50%;
  background:conic-gradient(from 210deg, #C9CDD6, #E6E8EE, #AEB6C4, #C9CDD6)}
.ad-box{position:absolute;left:8em;right:8em;top:3.4em;height:5.2em;border:1px solid #C9CDD3;border-radius:2.6em;
  display:flex;align-items:center;gap:1em;padding:0 1.8em;background:#fff;
  box-shadow:0 .15em .6em rgba(0,0,0,.08);transition:box-shadow .2s ease, border-color .2s ease}
.ad-box.is-focus{border-color:#9AA3AF;box-shadow:0 .3em 1.2em rgba(0,0,0,.14)}
.ad-box .rl-ic{width:2.1em;height:2.1em;color:var(--rl-faint)}
.ad-q{font-size:1.85em;white-space:nowrap}
.ad-list{position:absolute;left:8em;right:8em;top:11.4em}
.ad-res{height:9em;opacity:0;transform:translateY(.8em);
  transition:opacity .3s ease, transform .45s cubic-bezier(.2,.7,.2,1)}
.ad-res.is-in{opacity:1;transform:none}
.ad-crumb{display:block;height:2em}
.ad-crumb small{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.25em;color:var(--rl-soft);white-space:nowrap}
.ad-res b{display:block;font-size:2em;font-weight:500;line-height:1.25;color:#1A3FA8;white-space:nowrap;margin-bottom:.38em}
.ad-res b.is-hover{text-decoration:underline;text-underline-offset:.14em}
.ad-res--other .rl-sk{background:#E9E9E6}
.ad-res--other .ad-skt{height:1.5em;border-radius:.3em;margin:.75em 0 .85em;background:#DCE2F2}

.ad-hd{position:absolute;left:3em;top:6.5em;display:flex;align-items:center;gap:1em}
.ad-hd .rl-ic{width:2.9em;height:2.9em;color:var(--pt-navy);stroke-width:1.4}
.ad-hd .pt-h{font-size:2.15em}
.ad-meta{position:absolute;left:3em;top:11em;height:3.9em;display:flex;align-items:center}
.ad-meta span{font-size:1.45em;color:var(--rl-soft);white-space:nowrap}
.ad-acts{position:absolute;right:3em;top:11em;display:flex;gap:1em}
.ad-acts .pt-btn{gap:.7em;padding:0 1.4em;transition:background-color .2s ease, color .2s ease}
.ad-acts .rl-ic{width:1.9em;height:1.9em;stroke-width:1.8}
.ad-acts .pt-btn.is-hover{background:var(--pt-blue-soft)}
.ad-acts .pt-btn.is-on{background:var(--pt-navy);color:#fff}
.ad-pane{position:absolute;left:3em;right:3em;top:16.6em;bottom:0;background:#E3E6EB;padding:1.6em 1.8em 0;overflow:hidden}
.ad-doc{background:#fff;height:100%;padding:1.9em 2.2em;box-shadow:0 .1em .5em rgba(0,0,0,.16)}
.ad-doc b{display:block;font-size:1.3em;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding-bottom:.6em;border-bottom:1px solid var(--rl-ink);margin-bottom:1em;white-space:nowrap}
.ad-doc .rl-sk.is-bar{background:#16181C;border-radius:0;height:.85em}

.ad-pop{position:absolute;right:3em;top:15.9em;width:48em;height:10.6em;background:#fff;border:1px solid #B9C1CE;
  box-shadow:0 .8em 2.4em rgba(18,41,77,.26);padding:1.3em 1.5em;z-index:5;
  opacity:0;transform:translateY(-.8em) scale(.97);transform-origin:92% 0;
  transition:opacity .2s ease, transform .34s cubic-bezier(.2,.8,.2,1)}
.ad-pop.is-on{opacity:1;transform:none}
.ad-pop .rl-ck{position:absolute;left:1.5em;top:1.2em;width:2.6em;height:2.6em}
.ad-pop > b{position:absolute;left:2.65em;top:.72em;font-size:1.8em;font-weight:600;white-space:nowrap}
.ad-field{position:absolute;left:1.5em;right:1.5em;top:5em;height:4.2em;background:#F3F5F8;border:1px solid #C8CFDA;
  display:flex;align-items:center;gap:.8em;padding:0 1.1em}
.ad-field .rl-ic{width:1.9em;height:1.9em;color:var(--rl-soft)}
.ad-field span{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.3em;color:var(--rl-ink);white-space:nowrap}
/* ============================================================
   08 · The interruption
   ============================================================ */
/* the window's tabs, under its address bar. Each is as wide as a tab
   is, with its title and a mark to close it. There is one until a record
   is opened, and then the record has one of its own beside it. */
.iq-tabs{position:absolute;left:0;right:0;top:0;height:2.6em;display:flex;align-items:flex-end;padding:0 1.2em;z-index:3;
  background:#E6E2DB;
  background:color-mix(in srgb, var(--frame-accent) 15%, #E8E7E4);
  border-bottom:1px solid #DAD2C7;
  border-bottom:1px solid color-mix(in srgb, var(--frame-accent) 26%, transparent)}
.iq-tab{flex:none;width:19.5em;height:2.2em;display:flex;align-items:center;gap:.7em;padding:0 .8em 0 1.1em;overflow:hidden;
  border-radius:.55em .55em 0 0;
  transition:width .4s cubic-bezier(.3,.7,.2,1), padding .4s cubic-bezier(.3,.7,.2,1),
             background-color .15s ease, opacity .25s ease}
.iq-tab span{flex:1 1 auto;min-width:0;font-size:1.15em;line-height:1.25;color:var(--rl-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the mark that closes a tab */
.iq-tab i{position:relative;width:.9em;height:.9em;flex:none;opacity:.55}
.iq-tab i::before,.iq-tab i::after{content:"";position:absolute;left:50%;top:50%;width:1em;height:.13em;margin:-.065em 0 0 -.5em;
  border-radius:.07em;background:var(--rl-ink)}
.iq-tab i::before{transform:rotate(45deg)}
.iq-tab i::after{transform:rotate(-45deg)}
.iq-tab.is-on{background:#fff}
.iq-tab.is-on span{color:var(--rl-ink)}
.iq-tab.is-on i{opacity:.8}
.iq-tab.is-hover{background:rgba(255,255,255,.5)}
.iq-tab.is-on.is-hover{background:#fff}
.iq-tab2{width:0;padding:0;opacity:0}
.iq-tabs.is-two .iq-tab2{width:19.5em;padding:0 .8em 0 1.1em;opacity:1}
/* and the mark that opens a new one, after the last */
.iq-plus{position:relative;flex:none;width:1em;height:1em;margin:0 0 .6em .9em;opacity:.5}
.iq-plus::before,.iq-plus::after{content:"";position:absolute;left:50%;top:50%;width:1em;height:.13em;margin:-.065em 0 0 -.5em;
  border-radius:.07em;background:var(--rl-ink)}
.iq-plus::after{transform:rotate(90deg)}

/* what each tab holds. They change places at once, as tabs do. */
.iq-win{position:absolute;left:0;right:0;top:2.6em;bottom:0;opacity:0;visibility:hidden;
  transition:opacity .14s ease, visibility 0s linear .14s}
.iq-win.is-on{opacity:1;visibility:visible;transition:opacity .18s ease, visibility 0s}
.iq-w1 .pt-sheet{top:5.8em;bottom:1.2em}

.iq-steps{position:absolute;left:3em;top:2.1em;display:flex;align-items:center;gap:.5em}
.iq-steps i{width:4.2em;height:.5em;background:#D9DCE2}
.iq-steps i.is-done{background:var(--pt-navy)}
.iq-steps i.is-now{background:var(--pt-blue)}
.iq-steps span{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.25em;
  letter-spacing:.06em;text-transform:uppercase;color:var(--rl-faint);margin-left:.9em;white-space:nowrap}
.iq-a .iq-hd{position:absolute;left:3em;top:4.6em}
.iq-field{position:absolute;left:3em;right:3em;top:9.4em;height:11.6em;border:1px solid #8D95A1;
  padding:1.1em 1.3em;background:#fff;transition:border-color .2s ease, box-shadow .2s ease}
.iq-field.is-focus{border-color:var(--pt-blue);box-shadow:0 0 0 .22em rgba(27,76,140,.22)}
.iq-field span{font-size:1.8em;line-height:1.38;color:var(--rl-ink)}

.iq-b .iq-hd{position:absolute;left:3em;top:1.9em}
.iq-b .pt-h{font-size:2.2em}
/* what was asked for, said back, so that what it matched can be marked in it */
.iq-q{position:absolute;left:3em;right:3em;top:5.15em;display:flex;align-items:center;gap:.8em}
.iq-q .rl-ic{width:1.7em;height:1.7em;color:var(--rl-faint);stroke-width:1.9}
.iq-q span{font-size:1.45em;line-height:1.35;color:var(--rl-ink);white-space:nowrap}

.iq-list{position:absolute;left:2em;top:8.3em;width:25.6em}
.iq-m{display:flex;align-items:center;gap:.9em;height:4.6em;padding:0 1em;border:1px solid transparent;
  opacity:0;transform:translateY(.7em);
  transition:opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1), background-color .18s ease, border-color .18s ease}
.iq-m + .iq-m{margin-top:.35em}
.iq-m.is-in{opacity:1;transform:none}
/* the match that is open in the preview. One always is. */
.iq-m.is-sel{background:#F3F4F8;border-color:var(--pt-navy)}
.iq-m.is-hover{background:#F3F4F8}
.iq-m .rl-ic{width:2.2em;height:2.2em;color:var(--pt-navy);stroke-width:1.4}
.iq-m b{display:block;font-size:1.45em;font-weight:600;line-height:1.25;white-space:nowrap}
.iq-m span{display:block;font-size:1.25em;color:var(--rl-faint);line-height:1.3;white-space:nowrap}

.iq-prev{position:absolute;left:28.8em;right:3em;top:8.3em;height:14.5em;background:#E7EAF0;overflow:hidden}
.iq-bar{position:absolute;left:0;right:0;top:0;height:3.5em;display:flex;align-items:center;justify-content:space-between;
  padding:0 .9em 0 1.3em}
.iq-pg{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.1em;letter-spacing:.07em;
  text-transform:uppercase;color:var(--rl-soft);white-space:nowrap}
/* the way to the record itself, on every preview */
.iq-open{height:2.5em;padding:0 .95em 0 .8em;display:flex;align-items:center;gap:.55em;flex:none;
  border:1px solid var(--pt-navy);background:#fff;color:var(--pt-navy);
  transition:background-color .15s ease, color .15s ease}
.iq-open .rl-ic{width:1.4em;height:1.4em;stroke-width:1.9}
.iq-open span{font-size:1.25em;font-weight:600;white-space:nowrap}
.iq-open.is-hover{background:var(--pt-blue-soft)}
.iq-open.is-press{background:var(--pt-navy);color:#fff}
/* one sheet for each match, stacked; the open one is shown */
.iq-doc{position:absolute;left:1.2em;right:1.2em;top:3.5em;bottom:-2em;background:#fff;padding:1.1em 1.5em 0;
  box-shadow:0 .1em .4em rgba(0,0,0,.16);
  opacity:0;transform:translateY(.8em);transition:opacity .16s ease, transform 0s linear .16s}
.iq-doc.is-on{opacity:1;transform:none;
  transition:opacity .24s ease .08s, transform .4s cubic-bezier(.2,.7,.2,1) .08s}
.iq-doc b{display:block;font-size:1.15em;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  line-height:1.3;padding-bottom:.45em;border-bottom:1px solid var(--rl-ink);margin-bottom:.6em;white-space:nowrap}
.iq-x{display:block;font-size:1.3em;line-height:1.48;color:var(--rl-ink);margin-bottom:.8em}
/* the words a match shares with the description: marked in the open
   record, and in the description for as long as that record is open */
.iq-b .iq-q mark,.iq-b .iq-doc mark{background-size:0% 100%}
.iq-b.is-lit .iq-doc.is-on mark,
.iq-b.is-d0 .iq-q .m1,.iq-b.is-d0 .iq-q .m2,.iq-b.is-d0 .iq-q .m4,
.iq-b.is-d1 .iq-q .m1,.iq-b.is-d1 .iq-q .m2,.iq-b.is-d1 .iq-q .m3,
.iq-b.is-d2 .iq-q .m1,.iq-b.is-d2 .iq-q .m4{background-size:100% 100%}

/* the record's page, as the reading room shows it */
.iq-w2 .ad-doc .iq-x{font-size:1.5em;line-height:1.5;margin-bottom:1em}
/* ============================================================
   THE INTAKE QUEUE
   the officer's side: white, with one indigo for what can be acted on
   ============================================================ */
.in{position:absolute;inset:0;background:#EEF0F5}
.in-top{position:absolute;left:0;right:0;top:0;height:4.6em;background:#fff;border-bottom:1px solid #D5D8E3;
  display:flex;align-items:center;gap:1.1em;padding:0 3em}
.in-top > b{font-size:1.7em;font-weight:700;white-space:nowrap}
.in-q{margin-left:auto;display:flex;align-items:center;gap:.7em}
.in-q > span{font-size:1.35em;color:var(--rl-soft);white-space:nowrap}
/* the count turns over like a counter when the queue gets shorter */
.in-n{width:2.5em;height:2em;border-radius:1em;background:var(--in-indigo-soft);color:var(--in-indigo);
  position:relative;overflow:hidden;flex:none}
.in-n b{position:absolute;left:0;right:0;top:0;height:2em;display:flex;align-items:center;justify-content:center;
  transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.in-n b i{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.25em;font-weight:500}
.in-n b + b{transform:translateY(100%)}
.in-n.is-less b{transform:translateY(-100%)}
.in-n.is-less b + b{transform:none}
.in-tag{height:2.6em;padding:0 .9em;border-radius:.3em;display:flex;align-items:center;background:var(--ok-soft);color:var(--ok)}
.in-tag small{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.2em;letter-spacing:.07em;
  text-transform:uppercase;white-space:nowrap}

.in-sheet{position:absolute;left:3em;right:3em;top:6em;bottom:1.4em;background:#fff;border:1px solid #D5D8E3;
  border-radius:.5em;box-shadow:0 .4em 1.6em rgba(40,45,90,.1);overflow:hidden}
.in-h{display:block;font-size:2.15em;font-weight:600;letter-spacing:-.012em;line-height:1.15;white-space:nowrap}
.in-lab{display:block}
.in-lab small{display:block;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.15em;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.3;color:var(--rl-faint);white-space:nowrap}
.in-id{display:block}
.in-id small{display:block;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.35em;
  line-height:1.3;color:var(--rl-ink);white-space:nowrap}

.in-b{height:4.4em;padding:0 2.2em;border-radius:.4em;display:flex;align-items:center;justify-content:center;flex:none;
  transition:background-color .3s ease, color .3s ease, filter .15s ease, transform .15s ease, box-shadow .2s ease, opacity .25s ease}
.in-b span{font-size:1.7em;font-weight:600;white-space:nowrap}
.in-b--pri{background:var(--in-indigo);color:#fff}
.in-b--sec{background:#E9EBF1;color:var(--rl-ink)}
.in-b.is-hover{filter:brightness(.94)}
.in-b.is-press{filter:brightness(.86);transform:scale(.97)}
.in-b.is-off{background:#E3E5EC;color:#9A9EAC}

/* ---------- the stack ----------
   The queue is a stack of cards. The one on top is being decided; the
   edges of those waiting show under it. A card that has been decided
   lifts away and the rest move up one. */
.dk{position:absolute;left:3em;right:3em;top:5.9em;bottom:3.4em}
.dk-card{position:absolute;inset:0;background:#fff;border:1px solid #CBCFDC;border-radius:.5em;overflow:hidden;
  box-shadow:0 .2em .8em rgba(40,45,90,.1);transform-origin:50% 100%;
  transition:transform .52s cubic-bezier(.2,.8,.2,1), opacity .3s ease, background-color .3s ease}
.dk-card.is-1{z-index:4}
.dk-card.is-2{z-index:3;transform:translateY(1em) scale(.962);background:#FAFAFC}
.dk-card.is-3{z-index:2;transform:translateY(2em) scale(.924);background:#F4F5F9}
.dk-card.is-4,.dk-card.is-5{z-index:1;transform:translateY(2em) scale(.924);background:#F4F5F9;opacity:0}
.dk-card.is-out{z-index:5;transform:translateY(-2.8em) scale(.985);opacity:0;
  transition:transform .42s cubic-bezier(.5,0,.8,.45), opacity .28s ease .1s}
/* a card's face shows only when the card is on top */
.dk-face{position:absolute;inset:0;transition:opacity .3s ease .16s}
.dk-card.is-2 .dk-face,.dk-card.is-3 .dk-face,.dk-card.is-4 .dk-face{opacity:0;transition-delay:0s}

/* where a card's choices are: the lesser one, then the main one */
.in-foot{position:absolute;left:0;right:0;bottom:0;height:6.4em;border-top:1px solid #E2E5EC;
  display:flex;align-items:center;justify-content:flex-end;gap:1.2em;padding:0 2.4em}
.in-foot .in-b{height:4em;padding:0 2em}
.in-foot .in-b span{font-size:1.6em}

/* what was just done, and the way back, for as long as it can be taken */
.in-toast{position:absolute;left:5.4em;bottom:4.85em;height:3.5em;padding:0 .55em 0 .95em;border-radius:.5em;z-index:8;
  display:flex;align-items:center;gap:.7em;background:#23263F;color:#fff;box-shadow:0 .5em 1.6em rgba(20,22,45,.3);
  opacity:0;transform:translateY(.9em);transition:opacity .25s ease .12s, transform .42s cubic-bezier(.2,.8,.2,1) .12s}
.in-toast.is-on{opacity:1;transform:none}
.in-toast .rl-ck{width:1.9em;height:1.9em}
.in-toast .rl-ck-o{fill:#5DBB8B}
.in-toast .rl-ck-v{stroke:#23263F}
.in-toast b{font-size:1.4em;font-weight:600;white-space:nowrap}
.in-toast u{font-size:1.4em;font-weight:600;line-height:1;margin-left:.45em;padding:.5em .75em;border-radius:.28em;
  background:rgba(255,255,255,.16);white-space:nowrap}


/* ============================================================
   09 · A potential duplicate
   ============================================================ */
.du-hd{position:absolute;left:2.4em;top:1.75em}
.du-score{position:absolute;right:2.4em;top:1.55em;height:3.3em;padding:0 1.1em;border-radius:.35em;
  display:flex;align-items:baseline;gap:.35em;background:var(--ok-soft);color:var(--ok)}
.du-score b{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.85em;font-weight:500;line-height:1.78}
.du-score span{font-size:1.5em;font-weight:600;white-space:nowrap}

.du-card{position:absolute;top:6.2em;width:25.8em;height:16.8em;border:1px solid #CFD3DF;border-radius:.4em;
  background:#fff;padding:1.2em 1.4em 0;
  transition:transform .6s cubic-bezier(.5,0,.2,1), opacity .3s ease .28s, border-color .3s ease, box-shadow .3s ease}
/* the new request goes in under the one it joins */
.du-new{left:2.4em;z-index:1}
.du-old{left:29.8em;z-index:2}
.du-card .in-id{margin:.25em 0 .65em}
.du-tx{display:block;font-size:1.5em;line-height:1.42;color:var(--rl-ink)}
.du-tx .m3{white-space:nowrap}
.du mark{transition-duration:.55s;transition-delay:0s}
.du.is-m1 .m1,.du.is-m2 .m2,.du.is-m3 .m3{background-size:100% 100%}

.du-done{position:absolute;left:2.4em;top:6.2em;width:25.8em;height:16.8em;display:flex;flex-direction:column;
  justify-content:center;gap:.9em;padding:0 1.4em;opacity:0;transition:opacity .3s ease .35s}
.du-done .rl-ck{width:4.6em;height:4.6em;margin-bottom:.4em}
.du-done b{font-size:2.15em;font-weight:700;letter-spacing:-.012em;white-space:nowrap}
.du-done small{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.35em;color:var(--rl-soft);white-space:nowrap}

.du.is-merged .du-new{transform:translateX(27.4em);opacity:0}
.du.is-merged .du-old{border-color:var(--ok);box-shadow:inset 0 0 0 .1em var(--ok)}
.du.is-merged .in-foot .in-b{opacity:.4}
.du.is-merged .du-done{opacity:1}


/* ============================================================
   10 · A request that looks misrouted
   ============================================================ */
.mr-hd{position:absolute;left:2.4em;top:1.75em}
.mr-slot{position:absolute;left:2.4em;top:6.2em;width:20em;height:16.8em;border:1px dashed #C3C8D6;border-radius:.4em;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease .3s}
/* the request leaves in an arc: one box carries it across and the box
   inside it carries it up and then down */
.mr-fly{position:absolute;left:2.4em;top:6.2em;width:20em;height:16.8em;z-index:4;
  transition:transform .78s cubic-bezier(.45,0,.3,1)}
.mr-card{position:absolute;inset:0;border:1px solid #CFD3DF;border-radius:.4em;background:#fff;padding:1.2em 1.4em 0;
  transform-origin:14% 22%;
  transition:transform .78s cubic-bezier(.5,-.55,.7,1), opacity .2s ease .58s, box-shadow .25s ease}
.mr-card .in-id{margin:.25em 0 .65em}
.mr-tx{display:block;font-size:1.5em;line-height:1.42;color:var(--rl-ink)}
.mr mark{transition-duration:.5s;transition-delay:0s;--hl:#C9E4D3}
.mr.is-m1 .m1,.mr.is-m2 .m2{background-size:100% 100%}

.mr-of{position:absolute;left:23.8em;right:2.4em;height:7.9em;border:1px solid #CFD3DF;border-radius:.4em;background:#fff;
  transition:border-color .3s ease, box-shadow .3s ease, opacity .3s ease}
.mr-you{top:6.2em}
.mr-them{top:15.1em}
.mr-chip{position:absolute;left:1.1em;top:1.65em;width:4.6em;height:4.6em;border-radius:.45em;
  display:flex;align-items:center;justify-content:center}
.mr-chip b{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.5em;font-weight:500;
  transition:opacity .2s ease}
.mr-chip--you{background:var(--in-indigo-soft);color:var(--in-indigo)}
.mr-chip--pct{background:var(--ok-soft);color:var(--ok)}
.mr-chip .rl-ck{position:absolute;left:.5em;top:.5em;width:3.6em;height:3.6em}
.mr-nm{position:absolute;left:6.8em;top:1.5em}
.mr-nm b{font-size:1.45em;font-weight:600;white-space:nowrap}
.mr-ho{position:absolute;left:6.8em;top:4.2em;transition:opacity .25s ease}
.mr-ho span{font-size:1.35em;color:var(--rl-soft);white-space:nowrap}
.mr-ho2{opacity:0}
.mr-ho2 span{color:var(--ok);font-weight:600;font-size:1.32em}

.mr.is-lift .mr-card{box-shadow:0 .8em 2.4em rgba(40,45,90,.24)}
.mr.is-sent .mr-fly{transform:translateX(20.6em)}
.mr.is-sent .mr-card{transform:translateY(8.2em) scale(.2);opacity:0}
.mr.is-sent .mr-slot{opacity:1}
.mr.is-sent .in-foot .in-b{opacity:.4}
.mr.is-sent .mr-you{opacity:.45}
.mr.is-got .mr-them{border-color:var(--ok);box-shadow:inset 0 0 0 .1em var(--ok)}
.mr.is-got .mr-chip--pct b{opacity:0}
.mr.is-got .mr-ho1{opacity:0}
.mr.is-got .mr-ho2{opacity:1;transition-delay:.15s}


/* ============================================================
   10b · A request with nothing flagged, and the end of the queue
   ============================================================ */
.ok-hd{position:absolute;left:2.4em;top:1.75em}
.ok-flag{position:absolute;right:2.4em;top:1.55em;height:3.3em;padding:0 1.1em;border-radius:.35em;
  display:flex;align-items:center;background:#EEF0F5;color:var(--rl-soft)}
.ok-flag span{font-size:1.45em;font-weight:600;white-space:nowrap}
.ok-card{position:absolute;left:2.4em;top:6.2em;width:31em;height:16.8em;border:1px solid #CFD3DF;border-radius:.4em;background:#fff;
  padding:1.2em 1.4em 0;transition:border-color .3s ease, box-shadow .3s ease}
.ok-card .in-id{margin:.25em 0 .65em}
.ok-tx{display:block;font-size:1.55em;line-height:1.42;color:var(--rl-ink)}
.ok-acc{position:absolute;left:1.4em;bottom:1.25em;display:flex;align-items:center;gap:.65em;opacity:0;transition:opacity .25s ease .08s}
.ok-acc .rl-ck{width:2.4em;height:2.4em}
.ok-acc b{font-size:1.55em;font-weight:600;color:var(--ok);white-space:nowrap}
.ok.is-acc .ok-card{border-color:var(--ok);box-shadow:inset 0 0 0 .1em var(--ok)}
.ok.is-acc .ok-acc{opacity:1}
.ok.is-acc .in-foot .in-b{opacity:.4}
.ok-meta{position:absolute;left:35.4em;right:2.4em;top:6.3em}
.ok-meta div{padding-bottom:1.05em;margin-bottom:1.05em;border-bottom:1px solid #E2E5EC}
.ok-meta div:last-child{border-bottom:0;margin-bottom:0}
.ok-meta b{display:block;font-size:1.5em;font-weight:500;line-height:1.3;margin-top:.2em;white-space:nowrap}

/* nothing left. The count goes green, a check is drawn where the stack
   was, and the day is counted up. It confirms; it does not celebrate. */
.in-n{transition:background-color .4s ease .3s, color .4s ease .3s}
.in-n.is-zero{background:var(--ok-soft);color:var(--ok)}
.in-empty{position:absolute;left:3em;right:3em;top:5.9em;bottom:3.4em;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding-bottom:3.4em;opacity:0;transform:translateY(.8em);
  transition:opacity .35s ease, transform .55s cubic-bezier(.2,.8,.2,1)}
.in-empty.is-on{opacity:1;transform:none}
.in-ok{position:relative;width:7.2em;height:7.2em;flex:none}
.in-ok .rl-ck{width:100%;height:100%}
/* one ring goes out from the check as it lands, once */
.in-ok i{position:absolute;inset:.3em;border-radius:50%;border:.2em solid var(--ok);opacity:0}
.in-ok.is-done i{animation:in-ring .95s cubic-bezier(.2,.7,.3,1) .3s 1 both}
@keyframes in-ring{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.85)}}
.in-empty > b{font-size:2.9em;font-weight:600;letter-spacing:-.016em;line-height:1.15;margin-top:.5em;white-space:nowrap}
.in-none{font-size:1.6em;color:var(--rl-soft);margin-top:.35em;white-space:nowrap}
.in-tally{display:flex;gap:1em;margin-top:2em}
.in-tally div{height:3.5em;padding:0 1.25em;border-radius:1.75em;background:#fff;border:1px solid #D5D8E3;
  display:flex;align-items:center;gap:.55em;opacity:0;transform:translateY(.6em);
  transition:opacity .3s ease, transform .45s cubic-bezier(.2,.8,.2,1)}
.in-tally div:nth-child(2){transition-delay:.1s}
.in-tally div:nth-child(3){transition-delay:.2s}
.in-tally b{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.5em;font-weight:500;color:var(--in-indigo)}
.in-tally span{font-size:1.4em;color:var(--rl-soft);white-space:nowrap}
.in-empty.is-tally .in-tally div{opacity:1;transform:none}


/* ============================================================
   11 · Release
   ============================================================ */
.pb-lab{position:absolute;left:2.4em;top:1.9em;width:28.6em;display:flex;align-items:center;justify-content:space-between}
.pb-view{position:absolute;left:2.4em;top:4.6em;width:28.6em;height:23.6em;background:#E3E6EB;overflow:hidden}
.pb-pages{padding:1.2em 1.4em 0;transition:transform 1.05s cubic-bezier(.45,0,.25,1)}
.pb-pagex{background:#fff;height:26em;margin-bottom:1.2em;padding:1.7em 1.8em 0;box-shadow:0 .1em .4em rgba(0,0,0,.14)}
.pb-pagex b{display:block;font-size:1.2em;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding-bottom:.55em;border-bottom:1px solid var(--rl-ink);margin-bottom:.9em;white-space:nowrap}
.pb-pagex .rl-sk.is-bar{background:#16181C;border-radius:0;height:.85em}
.pb-bar{position:absolute;left:2.4em;top:29.2em;width:28.6em;height:.5em;border-radius:.25em;background:#E3E5EC;overflow:hidden}
.pb-bar i{display:block;height:100%;width:100%;background:var(--in-indigo);transform-origin:0 50%;transform:scaleX(.29);
  transition:transform 1.05s cubic-bezier(.45,0,.25,1), background-color .3s ease}
.pb.is-read .pb-bar i{background:var(--ok)}

.pb-right{position:absolute;left:33.6em;top:0;width:22em;bottom:0;transition:opacity .22s ease}
.pb-ttl{position:absolute;left:0;top:1.7em}
.pb-ttl span{display:block;font-size:1.45em;color:var(--rl-soft);white-space:nowrap;margin-top:.2em}
.pb-row{position:absolute;left:0;right:0}
.pb-row .in-lab{margin-bottom:.25em}
.pb-row > b{display:block;font-size:1.55em;font-weight:500;line-height:1.3}
.pb-r1{top:8.4em}
.pb-r2{top:15.2em}
.pb-r3{top:19.9em}
.pb-go{position:absolute;left:0;right:0;top:24.9em}
.pb-hint{position:absolute;left:0;right:0;top:30.1em;text-align:center;transition:opacity .25s ease}
.pb-hint small{font-size:1.3em;color:var(--rl-faint);white-space:nowrap}
.pb.is-read .pb-hint{opacity:0}
/* held before it goes out. The button becomes the wait: a bar that
   fills, with the way back in it for as long as it is filling. */
.pb-go{transition:background-color .3s ease, color .3s ease, filter .15s ease, transform .15s ease, opacity .2s ease}
.pb-wait{position:absolute;left:0;right:0;top:24.9em;height:4.4em;border-radius:.4em;background:var(--in-indigo-soft);
  overflow:hidden;display:flex;align-items:center;padding:0 .7em 0 1.5em;opacity:0;transition:opacity .2s ease}
.pb-wait i{position:absolute;left:0;top:0;bottom:0;width:100%;background:#C7C9EA;transform-origin:0 50%;transform:scaleX(0)}
.pb-wait b{position:relative;font-size:1.6em;font-weight:600;color:var(--in-indigo);white-space:nowrap}
.pb-undo{position:relative;margin-left:auto;height:3em;padding:0 1.3em;border-radius:.3em;background:#fff;
  display:flex;align-items:center;box-shadow:0 .1em .3em rgba(40,45,90,.22)}
.pb-undo span{font-size:1.5em;font-weight:600;color:var(--rl-ink);white-space:nowrap}
.pb.is-wait .pb-go{opacity:0}
.pb.is-wait .pb-wait{opacity:1}
.pb.is-wait .pb-wait i{transform:none;transition:transform 2.5s linear .15s}
/* the still is taken part of the way through the wait */
.reel-stage.is-still .pb.is-wait .pb-wait i{transform:scaleX(.42)}

.pb-room{position:absolute;left:33.6em;top:0;width:22em;bottom:0;opacity:0;transition:opacity .3s ease .15s}
.pb-room > .in-lab{position:absolute;left:0;top:2.1em}
.pb-item{position:absolute;left:0;right:0;border-bottom:1px solid #E2E5EC}
.pb-i1{top:5.2em;height:9.3em}
.pb-i2{top:14.5em;height:4.8em}
.pb-i3{top:19.3em;height:4.8em}
/* once it is out there is no way back, and Done stands where Release was */
.pb-done{position:absolute;left:0;right:0;top:24.9em;opacity:0;transition:opacity .3s ease .45s, filter .15s ease}
.pb.is-in .pb-done{opacity:1}
.pb-item > .rl-ic{position:absolute;left:0;top:1.3em;width:2.8em;height:2.8em;color:var(--in-indigo);stroke-width:1.4}
.pb-old > .rl-ic{top:1em}
.pb-it{position:absolute;left:4em;right:0;top:1.15em;opacity:0;transform:translateY(.5em);
  transition:opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1)}
.pb-it b{display:block;font-size:1.5em;font-weight:600;line-height:1.3}
/* its state has a line to itself, clear of the title however that wraps */
.pb-st{display:flex;align-items:center;gap:.6em;margin-top:.8em}
.pb-st .rl-ck{width:1.9em;height:1.9em}
.pb-st small{font-size:1.3em;color:var(--ok);font-weight:600;white-space:nowrap}
.pb-i1 > .rl-ic{opacity:0;transition:opacity .2s ease}
.pb-old > .rl-ic{color:#B9BDCB}
.pb-old .rl-sk{position:absolute;left:4em;margin:0}

/* the page that is published travels from the preview to the list */
.pb-fly{position:absolute;left:2.4em;top:4.6em;width:28.6em;height:23.6em;z-index:6;
  background:#fff repeating-linear-gradient(#fff 0 9%, #E3E1DB 9% 11.2%) 12% 50%/76% 78% no-repeat;
  box-shadow:0 .6em 2em rgba(40,45,90,.28);opacity:0;border-radius:.2em;
  transition:left .7s cubic-bezier(.5,0,.2,1), top .7s cubic-bezier(.5,0,.2,1), width .7s cubic-bezier(.5,0,.2,1),
             height .7s cubic-bezier(.5,0,.2,1), opacity .18s ease}
.pb.is-pub .pb-right{opacity:0}
.pb.is-pub .pb-room{opacity:1}
.pb.is-fly .pb-fly{opacity:1}
.pb.is-land .pb-fly{left:33.9em;top:6.7em;width:2.2em;height:2.6em;opacity:0;
  transition:left .7s cubic-bezier(.5,0,.2,1), top .7s cubic-bezier(.5,0,.2,1), width .7s cubic-bezier(.5,0,.2,1),
             height .7s cubic-bezier(.5,0,.2,1), opacity .2s ease .55s}
.pb.is-in .pb-i1 > .rl-ic{opacity:1}
.pb.is-in .pb-it{opacity:1;transform:none}
/* ============================================================
   12 · Where the requests went
   ============================================================ */
.sy{position:absolute;inset:0;width:100%;height:100%;font-family:inherit}
.sy-main{fill:#DEDCD6}
.sy-off{fill:#BFDCCB}
.sy-node{fill:#8A9098}
.sy-node--end{fill:var(--rl-ink)}
.sy-node--off{fill:var(--ok)}
.sy text{font-size:16.5px;fill:var(--rl-ink);dominant-baseline:central}
.sy .sy-col{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;fill:var(--rl-faint);text-anchor:middle}
.sy .sy-src{font-size:16.5px;fill:var(--rl-soft);dominant-baseline:auto}
.sy .sy-end{font-weight:600}


/* ============================================================
   THE DESIGN SYSTEM
   FOIAXpress, in the colors the system named: Republic Blue,
   Bicentennial Sky, Marshall Green, Revolution Red and Founder's
   Ink. Text is set only on pairs that clear 4.5:1.
   ============================================================ */
.reel{
  --fx-blue:#41477D;
  --fx-blue-mid:#686D8A;
  --fx-blue-soft:#CDCFD9;
  --fx-sky:#B0C6E7;
  --fx-sky-soft:#ECF0F7;
  --fx-green:#65995B;
  --fx-green-ink:#3B6A33;
  --fx-red:#E92942;
  --fx-red-ink:#B3152B;
  --fx-ink:#101114;
  --fx-gray:#7D7D7D;
  --fx-line:#DDDDDD;
  /* what is picked out, wherever something is: a selected row, the
     newest entry in a list */
  --fx-pick:#E2E6F3;
  /* focus: a ring of the blue with the sky round it */
  --fx-ring:0 0 0 .14em var(--fx-blue), 0 0 0 .46em var(--fx-sky);
}
/* a heading on a sheet that is not a screen */
.sy-h{display:block;font-size:2.4em;font-weight:600;letter-spacing:-.012em;line-height:1.15;white-space:nowrap}
/* a small label in capitals */
.sy-cap{display:block;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.15em;
  letter-spacing:.08em;text-transform:uppercase;line-height:1.3;color:var(--rl-faint);white-space:nowrap}

/* the system's button, in its three levels */
.fx-b{height:4em;padding:0 1.7em;border-radius:.3em;display:inline-flex;align-items:center;justify-content:center;gap:.7em;flex:none;
  border:1px solid transparent;transition:background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease, filter .15s ease}
.fx-b span{font-size:1.6em;font-weight:600;white-space:nowrap}
.fx-b .rl-ic{width:1.8em;height:1.8em;stroke-width:1.9}
.fx-b--pri{background:var(--fx-blue);color:#fff}
.fx-b--sec{background:#E8E9EF;color:var(--fx-ink)}
.fx-b--ter{background:none;color:var(--fx-blue);padding:0 .9em}
.fx-b--ter span{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.07em}
.fx-b.is-hover{filter:brightness(1.12)}
.fx-b.is-press{filter:brightness(.9);transform:scale(.97)}
.fx-b.is-off{background:#E6E7EC;color:#9A9EAC}
.fx-b.is-focus{box-shadow:0 0 0 .2em #fff, 0 0 0 .4em var(--fx-blue), 0 0 0 .72em var(--fx-sky)}


/* ============================================================
   S1 · The audit
   ============================================================ */
.au{position:absolute;inset:0;background:#fff}
.au-hd{position:absolute;left:3em;top:2.5em}
.au-count{position:absolute;right:3em;top:1.9em;height:4.4em;display:flex;align-items:center;gap:1em}
/* the count turns over, as the queue's does */
.au-n{position:relative;width:6.6em;height:4.4em;overflow:hidden;flex:none}
.au-n b{position:absolute;left:0;right:0;top:0;height:4.4em;display:flex;align-items:center;justify-content:flex-end;
  transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.au-n b i{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:3.6em;font-weight:500;letter-spacing:-.04em}
.au-n b + b{transform:translateY(100%)}
.au-count.is-one .au-n b{transform:translateY(-100%)}
.au-count.is-one .au-n b + b{transform:none}
.au-of{transition:opacity .3s ease}
.au-of span{font-size:1.5em;color:var(--rl-soft);white-space:nowrap}
.au-of2{position:absolute;left:7.6em;top:0;height:4.4em;display:flex;align-items:center;opacity:0}
.au-of1{width:21.5em}
.au-count.is-one .au-of1{opacity:0}
.au-count.is-one .au-of2{opacity:1;transition-delay:.2s}

.au-wall{position:absolute;left:3em;right:3em;top:8.3em;height:23.4em;
  display:flex;flex-wrap:wrap;align-content:space-between;align-items:center;gap:.5em .86em}
.au-b{height:var(--h);padding:0 var(--p);border-radius:var(--r);display:flex;align-items:center;flex:none;
  transition:opacity .5s ease, filter .5s ease, box-shadow .25s ease,
             transform .64s cubic-bezier(.5,0,.2,1);
  transition-delay:calc(var(--i) * 7ms), calc(var(--i) * 7ms), 0s, 0s}
.au-b span{font-size:var(--s);font-weight:var(--w);font-family:var(--f);white-space:nowrap;line-height:1}
.au-b--solid{background:var(--c);color:#fff;border:1px solid var(--c)}
.au-b--pill{background:var(--c);color:#fff;border:1px solid var(--c);border-radius:1.4em}
.au-b--line{background:#fff;color:var(--c);border:1px solid var(--c)}
.au-b--bevel{background:linear-gradient(#EAF0F4,#A9BAC8);color:#1B2A3A;border:1px solid #8497A8;box-shadow:inset 0 1px 0 #fff}
.au-b--up span{text-transform:uppercase;letter-spacing:.06em}
/* each is looked at in turn */
.au.is-scan .au-b{animation:au-scan .36s ease-out both;animation-delay:calc(var(--i) * 24ms)}
@keyframes au-scan{
  0%{box-shadow:0 0 0 0 transparent}
  35%{box-shadow:0 0 0 .26em var(--frame-accent)}
  100%{box-shadow:0 0 0 .26em transparent}
}
.au-b.is-pick{box-shadow:0 0 0 .2em #fff, 0 0 0 .46em var(--frame-accent);z-index:3;position:relative}
.au.is-picked .au-b:not(.is-pick){filter:grayscale(1);opacity:.22}
.au-b.is-gone{opacity:0;transition:opacity .2s ease, transform .64s cubic-bezier(.5,0,.2,1), box-shadow .2s ease;
  box-shadow:0 0 0 0 transparent}

.au-tray{position:absolute;left:3em;right:3em;top:33.2em;bottom:0;border-top:1px solid var(--fx-line)}
.au-s{position:absolute;top:1.7em;opacity:0;transition:opacity .28s ease, transform .5s cubic-bezier(.2,.7,.2,1)}
.au-s .fx-b{height:4.6em;padding:0 2em}
.au-s .fx-b span{font-size:1.8em}
.au-s .fx-b--ter{padding:0 1em}
.au-s1{left:0}
.au-s2{left:20.4em;transform:translateX(-7em)}
.au-s3{left:34.4em;transform:translateX(-7em)}
.au-s.is-in{opacity:1;transform:none}
.au-s small{display:block;margin-top:.6em;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.15em;
  letter-spacing:.08em;text-transform:uppercase;color:var(--rl-faint);white-space:nowrap;
  opacity:0;transition:opacity .3s ease .25s}
.au-s.is-in small{opacity:1}


/* ============================================================
   S2 · A section of the system
   ============================================================ */
.sh{position:absolute;inset:0;background:#fff}
.sh-hd{position:absolute;left:3em;top:2.5em;display:flex;align-items:flex-start;gap:.7em}
.sh-dot{width:.8em;height:.8em;background:var(--fx-blue);margin-top:.5em;flex:none}
.sh-rules{position:absolute;left:3em;top:8.4em;width:22.4em}
.sh-rule{display:flex;gap:.9em;margin-top:1.7em;opacity:0;transform:translateY(.7em);
  transition:opacity .3s ease, transform .45s cubic-bezier(.2,.7,.2,1)}
.sh-rule.is-in{opacity:1;transform:none}
.sh-rule small{flex:none;width:1.1em;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.4em;
  line-height:1.44;color:var(--fx-blue)}
.sh-rule span{font-size:1.6em;line-height:1.34;color:var(--rl-ink)}
/* the rules between the second and the last are left out */
.sh-more{margin-top:.7em}
.sh-more + .sh-rule{margin-top:.7em}
.sh-more small{color:var(--rl-faint)}

.sh-grid{position:absolute;left:29em;right:3em;top:8.4em}
.sh-heads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:.9em;opacity:0;transition:opacity .3s ease}
.sh.is-grid .sh-heads{opacity:1}
.sh-heads .sy-cap{font-size:1.05em;letter-spacing:.05em}
.sh-row{margin-top:2.5em}
.sh-heads + .sh-row{margin-top:1.9em}
.sh-row > b{display:block;font-size:1.5em;font-weight:600;margin-bottom:.65em;opacity:0;transition:opacity .25s ease}
.sh-row.is-in > b{opacity:1}
.sh-cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:.9em}
.sh-cell{opacity:0;transform:scale(.86);transition:opacity .2s ease, transform .36s cubic-bezier(.3,1.5,.5,1)}
.sh-cell.is-in{opacity:1;transform:none}
.sh-cell .fx-b{width:100%;height:4.6em;padding:0}
.sh-cell .fx-b span{font-size:1.6em}
/* a drawn state does not move: the sheet shows what hover and click look like */
.sh-cell .fx-b.is-hover{filter:none;background:#565D92}
.sh-cell .fx-b--sec.is-hover{background:#D9DBE5}
.sh-cell .fx-b--ter.is-hover{background:var(--fx-sky-soft)}
.sh-cell .fx-b.is-press{filter:none;transform:none;background:#2E3355;box-shadow:inset 0 .2em .4em rgba(0,0,0,.3)}
.sh-cell .fx-b--sec.is-press{background:#C6C9D6;box-shadow:inset 0 .2em .4em rgba(0,0,0,.14)}
.sh-cell .fx-b--ter.is-press{background:#DDE4F1;box-shadow:none}
.sh-cell .fx-b--ter.is-off{background:none;color:#9A9EAC}

/* The marks for the engineers, drawn the way a redline is: the face of
   the label named, and the space on each side of it measured off above
   the button. */
.sh-spec{position:absolute;left:3em;top:31.6em;width:22.4em;height:10.4em;opacity:0;transition:opacity .3s ease}
.sh.is-spec .sh-spec{opacity:1}
.sh-spec .fx-b{position:absolute;left:0;top:5em;width:15.4em;height:5em;padding:0}
.sh-spec .fx-b span{font-size:2em}
.sh-pad{position:absolute;top:-1.5em;height:.9em;width:0;border:1px solid #D4145F;border-bottom:0;
  transition:width .4s cubic-bezier(.3,.7,.2,1) .25s}
.sh-pad--l{left:0}
.sh-pad--r{right:0}
.sh.is-spec .sh-pad{width:4.4em}
/* the measured space itself, shaded inside the button */
.sh-pad::after{content:"";position:absolute;left:-1px;right:-1px;top:1.5em;
  height:5em;background:repeating-linear-gradient(135deg, rgba(255,255,255,.34) 0 .22em, rgba(255,255,255,0) .22em .6em)}
.sh-tag{position:absolute;left:0;top:0;height:2.5em;padding:0 .8em;display:flex;align-items:center;background:#16181C;border-radius:.2em;
  transform:translateY(.6em);opacity:0;transition:opacity .25s ease .55s, transform .4s cubic-bezier(.3,1.4,.5,1) .55s}
.sh.is-spec .sh-tag{opacity:1;transform:none}
.sh-tag small{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.25em;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;white-space:nowrap}
.sh-tag::after{content:"";position:absolute;left:7.3em;top:2.5em;width:1px;height:2.5em;background:#16181C}


/* ============================================================
   THE PRODUCT IN THE SYSTEM
   one header, sky ground, white cards
   ============================================================ */
.fx{position:absolute;inset:0;background:var(--fx-sky-soft)}
.fx-head{position:absolute;left:0;right:0;top:0;height:4.4em;background:#5B5F87;color:#fff;
  display:flex;align-items:center;gap:1.5em;padding:0 2.2em}
.fx-word{display:flex;align-items:baseline;margin-right:.5em}
.fx-word b{font-size:2.1em;font-weight:800;letter-spacing:.01em}
.fx-word i{font-size:2.1em;font-weight:300;letter-spacing:.01em}
.fx-head em{font-size:1.4em;opacity:.9;white-space:nowrap}
.fx-head em.is-on{opacity:1;font-weight:600}
/* the field in the header, at the length it had, with what it says when empty */
.fx-find{margin-left:auto;width:18.4em;height:2.9em;background:#fff;border-radius:.2em;display:flex;align-items:center;
  justify-content:space-between;gap:.6em;padding:0 .9em 0 1em;flex:none}
.fx-find span{font-size:1.25em;color:#676D77;white-space:nowrap}
.fx-find .rl-ic{width:1.5em;height:1.5em;color:#5B5F87;stroke-width:2}
.fx-me{width:2.9em;height:2.9em;border-radius:50%;background:#E3E5EF;color:#33385E;display:flex;align-items:center;justify-content:center;
  flex:none;margin-left:-.6em}
.fx-me small{font-size:1.1em;font-weight:700}
.fx-card{position:absolute;background:#fff;box-shadow:0 .1em .3em rgba(40,45,90,.1), 0 .5em 1.6em rgba(40,45,90,.07)}


/* ============================================================
   S3 · A form, by keyboard
   ============================================================ */
.ky-card{position:absolute;left:3em;top:5.7em;width:35.6em;bottom:1.3em;background:#fff;
  box-shadow:0 .1em .3em rgba(40,45,90,.1), 0 .5em 1.6em rgba(40,45,90,.07)}
.ky-hd{position:absolute;left:4.6em;top:1.6em}
.ky-hd .sy-h{font-size:2.1em}
.ky-f{position:absolute;left:4.6em;right:2.4em;height:6.2em}
.ky-f1{top:5.5em}
.ky-f2{top:11.9em}
.ky-f3{top:18.3em}
.ky-l{display:block;height:2.2em}
.ky-l span{font-size:1.4em;font-weight:600;white-space:nowrap}
.ky-in{position:relative;height:4em;border:1px solid #8D95A1;border-radius:.2em;background:#fff;display:flex;align-items:center;padding:0 1.1em;
  transition:border-color .15s ease, box-shadow .15s ease}
.ky-in span{font-size:1.6em;white-space:nowrap}
.ky-f.is-focus .ky-in{border-color:var(--fx-blue);box-shadow:var(--fx-ring)}
/* the place a control has in the order, shown once focus has reached it */
.ky-n{position:absolute;left:-3.3em;top:3em;width:2.4em;height:2.4em;border-radius:50%;background:var(--fx-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);
  transition:opacity .2s ease, transform .36s cubic-bezier(.3,1.6,.5,1)}
.ky-n small{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.3em;font-weight:500}
.is-seen > .ky-n{opacity:1;transform:none}
.ky-bang{position:absolute;right:.9em;top:50%;width:2.1em;height:2.1em;margin-top:-1.05em;border-radius:50%;background:var(--fx-red-ink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1em;opacity:0;transform:scale(.5);
  transition:opacity .2s ease, transform .36s cubic-bezier(.3,1.6,.5,1)}
.ky-bang{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-weight:500;line-height:1}
.fx.is-bad .ky-f3 .ky-in{border-color:var(--fx-red-ink);box-shadow:0 0 0 .1em var(--fx-red-ink)}
.fx.is-bad .ky-f3 .ky-bang{opacity:1;transform:none}
.ky-msg{position:absolute;left:4.6em;right:2.4em;top:24.9em;opacity:0;transform:translateY(-.4em);
  transition:opacity .25s ease, transform .35s cubic-bezier(.2,.7,.2,1)}
.ky-msg span{font-size:1.4em;line-height:1.3;color:var(--fx-red-ink);font-weight:600;white-space:nowrap}
.fx.is-bad .ky-msg{opacity:1;transform:none}
.ky-foot{position:absolute;right:2.4em;bottom:1.7em;display:flex;align-items:center;gap:1em}
.ky-foot .fx-b{height:3.8em}
.ky-stop{position:relative}
.ky-stop .ky-n{left:-3.6em;top:.7em;z-index:2}
.ky-stop.is-focus .fx-b{box-shadow:0 0 0 .2em #fff, 0 0 0 .4em var(--fx-blue), 0 0 0 .72em var(--fx-sky)}

.ky-side{position:absolute;left:41.4em;right:2.4em;top:6.3em;bottom:1.3em}
.ky-keys{display:flex;gap:1em;margin-top:1em;height:5.4em}
.ky-key{height:5em;min-width:7.4em;padding:0 1.3em;border-radius:.6em;background:#fff;border:1px solid #B9BDCB;
  box-shadow:0 .4em 0 #B9BDCB;display:flex;align-items:center;justify-content:center;
  transition:transform .09s ease, box-shadow .09s ease, background-color .15s ease, border-color .15s ease}
.ky-key span{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.6em;font-weight:500;white-space:nowrap}
.ky-key.is-down{transform:translateY(.3em);box-shadow:0 .1em 0 var(--fx-blue);background:var(--fx-sky-soft);border-color:var(--fx-blue)}
.ky-num{opacity:.4;transition:opacity .2s ease, transform .09s ease, box-shadow .09s ease}
.ky-num.is-live{opacity:1;animation:ky-tap .19s steps(2) infinite}
@keyframes ky-tap{50%{transform:translateY(.3em);box-shadow:0 .1em 0 #B9BDCB}}
.ky-cap2{margin-top:2.6em}
.ky-say{position:relative;margin-top:1em;height:16.6em;background:#16181C;border-radius:.5em;overflow:hidden}
.ky-say span{position:absolute;left:.95em;right:.95em;top:.85em;font-size:1.55em;line-height:1.38;color:#fff;
  opacity:0;transform:translateY(.5em);transition:opacity .16s ease, transform 0s linear .16s}
.ky-say span.is-on{opacity:1;transform:none;transition:opacity .22s ease .1s, transform .34s cubic-bezier(.2,.7,.2,1) .1s}


/* ============================================================
   ACROSS THE SUITE
   before on the left, after on the right, and a line between them
   ============================================================ */
.ba,.ba-old,.ba-new{position:absolute;inset:0}
.ba-new{clip-path:inset(0 0 0 100%);transition:clip-path .72s cubic-bezier(.65,0,.3,1)}
.ba.is-half .ba-new{clip-path:inset(0 0 0 50%)}
.ba.is-new .ba-new{clip-path:inset(0 0 0 0)}
.ba-wipe{position:absolute;top:0;bottom:0;left:100%;width:.3em;margin-left:-.15em;background:var(--frame-accent);z-index:8;
  opacity:0;transition:left .72s cubic-bezier(.65,0,.3,1), opacity .2s ease}
.ba.is-wiping .ba-wipe{opacity:1}
.ba.is-half .ba-wipe{left:50%}
.ba.is-new .ba-wipe{left:0}
/* the two halves are named only while both are showing */
.ba-tag{position:absolute;bottom:1.4em;height:2.7em;padding:0 1em;border-radius:1.35em;display:flex;align-items:center;z-index:9;
  background:#16181C;opacity:0;transition:opacity .22s ease}
.ba-tag small{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.2em;letter-spacing:.09em;text-transform:uppercase;color:#fff}
.ba-tag--b{right:calc(50% + 1.3em)}
.ba-tag--a{left:calc(50% + 1.3em)}
.ba.is-half .ba-tag{opacity:1;transition-delay:.5s}

/* ---------- the product as it was found ----------
   steel blue, bevels, and whatever type the browser had */
.ox{position:absolute;inset:0;background:#ECEFF0;font-family:Arial,Helvetica,sans-serif;color:#111}
.ox-head{position:absolute;left:0;right:0;top:0;height:5.4em;background:#748EA3}
.ox-word{position:absolute;left:1.6em;top:.6em;display:flex;align-items:baseline;color:#1C2440}
.ox-word b{font-size:3.2em;font-weight:700;letter-spacing:.01em;line-height:1.2}
.ox-word i{font-size:3.2em;font-weight:400;letter-spacing:.02em;line-height:1.2}
.ox-env{position:absolute;left:21.4em;top:2.9em}
.ox-env span{font-size:1.25em;color:#fff;white-space:nowrap}
.ox-acct{position:absolute;right:1.4em;top:1.3em;display:flex;gap:.45em}
.ox-acct u,.ox-bev{font-size:1.05em;line-height:1;padding:.42em .7em;border:1px solid #8497A8;border-radius:.2em;white-space:nowrap;
  background:linear-gradient(#EEF3F6,#AFC0CD);color:#16222E;box-shadow:inset 0 1px 0 #fff;flex:none}
.ox-bev--blue{background:linear-gradient(#6FA3CC,#3E78A6);color:#fff;border-color:#2F6289;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.ox-nav{position:absolute;left:0;right:0;top:5.4em;height:2.8em;background:linear-gradient(#41505F,#2B3846);
  display:flex;align-items:center;gap:1.9em;padding:0 1.8em}
.ox-nav em{font-size:1.3em;color:#fff;white-space:nowrap}
.ox-crumb{position:absolute;left:0;right:0;top:8.2em;height:2.3em;background:#F7F7F4;display:flex;align-items:center;justify-content:space-between;padding:0 1.8em}
.ox-crumb span{font-size:1.1em;white-space:nowrap}
.ox-crumb u{color:#1B2F6B;text-decoration:underline}
.ox-crumb b{color:#D00}

.ox-req{position:absolute;left:1em;right:1em;top:10.5em;height:3em;background:#748EA3;color:#fff;display:flex;align-items:center;gap:.7em;padding:0 1em}
.ox-req b{font-size:1.35em;font-weight:400;white-space:nowrap;margin-right:1.9em}
.ox-req span{font-size:1.3em;white-space:nowrap}
.ox-over{font-size:1.4em;font-weight:700;background:#EC0001;color:#fff;padding:.05em .25em;margin-right:1.7em}
.ox-pill{font-size:1.2em;background:#5A6C8E;color:#fff;padding:.3em 1.2em;white-space:nowrap}
.ox-next{margin-left:auto;font-size:1.2em}
.ox-rail{position:absolute;left:1em;top:13.5em;width:19.4em;bottom:0;background:#748EA3;border:1px solid #33414F;border-top:0;overflow:hidden}
.ox-rail span{display:block;height:2.12em;line-height:2.12em;padding:0 .9em;font-size:1.16em;color:#fff;white-space:nowrap}
.ox-rail span.is-on{background:#fff;color:#16222E}
.ox-main{position:absolute;left:21.2em;right:1em;top:14.1em;bottom:0}
.ox-panel{border:1px solid #33506D;background:#fff;margin-bottom:.9em}
.ox-ph{height:2.2em;background:#A7D9F4;display:flex;align-items:center;padding:0 .5em}
.ox-ph span{font-size:1.3em;white-space:nowrap}
.ox-acts{height:2.8em;display:flex;align-items:center;gap:.4em;padding:0 .5em}
/* ten columns on a screen with room for seven: the rest run off the edge */
.ox-t{display:grid;grid-template-columns:6em 5.9em 8em 6.2em 5.6em 5.2em 4.5em 3.3em 5em 12em;align-items:center;height:2em;margin:0 .5em;overflow:hidden}
.ox-t span{font-size:.98em;white-space:nowrap;overflow:hidden;padding:0 .4em}
.ox-th{background:linear-gradient(#6F8CA6,#49657F);color:#fff}
.ox-th span{border-right:1px solid #9FB3C6;line-height:2.04}
.ox-tr{border:1px solid #B6C3CF;border-top:0}
.ox-pager{height:2.2em;display:flex;align-items:center;gap:.3em;margin:0 .5em;padding:0 .4em;background:#DCE3EA;border:1px solid #B6C3CF;border-top:0}
.ox-pager .ox-bev{font-size:.85em;padding:.3em .45em}
.ox-pager span{font-size:1em;white-space:nowrap;margin-left:.6em}
.ox-sel{font-size:.95em;padding:.25em .5em;border:1px solid #6F8496;border-radius:.15em;background:linear-gradient(#EEF3F6,#AFC0CD);white-space:nowrap}
.ox-pager .ox-count{margin-left:auto}
.ox-foot{height:1.7em;display:flex;align-items:center;padding:0 .5em}
.ox-foot span{font-size:.95em;white-space:nowrap}

/* ---------- parts the rebuilt screens share ----------
   The three screens are drawn for this size and not copied down from
   the product, on one scale: 2.1 for what a screen is about, 1.65 for
   a part of it, 1.4 for the lines people read, and 1.2 for what goes
   with them. Chips are one height and rows are 3 high or more. */
/* a status: a dot of color and the word, so it is never color alone */
.fx-tag{display:inline-flex;align-items:center;gap:.55em;height:2.4em;padding:0 1em 0 .8em;border-radius:1.2em;flex:none;
  background:#EEEFF4;color:#33384F}
.fx-tag i{width:.9em;height:.9em;border-radius:50%;flex:none;background:var(--fx-gray)}
.fx-tag b{font-size:1.2em;font-weight:600;white-space:nowrap}
.fx-tag--late{background:#FCE9EC;color:#8C1226}
.fx-tag--late i{background:var(--fx-red)}
.fx-tag--now{background:#E6E8F3;color:#2B2F52}
.fx-tag--now i{background:var(--fx-blue)}
.fx-tag--ok{background:#E5F0E2;color:#2C5226}
.fx-tag--ok i{background:var(--fx-green)}
.fx-tag--no i,.fx-tag--due i{background:none;box-shadow:inset 0 0 0 .16em var(--fx-gray)}
/* a person: who they are, and what they are to the request */
.fx-who{display:inline-flex;align-items:center;gap:.6em;height:2.6em;padding:0 1.1em 0 .3em;border-radius:1.3em;background:#F1F2F7;flex:none}
.fx-who i{width:2.1em;height:2.1em;border-radius:50%;background:var(--fx-blue-soft);color:#2B2F52;
  display:flex;align-items:center;justify-content:center;font-size:.95em;font-weight:700;flex:none}
.fx-who b{font-size:1.25em;font-weight:500;white-space:nowrap}
.fx-who small{font-size:1.15em;color:var(--rl-soft);white-space:nowrap}

/* ============================================================
   S4 · Case management
   ============================================================ */
.cw-hero{left:2.4em;right:2.4em;top:5.6em;height:10.9em}
.cw-title{position:absolute;left:.857em;top:.62em;font-size:2.1em;font-weight:600;letter-spacing:-.012em;line-height:1.2;white-space:nowrap}
.cw-sum{position:absolute;left:1.8em;top:4.3em}
.cw-sum span{font-size:1.35em;color:var(--rl-soft);white-space:nowrap}
.cw-ppl{position:absolute;left:1.8em;top:7em;display:flex;gap:.9em}
.cw-tags{position:absolute;right:1.8em;top:1.5em;display:flex;flex-direction:column;align-items:flex-end;gap:.7em}

/* the steps of the work, each with how far it has got */
.cw-steps{left:2.4em;top:17.5em;width:59.2em;height:21em;overflow:hidden;transition:width .52s cubic-bezier(.5,0,.2,1)}
.cw-step{position:relative;height:3em;display:flex;align-items:center;gap:.9em;padding:0 1.2em 0 1.3em;
  transition:background-color .2s ease, color .2s ease}
.cw-step + .cw-step{box-shadow:inset 0 1px #ECEDF3}
.cw-step b{font-size:1.4em;font-weight:500;white-space:nowrap}
.cw-step > .rl-ic{margin-left:auto;width:1.3em;height:1.3em;color:#9AA0AE;stroke-width:2.2;transition:color .2s ease}
.cw-step > .rl-ck{width:1.8em;height:1.8em}
.cw-step .rl-ck-o{fill:var(--fx-blue)}
/* under way: a ring half filled. To come: a broken ring. */
.cw-mark{width:1.8em;height:1.8em;border-radius:50%;flex:none;
  opacity:0;transform:scale(.5);transition:opacity .2s ease, transform .36s cubic-bezier(.3,1.6,.5,1), border-color .2s ease}
.cw-mark--half{border:.18em solid var(--fx-blue);background:linear-gradient(90deg, var(--fx-blue) 50%, transparent 50%)}
.cw-mark--todo{border:.16em dashed #9AA0AE}
.cw-step.is-done .cw-mark{opacity:1;transform:none}
.cw-step.is-hover{background:#F3F4F8}
.cw-step.is-on{background:var(--fx-blue);color:#fff;box-shadow:none}
.cw-step.is-on + .cw-step{box-shadow:none}
.cw-step.is-on b{font-weight:600}
.cw-step.is-on > .rl-ic{color:#fff}
.cw-step.is-on .cw-mark--half{border-color:#fff;background:linear-gradient(90deg, #fff 50%, transparent 50%)}
.cw.is-open .cw-steps{width:20.4em}

/* the step that was opened */
.cw-panel{left:24em;right:2.4em;top:17.5em;height:21em;opacity:0;transform:translateX(2.4em);
  transition:opacity .25s ease, transform .5s cubic-bezier(.2,.7,.2,1)}
.cw.is-open .cw-panel{opacity:1;transform:none;transition-delay:.2s}
.cw-ph{position:absolute;left:1.8em;right:1.8em;top:1.1em;height:2.8em;display:flex;align-items:center;justify-content:space-between}
.cw-ph b{font-size:1.65em;font-weight:600;white-space:nowrap}
.cw-ph span{font-size:1.2em;color:var(--rl-soft);white-space:nowrap}
.cw-doc{position:absolute;left:1.8em;right:1.8em;top:calc(4.5em + var(--i) * 3.15em);height:3.15em;
  display:flex;align-items:center;gap:.8em;border-top:1px solid #ECEDF3;
  opacity:0;transform:translateY(.6em);transition:opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1)}
.cw.is-open .cw-doc{opacity:1;transform:none;transition-delay:calc(.34s + var(--i) * 70ms)}
.cw-doc .rl-ic{width:1.6em;height:1.6em;color:var(--fx-blue);stroke-width:1.6}
.cw-doc > b{font-size:1.35em;font-weight:500;white-space:nowrap}
.cw-doc .fx-tag{margin-left:auto}


/* ============================================================
   S5 · The document viewer
   ============================================================ */
/* before: pictures without words */
.ov{background:#C3C3C3}
.ov-bar{position:absolute;left:0;right:0;top:0;height:3.4em;background:linear-gradient(#FAFAFA,#DADDE0);border-bottom:1px solid #8E9AA6;
  display:flex;align-items:center;gap:.55em;padding:0 .9em}
.ov-g{position:relative;width:1.9em;height:1.9em;flex:none}
.ov-g::before{content:"";position:absolute;inset:.2em;background:var(--g,#6C7C8C)}
.ov-g1::before{--g:#E0A21A;clip-path:polygon(50% 0,100% 100%,0 100%)}
.ov-g2::before{--g:#7B3F99;border-radius:.2em;box-shadow:inset 0 .5em 0 #C9B1DA}
.ov-g3::before{--g:#33414F;inset:.5em .15em .3em;box-shadow:0 -.4em 0 -.1em #7C8B99}
.ov-g4::before{--g:#D8452F;clip-path:polygon(15% 0,50% 35%,85% 0,100% 15%,65% 50%,100% 85%,85% 100%,50% 65%,15% 100%,0 85%,35% 50%,0 15%)}
.ov-g5::before{--g:#C98BC0;border:.14em solid #7B3F99;inset:.25em}
.ov-g6::before{--g:#F2B544;border-radius:50%;box-shadow:inset 0 0 0 .3em #fff, inset 0 0 0 .45em #B5791A}
.ov-g7::before{--g:#3E93C8;clip-path:polygon(0 50%,100% 0,100% 100%)}
.ov-g8::before{--g:#4E9A53;border-radius:50% 50% 0 0}
.ov-sep{width:1px;height:2.2em;background:#A7B0BA;flex:none;margin:0 .15em}
.ov-bar .ox-sel{font-size:1.05em}
.ov-pager{margin-left:auto;display:flex;align-items:center;gap:.4em}
.ov-pager .ov-g:last-child{transform:scaleX(-1)}
.ov-box{width:3.4em;height:1.9em;background:#fff;border:1px solid #6F8496;border-radius:.2em}
.ov-tree{position:absolute;left:0;top:3.4em;width:21em;bottom:2.2em;background:#fff;border-right:.3em solid #B9C6D2;padding-top:.6em;overflow:hidden}
.ov-n{display:flex;align-items:center;gap:.4em;height:2.05em;padding-left:calc(.5em + var(--d) * 1.35em)}
.ov-n > span{font-family:Tahoma,Geneva,sans-serif;font-size:1.12em;white-space:nowrap}
.ov-x{width:.85em;height:.85em;border:1px solid #7E8B98;background:linear-gradient(#fff,#D9DEE3);flex:none}
.ov-cb{width:1.05em;height:1.05em;border:1px solid #5F6E7C;background:linear-gradient(#E9EDF0,#fff);flex:none}
.ov-ic{width:1.3em;height:1.2em;flex:none;border-radius:.1em}
.ov-ic--a{background:#C9A24B}.ov-ic--b{background:#D9B93A}.ov-ic--c{background:#E28A2B}.ov-ic--d{background:#D8452F}.ov-ic--e{background:#E06A4B}
.ov-n.is-on > span{background:#8FD0F5;outline:1px solid #2F7FB5;padding:0 .2em}
.ov-field{position:absolute;left:21.3em;right:3.5em;top:3.4em;bottom:2.2em;background:#C0C0C0;border-left:1px solid #8E9AA6}
.ov-side{position:absolute;right:0;top:3.4em;width:3.5em;bottom:2.2em;background:#EDEEEF;border-left:1px solid #8E9AA6;
  display:flex;flex-direction:column;align-items:center;gap:.42em;padding-top:.6em}
.ov-side .ov-sep{width:2.2em;height:1px;margin:.1em 0}
.ov-status{position:absolute;left:0;right:0;bottom:0;height:2.2em;background:#EDEEEF;border-top:1px solid #8E9AA6;display:flex;align-items:center;gap:6em;padding:0 .9em}
.ov-status b{font-size:1.05em;color:#D00;font-weight:400}
.ov-status span{font-size:1.05em;white-space:nowrap}
.ov-status span:last-child{margin-left:auto}

/* after: the document, and what is needed to work on it */
.vw-left{position:absolute;left:0;top:4.4em;width:16.4em;bottom:0;background:#fff;border-right:1px solid #D5D8E3;overflow:hidden}
.vw-lh{height:4.2em;display:flex;align-items:center;gap:.7em;padding:0 1.3em}
.vw-lh b{font-size:1.5em;font-weight:600;white-space:nowrap}
.vw-lh span{font-size:1.2em;color:var(--rl-soft)}
.vw-pg{position:relative;height:3em;display:flex;align-items:center;gap:.8em;padding:0 .9em 0 1.3em}
.vw-pg span{font-size:1.3em;white-space:nowrap}
/* the page that is on screen */
.vw-pg::before{content:"";position:absolute;left:0;top:.55em;bottom:.55em;width:.32em;background:var(--fx-blue);
  opacity:0;transition:opacity .25s ease}
.vw-pg.is-cur::before{opacity:1}
.vw-pg.is-cur span{font-weight:600}
.vw-pg em{margin-left:auto;height:1.9em;padding:0 .65em 0 .5em;border-radius:.95em;background:#ECEDF3;display:flex;align-items:center;gap:.35em;flex:none}
.vw-pg em .rl-ic{width:1.1em;height:1.1em;stroke-width:2;color:var(--fx-blue)}
.vw-pg em small{font-size:1.05em;white-space:nowrap}
.vw-pg.is-sel{background:var(--fx-pick)}
/* a checkbox: a square that is empty, or filled and ticked */
.vw-cb{width:1.5em;height:1.5em;border:.13em solid #5F6675;border-radius:.24em;background:#fff;flex:none;
  display:flex;align-items:center;justify-content:center}
.vw-cb svg{width:1.14em;height:1.14em;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.vw-cb.is-on{background:var(--fx-blue);border-color:var(--fx-blue)}
.vw-cb.is-on svg{opacity:1}

.vw-canvas{position:absolute;left:16.4em;right:3.8em;top:4.4em;bottom:0;background:#DFE2E9;overflow:hidden}
/* the document has the middle of the screen, and gives up some of it
   when the history is opened */
.vw-col{position:absolute;left:0;top:0;bottom:0;width:22em;transform:translateX(10.9em);
  transition:transform .56s cubic-bezier(.5,0,.2,1)}
.vw.is-hist .vw-col{transform:translateX(1.1em)}
.vw-scroll{position:absolute;left:0;right:0;top:5.4em;transition:transform 1.5s cubic-bezier(.45,0,.2,1)}
.vw-page{height:28.5em;margin-bottom:1.2em;background:#fff;padding:2.3em 2.4em 0;box-shadow:0 .1em .4em rgba(0,0,0,.16);overflow:hidden}
.vw-page > b{display:block;font-size:1.2em;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding-bottom:.55em;border-bottom:1px solid var(--rl-ink);margin-bottom:1em;white-space:nowrap}
.vw-page > .rl-sk{margin-top:.92em}
.vw-page > b + .rl-sk{margin-top:0}
.vw-page .rl-sk.is-bar{background:#16181C;border-radius:0;height:.9em;margin-top:.78em}
.vw-target{position:relative;height:.62em;margin:.92em 0}
.vw-target .rl-sk{width:78%;margin:0}
/* the redaction is drawn from left to right, under the pointer */
.vw-red{position:absolute;left:-.3em;top:-.5em;height:1.62em;width:0;background:#16181C;overflow:hidden;
  transition:width .64s cubic-bezier(.4,.1,.2,1)}
.vw-red.is-on{width:calc(78% + .6em)}
.vw-red small{position:absolute;left:.5em;top:0;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1em;line-height:1.62;color:#fff;white-space:nowrap}

/* over the document, as wide as the page: the way back and the way
   forward again, and the count */
.vw-tools{position:absolute;left:0;right:0;top:1em;height:3.4em;padding:0 1em 0 .4em;
  display:flex;align-items:center;gap:.1em;background:#fff;border-radius:.5em;white-space:nowrap;
  box-shadow:0 .1em .3em rgba(40,45,90,.14), 0 .5em 1.4em rgba(40,45,90,.14)}
.vw-tb{height:2.6em;padding:0 .6em 0 .45em;border-radius:.3em;display:flex;align-items:center;gap:.4em;color:#9FA4B2;
  transition:color .25s ease}
.vw-tb .rl-ic{width:1.5em;height:1.5em;stroke-width:1.9}
.vw-tb span{font-size:1.15em;font-weight:600}
/* there is something to undo */
.vw-tb.is-live{color:var(--fx-ink);animation:vw-live .9s ease-out 1}
@keyframes vw-live{0%{background-color:var(--fx-sky)}100%{background-color:rgba(176,198,231,0)}}
.vw-count{display:flex;align-items:center;gap:.45em;margin-left:auto}
/* the count turns over when a redaction is added */
.vw-n{position:relative;display:block;width:2.3em;height:1.7em;overflow:hidden}
.vw-n b{display:block;height:1.36em;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.25em;font-weight:500;line-height:1.36;
  transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.vw-n.is-up b{transform:translateY(-100%)}
.vw-count u{font-size:1.1em;line-height:1.5;color:var(--rl-soft);position:relative;top:.08em}
.vw-pn{position:absolute;left:50%;bottom:1.2em;transform:translateX(-50%);height:2.8em;padding:0 1.2em;display:flex;align-items:center;
  background:#fff;border-radius:1.4em;box-shadow:0 .1em .3em rgba(40,45,90,.14), 0 .5em 1.4em rgba(40,45,90,.14)}
.vw-pn span{font-size:1.2em;color:var(--rl-soft);white-space:nowrap}
.vw-pn b{color:var(--fx-ink);font-weight:600}

/* the history: closed until it is wanted */
.vw-hist{position:absolute;right:1em;top:1em;bottom:1em;width:19em;background:#fff;border-radius:.5em;overflow:hidden;
  box-shadow:0 .1em .3em rgba(40,45,90,.14), 0 .6em 1.8em rgba(40,45,90,.16);
  transform:translateX(calc(100% + 1.6em));transition:transform .56s cubic-bezier(.5,0,.2,1)}
.vw.is-hist .vw-hist{transform:none}
.vw-hh{height:3.9em;display:flex;align-items:center;justify-content:space-between;padding:0 1em 0 1.2em;border-bottom:1px solid #E6E7EE}
.vw-hh b{font-size:1.5em;font-weight:600;white-space:nowrap}
.vw-hh .rl-ic{width:1.5em;height:1.5em;color:var(--rl-soft);stroke-width:2}
.vw-e{position:relative;height:4.75em;border-bottom:1px solid #ECEDF3;padding:.85em 1em 0 3.4em;
  opacity:0;transform:translateY(.6em);
  transition:opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1), background-color .2s ease}
.vw.is-hist .vw-e{opacity:1;transform:none;transition-delay:calc(.3s + var(--i) * 60ms), calc(.3s + var(--i) * 60ms), 0s}
.vw-e > .rl-ic{position:absolute;left:1.1em;top:1.05em;width:1.6em;height:1.6em;color:var(--fx-blue);stroke-width:1.7}
.vw-e > b{display:block;font-size:1.25em;font-weight:600;line-height:1.3;white-space:nowrap}
.vw-e > span{display:block;font-size:1.1em;color:var(--rl-soft);white-space:nowrap;margin-top:.2em}
/* whose change it was */
.vw-av{position:absolute;right:1em;top:50%;width:2.2em;height:2.2em;margin-top:-1.1em;border-radius:50%;background:var(--fx-blue-soft);color:#2B2F52;
  display:flex;align-items:center;justify-content:center;font-size:.95em;font-weight:700;transition:opacity .15s ease}
.vw-e--new .vw-av{background:#fff}
.vw-e.is-hover .vw-av{opacity:0}
/* the newest entry is picked out as a selected page is */
.vw-e--new{background:var(--fx-pick)}
.vw-e.is-hover{background:#F3F4F8}
/* what the history is for: any earlier state can be had back */
.vw-rb{position:absolute;right:.8em;top:50%;height:2.4em;margin-top:-1.2em;padding:0 .8em;display:flex;align-items:center;
  border-radius:.3em;background:var(--fx-blue);color:#fff;
  opacity:0;transform:translateX(.4em);transition:opacity .2s ease, transform .3s cubic-bezier(.2,.7,.2,1)}
.vw-rb small{font-size:1.1em;font-weight:600;white-space:nowrap}
.vw-e.is-hover .vw-rb{opacity:1;transform:none}

.vw-rail{position:absolute;right:0;top:4.4em;width:3.8em;bottom:0;background:#fff;border-left:1px solid #D5D8E3;
  display:flex;flex-direction:column;align-items:center;gap:.45em;padding:1em 0}
.vw-rail i{width:2.7em;height:2.7em;border-radius:.35em;display:flex;align-items:center;justify-content:center;color:var(--rl-soft);
  transition:background-color .2s ease, color .2s ease}
.vw-rail .rl-ic{width:1.6em;height:1.6em;stroke-width:1.8}
.vw-rail i:first-child .rl-ic{transform:rotate(-135deg)}
.vw-rail i.is-on{background:var(--fx-blue);color:#fff}
.vw-hbtn{margin-top:auto}
.vw-hbtn.is-hover{background:#ECEDF3;color:var(--fx-ink)}
.vw.is-hist .vw-hbtn{background:var(--fx-pick);color:var(--fx-blue)}


/* ============================================================
   S6 · Search
   ============================================================ */
/* before: the form */
.os-frame{position:absolute;left:1em;right:1em;top:11.1em;bottom:0;background:#fff;border:1px solid #5E7790;border-bottom:0;overflow:hidden}
.os-top{height:2.3em;background:#748EA3;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 .8em}
.os-top span{font-size:1.25em;white-space:nowrap}
.os-band{height:2.2em;background:#A7D9F4;border-top:1px solid #33506D;border-bottom:1px solid #33506D;display:flex;align-items:center;justify-content:space-between;padding:0 .6em;margin:0 .3em}
.os-band span{font-size:1.25em;white-space:nowrap}
.os-opt{display:flex;align-items:center;gap:.5em}
.os-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:1.2em;row-gap:.5em;padding:.6em .9em;margin:0 .3em;border-left:1px solid #33506D;border-right:1px solid #33506D}
.os-f{display:flex;align-items:center;gap:.4em;min-width:0;height:2em}
.os-f > span{flex:none;width:10.4em;text-align:right;font-size:1.12em;white-space:nowrap;padding-right:.3em}
.os-in{flex:1 1 0;min-width:0;height:1.75em;border:1px solid #6F8496;background:#fff;font-size:1.05em;line-height:1.7;padding:0 .4em;white-space:nowrap;overflow:hidden}
.os-in--sel{background:linear-gradient(#EEF3F6,#AFC0CD);border-radius:.15em}
.os-in--short{flex:0 0 9em}
.os-in--area{height:auto}
.os-opt .os-in{flex:none;width:12em;font-size:.84em}
.os-opt{font-size:1.25em}
.os-mini{font-size:.82em;padding:.3em .55em}
.os-cb{display:flex;align-items:center;gap:.35em;flex:none}
.os-cb i{width:1.05em;height:1.05em;border:1px solid #5F6E7C;background:linear-gradient(#E9EDF0,#fff);flex:none}
.os-cb span{font-size:1.08em;white-space:nowrap}
.os-rad i{border-radius:50%}
.os-rad.is-on i{box-shadow:inset 0 0 0 .22em #fff, inset 0 0 0 .6em #33414F}
.os-cbs{display:flex;flex-direction:column;gap:.3em;padding-left:11.9em}
.os-grid > .os-f:nth-child(7){height:4.1em}
.os-in--area{align-self:stretch}

/* after: what the person is working on, already listed; the searches
   people ran most often, one click away; and the field still there */
.ss-hd{position:absolute;left:2.4em;top:5.8em}
.ss-hd .sy-h{font-size:2.1em}
.ss-new{position:absolute;right:2.4em;top:5.5em}
.ss-new .fx-b{height:3.2em;padding:0 1.3em 0 1em;gap:.5em}
.ss-new .fx-b span{font-size:1.3em}
.ss-new .rl-ic{width:1.5em;height:1.5em}
.ss-field{position:absolute;left:2.4em;right:2.4em;top:9.7em;height:4.2em;background:#fff;border:1px solid #8D95A1;border-radius:.3em;
  display:flex;align-items:center;gap:.9em;padding:0 .6em 0 1.3em}
.ss-field > .rl-ic{width:1.9em;height:1.9em;color:var(--rl-soft);stroke-width:1.9}
.ss-ph{font-size:1.4em;color:var(--rl-faint);white-space:nowrap}
/* the long way round is still there, for a search that needs it */
.ss-more{margin-left:auto;height:3em;padding:0 1em 0 .8em;border-radius:.25em;background:#ECEDF3;color:var(--fx-ink);
  display:flex;align-items:center;gap:.5em;flex:none}
.ss-more .rl-ic{width:1.5em;height:1.5em;stroke-width:1.9}
.ss-more small{font-size:1.25em;font-weight:600;white-space:nowrap}
/* the ten: each says how many requests it holds, so the shape of the
   answer is there before anything is asked */
.ss-views{position:absolute;left:2.4em;right:2.4em;top:15.1em}
.ss-row{display:flex;gap:.55em}
.ss-row + .ss-row{margin-top:.7em}
.ss-v{flex:1 1 auto;height:2.9em;padding:0 .45em 0 .85em;border-radius:1.45em;background:#fff;color:var(--fx-ink);
  box-shadow:inset 0 0 0 1px #B9BECC;display:flex;align-items:center;justify-content:space-between;gap:.45em;
  transition:background-color .2s ease, color .2s ease, box-shadow .2s ease}
.ss-v span{font-size:1.12em;font-weight:500;white-space:nowrap}
.ss-v small{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.05em;font-weight:500;line-height:1;
  min-width:1.9em;padding:.42em .4em;border-radius:1em;text-align:center;background:#ECEDF3;color:#33385E;
  transition:background-color .2s ease, color .2s ease}
.ss-v.is-hover{box-shadow:inset 0 0 0 .14em var(--fx-blue)}
.ss-v.is-on{background:var(--fx-blue);color:#fff;box-shadow:none}
.ss-v.is-on small{background:rgba(255,255,255,.2);color:#fff}
.ss-lab{position:absolute;left:2.4em;top:22.9em;height:2em}
.ss-lab b{position:absolute;left:0;top:0;font-size:1.45em;font-weight:600;white-space:nowrap;transition:opacity .22s ease}
.ss-lab small{display:inline-block;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:.84em;font-weight:500;
  margin-left:.45em;padding:0 .6em;border-radius:1em;background:var(--fx-blue-soft)}
.ss-late{opacity:0}
.ss.is-due .ss-all{opacity:0}
.ss.is-due .ss-late{opacity:1;transition-delay:.12s}
.ss-list{position:absolute;left:2.4em;right:2.4em;top:25.7em;transition:opacity .22s ease, transform .4s cubic-bezier(.2,.7,.2,1)}
.ss-list2{opacity:0;transform:translateY(.8em)}
.ss.is-due .ss-list1{opacity:0}
.ss.is-due .ss-list2{opacity:1;transform:none;transition-delay:.14s}
/* one request to a row: its number, what it is, where it stands, how long it has */
.ss-card{position:relative;height:4.6em;margin-bottom:.7em;display:flex;align-items:center;gap:.8em;padding:0 1.3em 0 1.5em}
.ss-card > div{margin-right:auto;min-width:0}
.ss-card > div small{display:block;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.1em;line-height:1.3;color:var(--rl-soft);white-space:nowrap}
.ss-card > div b{display:block;font-size:1.4em;font-weight:600;line-height:1.3;white-space:nowrap}


/* ============================================================
   S7 · The design process
   ============================================================ */
.pr{position:absolute;inset:0;background:#fff}
.pr-st{position:absolute;width:18.8em;height:11.6em;border:1px solid #D5D8E3;border-radius:.6em;background:#fff;
  transition:border-color .3s ease, box-shadow .3s ease, opacity .3s ease, transform .3s cubic-bezier(.3,1.3,.5,1)}
.pr-c0{left:2.3em}.pr-c1{left:22.6em}.pr-c2{left:42.9em}
.pr-r0{top:2.5em}.pr-r1{top:16.2em}.pr-r2{top:29.9em}
.pr-nm{position:absolute;left:1.3em;top:1em;display:flex;align-items:baseline;gap:.7em}
.pr-nm small{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.2em;color:var(--rl-faint)}
.pr-nm b{font-size:1.9em;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.pr-ppl{position:absolute;left:1.3em;top:4.5em;display:flex;align-items:center;gap:.5em}
/* who: filled for the owner, outlined for the rest. The letters say which. */
.pr-who{height:2.5em;min-width:2.5em;padding:0 .35em;border-radius:1.25em;display:flex;align-items:center;justify-content:center;flex:none;
  border:.14em solid var(--w,#686D8A);color:var(--w,#686D8A);background:#fff}
.pr-who small{font-size:1.05em;font-weight:700;white-space:nowrap}
.pr-who--pm{--w:#565B7C}
.pr-who--ux{--w:#3B6A33}
.pr-who--dev{--w:#A61B30}
.pr-who--c{--w:#16181C;padding:0 .8em}
.pr-who.is-owner{background:var(--w,#686D8A);color:#fff}
.pr-doc{position:absolute;left:1.3em;right:1em;top:8.1em;display:flex;align-items:center;gap:.6em}
.pr-doc .rl-ic{width:1.7em;height:1.7em;color:var(--rl-soft);stroke-width:1.6}
.pr-doc span{font-size:1.22em;font-weight:500;white-space:nowrap}
/* the way on to the next stage */
.pr-go{position:absolute;width:1.5em;height:1.5em;color:#B9BDCB;transition:color .3s ease}
.pr-go .rl-ic{width:100%;height:100%;stroke-width:2.2}
.pr-st[data-go="e"] .pr-go{right:-1.7em;top:5.05em}
.pr-st[data-go="w"] .pr-go{left:-1.7em;top:5.05em;transform:rotate(180deg)}
.pr-st[data-go="s"] .pr-go{left:8.65em;bottom:-1.95em;transform:rotate(90deg)}
.pr-st[data-go="n"] .pr-go{left:8.65em;top:-1.95em;transform:rotate(-90deg)}

.pr.is-run .pr-st{opacity:.4}
.pr.is-run .pr-st.is-lit{opacity:1}
.pr-st.is-now{border-color:var(--fx-ink);box-shadow:inset 0 0 0 .1em var(--fx-ink), 0 .5em 1.6em rgba(20,25,50,.16);transform:translateY(-.25em)}
.pr-st.is-lit .pr-go{color:var(--fx-ink)}
/* at the end the two stages customers take part in are marked */
.pr-who--c{transition:background-color .35s ease, color .35s ease, box-shadow .35s ease}
.pr.is-done .pr-who--c{background:#16181C;color:#fff;box-shadow:0 0 0 .3em rgba(22,24,28,.14)}
.pr.is-done .pr-st--c{border-color:#16181C;box-shadow:inset 0 0 0 .1em #16181C}

.pr-mid{position:absolute;left:22.6em;top:16.2em;width:18.8em;height:11.6em;padding:.2em 0 0 1.4em}
.pr-ph{display:block;font-size:1.42em;font-weight:500;line-height:1.3;color:var(--rl-soft);transition:color .25s ease, font-weight .25s ease}
.pr-mid .sy-cap{margin-bottom:.35em}
.pr.is-run .pr-ph{color:#A6ABB6}
.pr.is-run .pr-ph.is-now{color:var(--fx-ink);font-weight:700}
.pr-key{position:absolute;left:1.4em;bottom:0;display:flex;align-items:center;gap:.45em}
.pr-key .pr-who{height:1.2em;min-width:1.2em;padding:0;border-width:.13em}
.pr-key span{font-size:1.1em;color:var(--rl-soft);white-space:nowrap;margin-right:.7em}


/* ============================================================
   S8 · The UX roadmap
   ============================================================ */
.rm2{position:absolute;inset:0;background:#fff}
.rm2-hd{position:absolute;left:3em;top:2.4em}
.rm2-cols{position:absolute;left:13.4em;right:3em;top:7.6em;display:grid;grid-template-columns:1fr 1fr;column-gap:3.2em}
.rm2-row{position:absolute;left:3em;right:3em;height:9.9em;display:grid;grid-template-columns:10.4em 1fr 1fr;column-gap:3.2em;
  border-top:1px solid #D5D8E3}
.rm2-row--fx{top:9.8em}
.rm2-row--oig{top:20.2em}
.rm2-row--wfm{top:30.6em}
.rm2-row{column-gap:0}
.rm2-line{padding-top:1.1em;position:relative}
.rm2-line::before{content:"";position:absolute;left:0;top:1.35em;width:.5em;height:1.5em;background:var(--ln)}
.rm2-line b{font-size:1.55em;font-weight:600;white-space:nowrap;margin-left:.85em}
.rm2-row--fx{--ln:#7FA3D8}
.rm2-row--oig{--ln:#9DA1AE}
.rm2-row--wfm{--ln:#7FA672}
.rm2-cell{display:flex;flex-wrap:wrap;align-content:flex-start;gap:.6em;padding:1em 3.2em 0 0}
.rm2-cell:last-child{padding-right:0}
.rm2-i{height:2.7em;padding:0 .9em;border-radius:.3em;border:1px solid #C3C7D3;border-left:.34em solid var(--ln);background:#fff;display:flex;align-items:center;flex:none;
  transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease, color .3s ease}
.rm2-i span{font-size:1.22em;white-space:nowrap}
/* the work that appears in more than one line */
.rm2-i--a.is-on{background:var(--fx-blue);border-color:var(--fx-blue);color:#fff;box-shadow:0 .3em 1em rgba(65,71,112,.3)}
.rm2-i--b.is-on{background:#16181C;border-color:#16181C;color:#fff;box-shadow:0 .3em 1em rgba(22,24,28,.26)}
.rm2-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rm2-l{fill:none;stroke-width:2;stroke-linecap:round;opacity:0;transition:stroke-dashoffset .6s cubic-bezier(.5,0,.2,1), opacity .1s linear}
.rm2-l.is-on{opacity:1}
.rm2-l--a{stroke:var(--fx-blue)}
.rm2-l--b{stroke:#16181C}


/* ============================================================
   S9 · The interruption, as a pattern
   One section of the system, for something that is not a component:
   its rules, and the two places it is used, drawn small in their own
   products' colors. Each rule marks the parts of both that keep it.
   ============================================================ */
.pa{position:absolute;inset:0;background:#fff}
.pa-hd{position:absolute;left:3em;top:2.5em;display:flex;align-items:flex-start;gap:.7em}
.pa-use{position:absolute;right:3em;top:2.6em;display:flex;align-items:center;gap:.6em}
.pa-use .sy-cap{margin-right:.4em}
.pa-chip{height:2.7em;padding:0 1em;border-radius:1.35em;border:1px solid #C9CDD8;display:flex;align-items:center}
.pa-chip b{font-size:1.3em;font-weight:600;white-space:nowrap}

.pa-rules{position:absolute;left:3em;right:3em;top:7.2em}
.pa-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:3em;margin-top:.4em}
.pa-rule{display:flex;gap:.9em;margin-top:.9em;opacity:0;transform:translateY(.7em);
  transition:opacity .3s ease, transform .45s cubic-bezier(.2,.7,.2,1)}
.pa-rule.is-in{opacity:1;transform:none}
.pa-rule small{flex:none;width:1.1em;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.4em;
  line-height:1.4;color:var(--fx-blue);transition:color .2s ease}
.pa-rule span{font-size:1.45em;line-height:1.34;color:var(--rl-ink)}
/* while one rule is read, the others stand back */
.pa.is-reading .pa-rule.is-in{opacity:.38}
.pa.is-reading .pa-rule.is-now{opacity:1}
.pa-rule.is-now small{color:var(--frame-accent);font-weight:500}

.pa-spec{position:absolute;top:19.6em;bottom:2em;width:28.4em;opacity:0;transform:translateY(1em);
  transition:opacity .35s ease, transform .5s cubic-bezier(.2,.7,.2,1)}
.pa-spec--pub{left:3em}
.pa-spec--off{right:3em;transition-delay:.14s}
.pa.is-specs .pa-spec{opacity:1;transform:none}
.pa-frame{position:absolute;left:0;right:0;top:1.9em;bottom:0;overflow:hidden;background:#fff}
.pa-band{position:absolute;left:0;right:0;top:0;height:2em;display:flex;align-items:center;gap:.8em;padding:0 1.2em}

/* a line of words is a bar; a marked word has the mark drawn round it */
.pa-ln{display:flex;align-items:center;gap:.45em;height:1.4em}
.pa-w{position:relative;display:block;height:.62em;border-radius:.31em;background:#2A3242;flex:none}
.pa-ln--s .pa-w{height:.5em;background:#C9CDD6}
.pa-hl{background:none}
.pa-hl u{position:absolute;left:-.3em;right:-.3em;top:-.4em;bottom:-.4em;border-radius:.22em;background:var(--hl);
  transform-origin:0 50%;transform:scaleX(0);transition:transform .5s cubic-bezier(.4,0,.2,1)}
.pa-hl::after{content:"";position:absolute;inset:0;border-radius:.31em;background:#2A3242}
.pa.is-r2 .pa-hl u{transform:none}

/* what each version asks */
.pa-ask{position:absolute;left:1.3em;top:2.75em;padding:0 .2em;margin-left:-.2em;border-radius:.2em;transition:box-shadow .25s ease}
.pa-ask b{display:block;font-size:1.05em;font-weight:700;line-height:1.35;white-space:nowrap}
.pa-off .pa-ask{top:2.65em}
.pa-off .pa-ask b{font-size:1.4em;font-weight:600;letter-spacing:-.01em}

/* the public's: navy, square, the two ways on flush along the foot */
.pa-pub{border:1px solid #CDD2DB;border-top:0}
.pa-pub .pa-band{background:var(--pt-navy)}
.pa-band b{font-size:1.05em;font-weight:800;letter-spacing:.04em;color:#fff}
.pa-pub .pa-band i{width:7em;height:.5em;border-radius:.25em;background:rgba(255,255,255,.5)}
.pa-q{position:absolute;left:1.3em;right:1.3em;top:5em;height:1.8em;display:flex;align-items:center;gap:.7em}
.pa-q .rl-ic{width:1.4em;height:1.4em;color:var(--rl-faint);stroke-width:1.9}
/* where the score would be: there is none for the public */
.pa-none{margin-left:auto;height:1.9em;padding:0 .7em;border-radius:.3em;border:1px dashed #8D93A0;display:flex;align-items:center;
  opacity:0;transition:opacity .3s ease}
.pa-none b{font-size:1.05em;font-weight:600;color:var(--rl-soft);white-space:nowrap}
.pa.is-r4 .pa-none{opacity:1}
.pa-list{position:absolute;left:1.1em;right:1.1em;top:7.6em}
.pa-m{display:flex;align-items:center;gap:.8em;height:2.35em;padding:0 .8em;border:.12em solid transparent}
.pa-m + .pa-m{margin-top:.25em}
.pa-m.is-sel{background:#F3F4F8;border-color:var(--pt-navy)}
.pa-m .rl-ic{width:1.6em;height:1.6em;color:var(--pt-navy);stroke-width:1.4}
.pa-m > div{display:flex;flex-direction:column;justify-content:center}
.pa-m .pa-ln{height:1.05em}
.pa-foot{position:absolute;left:0;right:0;bottom:0;height:3.6em;display:flex}
.pa-pb{position:relative;display:flex;align-items:center;padding:0 1.2em;transition:box-shadow .25s ease}
.pa-pb b{font-size:1.15em;font-weight:700;white-space:nowrap}
.pa-pb--gray{flex:0 0 8.6em;background:var(--pt-gray);color:var(--rl-ink)}
.pa-pb--blue{flex:1 1 auto;background:var(--pt-blue);color:#fff}
.pa-pb .rl-ic{position:absolute;right:1em;top:50%;width:1.5em;height:1.5em;margin-top:-.75em;stroke-width:1.9}

/* the officers': white, rounded, one indigo for what can be acted on */
.pa-off{border:1px solid #CBCFDC;border-radius:.5em}
.pa-band--in{background:#EEF0F5;border-bottom:1px solid #D5D8E3}
.pa-band--in i{width:8em;height:.55em;border-radius:.25em;background:#2A3242;opacity:.75}
.pa-band--in u{margin-left:auto;width:2.2em;height:1.2em;border-radius:.6em;background:var(--in-indigo-soft)}
.pa-score{position:absolute;right:1.3em;top:2.5em;height:2.3em;padding:0 .8em;border-radius:.3em;display:flex;align-items:center;gap:.35em;
  background:var(--ok-soft);color:var(--ok);transition:box-shadow .25s ease}
.pa-score b{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.3em;font-weight:500}
.pa-score span{font-size:1.1em;font-weight:600;white-space:nowrap}
.pa-two{position:absolute;left:1.3em;right:1.3em;top:5.7em;height:9.6em;display:grid;grid-template-columns:1fr 1fr;column-gap:1em}
.pa-req{border:1px solid #CFD3DF;border-radius:.4em;padding:.9em 1em 0;overflow:hidden}
.pa-req small{display:block;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:.95em;letter-spacing:.08em;
  text-transform:uppercase;line-height:1.3;color:var(--rl-faint);white-space:nowrap}
.pa-id{display:block;width:6.4em;height:.55em;border-radius:.28em;background:#9AA0AE;margin:.7em 0 .7em}
.pa-req .pa-ln{height:1.65em}
.pa-foot2{position:absolute;left:0;right:0;bottom:0;height:4.4em;border-top:1px solid #E2E5EC;display:flex;align-items:center;
  justify-content:flex-end;gap:.8em;padding:0 1.3em}
.pa-foot2 .in-b{height:2.7em;padding:0 1.3em}
.pa-foot2 .in-b span{font-size:1.2em}

/* the parts of both that keep the rule being read */
.pa.is-now1 .pa-ask,.pa.is-now4 .pa-score{box-shadow:0 0 0 .18em #fff, 0 0 0 .4em var(--frame-accent)}
.pa.is-now3 .pa-way{box-shadow:inset 0 0 0 .22em var(--frame-accent)}
.pa.is-now3 .in-b.pa-way{box-shadow:0 0 0 .18em #fff, 0 0 0 .4em var(--frame-accent)}
.pa.is-now4 .pa-none{box-shadow:0 0 0 .18em #fff, 0 0 0 .4em var(--frame-accent)}


/* ============================================================
   S10 · Features off the system, tagged
   The product under a tagging tool. What does not follow the system
   is outlined and numbered in the accent; the list beside it is the
   tool's, in plain greys.
   ============================================================ */
.tg{position:absolute;inset:0}
.tg-tool{position:absolute;left:0;right:0;top:0;height:3em;z-index:3;display:flex;align-items:center;gap:.8em;padding:0 1.6em;
  background:#1E2130;color:#fff}
.tg-tool .rl-ic{width:1.5em;height:1.5em;stroke-width:1.9}
.tg-tool b{font-size:1.3em;font-weight:600;white-space:nowrap}
.tg-tool span{font-size:1.15em;opacity:.72;white-space:nowrap;margin-left:.4em}
.tg-app{position:absolute;left:0;right:0;top:3em;bottom:0;overflow:hidden}
.tg-card{left:2.4em;top:6em;width:33.4em;bottom:1.6em}
.tg-top{position:absolute;left:1.8em;right:1.8em;top:1.5em;display:flex;align-items:flex-start;justify-content:space-between;gap:1em}
.tg-top small{display:block;font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.1em;line-height:1.3;color:var(--rl-soft);white-space:nowrap}
.tg-top b{display:block;font-size:1.65em;font-weight:600;letter-spacing:-.01em;line-height:1.3;white-space:nowrap}
.tg-f{position:absolute;left:1.8em;right:1.8em}
.tg-f:nth-of-type(2){top:6.6em}
.tg-f:nth-of-type(3){top:12.3em}
.tg-f > span{display:block;font-size:1.2em;font-weight:600;color:var(--rl-soft);margin-bottom:.55em;white-space:nowrap}
.tg-in{height:3.2em;border:1px solid #8D95A1;border-radius:.3em;background:#fff;display:flex;align-items:center;padding:0 1em}
.tg-in span{font-size:1.35em;white-space:nowrap}
/* the parts the system never reached, each in the style it was found in */
.tg-old{position:relative;width:16em;height:3em;display:flex;align-items:center;padding:0 .6em;
  border:2px inset #A9B4BF;background:#fff;font-family:Arial,Helvetica,sans-serif;color:#111}
.tg-old span{font-size:1.25em;white-space:nowrap}
.tg-old u{margin-left:auto;width:2.1em;height:1.9em;border:1px solid #8497A8;border-radius:.15em;background:linear-gradient(#EEF3F6,#AFC0CD);
  box-shadow:inset 0 1px 0 #fff}
.tg-acts{position:absolute;left:1.8em;top:18.6em;display:flex;align-items:center;gap:.8em}
.tg-bev{position:relative;height:3.3em;padding:0 1.1em;display:flex;align-items:center;border:1px solid #8497A8;border-radius:.2em;
  background:linear-gradient(#EEF3F6,#AFC0CD);box-shadow:inset 0 1px 0 #fff;font-family:Arial,Helvetica,sans-serif;color:#16222E}
.tg-bev span{font-size:1.3em;white-space:nowrap}
.tg-print{position:absolute;left:1.8em;top:24.4em;padding:.1em .2em;font-family:'Times New Roman',Times,serif;color:#551A8B}
.tg-print span{font-size:1.45em;text-decoration:underline;white-space:nowrap}
/* pointed at, and then tagged: outlined and numbered */
.tg-pick{transition:outline-color .2s ease}
.tg-pick.is-aim{outline:.18em dashed var(--frame-accent);outline-offset:.3em}
.tg-pick.is-tagged{outline:.18em solid var(--frame-accent);outline-offset:.3em}
.tg-pick::after{content:attr(data-n);position:absolute;right:-1.4em;top:-1.4em;width:2.1em;height:2.1em;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--frame-accent);color:#fff;
  font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.05em;font-weight:500;line-height:1;
  opacity:0;transform:scale(.4);transition:opacity .2s ease, transform .35s cubic-bezier(.3,1.6,.5,1)}
.tg-pick.is-tagged::after{opacity:1;transform:none}

/* the tool's list, docked over the right of the page */
.tg-side{position:absolute;right:0;top:3em;bottom:0;width:25.6em;z-index:2;background:#fff;border-left:1px solid #D5D8E3;
  box-shadow:-.4em 0 1.6em rgba(20,22,45,.12)}
.tg-shd{position:absolute;left:1.8em;right:1.8em;top:1.6em;display:flex;align-items:center;justify-content:space-between}
.tg-shd > b{font-size:1.6em;font-weight:600;white-space:nowrap}
.tg-ct{min-width:2.6em;height:2.2em;padding:0 .7em;border-radius:1.1em;background:#F1F2F7;display:flex;align-items:center;justify-content:center}
.tg-ct b{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:1.25em;font-weight:500}
.tg-ct.is-bump{animation:tg-bump .35s cubic-bezier(.3,1.6,.5,1) 1}
@keyframes tg-bump{0%{transform:scale(1.18)}100%{transform:none}}
.tg-cap{position:absolute;left:1.8em;right:1.8em;top:5.4em;display:flex;justify-content:space-between}
.tg-cap .sy-cap{font-size:1em}
.tg-rows{position:absolute;left:1.8em;right:1.8em;top:7.4em;height:23em}
.tg-row{position:absolute;left:0;right:0;top:0;height:4.6em;border-bottom:1px solid #ECEDF3;
  transform:translateY(calc(var(--k) * 4.6em)) translateX(.8em);opacity:0;
  transition:opacity .3s ease, transform .6s cubic-bezier(.4,0,.2,1)}
.tg-row.is-in{opacity:1;transform:translateY(calc(var(--k) * 4.6em))}
.tg-nm{position:absolute;left:0;top:.95em;width:10.6em}
.tg-nm b{display:block;font-size:1.3em;font-weight:600;line-height:1.25;white-space:nowrap}
.tg-nm span{display:block;font-size:1.1em;line-height:1.35;color:var(--rl-soft);white-space:nowrap}
.tg-use{position:absolute;left:11.2em;right:0;top:1.25em;height:.9em;border-radius:.45em;background:#EEF0F5;overflow:hidden}
.tg-use i{display:block;width:var(--u);height:100%;border-radius:.45em;background:var(--in-indigo);
  transform-origin:0 50%;transform:scaleX(0);transition:transform .7s cubic-bezier(.3,.7,.2,1) .15s}
.tg-row.is-in .tg-use i{transform:none}
.tg-say{position:absolute;left:11.2em;top:2.55em;height:1.85em;padding:0 .75em;border-radius:.95em;display:flex;align-items:center;
  opacity:0;transform:translateY(.4em);transition:opacity .25s ease, transform .4s cubic-bezier(.2,.8,.2,1)}
.tg-say b{font-size:1.05em;font-weight:600;white-space:nowrap}
.tg-say--change{background:#E6E8F3;color:#2B2F52}
.tg-say--remove{background:#FCE9EC;color:#8C1226}
.tg-row.is-said .tg-say{opacity:1;transform:none}
.tg-sort{position:absolute;left:1.8em;top:31em;opacity:0;transition:opacity .3s ease .3s}
.tg.is-sorted .tg-sort{opacity:1}
.tg-sort .sy-cap{font-size:1em}


/* ============================================================
   THE RESEARCH PRACTICE
   Charts, drawn in the picture's own 640 by 440. Ink for the mark
   that matters, a warm grey for what it is measured against, and
   red only for what was flagged.
   ============================================================ */
.ch{position:absolute;inset:0;width:100%;height:100%;font-family:inherit;
  --ch-rest:#E7E4DE;--ch-grid:#E6E3DC;--ch-base:#B8B4AB;--ch-slate:#3A4A5C;--ch-red:#B3243B;--ch-green:#2F6B4F;--ch-ochre:#8A5F27}
.ch text{fill:var(--rl-ink);font-size:13px}
.ch-grid{stroke:var(--ch-grid);stroke-width:1;shape-rendering:crispEdges}
.ch-base{stroke:var(--ch-base);stroke-width:1;shape-rendering:crispEdges}
.ch .ch-ax{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:12.5px;fill:var(--rl-soft);text-anchor:middle}
.ch .ch-ax--r{text-anchor:end}
.ch .ch-ax--l{text-anchor:start}
.ch .ch-title{font-size:19px;font-weight:600;letter-spacing:-.01em}
.ch .ch-cap{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:12px;letter-spacing:.08em;text-transform:uppercase;fill:var(--rl-faint)}
.ch .ch-key{font-size:13px;fill:var(--rl-soft)}


/* ============================================================
   R1 · Where the response time goes
   ============================================================ */
.wt-track{stroke:var(--ch-base);stroke-width:2}
.wt-step circle{fill:#fff;stroke:var(--rl-ink);stroke-width:2}
.wt-step text{font-size:14.5px;font-weight:600}
.wt-step--w circle{transform-box:fill-box;transform-origin:50% 50%;transition:fill .3s ease, transform .4s cubic-bezier(.3,1.5,.5,1)}
.wt.is-waiting .wt-step--w circle,.wt.is-waited .wt-step--w circle{fill:var(--rl-ink);transform:scale(1.25)}
/* the wait, as a ring that opens round the step and is still there after */
.wt-wait{fill:none;stroke:var(--rl-ink);stroke-width:2;transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.wt.is-waiting .wt-wait{animation:wt-wait 1.5s ease-out 1 both}
@keyframes wt-wait{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
.wt-note{opacity:0;transform:translateY(-4px);transition:opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1)}
.wt-note rect{fill:var(--rl-ink)}
.wt .wt-note text{fill:#fff;font-size:13px;font-weight:500;text-anchor:middle}
.wt.is-waiting .wt-note,.wt.is-waited .wt-note{opacity:1;transform:none}
.wt-dot{fill:var(--ch-ochre);stroke:#fff;stroke-width:2;opacity:0;transition:opacity .25s ease}
.wt.is-go .wt-dot{opacity:1}
.wt-rest{fill:var(--ch-rest)}
.wt-bar{fill:var(--rl-ink)}
.wt .wt-v{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:13.5px;font-weight:500;text-anchor:middle;opacity:0}
.wt-key{opacity:0;transition:opacity .4s ease}
.wt.is-done .wt-key,.wt.is-waited .wt-key{opacity:1}


/* ============================================================
   R2 · The adoption chart
   ============================================================ */
.ad2-p circle{fill:var(--ch-slate);stroke:#fff;stroke-width:1.2;transform-box:fill-box;transform-origin:50% 50%;transform:scale(0);
  transition:transform .4s cubic-bezier(.3,1.7,.5,1), fill .3s ease;transition-delay:calc(var(--i) * 26ms), 0s}
.ad2.is-in .ad2-p circle{transform:none}
.ad2-g{opacity:0;transition:opacity .35s ease}
.ad2-g rect{fill:var(--rl-ink);fill-opacity:.045;stroke:#CFCBC3;stroke-width:1}
.ad2-g--ok rect{fill:var(--ch-green);fill-opacity:.08;stroke:#A9CDBB}
.ad2-g--bad rect{fill:var(--ch-red);fill-opacity:.08;stroke:#DFA3AD;transition:fill-opacity .3s ease, stroke .3s ease, stroke-width .3s ease}
.ch .ad2-gl{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;fill:var(--rl-soft)}
.ad2-g.is-on{opacity:1}
/* the finding: the large accounts along the floor of the chart */
.ad2.is-found .ad2-g--bad rect{fill-opacity:.13;stroke:var(--ch-red);stroke-width:1.6}
.ad2.is-found .ad2-g--bad .ad2-gl{fill:var(--ch-red);font-weight:500}
.ad2.is-found .ad2-p--bad circle{fill:var(--ch-red);transition-delay:0s}
.ch .ad2-find{font-size:13.5px;font-weight:600;fill:var(--ch-red);opacity:0;transition:opacity .3s ease .15s}
.ad2.is-found .ad2-find{opacity:1}


/* ============================================================
   R3 · Weekly active users, 2025
   ============================================================ */
/* the week by week line is the evidence and the trend is the reading
   of it, so the line is the lighter of the two */
.wu-line{fill:none;stroke:#7F8B99;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.wu-zero{stroke:var(--ch-base);stroke-width:1;stroke-dasharray:3 3}
.wu-end{fill:#7F8B99;stroke:#fff;stroke-width:2;opacity:0;transition:opacity .2s ease, fill .3s ease}
.wu.is-go .wu-end{opacity:1}
.wu.is-done .wu-end{fill:var(--ch-red)}
.wu-fit{stroke:var(--ch-red);stroke-width:3;stroke-linecap:round;opacity:0}
.wu.is-fit .wu-fit{opacity:1}
.wu-fit--key{opacity:1}
.wu-e{opacity:0;transform:translateY(-6px);transition:opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1)}
.wu-e.is-on{opacity:1;transform:none}
.wu-e line{stroke:var(--ch-ochre);stroke-width:1.5}
.ch .wu-en{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.ch .wu-ed{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:12px;letter-spacing:.05em;text-transform:uppercase;fill:var(--rl-soft)}
.wu-v{opacity:0;transition:opacity .35s ease}
.wu.is-done .wu-v{opacity:1}
.ch .wu-vn{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:21px;font-weight:500;letter-spacing:-.02em;fill:var(--ch-red)}
.ch .wu-vl{font-size:12.5px;fill:var(--rl-soft)}
.ch .wu-sub{font-size:13.5px;fill:var(--rl-soft)}


/* ============================================================
   R4 · The accounts in decline
   ============================================================ */
.ar-box{fill:#fff;stroke:#D8D5CE;stroke-width:1;transition:stroke .3s ease, stroke-width .3s ease, fill .3s ease}
.ar-s{fill:none;stroke:#7B828C;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1), stroke .3s ease;transition-delay:calc(var(--i) * 34ms), 0s}
.ar.is-drawn .ar-s{stroke-dashoffset:0}
.ar-f{stroke:var(--rl-ink);stroke-width:1.5;stroke-dasharray:4 3;transition:stroke .3s ease}
.ar-t{transition:opacity .4s ease}
.ch .ar-tag{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  fill:var(--ch-red);opacity:0;transition:opacity .3s ease .1s}
.ar.is-flagged .ar-t:not(.ar-t--falls){opacity:.34}
.ar.is-flagged .ar-t--falls .ar-box{stroke:var(--ch-red);stroke-width:1.6;fill:#FDF5F6}
.ar.is-flagged .ar-t--falls .ar-f{stroke:var(--ch-red)}
.ar.is-flagged .ar-tag{opacity:1}

.ar-side .ch-cap,.ar-sub,.ar-more{opacity:0;transition:opacity .35s ease}
.ch .ar-sub,.ch .ar-more{font-size:12.5px;fill:var(--rl-soft)}
.ar.is-paid .ar-side .ch-cap,.ar.is-paid .ar-sub{opacity:1}
.ar.is-paid .ar-more{opacity:1;transition-delay:.9s}
.ar-bar{fill:var(--ch-red);transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);
  transition:transform .5s cubic-bezier(.3,.7,.2,1);transition-delay:calc(var(--i) * 70ms)}
.ar.is-paid .ar-bar{transform:none}
.ar-sum{opacity:0;transition:opacity .35s ease .5s}
.ar.is-paid .ar-sum{opacity:1}
.ch .ar-n{font-family:var(--mono,'IBM Plex Mono',ui-monospace,monospace);font-size:34px;font-weight:500;letter-spacing:-.03em}
.ch .ar-of{font-size:14px;fill:var(--rl-soft)}


/* ============================================================
   THE THREE AT THE HEAD
   The same pictures with most of the words out: larger parts, and
   bars where the running text was, so that each still reads on a
   card half the size of the drawing.
   ============================================================ */

/* ---------- G1 · the interruption ---------- */
.gi{position:absolute;inset:0;background:var(--pt-navy)}
.gi-sheet{position:absolute;left:3em;right:3em;top:3em;bottom:3em;background:#fff;box-shadow:0 .5em 1.8em rgba(4,12,30,.34);overflow:hidden}
.gi-hd{position:absolute;left:3em;right:3em;top:2.7em}
.gi-hd b{display:block;font-size:2.5em;font-weight:600;letter-spacing:-.014em;line-height:1.15;white-space:nowrap}
.gi-b2 .gi-hd{top:2.3em}
.gi-b2 .gi-hd b{font-size:2.35em}
.gi-field{position:absolute;left:3em;right:3em;top:8.2em;height:13.6em;border:.16em solid #8D95A1;background:#fff;
  padding:1.3em 1.6em;transition:border-color .2s ease, box-shadow .2s ease}
.gi-field.is-focus{border-color:var(--pt-blue);box-shadow:0 0 0 .3em rgba(27,76,140,.22)}
.gi-field span{font-size:2.6em;line-height:1.3;color:var(--rl-ink)}
.gi-foot{position:absolute;left:0;right:0;bottom:0;height:7.6em;display:flex}
.gi-b{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:center;padding:0 2.4em;transition:filter .15s ease}
.gi-b b{font-size:2.1em;font-weight:700;white-space:nowrap}
.gi-b .rl-ic{position:absolute;right:2.2em;top:50%;width:2.7em;height:2.7em;margin-top:-1.35em;stroke-width:1.8}
.gi-b--gray{background:var(--pt-gray);color:var(--rl-ink);flex:0 0 19em}
.gi-b--blue{background:var(--pt-blue);color:#fff}
.gi-b.is-hover{filter:brightness(1.1)}
.gi-b.is-press{filter:brightness(.9)}

/* what was asked, said back, with all of it marked */
.gi-q{position:absolute;left:3em;top:6.2em;display:flex;align-items:center;gap:.9em}
.gi-q .rl-ic{width:2.1em;height:2.1em;color:var(--rl-faint);stroke-width:1.9}
.gi-q span{font-size:1.9em;line-height:1.3;color:var(--rl-ink);white-space:nowrap}
.gi-q mark{transition-duration:.5s}
.gi-b2.is-lit .gi-q mark{background-size:100% 100%}

.gi-list{position:absolute;left:2.2em;top:10.4em;width:26.4em}
.gi-m{display:flex;align-items:center;gap:1.1em;height:5.6em;padding:0 1.2em;border:.14em solid transparent;
  opacity:0;transform:translateY(.8em);
  transition:opacity .3s ease, transform .4s cubic-bezier(.2,.7,.2,1), background-color .18s ease, border-color .18s ease}
.gi-m + .gi-m{margin-top:.5em}
.gi-m.is-in{opacity:1;transform:none}
.gi-m.is-sel{background:#F3F4F8;border-color:var(--pt-navy)}
.gi-m.is-hover{background:#F3F4F8}
.gi-m .rl-ic{width:2.9em;height:2.9em;color:var(--pt-navy);stroke-width:1.3}
.gi-m > div{flex:1 1 auto;min-width:0}
/* a line of words is a dark bar, and where it is marked the mark shows round it */
.gi-t,.gi-l{position:relative;display:block;height:1.7em}
.gi-t::after{content:"";position:absolute;left:0;right:0;top:50%;height:.86em;margin-top:-.43em;border-radius:.2em;background:#2A3242}
.gi-l{height:1.5em}
/* a line of a page is paler, and goes under its mark */
.gi-l::before{content:"";position:absolute;left:0;right:0;top:50%;height:.62em;margin-top:-.31em;border-radius:.31em;background:#D5D3CD}
.gi-t u,.gi-l u{position:absolute;top:0;bottom:0;margin:0 -.3em;border-radius:.2em;background:var(--hl);
  transform-origin:0 50%;transform:scaleX(0);transition:transform .5s cubic-bezier(.4,0,.2,1)}
.gi-b2.is-lit .gi-t u,.gi-b2.is-lit .gi-doc.is-on .gi-l u{transform:none}
/* a marked stretch of a page is words, so it is drawn as dark as the titles */
.gi-l u::after{content:"";position:absolute;left:.3em;right:.3em;top:50%;height:.62em;margin-top:-.31em;border-radius:.31em;background:#2A3242}
.gi-s{display:block;height:.7em;border-radius:.35em;background:#C9CDD6;margin-top:.55em}

.gi-prev{position:absolute;left:30.6em;right:3em;top:10.4em;bottom:9.4em;background:#E7EAF0;overflow:hidden}
.gi-doc{position:absolute;left:1.5em;right:1.5em;top:1.5em;bottom:-2em;background:#fff;padding:1.7em 1.8em 0;
  box-shadow:0 .1em .4em rgba(0,0,0,.16);
  opacity:0;transform:translateY(.8em);transition:opacity .16s ease, transform 0s linear .16s}
.gi-doc.is-on{opacity:1;transform:none;transition:opacity .24s ease .08s, transform .4s cubic-bezier(.2,.7,.2,1) .08s}
.gi-dh{display:block;width:52%;height:.95em;background:#16181C;margin-bottom:.75em;box-shadow:0 1.45em 0 -.42em #16181C}
.gi-doc .gi-l{margin-top:.55em}
.gi-doc .gi-l:nth-child(2){margin-top:1.9em}

/* ---------- G2 · search, before and after ---------- */
/* before: the old skin, and a form */
.go{position:absolute;inset:0;background:#ECEFF0}
.go-head{position:absolute;left:0;right:0;top:0;height:5.6em;background:#748EA3}
.go-head > i{position:absolute;left:1.8em;top:1.5em;width:17em;height:2.6em;background:#1C2440}
.go-head span{position:absolute;right:1.6em;top:1.5em;display:flex;gap:.6em}
.go-head u{width:5.4em;height:2.2em;border:1px solid #8497A8;border-radius:.2em;background:linear-gradient(#F4F7F9,#C3D0DA)}
.go-head u:last-child{width:4.4em}
.go-nav{position:absolute;left:0;right:0;top:5.6em;height:3.2em;background:linear-gradient(#41505F,#2B3846);display:flex;align-items:center;gap:1.6em;padding:0 1.8em}
.go-nav i{height:.8em;background:#fff;opacity:.92}
.go-frame{position:absolute;left:1.4em;right:1.4em;top:10.4em;bottom:0;background:#fff;border:1px solid #5E7790;border-bottom:0;overflow:hidden}
.go-top{height:2.7em;background:#748EA3;display:flex;align-items:center;padding:0 1em}
.go-top i{width:7em;height:.8em;background:#fff}
.go-band{height:2.5em;background:#A7D9F4;border-top:1px solid #33506D;border-bottom:1px solid #33506D;margin:0 .4em;display:flex;align-items:center;padding:0 .8em}
.go-band i{height:.8em;background:#1B2B3C}
.go-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:1.6em;row-gap:.7em;padding:.85em 1.1em;margin:0 .4em;
  border-left:1px solid #33506D;border-right:1px solid #33506D}
.go-f{display:flex;align-items:center;gap:.5em;height:2.2em}
.go-f i{flex:none;height:.7em;background:#3A4652;margin-left:auto}
.go-f b{flex:0 0 13.6em;height:2.1em;border:1px solid #6F8496;background:#fff}
.go-f u{flex:none;width:1.9em;height:1.7em;border:1px solid #8497A8;border-radius:.2em;background:linear-gradient(#F4F7F9,#C3D0DA)}
.go-f--p b{flex-basis:9.2em}
.go-foot{display:flex;justify-content:flex-end;gap:.6em;padding:.9em 1.2em 0}
.go-foot u{height:2.8em;padding:0 1.2em;border:1px solid #8497A8;border-radius:.2em;background:linear-gradient(#F4F7F9,#C3D0DA);
  display:flex;align-items:center;font-family:Arial,Helvetica,sans-serif;color:#111}
.go-foot span{font-size:1.5em;white-space:nowrap}

/* after: the system, with the list already there */
.gn{position:absolute;inset:0;background:var(--fx-sky-soft)}
.gn-head{position:absolute;left:0;right:0;top:0;height:5em;background:#5B5F87;color:#fff;display:flex;align-items:center;gap:1.7em;padding:0 2.2em}
.gn-head .fx-word{margin-right:.5em}
.gn-head .fx-word b,.gn-head .fx-word i{font-size:2.4em}
.gn-head > i{height:.85em;border-radius:.2em;background:#fff;opacity:.6}
.gn-head > i.is-on{opacity:1}
.gn-find{margin-left:auto;width:15em;height:3.1em;background:#fff;border-radius:.2em;display:flex;align-items:center;justify-content:flex-end;padding:0 .9em}
.gn-find .rl-ic{width:1.7em;height:1.7em;color:#5B5F87;stroke-width:2}
.gn-me{width:3.1em;height:3.1em;border-radius:50%;background:#E3E5EF;flex:none;margin-left:-.5em}
.gn-hd{position:absolute;left:2.4em;top:6.5em}
.gn-hd b{display:block;font-size:2.7em;font-weight:600;letter-spacing:-.014em;line-height:1.15;white-space:nowrap}
.gn-new{position:absolute;right:2.4em;top:6.5em;height:3.4em;padding:0 1.2em 0 1em;border-radius:.3em;background:var(--fx-blue);color:#fff;
  display:flex;align-items:center;gap:.7em}
.gn-new .rl-ic{width:1.8em;height:1.8em;stroke-width:1.9}
.gn-new i{width:4.4em;height:.8em;border-radius:.2em;background:#fff}
.gn-field{position:absolute;left:2.4em;right:2.4em;top:11.4em;height:4.6em;background:#fff;border:.12em solid #8D95A1;border-radius:.3em;
  display:flex;align-items:center;gap:1em;padding:0 1.3em}
.gn-field .rl-ic{width:2.1em;height:2.1em;color:var(--rl-soft);stroke-width:1.9}
.gn-field i{width:24em;height:.8em;border-radius:.4em;background:#C9CDD6}
.gn-views{position:absolute;left:2.4em;right:2.4em;top:17.4em;display:flex;gap:.8em}
.gn-v{flex:1 1 auto;height:3.5em;padding:0 .6em 0 1.2em;border-radius:1.75em;background:#fff;box-shadow:inset 0 0 0 .12em #B9BECC;
  display:flex;align-items:center;justify-content:space-between;gap:.7em;transition:background-color .2s ease, box-shadow .2s ease}
.gn-v i{height:.8em;border-radius:.2em;background:#2B2F52;transition:background-color .2s ease}
.gn-v b{width:2.4em;height:2.2em;border-radius:1.1em;background:#ECEDF3;flex:none;transition:background-color .2s ease}
.gn-v.is-hover{box-shadow:inset 0 0 0 .2em var(--fx-blue)}
.gn-v.is-on{background:var(--fx-blue);box-shadow:none}
.gn-v.is-on i{background:#fff}
.gn-v.is-on b{background:rgba(255,255,255,.26)}
.gn-list{position:absolute;left:2.4em;right:2.4em;top:22.6em;transition:opacity .22s ease, transform .4s cubic-bezier(.2,.7,.2,1)}
.gn-list2{opacity:0;transform:translateY(.8em)}
.gn.is-due .gn-list1{opacity:0}
.gn.is-due .gn-list2{opacity:1;transform:none;transition-delay:.14s}
.gn-card{height:5.2em;margin-bottom:.8em;background:#fff;box-shadow:0 .1em .3em rgba(40,45,90,.1), 0 .5em 1.6em rgba(40,45,90,.07);
  display:flex;align-items:center;gap:.9em;padding:0 1.4em 0 1.7em}
.gn-card > div{margin-right:auto}
.gn-id{display:block;width:7.6em;height:.6em;border-radius:.3em;background:#C9CDD6;margin-bottom:.75em}
.gn-tt{display:block;height:.95em;border-radius:.2em;background:#16181C}
.gn-tag{display:flex;align-items:center;gap:.6em;height:2.7em;padding:0 1.1em 0 .9em;border-radius:1.35em;flex:none;background:#EFF0F3}
.gn-tag i{width:1em;height:1em;border-radius:50%;flex:none;background:var(--fx-gray)}
.gn-tag b{height:.75em;border-radius:.2em;background:#4A4F5E}
.gn-tag--now{background:#E6E8F3}
.gn-tag--now i{background:var(--fx-blue)}
.gn-tag--now b{background:#2B2F52}
.gn-tag--ok{background:#E5F0E2}
.gn-tag--ok i{background:var(--fx-green)}
.gn-tag--ok b{background:#2C5226}
.gn-tag--no i,.gn-tag--due i{background:none;box-shadow:inset 0 0 0 .18em var(--fx-gray)}
.gn-tag--late{background:#FCE9EC}
.gn-tag--late i{background:var(--fx-red)}
.gn-tag--late b{background:#8C1226}

/* ---------- G3 · the accounts in decline ---------- */
.gd-box{fill:#fff;stroke:#D8D5CE;stroke-width:1.2;transition:stroke .35s ease, stroke-width .35s ease, fill .35s ease}
.gd-s{fill:none;stroke:#7B828C;stroke-width:2;stroke-linejoin:round;stroke-linecap:butt;stroke-dasharray:1 1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1), stroke .35s ease;transition-delay:calc(var(--i) * 40ms), 0s}
.gd.is-drawn .gd-s{stroke-dashoffset:0}
/* a trend has no length until it is fitted, and is not drawn until then */
.gd-f{stroke:var(--rl-ink);stroke-width:2.2;stroke-dasharray:6 4;stroke-linecap:round;opacity:0;transition:stroke .35s ease}
.gd.is-fit .gd-f{opacity:1}
.gd-t{transition:opacity .45s ease}
.gd-flag{opacity:0;transition:opacity .3s ease;transition-delay:calc(var(--i) * 30ms)}
.gd-flag circle{fill:var(--ch-red)}
.gd-flag path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gd.is-flagged .gd-t:not(.gd-t--falls){opacity:.36}
.gd.is-flagged .gd-t--falls .gd-box{stroke:var(--ch-red);stroke-width:2;fill:#FDF5F6}
.gd.is-flagged .gd-t--falls .gd-f{stroke:var(--ch-red)}
.gd.is-flagged .gd-flag{opacity:1}
/* the two halves are named in letters that still read on a card */
.reel--gistSearch .ba-tag{height:3.5em;padding:0 1.3em;border-radius:1.75em;bottom:1.6em}
.reel--gistSearch .ba-tag small{font-size:1.55em}
.reel--gistSearch .ba-tag--b{right:calc(50% + 1.5em)}
.reel--gistSearch .ba-tag--a{left:calc(50% + 1.5em)}