/* The shared kit, on every page after tokens.css: base, the top bar and site menu, the page grid, cards,
   tiles, chips, buttons, dialogs, the tooltip, motion, learn mode, loading skeletons. The team page's own pieces
   are in board.css, charts and the cards several pages share in cards.css, one person's pages in you.css. */

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; max-width: 100%; }
html { overflow-y: scroll; } /* the scrollbar's room is always kept: pages don't shift sideways when one is longer */
body {
  background: var(--page); color: var(--ink);
  font: 13px/1.4 var(--font);
  -webkit-font-smoothing: antialiased;
}
h2 { font-size: 12px; font-weight: 600; margin: 0; color: var(--ink-2); letter-spacing: 0.02em; }
button, select, input, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  padding: 10px max(16px, env(safe-area-inset-left)); padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--wash);
}
.learn-btn { flex: none; margin-left: auto; }
.learn-btn[aria-pressed="true"] { background: var(--gold); color: var(--ink); border-radius: 50%; corner-shape: round; }
.theme-btn { flex: none; }
.theme-btn + .sound-btn { margin-left: 0; }
.brand { display: flex; align-items: center; gap: 7px; font-size: 15px; margin-right: 4px; }
.brand b { font-weight: 900; letter-spacing: -0.01em; }
.dot { width: 8px; height: 8px; border-radius: 50%; corner-shape: round; background: var(--axis); display: inline-block; flex: none; }
.dot.on { background: var(--good); position: relative; }
.dot.on::after { content: ""; position: absolute; inset: 0; border-radius: 50%; corner-shape: round; background: var(--good); animation: ripple 2s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes ripple { from { transform: scale(1); opacity: .55; } to { transform: scale(2.6); opacity: 0; } }

.seg { display: inline-flex; background: var(--surface); border-radius: calc(12px * var(--sq)); box-shadow: var(--shadow-sm); padding: 2px; flex: none; }
.seg button { border: 0; background: none; padding: 5px 10px; border-radius: 9px; cursor: pointer; color: var(--ink-2); font-size: 12px; font-weight: 800; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--page); }
.seg.small button { padding: 3px 8px; font-size: 11px; }

.pill { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--surface); border-radius: 999px; padding: 4px 10px 4px 8px; font-size: 12px; font-weight: 800; cursor: pointer; flex: none; box-shadow: var(--shadow-sm); }
.pill .dot { background: var(--good); }
.pill.warn .dot { background: var(--warn); } .pill.bad .dot { background: var(--critical); }
.icon-btn { border: 0; background: none; color: var(--ink-2); cursor: pointer; padding: 6px; border-radius: 8px; display: grid; place-items: center; }
.icon-btn:hover { background: var(--wash); color: var(--ink); }
.sound-btn { flex: none; }
.sound-btn .mute { display: none; }
.sound-btn[aria-pressed="false"] { color: var(--muted); }
.sound-btn[aria-pressed="false"] .waves { display: none; }
.sound-btn[aria-pressed="false"] .mute { display: inline; }
.sound-btn.ping svg { animation: ping 0.5s ease-out; }
@keyframes ping { 30% { transform: scale(1.15); } }
.menu-wrap { position: relative; flex: none; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--raised); border-radius: calc(16px * var(--sq)); padding: 6px; min-width: 170px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .08); display: grid; z-index: 20; }
.menu button, .menu a { all: unset; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; }
.menu button:hover, .menu a:hover, .menu button:focus-visible, .menu a:focus-visible { background: var(--wash); }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 2px; }
.menu .danger { color: var(--critical); }
.menu [aria-checked="true"]::after { content: " ✓"; color: var(--good); font-weight: 700; }

/* ---------- layout ---------- */
.grid { padding: var(--gap) 16px 24px; max-width: 1600px; margin: 0 auto; }

/* Arranged pages (layout.js): one grid of cards, each in its slot (S a third of the row, M half, L two thirds, Full),
   packed like bricks: rows of 8px, each card as many as its height needs, gaps filled from later cards */
.lgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; grid-auto-rows: 8px; gap: var(--gap); align-items: start; }
.lgrid > * { grid-column: 1 / -1; min-width: 0; }
.lgrid > [data-size="s"] { grid-column: span 4; }
.lgrid > [data-size="m"] { grid-column: span 6; }
.lgrid > [data-size="l"] { grid-column: span 8; }
.lgrid > [data-off] { display: none !important; }
/* Arrange: the Arrange button (a count of hidden cards on it), the cards jiggling, each with an eye and its sizes */
.lay-btn { position: relative; flex: none; }
.lay-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--s1) 18%, transparent); color: var(--s1); }
.lay-n { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--s1); color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; }
.lay-done { flex: none; padding: 5px 14px; background: var(--s1); color: #fff; box-shadow: none; }
@keyframes jiggle { from { transform: rotate(-.15deg); } to { transform: rotate(.15deg); } }
body.arranging .lgrid > [data-card] { position: relative; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; animation: jiggle .34s ease-in-out var(--jd, 0ms) infinite alternate; outline: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent); outline-offset: 3px; }
body.arranging .lgrid > [data-card] > :not(.lay-ctl) { pointer-events: none; }
body.arranging .lgrid > [data-card]:focus-visible { outline: 2px solid var(--s1); }
.lgrid > .lay-drag { animation: none !important; cursor: grabbing; z-index: 30; box-shadow: 0 18px 50px rgba(0, 0, 0, .22); }
.lay-ctl { position: absolute; top: -12px; right: 10px; z-index: 5; display: flex; align-items: center; gap: 6px; }
.lay-eye { width: 30px; height: 30px; border: 0; border-radius: 50%; corner-shape: round; display: grid; place-items: center; background: var(--ink); color: var(--page); cursor: pointer; box-shadow: var(--shadow-sm); }
.lay-sizes { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--raised); box-shadow: var(--shadow-sm); }
.lay-sizes button { border: 0; background: none; border-radius: 999px; padding: 4px 9px; font: inherit; font-size: 11px; font-weight: 800; color: var(--ink-2); cursor: pointer; }
.lay-sizes button[aria-pressed="true"] { background: var(--ink); color: var(--page); }
/* the tray: hidden cards wait here, under the Arrange button */
.lay-tray { position: fixed; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: min(560px, calc(100vw - 16px)); padding: 8px 10px; border-radius: calc(18px * var(--sq)); background: var(--raised); box-shadow: 0 10px 30px rgba(0, 0, 0, .14), 0 1px 3px rgba(0, 0, 0, .08); }
.lay-tray-h { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.lay-chip, .lay-chip-drag { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 6px 11px 6px 8px; background: var(--wash); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 700; cursor: grab; touch-action: none; }
.lay-chip svg, .lay-chip-drag svg { width: 14px; height: 14px; color: var(--ink-2); }
.lay-chip:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
.lay-chip-drag { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; background: var(--raised); box-shadow: 0 12px 30px rgba(0, 0, 0, .2); }

.card { background: var(--surface); border-radius: var(--r); padding: 12px 14px; min-width: 0; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }
.card > header { display: flex; align-items: center; gap: 10px; }
.card > header h2 { margin-right: auto; font-weight: 800; letter-spacing: 0.01em; color: var(--ink); font-size: 13px; }
.card .sub-head { margin-top: 6px; }
.chip { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--wash); color: var(--ink-2); display: inline-flex; align-items: center; gap: 5px; }
.chip.live { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good-text); }

/* ---------- KPI strip ---------- */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.kpi { background: var(--surface); border-radius: var(--r); padding: 10px 12px 0; box-shadow: var(--shadow); display: grid; grid-template-rows: auto auto 30px; overflow: hidden; position: relative; }
.kpi .k { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.kpi .v { font-size: 26px; font-weight: 680; letter-spacing: -0.02em; line-height: 1.15; margin-top: 2px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 3px; } /* the unit wraps under a long value */
.kpi .v .val { white-space: nowrap; }
.kpi .v small { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 3px; letter-spacing: 0; }
.kpi svg { width: calc(100% + 24px); max-width: none; margin: 0 -12px; height: 30px; display: block; }
.delta { font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; padding: 1px 6px; border-radius: 999px; background: var(--wash); color: var(--ink-2); }
.delta.up { color: var(--s1); } .delta.down { color: var(--muted); }

/* ---------- tooltip ---------- */
.tip { position: fixed; z-index: 50; pointer-events: none; background: var(--raised); color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .08); border-radius: calc(14px * var(--sq)); padding: 8px 10px; font-size: 12px; min-width: 150px; max-width: 280px; }
.tip b { display: block; margin-bottom: 4px; }
.tip .row { display: flex; justify-content: space-between; gap: 14px; color: var(--ink-2); }
.tip .row span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.tip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; }

