/* ==========================================================================
   INFRASTRUCTURE — the living record of the Cloudflare work.

   A DOCUMENT, NOT A DASHBOARD. Nothing on admin/infrastructure.html is read
   from a database: it is a written record that a person (or a later Claude
   session) edits and commits, so git is its audit trail. That is why this
   stylesheet has no states for loading, empty or failed — there is nothing
   to load.

   IT BORROWS office-home.css's VALUES, NOT THE FILE. Loading office-home.css
   here would bring 1,000 lines of attention bands and ledger paper with it,
   and the first class that collided would do so silently (see
   tools/css-collide-check.mjs for the time that happened). The tokens below
   are copied by value with the same names' meaning, and the `in-` prefix
   keeps every class out of the other stylesheets' way.

   STATUS IS A WORD FIRST. Every status pill carries its word — Done, Doing,
   Next, Blocked, Not started, Decided, Open — and the tint is decoration on
   top, so the page reads correctly in greyscale and in print. Amber means the
   same thing it means on the office home: a person is holding this up.
   ========================================================================== */

:root{
  --in-bg:#070707;
  --in-surface:#0E0E0E;
  --in-raised:rgba(255,255,255,.045);
  --in-hair:rgba(255,255,255,.08);
  --in-hair-2:rgba(255,255,255,.14);

  --in-text-hi:#FFFFFF;                   /* 20.09:1 */
  --in-text:#E6E6E6;                      /* 16.14:1 */
  --in-text-2:#C8C8C8;                    /* 12.04:1 */
  --in-muted:#A3A3A3;                     /*  7.99:1 */
  --in-muted-2:#8B8B8B;                   /*  5.91:1 — the floor for labels */

  --in-attn:#E8C07A;                      /* 11.75:1 — waiting on a person */
  --in-ok:#9FD4AE;                        /* 11.9:1  — done / verified     */
  --in-bad:#F0A0A0;
  --in-built:#9CC4F2;                     /* built locally, waiting for its live test */                       /*  9.6:1  — contradicted / never */

  --in-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --in-head:"Inter Tight",var(--in-body);
  --in-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --in-max:76rem;                        /* two columns, each a readable ~36rem */
  --in-gutter:clamp(16px,3.9vw,56px);
}

[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark; background:var(--in-bg)}
body{
  margin:0; background:var(--in-bg); color:var(--in-text);
  font:400 15px/1.6 var(--in-body);
  -webkit-font-smoothing:antialiased;
  padding:0 env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
}
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--in-text-hi); outline-offset:2px; border-radius:4px;
}
a{color:var(--in-text-hi); text-underline-offset:3px; text-decoration-color:var(--in-hair-2)}
a:hover{text-decoration-color:currentColor}

.in-skip{position:absolute; left:-999px; top:8px}
.in-skip:focus{left:8px; background:var(--in-text-hi); color:#000; padding:8px 12px; z-index:9}

/* ---- the top line: mark, where you are, the way back ------------------- */
.in-top{
  display:flex; align-items:center; gap:16px;
  max-width:var(--in-max); margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 16px) var(--in-gutter) 16px;
  border-bottom:1px solid var(--in-hair);
}
.in-top__mark{height:16px; width:auto; filter:brightness(0) invert(1)}
.in-top__where{
  margin:0; font:500 11.5px/1 var(--in-mono); letter-spacing:.18em;
  text-transform:uppercase; color:var(--in-muted-2);
}
.in-top__sp{margin-left:auto}
/* 44px touch target from a 12px link — padding in, negative margin out. */
.in-top__back{
  font:400 11.5px/1 var(--in-mono); letter-spacing:.06em; color:var(--in-muted);
  text-decoration:none; padding:16px 8px; margin:-16px -8px;
}
.in-top__back:hover{color:var(--in-text-hi)}

/* ---- the document column ------------------------------------------------ */
.in-wrap{max-width:var(--in-max); margin:0 auto; padding:0 var(--in-gutter) 96px}
.in-wrap :where(p,ul,ol,dl,table,pre,figure){margin:0 0 14px}
.in-wrap :where(ul,ol){padding-left:1.3em}
.in-wrap li{margin:0 0 6px}
.in-wrap li::marker{color:var(--in-muted-2)}

