/* Notify me bell + credit tag, shared by the What's new and Roadmap posts (copied from tour.css). */
.wn-bell { position: absolute; left: 8px; top: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; font: 9px "FK Raster", monospace; text-transform: uppercase; letter-spacing: var(--pixel-tracking); color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--shadow); padding: 3px 8px; cursor: pointer; }
.wn-bell[hidden] { display: none; }
.wn-bell .bell-icon { font-size: 11px; filter: grayscale(1); }
.wn-bell.on { background: var(--green); color: #15181c; }
.wn-bell.on .bell-icon { filter: none; }
.head { position: relative; }
.head > .wn-bell { position: absolute !important; left: 10px !important; top: 10px !important; }
@media (max-width: 560px) { .head > .wn-bell { top: auto !important; bottom: 4px !important; left: auto !important; right: 8px !important; } }

/* Top-right corner: credit tag and Follow bell side by side, never overlapping */
.head-right { position: absolute; top: 0; right: 0; z-index: 3; display: flex; align-items: stretch; gap: 6px; }
.head-right .credit { position: static !important; }
.head > .head-right > .wn-bell { position: static !important; }
@media (max-width: 640px) { .head-right { flex-direction: column; align-items: flex-end; gap: 4px; } }
.head .brand, .head .note { padding-right: 0; }
@media (max-width: 760px) { .head { padding-top: 54px !important; } }
.head > .head-right { position: absolute !important; top: 0 !important; right: 0 !important; left: auto !important; width: auto !important; }

/* Credit + Follow as one split button: one frame, one divider, same height and type */
.head > .head-right { flex-direction: row !important; align-items: stretch !important; gap: 0 !important; border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--shadow); background: var(--paper); }
.head-right .credit, .head > .head-right > .wn-bell { border: 0 !important; box-shadow: none !important; margin: 0 !important; font-size: 9px !important; padding: 4px 9px !important; line-height: 1.2; }
.head > .head-right > .wn-bell { border-left: 1.5px solid var(--ink) !important; }
.head > .head-right > .wn-bell .bell-icon { font-size: 10px; }
@media (max-width: 640px) { .head-right .credit, .head > .head-right > .wn-bell { font-size: 8px !important; padding: 3px 6px !important; } .head-right .credit .long { display: none; } }

/* Split button stacked: credit on top, Follow underneath, same width, one frame */
.head > .head-right { flex-direction: column !important; align-items: stretch !important; }
.head-right .credit, .head > .head-right > .wn-bell { justify-content: center !important; width: 100%; box-sizing: border-box; }
.head > .head-right > .wn-bell { border-left: 0 !important; border-top: 1.5px solid var(--ink) !important; }
@media (max-width: 760px) { .head { padding-top: 46px !important; } }

