/* Orion client portal — shared by dashboard.html and portal-demo.html.
   A full-screen application: fixed sidebar, top bar, and every module in a
   raised panel. Three surface steps — page, panel, hover — so depth does the
   work that a border alone cannot.

   Type: the site's sans throughout. Labels are uppercase with letter-spacing,
   data is regular sans, serif is reserved for big numbers and page titles.
   Monospace appears only where character alignment matters — IDs and
   timestamps in the run table. Nothing below 12px. */

:root{
  /* The portal has its own night. It used to alias the marketing site's
     neutrals — three blacks a few points apart, and cream at three opacities
     for every level of text — which is one hue at one value: nothing sat on
     anything and nothing was a different colour from anything else. This is
     the hero's world instead. A midnight navy ground, slate-navy surfaces
     that are visibly a step above it, text that goes from warm bone to a
     cool blue-grey as it recedes, the gold kept as a metal with a highlight
     and a shade, one cool blue reserved for anything that is a time, and
     state in three colours that are not each other: gold running, ember
     waiting on a person, slate paused. */
  --p-bg:#04060C;
  --p-surface:#0B101D;
  --p-surface-2:#111A2D;
  --p-gold:#C9A84C;
  --p-gold2:#EAD08C;
  --p-gold-lo:#8C7231;
  --p-gold-dim:rgba(201,168,76,.36);
  --p-cream:#F4EEDF;
  --p-body:#DADEE7;
  --p-dim:#8F98AB;
  --p-blue:#A9C3E6;
  --p-hair:rgba(143,184,232,.11);
  --p-line:rgba(143,184,232,.12);
  --p-line2:rgba(143,184,232,.06);
  --p-bad:#F0907A;
  --p-off:#8792A8;
  --p-r:var(--r-md);
  --p-pad:var(--sp-5);
  --p-side:248px;
  --p-ease:var(--ease);
  --p-sans:var(--font-body);
  --p-serif:var(--font-display);
  --p-mono:var(--font-mono);

  /* The shell reads the site-wide names directly, so those are re-pointed for
     these pages too. This sheet is only ever loaded by the portal. */
  --ink:#04060C; --surface:#0B101D; --surface-2:#111A2D;
  --cream:#F4EEDF; --text:#DADEE7; --text-2:#B6BECD; --text-3:#8F98AB;
  --line:1px solid rgba(143,184,232,.12); --line-colour:rgba(143,184,232,.12);
  --danger:#F0907A;
}