.in-mast{padding:56px 0 8px}
.in-mast h1{
  margin:0 0 14px; font:600 clamp(28px,4.4vw,44px)/1.08 var(--in-head);
  letter-spacing:-.02em; color:var(--in-text-hi);
}
.in-lede{font-size:18px; line-height:1.5; color:var(--in-text-2); max-width:44rem}
.in-meta{font:400 12px/1.5 var(--in-mono); color:var(--in-muted-2); letter-spacing:.02em}

/* THE ONE SENTENCE. Set apart by a rule on the left and nothing else — it is
   the thesis of the whole page and needs no box to say so. */
.in-thesis{
  margin:28px 0 8px; padding:4px 0 4px 20px;
  border-left:2px solid var(--in-text-hi);
  font:500 clamp(18px,2.2vw,22px)/1.45 var(--in-head); color:var(--in-text-hi);
}

/* ---- contents ------------------------------------------------------------ */
.in-toc{
  margin:36px 0 0; padding:18px 20px; background:var(--in-raised);
  border-radius:10px;
}
.in-toc h2{margin:0 0 10px; font:500 11.5px/1 var(--in-mono); letter-spacing:.18em;
  text-transform:uppercase; color:var(--in-muted-2)}
.in-toc ol{columns:2 16rem; column-gap:32px; margin:0; padding-left:1.4em}
.in-toc li{break-inside:avoid}

/* ---- sections ------------------------------------------------------------ */
.in-sec{padding-top:72px; scroll-margin-top:16px}
.in-sec > h2{
  margin:0 0 6px; font:600 26px/1.2 var(--in-head); letter-spacing:-.01em;
  color:var(--in-text-hi);
}
.in-kicker{
  display:block; margin:0 0 10px; font:500 11px/1 var(--in-mono);
  letter-spacing:.18em; text-transform:uppercase; color:var(--in-muted-2);
}
.in-sec h3{margin:32px 0 8px; font:600 17px/1.3 var(--in-head); color:var(--in-text-hi)}
.in-sub{color:var(--in-muted); margin-bottom:20px!important; max-width:46rem}
.in-wrap strong{color:var(--in-text-hi); font-weight:600}
.in-wrap code{
  font:400 .88em/1 var(--in-mono); color:var(--in-text-hi);
  background:var(--in-raised); padding:2px 5px; border-radius:4px;
  overflow-wrap:anywhere;
}

/* A callout says WHY something matters. One kind for "read this", one for
   "this is a hard rule", distinguished by their first word as well as tint. */
.in-note,.in-rule{
  padding:14px 18px; border-radius:10px; background:var(--in-raised);
  border-left:3px solid var(--in-hair-2);
}
.in-rule{border-left-color:var(--in-attn)}
.in-note > :last-child,.in-rule > :last-child{margin-bottom:0}

/* ---- tables -------------------------------------------------------------- */
/* Wrapped so a wide table scrolls inside itself on a phone instead of
   pushing the whole page sideways. */
.in-scroll{overflow-x:auto; margin:0 0 16px; -webkit-overflow-scrolling:touch}
.in-table{width:100%; border-collapse:collapse; font-size:14px; margin:0!important}
.in-table th,.in-table td{
  text-align:left; vertical-align:top; padding:10px 12px 10px 0;
  border-bottom:1px solid var(--in-hair);
}
.in-table th{
  font:500 11px/1.3 var(--in-mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--in-muted-2); border-bottom-color:var(--in-hair-2);
}
.in-table td:first-child{color:var(--in-text-hi); font-weight:500}
.in-table .in-num{font:400 12.5px/1.4 var(--in-mono); color:var(--in-muted); white-space:nowrap}
.in-table td{min-width:7rem}

/* ---- status words -------------------------------------------------------- */
.in-st{
  display:inline-block; white-space:nowrap;
  font:500 11px/1 var(--in-mono); letter-spacing:.08em; text-transform:uppercase;
  padding:5px 7px; border-radius:5px; border:1px solid var(--in-hair-2);
  color:var(--in-text-2);
}
.in-st--done{color:var(--in-ok); border-color:rgba(159,212,174,.4)}
.in-st--doing{color:var(--in-text-hi); border-color:var(--in-text-hi)}
.in-st--wait{color:var(--in-attn); border-color:rgba(232,192,122,.45)}
.in-st--no{color:var(--in-bad); border-color:rgba(240,160,160,.4)}
.in-st--todo{color:var(--in-muted-2)}

