/* 2026-09-25a: island brandmark 28→36 (radius 8→9), mark glyph 20→24; an inline <svg> mark now
   sizes like an <img> one — it used to fill the well edge-to-edge while img marks had 4px. */
/* ============================================================================
   h//f hub chrome — the shared styles of every hub / portal page.
   Version 2026-09-17a · IMMUTABLE: a change means a NEW versioned file and a new
   <link> in the pages; never edit a deployed version in place.
   2026-09-16a: the lane island rests on --card with a grey-2 6% head (was --tint) — DESIGN.md changelog.
   2026-09-17a: island shadow 6% -> 14%, derived from the brand blue. An island carried by fill alone
     measured dL* 2.5 against the ground — below a structural step — and darkening --tint could not fix it
     without the island colliding with the white cards at dL* 5.9. Geometry is the house book's:
     X0 Y2 Blur8 Spread-2, opacity under its 40% ceiling, colour from the base rather than black.
   Spec: hf-portal/DESIGN.md · starter: TEMPLATE.html · guard: scripts/check-chrome.sh
   Pages include this file first, then keep ONLY page-specific rules inline
   (inline wins by cascade order). Generated from hub/activity/whatsnew/portal/
   login.html on 2026-09-05; the hub page set the order, the others added the
   rules it lacked. Tokens are the union of all pages (light + dark).
   ============================================================================ */
/* h//f brand family, shared asset host — same four weights as the access page. */
@font-face{font-family:"Euclid Circular B";font-weight:400;font-style:normal;font-display:swap;
    src:url("https://assets.higher-faster.com/fonts/euclid-circular-b/EuclidCircularB-Regular.woff2") format("woff2")}
@font-face{font-family:"Euclid Circular B";font-weight:500;font-style:normal;font-display:swap;
    src:url("https://assets.higher-faster.com/fonts/euclid-circular-b/EuclidCircularB-Medium.woff2") format("woff2")}
@font-face{font-family:"Euclid Circular B";font-weight:600;font-style:normal;font-display:swap;
    src:url("https://assets.higher-faster.com/fonts/euclid-circular-b/EuclidCircularB-Semibold.woff2") format("woff2")}
@font-face{font-family:"Euclid Circular B";font-weight:700;font-style:normal;font-display:swap;
    src:url("https://assets.higher-faster.com/fonts/euclid-circular-b/EuclidCircularB-Bold.woff2") format("woff2")}
/* Tokens inherited VERBATIM from the access page (login.html) so the two surfaces
     read as one product. Radius follows higher-faster.com, which uses 18px as its
     dominant card radius — the access page's 6px card is a form panel, a different
     object from a content tile. */
:root{
  /* Spacing — the house 8px grid (roadmap skill §spacing, H22): 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80.
     Layout spacing (islands, cards, sections) = multiples of 8; micro spacing inside a control = multiples of 4;
     1px hairlines and the 32px control box are the only exceptions. */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px; --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-64:64px; --sp-80:80px;
    --blue:#2A64F6;
    --blue-deep:#1E4FD6;
    --ink:#1C1C1C;
    --paper:#EAEEF8;
    --card:#FFFFFF;
    --line:#E4E6EF;
    --grey:#67707E;
    --grey-2:#98A0AC;
    --tint:#F3F5FF;
    --tint-2:#DDE3FD;
    --cel-green:#70BF44;
    --cel-navy:#253745;
    --amber-bg:#FEF7E0;
    --amber-line:#F0D48A;
    --amber-ink:#6B4E00;
    --sans:"Euclid Circular B","Avenir Next","Poppins","Century Gothic","Helvetica Neue",Arial,sans-serif;
    --mono:ui-monospace,Menlo,Consolas,monospace;
    --r-tile:18px;
    --r-panel:20px;
    --band:#2A64F6;
    --on-brand:#FFFFFF;
    --on-brand-line:rgba(255,255,255,.45);
    --on-brand-soft:rgba(255,255,255,.16);
    --on-accent:#FFFFFF;
    --icon:#2A64F6;
    --well:#EEF2FE;
    --well-line:#DDE3FD;
    --surface-logo:#FFFFFF;
    --shadow-island:0 1px 2px rgba(42,100,246,.06), 0 18px 40px -28px rgba(42,100,246,.28);
    --shadow-card:0 16px 40px -28px rgba(17,17,17,.34);
    --shadow-bar:0 10px 30px -18px rgba(16,24,40,.55);
    --b-planned-bg:#F1F2F6;
    --b-planned-line:#D9DCE5;
    --b-planned-ink:#67707E;
    --b-progress-bg:#EAF0FE;
    --b-progress-line:#C3D2FB;
    --b-progress-ink:#1E4FD6;
    --b-delivered-bg:#E6F6F3;
    --b-delivered-line:#B8E3DA;
    --b-delivered-ink:#0E6B5C;
    --b-live-bg:#EAF6E0;
    --b-live-line:#C4E5A8;
    --b-live-ink:#3D7A1A;
    --b-live-dot:#4C9A22;
    --green:#1E9E5A;
    --green-bg:#E7F4EE;
    --green-line:#BFE3CF;
    --green-ink:#1E7A48;
    --red-bg:#FDECEC;
    --red-line:#F3C1C1;
    --red-ink:#9B1C1C;
    --btn-disabled:#AEC2F5;
    --black:#111111;
  }
