/* ==========================================================================
   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 carries its word — Done, Built,
   Blocked, Decided, Open — after a small mark, the Office's state voice
   (office.css, Plans): never a capsule, and colour only for state. Green is
   done, amber is a person holding this up, red is "never"; built and open
   are the page's own greys. It reads the same in greyscale and in print.

   THE OFFICE'S TYPE AND INK (OF-02, 2026-10-15). A label is the body face in
   sentence case, quieter by size and colour; mono is for code and diagrams,
   never for a label. Surfaces are solid, corners 6, 8 and 12px, no hue but
   a state's. office-sample-check walks every tab and sub-tab of this page by
   the Office's rules, and office-ink reads this file.
   ========================================================================== */

:root{
  --in-bg:#070707;
  --in-surface:#0E0E0E;
  /* Solid: the white washes they were (4.5%, 8%, 14%) composited on --in-bg. */
  --in-raised:#121212;
  --in-hair:#1B1B1B;
  --in-hair-2:#2A2A2A;

  --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 */

  /* The Office's three states (office.css): ink for words, mark for a dot or a bar. */
  --in-attn:#E8C07A;                      /* 11.75:1 — waiting on a person */
  --in-attn-mark:#C9973F;
  --in-ok:#63B78C;                        /*  8.33:1 — done, checked against the real system */
  --in-ok-mark:#2E8B63;
  --in-bad:#F2837A;                       /*  7.96:1 — contradicted, never */
  --in-bad-mark:#E5534B;
  /* Built locally, waiting for its live test: not a state's colour, a grey
     between done's green and the track. */
  --in-built:#C8C8C8;
  --in-built-bar:#5E5E5E;

  --in-label:500 12.5px/1.35 var(--in-body); /* the Office's --o-t-label */

  --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:1px solid var(--focus-edge); outline-offset:2px;
}
a{color:var(--in-text-hi); text-underline-offset:3px; text-decoration-color:var(--in-muted-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 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 12.5px/1.55 var(--in-body); color:var(--in-muted-2)}

/* 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);
}

/* ---- 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 8px; font:var(--in-label); 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 and by the rule's
   weight: grey for a note, white for a rule (amber is for a person holding
   something up, which a rule is not). */
.in-note,.in-rule{
  padding:14px 18px; border-radius:8px; background:var(--in-raised);
  border-left:2px solid var(--in-hair-2);
}
.in-rule{border-left-color:var(--in-text-hi)}
.in-note > :last-child,.in-rule > :last-child{margin-bottom:0}

/* ---- status words -------------------------------------------------------- */
/* A word after a 7px mark that sits on the first line's x-height, however
   many lines the words take. Filled for a state that has arrived (done) or
   that wants a person (waiting, never); a ring for built and open. */
.in-st{
  display:inline-flex; align-items:baseline; gap:.5em; white-space:nowrap;
  font:var(--in-label); color:var(--in-text-2);
}
.in-st::before{
  content:''; flex:none; width:7px; height:7px; border-radius:50%;
  border:1px solid currentColor;
}
.in-st--done{color:var(--in-ok)}
.in-st--done::before{border-color:var(--in-ok-mark); background:var(--in-ok-mark)}
.in-st--wait{color:var(--in-attn)}
.in-st--wait::before{border-color:var(--in-attn-mark); background:var(--in-attn-mark)}
.in-st--no{color:var(--in-bad)}
.in-st--no::before{border-color:var(--in-bad-mark); background:var(--in-bad-mark)}
.in-st--todo{color:var(--in-muted)}

/* ---- 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:8px; 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 12px/22px var(--in-body); font-variant-numeric:tabular-nums; 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:var(--in-label); 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:minmax(0,1fr) minmax(0,1fr); gap:16px 32px}
.in-two > div > :last-child{margin-bottom:0}

/* A column may be narrower than a diagram in it, which then scrolls inside
   its own frame: at 1fr the state diagrams held the page 646px wide at 320. */
@media (max-width:720px){
  .in-two{grid-template-columns:minmax(0,1fr)}
  .in-sec{padding-top:56px}
  .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:8px;
}
.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 12.5px/1.5 var(--in-body); color:var(--in-muted); font-variant-numeric:tabular-nums}
.in-prog__bar{
  display:block; width:100%; height:8px; margin:16px 0 18px;
  -webkit-appearance:none; appearance:none; border:0; border-radius:2px;
  background:var(--in-hair-2); overflow:hidden;
  /* The colour of its fallback words ("36%"), which the bar stands in for. */
  color:var(--in-text-2);
}
.in-prog__bar::-webkit-progress-bar{background:var(--in-hair-2); border-radius:2px}
.in-prog__bar::-webkit-progress-value{background:var(--in-ok-mark); border-radius:2px}
.in-prog__bar::-moz-progress-bar{background:var(--in-ok-mark); border-radius:2px}
.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 12.5px/1.4 var(--in-body); 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:8px; 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:var(--in-label); 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:var(--in-label); 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:minmax(0,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)}
/* The tabs scroll sideways, so their row clips: the edge is drawn inside. */
.in-tab:focus-visible{outline-offset:-1px}
/* A panel's own pages are a second row of underline tabs, smaller, as the
   Office's section pages are: no capsules (rule 8). */