/* ---- diagrams ------------------------------------------------------------ */
.in-diagram{
  font:400 13px/1.45 var(--in-mono); color:var(--in-text-2);
  background:var(--in-surface); border:1px solid var(--in-hair);
  border-radius:10px; padding:18px 20px; overflow-x:auto; white-space:pre;
}

/* ---- steps: a numbered flow read top to bottom -------------------------- */
.in-flow{counter-reset:in-step; list-style:none; padding-left:0!important}
.in-flow > li{
  counter-increment:in-step; position:relative;
  padding:0 0 14px 40px; margin:0; border-left:1px solid var(--in-hair-2);
  margin-left:12px;
}
.in-flow > li:last-child{border-left-color:transparent}
.in-flow > li::before{
  content:counter(in-step); position:absolute; left:-12px; top:0;
  width:24px; height:24px; border-radius:50%;
  background:var(--in-bg); border:1px solid var(--in-hair-2);
  font:500 11px/22px var(--in-mono); text-align:center; color:var(--in-text-2);
}
.in-flow > li > b{display:block; color:var(--in-text-hi); font-weight:600}

/* ---- the record: dated entries, newest first ---------------------------- */
.in-log{list-style:none; padding-left:0!important}
.in-log > li{padding:16px 0; border-top:1px solid var(--in-hair); margin:0}
.in-log time{
  display:block; margin-bottom:6px; font:500 12px/1 var(--in-mono);
  letter-spacing:.06em; color:var(--in-muted-2);
}
.in-log h3{margin:0 0 6px!important; font-size:16px!important}

/* ---- collapsible depth: simple on top, thorough underneath -------------- */
.in-more{border-top:1px solid var(--in-hair); padding:4px 0}
.in-more:last-of-type{border-bottom:1px solid var(--in-hair)}
.in-more > summary{
  cursor:pointer; padding:12px 0; color:var(--in-text-hi); font-weight:500;
  list-style-position:outside;
}
.in-more > summary::marker{color:var(--in-muted-2)}
.in-more[open] > summary{padding-bottom:8px}

.in-two{display:grid; grid-template-columns:1fr 1fr; gap:16px 32px}
.in-two > div > :last-child{margin-bottom:0}

@media (max-width:720px){
  /* EACH ROW BECOMES A SMALL STACK. Three columns at 390px left the middle
     one — the one carrying the actual explanation — 110px wide, one word to
     a line. The first cell stays the row's title; the header row goes,
     because each cell reads on its own once it has the full width. */
  .in-table thead{display:none}
  .in-table tr{display:block; padding:12px 0; border-bottom:1px solid var(--in-hair)}
  .in-table td{display:block; min-width:0; border:0; padding:2px 0}
  .in-table td:first-child{padding-bottom:4px}
  .in-table td .in-st{margin-top:6px}
  .in-two{grid-template-columns:1fr}
  .in-sec{padding-top:56px}
  .in-toc ol{columns:1}
  .in-diagram{font-size:11.5px; padding:14px}
}