html{background:var(--p-bg)}
body{background:var(--p-bg);color:var(--p-cream);margin:0;font-family:var(--p-sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.pt,.pt *,.pt *::before,.pt *::after{box-sizing:border-box}
.pt{font-size:var(--fs-2);line-height:1.6;color:var(--p-cream)}

/* ═══ SHELL ═════════════════════════════════════════════════════════════ */
.pt-app{display:flex;min-height:100vh}


/* ══ SHELL: identity, search, grouped nav, breadcrumb, palette ══════════
   The sidebar reads top to bottom as: who this account is, a way to jump
   anywhere, the sections grouped by what they are for, and the way out. */

/* ── identity ──────────────────────────────────────────────────────── */
.pt-who{display:flex;align-items:center;gap:11px}
.pt-who-mark{flex:0 0 auto;width:30px;height:30px;border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  background-color:var(--gold);
  background-image:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:#14100A;font-family:var(--font-body);font-size:var(--fs-2);font-weight:700}
.pt-who-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.pt-who-sub{font-size:var(--fs-1);color:var(--text-3);line-height:1}

/* ── search trigger ────────────────────────────────────────────────── */
.pt-find{display:flex;align-items:center;gap:9px;width:calc(100% - 24px);
  margin:14px 12px 2px;padding:8px 10px;border:var(--line);border-radius:var(--r-sm);
  background:rgba(255,255,255,.014);color:var(--text-3);cursor:pointer;
  font-family:var(--font-body);font-size:var(--fs-2);text-align:left;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.pt-find:hover{border-color:rgba(201,168,76,.4);color:var(--cream)}
/* ── icons ────────────────────────────────────────────────────────────────
   Every glyph is drawn on the same 24-unit grid, so weight is the only thing
   left to control and it is controlled once here. vector-effect holds the
   stroke at a constant *rendered* width, which is what makes a 13px icon and
   a 20px icon look like they came from the same set — the old rules declared
   widths from 1 to 2 across eight different sizes and the set read as a
   collection of unrelated drawings. Call sites set size and colour only. */
svg.pt-ico{fill:none;stroke:currentColor;stroke-width:1.45;
  stroke-linecap:round;stroke-linejoin:round}
svg.pt-ico *{vector-effect:non-scaling-stroke}

.pt-find svg{width:15px;height:15px;flex:0 0 auto}
.pt-find span{flex:1 1 auto}
.pt-kbd{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  height:19px;padding:0 6px;border:var(--line);border-radius:4px;
  background:rgba(255,255,255,.03);font-family:var(--font-mono,var(--font-body));
  font-size:var(--fs-1);color:var(--text-3);letter-spacing:.02em}

/* ── grouped nav ───────────────────────────────────────────────────── */
.pt-nav-h{display:block;padding:14px 12px 5px;font-size:var(--fs-1);font-weight:700;
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-3);opacity:.72}
.pt-navw{display:flex;flex-direction:column}
.pt-navi-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.pt-navi-x{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:4px;color:var(--text-3);
  transition:transform var(--dur-2) var(--ease),background var(--dur-1) var(--ease)}
.pt-navi-x svg{width:13px;height:13px}
.pt-navi-x:hover{background:rgba(255,255,255,.07);color:var(--cream)}
.pt-navi-x.on{transform:rotate(90deg)}
.pt-navi-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* children: a grid row collapse, so there is no height to measure */
.pt-subs{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows var(--dur-3) var(--ease),opacity var(--dur-2) var(--ease)}
.pt-subs.on{grid-template-rows:1fr;opacity:1}
.pt-subs-in{overflow:hidden;min-height:0;display:flex;flex-direction:column}
.pt-subs-in{position:relative}
.pt-subs-in::before{content:'';position:absolute;left:19px;top:3px;bottom:3px;width:1px;
  background:rgba(240,232,213,.1)}
.pt-sub{position:relative;display:flex;align-items:center;gap:9px;width:100%;
  padding:7px 12px 7px 30px;margin-top:2px;background:none;border:0;
  border-radius:var(--r-sm);cursor:pointer;text-align:left;
  font-family:var(--font-body);font-size:var(--fs-2);color:var(--text-3);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.pt-sub::before{content:'';position:absolute;left:19px;top:3px;bottom:3px;width:1px;
  background:transparent}
.pt-sub svg{width:13px;height:13px;flex:0 0 auto;opacity:.6}
.pt-sub span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-sub:hover{background:rgba(255,255,255,.045);color:var(--cream)}
.pt-sub[aria-current]{background:rgba(201,168,76,.1);color:var(--gold)}
.pt-sub[aria-current]::before{background:var(--gold)}  /* marks its own run of the guide */

/* ── collapsing the whole rail ─────────────────────────────────────── */
.pt-side{transition:width var(--dur-3) var(--ease)}
.pt-side[data-collapsed]{width:0;overflow:hidden;border-right:0}
.pt-app:has(.pt-side[data-collapsed]) .pt-main{margin-left:0}
.pt-main{transition:margin-left var(--dur-3) var(--ease)}

.pt-side-t{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:0;border-radius:var(--r-sm);background:none;
  color:var(--text-3);cursor:pointer;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.pt-side-t svg{width:17px;height:17px}
.pt-side-t:hover{background:rgba(255,255,255,.06);color:var(--cream)}

/* ── breadcrumb ────────────────────────────────────────────────────── */
.pt-crumb{display:flex;align-items:baseline;gap:9px;min-width:0}
.pt-crumb-co{font-size:var(--fs-2);color:var(--text-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:22ch}
.pt-crumb-s{font-size:var(--fs-2);color:#7A869C}
.pt-crumb .pt-title{margin-right:0}

/* ── command palette ───────────────────────────────────────────────── */
.pt-findw{position:fixed;inset:0;z-index:200;display:flex;justify-content:center;
  align-items:flex-start;padding:14vh 20px 20px}
.pt-findbg{position:absolute;inset:0;background:rgba(3,3,6,.62);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.pt-findbox{position:relative;width:100%;max-width:33rem;background:var(--p-surface-2);
  border:var(--line-strong);border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 28px 70px -14px rgba(0,0,0,.8)}
.pt-findtop{display:flex;align-items:center;gap:11px;padding:0 14px;
  border-bottom:var(--line)}
.pt-findtop svg{width:16px;height:16px;flex:0 0 auto;color:var(--text-3)}
.pt-findi{flex:1 1 auto;min-width:0;padding:15px 0;background:none;border:0;outline:none;
  font-family:var(--font-body);font-size:var(--fs-3);color:var(--cream)}
.pt-findi::placeholder{color:var(--text-3)}
.pt-findi:focus-visible{outline:1px solid rgba(201,168,76,.5);outline-offset:-3px;
  border-radius:var(--r-sm)}
.pt-findtop .pt-kbd{cursor:pointer}
.pt-findl{padding:7px;display:flex;flex-direction:column;gap:2px;max-height:46vh;
  overflow-y:auto}
.pt-findr{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;
  background:none;border:0;border-radius:var(--r-sm);cursor:pointer;text-align:left;
  font-family:var(--font-body);font-size:var(--fs-2);color:var(--text-2);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.pt-findr svg{width:15px;height:15px;flex:0 0 auto;opacity:.7}
.pt-findr-t{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-findr-k{flex:0 0 auto;font-size:var(--fs-1);color:var(--text-3);
  letter-spacing:var(--ls-caps);text-transform:uppercase}
.pt-findr:hover,.pt-findr.on{background:rgba(201,168,76,.11);color:var(--cream)}
.pt-finde{padding:34px 20px;display:flex;flex-direction:column;align-items:center;gap:9px;
  color:var(--text-3)}
.pt-finde svg{width:21px;height:21px;opacity:.5}
.pt-finde p{margin:0;font-size:var(--fs-2)}

@media(max-width:900px){
  /* the rail becomes the bottom bar here, so the desktop collapse is moot */
  .pt-side[data-collapsed]{width:auto;overflow:visible}
  .pt-side-t{display:none}
  .pt-find{display:none}
  .pt-nav-h,.pt-subs,.pt-navi-x{display:none}
  .pt-crumb-co,.pt-crumb-s{display:none}
  .pt-findw{padding:8vh 14px 14px}
}
@media (prefers-reduced-motion:reduce){
  .pt-side,.pt-main,.pt-subs,.pt-navi-x{transition:none}
}

/* ── sidebar ─────────────────────────────────────────────────────────── */
.pt-side{position:fixed;top:0;left:0;bottom:0;width:var(--p-side);z-index:50;
  background:var(--p-surface);border-right:var(--line);
  display:flex;flex-direction:column;overflow-y:auto}
.pt-brand{display:flex;align-items:center;gap:10px;padding:22px var(--p-pad);
  text-decoration:none;color:var(--p-cream);border-bottom:var(--line)}
.pt-brand-n{font-family:var(--font-logo);font-size:var(--fs-3);letter-spacing:.28em;line-height:1}

.pt-who{padding:20px var(--p-pad);border-bottom:var(--line)}
.pt-who-co{font-family:var(--p-serif);font-size:var(--fs-5);font-weight:600;line-height:1.15;
  color:var(--p-cream);overflow-wrap:anywhere}
.pt-tier{display:inline-block;margin-top:9px;padding:4px 11px;border-radius:var(--r-pill);
  border:var(--line-strong);color:var(--p-gold);
  font-size:var(--fs-1);font-weight:600;letter-spacing:.1em;text-transform:uppercase}

.pt-nav{padding:14px 12px;display:flex;flex-direction:column;gap:2px;flex:1}
.pt-navi{position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;
  background:none;border:0;border-radius:var(--r-md);cursor:pointer;text-align:left;
  font-family:var(--p-sans);font-size:var(--fs-2);font-weight:500;color:var(--p-dim);
  transition:background var(--dur-2) var(--p-ease),color var(--dur-2)}
.pt-navi svg{width:18px;height:18px;flex-shrink:0}
.pt-navi:hover{background:var(--p-surface-2);color:var(--p-cream)}
.pt-navi[aria-current="page"]{background:rgba(201,168,76,.10);color:var(--p-gold)}
.pt-navi:focus-visible{outline:2px solid var(--p-gold);outline-offset:-2px}
.pt-navi-c{margin-left:auto;min-width:20px;padding:1px 6px;border-radius:var(--r-pill);
  background:var(--p-gold);color:#0a0a0a;font-size:var(--fs-1);font-weight:700;text-align:center}

.pt-side-f{padding:14px 12px;border-top:var(--line)}
.pt-out{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:11px 12px;background:none;border:var(--line);border-radius:var(--r-md);
  cursor:pointer;font-family:var(--p-sans);font-size:var(--fs-1);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--p-dim);transition:color var(--dur-2),border-color var(--dur-2)}
.pt-out:hover{color:var(--p-cream);border-color:rgba(240,232,213,0.5)}
.pt-out:focus-visible{outline:2px solid var(--p-gold);outline-offset:2px}

/* ── main column ─────────────────────────────────────────────────────── */
.pt-main{flex:1;min-width:0;margin-left:var(--p-side);display:flex;flex-direction:column}

.pt-bar{position:sticky;top:0;z-index:40;background:rgba(6,6,9,.90);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:var(--line)}
.pt-bar-in{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;
  padding:12px 26px;max-width:1560px}
/* the controls travel together, so the bar is one row rather than a block
   that wraps the "last run" line under the breadcrumb */
.pt-bar-r{display:flex;align-items:center;gap:14px;margin-left:auto;flex:0 0 auto}
.pt-upd{white-space:nowrap}
@media(max-width:1180px){
  .pt-bar-in{flex-wrap:wrap}
  .pt-bar-r{width:100%;margin-left:0;justify-content:space-between}
}
@media(max-width:700px){
  /* the segmented range, the month select and the last-run line cannot share
     one row at 320; let them wrap rather than widen the document */
  .pt-bar-r{flex-wrap:wrap;gap:10px;justify-content:flex-start}
  .pt-range{flex:1 1 100%}
  .pt-sel{max-width:100%}
  .pt-upd{white-space:normal;text-align:left}
}
.pt-title{font-family:var(--p-serif);font-size:var(--fs-6);font-weight:600;line-height:1.1;
  margin:0;margin-right:auto}
.pt-upd{text-align:right;font-size:var(--fs-1);color:var(--p-dim);line-height:1.5}
.pt-upd b{display:block;color:var(--p-body);font-weight:500}

/* The full sentence is 371px on one line, so it cannot be nowrap — at 320px
   that alone pushed the page sideways. It wraps to its own row instead, and
   still sits on one line wherever there is room. */
.pt-demo{display:inline-flex;align-items:center;flex:0 0 auto;
  padding:4px 10px;border:1px solid rgba(201,168,76,.45);border-radius:var(--r-pill);
  background:rgba(201,168,76,.09);color:var(--p-gold);
  font-family:var(--p-sans);font-size:var(--fs-1);font-weight:600;
  letter-spacing:var(--ls-caps);text-transform:uppercase;white-space:nowrap}
.pt-demo::before{content:'';width:6px;height:6px;border-radius:var(--r-pill);background:#0a0a0a;
  flex-shrink:0;align-self:flex-start;margin-top:5px}

.pt-content{padding:26px 30px 60px;max-width:1560px;width:100%}

/* ── range selector ──────────────────────────────────────────────────── */

.pt-range{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pt-seg{display:flex;background:var(--p-surface);border:var(--line);
  border-radius:var(--r-pill);padding:3px}
.pt-chip{background:none;border:0;border-radius:var(--r-pill);padding:7px 15px;cursor:pointer;
  font-family:var(--p-sans);font-size:var(--fs-1);font-weight:600;color:var(--p-dim);
  white-space:nowrap;transition:background var(--dur-2) var(--p-ease),color var(--dur-2)}
.pt-chip:hover{color:var(--p-cream)}
.pt-chip[aria-pressed="true"]{background:rgba(201,168,76,.14);color:var(--p-gold)}
.pt-chip:focus-visible{outline:2px solid var(--p-gold);outline-offset:-2px}
.pt-sel{background:var(--p-surface);border:var(--line);color:var(--p-body);
  border-radius:var(--r-pill);padding:8px 14px;font-family:var(--p-sans);font-size:var(--fs-1);
  font-weight:500;cursor:pointer}
.pt-sel:focus-visible{outline:2px solid var(--p-gold);outline-offset:2px}

/* ═══ PANELS ════════════════════════════════════════════════════════════ */
.pt-panel{background:var(--p-surface);border:var(--line);
  border-radius:var(--r-md);padding:var(--p-pad);min-width:0}
.pt-panel-h{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.pt-panel-h h2{margin:0;font-family:var(--p-sans);font-size:var(--fs-1);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--p-dim)}
.pt-count{min-width:20px;padding:1px 7px;border-radius:var(--r-pill);
  background:rgba(201,168,76,.16);color:var(--p-gold);font-size:var(--fs-1);font-weight:700;
  text-align:center}
.pt-spacer{margin-left:auto}

.pt-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px;
  align-items:start;margin-top:18px}
.pt-stack{display:grid;gap:18px;align-content:start;min-width:0}

/* ── KPI tiles ───────────────────────────────────────────────────────── */
.pt-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pt-tile{background:var(--p-surface);border:var(--line);border-radius:var(--r-md);
  padding:var(--p-pad);min-width:0;display:flex;flex-direction:column;gap:11px;
  transition:background var(--dur-2) var(--p-ease),border-color var(--dur-2)}
.pt-tile:hover{background:var(--p-surface-2);border-color:rgba(240,232,213,0.5)}
.pt-val{font-family:var(--p-serif);font-size:var(--fs-7);font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--p-cream);overflow-wrap:anywhere}
.pt-val.sm{font-size:var(--fs-6);line-height:1.15}
.pt-val.gold{color:var(--p-gold)}
.pt-lab{font-family:var(--p-sans);font-size:var(--fs-1);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--p-dim);display:flex;align-items:center;gap:7px;
  flex-wrap:wrap;line-height:1.5}
.pt-delta{font-size:var(--fs-1);color:var(--p-dim);line-height:1.5}
.pt-delta.up{color:var(--p-gold)}
.pt-delta.down{color:var(--p-bad)}
.pt-tile-sp{margin-top:auto;padding-top:4px}

/* the "why" affordance on the hours figure */
.pt-why{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:var(--r-pill);border:var(--line-strong);color:var(--p-gold);
  font-size:var(--fs-1);line-height:1;cursor:help;position:relative;flex-shrink:0}
.pt-why:hover,.pt-why:focus{border-color:var(--p-gold);outline:none}
.pt-why:hover .pt-tipc,.pt-why:focus .pt-tipc{opacity:1;visibility:visible}
.pt-tipc{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);
  width:272px;max-width:min(272px,calc(100vw - 56px));
  background:#16161f;border:var(--line);border-radius:var(--r-md);padding:12px 14px;
  font-family:var(--p-sans);font-size:var(--fs-1);font-weight:400;line-height:1.55;color:var(--p-body);
  text-align:left;letter-spacing:0;text-transform:none;opacity:0;visibility:hidden;
  transition:opacity var(--dur-1);z-index:60;pointer-events:none;
  box-shadow:0 12px 32px rgba(0,0,0,.55)}
@media(max-width:700px){.pt-tipc{left:auto;right:-6px;transform:none}}

/* ── sparkline ───────────────────────────────────────────────────────── */
.pt-spark{display:block;width:100%;height:34px;overflow:visible}
.pt-spark .bars rect{opacity:.92}
.pt-spark .base{stroke:rgba(240,232,213,.14);stroke-width:1;vector-effect:non-scaling-stroke}
.pt-spark-e{font-size:var(--fs-1);color:var(--p-dim);line-height:34px}

/* ── chart ───────────────────────────────────────────────────────────── */
.pt-chart{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px}
.pt-chart-y{position:relative;height:200px;min-width:34px;font-size:var(--fs-1);
  color:var(--p-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.pt-chart-y span{position:absolute;right:0;transform:translateY(-50%);line-height:1}
.pt-plot{position:relative;height:200px;min-width:0}
.pt-plot svg{display:block;width:100%;height:100%}
.pt-plot .grid{stroke:var(--p-line2);stroke-width:1;shape-rendering:crispEdges}
.pt-plot .axis{stroke:var(--p-line);stroke-width:1;shape-rendering:crispEdges}
.pt-plot .bar{transition:filter var(--dur-1);pointer-events:none}
.pt-plot .bar.zero{fill:rgba(240,232,213,.07)}
.pt-plot .hit{fill:transparent;cursor:pointer}
.pt-plot .hit:hover + .bar,.pt-plot .hit:focus + .bar{filter:brightness(1.32)}
.pt-plot .hit:focus{outline:none}
.pt-xaxis{grid-column:2;display:flex;justify-content:space-between;margin-top:10px;
  font-size:var(--fs-1);color:var(--p-dim);white-space:nowrap;gap:8px;overflow:hidden}

.pt-tip{position:absolute;pointer-events:none;z-index:30;transform:translate(-50%,-100%);
  background:#16161f;border:var(--line);border-radius:var(--r-sm);padding:8px 11px;
  font-size:var(--fs-1);line-height:1.45;color:var(--p-body);white-space:nowrap;
  box-shadow:0 10px 26px rgba(0,0,0,.55);opacity:0;transition:opacity var(--dur-1)}
.pt-tip.on{opacity:1}
.pt-tip b{display:block;color:var(--p-gold);font-weight:600;font-variant-numeric:tabular-nums}

/* ── rows ────────────────────────────────────────────────────────────── */
.pt-row{display:grid;gap:3px 14px;padding:13px 0;border-bottom:var(--line);
  align-items:start}
.pt-row:first-of-type{padding-top:0}
.pt-row:last-child{border-bottom:none;padding-bottom:0}
.pt-ex{grid-template-columns:auto minmax(0,1fr) auto}
.pt-2col{grid-template-columns:minmax(0,1fr) auto}
.pt-3col{grid-template-columns:auto minmax(0,1fr) auto}
.pt-dot{width:7px;height:7px;border-radius:var(--r-pill);background:var(--p-gold);margin-top:6px;flex-shrink:0}
.pt-dot.ok{background:var(--p-gold-dim)}
.pt-dot.warn{background:var(--p-gold);box-shadow:0 0 0 3px rgba(201,168,76,.16)}
.pt-dot.off{background:rgba(240,232,213,.22)}
.pt-dot.bad{background:var(--p-bad)}
.pt-t{font-size:var(--fs-2);color:var(--p-body);line-height:1.55}
.pt-meta{font-size:var(--fs-1);color:var(--p-dim);line-height:1.5}
.pt-row > .pt-meta:last-child{white-space:nowrap;text-align:right}
.pt-link{color:var(--p-gold);text-decoration:none;border-bottom:var(--line-strong);
  font-size:var(--fs-1);white-space:nowrap;background:none;border-left:0;border-right:0;border-top:0;
  padding:0;cursor:pointer;font-family:var(--p-sans)}
.pt-link:hover{border-bottom-color:var(--p-gold)}
.pt-link:focus-visible{outline:2px solid var(--p-gold);outline-offset:2px}

/* ── automation cards ────────────────────────────────────────────────── */
.pt-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px;
  margin-top:18px}
.pt-card{display:flex;flex-direction:column;width:100%;text-align:left;
  background:var(--p-surface);border:var(--line);border-radius:var(--r-md);
  padding:var(--p-pad);cursor:pointer;font-family:var(--p-sans);color:inherit;min-width:0;
  transition:background var(--dur-2) var(--p-ease),border-color var(--dur-2)}
.pt-card:hover{background:var(--p-surface-2);border-color:rgba(240,232,213,0.5)}
.pt-card:focus-visible{outline:2px solid var(--p-gold);outline-offset:2px}
.pt-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pt-card-n{font-family:var(--p-serif);font-size:var(--fs-5);font-weight:600;line-height:1.2;
  color:var(--p-cream);min-width:0}
/* the description takes up the slack, so a card with a one-line description
   still has its figures and its Open row level with its neighbours */
.pt-card-d{margin:9px 0 0;font-size:var(--fs-2);line-height:1.6;color:var(--p-dim);flex:1 1 auto}
/* A value line and a sub-line in every column, the sub-line present even when
   empty, so the sparkline and the Open row sit at the same height in every
   card of a row. */
.pt-card-s{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
  margin-top:18px;padding-top:16px;border-top:var(--line)}
.pt-cs{min-width:0}
.pt-card-ss{margin-top:3px;font-size:var(--fs-1);color:var(--p-dim);
  line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-card-s > div{min-width:0}
.pt-card-sv{font-size:var(--fs-2);color:var(--p-body);margin-top:4px;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pt-card-sp{margin-top:15px}
.pt-card-go{margin-top:14px;font-size:var(--fs-1);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--p-gold);display:flex;align-items:center;gap:7px}
.pt-card-go svg{width:13px;height:13px;transition:transform var(--dur-2) var(--p-ease)}
.pt-card:hover .pt-card-go svg{transform:translateX(3px)}

/* Status reads as a mark, not a capsule: a 5px square of the state colour
   and the word. Nothing outlined, nothing to align a border against. */
.pt-st{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  font-family:var(--p-sans);font-size:var(--fs-1);font-weight:600;
  letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--p-dim);white-space:nowrap}
.pt-st i{width:5px;height:5px;border-radius:1.5px;background:currentColor;
  flex:0 0 auto}
.pt-st.ok{color:var(--p-gold)}
.pt-st.bad{color:var(--p-bad)}

/* ── back link ───────────────────────────────────────────────────────── */
.pt-back{display:inline-flex;align-items:center;gap:8px;background:none;border:0;
  padding:0;margin-bottom:16px;cursor:pointer;font-family:var(--p-sans);font-size:var(--fs-1);
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--p-dim);
  transition:color var(--dur-2)}
.pt-back:hover{color:var(--p-gold)}
.pt-back:focus-visible{outline:2px solid var(--p-gold);outline-offset:3px}
.pt-back svg{width:14px;height:14px}

/* ── tables ──────────────────────────────────────────────────────────── */
.pt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:0 calc(var(--p-pad) * -1);padding:0 var(--p-pad)}
.pt-table{width:100%;border-collapse:collapse;min-width:600px}
.pt-table th{font-family:var(--p-sans);font-size:var(--fs-1);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--p-dim);text-align:left;padding:0 16px 11px 0;
  border-bottom:var(--line);white-space:nowrap;cursor:pointer;user-select:none;
  transition:color var(--dur-1)}
.pt-table th:hover{color:var(--p-body)}
.pt-table th[aria-sort]{color:var(--p-gold)}
.pt-table th:focus-visible{outline:2px solid var(--p-gold);outline-offset:-2px}
.pt-table td{padding:12px 16px 12px 0;border-bottom:var(--line);font-size:var(--fs-2);
  color:var(--p-body);white-space:nowrap}
.pt-table tbody tr:last-child td{border-bottom:none}
.pt-table tbody tr{transition:background var(--dur-1)}
.pt-table tbody tr:hover{background:var(--p-surface-2)}
.pt-table td.num{font-family:var(--p-mono);font-size:var(--fs-1);font-variant-numeric:tabular-nums}

/* ── buttons ─────────────────────────────────────────────────────────── */
.pt-btn{display:inline-flex;align-items:center;gap:8px;background:var(--p-gold);color:#0a0a0a;
  border:0;border-radius:var(--r-pill);padding:11px 20px;font-family:var(--p-sans);font-size:var(--fs-1);
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;cursor:pointer;
  text-decoration:none;transition:opacity var(--dur-2)}
.pt-btn:hover{opacity:.88}
/* The site's own ghost treatment wins here by design — a doubled selector in
   tokens.css gives it a gradient, a 42% gold rule and an inset highlight.
   That is the crafted version; flattening it here would have replaced a
   considered control with a plainer one. Only the icon sizing is ours. */
.pt-btn.ghost svg{width:14px;height:14px;flex:0 0 auto}
.pt-btn[disabled]{opacity:.38;cursor:not-allowed}
.pt-btn:focus-visible{outline:2px solid var(--p-gold);outline-offset:3px}
.pt-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}

/* ── request form ────────────────────────────────────────────────────── */
.pt-flab{display:block;margin:15px 0 7px;font-family:var(--p-sans);font-size:var(--fs-1);
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--p-dim)}
.pt-in{width:100%;background:var(--p-bg);border:var(--line);border-radius:var(--r-md);
  padding:11px 13px;font-family:var(--p-sans);font-size:var(--fs-2);color:var(--p-cream);
  transition:border-color var(--dur-2),box-shadow var(--dur-2)}
.pt-in:focus{outline:none;border-color:var(--p-gold-dim);box-shadow:0 0 0 3px rgba(201,168,76,.10)}
textarea.pt-in{resize:vertical;min-height:100px;line-height:1.6}
.pt-note{font-size:var(--fs-1);color:var(--p-dim)}
.pt-note.on{color:var(--p-gold)}

/* ── empty state ─────────────────────────────────────────────────────── */
.pt-empty{text-align:center;padding:64px 24px;max-width:520px;margin:0 auto}
.pt-empty svg{width:34px;height:34px;color:var(--p-gold);opacity:.5;margin-bottom:18px}
.pt-empty h3{font-family:var(--p-serif);font-size:var(--fs-6);font-weight:600;margin:0 0 12px;
  color:var(--p-cream)}
.pt-empty p{margin:0;font-size:var(--fs-2);line-height:1.8;color:var(--p-dim)}

/* ── statements ──────────────────────────────────────────────────────── */
.pt-stmt{background:var(--p-surface);border:var(--line);border-radius:var(--r-md);
  padding:30px;margin-top:18px}
.pt-stmt h3{font-family:var(--p-serif);font-size:var(--fs-7);font-weight:600;margin:0;color:var(--p-cream)}
.pt-stmt h4{font-family:var(--p-sans);font-size:var(--fs-1);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--p-dim);margin:26px 0 11px}
.pt-stmt p{font-size:var(--fs-2);line-height:1.8;color:var(--p-body);margin:0}
.pt-stmt ul{margin:0;padding-left:19px}
.pt-stmt li{font-size:var(--fs-2);line-height:1.8;color:var(--p-body);margin-bottom:5px}
.pt-stmt-sub{font-size:var(--fs-1);color:var(--p-dim);margin-top:7px}
.pt-letterhead,.pt-foot{display:none}

/* ── live ops map ────────────────────────────────────────────────────── */
/* The node labels are SVG text in user units, so they scale with the map.
   Below ~420px of drawn width they fall under the 12px floor — hold that
   width and let the panel scroll instead of letting the type shrink. */
.pt-map{width:100%;min-width:420px;max-width:820px;height:auto;display:block;margin:0 auto}
.pt-map .edge{stroke:var(--p-gold);stroke-opacity:.30;stroke-width:.5;fill:none}
.pt-map .node{fill:var(--p-gold);fill-opacity:.55}
.pt-map .node.held{fill-opacity:1}
.pt-map .ring{fill:none;stroke:var(--p-gold);stroke-width:.45;stroke-opacity:.5}
.pt-map text{font-family:var(--p-sans);font-size:3px;font-weight:600;letter-spacing:.1em;
  fill:var(--p-cream);fill-opacity:.58}
.pt-map .held-t{fill-opacity:.95}

/* ═══ RESPONSIVE ════════════════════════════════════════════════════════ */
@media(max-width:1180px){
  .pt-grid{grid-template-columns:1fr}
  .pt-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  /* the sidebar becomes a bottom tab bar */
  .pt-app{display:block}
  .pt-main{margin-left:0}
  .pt-side{top:auto;right:0;bottom:0;width:auto;flex-direction:row;
    border-right:0;border-top:var(--line);overflow:visible;
    padding-bottom:env(safe-area-inset-bottom,0)}
  .pt-brand,.pt-who,.pt-side-f{display:none}
  /* Equal columns clipped "Automations" while "Reports" left room spare.
     Size each item to its own label instead and share what is left. */
  .pt-nav{flex-direction:row;padding:6px 4px;gap:2px;justify-content:space-between;width:100%}
  .pt-navi{width:auto;flex:0 1 auto;flex-direction:column;gap:5px;padding:8px 6px;
    border-radius:var(--r-sm);font-size:var(--fs-1);font-weight:600;letter-spacing:0;
    text-align:center;min-width:0}
  .pt-navi span{overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
  .pt-navi-c{position:absolute;top:4px;left:50%;margin:0;transform:translateX(3px);
    font-size:var(--fs-1);padding:0 5px;line-height:17px;min-width:17px}
  .pt-content{padding:20px 18px 108px}   /* clear the bar */
  .pt-bar-in{padding:14px 18px}
  .pt-title{font-size:var(--fs-6);width:100%;margin-right:0}
  .pt-upd{text-align:left}
}
/* At 320px five 12px labels cannot all fit, and shrinking them equally clips
   every one. Give the padding back to the text first. */
@media(max-width:360px){
  .pt-nav{padding:6px 2px;gap:0}
  .pt-navi{padding:8px 3px}
}
@media(max-width:620px){
  .pt-tiles{grid-template-columns:1fr}
  .pt-cards{grid-template-columns:1fr}
  .pt-val{font-size:var(--fs-7)}
  .pt-stmt{padding:22px 18px}
  .pt-stmt h3{font-size:var(--fs-6)}
  .pt-card-s{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .pt *,.pt-side *,.pt-bar *{transition:none!important;animation:none!important}
  .pt-card:hover .pt-card-go svg{transform:none}
}

/* ═══ PRINT — A4 statements ═════════════════════════════════════════════ */
@media print{
  /* Re-point the palette at ink on paper. The statement markup references the
     variables inline, so overriding the variables catches those too — styling
     elements alone left them a pale cream that printed almost invisibly. */
  :root{
    --p-bg:#fff; --p-surface:#fff; --p-surface-2:#fff;
    --p-cream:#111; --p-body:#222; --p-dim:#4a4a4a; --p-gold:#6B5310;
    --p-line:rgba(0,0,0,.20); --p-line2:rgba(0,0,0,.10);
    --p-blue:#333; --p-bad:#7A2114; --p-off:#555; --p-gold2:#6B5310;
    --cream:#111; --text:#222; --text-2:#333; --text-3:#4a4a4a;
    --line:1px solid rgba(0,0,0,.2); --line-colour:rgba(0,0,0,.2);
  }
  @page{size:A4;margin:18mm 16mm}
  html,body{background:#fff!important;color:#111}
  .pt-side,.pt-bar,.pt-range,.pt-actions,.pt-form,.pt-back,.pt-no-print{display:none!important}
  .pt-app{display:block}
  .pt-main{margin-left:0}
  .pt-content{padding:0;max-width:none}
  .pt-stmt{background:#fff;border:0;border-radius:0;padding:0;margin:0;
    break-after:page;page-break-after:always}
  .pt-stmt:last-child{break-after:auto;page-break-after:auto}
  .pt-stmt h3,.pt-stmt h4{color:#111}
  .pt-stmt p,.pt-stmt li,.pt-stmt td{color:#222}
  .pt-stmt h4{border-bottom:1px solid #ddd;padding-bottom:5px}
  .pt-scroll{overflow:visible;margin:0;padding:0}
  .pt-table{min-width:0}
  .pt-table th,.pt-table td{border-color:#ddd;color:#222;white-space:normal}
  .pt-table tbody tr:hover{background:none}
  .pt-letterhead{display:block;border-bottom:2px solid #111;padding-bottom:9px;margin-bottom:22px}
  .pt-letterhead .lh-mark{font-family:var(--font-logo);font-size:var(--fs-3);letter-spacing:.32em;color:#111}
  .pt-letterhead .lh-sub{font-size:10pt;color:#4a4a4a;margin-top:3px}
  .pt-foot{display:block;margin-top:26px;padding-top:9px;border-top:var(--line);
    font-size:9pt;color:#4a4a4a}
  .pt-st{color:#333}
  a{color:#111;text-decoration:none}
}

/* ══ MINIMAL PASS ══════════════════════════════════════════════════════════
   The brief: like the wordmark in the hero — Cinzel, letterspaced, flat, no
   container around it. So every pill, chip, tile and rounded well in the
   shell comes off. What marks state is type, a hairline and the gold, in
   that order. Nothing here is a new component; it is the same shell with
   its boxes removed. */

/* identity: the company set like the wordmark, no gold tile beside it */
.pt-who{display:block}
.pt-who-mark{display:none}
.pt-who-txt{display:block}
.pt-who-co{font-family:var(--font-logo);font-size:var(--fs-2);font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cream);line-height:1.3}
.pt-who-sub{display:block;margin-top:7px;font-size:var(--fs-1);letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3)}

/* search: a line of type over a hairline, not a well */
.pt-find{border:0;border-bottom:var(--line);border-radius:0;background:none;
  width:calc(100% - 24px);margin:16px 12px 4px;padding:0 0 9px}
.pt-find:hover{border-color:rgba(201,168,76,.45);color:var(--cream)}
.pt-kbd{border:0;border-radius:0;background:none;padding:0;height:auto;
  letter-spacing:.14em;opacity:.7}

/* nav: the active row is named by a gold rule and cream type */
.pt-navi{border-radius:0;padding:10px 12px}
.pt-navi[aria-current]{background:none;color:var(--cream)}
.pt-navi::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:var(--gold);transform:scaleY(0);transform-origin:center;
  transition:transform var(--dur-2) var(--ease)}
.pt-navi[aria-current]::before{transform:scaleY(1)}
.pt-navi:hover{background:none;color:var(--cream)}

/* counts: a numeral in gold, not a disc */
.pt-navi-c{min-width:0;height:auto;padding:0;border-radius:0;background:none;
  color:var(--gold);font-size:var(--fs-1);font-weight:var(--fw-semi);
  letter-spacing:.1em;font-variant-numeric:tabular-nums}

/* the system tree */
.pt-sub{border-radius:0}
.pt-sub:hover{background:none;color:var(--cream)}
.pt-sub[aria-current]{background:none;color:var(--gold)}

/* the way out: type over a rule */
.pt-out{border:0;border-top:var(--line);border-radius:0;background:none;
  padding:16px 0 0;width:100%;text-align:left;letter-spacing:var(--ls-caps)}
.pt-out:hover{background:none;color:var(--gold)}

/* demo note: a word, not a badge */
.pt-demo{border:0;border-radius:0;background:none;padding:0;
  letter-spacing:.2em;opacity:.9}

/* range: plain type, the chosen one underlined in gold */
.pt-seg{background:none;border:0;border-radius:0;padding:0;gap:0}
.pt-chip{border-radius:0;padding:5px 0;margin-right:18px;border-bottom:1px solid transparent;
  letter-spacing:.1em}
.pt-chip:last-child{margin-right:0}
.pt-chip[aria-pressed="true"]{background:none;color:var(--gold);
  border-bottom-color:var(--gold)}
.pt-chip:hover{background:none;color:var(--cream)}
/* The month picker was a bare <select>, so it painted with the operating
   system's own chrome — a bevel and a platform arrow next to hand-set type.
   appearance:none removes that; it keeps its native behaviour and keyboard
   handling and takes the chrome of everything around it. The chevron is two
   background gradients so it inherits colour on hover. */
.pt-sel{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border:0;border-bottom:var(--line);border-radius:0;background-color:transparent;
  padding:5px 20px 5px 0;letter-spacing:var(--ls-caps);text-transform:uppercase;
  font-weight:600;color:var(--p-dim);max-width:11rem;cursor:pointer;
  /* A drawn chevron. Two flat gradients side by side, which is what this was,
     make a dash, not a V. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.6 6 6.1l4.5-4.5' fill='none' stroke='%238F98AB' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:10px 7px;background-repeat:no-repeat;background-position:right 3px center;
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.pt-sel:hover{color:var(--p-gold);border-bottom-color:var(--p-gold-dim);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.6 6 6.1l4.5-4.5' fill='none' stroke='%23C9A84C' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.pt-sel option{background:#0c0c12;color:var(--p-body);
  text-transform:none;letter-spacing:0;font-weight:400}

/* the palette keeps a frame — it is a layer above the page, not part of it —
   but loses its rounding so it reads with everything else */
.pt-findbox{border-radius:0}
.pt-findr{border-radius:0}
.pt-findr:hover,.pt-findr.on{background:rgba(201,168,76,.08)}

/* Panels square off with the rest. A rounded well reads as a widget; a ruled
   rectangle reads as a page, which is what this is. Status dots stay round —
   they encode state, they are not decoration. */
.pt-panel,.pt-tile,.pt-card,.pt-box,.pt-ex,.pt-tab,.pt-stat,
.pt-findbox,.pt-sel,.pt-find{border-radius:0}
.pt-count{min-width:0;height:auto;padding:0;border-radius:0;background:none;border:0;
  color:var(--gold);font-size:var(--fs-1);font-weight:var(--fw-semi);letter-spacing:.1em;
  font-variant-numeric:tabular-nums}

/* ══ OPERATIONAL MAP ═══════════════════════════════════════════════════════
   A lane per system: where the work comes from, the system itself, and where
   it lands. Work in flight runs the cable. Flat and ruled like the rest of
   the shell — the only colour is the state. */
/* Lettering is sized in the drawing's own units, so it scales with the
   drawing. It is drawn at one size everywhere: 44rem, the width at which 13
   units is 12px. Where the panel is narrower the map scrolls sideways inside
   it; where it is wider the map sits in the middle and stays fine. */
.pt-map2{display:block;width:44rem;min-width:44rem;max-width:44rem;height:auto;margin:0 auto}
.m-col text{font-family:var(--p-sans);font-size:13px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;fill:var(--p-dim)}

.m-edge{fill:none;stroke:rgba(240,232,213,.16);stroke-width:1.5}
.m-lane{cursor:pointer}
.m-lane:hover .m-edge{stroke:rgba(201,168,76,.4)}
.m-lane:hover .m-node rect{stroke:var(--p-gold)}
.m-lane[data-on] .m-node rect{stroke:var(--p-gold)}

.m-end rect,.m-node rect{fill:rgba(255,255,255,.015);stroke:rgba(240,232,213,.16);
  stroke-width:1.5}
.m-end text{font-family:var(--p-sans);font-size:13px;font-weight:500;
  letter-spacing:.1em;text-anchor:middle;fill:var(--p-dim)}
.m-node text{font-family:var(--p-sans);font-size:14px;font-weight:500;
  text-anchor:middle;fill:var(--p-body)}
.m-node .m-sub{font-size:13px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;fill:var(--p-dim)}

/* work in flight */
.m-pk{fill:var(--p-gold)}
.m-pk-2{fill:var(--gold-bright,#E8CE82)}

/* a system that is running gets a faint standing glow behind it */
.m-halo{fill:rgba(201,168,76,.07);stroke:none}
.m-running .m-node rect:not(.m-halo){stroke:rgba(201,168,76,.45)}
.m-running .m-node text{fill:var(--p-head,#F0E8D5)}
.m-running .m-edge{stroke:rgba(201,168,76,.3)}

/* one that is holding work rings until someone looks at it */
.m-ring{fill:none;stroke:var(--p-gold);stroke-width:1.5;opacity:.5;
  animation:m-ring 2.6s ease-out infinite}
@keyframes m-ring{0%{opacity:.55;transform:scale(1)}70%{opacity:0;transform:scale(1.14)}100%{opacity:0}}
.m-held .m-node .m-sub{fill:var(--p-gold)}

/* and one that is paused says so and stops */
/* The whole lane used to sit at 42%, which took its lettering under AA. The
   drawing is dimmed; the words are set in slate at full strength. */
.m-paused rect,.m-paused .m-edge{opacity:.5}
.m-paused text{fill:var(--p-off)}
.m-paused .m-edge{stroke-dasharray:4 6}

/* ── the lane list ─────────────────────────────────────────────────── */
.op-legend{display:flex;align-items:center;gap:var(--sp-5);font-size:var(--fs-1);
  color:var(--p-dim);letter-spacing:.06em}
.op-legend span{display:inline-flex;align-items:center;gap:7px}
.op-dot{display:inline-block;width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background:var(--p-dim)}
.op-running{background:var(--p-gold)}
.op-held{background:#E8B45F;box-shadow:0 0 0 3px rgba(232,180,95,.16)}
.op-paused{background:rgba(240,232,213,.26)}

.op-b{background:none;border:0;border-bottom:1px solid transparent;border-radius:0;
  padding:3px 0;cursor:pointer;
  font-family:var(--p-sans);font-size:var(--fs-1);font-weight:600;
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--p-dim);
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.op-b:hover{color:var(--p-gold);border-bottom-color:var(--p-gold)}
.op-b:focus-visible{outline:2px solid var(--p-gold);outline-offset:3px}

.op-list{display:flex;flex-direction:column}
.op-lane{border-top:var(--line)}
.op-lane:first-child{border-top:0}
/* Each lane is its own grid, so `auto` columns were resolved per row against
   that row's own content — "Next in 30d 22h" against "Paused", RESUME against
   PAUSE — and the sparklines and times stepped in and out across the list.
   Fixed tracks make every row resolve identically. */
.op-head{display:grid;
  grid-template-columns:10px minmax(8rem,1.5fr) minmax(0,1fr) 5rem 7.25rem 10.5rem;
  align-items:center;gap:var(--sp-5);padding:16px 0}
.op-name{font-size:var(--fs-3);color:var(--p-head,#F0E8D5);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-sched{font-size:var(--fs-1);color:var(--p-dim);letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-spark{display:block;width:5rem;opacity:.75}
.op-spark svg{display:block;width:100%;height:22px}
.op-when{font-size:var(--fs-1);color:var(--p-dim);white-space:nowrap;
  font-variant-numeric:tabular-nums;text-align:right}
/* Two fixed cells: RESUME is wider than PAUSE, and with auto widths that one
   row's buttons sat left of every other row's. */
.op-acts{display:grid;grid-template-columns:5.5rem 4.5rem;align-items:center;
  justify-items:end;gap:var(--sp-4);justify-self:end}

/* one column that may shrink: a table's own minimum width must not set the lane's */
.op-body{padding:0 0 22px;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
.op-facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-5);
  margin:0;padding:16px 0 0;border-top:var(--line)}
.op-facts dt{font-size:var(--fs-1);letter-spacing:.1em;text-transform:uppercase;
  color:var(--p-dim)}
.op-facts dd{margin:6px 0 0;font-size:var(--fs-3);color:var(--p-head,#F0E8D5);
  font-variant-numeric:tabular-nums}

/* the table scrolls inside its own box on the narrowest phones; relative, so its hidden caption stays inside */
.op-scroll{position:relative;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.op-scroll:focus-visible{outline:2px solid var(--p-gold);outline-offset:2px}
.op-runs{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
.op-runs th{text-align:left;font-size:var(--fs-1);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--p-dim);padding:0 var(--sp-5) 8px 0;
  border-bottom:var(--line)}
.op-runs td{padding:9px var(--sp-5) 9px 0;color:var(--p-body);
  border-bottom:1px solid rgba(240,232,213,.05);
  font-family:var(--p-mono,var(--p-sans));font-variant-numeric:tabular-nums}
.op-runs .num{text-align:right}
.op-runs tr:last-child td{border-bottom:0}

@media(max-width:1100px){
  .op-head{grid-template-columns:auto minmax(0,1fr) auto;row-gap:10px}
  .op-sched,.op-spark{display:none}
  .op-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .op-head{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .op-when{grid-column:2;text-align:left}
  .op-acts{grid-column:1/-1;justify-self:start}
  .op-b{margin:0 var(--sp-5) 0 0}
  .op-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-runs th:nth-child(3),.op-runs td:nth-child(3){display:none}
  .op-runs th,.op-runs td{padding-right:10px}
}
@media (prefers-reduced-motion:reduce){
  .m-ring{animation:none;opacity:.5}
  .m-pk{display:none}
}

/* A scale() on an SVG shape is about the user-space origin unless told
   otherwise, so the held ring was growing out of the map's top-left corner
   instead of around its own node. */
.m-ring{transform-box:fill-box;transform-origin:center}
.m-held .m-node rect:not(.m-halo):not(.m-ring){stroke:rgba(232,180,95,.55)}

/* ══ ATELIER ═══════════════════════════════════════════════════════════════
   The minimal pass above took every container off and left the shell as type
   on a flat ground, which answered "no pills" and overshot into "nothing
   here". This puts material back without putting the capsules back: square,
   ruled surfaces that sit above a lit ground, the gold handled as metal, and
   a second colour. Everything is screen-only so the A4 statement styles above
   keep their ink-on-paper values. */
@media screen{

/* ── ground: a night sky, not a fill ───────────────────────────────────── */
html,body{background:var(--p-bg)}
.pt-app{position:relative;isolation:isolate}
.pt-app::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(115% 85% at 88% -20%,rgba(52,86,150,.34) 0%,rgba(28,48,92,.16) 36%,rgba(6,10,20,0) 70%),
    radial-gradient(70% 55% at 4% 112%,rgba(201,168,76,.08) 0%,rgba(201,168,76,0) 62%),
    linear-gradient(180deg,#080C19 0%,#04060C 64%)}
/* Dither. Long, low-alpha gradients quantise into visible contour lines at
   eight bits; a little noise moves each step to a different place per row. */
.pt-app::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;opacity:.055;mix-blend-mode:overlay}
.pt-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ── the rail ──────────────────────────────────────────────────────────── */
.pt-side{background:linear-gradient(180deg,#0A1020 0%,#070B16 46%,#05080F 100%);
  border-right:1px solid rgba(143,184,232,.10);
  box-shadow:inset -1px 0 0 rgba(201,168,76,.05),28px 0 70px -40px rgba(0,0,0,.9)}
.pt-brand{gap:12px;border-bottom:1px solid rgba(143,184,232,.09)}
.pt-who{border-bottom:1px solid rgba(143,184,232,.09)}
.pt-who-sub{font-family:var(--p-mono);letter-spacing:.06em;color:var(--p-dim)}

.pt-nav-h{opacity:1;color:var(--p-dim);font-weight:600;letter-spacing:.2em}
.pt-navi{color:#A6AFC0}
.pt-navi svg{color:#7C889E;transition:color var(--dur-2) var(--p-ease)}
.pt-navi:hover svg{color:var(--p-cream)}
/* The current section is a gold rule and a wash of light off it, fading
   before it reaches the far edge: a row that is lit, not a row in a box. */
.pt-navi[aria-current]{color:var(--p-cream);
  background:linear-gradient(90deg,rgba(201,168,76,.14) 0%,rgba(201,168,76,.04) 56%,rgba(201,168,76,0) 100%)}
.pt-navi[aria-current] svg{color:var(--p-gold2)}
.pt-navi::before{width:2px;top:0;bottom:0;
  background:linear-gradient(180deg,#EFD79A,#C9A84C 50%,#8C7231)}
/* a count on the rail is always work waiting on a person, so it is ember */
.pt-navi-c{font-family:var(--p-mono);color:var(--p-bad);letter-spacing:.04em}
.pt-sub{color:var(--p-dim)}
.pt-sub[aria-current]{color:var(--p-gold2)}
.pt-subs-in::before{background:rgba(143,184,232,.12)}
.pt-find{color:var(--p-dim)}
.pt-out{color:var(--p-dim)}

/* ── the bar ───────────────────────────────────────────────────────────── */
.pt-bar{background:rgba(5,8,16,.74);border-bottom:1px solid rgba(143,184,232,.10);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
.pt-crumb-co{font-family:var(--p-sans);font-size:var(--fs-1);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--p-dim)}
.pt-upd b{font-family:var(--p-mono);font-weight:400;color:var(--p-blue);letter-spacing:.01em}
.pt-chip{color:var(--p-dim)}
.pt-chip[aria-pressed="true"]{color:var(--p-gold2);border-bottom-color:var(--p-gold)}
.pt-sel option{background:#0D1426}

/* ── the statement at the head of the overview ─────────────────────────── */
/* The portal's door is the London night the homepage film ends on. The same
   skyline stands on the masthead rule here, so the rule is its horizon: the
   frame is hung so the line where the towers meet the rooftops lands on the
   rule and everything below it is cut off. Both ends dissolve into the page
   so it reads as part of the sky, not as a picture placed on it. */
.pt-mast{position:relative;isolation:isolate;display:flex;flex-direction:column;
  justify-content:flex-end;min-height:178px;padding:6px 0 30px;margin-bottom:30px;
  border-bottom:1px solid rgba(201,168,76,.30)}
/* The box keeps the frame's own 16:9, so the city scales with the page and
   nothing is ever cropped off its sides. 78% down the frame is where the
   towers meet the rooftops: the box is clipped there and dropped by the same
   amount, which puts that line on the rule at any size. */
.pt-mast::before{content:'';position:absolute;z-index:-1;right:0;bottom:0;
  width:min(58%,780px);aspect-ratio:16/9;pointer-events:none;
  background:url(../video/poster-end.webp) center/100% 100% no-repeat;
  transform:translateY(22%);clip-path:inset(0 0 22% 0);
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 6%,rgba(0,0,0,.85) 12%,#000 17%,#000 84%,rgba(0,0,0,.5) 93%,rgba(0,0,0,0) 100%),
    linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.5) 34%,#000 48%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.3) 6%,rgba(0,0,0,.85) 12%,#000 17%,#000 84%,rgba(0,0,0,.5) 93%,rgba(0,0,0,0) 100%),
    linear-gradient(180deg,rgba(0,0,0,0) 20%,rgba(0,0,0,.5) 34%,#000 48%);
          mask-composite:intersect}
/* the second line of an engraved double rule */
.pt-mast::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1px;
  background:rgba(143,184,232,.11)}
/* the statement keeps to its own side; a longer one wraps before it reaches
   the towers */
.pt-mast-l{min-width:0;width:100%}
.pt-eyebrow{display:flex;align-items:center;gap:13px;flex-wrap:wrap;font-family:var(--p-sans);
  font-size:var(--fs-1);font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:var(--p-gold)}
.pt-eyebrow::before{content:'';flex:0 0 auto;width:30px;height:1px;
  background:linear-gradient(90deg,var(--p-gold),rgba(201,168,76,.18))}
.pt-mast-t{margin:16px 0 0;font-family:var(--p-serif);font-weight:500;
  font-size:clamp(26px,2.6vw,40px);line-height:1.14;letter-spacing:-.005em;
  color:var(--p-cream);text-wrap:balance;max-width:max(46%,24rem)}
.pt-mast-t em{display:block;font-style:italic;font-weight:400;color:var(--p-gold2)}
.pt-mast-d{font-family:var(--p-mono);font-size:var(--fs-1);font-weight:400;
  color:var(--p-blue);letter-spacing:.06em;text-transform:none;
  padding-left:13px;border-left:1px solid rgba(143,184,232,.22)}

/* ── surfaces ──────────────────────────────────────────────────────────────
   A panel is a sheet lit from above: a hair lighter at its top edge, a
   highlight along that edge, and a shadow under it. The outline alone, on a
   fill two points off the ground, was why nothing read as being on anything. */
.pt-panel,.pt-card,.pt-stmt,.pt-tiles{
  background:linear-gradient(180deg,rgba(18,27,49,.76) 0%,rgba(10,15,28,.76) 100%);
  border:1px solid var(--p-hair);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 28px 56px -34px rgba(0,0,0,.88)}
.pt-panel-h{margin-bottom:8px;padding-bottom:16px;border-bottom:1px solid rgba(143,184,232,.09)}
.pt-panel-h + .pt-chart,.pt-panel-h + .pt-scroll,.pt-panel-h + p{margin-top:20px}
.pt-panel-h .op-b{margin-left:var(--sp-5)}
.pt-panel-h h2{display:flex;align-items:center;gap:12px;letter-spacing:.2em;color:var(--text-2)}
.pt-panel-h h2::before{content:'';flex:0 0 auto;width:20px;height:1px;
  background:linear-gradient(90deg,var(--p-gold2),rgba(201,168,76,.5))}
.pt-count{font-family:var(--p-mono);color:var(--p-gold2);letter-spacing:.04em}

/* ── the ledger band ───────────────────────────────────────────────────────
   Four figures on one ruled sheet rather than four boxes with a gap between
   them, with the corner marks of a mounted print. */
.pt-tiles{position:relative;gap:0}
.pt-tiles::before,.pt-tiles::after{content:'';position:absolute;width:17px;height:17px;
  pointer-events:none}
.pt-tiles::before{top:-1px;left:-1px;border-top:1px solid var(--p-gold);border-left:1px solid var(--p-gold)}
.pt-tiles::after{right:-1px;bottom:-1px;border-right:1px solid var(--p-gold);border-bottom:1px solid var(--p-gold)}
.pt-tile{background:none;border:0;border-left:1px solid rgba(143,184,232,.10);gap:0;
  padding:26px 26px 22px;box-shadow:none}
.pt-tile:first-child{border-left:0}
.pt-tile:hover{background:linear-gradient(180deg,rgba(201,168,76,.07),rgba(201,168,76,0) 78%);
  border-color:rgba(143,184,232,.10)}
.pt-tile-h{display:flex;align-items:center;gap:11px;min-height:26px}
.pt-tile .pt-lab{letter-spacing:.16em}
/* an icon is set on a plate, square like everything else here, lit the same
   way as the buttons: a rim, a faint fill, a highlight on the top edge */
.pt-plate{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:26px;height:26px;border-radius:2px;color:var(--p-gold2);
  border:1px solid rgba(201,168,76,.32);
  background:linear-gradient(180deg,rgba(201,168,76,.17),rgba(201,168,76,.03));
  box-shadow:inset 0 1px 0 rgba(255,244,214,.16)}
.pt-plate svg{width:14px;height:14px}
.pt-val{margin-top:20px;font-weight:500;font-size:clamp(34px,3.1vw,48px);letter-spacing:-.01em;
  font-feature-settings:"lnum" 1,"tnum" 1}
.pt-val.sm{font-size:var(--fs-6)}
/* The leading figure in gold leaf. `color` stays a real gold underneath, so
   it is still legible wherever background-clip is not honoured. */
.pt-val.metal{color:var(--p-gold2);
  background:linear-gradient(180deg,#F8E7B6 0%,#DDBD63 46%,#A9883A 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pt-val.ember{color:var(--p-bad)}
.pt-tile.is-ember .pt-spark .bars{fill:var(--p-bad)}
.pt-delta{margin-top:10px}
.pt-delta.up{color:var(--p-gold2)}
.pt-tile-sp{padding-top:22px}
.pt-spark .base{stroke:rgba(143,184,232,.16)}
.pt-why{border-radius:2px}
/* The site's gold button is a capsule; in here everything is square and
   ruled, and the sign-in button on the door is the same metal with a 2px
   corner. Same gold, same light, the portal's corner. */
.pt-app .pt-btn.pt-btn{border-radius:2px}
/* An unavailable control was the gold button at 38%: a smudge with unreadable
   lettering. It is drawn as what it is, an outline that does nothing. */
.pt-app .pt-btn.pt-btn[disabled]{opacity:1;background:none;background-image:none;
  border:1px solid rgba(143,184,232,.22);color:var(--p-dim);box-shadow:none;
  text-shadow:none;transform:none}
.pt-tipc,.pt-tip{background:#0E1629;border:1px solid rgba(201,168,76,.30);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.8)}

/* ── rows ──────────────────────────────────────────────────────────────── */
.pt-row{padding:15px 0;border-bottom:1px solid rgba(143,184,232,.08)}
.pt-t{color:var(--p-cream)}
/* whatever sits at the end of a row is a time, and times are mono and blue */
.pt-row > .pt-meta:last-child{font-family:var(--p-mono);color:var(--p-blue);letter-spacing:.01em}
/* State is a small diamond everywhere it appears: in a row, in a status
   mark, in the legend. One shape, three colours. */
.pt-dot,.op-dot,.pt-st i{width:6px;height:6px;border-radius:1px;transform:rotate(45deg)}
.pt-dot{margin-top:8px}
.pt-dot.ok{background:var(--p-gold)}
.pt-dot.warn,.pt-dot.bad{background:var(--p-bad);box-shadow:0 0 0 3px rgba(240,144,122,.16)}
.pt-dot.off{background:var(--p-off)}
.pt-st{color:var(--p-off)}
.pt-st.ok{color:var(--p-gold2)}
.pt-st.bad{color:var(--p-bad)}
.pt-st.info{color:var(--p-blue)}

/* ── the chart ─────────────────────────────────────────────────────────── */
.pt-chart-y,.pt-xaxis{font-family:var(--p-mono);letter-spacing:.01em}
.pt-plot .grid{stroke:rgba(143,184,232,.07)}
.pt-plot .axis{stroke:rgba(143,184,232,.24)}
.pt-plot .bar.zero{fill:rgba(143,184,232,.11)}
.pt-tip b{color:var(--p-gold2);font-family:var(--p-mono)}

/* ── system cards ──────────────────────────────────────────────────────── */
.pt-card{transition:transform var(--dur-2) var(--p-ease),border-color var(--dur-2),
  box-shadow var(--dur-2) var(--p-ease)}
.pt-card:hover{background:linear-gradient(180deg,rgba(24,35,62,.82) 0%,rgba(12,18,33,.82) 100%);
  border-color:rgba(201,168,76,.42);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 34px 60px -30px rgba(0,0,0,.9)}
.pt-card-s{border-top:1px solid rgba(143,184,232,.09)}
.pt-card-sv{font-family:var(--p-mono);font-size:var(--fs-1);color:var(--p-cream);letter-spacing:.01em}
.pt-card-go{color:var(--p-gold2)}

/* ── tables and forms ──────────────────────────────────────────────────── */
.pt-table th{letter-spacing:.16em;border-bottom:1px solid rgba(143,184,232,.16)}
.pt-table td{border-bottom:1px solid rgba(143,184,232,.07)}
.pt-table tbody tr:hover{background:rgba(201,168,76,.05)}
.pt-table td.num{color:var(--p-cream)}
.pt-in{background:rgba(4,6,12,.55);border:1px solid rgba(143,184,232,.17);border-radius:2px}
.pt-in:focus{border-color:rgba(201,168,76,.6);box-shadow:0 0 0 3px rgba(201,168,76,.12)}
/* the priority picker loses the platform arrow the same way the month picker did */
select.pt-in{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.6 6 6.1l4.5-4.5' fill='none' stroke='%238F98AB' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:10px 7px;background-repeat:no-repeat;background-position:right 14px center}
select.pt-in option{background:#0D1426;color:var(--p-body)}
.pt-findbg{background:rgba(2,4,9,.68)}
.pt-findbox{background:#0D1426;border:1px solid rgba(201,168,76,.34)}

/* ── live ops ──────────────────────────────────────────────────────────── */
.m-edge{stroke:rgba(143,184,232,.20)}
.m-end rect,.m-node rect{fill:rgba(143,184,232,.035);stroke:rgba(143,184,232,.22)}
.m-running .m-node rect:not(.m-halo){stroke:rgba(201,168,76,.62)}
.m-running .m-edge{stroke:rgba(201,168,76,.36)}
.m-held .m-node .m-sub{fill:var(--p-bad)}
.m-ring{stroke:var(--p-bad)}
.op-dot{background:var(--p-off)}
.op-running{background:var(--p-gold)}
.op-held{background:var(--p-bad);box-shadow:0 0 0 3px rgba(240,144,122,.16)}
.op-paused{background:var(--p-off)}
.op-sched,.op-when{font-family:var(--p-mono);letter-spacing:.01em}
.op-when{color:var(--p-blue)}
.op-lane{border-top:1px solid rgba(143,184,232,.08)}

/* the statement is a sheet like the rest */
.pt-stmt{border-radius:0}
.pt-stmt h4{color:var(--text-2);letter-spacing:.2em}

/* ── signed off ────────────────────────────────────────────────────────── */
.pt-colo{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:46px;padding-top:18px;
  border-top:1px solid rgba(143,184,232,.09);font-family:var(--p-sans);
  font-size:var(--fs-1);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--p-dim)}
.pt-colo span:first-child{font-family:var(--font-logo);letter-spacing:.3em;color:var(--p-gold)}

/* ── arriving ──────────────────────────────────────────────────────────── */
@keyframes pt-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pt-content[data-enter] > *{animation:pt-rise .62s cubic-bezier(.2,.7,.2,1) both}
.pt-content[data-enter] > *:nth-child(2){animation-delay:.06s}
.pt-content[data-enter] > *:nth-child(3){animation-delay:.12s}
.pt-content[data-enter] > *:nth-child(4){animation-delay:.18s}
.pt-content[data-enter] > *:nth-child(n+5){animation-delay:.24s}

/* ── fine print ────────────────────────────────────────────────────────────
   The shell read a size too large. Almost none of that was point size, which
   was already at 12 and 13: it was capitals set semi-bold with a quarter-em
   of air between them, display figures at 45px, and padding to match. The
   floor stays at 12px. What changes is everything that made 12px look like
   14: the weight and tracking of the labels, the display sizes, and the room
   around them. */

/* the lockup from the main site: the mark and the word, on one line */
.pt-brand{gap:12px}
.pt-mark{flex:0 0 auto;width:24px;height:24px}
.pt-brand-n{font-size:var(--fs-1);font-weight:400;letter-spacing:.22em;line-height:1;
  color:var(--p-cream);
  background:linear-gradient(90deg,#F0E8D5,#C9A84C,rgba(240,232,213,.72),#E2C97E,#F0E8D5);
  background-size:300% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}

/* display */
.pt-val{margin-top:15px;font-size:clamp(27px,2.15vw,33px)}
.pt-val.sm{font-size:19px}
.pt-mast-t{margin-top:13px;font-size:clamp(22px,1.95vw,29px);line-height:1.16}
.pt-title{font-size:18px;font-weight:500}
.pt-card-n{font-size:16px;font-weight:500}
.pt-stmt h3{font-size:clamp(20px,1.6vw,23px);font-weight:500}
.op-name{font-size:var(--fs-2)}
.pt-who-co{font-size:var(--fs-1);letter-spacing:.2em}
.pt-who-sub{margin-top:6px}

/* labels: medium, not semi-bold, and closer set */
.pt-eyebrow{font-weight:500;letter-spacing:.18em;gap:11px}
.pt-eyebrow::before{width:24px}
.pt-panel-h h2{font-weight:500;letter-spacing:.14em;gap:10px}
.pt-panel-h h2::before{width:16px}
.pt-nav-h{font-weight:500;letter-spacing:.14em;padding:12px 12px 4px}
.pt-lab,.pt-tile .pt-lab{font-weight:500;letter-spacing:.11em}
.pt-table th{font-weight:500;letter-spacing:.11em}
.pt-stmt h4{font-weight:500;letter-spacing:.14em}
.pt-st{font-weight:500;letter-spacing:.1em}
.pt-demo{font-weight:500;letter-spacing:.14em}
.pt-crumb-co{font-weight:500;letter-spacing:.12em}
.pt-flab{font-weight:500;letter-spacing:.1em}
.pt-chip{font-weight:500;letter-spacing:.03em;margin-right:16px}
.pt-sel{font-weight:500;letter-spacing:.1em}
.op-b,.pt-card-go,.pt-back{font-weight:500;letter-spacing:.1em}
.pt-count,.pt-navi-c{font-weight:500}
.pt-colo{letter-spacing:.1em;font-weight:400;margin-top:38px}
.pt-colo span:first-child{letter-spacing:.22em}

/* reading text */
.pt-navi{font-weight:400}
.pt-navi[aria-current]{font-weight:500}
.pt-sub{font-size:var(--fs-1);padding:6px 12px 6px 30px}
.pt-t{line-height:1.45}
.pt-meta,.pt-delta{line-height:1.45}
.pt-row{padding:12px 0}
.pt-card-d{line-height:1.55}
.pt-stmt p,.pt-stmt li{line-height:1.65}
.pt-delta{margin-top:8px}

/* the icon plates and the marks follow the type down */
.pt-tile-h{gap:10px;min-height:22px}
.pt-plate{width:22px;height:22px}
.pt-plate svg{width:12px;height:12px}
.pt-tile-sp{padding-top:16px}

/* The way out is the least important thing on the rail and was set like a
   heading: capitals, semi-bold, spaced and underlined. A plain line. */
.pt-side-f{padding:10px 20px 14px;border-top:1px solid rgba(143,184,232,.09)}
.pt-out{justify-content:flex-start;padding:4px 0;border:0;text-align:left;
  font-size:var(--fs-1);font-weight:400;letter-spacing:.01em;text-transform:none;
  text-decoration:none;color:var(--p-dim)}
.pt-out:hover{color:var(--p-gold2);text-decoration:underline;text-underline-offset:3px}

/* ── room, where there is room ─────────────────────────────────────────── */
@media(min-width:901px){
  /* the rail's first rule and the bar's rule are one line across the page */
  :root{--p-side:232px}
  .pt-brand{height:57px;padding:0 20px}
  .pt-bar-in{min-height:56px;padding:8px 30px}
  .pt-who{padding:16px 20px}
  .pt-content{padding:28px 30px 56px;max-width:1500px}
  .pt-panel{padding:22px 24px 20px}
  .pt-tile{padding:22px 24px 18px}
  .pt-navi{padding:8px 12px;gap:11px}
  .pt-navi svg{width:16px;height:16px}
  .pt-chart-y,.pt-plot{height:204px}
  .pt-mast{min-height:150px;padding-bottom:26px;margin-bottom:26px}
}
/* the band folds two by two, then into a column, and its rules fold with it */
@media(max-width:1180px){
  .pt-tile:nth-child(odd){border-left:0}
  .pt-tile:nth-child(n+3){border-top:1px solid rgba(143,184,232,.10)}
}
@media(max-width:1040px){
  /* Not enough width for the statement and the city side by side: the
     statement takes the full line and the city stands under it. Percentage
     padding is measured on the masthead's own width, which is what the
     skyline's height follows. */
  .pt-mast{min-height:0;padding-bottom:calc(min(21%,118px) + 14px)}
  .pt-mast::before{width:min(100%,560px)}
  .pt-mast-t{max-width:none}
}
@media(max-width:900px){
  /* on the bottom bar the mark moves from the side of a row to the top of a tab */
  .pt-navi::before{left:24%;right:24%;top:0;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,#8C7231,#EFD79A 50%,#8C7231);
    transform:scaleX(0);transform-origin:center}
  .pt-navi[aria-current]::before{transform:scaleX(1)}
  .pt-navi[aria-current]{background:linear-gradient(180deg,rgba(201,168,76,.13),rgba(201,168,76,0))}
  .pt-side{box-shadow:0 -24px 50px -30px rgba(0,0,0,.9)}
  .pt-mast{margin-bottom:24px}
  /* The minimal pass set .pt-who{display:block} with no media scope, which
     outranked the rule that takes the identity block out of the bottom bar.
     It sat in the bar beside the tabs and pushed Reports and Support off the
     edge of the screen. */
  .pt-brand,.pt-who,.pt-side-f{display:none}
}
@media(max-width:620px){
  /* the date drops to its own line under the label, not under the rule */
  .pt-mast-d{flex-basis:100%;padding-left:35px;border-left:0;margin-top:-4px}
  .pt-tile{border-left:0;padding:22px 20px 20px}
  .pt-tile:nth-child(n+2){border-top:1px solid rgba(143,184,232,.10)}
}
}

/* ══ THE SHELL, FINISHED ═════════════════════════════════════════════════════
   Phase B. What was missing from the frame rather than from the look: a rail
   that folds to icons and remembers it, a phone bar with a "More", a palette
   that reaches everything, a drawer, toasts, a skeleton in place of the word
   "Loading", and empty views that say something.

   Motion is 150 to 250ms and eases out. Nothing loops except the skeleton,
   which stops when the data arrives. All of it is inside a no-preference
   query, so with reduced motion asked for there is none to switch off.
   Screen-only, like the layer above: the A4 statement styles are untouched. */
@media screen{

.pt{--m-fast:150ms;--m-med:200ms;--m-slow:250ms;--m-out:cubic-bezier(.16,.84,.3,1)}

/* ── fewer boxes ───────────────────────────────────────────────────────────
   A panel was a bordered, filled, shadowed sheet, and a page of them read as
   a wall of cards. A panel is now a heading, a rule and its contents, set
   apart by space. One level of raised surface remains, for things that are
   objects in their own right: the figure band, a system's card, a statement,
   and whatever opens over the page. */
.pt-panel{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.pt-panel:hover{background:none;box-shadow:none}
.pt-grid{gap:40px 44px;margin-top:36px}
.pt-stack{gap:40px}
.pt-content > .pt-panel + .pt-panel,.pt-content > .pt-panel + .pt-grid,
.pt-content > .pt-panel + .pt-none,.pt-tiles + .pt-grid{margin-top:36px}
.pt-cards{margin-top:0}
.pt-content > .pt-panel + .pt-stmt,.pt-stmt + .pt-stmt{margin-top:28px}
.pt-form{background:none;border:0;box-shadow:none;padding:0}
/* the scroll strip bled into its panel's padding; the panel no longer has any */
.pt-scroll{margin-left:0;margin-right:0;padding-left:0;padding-right:0}

/* a row that opens something is a button, and behaves like one */
.pt-rowb{width:100%;background:none;border:0;border-bottom:1px solid rgba(143,184,232,.08);
  border-radius:0;text-align:left;font:inherit;color:inherit;cursor:pointer;
  padding-left:10px;padding-right:10px;margin:0 -10px;width:calc(100% + 20px);
  transition:background var(--m-fast) ease-out}
.pt-rowb:hover{background:linear-gradient(90deg,rgba(201,168,76,.09),rgba(201,168,76,0) 82%)}
.pt-rowb:focus-visible{outline:2px solid var(--p-gold);outline-offset:-2px}

/* ── the close mark ────────────────────────────────────────────────────── */
.pt-x{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;border:0;border-radius:2px;background:none;
  color:var(--p-dim);cursor:pointer;transition:color var(--m-fast) ease-out,background var(--m-fast) ease-out}
.pt-x svg{width:14px;height:14px}
.pt-x:hover{color:var(--p-cream);background:rgba(143,184,232,.08)}
.pt-x:focus-visible{outline:2px solid var(--p-gold);outline-offset:1px}

.pt-scrim{position:absolute;inset:0;background:rgba(2,4,9,.62)}

/* ── nothing here yet ──────────────────────────────────────────────────── */
.pt-none{display:grid;justify-items:start;gap:0;max-width:52ch;padding:22px 0 6px}
.pt-none .pt-plate{width:28px;height:28px;margin-bottom:14px}
.pt-none .pt-plate svg{width:14px;height:14px}
.pt-none h3{margin:0;font-family:var(--p-serif);font-size:19px;font-weight:500;line-height:1.25;
  color:var(--p-cream)}
.pt-none p{margin:7px 0 0;font-size:var(--fs-2);line-height:1.6;color:var(--p-dim)}
.pt-none p:empty{display:none}
.pt-none .pt-btn{margin-top:16px}

/* ── the onboarding checklist ──────────────────────────────────────────── */
.pt-check{list-style:none;margin:0;padding:0}
.pt-check li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;
  gap:14px;padding:13px 0;border-bottom:1px solid rgba(143,184,232,.08)}
.pt-check-b{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border:1px solid rgba(143,184,232,.34);border-radius:2px;color:var(--p-gold2)}
.pt-check-b svg{width:11px;height:11px}
.pt-check .is-done .pt-check-b{border-color:rgba(201,168,76,.5);
  background:linear-gradient(180deg,rgba(201,168,76,.2),rgba(201,168,76,.05))}
.pt-check .is-done .pt-t{color:var(--p-body)}
.pt-check li:not(.is-done) .pt-meta{color:var(--p-blue)}

/* ── loading ───────────────────────────────────────────────────────────── */
.pt-sk{display:block;max-width:100%;border-radius:2px;background:rgba(143,184,232,.09)}
.pt-loading .pt-who{display:grid;gap:9px}
.pt-loading .pt-navi{pointer-events:none}
.pt-loading .pt-bar-in{min-height:56px}
.pt-sk-mast{display:grid;gap:13px;min-height:150px;align-content:end;padding:6px 0 26px;
  margin-bottom:26px;border-bottom:1px solid rgba(201,168,76,.2)}
.pt-loading .pt-tile{gap:13px}
.pt-loading .pt-stack{gap:14px}

/* ── the rail, folded to icons ─────────────────────────────────────────── */
.pt-out svg{width:14px;height:14px;flex:0 0 auto}
.pt-out{gap:9px}
.pt-navw--more{display:none}

@media(min-width:901px){
  .pt-app[data-rail="slim"]{--p-side:60px}
  [data-rail="slim"] .pt-brand{justify-content:center;padding:0}
  [data-rail="slim"] .pt-brand-n,[data-rail="slim"] .pt-who{display:none}
  [data-rail="slim"] .pt-find{width:36px;height:34px;margin:14px auto 2px;padding:0;
    justify-content:center;border-bottom-color:transparent}
  [data-rail="slim"] .pt-find span,[data-rail="slim"] .pt-find .pt-kbd{display:none}
  [data-rail="slim"] .pt-nav{padding:10px 8px}
  /* the group headings become the rules between groups */
  [data-rail="slim"] .pt-nav-h{height:1px;padding:0;margin:9px 10px;overflow:hidden;
    background:rgba(143,184,232,.12);color:transparent;user-select:none}
  [data-rail="slim"] .pt-navi{justify-content:center;padding:10px 0;gap:0}
  [data-rail="slim"] .pt-navi-t,[data-rail="slim"] .pt-navi-x,[data-rail="slim"] .pt-subs{display:none}
  [data-rail="slim"] .pt-navi[data-within]{color:var(--p-cream);
    background:linear-gradient(90deg,rgba(201,168,76,.14),rgba(201,168,76,0))}
  [data-rail="slim"] .pt-navi[data-within] svg{color:var(--p-gold2)}
  /* a count becomes a mark: there is something here */
  [data-rail="slim"] .pt-navi-c{position:absolute;top:7px;right:11px;width:6px;height:6px;
    min-width:0;padding:0;overflow:hidden;color:transparent;background:var(--p-bad);
    transform:rotate(45deg)}
  [data-rail="slim"] .pt-side-f{padding:10px 0 14px;display:flex;justify-content:center}
  [data-rail="slim"] .pt-out{width:36px;height:34px;padding:0;justify-content:center}
  [data-rail="slim"] .pt-out span{display:none}
  [data-rail="slim"] .pt-side{overflow-x:hidden}
}

/* ── who is signed in ──────────────────────────────────────────────────── */
.pt-user{position:relative;flex:0 0 auto}
.pt-user-b{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 5px 0 3px;
  border:1px solid rgba(143,184,232,.14);border-radius:2px;background:none;color:var(--p-dim);
  cursor:pointer;transition:border-color var(--m-fast) ease-out,color var(--m-fast) ease-out}
.pt-user-b:hover,.pt-user-b[aria-expanded="true"]{border-color:rgba(201,168,76,.5);color:var(--p-cream)}
.pt-user-b:focus-visible{outline:2px solid var(--p-gold);outline-offset:2px}
.pt-user-i{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
  padding:0 4px;border-radius:2px;border:1px solid rgba(201,168,76,.32);
  background:linear-gradient(180deg,rgba(201,168,76,.17),rgba(201,168,76,.03));
  font-family:var(--p-sans);font-size:var(--fs-1);font-weight:600;letter-spacing:.03em;
  line-height:1;color:var(--p-gold2)}
.pt-user-b > svg{width:11px;height:11px;transform:rotate(90deg)}
.pt-menu{position:absolute;right:0;top:calc(100% + 9px);z-index:60;width:248px;padding:6px;
  background:#0D1426;border:1px solid rgba(201,168,76,.34);
  box-shadow:0 22px 50px -16px rgba(0,0,0,.9)}
.pt-menu-who{display:grid;gap:3px;padding:10px 10px 12px;margin-bottom:6px;
  border-bottom:1px solid rgba(143,184,232,.1)}
.pt-menu-who .pt-t{color:var(--p-cream);overflow-wrap:anywhere}
.pt-menu-who .pt-meta{overflow-wrap:anywhere}
.pt-menu-role{margin-top:5px;font-size:var(--fs-1);font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--p-gold)}
.pt-menu-i{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;
  border-radius:2px;background:none;font-family:var(--p-sans);font-size:var(--fs-2);
  color:var(--p-body);text-align:left;text-decoration:none;cursor:pointer}
.pt-menu-i svg{width:15px;height:15px;flex:0 0 auto;color:var(--p-dim)}
.pt-menu-i .pt-kbd{margin-left:auto}
.pt-menu-i:hover,.pt-menu-i:focus-visible{background:rgba(201,168,76,.11);color:var(--p-cream);outline:none}
/* from the keyboard the tint alone is too quiet a mark */
.pt-menu-i:focus-visible{outline:2px solid var(--p-gold);outline-offset:-2px}

/* ── the palette ───────────────────────────────────────────────────────── */
.pt-findbox{max-width:36rem}
button.pt-kbd{font-family:var(--p-mono);cursor:pointer}
button.pt-kbd:focus-visible{outline:2px solid var(--p-gold);outline-offset:2px}
.pt-findl{padding:6px 7px 8px;gap:1px;max-height:min(52vh,430px)}
.pt-findg{padding:10px 11px 5px;font-size:var(--fs-1);font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--p-dim)}
.pt-findr{flex:0 0 auto;border-radius:2px;color:var(--p-body)}
.pt-findr svg{color:var(--p-dim);opacity:1}
.pt-findr.on{background:linear-gradient(90deg,rgba(201,168,76,.17),rgba(201,168,76,.05));color:var(--p-cream);
  box-shadow:inset 2px 0 0 var(--p-gold)}
.pt-findr.on svg{color:var(--p-gold2)}
.pt-findr:hover{background:rgba(201,168,76,.08)}
.pt-finde p{max-width:34ch;text-align:center;line-height:1.55;color:var(--p-dim)}
.pt-findf{display:flex;flex-wrap:wrap;gap:6px 18px;padding:9px 16px;
  border-top:1px solid rgba(143,184,232,.1);font-size:var(--fs-1);color:var(--p-dim)}
.pt-findf span{display:inline-flex;align-items:center;gap:6px}
.pt-findf .pt-kbd{height:18px;padding:0 5px}

/* ── the drawer ────────────────────────────────────────────────────────── */
.pt-drw{position:fixed;inset:0;z-index:180;display:flex;justify-content:flex-end}
.pt-drawer{position:relative;display:flex;flex-direction:column;width:min(448px,100%);height:100%;
  overflow-y:auto;padding:18px 28px 30px;
  background:linear-gradient(180deg,#111B32 0%,#0B1122 46%,#080D1A 100%);
  border-left:1px solid rgba(201,168,76,.32);box-shadow:-34px 0 80px -34px rgba(0,0,0,.95)}
.pt-drw-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-right:-8px}
.pt-drw-t{margin:20px 0 0;font-family:var(--p-serif);font-size:23px;font-weight:500;line-height:1.22;
  color:var(--p-cream);text-wrap:balance}
.pt-facts{margin:22px 0 0;border-top:1px solid rgba(143,184,232,.1)}
.pt-facts > div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:14px;padding:11px 0;
  border-bottom:1px solid rgba(143,184,232,.08)}
.pt-facts dt{font-size:var(--fs-1);font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--p-dim);line-height:1.6}
.pt-facts dd{margin:0;font-size:var(--fs-2);color:var(--p-cream);line-height:1.5;overflow-wrap:anywhere}
.pt-facts-s{display:block;font-size:var(--fs-1);color:var(--p-dim)}
.pt-drw-p{margin:20px 0 0;font-size:var(--fs-2);line-height:1.6;color:var(--p-body)}
.pt-drw-f{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* ── "More", on a phone ────────────────────────────────────────────────── */
.pt-sheetw{position:fixed;inset:0;z-index:170;display:none;align-items:flex-end}
.pt-sheet{position:relative;width:100%;max-height:84vh;overflow-y:auto;
  padding:4px 14px calc(14px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,#111B32,#0A1020);border-top:1px solid rgba(201,168,76,.36);
  box-shadow:0 -30px 70px -30px rgba(0,0,0,.95)}
.pt-sheet-who{display:grid;gap:5px;padding:18px 6px 14px;border-bottom:1px solid rgba(143,184,232,.1)}
.pt-sheet-i{display:flex;align-items:center;gap:14px;width:100%;min-height:50px;padding:0 6px;
  border:0;border-bottom:1px solid rgba(143,184,232,.08);background:none;
  font-family:var(--p-sans);font-size:14px;color:var(--p-cream);text-align:left;
  text-decoration:none;cursor:pointer}
.pt-sheet-i svg{width:17px;height:17px;flex:0 0 auto;color:var(--p-dim)}
.pt-sheet-i[aria-current]{color:var(--p-gold2)}
.pt-sheet-i[aria-current] svg{color:var(--p-gold2)}
.pt-sheet-i:focus-visible,.pt-sheet-x:focus-visible{outline:2px solid var(--p-gold);outline-offset:-2px}
.pt-sheet-x{display:block;width:100%;min-height:46px;margin-top:10px;border:1px solid rgba(143,184,232,.2);
  border-radius:2px;background:none;font-family:var(--p-sans);font-size:var(--fs-1);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--p-dim);cursor:pointer}

/* ── toasts ────────────────────────────────────────────────────────────── */
.pt-toasts{position:fixed;right:22px;bottom:22px;z-index:300;display:grid;gap:8px;justify-items:end;
  pointer-events:none;font-family:var(--p-sans)}
.pt-toast{pointer-events:auto;display:flex;align-items:center;gap:12px;
  max-width:min(400px,calc(100vw - 32px));padding:8px 8px 8px 16px;
  background:#111B32;border:1px solid rgba(201,168,76,.4);border-left:2px solid var(--p-gold);
  box-shadow:0 20px 46px -18px rgba(0,0,0,.95);font-size:var(--fs-2);line-height:1.45;color:var(--p-cream)}
.pt-toast-m{flex:1 1 auto;min-width:0}

/* Something scrolled to, by a jump or by the Tab key, stops clear of the bar
   above it and, on a phone, the bar below it. */
html{scroll-padding-top:76px}
.pt-stmt{scroll-margin-top:8px}

/* ── a phone ───────────────────────────────────────────────────────────── */
@media(max-width:900px){
  /* the top bar wraps to three rows here and stays put, so it needs clearing too */
  html{scroll-padding-top:164px;scroll-padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .pt-user{display:none}
  .pt-sheetw{display:flex}
  .pt-navw--more{display:flex}
  .pt-navw--over{display:none}
  /* six across: the padding goes to the labels. Slots are equal until a
     label needs more than its share; then that slot takes what its word
     needs and the others give way, so no label is ever cut short. */
  .pt-nav{padding:6px 2px;gap:0;justify-content:space-around}
  .pt-navw{flex:1 1 0;min-width:max-content;align-items:stretch}
  .pt-navi{padding:8px 1px;font-weight:500}
  .pt-navi[aria-current]{font-weight:600}
  .pt-grid{gap:34px;margin-top:30px}
  .pt-stack{gap:34px}
  .pt-drawer{width:100%;border-left:0;padding:14px 20px calc(24px + env(safe-area-inset-bottom,0px))}
  .pt-facts > div{grid-template-columns:7rem minmax(0,1fr)}
  .pt-findf{display:none}
  .pt-toasts{left:14px;right:14px;bottom:calc(78px + env(safe-area-inset-bottom,0px));justify-items:stretch}
  .pt-toast{max-width:none}
  .pt-loading .pt-side{justify-content:center}
  .pt-loading .pt-nav{flex-direction:row}
  .pt-loading .pt-navi{flex:1 1 0;align-items:center}
  .pt-loading .pt-navi .pt-sk:last-child{width:70%!important}
}

/* a hairline between two columns, where there are two: the grid stacks to
   one column at 1180px, and a rule down the side of a stacked block is noise */
@media(min-width:1181px){
  .pt-grid:not([style]) > :nth-child(2){padding-left:44px;border-left:1px solid rgba(143,184,232,.09)}
  .pt-grid:not([style]){column-gap:44px}
}

/* ── motion ────────────────────────────────────────────────────────────── */
.pt-stage{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.pt-ghost{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0}
/* the staggered half-second rise of the layer above is replaced, not added to */
.pt-content[data-enter] > *{animation:none}

@media (prefers-reduced-motion:no-preference){
  @keyframes pt-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes pt-out{from{opacity:1}to{opacity:0}}
  @keyframes pt-fade{from{opacity:0}to{opacity:1}}
  @keyframes pt-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes pt-slide{from{transform:translateX(100%)}to{transform:none}}
  @keyframes pt-slide-back{from{transform:none}to{transform:translateX(100%)}}
  @keyframes pt-up{from{transform:translateY(100%)}to{transform:none}}
  @keyframes pt-pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  @keyframes pt-toast{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes pt-shim{from{background-position:120% 0}to{background-position:-120% 0}}

  /* a view arrives: the one before fades out over it as this one rises */
  .pt-content[data-enter]{animation:pt-in var(--m-slow) var(--m-out) both}
  .pt-ghost{animation:pt-out var(--m-fast) ease-out both}
  /* charts draw in from the left, once the view is there to draw on */
  .pt-content[data-draw] .pt-plot svg,
  .pt-content[data-draw] .pt-spark{animation:pt-draw var(--m-slow) var(--m-out) 60ms both}

  .pt-findw[data-enter] .pt-findbg,.pt-drw[data-enter] .pt-scrim,
  .pt-sheetw[data-enter] .pt-scrim{animation:pt-fade var(--m-fast) ease-out both}
  .pt-findw[data-enter] .pt-findbox,.pt-menu[data-enter]{animation:pt-pop var(--m-fast) var(--m-out) both}
  .pt-drw[data-enter] .pt-drawer{animation:pt-slide var(--m-slow) var(--m-out) both}
  .pt-drw.is-closing .pt-drawer{animation:pt-slide-back 170ms ease-in both}
  .pt-drw.is-closing .pt-scrim{animation:pt-out 170ms ease-in both}
  .pt-sheetw[data-enter] .pt-sheet{animation:pt-up var(--m-slow) var(--m-out) both}
  .pt-toast{animation:pt-toast var(--m-med) var(--m-out) both}
  .pt-toast.is-leaving{animation:pt-out var(--m-fast) ease-in both}

  /* the rail eases between its two widths */
  .pt-side{transition:width var(--m-med) var(--m-out)}
  .pt-main{transition:margin-left var(--m-med) var(--m-out)}

  /* the only thing that repeats, and only until the data is in */
  .pt-sk{background:linear-gradient(100deg,rgba(143,184,232,.07) 30%,rgba(143,184,232,.17) 50%,
    rgba(143,184,232,.07) 70%);background-size:240% 100%;animation:pt-shim 1.25s linear infinite}

  /* a card lifts a pixel and its edge warms; a button gives under the finger */
  .pt-card{transition:transform var(--m-fast) ease-out,border-color var(--m-fast) ease-out,
    background var(--m-fast) ease-out,box-shadow var(--m-fast) ease-out}
  .pt-card:hover{transform:translateY(-1px);border-color:rgba(201,168,76,.42)}
  .pt-card:active{transform:none}
  .pt-app .pt-btn.pt-btn:active:not([disabled]){transform:translateY(1px)}
}
@media (prefers-reduced-motion:reduce){
  .pt-toast,.pt-sk,.pt-drawer,.pt-sheet,.pt-menu,.pt-findbox,.pt-content,.pt-ghost{animation:none!important}
  .pt-ghost{display:none}
}
}

/* ══ WHAT A CLIENT CAN DO ════════════════════════════════════════════════════
   Phase C. The pieces the new views are built from: a row you can tick, a
   status track, a form in the drawer, a price line, a person. Each uses the
   colours and rules already here; nothing new is introduced except where a
   new kind of thing appears. Screen-only. */
@media screen{

.pt-dot.info{background:var(--p-blue);box-shadow:0 0 0 3px rgba(169,195,230,.14)}
.pt-foot-n{margin:14px 0 0;max-width:62ch;line-height:1.55}
.pt-wrap{white-space:normal;min-width:16ch}
/* A screen-reader-only label inside a table that scrolls sideways is
   positioned absolutely; without this it escapes the scroll box and widens
   the page by however far the table runs on. */
.pt-scroll{position:relative}
  /* the page region takes focus only to give the keyboard somewhere to land; it is not a control */
  .pt-content:focus{outline:none}
  /* a table wider than a phone scrolls sideways, and can be scrolled from the keyboard */
  .pt-scroll:focus-visible{outline:2px solid var(--p-gold);outline-offset:2px}
/* a system's card says when it runs, under its name */
  .pt-card-sch{margin:8px 0 0;font-family:var(--p-mono);font-size:var(--fs-1);letter-spacing:.01em;color:var(--p-dim)}
  .pt-card-sch + .pt-card-d{margin-top:7px}
/* Home, "what needs you": each kind of thing under its own label and count */
  .pt-needs-h{display:flex;align-items:baseline;gap:10px;margin:22px 0 4px;font-family:var(--p-sans);
    font-size:var(--fs-1);font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--p-dim)}
  .pt-panel-h + .pt-needs-h{margin-top:16px}
.pt-headrow{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.pt-headrow .pt-back{margin:0}
.pt-content > .pt-tiles + .pt-panel,.pt-content > .pt-grid + .pt-panel{margin-top:36px}
/* A grid column sizes to its widest content unless told otherwise, and a table
   that scrolls sideways is very wide content: it pushed the whole page out
   on a phone. One column, allowed to be narrower than what it holds. */
.pt-stack,.pt-docs{grid-template-columns:minmax(0,1fr)}
.pt-docs{display:grid;gap:36px}

/* an icon in a button is the size of its lettering, gold or ghost */
.pt-btn svg{width:14px;height:14px;flex:0 0 auto}
/* "Request a pause" is longer than "Pause" was: the two actions take the room they need */
.op-acts{grid-template-columns:auto auto;column-gap:18px}
@media(min-width:1181px){
  .op-head{grid-template-columns:10px minmax(8rem,1.4fr) minmax(0,1fr) 5rem 7.25rem auto}
}

/* a line that leads on: "All 9 in Approvals" */
.pt-more-l{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:0;border:0;background:none;
  font-family:var(--p-sans);font-size:var(--fs-1);font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--p-gold2);cursor:pointer}
.pt-more-l svg{width:13px;height:13px}
.pt-more-l:hover{color:var(--p-cream)}
.pt-more-l:focus-visible{outline:2px solid var(--p-gold);outline-offset:3px}

/* ── filters in a section head ─────────────────────────────────────────── */
.pt-filters{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.pt-filters .pt-sel{max-width:15rem}

/* ── boxes to tick ─────────────────────────────────────────────────────── */
.pt-cb,.pt-rb{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:18px;height:18px;margin:0;
  border:1px solid rgba(143,184,232,.42);border-radius:2px;background:rgba(4,6,12,.55);cursor:pointer;
  display:inline-grid;place-content:center;transition:border-color var(--m-fast) ease-out,background var(--m-fast) ease-out}
.pt-rb{border-radius:50%}
.pt-cb:hover,.pt-rb:hover{border-color:var(--p-gold)}
.pt-cb:checked{border-color:var(--p-gold);
  background:linear-gradient(180deg,rgba(201,168,76,.3),rgba(201,168,76,.1)) center/100% 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.4 9.4 7.6 12.6 13.8 5.8' fill='none' stroke='%23EAD08C' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat}
.pt-rb:checked{border-color:var(--p-gold);background:radial-gradient(circle,#EAD08C 0 36%,rgba(201,168,76,.12) 40%)}
.pt-cb:focus-visible,.pt-rb:focus-visible{outline:2px solid var(--p-gold);outline-offset:2px}
.pt-cb-x{flex:0 0 auto;width:18px}

/* an approval: a box to tick beside a row that opens */
/* Each row button here is the only row in its wrapper, so the rules that trim
   the first and last row of a list would trim both edges of every one. The
   rule under the row belongs to the wrapper, so the tick box sits on it too. */
.pt-arow{display:flex;align-items:center;gap:14px;border-bottom:1px solid rgba(143,184,232,.08)}
.pt-arow .pt-rowb{flex:1 1 auto;min-width:0;width:auto;margin:0;padding-top:13px;padding-bottom:13px;border-bottom:0}
.pt-bulk{border-bottom:1px solid rgba(143,184,232,.08)}
.pt-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:4px 0 12px}
.pt-bulk-all{display:inline-flex;align-items:center;gap:12px;font-size:var(--fs-2);color:var(--p-body);cursor:pointer}
.pt-bulk .pt-meta{flex:1 1 16rem}

/* ── forms, in the drawer and on a page ────────────────────────────────── */
.pt-dform{display:block;margin-top:6px}
.pt-drawer .pt-dform{margin-top:18px}
.pt-dform .pt-flab:first-child{margin-top:0}
.pt-flab-o{margin-left:8px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--p-dim)}
.pt-dform textarea.pt-in{resize:vertical;min-height:84px;line-height:1.55}
.pt-dform .pt-note{display:block;min-height:0;margin:10px 0 0}
.pt-dform .pt-note:empty{display:none}
.pt-dform .pt-note.on{color:var(--p-bad)}
.pt-drw-2{padding-top:18px;margin-top:22px;border-top:1px solid rgba(143,184,232,.1)}
.pt-facts-n{display:block;margin-top:6px;font-size:var(--fs-2);color:var(--p-body);font-style:italic}
/* our answer to a query, under the decision it answers; ruled in gold like a reply to a request */
.pt-facts-r{display:block;padding-left:12px;border-left:2px solid var(--p-gold);white-space:pre-wrap;line-height:1.6}
.pt-fs{border:0;padding:0;margin:0 0 6px;min-width:0}
.pt-fs legend{padding:0;margin-bottom:6px}
.pt-opt{display:flex;align-items:flex-start;gap:13px;padding:11px 0;border-bottom:1px solid rgba(143,184,232,.08);cursor:pointer}
.pt-opt > span{display:grid;gap:2px}
.pt-opt .pt-cb,.pt-opt .pt-rb{margin-top:2px}

/* ── statements: the archive and the sign-off ──────────────────────────── */
.pt-arch{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:14px}
.pt-chip-m{display:inline-block;width:6px;height:6px;margin-left:8px;background:var(--p-blue);transform:rotate(45deg) translateY(-1px)}
.pt-sign{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(143,184,232,.09)}
.pt-stmt-sign{margin-top:26px;padding-top:14px;border-top:1px solid rgba(143,184,232,.14);
  font-size:var(--fs-1);letter-spacing:.06em;color:var(--p-dim)}

/* ── documents ─────────────────────────────────────────────────────────── */
.pt-doc{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.pt-doc .pt-meta{overflow-wrap:anywhere}

/* ── requests: where each has got to ───────────────────────────────────── */
.pt-req{display:grid;gap:10px;padding:18px 0;border-bottom:1px solid rgba(143,184,232,.08)}
.pt-req-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px}
.pt-req-s{margin-left:10px;padding-left:10px;border-left:1px solid rgba(143,184,232,.22);color:var(--p-dim)}
.pt-req-d{margin:0;font-size:var(--fs-2);line-height:1.6;color:var(--p-body);max-width:74ch;white-space:pre-wrap}
.pt-reply{padding:11px 0 11px 16px;border-left:2px solid var(--p-gold);max-width:74ch}
.pt-reply p{margin:5px 0 0;font-size:var(--fs-2);line-height:1.6;color:var(--p-cream);white-space:pre-wrap}
.pt-track{display:inline-flex;align-items:center;gap:0;font-size:var(--fs-1);font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--p-dim)}
.pt-step{display:inline-flex;align-items:center;gap:8px}
.pt-step + .pt-step::before{content:'';width:22px;height:1px;margin:0 10px;background:rgba(143,184,232,.24)}
.pt-step i{width:6px;height:6px;transform:rotate(45deg);border:1px solid rgba(143,184,232,.5)}
.pt-step.is-past{color:var(--p-body)}
.pt-step.is-past i{background:var(--p-gold);border-color:var(--p-gold)}
.pt-step.is-past + .pt-step::before{background:rgba(201,168,76,.5)}
.pt-step.is-now{color:var(--p-gold2)}
.pt-step.is-now i{background:var(--p-gold2);border-color:var(--p-gold2);box-shadow:0 0 0 3px rgba(201,168,76,.16)}
.pt-track.is-declined .pt-step.is-now{color:var(--p-bad)}
.pt-track.is-declined .pt-step.is-now i{background:var(--p-bad);border-color:var(--p-bad);box-shadow:0 0 0 3px rgba(240,144,122,.16)}

/* ── billing ───────────────────────────────────────────────────────────── */
.pt-fig{font-family:var(--p-serif);font-size:24px;font-weight:500;line-height:1.1;color:var(--p-cream);
  font-feature-settings:"lnum" 1,"tnum" 1}
.pt-fig small{font-family:var(--p-sans);font-size:var(--fs-1);font-weight:400;color:var(--p-dim)}
.pt-total{align-items:baseline;border-bottom:0;padding-top:16px}
.pt-next{display:grid;gap:5px}
.pt-next .pt-fig{font-size:30px}
.pt-add{display:grid;gap:12px;justify-items:start;padding:16px 0;border-bottom:1px solid rgba(143,184,232,.08)}
.pt-add-h{display:grid;gap:3px}
.pt-add-p{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:var(--fs-2);color:var(--p-body)}
.pt-add-p b{font-family:var(--p-serif);font-size:19px;font-weight:500;color:var(--p-cream);margin-right:4px;
  font-feature-settings:"lnum" 1,"tnum" 1}
.pt-add-p small{display:block;font-size:var(--fs-1);color:var(--p-dim)}
.pt-add--pkg{border-bottom:0}

/* ── people ────────────────────────────────────────────────────────────── */
.pt-member{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:13px 0;border-bottom:1px solid rgba(143,184,232,.08)}
.pt-member-w{display:grid;gap:1px;flex:1 1 12rem;min-width:0}
.pt-member-w .pt-meta{overflow-wrap:anywhere}
.pt-member.is-off .pt-t,.pt-member.is-off .pt-user-i{opacity:.62}
.pt-member .pt-sel{max-width:9.5rem}

/* ── your engineer ─────────────────────────────────────────────────────── */
.pt-eng{display:grid;gap:2px;padding:16px 20px 14px;border-top:1px solid rgba(143,184,232,.09)}
.pt-eng-h{font-size:var(--fs-1);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--p-dim);margin-bottom:6px}
.pt-eng-a{display:grid;gap:7px;margin-top:2px}
.pt-eng-l{display:inline-flex;align-items:center;gap:9px;min-width:0;font-size:var(--fs-1);color:var(--p-body);text-decoration:none}
.pt-eng-l svg{width:14px;height:14px;flex:0 0 auto;color:var(--p-dim)}
.pt-eng-l span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-eng-l:hover{color:var(--p-gold2)}
.pt-eng-l:hover svg{color:var(--p-gold2)}
.pt-eng-l:focus-visible{outline:2px solid var(--p-gold);outline-offset:3px}
.pt-side-f{border-top:0;padding-top:4px}

/* ── the rail on a short window ─────────────────────────────────────────
   The rail is a column exactly as tall as the window. When what it holds
   was taller than that, the one piece with a fixed height gave way: the
   logo's row was squeezed to the height of the mark and sat hard against
   the top edge. Nothing at the head or the foot of the rail gives way now.
   On a shorter window the list of views is set closer so that all of it
   still shows; shorter than that it scrolls, with its last visible row
   faded while there is more below; and if even that cannot fit, the rail
   scrolls whole. */
@media(min-width:901px){
  .pt-brand,.pt-who,.pt-find,.pt-eng,.pt-side-f{flex:0 0 auto}
  /* the list is a column too, and the same holds inside it: a row or a rule
     keeps its height when the list is taller than its window */
  .pt-nav > *{flex:0 0 auto}
  .pt-nav{flex:1 1 auto;min-height:168px;overflow-x:hidden;overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:rgba(143,184,232,.22) transparent}
  .pt-nav.is-more{-webkit-mask-image:linear-gradient(#000 calc(100% - 34px),rgba(0,0,0,.12));
    mask-image:linear-gradient(#000 calc(100% - 34px),rgba(0,0,0,.12))}
  [data-rail="slim"] .pt-nav{scrollbar-width:none}
  /* the account under the logo, set closer: it names whose portal this is,
     and should not take more of the rail than the mark above it */
  .pt-who{padding:11px 20px 12px}
  .pt-who-co{display:block;letter-spacing:.14em;line-height:1.25}
  .pt-who-sub{margin-top:3px;line-height:1.35}
}
@media(min-width:901px) and (max-height:860px){
  .pt-nav{padding:10px 12px}
  .pt-navi{padding:6px 12px}
  .pt-nav-h{padding:9px 12px 3px}
  .pt-eng{padding:12px 20px 10px}
}
@media(min-width:901px) and (max-height:760px){
  .pt-nav{padding:8px 12px;gap:1px}
  .pt-navi{padding:5px 12px}
  .pt-nav-h{padding:7px 12px 2px}
  .pt-eng{padding:10px 20px 8px}
  .pt-eng-h{margin-bottom:3px}
  .pt-eng-a{gap:5px}
}
/* a small laptop: the groups keep their order and lose their labels to a
   hairline, as they do when the rail is folded, so every view still shows */
@media(min-width:901px) and (max-height:700px){
  .pt-find{margin-top:10px}
  .pt-who-sub{display:none}
  .pt-navi{padding:4px 12px}
  .pt-nav-h{height:1px;padding:0;margin:7px 12px;overflow:hidden;
    background:rgba(143,184,232,.12);color:transparent}
}
.pt-sheet-eng{display:grid;gap:4px;padding:16px 6px 8px}

/* ── the demo, seen as each role ───────────────────────────────────────── */
.pt-menu-g{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 10px 12px;margin-bottom:6px;
  border-bottom:1px solid rgba(143,184,232,.1)}
.pt-menu-l{flex:1 0 100%;font-size:var(--fs-1);color:var(--p-dim);margin-bottom:2px}
.pt-menu-r{padding:5px 10px;border:1px solid rgba(143,184,232,.2);border-radius:2px;background:none;
  font-family:var(--p-sans);font-size:var(--fs-1);color:var(--p-body);cursor:pointer}
.pt-menu-r:hover{border-color:rgba(201,168,76,.5);color:var(--p-cream)}
.pt-menu-r[aria-pressed="true"]{border-color:var(--p-gold);color:var(--p-gold2);background:rgba(201,168,76,.1)}
.pt-menu-r:focus-visible{outline:2px solid var(--p-gold);outline-offset:2px}
/* under "More" on a phone: the same three, sized for a thumb */
.pt-sheet .pt-menu-g{padding:14px 6px 16px;margin-bottom:4px;gap:8px}
.pt-sheet .pt-menu-r{flex:1 1 0;min-height:44px;padding:0 10px}

@media(min-width:901px){
  [data-rail="slim"] .pt-eng{display:none}
}
@media(max-width:900px){
  .pt-eng{display:none}
  .pt-headrow .pt-spacer{flex-basis:100%;height:0}
  .pt-arow{gap:10px}
  .pt-filters{width:100%}
  .pt-step + .pt-step::before{width:12px;margin:0 7px}
  .pt-docs{gap:30px}
  .pt-doc{grid-template-columns:1fr;gap:10px;justify-items:start}
}
@media(max-width:1180px){
  /* stacked: one column that may be narrower than a wide table inside it */
  .pt-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:520px){
  .pt-track{flex-wrap:wrap;gap:4px 0}
  .pt-bulk .pt-meta{flex-basis:100%}
  /* the age drops under the summary, so the summary has the full line */
  .pt-arow .pt-ex{grid-template-columns:auto minmax(0,1fr)}
  .pt-arow .pt-ex > .pt-meta:last-child{grid-column:2;text-align:left;white-space:normal}
}
}

/* Nothing that sits over the page belongs on the printed statement. */
@media print{
  .pt-toasts,.pt-drw,.pt-sheetw,.pt-findw,.pt-ghost,.pt-menu,.pt-user,.pt-eng{display:none!important}
  .pt-stmt-sign{margin-top:22pt;padding-top:8pt;border-top:1px solid #bbb;font-size:9pt;color:#333}
}