@media (prefers-color-scheme:dark){
  /* ---- dark palette: OS preference unless an explicit choice is stored; the explicit choice wins both ways ---- */
  :root:not([data-theme="light"]){
    --ink:#EEF1F6;
    --paper:#121826;
    --tint:#1B2231;
    --card:#252E3E;
    --line:#3A4456;
    --grey:#B7BFCD;
    --grey-2:#9BA4B6;
    --tint-2:#313C52;
    --blue:#86A8FF;
    --blue-deep:#A3BDFF;
    --band:#1B44B8;
    --on-accent:#0B0E13;
    --icon:#8FB0FF;
    --well:#233052;
    --well-line:#2F4270;
    --surface-logo:#F4F6FA;
    --shadow-island:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px -28px rgba(0,0,0,.65);
    --shadow-card:0 12px 32px -20px rgba(0,0,0,.55);
    --shadow-bar:0 10px 30px -18px rgba(0,0,0,.8);
    --b-planned-bg:#232A36;
    --b-planned-line:#333C4B;
    --b-planned-ink:#A3ADBE;
    --b-progress-bg:#1B2740;
    --b-progress-line:#2B3A5C;
    --b-progress-ink:#8FB0FF;
    --b-delivered-bg:#10302B;
    --b-delivered-line:#1E4D44;
    --b-delivered-ink:#6FD3BE;
    --b-live-bg:#14301A;
    --b-live-line:#245B2C;
    --b-live-ink:#86D97A;
    --b-live-dot:#5BC44A;
    --green:#4FCB86;
    --green-bg:#123021;
    --green-line:#1F4A33;
    --green-ink:#7FDDA6;
    --red-bg:#3A1717;
    --red-line:#6B2626;
    --red-ink:#FF9B9B;
    --amber-bg:#3A2E14;
    --amber-line:#6B5218;
    --amber-ink:#F2C96B;
    --btn-disabled:#2F4270;
    --field:#2B3546;
    --field-line:#46526A;
  }
}
:root[data-theme="dark"]{
    --ink:#EEF1F6;
    --paper:#121826;
    --tint:#1B2231;
    --card:#252E3E;
    --line:#3A4456;
    --grey:#B7BFCD;
    --grey-2:#9BA4B6;
    --tint-2:#313C52;
    --blue:#86A8FF;
    --blue-deep:#A3BDFF;
    --band:#1B44B8;
    --on-accent:#0B0E13;
    --icon:#8FB0FF;
    --well:#233052;
    --well-line:#2F4270;
    --surface-logo:#F4F6FA;
    --shadow-island:inset 0 1px 0 rgba(255,255,255,.05), 0 24px 60px -28px rgba(0,0,0,.65);
    --shadow-card:0 12px 32px -20px rgba(0,0,0,.55);
    --shadow-bar:0 10px 30px -18px rgba(0,0,0,.8);
    --b-planned-bg:#232A36;
    --b-planned-line:#333C4B;
    --b-planned-ink:#A3ADBE;
    --b-progress-bg:#1B2740;
    --b-progress-line:#2B3A5C;
    --b-progress-ink:#8FB0FF;
    --b-delivered-bg:#10302B;
    --b-delivered-line:#1E4D44;
    --b-delivered-ink:#6FD3BE;
    --b-live-bg:#14301A;
    --b-live-line:#245B2C;
    --b-live-ink:#86D97A;
    --b-live-dot:#5BC44A;
    --green:#4FCB86;
    --green-bg:#123021;
    --green-line:#1F4A33;
    --green-ink:#7FDDA6;
    --red-bg:#3A1717;
    --red-line:#6B2626;
    --red-ink:#FF9B9B;
    --amber-bg:#3A2E14;
    --amber-line:#6B5218;
    --amber-ink:#F2C96B;
    --btn-disabled:#2F4270;
    --field:#2B3546;
    --field-line:#46526A;
  }
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);
    min-height:100vh;display:flex;flex-direction:column;
    -webkit-font-smoothing:antialiased;}