@media print{
  html,body{background:#fff; color:#000}
  .in-top__back,.in-skip{display:none}
  .in-more{display:block}
}

/* ---- progress: the total at the top --------------------------------------- */
/* Native <progress> bars, because the page may carry no script and no inline
   style (CSP). The numbers are written into the HTML and recounted by
   tools/infrastructure-progress-check.mjs from the status words in §01. */
.in-prog{
  margin:24px 0 22px; padding:20px 22px 18px; background:var(--in-raised);
  border:1px solid var(--in-hair); border-radius:12px;
}
.in-prog p{margin:0}
.in-prog__total{display:flex; align-items:baseline; gap:6px 16px; flex-wrap:wrap}
.in-prog__pct{
  font:600 clamp(44px,7vw,64px)/1 var(--in-head); letter-spacing:-.03em;
  color:var(--in-text-hi); font-variant-numeric:tabular-nums;
}
.in-prog__cap{font:500 16px/1.3 var(--in-head); color:var(--in-text-hi)}
.in-prog__count{margin-top:3px!important; font:400 12px/1.45 var(--in-mono); color:var(--in-muted)}
.in-prog__bar{
  display:block; width:100%; height:10px; margin:16px 0 18px;
  -webkit-appearance:none; appearance:none; border:0; border-radius:999px;
  background:var(--in-hair); color:var(--in-ok); overflow:hidden;
}
.in-prog__bar::-webkit-progress-bar{background:var(--in-hair); border-radius:999px}
.in-prog__bar::-webkit-progress-value{background:var(--in-ok); border-radius:999px}
.in-prog__bar::-moz-progress-bar{background:var(--in-ok); border-radius:999px}
.in-prog__bar--sm{height:6px; margin:8px 0 0}
.in-prog__rows{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 32px}
.in-prog__name{font:500 14px/1.35 var(--in-head); color:var(--in-text-hi)}
.in-prog__num{margin-top:2px!important; font:400 12px/1.4 var(--in-mono); color:var(--in-muted); font-variant-numeric:tabular-nums}
.in-prog__note{margin-top:16px!important; font-size:12.5px; line-height:1.5; color:var(--in-muted-2)}
@media (max-width:640px){ .in-prog__rows{grid-template-columns:1fr} }

/* ---- §01 in two columns: Project B | Project A ----------------------------- */
/* The grid breaks out of the 60rem reading column to up to 76rem, so each
   project gets a readable half; below 860px it is one column again. */
.in-cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; align-items:start;
}
.in-col > h3{margin-top:8px}
@media (max-width:860px){ .in-cols{grid-template-columns:1fr} .in-col + .in-col{margin-top:16px} }

.in-road{list-style:none; margin:0 0 16px!important; padding:0!important; border-top:1px solid var(--in-hair-2)}
.in-wrap .in-road__item{margin:0; padding:12px 0 13px; border-bottom:1px solid var(--in-hair)}
.in-road__head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px}
.in-road__name{margin:0; font:600 14.5px/1.35 var(--in-head); color:var(--in-text-hi)}
.in-road__head .in-st{flex:none; max-width:52%; white-space:normal; text-align:right; line-height:1.3}
.in-wrap .in-road__what{margin:6px 0 0; font-size:13.5px; line-height:1.55; color:var(--in-text-2)}

/* ---- the whole page in two columns ---------------------------------------- */
/* The masthead: the words on the left, the progress on the right. */
.in-mast{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:0 44px; align-items:start}
.in-mast__side .in-prog{margin-top:6px}
.in-mast .in-lede{max-width:none}

/* Every table became a grid of cards, two to a row. A card's first cell is
   its title, a status word sits in its header, and every other cell is a
   labelled line, so nothing a table said is lost. */
.in-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; margin:0 0 18px}
.in-two .in-cards{grid-template-columns:1fr}
.in-card{
  padding:14px 16px 12px; background:var(--in-raised); border:1px solid var(--in-hair);
  border-radius:10px; min-width:0;
}
.in-card__head{display:flex; justify-content:space-between; align-items:flex-start; gap:6px 12px; flex-wrap:wrap; margin-bottom:6px}
.in-card__title{margin:0; font:600 14.5px/1.35 var(--in-head); color:var(--in-text-hi); flex:1 1 12rem}
.in-card__tag{font:500 11px/1.4 var(--in-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--in-muted-2)}
.in-card__chips .in-st{white-space:normal; line-height:1.3}
.in-wrap .in-card__body{margin:0 0 6px; font-size:14px; line-height:1.55; color:var(--in-text)}
.in-wrap .in-card__line{margin:0 0 5px; font-size:13.5px; line-height:1.55; color:var(--in-text-2)}
.in-wrap .in-card__line:last-child{margin-bottom:0}
.in-card__k{
  display:block; margin-bottom:1px; font:500 10.5px/1.4 var(--in-mono);
  letter-spacing:.12em; text-transform:uppercase; color:var(--in-muted-2);
}

/* Lists and the record flow in two columns, top to bottom then across. */
.in-cols2{columns:2; column-gap:44px}
.in-cols2 > li{break-inside:avoid}
.in-log{columns:2; column-gap:44px}
.in-log > li{break-inside:avoid; display:inline-block; width:100%}
.in-two pre{margin-top:0}