/* Follow row: label on the left, retro scoreboard count on the right */
.head > .head-right > .wn-bell { justify-content: flex-start !important; gap: 6px; }
.wn-bell .score { margin-left: auto; font: 11px/1 "Courier New", monospace; font-weight: 700; letter-spacing: .12em; color: #ffb000; background: #0b0b0c; border: 1px solid #3a3a3a; padding: 2px 4px 1px; text-shadow: 0 0 4px rgba(255,176,0,.7); box-shadow: inset 0 0 4px #000; }
.wn-bell.on .score { color: #ffb000; }
@media (max-width: 640px) { .wn-bell .score { font-size: 9px; padding: 1px 3px; } }

/* Scoreboard digits: each one rolls up when it changes */
.wn-bell .score { display: inline-flex; overflow: hidden; }
.wn-bell .score .digit { display: inline-block; }
.wn-bell .score .digit.roll { animation: score-roll .45s cubic-bezier(.2,.8,.2,1); }
@keyframes score-roll { from { transform: translateY(100%); opacity: 0; } 60% { opacity: 1; } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .wn-bell .score .digit.roll { animation: none; } }
.wn-bell .score { min-width: 4.6ch; justify-content: center; }

/* Fixed size: the button never changes width for Follow/Following or the count */
.head > .head-right { width: 176px !important; }
.wn-bell .bell-label { display: inline-block; width: 9.6em; text-align: left; white-space: nowrap; }
.wn-bell .score { width: 4.6ch; min-width: 0 !important; font-variant-numeric: tabular-nums; flex: none; }
.wn-bell .score .digit { width: 1ch; text-align: center; }
@media (max-width: 640px) { .head > .head-right { width: 138px !important; } }
/* Scoreboard digits in the post's pixel font, amber on black */
.wn-bell .score { font: 10px/1 "FK Raster", monospace !important; letter-spacing: .08em !important; font-weight: 400 !important; padding: 3px 4px 2px !important; }
@media (max-width: 640px) { .wn-bell .score { font-size: 8px !important; } }

/* Follow row: everything on one centre line; digits get their natural width so they never overlap */
.head > .head-right > .wn-bell { align-items: center !important; line-height: 1 !important; }
.wn-bell .bell-icon, .wn-bell .bell-label { line-height: 1; display: inline-flex; align-items: center; }
.wn-bell .score { width: auto !important; gap: 1px; align-items: center; }

/* Roadmap: compact one-row header (logo and title left, credit and bell right) so the list gets the room */
body:has(#tabs) .head { display: flex !important; align-items: center; gap: 10px; padding: 6px 8px 6px !important; min-height: 0 !important; }
body:has(#tabs) .head .brand { margin: 0 !important; justify-content: flex-start !important; gap: 8px; }
body:has(#tabs) .head .brand img { width: 24px !important; height: 24px !important; }
body:has(#tabs) .head .brand h1 { font-size: 19px !important; }
body:has(#tabs) .head .note { margin: 0 !important; font-size: 11px !important; white-space: nowrap; }
body:has(#tabs) .head > .head-right { position: static !important; margin-left: auto; flex-direction: row !important; width: auto !important; }
body:has(#tabs) .head > .head-right > .wn-bell { border-top: 0 !important; border-left: 1.5px solid var(--ink) !important; }
@media (max-width: 640px) {
  body:has(#tabs) .head { flex-wrap: wrap; row-gap: 2px; }
  body:has(#tabs) .head .note { display: none; }
}
/* The room saved goes to the list: bigger, easier-to-read rows */
body:has(#tabs) .mini .title { font-size: 14px !important; }
body:has(#tabs) .view-body.fit .mini .title { font-size: max(var(--fs), 14px) !important; }
body:has(#tabs) .chip { font-size: 11px !important; }
body:has(#tabs) .head .brand { order: 0; flex: none; position: static !important; }
body:has(#tabs) .head .note { order: 1; position: static !important; }
body:has(#tabs) .head > .head-right { order: 2; flex: none; }
body:has(#tabs) .head-right .credit, body:has(#tabs) .head > .head-right > .wn-bell { width: auto !important; }

/* Roadmap tabs: one line each (name and its number side by side), less padding */
body:has(#tabs) .tabs { margin: 6px 0 4px !important; }
body:has(#tabs) .tabs button { display: flex !important; flex-direction: row !important; align-items: baseline !important; justify-content: center; gap: 6px; padding: 3px 4px !important; min-height: 0 !important; }
body:has(#tabs) .tabs .stage { font-size: 11px !important; line-height: 1.2; white-space: nowrap; }
body:has(#tabs) .tabs .rel { font-size: 10px !important; line-height: 1.2; white-space: nowrap; }
@media (max-width: 640px) { body:has(#tabs) .tabs .rel { display: none !important; } }
body:has(#tabs) .tabs .stage, body:has(#tabs) .tabs .rel { display: inline !important; }
@media (max-width: 640px) { body:has(#tabs) .tabs .rel { display: none !important; } }
body:has(#tabs) .tabs button { justify-content: center !important; text-align: center !important; }

/* Latest strip: one row on wide screens (label, arrows, the change, then the release card) */
@media (min-width: 781px) {
  body:has(#tabs) .landed { display: flex !important; align-items: center; gap: 8px; padding: 4px 8px !important; min-height: 0 !important; }
  body:has(#tabs) .landed .latest-top { display: contents !important; }
  body:has(#tabs) .landed .label { order: 0; } body:has(#tabs) .landed .latest-pos { order: 1; }
  body:has(#tabs) .landed .latest-nav { order: 2; }
  body:has(#tabs) .landed .landed-text { order: 3; flex: 1; min-width: 0; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body:has(#tabs) .landed .rel-card { order: 4; margin-left: auto !important; flex: none; }
}
body:has(#tabs) .rel-field b { font-size: 10px !important; } body:has(#tabs) .rel-field small { font-size: 8px !important; }
body:has(#tabs) .rel-card { padding: 1px 0 !important; }

/* Pop-up window (same look as What's new's Get updates window), used for Suggest an idea */
.wn-notify-back { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(10, 12, 14, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: wn-fade .2s ease-out; }
.wn-notify-back[hidden] { display: none; }
@keyframes wn-fade { from { opacity: 0; } to { opacity: 1; } }
.wn-notify-win { position: relative; width: max-content; max-width: 100%; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 6px 6px 0 #000; animation: wn-pop .24s cubic-bezier(.2, 1.3, .4, 1); font: 15px/1.5 "Suisse Intl", system-ui, sans-serif; }
@keyframes wn-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.wn-notify-bar { background: var(--ink); color: var(--paper); padding: 8px 40px 7px 14px; font: 11px "FK Raster", monospace; letter-spacing: .16em; text-transform: uppercase; }
.wn-notify-x { position: absolute; top: 3px; right: 6px; background: none; border: 0; color: var(--paper); font: 20px/1 monospace; cursor: pointer; padding: 2px 6px; }
.wn-notify-win ol { margin: 16px 22px 16px 42px; padding: 0; }
.wn-notify-win li { margin: 5px 0; white-space: nowrap; }
.wn-notify-link { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.wn-notify-link:hover { color: #c4302b; }
.wn-notify-go { display: block; margin: 0 22px 20px; padding: 11px 14px; text-align: center; background: #c4302b; color: #fff; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font: 11px "FK Raster", monospace; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.wn-notify-go:hover { filter: brightness(1.1); }
@media (max-width: 560px) { .wn-notify-win li { white-space: normal; } .wn-notify-win { width: auto; } }
@media (prefers-reduced-motion: reduce) { .wn-notify-back, .wn-notify-win { animation: none; } }

/* Get updates window: motion. Blur ramps in, the window flies out of the bell, steps and button follow in a
   short stagger, the button gets one shine sweep; closing plays it back toward the bell. */
.wn-notify-back { animation: wn-back-in .28s ease-out both; }
@keyframes wn-back-in { from { background: rgba(10, 12, 14, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } }
.wn-notify-win { transform-origin: var(--wn-ox, 90%) var(--wn-oy, 0%); animation: wn-fly .42s cubic-bezier(.16, 1.2, .3, 1) both; }
@keyframes wn-fly { from { opacity: 0; transform: translate(var(--wn-dx, 0), var(--wn-dy, -40px)) scale(.35); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.wn-notify-win li { opacity: 0; animation: wn-step .32s cubic-bezier(.2, .9, .3, 1) both; }
.wn-notify-win li:nth-child(1) { animation-delay: .18s; } .wn-notify-win li:nth-child(2) { animation-delay: .26s; } .wn-notify-win li:nth-child(3) { animation-delay: .34s; }
@keyframes wn-step { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.wn-notify-go { position: relative; overflow: hidden; opacity: 0; animation: wn-step .32s .44s cubic-bezier(.2, .9, .3, 1) both; }
.wn-notify-go::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-18deg); animation: wn-shine .8s .8s ease-in-out both; }
@keyframes wn-shine { to { left: 120%; } }
.wn-notify-bar::before { content: '🔔'; display: inline-block; margin-right: 8px; transform-origin: 50% 10%; animation: bell-ring .8s .3s ease-in-out; }
.wn-notify-back.closing { animation: wn-back-out .22s ease-in both; }
.wn-notify-back.closing .wn-notify-win { animation: wn-fly-out .22s ease-in both; }
@keyframes wn-back-out { to { background: rgba(10, 12, 14, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } }
@keyframes wn-fly-out { to { opacity: 0; transform: translate(var(--wn-dx, 0), var(--wn-dy, -40px)) scale(.35); } }
@media (prefers-reduced-motion: reduce) { .wn-notify-back, .wn-notify-win, .wn-notify-win li, .wn-notify-go, .wn-notify-go::after, .wn-notify-bar::before { animation: none !important; opacity: 1; } }
.idea-win .wn-notify-bar::before { content: '💡'; }
#intro .idea-btn { margin-left: 8px; font: 10px "FK Raster", monospace; letter-spacing: .16em; text-transform: uppercase; padding: 3px 8px 3px calc(8px + .16em); background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--shadow); cursor: pointer; vertical-align: middle; }
#intro .idea-btn:hover { background: var(--ink); color: var(--paper); }
#intro:not(:empty) { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; }
#intro .intro-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
body:has(#tabs) .tabs .idea-tab { flex: 0 0 auto !important; width: 34px; font-size: 13px; padding: 0 !important; filter: grayscale(.2); }
body:has(#tabs) .tabs .idea-tab:hover { background: var(--ink); }
.votes-tag { font: 10px "FK Raster", monospace; letter-spacing: .16em; }
body:has(#tabs) .tabs { grid-template-columns: repeat(4, 1fr) 34px !important; }

/* Roadmap header motion: the icons keep drifting even with Windows/OS "animation effects" off (slow, gentle),
   and they gather on the right, behind Built by and Notify me, thin out toward "No dates", and stay faint over the title. */
@media (prefers-reduced-motion: reduce) {
  body:has(#tabs) .hd-track { animation-name: hd-drift !important; animation-timing-function: linear !important; animation-iteration-count: infinite !important; }
}
body:has(#tabs) .hd-band {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.12) 0%, rgba(0,0,0,.12) 22%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.75) 55%, #000 68%, #000 100%);
          mask-image: linear-gradient(to right, rgba(0,0,0,.12) 0%, rgba(0,0,0,.12) 22%, rgba(0,0,0,.45) 40%, rgba(0,0,0,.75) 55%, #000 68%, #000 100%);
}
/* Built by / Notify me sit on a see-through panel, so the motion shows behind them */
body:has(#tabs) .head > .head-right { background: color-mix(in srgb, var(--paper) 72%, transparent) !important; }

/* Item rows: description line, shown only when the list is short enough to have room */
.mini .title { display: flex; flex-direction: column; min-width: 0; }
.mini .title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini .desc { display: none; font-size: 12px; color: var(--muted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.view-body.roomy .mini .desc { display: block; }
.view-body.fit.roomy > .mini { flex: 0 0 var(--row-h) !important; max-height: none !important; }
.view-body.roomy .mini .title-text { font-size: 15px; font-weight: 600; }
.mini:hover .title { text-decoration: none; } .mini:hover .title-text { text-decoration: underline; }

/* Item card: bigger, easier to read (the fitter still trims it on small phones) */
body:has(#tabs) .card { gap: 10px; padding-top: 10px; }
body:has(#tabs) .card-id { font-size: 16px !important; }
body:has(#tabs) .card h3, body:has(#tabs) .card-title { font-size: 21px !important; line-height: 1.25; }
body:has(#tabs) .card-facts { font-size: 13px !important; }
body:has(#tabs) .card-block { padding: 9px 12px !important; }
body:has(#tabs) .card-block p { font-size: 15px !important; line-height: 1.45; }
body:has(#tabs) .card-block .block-label { font-size: 11px !important; }
body:has(#tabs) .badge { font-size: 12px !important; }
@media (max-width: 420px) { body:has(#tabs) .card h3, body:has(#tabs) .card-title { font-size: 18px !important; } body:has(#tabs) .card-block p { font-size: 14px !important; } }

/* "Working on it now": a pulsing amber dot, in the Latest strip, on rows and on the card */
.now-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); margin: 0 6px 0 2px; vertical-align: middle; box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 60%, transparent); animation: now-pulse 1.6s ease-out infinite; flex: none; }
@keyframes now-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.now-word { color: var(--amber); font-weight: 600; }
.mini .title:has(> .now-dot) { flex-direction: row; align-items: center; flex-wrap: wrap; }
.mini .title > .now-dot { margin-left: 0; }
.view-body.roomy .mini .title:has(> .now-dot) .desc { flex-basis: 100%; }
/* Small phones: the tab row shares the width exactly, so the 💡 never pushes past the edge */
body:has(#tabs) .tabs { grid-template-columns: repeat(4, minmax(0, 1fr)) 30px !important; }
body:has(#tabs) .tabs button { min-width: 0 !important; overflow: hidden; }
body:has(#tabs) .tabs .idea-tab { width: auto !important; }

/* Phones: short tab names so nothing is cut; the "No dates" line stays visible, small */
.tabs .stage-short { display: none; }
@media (max-width: 480px) { body:has(#tabs) .tabs .stage { display: none !important; } body:has(#tabs) .tabs .stage-short { display: inline !important; } }
@media (max-width: 640px) { body:has(#tabs) .head .note { display: block !important; order: 3; flex-basis: 100%; font-size: 10px !important; } }
/* "On the radar" chip beside the vote button */
.vote-wrap { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 420px) { .mini .vote-wrap .chip { display: none; } }

/* Round 1 UI fixes */
/* Short tab names use the same pixel font as the long ones */
body:has(#tabs) .tabs .stage-short { font: 11px "FK Raster", monospace; text-transform: uppercase; letter-spacing: .16em; }
/* The Latest line always keeps room for two lines on phones, so the list below never jumps */
@media (max-width: 780px) { body:has(#tabs) .latest-open { min-height: calc(2 * 1.3em); } }
/* Short lists: long titles wrap to a second line instead of being cut */
.view-body.roomy .mini .title-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Pixel font spacing: one value everywhere */
body:has(#tabs) .credit, body:has(#tabs) .credit .long, body:has(#tabs) .credit .name { letter-spacing: .16em !important; }
body:has(#tabs) .credit { padding-left: calc(7px + .16em) !important; }
body:has(#tabs) .wn-bell .score, body:has(#tabs) .wn-bell .score .digit { letter-spacing: .16em !important; }
/* Round 3 UI fixes: short-list descriptions get two lines; tab sublines use the page font */
.view-body.roomy .mini .desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body:has(#tabs) .tabs .rel { font-family: inherit; }
/* Round 4 UI fixes */
/* Phones: short lists show the full title (two lines if needed); the description waits for the card */
@media (max-width: 480px) { .view-body.roomy .mini .desc { display: none !important; } }
/* Tab sublines in the page font (buttons don't inherit it on their own) */
body:has(#tabs) .tabs .rel { font-family: "Suisse Intl", system-ui, sans-serif !important; }
/* Round 5 UI fixes */
/* The "working on it now" dot stays beside the title; the title wraps next to it */
.mini .title:has(> .now-dot) { flex-wrap: nowrap !important; }
.mini .title:has(> .now-dot) .title-text { min-width: 0; }
.view-body.roomy .mini .title:has(> .now-dot) { flex-wrap: wrap !important; }
/* Phones: status chips a touch tighter, so row titles keep their room */
@media (max-width: 420px) { body:has(#tabs) .mini .chip { padding: 2px 4px 2px calc(4px + .16em) !important; gap: 0 !important; } body:has(#tabs) .mini .chip i { display: none; } }
/* Latest: "· yesterday" never breaks apart */
.latest-open .when { white-space: nowrap; }
/* Round 6 UI fixes */
.latest-tail { white-space: nowrap; }
.chip .chip-short { display: none; }
@media (max-width: 420px) { body:has(#tabs) .mini .chip .chip-long { display: none; } body:has(#tabs) .mini .chip .chip-short { display: inline; } }
/* Tabs on wider screens: each tab gets room for its own label (Vote is the shortest), with breathing room at the edges */
@media (min-width: 481px) {
  body:has(#tabs) .tabs { grid-template-columns: 1.3fr 1.2fr 1.25fr 0.95fr 30px !important; }
  body:has(#tabs) .tabs button { padding: 3px 10px !important; gap: 8px; }
}
/* In-between widths (tablets, narrow windows): drop the tab sublines below 800px and use short names below 580px,
   so no tab label is ever cut */
@media (max-width: 800px) { body:has(#tabs) .tabs .rel { display: none !important; } }
@media (max-width: 580px) { body:has(#tabs) .tabs .stage { display: none !important; } body:has(#tabs) .tabs .stage-short { display: inline !important; } }
/* Round 11 UI fixes: in-between widths */
/* The header wraps (title, then credit and bell, then the note) up to 700px, so the bell count is never cut */
@media (max-width: 700px) { body:has(#tabs) .head { flex-wrap: wrap; row-gap: 2px; } body:has(#tabs) .head .note { display: block !important; order: 3; flex-basis: 100%; font-size: 10px !important; } }
/* Release card: room between its text and its frame */
body:has(#tabs) .rel-card { padding: 1px 8px !important; }
/* Round 12 UI fixes */
/* Up to 480px wide, rows drop the asker tag (it's on the card) so titles keep their room */
@media (max-width: 480px) { body:has(#tabs) .mini.has-tag .tag { display: none !important; } body:has(#tabs) .mini.has-tag { grid-template-columns: 34px 1fr auto !important; } }
/* The header note never pushes Built by and the bell out of view */
body:has(#tabs) .head .note { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Up to 580px, the "On the radar" chip in the Vote list steps aside so the idea's title fits (the card still shows it) */
@media (max-width: 580px) { .mini .vote-wrap .chip { display: none; } }
/* Round 14 UI fixes */
/* A card short on room shows "What it is" as plain text, without its frame or label */
.card-block.plain { border: 0 !important; box-shadow: none !important; background: none !important; padding: 0 !important; }
.card-block.plain .block-label { display: none; }
/* Light theme: teal, green and grey chip text dark enough to read */
:root:not([data-theme="dark"]) .chip.c-teal { --chip: #17696f; }
:root:not([data-theme="dark"]) .chip.c-green { --chip: #286d32; }
:root:not([data-theme="dark"]) .chip.c-grey { --chip: #5c6268; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip.c-teal { --chip: var(--teal); }
  :root:not([data-theme="light"]) .chip.c-green { --chip: var(--green); }
  :root:not([data-theme="light"]) .chip.c-grey { --chip: var(--grey); }
}
/* Tab percent: when the subline is hidden (800px and narrower), the percent alone stays beside the tab name */
body:has(#tabs) .tabs .pct { display: none; font: 10px/1.2 "Suisse Intl", system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
body:has(#tabs) .tabs button.on .pct { color: var(--paper); opacity: .75; }
@media (max-width: 800px) { body:has(#tabs) .tabs .pct { display: inline !important; } }
@media (max-width: 680px) { body:has(#tabs) .tabs .stage { display: none !important; } body:has(#tabs) .tabs .stage-short { display: inline !important; } }