/* Top bar: same fill as the ground, no shadow — a neutral chrome band that
     doesn't compete with the content panel below it. */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;
    padding:20px 32px;background:var(--paper);}
.topbar .wordmark{display:block;line-height:0}
.topbar .wordmark svg{height:38px;width:auto;display:block}
.top-right{display:flex;align-items:center;gap:16px}
a.chip,a.chip:hover{text-decoration:none}
/* chips are pills, never underlined links */ /* H16 (final, Romeo 2026-09-05): the breadcrumb TRAIL is plain text on its own row inside the band,
     left-aligned with the page title (content column); the top bar keeps wordmark left + utilities right.
     Parent crumbs = on-brand text at 85% (underline on hover, links); current = 600, no link; separators muted.
     KEEP THIS BLOCK IDENTICAL on portal.html, activity.html, whatsnew.html, hub.html. */ /* Breadcrumb, classical (NN/g 11 guidelines, Romeo 2026-09-05): links look like links —
     underlined; current page = last, not a link, bold; › separators; below the bar, above
     the title; never wraps on mobile (last two levels only). Identical block on all pages. */
.trail{display:flex;align-items:center;flex-wrap:nowrap;gap:12px;margin:0 0 12px;font-size:14px;line-height:1.4;color:var(--on-brand);white-space:nowrap;overflow:hidden}
.trail .crumb{color:var(--on-brand);opacity:1;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.55)}
@media (prefers-reduced-motion:no-preference){
  .trail a.crumb{transition:text-decoration-color 140ms ease,text-underline-offset 140ms ease}
}
.trail a.crumb:hover{text-decoration-color:var(--on-brand);text-underline-offset:3px}
/* subtle: the underline brightens and lifts 1px; the text never moves */
.trail a.crumb:focus-visible{outline:2px solid var(--on-brand);outline-offset:3px;border-radius:3px}
.trail .crumb.cur{font-weight:600;text-decoration:none;cursor:default}
.trail .sep{font-style:normal;color:var(--on-brand);opacity:.6;padding:0}
@media (max-width:720px){
  .trail > *:not(:nth-last-child(-n+3)){display:none}
}
/* last two levels on small screens */
.topbar .chip-id{border:1px solid var(--on-brand-line);color:var(--on-brand);background:transparent;cursor:default}
.topbar .chip-id .dot{width:7px;height:7px;border-radius:50%;background:var(--on-brand)}
@media (max-width:720px){
  .top-right{flex-wrap:wrap}
}
[hidden]{display:none!important}
/* guard: author display rules must never defeat the hidden attribute (leak class of 2026-08-26 / 2026-09-05) */
.chip{display:inline-flex;align-items:center;gap:8px;
    font-size:11.5px;font-weight:600;letter-spacing:.03em;
    padding:4px 12px;border-radius:999px;}
/* top-bar pills share ONE height and type size (Romeo 2026-09-05): identity chips are filled, actions outlined — same metrics as .signout */
.topbar .chip{font-size:13px;font-weight:600;letter-spacing:0;height:32px;padding:0 16px;border:1px solid transparent}
/* 1px border keeps the box the same height as the outlined action pill */
.chip-project{background:var(--cel-navy);color:#fff}
.chip-project .dot{width:7px;height:7px;border-radius:50%;background:var(--cel-green)}
.signout{font-size:13px;font-weight:500;color:var(--grey);text-decoration:none;
    display:inline-flex;align-items:center;height:32px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--card);}
.signout:hover{color:var(--ink);border-color:var(--grey-2)}
/* Workspace: one white panel on the neutral ground. */
.wrap{flex:1;padding:0 32px 40px}
.panel{max-width:1180px;margin:0 auto;background:var(--card);
    border:1px solid var(--line);border-radius:var(--r-panel);
    padding:40px 48px 48px;
  ;
    box-shadow:var(--shadow-island); /* island elevation: brand-tinted, static (2026-09-05) */}