/* ---------- sheets / dialogs ---------- */
.sheet { border: 0; border-radius: calc(24px * var(--sq)); padding: 16px; width: min(460px, calc(100vw - 24px)); background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(0, 0, 0, .18); max-height: calc(100dvh - 32px); }
.sheet.wide { width: min(920px, calc(100vw - 24px)); }
.sheet::backdrop { background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); }
.sheet > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sheet h2 { font-size: 13px; font-weight: 800; letter-spacing: 0.01em; color: var(--ink); }
.hs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hs-cell { background: var(--wash); border-radius: calc(10px * var(--sq)); padding: 8px 10px; }
.hs-cell .k { font-size: 11px; color: var(--muted); }
.hs-cell .v { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.hs-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn { border: 0; background: var(--raised); border-radius: calc(12px * var(--sq)); padding: 7px 12px; cursor: pointer; font-weight: 800; font-size: 12.5px; box-shadow: var(--shadow-sm); transition: transform .08s, box-shadow .08s; }
.btn:active, .pill:active { transform: translateY(1px); box-shadow: none; }
.btn:hover { background: var(--wash); }
.btn.primary { background: var(--ink); color: var(--page); }
.btn.danger.solid { background: var(--critical); color: #fff; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.banner { display: flex; gap: 8px; align-items: flex-start; border-radius: calc(10px * var(--sq)); padding: 8px 10px; margin: 10px 0 0; font-size: 12.5px; }
.banner.ok { background: color-mix(in srgb, var(--good) 13%, transparent); color: var(--good-text); }
.banner.warn { background: color-mix(in srgb, var(--critical) 13%, transparent); color: var(--critical); }
.banner b { display: block; }
.inc { display: flex; gap: 8px; align-items: center; font-size: 12px; margin-top: 8px; color: var(--ink-2); flex-wrap: wrap; }
.inc .bar-t { flex: 1; min-width: 80px; height: 6px; border-radius: 3px; background: var(--critical); opacity: 0.7; }

.test-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: stretch; }
.test-form textarea, .row-form input, .test-form select { background: var(--page); border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; resize: vertical; width: 100%; }
.row-form { display: flex; gap: 8px; }
.progress { display: flex; align-items: center; gap: 10px; padding: 10px 0; color: var(--ink-2); }
.spinner { width: 14px; height: 14px; border-radius: 50%; corner-shape: round; border: 2px solid var(--axis); border-top-color: var(--ink); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.checks { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.checks td { padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.checks td.v { font-family: ui-monospace, Menlo, monospace; font-size: 11px; word-break: break-all; }
.checks tr.grp td { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 10px; border: 0; }
.checks tr.bad td { background: color-mix(in srgb, var(--critical) 9%, transparent); }
.ok-t { color: var(--good-text); font-weight: 700; } .bad-t { color: var(--critical); font-weight: 700; }
details { margin-top: 10px; border: 1px solid var(--border); border-radius: calc(10px * var(--sq)); padding: 6px 10px; font-size: 12px; }
summary { cursor: pointer; font-weight: 600; }
.kv { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 3px 10px; margin-top: 6px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 11px; word-break: break-all; }
.toast { position: fixed; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--page); padding: 9px 14px; border-radius: calc(12px * var(--sq)); font-size: 13px; font-weight: 600; z-index: 60; box-shadow: 0 8px 30px rgba(0,0,0,0.3); animation: toast-in var(--spring-bouncy-d, .4s) var(--spring-bouncy, ease-out) both; }
@keyframes toast-in { from { transform: translate(-50%, 18px) scale(.94); opacity: 0; } }.empty { color: var(--muted); font-size: 12px; text-align: center; padding: 14px 0; }

/* ---------- motion & feedback ---------- */
/* Reel: digits scroll to their new value, staggered right to left. */
.kpi .val { display: inline-flex; }
.reel { display: inline-block; height: 1.15em; overflow: hidden; vertical-align: bottom; }
.reel .strip { display: flex; flex-direction: column; animation: reel var(--spring-gentle-d, .9s) var(--spring-gentle, cubic-bezier(.2,.75,.25,1)) both; animation-delay: calc(var(--i) * 55ms); }
.reel .strip span { height: 1.15em; line-height: 1.15em; }
@keyframes reel { from { transform: translateY(0); } to { transform: translateY(calc(var(--n) * -1.15em)); } }

/* Flying event token */
.fx-token {
  position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none;
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 999px;
  background: var(--raised); color: var(--ink); font-size: 11.5px; font-weight: 900; white-space: nowrap;
  box-shadow: var(--shadow-sm); will-change: transform, opacity;
}
.fx-token i { width: 18px; height: 18px; border-radius: 50%; corner-shape: round; display: grid; place-items: center; background: var(--c); color: #fff; font-style: normal; font-size: 10px; }

/* Landing: soft glow ring in the event's colour */
.fx-hit { animation: hit 1.05s ease-out; }
@keyframes hit {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--hit) 55%, transparent), var(--shadow); border-color: var(--hit); }
  100% { box-shadow: 0 0 0 14px transparent, var(--shadow); }
}
.hb.fx-hit { border-radius: 6px; background: color-mix(in srgb, var(--hit) 12%, transparent); }
.fx-shake { animation: hit 1.05s ease-out, shake 0.42s ease-in-out; }
@keyframes shake { 20% { transform: translateX(-3px); } 45% { transform: translateX(3px); } 70% { transform: translateX(-2px); } }

.fx-float { position: fixed; z-index: 71; pointer-events: none; font-weight: 800; font-size: 13px; text-shadow: 0 1px 8px var(--page); }
.fx-spark { position: fixed; z-index: 71; width: 7px; height: 7px; border-radius: 50%; corner-shape: round; pointer-events: none; }

/* Milestone shimmer: a light sweep across the tile */
.kpi::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--s4) 28%, transparent) 50%, transparent 70%); background-size: 250% 100%; }
.kpi.fx-shine::after { animation: shine 1.4s ease-out; }
@keyframes shine { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 0; background-position: -60% 0; } }