.in-subtabs{
  position:sticky; top:44px; z-index:5; display:flex; gap:20px; overflow-x:auto; scrollbar-width:none;
  padding:10px 0 0; margin:0; background:var(--in-bg); border-bottom:1px solid var(--in-hair);
}
.in-subtabs::-webkit-scrollbar{display:none}
.in-subtab{
  flex:none; padding:8px 0 9px; margin-bottom:-1px; border-bottom:2px solid transparent;
  font:500 13px/1 var(--in-body); color:var(--in-muted); text-decoration:none; white-space:nowrap;
}
.in-subtab:hover{color:var(--in-text-hi)}
.in-subtab:focus-visible{outline-offset:-1px}
.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);
    /* Opened at a tab past a phone's edge, its strip starts scrolled to it,
       in the middle, clear of the fade (the strip itself does not snap). */
    scroll-initial-target:nearest; scroll-snap-align:none center;
  }
  .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:var(--in-text-hi); border-bottom-color:var(--in-text-hi); scroll-initial-target:nearest; scroll-snap-align:none center;
  }
}
/* Cards size to their own content, so a short step isn't a tall empty box. */
.in-cards{align-items:start}
/* ON A PHONE EACH ROW OF TABS IS ONE LINE (OF-07), as every Office page's
   is: it wrapped to three rows here, with "Brief map" alone on the last. It
   scrolls sideways and fades where there is more, by the strip's own scroll
   position, since this page can run no script (the Office's strips are
   marked by office-strip.mjs). Neither row sticks on a phone, where two
   sticky rows under the header would take a fifth of the screen. */
@media (max-width:640px){
  .in-tabs{position:static}
  .in-tab{padding:9px 10px 11px}
  .in-tab:first-child{padding-left:0}
  .in-subtabs{position:static; gap:16px}
}
@supports (animation-timeline: scroll(self inline)) {
  .in-tabs, .in-subtabs{animation:in-strip-more linear both; animation-timeline:scroll(self inline)}
}
/* A strip that does not overflow has no scroll timeline, so it draws no fade. */
@keyframes in-strip-more{
  0%{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 2.5rem),transparent)}
  4%,96%{-webkit-mask-image:linear-gradient(to right,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent); mask-image:linear-gradient(to right,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent)}
  100%{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 2.5rem),transparent); mask-image:linear-gradient(to left,#000 calc(100% - 2.5rem),transparent)}
}

/* ---- Built: made and green locally, waiting for its live test -------------- */
.in-st--built{color:var(--in-built)}
.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 (grey), 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::-webkit-progress-value{background:var(--in-built-bar)}
.in-prog__bar--built::-moz-progress-bar{background:var(--in-built-bar)}
.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-mark)}
.in-prog__key--built{background:var(--in-built-bar); 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. On a phone the header's "← Office" is
   the way back and the sections are the bar at the foot. */
.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}
/* The six sections are the bar at the foot on a phone, as on every Office
   page (OF-07); the brand and the section's page tabs stand down. */
@media (max-width:62rem){ .in-shell > .ofc-rail{border:0} .in-shell > .ofc-rail > :not(.ofc-rail__nav), .in-shell .ofc-sec__pages{display:none} }