h1{font-size:28px;font-weight:600;letter-spacing:-.01em;line-height:1.2;margin-bottom:8px;text-wrap:balance}
.sub{font-size:14px;color:var(--grey);line-height:1.55;margin-bottom:16px;max-width:62ch}
/* Draft notice: amber = provisional content, matching the access page's rate-limit
     state. Same family of meaning (temporary condition), same visual language. */
.notice{display:flex;align-items:flex-start;gap:8px;
    background:var(--amber-bg);border:1px solid var(--amber-line);border-radius:8px;
    padding:12px 16px;font-size:13px;line-height:1.5;color:var(--amber-ink);
    margin-bottom:32px;max-width:78ch;}
.notice svg{flex:none;margin-top:1px}
.notice a{color:var(--amber-ink)}
/* Tiles: the two client resources. Grid auto-fits so a third tile needs no CSS change. */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.tile{position:relative;display:flex;flex-direction:column;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r-tile);
    padding:24px 24px 24px;text-decoration:none;color:inherit;
    transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;}
.tile:hover{border-color:var(--tint-2);
    box-shadow:var(--shadow-card);
    transform:translateY(-2px);}
.tile:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.tile-icon{color:var(--icon);
    width:44px;height:44px;border-radius:12px;background:var(--well);border:1px solid var(--well-line); /* icon well: visible on a white card (tint alone was 2% off white) */
    display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.tile-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--grey-2);margin-bottom:12px}
/* H14 */
.tile-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tile-title{font-size:17px;font-weight:600;letter-spacing:-.005em}
.badge{display:inline-flex;align-items:center;gap:4px;
    font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    padding:4px 8px;border-radius:999px;
    background:var(--amber-bg);border:1px solid var(--amber-line);color:var(--amber-ink);}
.badge-team{background:var(--tint);border-color:var(--tint-2);color:var(--blue)}
.badge-public{background:var(--b-live-bg);border-color:var(--b-live-line);color:var(--b-live-ink)}
.badge-public .pdot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--b-live-dot);flex:none}
.badge-public .pdot::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:var(--b-live-dot);opacity:.35;animation:hfping 2.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes hfping{0%{transform:scale(.6);opacity:.45}70%,100%{transform:scale(1.5);opacity:0}}
.badge-progress{background:var(--b-progress-bg);border-color:var(--b-progress-line);color:var(--b-progress-ink)}
.badge-new{background:var(--b-progress-bg);border-color:var(--b-progress-line);color:var(--b-progress-ink)}
/* "N new" carries a dot, like the live badge — same 8px geometry so they read as one family, a
   different colour because they mean different things. A live dot marks a CONTINUOUS state and
   pulses for as long as it is true; an unread mark is a NOTIFICATION: it announces arrival once
   and then settles, because a count that is not changing should not keep asking for attention
   (GitHub's unread dot, Slack's badge, Linear's inbox all behave this way). One ring expansion on
   first paint, then nothing. The count itself is the information; the dot gives it peripheral
   visibility. */
.badge-new{position:relative;padding:4px 12px;gap:8px}
.badge-new::before{content:'';width:8px;height:8px;border-radius:50%;
  background:var(--b-progress-ink);flex:none}
/* the ring is anchored to the dot's own box: left = the badge's 12px padding, centred vertically */
.badge-new::after{content:'';position:absolute;left:12px;top:50%;width:8px;height:8px;
  margin-top:-4px;border-radius:50%;background:var(--b-progress-ink);pointer-events:none;
  animation:hfannounce 1.6s cubic-bezier(0,0,.2,1) 1 both}
@keyframes hfannounce{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.badge-new::after{animation:none;display:none}}
/* H14: unread count on the What's new card */
.badge-planned{background:var(--b-planned-bg);border-color:var(--b-planned-line);color:var(--b-planned-ink)}
/* status pill rides the icon row (right-aligned, one line); title gets full width */
.tile{position:relative}
.tile-head .badge{position:absolute;top:36px;right:26px;margin:0;white-space:nowrap}
.tile-head .tile-badges{position:absolute;top:36px;right:24px;display:flex;gap:8px;align-items:center}
.tile-head .tile-badges .badge{position:static}
/* H14: two badges side by side (count + gate label) */
.tile-desc{font-size:13.5px;color:var(--grey);line-height:1.55;margin-bottom:16px}
.tile-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;
    font-size:13.5px;font-weight:500;color:var(--blue);}