/* ---------- tablet ---------- */
@media (max-width: 1180px) {
  .lgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lgrid > [data-size="s"], .lgrid > [data-size="m"] { grid-column: span 3; }
  .lgrid > [data-size="l"] { grid-column: 1 / -1; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* wraps; a sideways strip clipped each tile's glow */
}
/* ---------- phone ---------- */
@media (max-width: 720px) {
  :root { --gap: 10px; }
  .grid { padding: 10px 12px 28px; }
  .lgrid { grid-template-columns: minmax(0, 1fr); }
  .lgrid > [data-card] { grid-column: 1 / -1 !important; }
  /* The bar in a narrow window, the same on every page:
     row 1  logo ………… [Demo / Share live] ? theme (sound OK) ⚙   (the controls keep their order; Settings last)
     row 2  range picker
     row 3  the menu: Me · teams */
  .bar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .bar > * { order: 1; margin-left: 0 !important; margin-right: 0 !important; }
  .bar .brand { order: 0; margin-right: auto !important; }
  .bar::after { content: ""; order: 4; flex-basis: 100%; height: 0; }
  .bar #range, .bar .pv-range { order: 5; }
  .bar .bar-nav { order: 9; width: 100%; }
  .brand b { display: none; }

  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* wraps, two per row: never a sideways strip */
  .test-form { grid-template-columns: 1fr 1fr; }
  .test-form textarea { grid-column: 1 / -1; }
  .sheet { margin: auto auto 0; border-radius: calc(18px * var(--sq)) 18px 0 0; width: 100vw; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::after { animation: none !important; transition: none !important; } }

/* ---------- motion budget (see motion.js) ---------- */
/* power saving: keep meaning, drop the looping decoration */
:root[data-motion="lite"] .brow.work .now-ic::after { animation: none; opacity: .45; transform: scale(1.06); }
:root[data-motion="lite"] .map .pin .halo { animation: none; opacity: .5; transform: scale(1.3); }
:root[data-motion="lite"] .dot.on::after,
:root[data-motion="lite"] .lane-now,
:root[data-motion="lite"] .timeline .now-d,
:root[data-motion="lite"] .avatar.live::after,
:root[data-motion="lite"] .chart .now,
:root[data-motion="lite"] .timeline .bar-new { animation: none; }
/* hidden tab or reduced motion: nothing runs */
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation-play-state: paused !important; }


/* hosted (Joule service): local-only actions don't apply */
body.hosted [data-act="test"], body.hosted [data-act="recover"], body.hosted [data-act="reset"] { display: none; }

/* team dashboard: the team's name next to the logo, linking to its page */
.team-chip { font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; background: var(--tint-team); color: var(--good-text); text-decoration: none; margin-left: 4px; }

.grid:not(.show-detail) .detail { display: none !important; }
.small { font-size: 11.5px; }

/* the one site menu (nav.js): Me · teams · Account · Sign out, the current page marked */
.bar .bar-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin-right: auto; }
.bar:has(#range) .bar-nav { margin-right: 0; } /* the team page: its range right after the menu, its tools at the far end */
.bar .bar-nav a { color: var(--ink-2); font-size: 13px; font-weight: 700; text-decoration: none; padding: 6px 9px; border-radius: 9px; white-space: nowrap; }
.bar .bar-nav a:hover { background: var(--wash); }
.bar .bar-nav a.on { background: var(--ink); color: var(--page); }
/* the "…" menu on pages without the dashboard's (holds Sign out): sits at the bar's right end */
.bar .site-more { order: 99; }

.armed { background: var(--critical) !important; color: #fff !important; border-color: var(--critical) !important; }

/* nothing may push the page sideways: grid children shrink */
.lgrid > *, .kpis > *, .pv > * { min-width: 0; }

/* The app / effort / context signs after a name (signals.js) */
.sigs { display: inline-flex; gap: 3px; align-items: center; margin-left: 6px; vertical-align: -2px; color: var(--muted); }
.sig { display: inline-grid; place-items: center; cursor: default; }
.sig-ctx.warm { color: var(--warn); }
.sig-ctx.hot { color: var(--critical); }
h1 .sigs { margin-left: 10px; vertical-align: 2px; }
.pv-bar .sigs { margin-right: auto; } /* beside "Idle for 3m", not pushed to the far end */
h1 .sig svg { width: 18px; height: 18px; }

/* Loading skeletons: the page's own shape (tiles at their real height, cards at their usual size), so nothing
   jumps when the data arrives */
.sk { background: var(--wash) !important; border-color: transparent !important; box-shadow: none !important; animation: sk-pulse 1.4s ease-in-out infinite; }
.kpi.sk { min-height: 87px; }
#kpis .kpi.sk { min-height: 103px; }
.sk-line { display: inline-block; height: 14px; border-radius: 7px; }
@keyframes sk-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* Me and person pages use the team page's bar layout: menu and range on the left, actions on the right */
.bar.bar-split .bar-nav { margin-right: 0; }
.bar.bar-split .pv-range { margin-right: auto; }
.bar.bar-split .learn-btn { margin-left: 0; }

/* Settings gear (nav.js) and the Demo toggle on the team page's bar */
.bar .settings-btn { display: inline-grid; place-items: center; color: inherit; text-decoration: none; }
.bar .settings-btn.on { background: var(--ink); color: var(--page); }
.bar .demo-btn, .bar .action-btn { font-weight: 800; }
/* demo on: the Demo button itself says so, with the gold stripes sliding by (the only demo marker in the bar) */
.bar .demo-btn[aria-pressed="true"] { color: var(--ink); background: repeating-linear-gradient(-45deg, var(--gold) 0 6px, color-mix(in srgb, var(--gold) 70%, var(--surface)) 6px 12px);
  background-size: 17px 17px; animation: demo-stripes 1.2s linear infinite; }
@keyframes demo-stripes { to { background-position: 17px 0; } }
@media (prefers-reduced-motion: reduce) { .bar .demo-btn[aria-pressed="true"] { animation: none; } }

/* tooltip divider (calendar hover: total, then each person) */
.tip .tip-sep { border-top: 1px solid currentColor; opacity: .18; margin: 5px 0; }