@media (max-width:860px){
  .in-mast{grid-template-columns:1fr}
  .in-cards{grid-template-columns:1fr}
  .in-two{grid-template-columns:1fr}
  .in-cols2,.in-log{columns:1}
}
/* A paragraph on its own, outside a column, keeps a readable line length. */
.in-sec > p:not(.in-sub){max-width:52rem}

/* ---- tabs and sub-tabs: CSS only ------------------------------------------ */
/* The page may carry no script (CSP), so the tabs are links and the browser's
   own :target decides what shows; :has() finds the panel that holds the
   target, so a link to any id (#record, #owner-steps, #road-a) opens the tab
   it lives in. Without :has() support nothing is hidden and the page reads
   top to bottom, as it did before the tabs. The active-tab rules below are
   generated from the page's own tab list. */
.in-tabs{
  position:sticky; top:0; z-index:6; display:flex; gap:2px; overflow-x:auto;
  margin:26px 0 0; padding:10px 0 0; background:var(--in-bg);
  border-bottom:1px solid var(--in-hair-2); scrollbar-width:none;
}
.in-tabs::-webkit-scrollbar{display:none}
.in-tab{
  flex:none; padding:9px 13px 11px; font:500 13.5px/1 var(--in-head); color:var(--in-muted);
  text-decoration:none; white-space:nowrap; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.in-tab:hover{color:var(--in-text-hi)}
.in-subtabs{
  position:sticky; top:44px; z-index:5; display:flex; flex-wrap:wrap; gap:6px;
  padding:14px 0 10px; margin:0; background:var(--in-bg);
}
.in-subtab{
  padding:7px 12px; border:1px solid var(--in-hair-2); border-radius:999px;
  font:500 12.5px/1 var(--in-body); color:var(--in-muted); text-decoration:none; white-space:nowrap;
}
.in-subtab:hover{color:var(--in-text-hi); border-color:var(--in-muted-2)}
.in-panels [id]{scroll-margin-top:112px}
.in-panel > .in-sec:first-child, .in-panel > .in-sec:first-of-type{padding-top:32px}
.in-subpanel.in-sec{padding-top:18px}
.in-panel > .in-subtabs{margin-top:6px}

@supports selector(:has(*)) {
  .in-panel{display:none}
  .in-panel:target, .in-panel:has(:target){display:block}
  .in-panels:not(:has(:target)) > .in-panel--default{display:block}
  .in-subpanel{display:none}
  .in-subpanel:target, .in-subpanel:has(:target){display:block}
  .in-subpanels:not(:has(:target)) > .in-subpanel--default{display:block}

  .in-wrap:not(:has(.in-panels :target)) .in-tab--default,
  .in-wrap:has(#tab-overview:target, #tab-overview :target) .in-tab[href="#tab-overview"],
  .in-wrap:has(#tab-b:target, #tab-b :target) .in-tab[href="#tab-b"],
  .in-wrap:has(#tab-a:target, #tab-a :target) .in-tab[href="#tab-a"],
  .in-wrap:has(#tab-owner:target, #tab-owner :target) .in-tab[href="#tab-owner"],
  .in-wrap:has(#tab-decisions:target, #tab-decisions :target) .in-tab[href="#tab-decisions"],
  .in-wrap:has(#tab-facts:target, #tab-facts :target) .in-tab[href="#tab-facts"],
  .in-wrap:has(#tab-record:target, #tab-record :target) .in-tab[href="#tab-record"],
  .in-wrap:has(#tab-brief:target, #tab-brief :target) .in-tab[href="#tab-brief"] {
    color:var(--in-text-hi); border-bottom-color:var(--in-text-hi);
  }
  .in-panel:not(:has(.in-subpanels :target)) .in-subtab--default,
  .in-panel:has(#moved-sites:target, #moved-sites :target) .in-subtab[href="#moved-sites"],
  .in-panel:has(#tkati-move:target, #tkati-move :target) .in-subtab[href="#tkati-move"],
  .in-panel:has(#model:target, #model :target) .in-subtab[href="#model"],
  .in-panel:has(#invariants:target, #invariants :target) .in-subtab[href="#invariants"],
  .in-panel:has(#flows:target, #flows :target) .in-subtab[href="#flows"],
  .in-panel:has(#states:target, #states :target) .in-subtab[href="#states"],
  .in-panel:has(#guardrails:target, #guardrails :target) .in-subtab[href="#guardrails"],
  .in-panel:has(#owner-open:target, #owner-open :target) .in-subtab[href="#owner-open"],
  .in-panel:has(#owner-done:target, #owner-done :target) .in-subtab[href="#owner-done"],
  .in-panel:has(#facts-temp:target, #facts-temp :target) .in-subtab[href="#facts-temp"],
  .in-panel:has(#facts-oauth:target, #facts-oauth :target) .in-subtab[href="#facts-oauth"],
  .in-panel:has(#facts-perm:target, #facts-perm :target) .in-subtab[href="#facts-perm"],
  .in-panel:has(#facts-recheck:target, #facts-recheck :target) .in-subtab[href="#facts-recheck"],
  .in-panel:has(#facts-wave2:target, #facts-wave2 :target) .in-subtab[href="#facts-wave2"],
  .in-panel:has(#facts-b:target, #facts-b :target) .in-subtab[href="#facts-b"],
  .in-panel:has(#facts-sources:target, #facts-sources :target) .in-subtab[href="#facts-sources"] {
    color:#000; background:var(--in-text-hi); border-color:var(--in-text-hi);
  }
}
/* Cards size to their own content, so a short step isn't a tall empty box. */
.in-cards{align-items:start}
/* On a phone the tabs wrap into rows instead of scrolling sideways, so the
   active one is always in view; the bar stops being sticky there, since
   several rows of it would cover the page. */
@media (max-width:640px){
  .in-tabs{flex-wrap:wrap; overflow:visible; position:static; row-gap:0}
  .in-tab{padding:9px 10px 10px}
  .in-subtabs{position:static}
}

/* ---- Built: made and green locally, waiting for its live test -------------- */
.in-st--built{color:var(--in-built); border-color:rgba(156,196,242,.45)}
.in-prog__fig{display:flex; flex-direction:column}
.in-prog__fig--built .in-prog__pct{color:var(--in-built)}
.in-prog__total{align-items:flex-end; gap:6px 36px}
.in-prog__total .in-prog__cap{margin-top:4px!important}
.in-prog__num--built{color:var(--in-built)}
/* Two <progress> bars stacked: built underneath (blue), done on top (green)
   with a transparent track, so one bar shows both. No inline style needed. */
.in-prog__stack{position:relative; margin:16px 0 18px}
.in-prog__stack--sm{margin:8px 0 0}
.in-prog__stack .in-prog__bar{margin:0}
.in-prog__bar--built{color:var(--in-built)}
.in-prog__bar--built::-webkit-progress-value{background:var(--in-built)}
.in-prog__bar--built::-moz-progress-bar{background:var(--in-built)}
.in-prog__bar--over{position:absolute; inset:0; background:transparent}
.in-prog__bar--over::-webkit-progress-bar{background:transparent}
.in-prog__key{display:inline-block; width:9px; height:9px; border-radius:2px; margin:0 5px 0 0; vertical-align:0}
.in-prog__key--done{background:var(--in-ok)}
.in-prog__key--built{background:var(--in-built); margin-left:4px}

/* ---- Phase VI: inside the Office's shell -----------------------------------
   The rail and the location header are office.css's; the record keeps its own
   measure and type in the scroll pane. The page has no script, so on a phone
   the rail's strip stands down and the header's "← Office" is the way back. */
.in-shell__scroll{padding:0}
.in-shell .ofc-top__where .in-shell__title{margin:0; color:var(--o-text); font:650 var(--o-t-xl)/1.15 var(--display); letter-spacing:-0.022em}
.in-shell .ofc-top__where p + p{margin:0.2rem 0 0; font-size:var(--o-t-sm); color:var(--o-faint)}
.in-shell .in-shell__back{color:var(--o-dim); text-decoration:none}
.in-shell .in-shell__back:hover{color:var(--o-text); text-decoration:underline}
.in-shell .ofc-side__a{text-decoration:none}
@media (max-width:62rem){ .in-shell > .ofc-rail{display:none} }