.tile:hover .tile-go{color:var(--blue-deep)}
.tile:hover .tile-go svg{transform:translateX(3px)}
.tile-go svg{transition:transform .16s ease}
/* Footer: industrial lockup + the access page's verified microcopy (D3, D8). */
.foot{padding:0 32px 32px;display:flex;flex-direction:column;align-items:center;gap:8px}
.service-link{display:block;line-height:0}
.service-logo{height:19px;width:auto;display:block;color:var(--blue)}
.microcopy{font-size:11.5px;color:var(--grey-2);letter-spacing:.01em;text-align:center}
.microcopy.legal{margin-top:8px}
.microcopy.legal a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.microcopy.legal a:hover{color:var(--blue);border-color:var(--blue)}
@media (prefers-reduced-motion: reduce){
  .badge-public .pdot{animation:none;opacity:1}
  .badge-public .pdot::after{animation:none;opacity:0}
  .tile,.tile-go svg{transition:none}
  .tile:hover{transform:none}
}
@media (max-width:720px){
  .topbar{padding:16px 16px;flex-wrap:wrap;gap:12px}
  .topbar .wordmark svg{height:32px}
  .wrap{padding:0 16px 32px}
  .bandpad{padding:0 16px}
  .band{padding-bottom:40px}
  .panel{padding:32px 24px 32px;border-radius:16px}
  h1{font-size:23px}
  .tiles{grid-template-columns:1fr}
  .foot{padding:0 16px 24px}
}
/* Hub-only additions: h//f-neutral chip + island-per-group layout. */
.chip-hub{background:var(--ink);color:var(--card)}
.chip-hub .dot{width:7px;height:7px;border-radius:50%;background:var(--blue)}
/* Option A: the login page's blue ground carries into a brand band that holds the
     chrome + page head; the workspace islands start on paper below and overlap the
     band edge slightly, like the gate panel sits on the login's blue. */
.band{background:var(--band);padding-bottom:48px}
/* Only the slim chrome sticks — the page head scrolls away with the band, so the
     viewport isn't taxed by a 200px pinned header. */
.topbar{position:sticky;top:0;z-index:50;background:var(--band);transition:box-shadow .18s ease}
.topbar.stuck{box-shadow:var(--shadow-bar)}
.chip-hub{background:var(--on-brand-soft);color:var(--on-brand)}
.chip-hub .dot{background:var(--on-brand)}
.signout{background:transparent;border-color:var(--on-brand-line);color:var(--on-brand)}
.signout:hover{border-color:var(--on-brand);color:var(--on-brand)}
.bandpad{padding:0 32px}
.wrap{display:flex;flex-direction:column;gap:24px;margin-top:-24px;padding-top:0}
.hubhead{max-width:1180px;margin:0 auto;width:100%;padding:4px 8px 4px}
.hubhead h1{color:var(--on-brand)}
.hubhead .sub{margin-bottom:0;max-width:none;color:var(--on-brand)}
/* Option A elevation ramp: ground (paper) < island (tint) < card (white).
     Cards read as sitting ON the island because the island is the darker step. */
.panel{width:100%;padding:32px 40px 40px;background:var(--tint);border-color:var(--tint-2);
    box-shadow:0 2px 8px -2px rgba(33,79,195,.14)}
.island-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.brandmark{width:36px;height:36px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;letter-spacing:.01em}
.bm-img{background:var(--surface-logo);border:1px solid var(--line)}
.bm-img img{width:24px;height:24px;object-fit:contain;display:block}
.island-title{font-size:20px;font-weight:600;letter-spacing:-.01em}
.island-note{font-size:13px;color:var(--grey)}
.tile-soon{border-style:dashed;pointer-events:none;background:transparent}
.tile-soon .tile-title,.tile-soon .tile-desc{color:var(--grey)}
/* env color language: blue = prod/live, green = staging (matches the favicon pair) */
.tile-staging .tile-icon{background:var(--green-bg);border-color:var(--green-line);color:var(--green)}
.tile-staging .tile-icon svg *{stroke:currentColor}
.tile-soon .tile-icon{background:var(--well);border:1px dashed var(--well-line);opacity:.5}
/* muted = same well, dashed, half opacity */
.tile-soon .tile-icon svg{opacity:.5}
.soon-note{margin-top:auto;font-size:12px;font-weight:600;color:var(--grey-2);letter-spacing:.03em;text-transform:uppercase}
/* theme segment — auto · light · dark, sliding thumb, stored as hf:theme (H13) */
.tseg{position:relative;display:inline-flex;align-items:center;height:32px;padding:3px;border:1px solid var(--on-brand-line);border-radius:999px;background:transparent}
.tseg button{position:relative;z-index:1;font:inherit;font-size:12px;font-weight:500;color:var(--on-brand);background:transparent;border:0;padding:0 12px;height:100%;border-radius:999px;cursor:pointer;opacity:.85}
.tseg button[aria-checked="true"]{opacity:1;color:var(--band)}
.tseg button:focus-visible{outline:2px solid var(--on-brand);outline-offset:2px}
.tseg .thumb{position:absolute;top:3px;bottom:3px;border-radius:999px;background:var(--on-brand);transition:left 160ms ease,width 160ms ease}
@media (prefers-reduced-motion:reduce){
  .tseg .thumb{transition:none}
}
.tseg.ground{border-color:var(--line);background:var(--card)}
.tseg.ground button{color:var(--grey)}
.tseg.ground button[aria-checked="true"]{color:var(--on-accent)}
.tseg.ground .thumb{background:var(--blue)}
/* H17 — "new version available" prompt (keep this block IDENTICAL on portal / activity / whatsnew / hub) */
.stale{position:fixed;right:24px;bottom:24px;z-index:60;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 16px;border-radius:999px;background:var(--blue);color:var(--on-accent);font-size:13px;font-weight:500;box-shadow:0 12px 32px -16px rgba(0,0,0,.45);transform:translateY(12px);opacity:0;transition:transform 160ms ease,opacity 160ms ease}
.stale.show{transform:none;opacity:1}
.stale[hidden]{display:none!important}
.stale button{font:inherit;font-size:12.5px;font-weight:600;color:var(--on-accent);background:transparent;border:1px solid currentColor;border-radius:999px;padding:0 12px;height:24px;cursor:pointer;line-height:1}
.stale button:hover{background:rgba(255,255,255,.14)}
.stale button:focus-visible{outline:2px solid var(--on-accent);outline-offset:2px}
.stale .x{border:0;padding:0 8px;font-size:16px;font-weight:500;opacity:.8}
.stale .x:hover{opacity:1;background:transparent}
@media (prefers-reduced-motion:reduce){
  .stale{transition:none;transform:none}
}
@media (max-width:720px){
  .stale{left:16px;right:16px;bottom:16px;height:auto;min-height:32px;padding:8px 8px 8px 16px;flex-wrap:wrap;justify-content:space-between}
}
/* H15 breadcrumb row: parent crumb (outlined) › current space (filled); separator collapses the 14px gap to ~8px */
.crumb-sep{font-style:normal;color:var(--on-brand);opacity:.7;font-size:15px;line-height:1;margin:0 -8px}
a.chip-project{text-decoration:none}
/* ---- Login activity (D31) — additions on top of the hub chrome ---- */
.hubhead .meta{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.03em;
    padding:4px 12px;border-radius:999px;background:var(--on-brand-soft);color:var(--on-brand)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--on-brand)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:24px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 16px 16px}
.kpi .n{font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.kpi .l{font-size:12px;color:var(--grey);margin-top:4px;letter-spacing:.01em}
.kpi .d{font-size:11.5px;color:var(--grey-2);margin-top:8px}
.kpi.warn .n{color:var(--amber-ink)}
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:24px 0 12px}
.sec h2{font-size:15px;font-weight:600;letter-spacing:-.005em}
.sec .hint{font-size:12px;color:var(--grey)}
.chartbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 16px 12px;overflow-x:auto}
.chartbox svg{display:block;width:100%;min-width:560px;height:200px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--grey);margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:8px}
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.filters select{font:inherit;font-size:13px;color:var(--ink);background:var(--card);border:1px solid var(--line);
    border-radius:999px;height:32px;padding:0 32px 0 12px;appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2367707E' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 12px center}
.filters select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tablebox{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);text-align:left;
    padding:12px 16px;border-bottom:1px solid var(--line);background:var(--paper);white-space:nowrap}
td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top;white-space:nowrap}
tr:last-child td{border-bottom:0}
td.ts{color:var(--grey);font-variant-numeric:tabular-nums}
td.ip{font-family:var(--mono);font-size:12px;color:var(--grey)}
.who{font-weight:500}
.who small{display:block;font-weight:400;color:var(--grey);font-size:12px}
.tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    padding:4px 8px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--grey)}
.tag-team{background:var(--tint);border-color:var(--tint-2);color:var(--blue)}
.tag-client{background:var(--green-bg);border-color:var(--green-line);color:var(--green-ink)}
.tag-fail{background:var(--red-bg);border-color:var(--red-line);color:var(--red-ink)}
.tag-lim,.tag-retired{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber-ink)}
.tag-dep{background:var(--b-planned-bg);border-color:var(--b-planned-line);color:var(--b-planned-ink)}
.tag-probe{color:var(--grey-2);border-style:dashed}
.tag-test{color:var(--grey-2);border-style:dashed}
.tag-you{background:var(--ink);border-color:var(--ink);color:var(--card)}
/* H9: people-first owner view */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--card);gap:2px}
.seg button{font:inherit;font-size:12.5px;font-weight:500;color:var(--grey);background:transparent;border:0;border-radius:999px;padding:4px 12px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--blue);color:var(--on-accent)}
.seg button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.rel{color:var(--ink)}
.rel small{display:block;color:var(--grey-2);font-size:11px}
.notyet{color:var(--amber-ink)}
.resend{font-size:12px;color:var(--blue);text-decoration:none;margin-left:8px;white-space:nowrap}
.resend:hover{text-decoration:underline}
.n30{font-variant-numeric:tabular-nums}
/* Event log = collapsible island, the delivery-plan lane pattern (band = click target,
     collapsed shows a one-line summary + count, circled chevron rotates). */
/* 2026-09-16a: the lane island rests on the card surface with a grey-2 6% head — the Delivery Plan's island
     rest (Romeo, 2026-09-16: one component, one rest state). Measured on the hub: ground→lane was ΔL* 2.6 on
     --tint, below a structural step; it is 5.9 on --card. Hover unchanged: --tint-2. */
.lane{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-top:24px;overflow:hidden}
.lanehead{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 16px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none;background:color-mix(in srgb, var(--grey-2) 6%, var(--card))}
.lanehead:hover{background:var(--tint-2)}
.lanehead:hover .chev{opacity:1}
.lanehead h2{margin:0;font-size:16px}
.lanehead .zsum{font-size:13px;color:var(--grey);margin-left:4px}
.lanehead .count{margin-left:auto;font-size:12px;font-weight:600;color:var(--grey);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 8px;white-space:nowrap;line-height:1}
.chev{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.55rem;height:1.55rem;border-radius:999px;border:1.5px solid currentColor;color:var(--blue);opacity:.85}
.chev svg{width:1rem;height:1rem;display:block}
@media (prefers-reduced-motion:no-preference){
  .chev{transition:transform 140ms ease}
}
.lane.collapsed .chev{transform:rotate(-90deg)}
.lane.collapsed .lanebody{display:none}
.lane.collapsed .lanehead{border-bottom:0}
.lanebody{padding:12px 16px 16px}
.lanebody .tablebox{margin-top:0}
.lanehead:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.filters label.tog{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--grey);cursor:pointer}
.filters label.tog input{accent-color:var(--blue)}
.empty{padding:24px 16px;color:var(--grey);font-size:13.5px;text-align:center}
.never{display:flex;gap:8px;flex-wrap:wrap}
.never .tag{font-size:11px;text-transform:none;letter-spacing:.01em;padding:4px 12px}
.more{display:block;width:100%;font:inherit;font-size:13px;font-weight:500;color:var(--blue);background:var(--paper);
    border:0;border-top:1px solid var(--line);padding:12px;cursor:pointer}
.more:hover{color:var(--blue-deep)}
.foot-note{font-size:12px;color:var(--grey-2);margin-top:16px;line-height:1.5}
.err{padding:24px;border:1px solid var(--amber-line);background:var(--amber-bg);color:var(--amber-ink);border-radius:14px;font-size:13.5px}
@media (max-width:720px){
  .kpis{grid-template-columns:repeat(2,1fr)}
}
.group{margin-bottom:24px}
.group-head{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.items{display:flex;flex-direction:column;gap:12px}
.item{display:grid;grid-template-columns:1fr auto;gap:8px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 16px 16px;text-decoration:none;color:inherit;
    transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease}
.item:hover{border-color:var(--tint-2);box-shadow:var(--shadow-card);transform:translateY(-2px)}
.item:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.crumbs{display:inline-flex;align-items:center;gap:8px;margin-right:12px}
.crumbs i{font-style:normal;color:var(--grey-2);font-size:13px;line-height:1}
.item.static{cursor:default}
.item.static:hover{border-color:var(--line);box-shadow:none;transform:none}
.item .t{font-size:15.5px;font-weight:600;letter-spacing:-.005em;line-height:1.3}
.item .w{font-size:13.5px;color:var(--grey);line-height:1.55;grid-column:1}
.item .m{font-size:11.5px;color:var(--grey-2);grid-column:1;font-variant-numeric:tabular-nums}
.item .go{grid-column:2;grid-row:1 / span 3;align-self:center;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--blue);white-space:nowrap}
.item:hover .go svg{transform:translateX(3px)}
.item .go svg{transition:transform .16s ease}
.item.new .t::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--blue);margin-right:8px;vertical-align:2px}
.tag-live{background:var(--b-live-bg);border-color:var(--b-live-line);color:var(--b-live-ink)}
.upto{display:flex;align-items:center;gap:12px;background:var(--green-bg);border:1px solid var(--green-line);border-radius:12px;padding:12px 16px;font-size:13.5px;color:var(--green-ink);margin-bottom:16px}
.upto svg{flex:none}
.err a{color:inherit}
@media (max-width:720px){
  .item{grid-template-columns:1fr}
  .item .go{grid-column:1;grid-row:auto;justify-self:start;margin-top:4px}
}
.chip-hub:hover{border-color:var(--on-brand)}
.topbar .signout{background:transparent;border-color:var(--on-brand-line);color:var(--on-brand)}
.topbar .signout:hover{border-color:var(--on-brand);color:var(--on-brand)}
/* D31: quiet link to the person's own sign-in history — same pill as sign out, no border weight */
.topbar .signins{border-color:rgba(255,255,255,.25);opacity:.9}
.topbar .signins:hover{opacity:1}
.brandmark img,.brandmark>svg{width:24px;height:24px;object-fit:contain;display:block}
/* H14: unread count on the What's new card */
.badge-delivered{background:var(--b-delivered-bg);border-color:var(--b-delivered-line);color:var(--b-delivered-ink)}
.badge-live{background:var(--b-live-bg);border-color:var(--b-live-line);color:var(--b-live-ink)}
.badge-live,.badge-public{padding:4px 12px;gap:8px}
.badge-updating{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber-ink)}
.badge-built{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber-ink)}
.badge-live .pdot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--b-live-dot);flex:none}
.badge-live .pdot::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:var(--b-live-dot);opacity:.35;animation:hfping 2.4s cubic-bezier(0,0,.2,1) infinite}
.tile-meta .v{font-family:var(--mono);font-size:11px}
.changelog{font-size:12px;color:var(--grey);margin-bottom:16px}
.changelog b{color:var(--blue);font-weight:500}
@media (prefers-reduced-motion: reduce){
  .badge-live .pdot{animation:none;opacity:1}
  .badge-live .pdot::after{animation:none;opacity:0}
}

/* ---- H20 (2026-09-05f → h): LAYOUTS. Default = reading (content column 1180, text/card pages).
   `wide` = data-dense pages (boards, timelines, tables): ONLY the content islands widen — the
   column stretches to the viewport minus 32px margins, capped at 1600px, centred on the same
   axis; the BAND (trail / title / subtitle / meta row) STAYS on the fixed 1180 reading column
   so the header reads identically on every page — same column, same padding, same subtitle width as hub home / workspace / Pulse pages (Romeo 2026-09-06). Anything still wider
   scrolls INSIDE its island (never the page). Opt in with data-layout="wide" on <html>
   (markup, so there is no flash) and HF.layout:'wide' (the chrome mirrors it). */
html[data-layout="wide"] .wrap > *{max-width:min(1600px, calc(100vw - 64px));margin-left:auto;margin-right:auto;width:100%} /* every direct child of the wrap (islands, or a board sitting on the ground) shares the wide column */
html[data-layout="wide"] .wrap{padding-left:32px;padding-right:32px}
.bandpad .bandpad{padding-left:0;padding-right:0} /* a nested band (tenant boards) must not double the side padding */
html[data-layout="wide"] .scrollx{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
html[data-layout="wide"] body{overflow-x:hidden} /* belt and braces: the page body never scrolls sideways */
@media (max-width:720px){
  html[data-layout="wide"] .wrap > *{max-width:calc(100vw - 32px)}
  html[data-layout="wide"] .wrap{padding-left:16px;padding-right:16px}
}