/* The Runway, the look. The site's design language (css/styles.css and the games' public theme): white surfaces with
   warm panels, near-black ink, the gold accent, DM Serif Display for headings and big figures, DM Sans for the text.
   Phone first at 390 pixels, desktop to about 1100. No dark mode. Every colour is a token here; the capacity bar's
   colours were checked with the dataviz validator on white in the order the bar draws them (queue, discovery, switching,
   meetings, onboarding, away, under the table, platform, with idle as the neutral track at the end), and the bar
   always carries a legend with its figures, so no colour stands alone. Discovery is indigo since 3.5: the first teal
   read grey to the validator and sat too close to the queue's green. */

:root {
  --font-body: 'DM Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;
  --bg: #ffffff;
  --surface: #ffffff;
  --panel: #f6f5f2;
  --panel-2: #f0efec;
  --ink: #1a1a1f;
  --text-2: #52514d;
  --muted: #8a8983;
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.16);
  --accent: #9a7b2e;
  --accent-soft: rgba(154, 123, 46, 0.10);
  --highlight: #f6f1e2;
  --claim-bg: #faf7ef;
  --primary: #1a1a1a;
  --primary-ink: #ffffff;
  --heart: #b23b3b;
  --track: #e6e4df;
  --focus: rgba(154, 123, 46, 0.35);
  --radius: 12px;
  --radius-sm: 8px;
  /* where the capacity went, one colour per place */
  --c-queue: #1f9e77;
  --c-discovery: #4b4fa8;
  --c-switching: #c0703a;
  --c-meetings: #7b5cc4;
  --c-onboarding: #c99a00;
  --c-away: #2b6cb0;
  --c-underTable: #b5507f;
  --c-platform: #9a7b2e;
  --c-idle: #cfcdc6;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body { font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 15px; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
a { color: var(--ink); text-decoration-color: rgba(154, 123, 46, .35); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); text-decoration-color: var(--accent); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.noscript { max-width: 640px; margin: 4rem auto; padding: 0 16px; font-size: 1.1rem; }
/* the page is a column, so the landing and the slides can take the height between the bar and the footer */
#app { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
#app > main { width: 100%; }

/* ===== the game's own thin bar and footer ===== */
.qbar { border-bottom: 1px solid var(--line); background: var(--bg); }
.qbar .in { max-width: 1100px; margin: 0 auto; padding: 0 16px; height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.qbar .brand { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: -0.01em; color: var(--ink); background: none; border: 0; padding: 6px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; }
.qfoot .site { color: var(--text-2); text-decoration-color: rgba(154, 123, 46, .35); white-space: nowrap; }
.qfoot .site:hover { color: var(--ink); }
.qfoot { border-top: 1px solid var(--line); margin-top: 3rem; }
.qfoot .in { max-width: 1100px; margin: 0 auto; padding: 1.6rem 16px 2.2rem; font-size: .85rem; color: var(--text-2); }

/* ===== layout and type ===== */
.wrap { max-width: 1100px; margin: 0 auto; padding: 24px 16px 8px; }
.kicker { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px 0; }
h1 { font-family: var(--font-display); font-weight: 400; font-size: 2.1rem; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 12px 0; text-wrap: balance; }
h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 10px 0; }
.lead { font-size: 1.05rem; line-height: 1.65; color: var(--text-2); margin: 0 0 18px 0; max-width: 60ch; }
.note { font-size: 13px; color: var(--muted); margin: 8px 0 0 0; line-height: 1.5; }
.empty { font-size: 14px; color: var(--muted); margin: 0; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; background: var(--surface); margin: 0 0 16px 0; }
.card.panel { background: var(--panel); border-color: transparent; }

/* ===== buttons ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-size: 14px; font-weight: 600; letter-spacing: .01em; line-height: 1.25; cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); padding: 10px 16px; min-height: 44px; border-radius: var(--radius-sm); transition: background .2s, border-color .2s, color .2s; text-decoration: none; text-align: center; }
.btn:hover { border-color: var(--ink); }
.btn.primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); }
.btn.big { font-size: 16px; padding: 14px 28px; min-height: 52px; }
.btn.small { font-size: 13px; padding: 6px 12px; min-height: 36px; }
.btn.ghost { background: none; color: var(--text-2); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--line-strong); }
.link { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(154, 123, 46, .45); text-underline-offset: 3px; cursor: pointer; font-size: inherit; font-weight: 600; }
.link:hover { color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 0 0; }

/* ===== the landing: one centred column ===== */
.hero { padding: 26px 0 8px; max-width: 640px; width: 100%; margin: 0 auto; text-align: center; }
.hero h1 { font-size: 3.2rem; margin-bottom: 10px; }
.hero .lead { font-size: 1.15rem; margin-left: auto; margin-right: auto; }
.hero .actions { justify-content: center; }
.hero .storage { margin-top: 26px; }
.best { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.3; margin: 8px 0 0 0; }
.best small { display: block; font-family: var(--font-body); font-size: 13px; color: var(--text-2); }

/* ===== the onboarding: the figure, the words, the dots and the buttons in one centred column ===== */
.onb { max-width: 640px; width: 100%; margin: 0 auto; }
.slide { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 8px 0 0 0; }
/* the slides before the pick share the tallest one's height (set by the page), their content at the top, so the dots
   and the buttons under them stay put from slide to slide */
.slide:not(.wide) { min-height: var(--slide-h, auto); align-content: start; }
.slide .text { text-align: center; }
.slide h1 { font-size: 2.2rem; }
.slide .text p { font-size: 1.05rem; line-height: 1.65; color: var(--text-2); margin: 0 auto 12px auto; max-width: 52ch; }
.slide .points { margin: 0; padding: 0 0 0 18px; color: var(--text-2); font-size: 15px; }
.slide .points li { margin: 0 0 6px 0; }
.slide .points li::marker { color: var(--accent); }
.figure { background: var(--panel); border-radius: 16px; padding: 22px 16px; display: flex; justify-content: center; align-items: center; min-height: 220px; }
.figure svg { display: block; width: 100%; max-width: 340px; height: auto; }
.figure text { font-family: var(--font-body); }
.figure .serif { font-family: var(--font-display); }
.dots { display: flex; gap: 8px; justify-content: center; margin: 22px 0 0 0; }
.dots button { width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0; background: var(--line-strong); cursor: pointer; transition: width .2s, background .2s; }
.dots button[aria-current="step"] { width: 26px; background: var(--accent); }
.slide-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 18px 0 0 0; }
.slide-nav .grow { flex: 1 1 auto; }

/* ===== the board ===== */
.bbar { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
@keyframes hitpulse { 0% { transform: scale(1); } 18% { transform: scale(1.7); background: var(--heart); } 100% { transform: scale(1); } }
.bbar .btn { min-height: 36px; padding: 6px 14px; font-size: 13px; }
.board { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: 16px; }
.board > * { min-width: 0; }
.sec { margin: 0 0 16px 0; }
.sec:last-child { margin-bottom: 0; }
.sec > h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sec > h2 small { font-family: var(--font-body); font-size: 12.5px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ip { background: var(--panel); border-radius: var(--radius-sm); padding: 10px 12px; }
.ip .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ip .top b { font-size: 14px; font-weight: 600; min-width: 0; }
.ip .top span { font-size: 12.5px; color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pbar { height: 6px; border-radius: 999px; background: var(--track); overflow: hidden; margin: 8px 0 0 0; }
.pbar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .6s ease; }
.capline { font-size: 13px; color: var(--text-2); margin: 10px 0 0 0; }
.capline.extra { color: var(--muted); margin-top: 2px; }
.rm { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 8px 8px 10px; background: var(--surface); }
.rm .n { font-family: var(--font-display); color: var(--muted); font-size: 15px; text-align: center; }
.rm b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.rm .meta { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.rm .meta .due { color: var(--ink); font-weight: 600; white-space: nowrap; }
.rm.next { border-color: rgba(154, 123, 46, .45); }
.rmnote { font-size: 12.5px; color: var(--muted); margin: 0 0 8px 0; }
.rq { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 14px; background: var(--surface); }
.rq.offer { background: var(--claim-bg); border-color: rgba(154, 123, 46, .35); }
.rq .head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; font-size: 12.5px; color: var(--text-2); }
.rq .head b { color: var(--ink); font-weight: 600; }
.rq .clock { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.rq .clock.soon { color: var(--ink); font-weight: 600; }
.rq h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.2; margin: 6px 0 6px 0; }
.rq p { margin: 0 0 8px 0; font-size: 14px; line-height: 1.55; }
.rq .meta { font-size: 12.5px; color: var(--text-2); margin: 0 0 10px 0; }
.rq .meta .due { color: var(--ink); font-weight: 600; white-space: nowrap; }
.rq .flags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 4px 0; }
.pill { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-2); background: var(--surface); white-space: nowrap; }
.pill.order { border-color: var(--ink); color: var(--ink); }
.pill.offer { border-color: rgba(154, 123, 46, .5); color: #7a6020; background: var(--highlight); }
.ans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ans.six, .col .ans.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ans.six .btn { font-size: 12.5px; padding: 6px 2px; min-height: 40px; }
.ans.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ans .btn { min-height: 42px; padding: 6px 4px; font-size: 13.5px; }
.log { list-style: none; margin: 0; padding: 0; }
.log li { font-size: 13px; color: var(--muted); line-height: 1.5; padding: 5px 0; border-top: 1px solid var(--line); }
.log li:first-child { border-top: 0; padding-top: 0; }
.log li span { font-variant-numeric: tabular-nums; margin-right: 6px; }

/* the toasts: a hit, news from outside, a copy */
.toasts { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; width: min(520px, calc(100vw - 24px)); pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); display: flex; gap: 10px; align-items: flex-start; animation: rise .25s ease; }
.toast svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===== the end ===== */
.end-top { padding: 10px 0 4px; max-width: 640px; margin: 0 auto; text-align: center; }
.end-top .actions { justify-content: center; }
.end-top .score { font-family: var(--font-display); font-size: 3.6rem; line-height: 1; letter-spacing: -0.02em; margin: 4px 0 8px 0; }
.end-top .sub { font-size: 1.05rem; color: var(--text-2); margin: 0; }
.end-top .sub b { color: var(--ink); }
.lines { list-style: none; margin: 0; padding: 0; }
.lines li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.lines li .h svg { width: 16px; height: 16px; display: block; margin-top: 3px; }
.lines li:first-child { border-top: 0; padding-top: 0; }
.lines li span { font-family: var(--font-display); color: var(--muted); }
.lines li.none { grid-template-columns: minmax(0, 1fr); color: var(--muted); }
.chart { margin: 4px 0 0 0; min-height: 22px; }
.chart svg { display: block; max-width: 100%; height: auto; }
.legend-grid { list-style: none; margin: 12px 0 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 14px; font-size: 13px; color: var(--text-2); align-items: baseline; }
.legend-grid li { display: contents; }
.legend-grid .lbl { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.legend-grid i { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 3px; transform: translateY(1px); }
.legend-grid b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.legend-grid li > span:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plainline { font-size: 15px; line-height: 1.6; margin: 0; }
.simlink { font-size: 14px; color: var(--text-2); margin: 22px 0 0 0; }
.copybox { margin: 12px 0 0 0; }
.copybox input { width: 100%; font-size: 14px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); }

/* ===== your runs ===== */
.lb { display: grid; gap: 10px; }
.lb-head { display: none; }
.lb-row { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.lb-row .c { font-size: 13px; color: var(--text-2); }
.lb-row .c::before { content: attr(data-label) ': '; color: var(--muted); }
.lb-row .rank { font-family: var(--font-display); font-size: 1.1rem; color: var(--accent); }
.lb-row .c.big { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); }
.lb-row .c.big::before { font-family: var(--font-body); font-size: 13px; }
.lb-row .act { margin-top: 6px; }
.lb-row.you { background: var(--highlight); border-color: transparent; }

@media (min-width: 560px) {
  .figure.orgfig { padding: 16px; }
}
@media (min-width: 760px) {
  .qbar > .in, .wrap, .qfoot > .in, .bbar > .in { padding-left: 24px; padding-right: 24px; }
  .wrap { padding-top: 32px; }
  h1 { font-size: 2.6rem; }
  .hero h1 { font-size: 4rem; }
  .card { padding: 22px 24px; }
  .slide { gap: 28px; }
  .slide.wide .figure { min-height: 0; }
  .figure { min-height: 300px; }
  /* in the middle of the height between the bar and the footer */
  main.view-landing, main.view-slides { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; padding-bottom: 24px; }
  .end-top .score { font-size: 4.6rem; }
  .lb-head { display: grid; }
  .lb-head, .lb-row { display: grid; grid-template-columns: 34px 100px minmax(0, 1.2fr) minmax(0, 1fr) 90px 80px 140px; gap: 10px; align-items: center; }
  .lb-head { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 0 14px; }
  .lb-row { border-radius: 0; border-width: 0 0 1px 0; padding: 10px 14px; }
  .lb-row .c::before { content: none; }
  .lb-row .act { margin: 0; }
  .lb { gap: 0; }
}
@media (min-width: 960px) {
  .board { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .end-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
}

/* the toast's small label */
.toast b { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #e6d3a1; margin: 0 0 2px 0; }

/* ===== version 2.2: the plan and the sprint ===== */
/* the plan: its head with Start, which waits without a clock, last sprint's results, the meter and the value, the three lanes */
.plan-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin: 0 0 16px 0; }
.plan-head .ttl { flex: 1 1 420px; min-width: 0; }
.plan-head h1 { margin: 0; }
.plan-head .lead { margin: 6px 0 0 0; }
.plan-head .go { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.results { background: var(--claim-bg); border-color: rgba(154, 123, 46, .25); }
.results p { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 6px 0; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.results p:last-child { margin-bottom: 0; }
.results p.lead { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.25; color: var(--ink); margin-bottom: 8px; }
.results p svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; }
.results p.shock, .results p.milestone { color: var(--ink); }
.meters2 { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin: 0 0 18px 0; }
.meterbox, .valuebox { background: var(--panel); border-radius: var(--radius); padding: 12px 14px; }
.meterbox .t, .valuebox .t { display: block; font-size: 13px; color: var(--text-2); }
.meterbox .amt { margin: 2px 0 0 0; font-size: 13.5px; color: var(--text-2); line-height: 1.35; }
.meterbox .amt b, .valuebox b { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums; }
.valuebox b { display: block; margin: 2px 0 0 0; }
.valuebox .note { margin: 2px 0 0 0; }
.cbar { position: relative; height: 10px; border-radius: 999px; background: var(--track); margin: 8px 0 6px 0; overflow: visible; }
.cbar .fill, .cbar .carry { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transition: width .35s ease, background .3s; }
.cbar .fill { background: var(--good, #2E7D4F); }
.cbar .carry { background: rgba(0, 0, 0, .18); z-index: 1; }
.cbar .cap { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); border-radius: 1px; z-index: 2; }
.verdict { margin: 0; font-size: 13.5px; font-weight: 600; }
.v-likely .cbar .fill { background: #2E7D4F; } .v-likely .verdict { color: #2E7D4F; }
.v-possibly .cbar .fill { background: #c99a00; } .v-possibly .verdict { color: #8a6a00; }
.v-unlikely .cbar .fill { background: #b23b3b; } .v-unlikely .verdict { color: #b23b3b; }
.lanes { display: flex; flex-direction: column; gap: 16px; }
.lane { min-width: 0; background: var(--panel); border-radius: var(--radius); padding: 12px; }
.lane-now { order: 1; } .lane-next { order: 2; } .lane-later { order: 3; }
.lane h2, .col h2 { display: flex; align-items: baseline; gap: 8px; font-size: 1.25rem; }
.lane h2 small, .col h2 small { font-family: var(--font-body); font-size: 12.5px; color: var(--muted); }
.lane-now { background: rgba(154, 123, 46, .09); }
.pc { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); padding: 9px 10px; }
.lanemore { margin: 10px 0 0 0; width: 100%; }
.pc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pc-t { min-width: 0; }
.pc-t b { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.pc .meta { display: block; font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.pc .meta .due { color: var(--ink); font-weight: 600; white-space: nowrap; }
/* the sprint: four columns, Inbox, To do, In progress and Done, stacked in that order on a phone */
.cols4 { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: 4px; }
.col { min-width: 0; }
.col .ans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dn { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--panel); font-size: 13.5px; }
.dn b { font-weight: 600; min-width: 0; }
.dn span { white-space: nowrap; color: var(--text-2); font-variant-numeric: tabular-nums; }
.donecount { font-size: 13px; color: var(--text-2); margin: 0 0 8px 0; }
.col-done .list.done.many { display: none; }
.donelast { font-size: 13px; color: var(--text-2); margin: 0 0 8px 0; line-height: 1.45; }
.lanehelp { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin: -6px 0 10px 0; }
main.sprint, main.plan { padding-top: 18px; }
@media (min-width: 760px) {
  .meters2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .plan-head .go { align-items: flex-end; }
}
@media (min-width: 960px) {
  .lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .lane-later { order: 1; } .lane-next { order: 2; } .lane-now { order: 3; }
  .cols4 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .9fr); }
  .col-done .list.done.many { display: grid; }
  .donecount, .donelast { display: none; }
}

/* ===== version 2.3: bundles and their revealed fields ===== */
.pc-top .pc-t { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; min-width: 0; }
.fields { margin: 6px 0 0 0; display: grid; gap: 4px; }
.fld { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.fld.bare { grid-template-columns: minmax(0, 1fr); }
.fld dt { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fld dd { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.fld dd.due { color: var(--ink); font-weight: 600; }
.fld.f-size dd { color: var(--ink); font-variant-numeric: tabular-nums; }
.btn.huge { font-size: 18px; padding: 16px 40px; min-height: 60px; }
.outs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.outs li { display: flex; justify-content: space-between; gap: 10px; }
.outs li b { font-weight: 500; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ===== drag and drop: the plan's lanes and the sprint's To do ===== */
[data-drag] { cursor: grab; }
[data-drag]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.grip { display: none; flex: 0 0 auto; width: 34px; height: 34px; margin: -7px -7px -4px 6px; border-radius: var(--radius-sm); place-items: center; touch-action: none; cursor: grab; }
.grip svg { width: 10px; height: 16px; fill: var(--muted); }
.rm .grip { margin: 0; }
@media (hover: none), (pointer: coarse) {
  .grip { display: grid; }
  [data-drag] { cursor: default; }
}
.lifted { display: none; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 300; margin: 0; list-style: none; pointer-events: none; transform-origin: 30% 20%; box-shadow: 0 18px 44px rgba(0, 0, 0, .22), 0 3px 8px rgba(0, 0, 0, .12); border-color: var(--line-strong); }
.drop-ph { list-style: none; min-height: 40px; border: 2px dashed rgba(154, 123, 46, .55); border-radius: var(--radius-sm); background: rgba(154, 123, 46, .06); }
body.dragging-card, body.dragging-card * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.lane .list:empty { min-height: 8px; }

/* ===== version 2.4 and 2.5: discovery, and the actions on a sprint card ===== */
.rq.away { opacity: .55; background: var(--panel); }
.rq.away h3, .rq.away p { color: var(--text-2); }
.insight { background: var(--panel); border-radius: var(--radius-sm); padding: 8px 10px; margin: 0 0 10px 0; }
.insight .kicker { margin: 0 0 4px 0; }
.insight ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.rm-b { min-width: 0; }
.outs.mini { margin: 4px 0 0 0; font-size: 12px; line-height: 1.4; color: var(--text-2); gap: 0; }
.outs.mini li { display: block; }
.outs.mini li.gone { color: var(--muted); }
.cutpill { margin: 4px 0 0 0; font-size: 10.5px; padding: 1px 7px; }
.acts { display: flex; gap: 14px; margin: 6px 0 0 0; }
.link.small { font-size: 12.5px; font-weight: 600; }
.ip .acts { margin-top: 8px; }

/* ===== version 2.6: the stickiness batch ===== */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* 08 the end's score counts up, and what is under it settles in after */
.end-top.play .after { animation: rise .5s 1.45s both; }
/* 09 a chip with a value rising to the profit track (section 31) */
.vchip { position: fixed; z-index: 250; font-size: 11.5px; font-weight: 600; line-height: 20px; padding: 0 8px; border-radius: 999px; background: var(--accent); color: #fff; white-space: nowrap; pointer-events: none; animation: chipUp 1.2s .2s cubic-bezier(.55, 0, .35, 1) both; }
@keyframes chipUp { 0% { opacity: 0; transform: translateY(6px); } 18% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -110px)) scale(.7); } }
/* 16 the inbox as a pile on a phone */
.edge { display: flex; justify-content: space-between; gap: 10px; align-items: center; width: calc(100% - var(--i) * 12px); height: 30px; padding: 0 12px; margin: 0 calc(var(--i) * 6px); border: 1px solid var(--line-strong); border-top: 0; border-radius: 0 0 10px 10px; background: var(--surface); font: inherit; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; cursor: pointer; text-align: left; }
.edge span:first-child { overflow: hidden; text-overflow: ellipsis; }
.edge span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.edge.more { justify-content: center; color: var(--muted); background: var(--panel); cursor: default; }
@keyframes pileDrop { from { opacity: 0; transform: translateY(-26px); } }
@keyframes pileEdges { from { transform: translateY(-28px); } }
.pile { display: block; }
.pile .rq:not(.top) { display: none; }
.pile .rq.top { position: relative; z-index: 1; overflow: hidden; }
.edges { display: block; }
.pile .rq.dropin { animation: pileDrop .55s .1s cubic-bezier(.3, 1.4, .5, 1) both; }
.edges.dropin { animation: pileEdges .45s .1s ease both; }
/* the fuse along the top card's top edge, draining over its countdown, gold until its last week */
.rq .fuse { position: absolute; left: 0; top: 0; height: 3px; background: var(--accent); }
.rq .fuse.last { background: var(--ink); }
/* 18 a card done slides out of In progress and washes into Done in green */
@keyframes leaveWip { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(26px); } }
.ip.leaving { animation: leaveWip .6s ease both; }
@keyframes washIn { 0% { opacity: 0; transform: translateX(-22px); background-color: rgba(46, 125, 79, .2); } 25%, 45% { opacity: 1; transform: none; background-color: rgba(46, 125, 79, .2); } 100% { opacity: 1; transform: none; } }
@keyframes washText { 0%, 45% { color: #2e7d4f; } }
.dn.fresh { animation: washIn 1.5s .5s both; }
.dn.fresh span { animation: washText 1.5s .5s both; }
/* 21 lift and settle */
.pc { transition: transform .15s ease, box-shadow .15s ease; }
@media (hover: hover) and (pointer: fine) { .pc[data-drag]:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); } }
@keyframes settle { 0% { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 22px rgba(0, 0, 0, .16); } 60% { transform: translateY(1px); } 100% { transform: none; box-shadow: none; } }
.settle { animation: settle .38s ease-out; }
/* 26 paper grain on the warm panels: lanes, Done rows, the results card, the meter and the value */
.lane, .dn, .results, .meterbox, .valuebox { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .14 0 0 0 0 .08 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); background-size: 180px 180px; }
/* 27 the type pass: a single money figure in the serif, Done's titles larger, labels tracked a little more */
.dn b { font-size: 15px; }
.dn span { font-family: var(--font-display); font-size: 17px; line-height: 1.2; color: var(--ink); }
.fld dt { letter-spacing: .12em; color: var(--text-2); white-space: nowrap; }
.fld dd { font-size: 13px; }

/* 30 Play again with its line, and Change scenario */
.btn.two { flex-direction: column; gap: 2px; line-height: 1.2; }
.btn.two small { font-size: 11.5px; font-weight: 500; opacity: .85; }
.chg { margin: 14px 0 0 0; font-size: 13.5px; }
.plansub { margin: 6px 0 0 0; font-size: 14px; color: var(--text-2); }
/* 29 the last run on the landing */
.lastrun { margin: 18px 0 0 0; font-size: 14px; color: var(--text-2); }
/* 06 the share card */
.share { border: 1px solid rgba(0, 0, 0, .12); border-radius: 12px; padding: 14px 16px 16px; background: var(--claim-bg); }
.share .top2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.share .brand { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 14px; color: var(--ink); }
.share .brand::before { content: ""; width: 16px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cpath d='M2.5 5.5 7 10l-4.5 4.5M10 5.5l4.5 4.5L10 14.5M17.5 5.5 22 10l-4.5 4.5' fill='none' stroke='%239a7b2e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.share .big { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; margin: 14px 0 4px 0; }
.share p { margin: 0; font-size: 13px; color: var(--text-2); }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 46px; margin: 14px 0 0 0; }
.spark i { flex: 1 1 0; background: var(--accent); border-radius: 3px 3px 0 0; }
.sharetext { margin: 12px 0 0 0; padding: 10px 12px; border-radius: 8px; background: var(--panel); font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.copybox textarea { width: 100%; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); resize: none; }
/* 03 titles: a quiet card, the title in the serif, the ladder as a fine rule with its rungs */
.titles { display: grid; gap: 18px; align-content: start; }
.titles .ttl { font-family: var(--font-display); font-size: 2rem; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 6px 0; }
.titles.fresh .ttl { animation: rise .6s .4s cubic-bezier(.2, .9, .3, 1.25) both; }
.ladder { list-style: none; margin: 0 0 0 6px; padding: 0 0 0 20px; border-left: 1px solid var(--line-strong); display: grid; gap: 2px; }
.ladder li { position: relative; padding: 5px 0; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.2; color: var(--muted); }
.ladder li::before { content: ""; position: absolute; left: -25px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--line-strong); }
.ladder li span { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ladder .got { color: var(--ink); }
.ladder .got::before { background: var(--ink); border-color: var(--ink); }
.ladder .next { color: var(--accent); }
.ladder .next::before { border-color: var(--accent); border-width: 2px; }
.ladder .far { opacity: .55; }
/* 12 the run in one chart */
.vchart .bars { display: grid; gap: 6px; align-items: end; height: 150px; padding-top: 22px; border-bottom: 1px solid var(--line-strong); }
.vchart .bars > span { position: relative; display: block; height: var(--h); background: var(--accent); border-radius: 4px 4px 0 0; animation: barUp .7s calc(var(--i) * .07s) cubic-bezier(.2, .8, .3, 1) both; }
.vchart .bars em { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 3px; font-size: 11.5px; font-style: normal; font-weight: 600; color: var(--ink); white-space: nowrap; }
.vchart .xs, .vchart .ev { display: grid; gap: 6px; text-align: center; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vchart .xs { padding-top: 5px; }
.vchart .ev { min-height: 20px; align-items: center; }
.vchart .ev span { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.vchart svg { width: 13px; height: 13px; }
.vchart .key { list-style: none; margin: 12px 0 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-2); }
.vchart .key li { display: inline-flex; align-items: center; gap: 6px; }
@keyframes barUp { from { height: 0; } }
@media (min-width: 960px) { .end-grid.end-three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ===== the onboarding's figures move, quietly, seven to ten seconds a loop, and rest on a complete figure ===== */
.figure svg g, .figure svg rect, .figure svg circle { transform-box: fill-box; }
/* slide 2: the runway's and the profit track's markers move right together, step by step as the income grows, then both reset */
.f2 .gain .lm { transform-box: view-box; }
.f2 .gain .lm { animation: f2gainM 7s ease-in-out infinite; }
.f2 .gain .lf { transform-origin: left center; animation: f2gainF 7s ease-in-out infinite; }
@keyframes f2gainM { 0%, 14% { transform: none; } 20%, 30% { transform: translateX(calc(var(--dx) / 3)); } 36%, 46% { transform: translateX(calc(var(--dx) * 2 / 3)); } 52%, 64% { transform: translateX(var(--dx)); } 80%, 100% { transform: none; } }
@keyframes f2gainF { 0%, 14% { transform: none; } 20%, 30% { transform: scaleX(calc(1 + (var(--sx) - 1) / 3)); } 36%, 46% { transform: scaleX(calc(1 + (var(--sx) - 1) * 2 / 3)); } 52%, 64% { transform: scaleX(var(--sx)); } 80%, 100% { transform: none; } }
/* slide 4: a card lifts from Next into Now and the meter and the lane answer, then one moves from Later to Next, and back */
.f4 .mv.a { animation: f4a 8s ease-in-out infinite; }
.f4 .mv.b { animation: f4b 8s ease-in-out infinite; }
.f4 .meter { transform-origin: left center; animation: f4m 8s ease-in-out infinite; }
.f4 .nowlane { animation: f4n 8s ease-in-out infinite; }
@keyframes f4a { 0%, 8% { transform: none; } 13% { transform: translate(0, -3px) scale(1.04); } 30%, 74% { transform: translate(102px, 69px); } 86%, 100% { transform: none; } }
@keyframes f4b { 0%, 40% { transform: none; } 45% { transform: translate(0, -3px) scale(1.04); } 56%, 74% { transform: translate(102px, 0); } 86%, 100% { transform: none; } }
@keyframes f4m { 0%, 28% { transform: none; } 34%, 74% { transform: scaleX(1.32); } 86%, 100% { transform: none; } }
@keyframes f4n { 0%, 28% { opacity: 1; } 32% { opacity: .55; } 38%, 100% { opacity: 1; } }
/* slide 5: a request slides in, and its countdown ticks down a step */
.f5 .card { animation: f5in 7s ease-out infinite; }
.f5 .clock { animation: f5tick 7s steps(1, end) infinite; }
@keyframes f5in { 0% { opacity: 0; transform: translateX(28px); } 10%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes f5tick { 0%, 48% { stroke-dashoffset: 100; } 50%, 100% { stroke-dashoffset: 200; } }
/* slide 6: the marker climbs rung by rung, each title lights as it passes, then all start again (ten seconds) */
.f6 .climb { animation: f6 10s ease-in-out infinite; }
@keyframes f6 { 0%, 10% { transform: none; } 14%, 24% { transform: translateY(-38px); } 28%, 38% { transform: translateY(-76px); } 42%, 52% { transform: translateY(-114px); } 56%, 66% { transform: translateY(-152px); } 70%, 86% { transform: translateY(-190px); } 94%, 100% { transform: none; } }
.f6 .tt { fill-opacity: .32; }
.f6 .tt.k0 { animation: f6t0 10s infinite; }
.f6 .tt.k1 { animation: f6t1 10s infinite; }
.f6 .tt.k2 { animation: f6t2 10s infinite; }
.f6 .tt.k3 { animation: f6t3 10s infinite; }
.f6 .tt.k4 { animation: f6t4 10s infinite; }
.f6 .tt.k5 { animation: f6t5 10s infinite; }
@keyframes f6t0 { 0%, 10% { fill-opacity: 1; } 14%, 90% { fill-opacity: .32; } 96%, 100% { fill-opacity: 1; } }
@keyframes f6t1 { 0%, 12% { fill-opacity: .32; } 14%, 26% { fill-opacity: 1; } 28%, 100% { fill-opacity: .32; } }
@keyframes f6t2 { 0%, 26% { fill-opacity: .32; } 28%, 40% { fill-opacity: 1; } 42%, 100% { fill-opacity: .32; } }
@keyframes f6t3 { 0%, 40% { fill-opacity: .32; } 42%, 54% { fill-opacity: 1; } 56%, 100% { fill-opacity: .32; } }
@keyframes f6t4 { 0%, 54% { fill-opacity: .32; } 56%, 68% { fill-opacity: 1; } 70%, 100% { fill-opacity: .32; } }
@keyframes f6t5 { 0%, 68% { fill-opacity: .32; } 70%, 88% { fill-opacity: 1; } 94%, 100% { fill-opacity: .32; } }

/* ===== version 2.8: the instrument bar, the ticker and the cash on the runway ===== */
/* the level and the quarter (section 30), the runway as a gauge with its scale, the profit track where the goal was (section 31), Save and Pause */
.bbar > .in { max-width: 1100px; margin: 0 auto; padding: 10px 16px 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bbar .when { order: 1; margin-right: auto; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1; white-space: nowrap; }
.bbar .when em { font: 600 13px/1 var(--font-body); font-style: normal; color: var(--accent); margin-left: 6px; vertical-align: 1px; }
.bbar #b-pause { order: 2; }
.bbar .inst { order: 3; flex: 1 1 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: end; }
/* the runway and the profit track: a small label, the figure, the gauge or the track, and the runway's scale */
.ln { position: relative; min-width: 0; }
.ln .hd { display: block; min-width: 0; }
.ln .hd small { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); line-height: 1.3; white-space: nowrap; }
.ln .hd b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; transition: color .3s; }
.ln .hd b svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.gaugebtn { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 3px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.gaugebtn:focus-visible { outline-offset: 4px; }
.gauge { position: relative; display: block; height: 8px; margin-top: 6px; border-radius: 2px; background: var(--track); }
.gauge i { position: absolute; top: 0; bottom: 0; left: 0; }
.gauge .zone { background: rgba(178, 59, 59, .22); border-radius: 2px 0 0 2px; }
.gauge .trail { top: 2px; bottom: 2px; width: 0; border-radius: 2px; background: rgba(178, 59, 59, .6); }
.gauge .fill { top: 2px; bottom: 2px; width: 0; border-radius: 2px; background: var(--ink); transition: width .7s ease, background .3s; }
.gauge .k { width: 1px; margin-left: -.5px; top: -3px; bottom: -3px; background: rgba(26, 26, 31, .2); }
.gauge .mk { top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); transition: left .7s ease, background .3s; }
.ln.low .gauge .fill, .ln.low .gauge .mk { background: var(--heart); }
.ln.low .hd b { color: var(--heart); }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(178, 59, 59, .3); } 50% { box-shadow: 0 0 0 5px rgba(178, 59, 59, .16); } }
.ln.low .gauge .mk { animation: breathe 2.5s ease-in-out infinite; }
.ln.hit .gauge .mk { animation: hitpulse 1.2s ease; }
.ln.drop .gauge .fill, .ln.drop .gauge .mk { transition: none; }
.ln .scale { position: relative; display: none; height: 14px; font-size: 9.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ln .scale em { position: absolute; top: 3px; transform: translateX(-50%); font-style: normal; line-height: 1; }
/* the runway's spec: on a hover with a mouse, or a tap */
.specpop { display: none; position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: min(300px, calc(100vw - 32px)); padding: 12px 14px 12px; border-radius: 3px; background: var(--pp-card); box-shadow: 0 0 0 1px var(--pp-rule), 0 14px 28px -12px var(--pp-sh2); font-size: 13px; line-height: 1.45; text-align: left; }
.ln.rw.open .specpop { display: block; }
@media (hover: hover) and (pointer: fine) { .ln.rw:hover .specpop { display: block; } }
.ln.rw .gaugebtn:focus-visible ~ .specpop { display: block; }
.specpop h3 { font: 400 1.1rem/1.2 var(--font-display); margin: 0 0 6px 0; }
.specpop .kicker { margin: 10px 0 3px 0; font-size: 10px; color: var(--muted); }
.specpop ul { list-style: none; margin: 0; padding: 0; }
.specpop .burn li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px dashed var(--pp-rule); }
.specpop .burn li:last-child { border-bottom: 0; }
.specpop b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.specpop .inc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.specpop .inc li { padding: 3px 0; border-radius: 2px; text-align: center; background: rgba(46, 125, 79, .1); color: var(--pp-green); }
.specpop .note { margin: 8px 0 0 0; font-size: 12.5px; color: var(--text-2); }
/* the cash of the week: in rises from the gauge in green, out falls onto it in ink */
.cashbox { position: absolute; inset: 0; pointer-events: none; }
.cchip { position: absolute; left: 0; top: 0; z-index: 5; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px; white-space: nowrap; color: #fff; opacity: 0; font-variant-numeric: tabular-nums; }
.cchip.up { background: var(--pp-green); animation: cashUp 1.3s cubic-bezier(.25, .7, .4, 1) both; }
.cchip.down { background: var(--ink); animation: cashDown 1.3s cubic-bezier(.5, 0, .6, 1) both; }
@keyframes cashUp { 0% { opacity: 0; transform: translateY(3px) scale(.9); } 15% { opacity: 1; transform: translateY(-2px) scale(1); } 70% { opacity: 1; transform: translateY(-14px); } 100% { opacity: 0; transform: translateY(-22px); } }
@keyframes cashDown { 0% { opacity: 0; transform: translateY(-22px); } 15% { opacity: 1; } 32% { transform: translateY(0); } 40% { transform: translateY(-2px); } 48% { transform: translateY(0); } 74% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(2px); } }
/* the log as one line under the bar, and its last twenty under More */
.ticker { max-width: 1100px; margin: 0 auto; padding: 0 16px 6px; display: flex; align-items: baseline; gap: 12px; min-height: 25px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.tk-line { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-line.fresh { animation: tickIn .45s ease both; }
@keyframes tickIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.ticker .link { flex: 0 0 auto; font-size: 12px; }
.logpanel { max-width: 1100px; margin: 0 auto; padding: 0 16px 10px; }
.logpanel .log { max-height: min(46vh, 360px); overflow: auto; padding: 4px 0 0 0; border-top: 1px dashed var(--pp-rule); }
.logpanel .log li { color: var(--text-2); border-top: 1px dashed var(--pp-rule); padding: 5px 0; }
.logpanel .log li:first-child { border-top: 0; }
@media (min-width: 760px) {
  .ln .hd { display: flex; align-items: baseline; gap: 8px; }
  .ln .scale { display: block; }
  .ticker, .logpanel { padding-left: 24px; padding-right: 24px; }
}

/* ===== version 2.8: the paper kanban ===== */
:root {
  --pp-sheet: #f3f0e8;
  --pp-card: #fffefa;
  --pp-graphite: #55534c;
  --pp-redline: rgba(178, 59, 59, .32);
  --pp-blueline: rgba(43, 108, 176, .11);
  --pp-tape: rgba(226, 204, 146, .78);
  --pp-green: #2e7d4f;
  --pp-sh1: rgba(60, 48, 20, .08);
  --pp-sh2: rgba(60, 48, 20, .42);
  --pp-rule: rgba(85, 83, 76, .22);
  --pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 6' preserveAspectRatio='none'%3E%3Cpath d='M0 5.5H200' fill='none' stroke='%2355534c' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .14 0 0 0 0 .08 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}
/* the sheet: the board lies on paper with a faint grain; nothing on it (a card sliding out, a tape at the edge) widens the page */
#app { overflow-x: clip; }
#app.paper { --track: rgba(85, 83, 76, .16); background-color: var(--pp-sheet); background-image: var(--grain); background-size: 180px 180px; }
.paper .qbar { background: transparent; border-bottom-color: var(--pp-rule); }
.paper .qfoot { border-top-color: var(--pp-rule); }
.paper .bbar { background: rgba(243, 240, 232, .94); border-bottom-color: var(--pp-rule); }
.paper .bbar .btn:not(.primary), .paper .plan-head .btn:not(.primary), .paper .lanemore { background: var(--pp-card); }
/* column and lane names in the serif, underlined in pencil */
.paper .col > h2, .paper .lane > h2 { display: inline-flex; align-items: baseline; gap: 6px; font-size: 1.55rem; line-height: 1.1; padding: 0 8px 8px 0; margin: 0 0 14px 0; background: var(--pencil) left bottom / 100% 5px no-repeat; }
.paper .col > h2 small, .paper .lane > h2 small { font-family: var(--font-display); font-size: 1.05rem; color: var(--muted); }
/* the ruler of the sprint's thirteen weeks: this week circled, the dates on tape, every tick centred on its line */
.ruler { position: relative; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); margin: 32px 0 24px 0; background: var(--pencil) left bottom / 100% 4px no-repeat; }
.ruler > span { position: relative; padding: 0 0 12px 0; text-align: center; font: 400 13px/1 var(--font-display); color: var(--text-2); }
.ruler > span::after { content: ""; position: absolute; left: 50%; bottom: -3.2px; width: 1px; height: 7px; margin-left: -.5px; background: var(--pp-graphite); }
.ruler .gone { color: var(--muted); }
.ruler .now { color: var(--ink); }
.ruler .circ { position: absolute; left: 50%; top: -8.5px; width: 30px; height: 30px; margin-left: -15px; overflow: visible; pointer-events: none; }
.ruler .circ circle { fill: none; stroke: var(--pp-graphite); stroke-width: 1.2; }
.tape { position: absolute; z-index: 2; display: block; height: 20px; padding: 0 12px; font: 400 12.5px/20px var(--font-display); font-style: normal; color: var(--ink); white-space: nowrap; background: var(--pp-tape); clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 25%, calc(100% - 3px) 50%, 100% 75%, calc(100% - 4px) 100%, 4px 100%, 0 75%, 3px 50%, 0 25%); pointer-events: none; }
.ruler .tape { left: 50%; top: -28px; transform: translateX(-50%) rotate(-3deg); }
.ruler .tape.l { left: 0; transform: rotate(-3deg); }
.ruler .tape.r { left: auto; right: 0; transform: rotate(-3deg); }
.ruler .tape.past { opacity: .5; }
/* index cards: To do ruled with its red line, In progress shaded in pencil, Done stamped in green ink */
.paper .list { gap: 14px; }
.paper .rm, .paper .ip, .paper .dn, .paper .rq, .paper .pc, .paper .drag-ghost { border: 0; border-radius: 2px; background-color: var(--pp-card); box-shadow: 0 1px 1px var(--pp-sh1), 0 10px 18px -12px var(--pp-sh2); }
.paper .rm, .paper .ip, .paper .dn, .paper .rq, .paper .pc { position: relative; transform: rotate(var(--r, 0deg)); }
.paper .drag-ghost { box-shadow: 0 18px 40px -10px rgba(60, 48, 20, .45), 0 2px 6px rgba(60, 48, 20, .14); }
.paper .rm { align-items: start; gap: 6px; padding: 10px 10px 12px 10px; background-image: linear-gradient(transparent 31px, var(--pp-redline) 31px, var(--pp-redline) 32px, transparent 32px), repeating-linear-gradient(transparent 0, transparent 21px, var(--pp-blueline) 21px, var(--pp-blueline) 22px); background-position: 0 0, 0 10px; }
.paper .rm .n { font-size: 15px; line-height: 22px; text-align: left; }
.paper .rm b { font-size: 14.5px; line-height: 22px; }
.paper .rm .meta, .paper .rm .outs.mini { line-height: 22px; margin: 0; }
.paper .rm .grip { align-self: center; }
.paper .rm > .tape, .paper .ip > .tape { top: -11px; right: 14px; transform: rotate(2.5deg); }
.paper .acts { gap: 16px; margin: 4px 0 0 0; }
.paper .acts .link { font: 400 14px/1.3 var(--font-display); text-decoration: none; padding: 0 0 2px 0; background: var(--pencil) left bottom / 100% 3px no-repeat; }
.paper .acts .link:hover { color: var(--accent); }
.paper .ip { padding: 10px 12px 12px; }
.paper .ip .top b { font-size: 14.5px; line-height: 22px; }
.paper .ip .top span { font: 400 15px/1 var(--font-display); color: var(--pp-graphite); }
.paper .pbar { position: relative; height: 10px; margin: 8px 0 4px 0; border: 1px solid var(--pp-graphite); border-radius: 1px; background: none; }
.paper .pbar i { border-radius: 0; background: repeating-linear-gradient(-60deg, var(--pp-graphite) 0 1px, transparent 1px 3.5px); }
.paper .capline { font-family: var(--font-display); font-size: 14px; line-height: 1.4; margin-top: 14px; }
.paper .capline.extra { margin-top: 4px; }
.paper .dn { display: block; min-height: 84px; padding: 10px 84px 12px 12px; background-image: none; font-size: 14px; }
.paper .dn > b { display: block; font-size: 14.5px; font-weight: 600; line-height: 22px; }
.paper .dn .est { display: block; font: 400 12.5px/20px var(--font-body); color: var(--muted); white-space: normal; }
.paper .dn .stamp { position: absolute; right: 10px; top: 50%; width: 64px; height: 64px; margin-top: -32px; display: grid; place-content: center; gap: 1px; border-radius: 50%; border: 2px solid var(--pp-green); box-shadow: inset 0 0 0 3px var(--pp-card), inset 0 0 0 4.5px var(--pp-green); color: var(--pp-green); text-align: center; white-space: nowrap; transform: rotate(-12deg); opacity: .86; }
.paper .dn .stamp small { font: 600 8px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; }
.paper .dn .stamp b { font: 400 16px/1.1 var(--font-display); color: var(--pp-green); }
.paper .dn .stamp.bare small { font-size: 10px; letter-spacing: .16em; }
@keyframes stampIn { 0% { opacity: 0; transform: rotate(-30deg) scale(1.7); } 100% { opacity: .86; transform: rotate(-12deg) scale(1); } }
.paper .dn.fresh .stamp { animation: stampIn .45s .95s cubic-bezier(.3, 1.4, .5, 1) both; }
/* the pile: the top card clipped, its edges beneath, the answers drawn in pencil with their icons */
.paper .rq { padding: 16px 14px 14px; }
.paper .pile .rq.top { overflow: visible; --r: -.4deg; }
.paper .rq .head { padding-right: 24px; }
.paper .rq h3 { font-size: 1.3rem; line-height: 1.15; }
.paper .rq.offer { background-color: #fcf7e8; }
.paper .rq.away { background-color: #f8f6f0; }
.paper .rq .fuse { border-radius: 2px 0 0 0; }
.rq .clip { position: absolute; right: 16px; top: -14px; z-index: 3; width: 14px; height: 36px; overflow: visible; pointer-events: none; }
.rq .clip path { fill: none; stroke: var(--pp-graphite); stroke-width: 1.2; stroke-linecap: round; }
.paper .edges { transform: rotate(-.4deg); }
.paper .edge { border: 0; border-top: 1px solid var(--pp-rule); border-radius: 0; background: var(--pp-card); box-shadow: 0 1px 1px var(--pp-sh1), 0 6px 10px -8px var(--pp-sh2); }
.paper .edge span:last-child { font-family: var(--font-display); font-size: 13px; color: var(--ink); }
.paper .edge.more { background: none; box-shadow: none; border-top: 0; }
.ans .btn svg { flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ans.six .btn { flex-direction: column; gap: 4px; min-height: 54px; padding: 6px 2px; }
.paper .ans .btn { border: 1px solid var(--pp-graphite); border-radius: 4px; background: transparent; font-family: var(--font-display); font-weight: 400; font-size: 14px; line-height: 1.1; letter-spacing: 0; color: var(--ink); }
.paper .ans .btn:hover { border-color: var(--ink); background: rgba(85, 83, 76, .07); }
/* the plan on the same paper: the lanes as sheets on the desk, Now tinted like tape, the cards as index cards */
.paper .lane { background: rgba(255, 254, 250, .5); background-image: none; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--pp-rule); padding: 14px 12px; }
.paper .lane-now { background: rgba(226, 204, 146, .2); }
.paper .lanehelp { margin: -4px 0 12px 0; }
.paper .pc { padding: 10px 12px; transition: transform .15s ease, box-shadow .15s ease; }
.paper .pc-top .pc-t { font-size: 14.5px; line-height: 1.4; }
@media (hover: hover) and (pointer: fine) { .paper .pc[data-drag]:hover { transform: rotate(var(--r, 0deg)) translateY(-2px); box-shadow: 0 1px 1px var(--pp-sh1), 0 14px 22px -12px var(--pp-sh2); } }
.paper .results, .paper .meterbox, .paper .valuebox { border: 0; border-radius: 3px; background-color: var(--pp-card); background-image: none; box-shadow: 0 1px 1px var(--pp-sh1), 0 10px 18px -12px var(--pp-sh2); }
.paper .results { background-color: #fcf7e8; }
.paper .cbar { background: rgba(85, 83, 76, .14); }
/* the end's chart: the value realised as a bar, the estimate as a pencil outline behind it */
.vchart .bars > span { position: relative; display: block; height: 100%; background: none; border-radius: 0; animation: none; }
.vchart .bars > span i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 4px 4px 0 0; animation: barUp .7s calc(var(--i) * .07s) cubic-bezier(.2, .8, .3, 1) both; }
.vchart .bars .re { background: var(--accent); }
.vchart .bars .es { border: 1.3px dashed var(--pp-graphite); border-bottom: 0; background: rgba(85, 83, 76, .04); }
.vchart .key .sw { display: inline-block; width: 12px; height: 10px; border-radius: 2px 2px 0 0; }
.vchart .key .sw.re { background: var(--accent); }
.vchart .key .sw.es { border: 1.3px dashed var(--pp-graphite); border-bottom: 0; }
@media (min-width: 760px) {
  .ruler { margin: 36px 0 26px 0; }
}

/* ===== version 2.9: one paper identity, and the chevrons ===== */
/* the mark: three gold chevrons beside the wordmark; a wave runs through them when a view opens, and now and then */
.qbar .brand .mark { display: block; flex: 0 0 auto; width: 26px; height: 20px; overflow: visible; }
.qbar .brand .mark path { fill: none; stroke: var(--accent); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.qbar .brand.wave .mark path { animation: chevNudge .6s ease both; }
.qbar .brand.wave .mark .c2 { animation-delay: .12s; }
.qbar .brand.wave .mark .c3 { animation-delay: .24s; }
@keyframes chevNudge { 0%, 100% { transform: none; } 40% { transform: translateX(2.5px); } }
/* the landing: the title, and beside it six chevrons that tell the game, never taller than half the title */
.hero h1 { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .08em .32em; }
.hero h1 .flow { display: block; flex: 0 0 auto; height: .5em; width: auto; overflow: visible; }
.flow .v { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: 50% 50%; animation: 11s ease-in-out infinite both; }
.flow .v0 { animation-name: flow0; }
.flow .v1 { animation-name: flow1; }
.flow .v2 { animation-name: flow2; }
.flow .v3 { animation-name: flow3; }
.flow .v4 { animation-name: flow4; }
.flow .v5 { animation-name: flow5; }
@keyframes flow0 { 0% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 2.73% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 4.36% { transform: translateX(3px); stroke: #9a7b2e; opacity: 1; } 7.27% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 16.36% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 18% { transform: translateX(3px); stroke: #9a7b2e; opacity: 1; } 20.91% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 31.82% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 35.45% { transform: translateX(1px); stroke: #9a7b2e; opacity: 0.28; } 53.64% { transform: translateX(1px); stroke: #9a7b2e; opacity: 0.28; } 57.27% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 59.09% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 60.73% { transform: translateX(3px); stroke: #2e7d4f; opacity: 1; } 63.64% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 67.27% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 68.91% { transform: translateX(3px); stroke: #2e7d4f; opacity: 1; } 71.82% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 80% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 87.27% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 100% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } }
@keyframes flow1 { 0% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 4.73% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 6.36% { transform: translateX(3px); stroke: #9a7b2e; opacity: 1; } 9.27% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 18.36% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 20% { transform: translateX(3px); stroke: #9a7b2e; opacity: 1; } 22.91% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 31.82% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 35.45% { transform: translateX(1.6px); stroke: #9a7b2e; opacity: 0.28; } 53.64% { transform: translateX(1.6px); stroke: #9a7b2e; opacity: 0.28; } 57.27% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 60.91% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 62.55% { transform: translateX(3px); stroke: #2e7d4f; opacity: 1; } 65.45% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 68.64% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 70.27% { transform: translateX(3px); stroke: #2e7d4f; opacity: 1; } 73.18% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 80% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 87.27% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 100% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } }
@keyframes flow2 { 0% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 6.73% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 8.36% { transform: translateX(3px); stroke: #9a7b2e; opacity: 1; } 11.27% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 20.36% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 22% { transform: translateX(3px); stroke: #9a7b2e; opacity: 1; } 24.91% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 31.82% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 35.45% { transform: translateX(2.2px); stroke: #9a7b2e; opacity: 0.28; } 53.64% { transform: translateX(2.2px); stroke: #9a7b2e; opacity: 0.28; } 57.27% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 62.73% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 64.36% { transform: translateX(3px); stroke: #2e7d4f; opacity: 1; } 67.27% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 70% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 71.64% { transform: translateX(3px); stroke: #2e7d4f; opacity: 1; } 74.55% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 80% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 87.27% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 100% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } }
@keyframes flow3 { 0% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 8.73% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 10.36% { transform: translateX(3px); stroke: #9a7b2e; opacity: 1; } 13.27% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 22.36% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 24% { transform: translateX(3px); stroke: #9a7b2e; opacity: 1; } 26.91% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 31.82% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 35.45% { transform: translateX(0px) rotate(180deg); stroke: #b23b3b; opacity: 1; } 53.64% { transform: translateX(0px) rotate(180deg); stroke: #b23b3b; opacity: 1; } 57.27% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 64.55% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 66.18% { transform: translateX(3px); stroke: #2e7d4f; opacity: 1; } 69.09% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 71.36% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 73% { transform: translateX(3px); stroke: #2e7d4f; opacity: 1; } 75.91% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 80% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 87.27% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 100% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } }
@keyframes flow4 { 0% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 10.73% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 12.36% { transform: translateX(3px); stroke: #9a7b2e; opacity: 1; } 15.27% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 24.36% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 26% { transform: translateX(3px); stroke: #9a7b2e; opacity: 1; } 28.91% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 31.82% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 35.45% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.28; } 53.64% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.28; } 57.27% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 66.36% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 68% { transform: translateX(3px); stroke: #2e7d4f; opacity: 1; } 70.91% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 72.73% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 74.36% { transform: translateX(3px); stroke: #2e7d4f; opacity: 1; } 77.27% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 80% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 87.27% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 100% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } }
@keyframes flow5 { 0% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 12.73% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 14.36% { transform: translateX(3px); stroke: #9a7b2e; opacity: 1; } 17.27% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 26.36% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 28% { transform: translateX(3px); stroke: #9a7b2e; opacity: 1; } 30.91% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 31.82% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 35.45% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.28; } 53.64% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.28; } 57.27% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 68.18% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 69.82% { transform: translateX(3px); stroke: #2e7d4f; opacity: 1; } 72.73% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 74.09% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 75.73% { transform: translateX(3px); stroke: #2e7d4f; opacity: 1; } 78.64% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 80% { transform: translateX(0px); stroke: #2e7d4f; opacity: 0.6; } 87.27% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } 100% { transform: translateX(0px); stroke: #9a7b2e; opacity: 0.45; } }
/* the slides: the figures drawn fine on the sheet itself */
.paper .figure { background: none; padding: 6px 0; }
/* the figures' lines carry their own colour and width, one to one and a half pixels */
/* tape for labels: the slides' kickers, the sprint's results, the end's and the title's */
.paper .slide .kicker, .paper .results > .kicker, .paper .end-top > .kicker, .paper .titles .kicker { display: inline-block; height: 22px; padding: 0 12px; margin: 0 0 12px 0; font: 400 13.5px/22px var(--font-display); letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--pp-tape); clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 25%, calc(100% - 3px) 50%, 100% 75%, calc(100% - 4px) 100%, 4px 100%, 0 75%, 3px 50%, 0 25%); transform: rotate(-2deg); }
/* the game's own buttons, on paper */
.paper .btn:not(.primary):not(.ghost) { background: var(--pp-card); }
/* cards on the end and the scores: paper with a shadow, their names underlined in pencil like the board's columns */
.paper .card { border: 0; border-radius: 3px; background-color: var(--pp-card); box-shadow: 0 1px 1px var(--pp-sh1), 0 12px 22px -14px var(--pp-sh2); }
.paper .card > h2 { display: inline-block; padding: 0 8px 7px 0; background: var(--pencil) left bottom / 100% 5px no-repeat; }
.paper .results { background-color: #fcf7e8; }
.paper .share { border: 0; border-radius: 2px; background-color: #fcf7e8; background-image: linear-gradient(transparent 41px, var(--pp-redline) 41px, var(--pp-redline) 42px, transparent 42px); box-shadow: 0 1px 1px var(--pp-sh1), 0 8px 14px -10px var(--pp-sh2); transform: rotate(-.3deg); }
.paper .sharetext { background: rgba(85, 83, 76, .06); }
.paper .lb-row { border: 0; border-bottom: 1px dashed var(--pp-rule); border-radius: 0; }
.paper .lb-row.you { background: rgba(226, 204, 146, .28); }
/* the green ink stamp on the sprint's results: what the sprint created, the lines flowing round it */
.paper .results .stamp { float: right; width: 72px; height: 72px; margin: -2px -2px 6px 12px; shape-outside: circle(50%); display: grid; place-content: center; gap: 1px; border-radius: 50%; border: 2px solid var(--pp-green); box-shadow: inset 0 0 0 3px #fcf7e8, inset 0 0 0 4.5px var(--pp-green); color: var(--pp-green); text-align: center; white-space: nowrap; transform: rotate(-12deg); opacity: .86; }
.paper .results .stamp small { font: 600 8px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; }
.paper .results .stamp b { font: 400 17px/1.1 var(--font-display); color: var(--pp-green); }
/* every label and badge in its own place: a dated card's tape has the top band to itself */
.paper .rm.dated, .paper .ip.dated { padding-top: 18px; }
.paper .rm.dated { background-position: 0 8px, 0 18px; }
/* one top row: the mark and the wordmark, the sprint strip and Pause; under 960 pixels the strip wraps under them */
.qbar.bbar > .in { height: auto; min-height: 52px; justify-content: flex-start; padding: 8px 16px 6px; gap: 8px 12px; }
.bbar .brand { flex: 0 0 auto; }
.bbar .when { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-size: 1.05rem; line-height: 1.15; }
.bbar .when em { margin-left: 0; vertical-align: 0; font-size: 11.5px; }
.ticker[hidden] { display: none; }
@media (min-width: 560px) {
  .bbar .when { flex-direction: row; align-items: baseline; gap: 8px; font-size: 1.2rem; }
  .bbar .when em { font-size: 13px; }
}
@media (min-width: 960px) {
  .qbar.bbar > .in { flex-wrap: nowrap; gap: 18px; padding: 8px 24px 6px; }
  .bbar .when { margin-right: 0; padding-left: 18px; border-left: 1px solid var(--pp-rule); }
  .bbar .inst { order: 2; flex: 1 1 auto; max-width: 720px; margin: 0 auto; gap: 22px; }
  .bbar #b-pause { order: 3; }
}
/* the landing during a run: Back to your game and Start a new game alike, side by side, stacked at full width on a
   phone; the end's row of buttons all of one height */
.hero .actions .btn.huge { flex: 0 1 260px; min-width: 0; }
.hero .actions .btn.huge:not(.primary) { background: var(--pp-card); border-color: var(--ink); }
@media (max-width: 559px) {
  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .btn.huge { flex: 0 0 auto; width: 100%; }
}
.end-top .actions { align-items: stretch; }
.end-top .actions .btn { min-height: 56px; }
.end-top .actions .btn.two { padding-top: 8px; padding-bottom: 8px; }
.paper .end-top .actions .btn.ghost { background: var(--pp-card); color: var(--ink); }

/* ===== version 3.0: tech debt, the teams on it, and the win ===== */
/* the tech debt under the capacity line: the figure, a segment for every ten points in red, and what it costs */
.dg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 10px; align-items: center; margin: 12px 0 0 0; }
.dg-l { white-space: nowrap; font-family: var(--font-display); font-size: 14px; color: var(--ink); }
.dg-l b { font-weight: 400; font-variant-numeric: tabular-nums; }
.dg-s { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; }
.dg-s i { position: relative; display: block; height: 6px; border-radius: 1px; background: var(--track); overflow: hidden; }
.dg-s i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--f, 0%); background: var(--heart); }
.dg-x { grid-column: 1 / -1; font-size: 12px; line-height: 1.45; color: var(--muted); }
.dg.high .dg-l, .dg.high .dg-l b { color: var(--heart); }
/* the teams on the debt: a line over the columns, and the work columns dimmed, with nothing to start */
.focusline { display: flex; align-items: center; gap: 10px; margin: 0 0 16px 0; padding: 10px 14px; border-left: 3px solid var(--heart); background: rgba(178, 59, 59, .07); font-family: var(--font-display); font-size: 1.05rem; line-height: 1.35; color: var(--ink); }
#board.focus .col-todo, #board.focus .col-wip, #board.focus .col-done { opacity: .42; filter: grayscale(.5); pointer-events: none; transition: opacity .3s ease; }

/* ===== version 3.1: the pick last (the levels of section 31 since version 4) ===== */
@media (min-width: 760px) {
  .onb.pick { max-width: 980px; }
  .onb.pick .slide .text { max-width: 640px; margin: 0 auto; }
}

/* ===== version 3.2: discovery on the roadmap, the harm it finds, and the detailed finances ===== */
/* the harm discovery found, first in the insight and in red */
.insight li.poison { color: var(--heart); font-weight: 600; }
.insight.harm { box-shadow: inset 3px 0 0 var(--heart); }
.paper .pc .insight { margin: 8px 0 0 0; }
.paper .pc .acts { margin: 6px 0 0 0; }
/* the Finances link beside the runway gauge */
.ln.rw .finlink { position: absolute; top: 0; right: 0; font-size: 11px; line-height: 1.3; font-weight: 600; }
/* the modal: a large sheet of paper over the dimmed board, scrolling on its own on a phone */
.fin-back { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; overflow-y: auto; background: rgba(40, 36, 28, .38); }
.fin { position: relative; width: 100%; max-width: 680px; margin: auto 0; padding: 18px 18px 22px; border-radius: 3px; background: var(--pp-card); box-shadow: 0 2px 4px var(--pp-sh1), 0 30px 60px -20px rgba(40, 32, 12, .55); }
.fin-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 6px 0; }
.fin-h h2 { margin: 0; font-size: 1.5rem; display: inline-block; padding: 0 8px 7px 0; background: var(--pencil) left bottom / 100% 5px no-repeat; }
.fin-s { margin: 14px 0 0 0; padding: 12px 0 0 0; border-top: 1px dashed var(--pp-rule); }
.fin-s h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; margin: 0 0 8px 0; }
.fin-c { display: block; width: 100%; height: auto; overflow: visible; }
.fin-c text { font-family: var(--font-body); font-size: 12px; fill: var(--text-2); }
.fin-c .fk { fill: var(--ink); font-weight: 600; }
.fin-c .fk.tot { font-family: var(--font-display); font-weight: 400; font-size: 14px; }
.fin-c .fm { fill: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.fin-c .fn { fill: var(--ink); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fin-c .fg { stroke: rgba(85, 83, 76, .14); stroke-width: 1; }
.fin-c .fa { stroke: var(--pp-graphite); stroke-width: 1; }
.fin-c .fz { stroke: var(--heart); stroke-width: 1; stroke-dasharray: 3 3; }
.fin-c .fl { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.fin-c .fpay, .fin .key .fpay { stroke: var(--pp-graphite); stroke-width: 1.2; }
.fin-c .fcliff, .fin .key .fcliff { fill: var(--pp-green); }
.fin-c .fb-gold, .fin .key .fb-gold { fill: var(--accent); }
.fin-c .fb-ink { fill: var(--ink); }
.fin-c .fb-good, .fin .key .fb-good { fill: var(--pp-green); }
.fin-c .fb-graph, .fin .key .fb-graph { fill: var(--pp-graphite); }
.fin-c .fhit { fill: transparent; cursor: crosshair; }
.fin-c .fcur { stroke: var(--accent); stroke-width: 1; }
.fin-c [data-tip]:not(.fhit):hover { opacity: .78; cursor: crosshair; }
.fin-tip { min-height: 20px; margin: 6px 0 0 0; font-size: 12.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.fin .key { list-style: none; margin: 6px 0 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-2); }
.fin .key li { display: inline-flex; align-items: center; gap: 5px; }
.fin .key svg { width: 14px; height: 14px; }
@media (min-width: 760px) { .fin { padding: 22px 26px 26px; } .fin-back { padding: 40px 24px; } }

/* ===== version 3.3: the onboarding's buttons one size, and the inbox pile with a card that waits on top ===== */
/* Back, Skip and Next one size, as the landing's pair: Next filled, the other two outlined in ink on the card */
.slide-nav .btn { flex: 0 1 128px; min-width: 0; }
.paper .slide-nav .btn:not(.primary) { background: var(--pp-card); border-color: var(--ink); }
/* a card in discovery sinks to the bottom of the pile as a greyed edge with the weeks until it is back */
.edge.away { cursor: default; background: var(--panel); }
.paper .edge.away { background: #f8f6f0; }
.edge.away span, .paper .edge.away span:last-child { color: var(--muted); }
/* the card that leaves the top lifts off where it was, and the next one settles in its place */
@keyframes pileLift { from { opacity: 1; transform: rotate(-.4deg); } to { opacity: 0; transform: translate(10px, -32px) rotate(1.5deg); } }
.paper .rq.liftoff, .rq.liftoff { position: fixed; z-index: 20; margin: 0; pointer-events: none; animation: pileLift .3s ease-in both; }
@keyframes pileSettle { 0% { transform: translateY(-4px) rotate(var(--r, 0deg)) scale(1.012); } 60% { transform: translateY(1px) rotate(var(--r, 0deg)); } 100% { transform: rotate(var(--r, 0deg)); } }
.pile .rq.top.settle { animation: pileSettle .38s ease-out; }
/* when the head wraps in a narrow column, its countdown keeps clear of the pills under it (an order, an offer) */
.rq .head + .flags { margin-top: 5px; }

/* ===== version 3.4: the intro, the real board on a stage (section 25) ===== */
/* A sheet over the page: the progress bar and Skip at the top, the stage with the board scaled to fit in the middle,
   the caption under it. The board is drawn by the page itself into .intro-canvas and never takes a click. */
html.intro-open, html.intro-open body { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; background-color: var(--pp-sheet); background-image: var(--grain); background-size: 180px 180px; }
.intro-top { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 1180px; margin: 0 auto; }
.intro-bar { flex: 1 1 auto; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.intro-bar i { display: block; height: 3px; border-radius: 2px; background: var(--pp-rule); overflow: hidden; }
.intro-bar u { display: block; height: 100%; width: 0; background: var(--accent); }
.intro-skip { flex: 0 0 auto; background: var(--pp-card); }
.intro-stage { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 1180px; margin: 0 auto; overflow: hidden; border-radius: 4px; background-color: var(--pp-sheet); background-image: var(--grain); background-size: 180px 180px; box-shadow: 0 0 0 1px var(--pp-rule), 0 18px 36px -24px var(--pp-sh2); }
.intro-canvas { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; transform-origin: 0 0; transition: transform .5s cubic-bezier(.3, .7, .3, 1); pointer-events: none; user-select: none; }
.intro-canvas .bbar { position: static; }
.intro-canvas .qfoot, .intro-canvas .drag-help { display: none; }
/* on the stage each lane of the plan shows its first three cards, with its count, so the plan fits the stage */
.intro-canvas .lane .list > li:nth-child(n+4), .intro-canvas .lanemore { display: none; }
/* what a scene lights: a soft gold outline, and the rest of the stage a little dimmer */
.intro-spot { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 6px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px rgba(154, 123, 46, .2), 0 0 0 3000px rgba(36, 30, 16, .16); transition: left .45s ease, top .45s ease, width .45s ease, height .45s ease, opacity .3s ease; }
.intro-spot.on { opacity: 1; }
/* the caption over the stage in a block of fixed height, room for two lines at a desktop width and three on a phone, or
   for the last scene's line with its button under it, so the stage never jumps */
.intro-head { flex: 0 0 auto; width: 100%; max-width: 980px; margin: 0 auto; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; }
.intro-cap { margin: 0; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.35; text-align: center; color: var(--ink); }
.intro-go { flex: 0 0 auto; white-space: nowrap; }
.intro-go[hidden] { display: none; }
/* the cards of a new sprint come into To do and In progress one after another, as a view's parts rise */
.intro-canvas .intro-in { animation: rise .5s cubic-bezier(.2, .9, .3, 1.1) both; animation-delay: calc(var(--k, 0) * 110ms); }
/* a dated card's due line, red for a moment */
@keyframes introDue { 0%, 100% { color: inherit; background: transparent; } 25%, 75% { color: var(--heart); background: rgba(178, 59, 59, .12); } }
.intro-canvas .intro-due { animation: introDue .7s ease 3; border-radius: 3px; }
.intro-canvas .kindpill { background: var(--pp-card); }
@media (max-width: 559px) {
  .intro { gap: 8px; padding: 10px 16px 14px; }
  .intro-head { height: 72px; gap: 6px; }
  .intro-cap { font-size: .85rem; line-height: 1.3; }
}

/* ===== version 3.5: quarters, the limit on discovery, the first press, the ribbons and the metrics (section 26) ===== */
/* Discover greyed at the limit, and the line under the answers that says why */
.paper .ans .btn.busy, .paper .ans .btn:disabled { color: var(--muted); border-color: var(--pp-rule); border-style: dashed; cursor: not-allowed; }
.rq .busyline { margin: 8px 0 0 0; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
/* the note on the first press: a small paper note by the button, above the card's buttons on a phone */
.tipnote { position: absolute; z-index: 150; padding: 12px 14px 12px; border-radius: 2px; background: var(--pp-card); box-shadow: 0 0 0 1px var(--pp-rule), 0 14px 28px -12px var(--pp-sh2); font-size: 13.5px; line-height: 1.45; color: var(--ink); animation: tipIn .2s ease both; }
.tipnote .kicker { margin: 0 0 6px 0; font-size: 10.5px; }
.tipnote p { margin: 0 0 10px 0; }
.tipnote .tipbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.tipnote .btn.small { min-height: 36px; }
.tipnote.phone { box-shadow: 0 0 0 1px var(--pp-rule), 0 18px 34px -10px var(--pp-sh2); }
@keyframes tipIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* the ribbons under the ruler: the ruler gives up 10 px below to them, one 18 px row per card in progress */
.ruler.withrib { margin-bottom: 14px; }
@media (min-width: 760px) { .ruler.withrib { margin-bottom: 16px; } }
.rib { position: relative; margin: 0 0 18px 0; }
.rib .rw { position: relative; height: 18px; }
.rib .rw + .rw { margin-top: 2px; }
.rib .rw.new { animation: fadeIn .45s ease both; }
.rib .bar { position: absolute; bottom: 0; height: 6px; border-radius: 3px; background: var(--pp-graphite); transition: left .7s ease, width .7s ease, background-color .3s; }
.rib .bar.over { background: linear-gradient(90deg, var(--pp-graphite) 75%, rgba(85, 83, 76, .06)); }
.rib .bar.late { background: var(--heart); }
.rib .bar.late.over { background: linear-gradient(90deg, var(--heart) 75%, rgba(178, 59, 59, .06)); }
.rib .pin { position: absolute; bottom: -2px; width: 2px; height: 10px; margin-left: -1px; background: var(--heart); }
.rib .pin::after { content: ""; position: absolute; left: -2px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--heart); }
.rib .t { position: absolute; bottom: 7px; max-width: 46%; font-size: 11px; line-height: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: left .7s ease; }
.rib .t.r { transform: translateX(-100%); text-align: right; }
.rib .more { position: absolute; right: 0; top: -13px; margin: 0; font-size: 11px; line-height: 12px; color: var(--muted); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* the quarter metrics at the top of Done: the sparkline, then the cash of the quarter so far, a bar a week */
.mx { display: block; margin: 0 0 12px 0; }
.mx-h { display: block; margin: 12px 0 4px 0; padding-top: 10px; border-top: 1px dashed var(--pp-rule); font-size: 11px; color: var(--muted); }
.mx-so { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 12.5px; color: var(--text-2); margin: 0 0 6px 0; }
.mx-so b { font: 400 1.05rem/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); }
.mx-so .i b { color: var(--pp-green); }
.mx-drip { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; height: 34px; }
.mx-drip > span { position: relative; height: 100%; }
.mx-drip > span::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--pp-rule); }
.mx-drip u, .mx-drip s { position: absolute; left: 12%; right: 12%; height: 0; text-decoration: none; transition: height .6s ease; }
.mx-drip u { bottom: 50%; background: var(--pp-green); border-radius: 1px 1px 0 0; }
.mx-drip s { top: 50%; background: var(--ink); border-radius: 0 0 1px 1px; }
.mx-drip s.hit { background: var(--heart); }
.mx-drip span.now::after { content: ""; position: absolute; inset: -2px 0; border: 1px dashed var(--pp-graphite); border-radius: 2px; }
.mx-drip span.ahead { opacity: .3; }
.mx-k { display: flex; justify-content: space-between; margin: 3px 0 0 0; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ===== version 3.5, five more (section 27) ===== */
/* In progress beside Now in the plan: the board's cards, greyed and read only; after Now on a phone */
.lane-wip { order: 1; opacity: .62; }
.lane-wip .list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lane-wip .ip { pointer-events: none; }
.lanesnote { margin: 0; padding: 8px 12px; font-size: 13px; line-height: 1.45; color: var(--text-2); border-left: 2px solid var(--accent); background: rgba(255, 254, 250, .6); }
.paper .acts .link.busy { color: var(--muted); text-decoration: line-through dotted; cursor: not-allowed; }
@media (min-width: 960px) {
  .lanes { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .85fr); }
  .lane-wip { order: 4; }
  .lanesnote { grid-column: 1 / -1; order: 0; }
}
/* a held card looks held: the lifted copy flies over everything, tilted, a touch larger, with a deep shadow. Without
   this the paper cards' own position and transition held it in the page's flow, below the footer and out of sight */
.paper .drag-ghost, .paper .pc.drag-ghost, .paper .rm.drag-ghost { position: fixed; left: 0; top: 0; z-index: 300; margin: 0; transition: none; transform-origin: 30% 20%; box-shadow: 0 2px 4px rgba(60, 48, 20, .18), 0 26px 46px -12px rgba(60, 48, 20, .55); outline: 1px solid rgba(85, 83, 76, .25); }
.paper .drop-ph { list-style: none; border: 2px dashed var(--pp-graphite); border-radius: 3px; background: rgba(85, 83, 76, .06); opacity: .8; }
/* pause blurs the page: the board unreadable under a cover, one paper note in the middle */
html.veiled body { overflow: hidden; }
.veil { position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; padding: 16px; background: rgba(243, 240, 232, .55); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); cursor: pointer; animation: fadeIn .2s ease both; }
.veilnote { min-width: min(260px, 100%); padding: 22px 26px 22px; text-align: center; border-radius: 2px; background: var(--pp-card); box-shadow: 0 0 0 1px var(--pp-rule), 0 24px 48px -18px var(--pp-sh2); transform: rotate(-1.2deg); cursor: default; }
.veilnote h2 { margin: 0 0 14px 0; font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; line-height: 1.1; }
/* the finances on the intro's stage: the modal kept inside the board it covers */
.intro-canvas .fin-back { position: absolute; inset: 0; z-index: 5; overflow: visible; }
/* the intro's named steps (the third cut): a button per scene, the one playing filled, the ones played marked */
.intro-bar.steps { display: flex; gap: 4px; }
.intro-bar.steps .step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 4px 2px 2px; border: 0; background: none; cursor: pointer; font: 600 11px/1.2 var(--font-body); color: var(--muted); text-align: left; border-radius: 3px; }
.intro-bar.steps .step i { display: block; height: 3px; border-radius: 2px; background: var(--pp-rule); overflow: hidden; }
.intro-bar.steps .step u { display: block; height: 100%; width: 0; background: var(--accent); }
.intro-bar.steps .step .nm { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intro-bar.steps .step .no { display: none; }
.intro-bar.steps .step.done { color: var(--text-2); }
.intro-bar.steps .step.on { color: var(--ink); }
.intro-bar.steps .step:hover .nm { color: var(--ink); }
.intro-bar.steps .step:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 559px) {
  .intro-bar.steps .step { flex: 0 0 auto; min-width: 24px; align-items: center; text-align: center; }
  .intro-bar.steps .step .nm { display: none; }
  .intro-bar.steps .step .no { display: block; }
  .intro-bar.steps .step i { align-self: stretch; }
  .intro-bar.steps .step.on, .intro-bar.steps .step.tap { flex: 1 1 auto; }
  .intro-bar.steps .step.on .nm, .intro-bar.steps .step.tap .nm { display: block; }
  .intro-bar.steps .step.on .no, .intro-bar.steps .step.tap .no { display: none; }
}
/* on the intro's stage an empty In progress column gives its width back to the three lanes, so the plan fits */
.intro-canvas .lane-wip:not(:has(li)) { display: none; }
@media (min-width: 960px) { .intro-canvas .lanes:not(:has(.lane-wip li)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===== version 3.7: the level in the bar, the timeline held, the chapter card and a saved game (section 30) ===== */
/* the bar: the mark, then "Level 1" and "Quarter 2" in the bar's serif, each after a thin graphite rule */
.bbar .bid { order: 1; margin-right: auto; display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.1; white-space: nowrap; }
.bbar .bid .dv { flex: 0 0 auto; width: 1px; height: 18px; background: var(--pp-graphite); opacity: .45; }
.bbar .bid .lv { font-variant-numeric: tabular-nums; }
.bbar .bid .when { order: 0; margin: 0; padding: 0; border: 0; display: inline-flex; flex-direction: row; align-items: baseline; gap: 6px; font-size: inherit; line-height: inherit; }
.bbar .bid .when em { margin-left: 0; font-size: 12px; }
.bbar .savebox { order: 2; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; }
.bbar .savebox .link.small { font-size: 11px; line-height: 1.2; padding: 0; white-space: nowrap; }
.bbar .savebox .link[hidden] { display: none; }
.bbar #b-save { min-width: 64px; }
@media (min-width: 960px) {
  .bbar .bid { margin-right: 0; }
  .bbar .savebox { order: 3; }
  .bbar #b-pause { order: 4; }
}
/* on a phone the wordmark gives way to the chevrons, so the mark, the level, the quarter, Save and Pause hold one row */
@media (max-width: 459px) {
  .bbar .brand { font-size: 0; gap: 0; }
  .bbar .bid { gap: 7px; font-size: 1.02rem; }
  .bbar .bid .when { gap: 4px; }
  .bbar .bid .when em { font-size: 10.5px; }
  .qbar.bbar > .in { gap: 8px 8px; }
  .bbar .btn { padding: 6px 11px; }
  .bbar #b-save { min-width: 0; }
}
/* the week on the timeline: a gold line along the ruler's baseline to the current week, growing over the week */
.ruler .wline { position: absolute; left: 0; bottom: 0; z-index: 1; height: 3px; width: 0; border-radius: 0 2px 2px 0; background: var(--accent); pointer-events: none; }
.ruler .wline::after { content: ""; position: absolute; right: -3px; top: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
/* held at the top: in the quarter the bar and the ruler with its ribbons, in the plan the bar; a thin shadow under what
   is held once the page has scrolled */
.bbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; background: linear-gradient(rgba(60, 48, 20, .16), rgba(60, 48, 20, 0)); opacity: 0; transition: opacity .25s; pointer-events: none; }
#app.scrolled.held-bar .bbar::after { opacity: 1; }
.held-both main.sprint { padding-top: 0; }
.held-both #rulerBox { position: sticky; top: var(--barH, 100px); z-index: 20; padding: 30px 0 2px 0; }
.held-both #rulerBox::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vmax; right: -100vmax; z-index: -1; background-color: var(--pp-sheet); background-image: var(--grain); background-size: 180px 180px; }
.held-both #rulerBox::after { content: ""; position: absolute; left: -100vmax; right: -100vmax; top: 100%; height: 10px; background: linear-gradient(rgba(60, 48, 20, .16), rgba(60, 48, 20, 0)); opacity: 0; transition: opacity .25s; pointer-events: none; }
#app.scrolled.held-both #rulerBox::after { opacity: 1; }
.held-both #rulerBox .ruler { margin-top: 0; margin-bottom: 18px; }
.held-both #rulerBox .ruler.withrib { margin-bottom: 12px; }
.held-both #rulerBox .rib { margin-bottom: 12px; }
.held-both .cols4 { margin-top: 14px; }
/* the intro's stage is scaled and moved as a whole, so nothing inside it is held */
.intro-canvas #rulerBox { position: relative; top: auto; }
.intro-canvas #rulerBox::after, .intro-canvas .bbar::after { display: none; }
/* Save: the note under the pause's blurred cover, with the code in display type and the link under it */
.savenote { width: min(460px, 100%); text-align: left; padding: 22px 24px 20px; }
.savenote h2 { font-size: 1.5rem; margin: 0 0 10px 0; }
.savenote .code { margin: 0 0 16px 0; font: 400 2.1rem/1.1 var(--font-display); letter-spacing: .06em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; user-select: all; }
.savenote .kicker { display: block; margin: 0 0 6px 0; padding-top: 14px; border-top: 1px dashed var(--pp-rule); }
.savelink { display: block; padding: 9px 11px; border-radius: 2px; background: var(--pp-sheet); box-shadow: inset 0 0 0 1px var(--pp-rule); font: 12.5px/1.4 ui-monospace, Consolas, monospace; color: var(--ink); word-break: break-all; user-select: all; }
.savenote .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0 0; }
.savenote .note { margin: 12px 0 0 0; }
@media (max-width: 459px) { .savenote { padding: 18px 16px 16px; } .savenote .code { font-size: 1.7rem; } .savenote .actions .btn { flex: 1 1 auto; } }
/* the landing: Open a saved game under the buttons */
.openbox { width: 100%; max-width: 380px; margin: 30px auto 0; padding: 14px 0 0 0; border-top: 1px dashed var(--pp-rule); text-align: left; }
.openbox label { display: block; margin: 0 0 6px 0; font-size: 13px; font-weight: 600; color: var(--text-2); }
.openrow { display: flex; gap: 8px; }
.openrow input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--pp-graphite); border-radius: 4px; background: var(--pp-card); color: var(--ink); font: 500 15px/1.2 ui-monospace, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.openrow input::placeholder { color: var(--muted); opacity: .7; }
.openrow input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.openrow .btn { flex: 0 0 auto; min-height: 44px; background: var(--pp-card); border-color: var(--ink); }
.openbox .note { margin: 8px 0 0 0; }
.openmsg { margin: 8px 0 0 0; font-size: 13px; color: var(--heart); }
.openmsg:empty { display: none; }

/* ===== version 4: five companies as levels, three years each, stars from the final year (section 31) ===== */
/* Lifted from the approved mocks, dev/runway/mocks/levels.html and arc.html: the pick with its locks, stars and the
   drawings that come alive, the briefing, the bar's company and profit track, the panel above Done, the year pause,
   the end of a level with its stars, the Returned tape, and the ribbons locked at their start. */

/* stars: an outline in pencil, filled in gold when earned; a row of three as the small ones */
.star { display: block; overflow: visible; }
.star path { fill: none; stroke: var(--pp-graphite); stroke-width: 1.25; stroke-linejoin: round; opacity: .55; transition: fill .25s ease, opacity .25s ease; }
.star.on path { fill: var(--accent); stroke: #7a6020; opacity: 1; }
.mini { display: inline-flex; gap: 2px; align-items: center; }
.mini .star { width: 13px; height: 13px; }
.chev { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* the pick's briefing sits in a slide's figure, whose drawings fill its width: its button's chevrons keep their size */
.figure svg.chev { display: inline-block; width: 13px; height: 13px; max-width: none; }

/* the bar: "Level 1 · Accounting SaaS | Quarter 4"; on the board the wordmark gives way to the chevrons at every width,
   and under 700 pixels the company's name gives way too, so the row still holds the mark, the level, the quarter, Save
   and Pause */
.bbar .brand { font-size: 0; gap: 0; }
.bbar .bid .lv { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.bbar .bid .lv-co { font: 400 14px/1 var(--font-body); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbar .bid .lv-co::before { content: "·"; margin-right: 8px; color: var(--muted); }
@media (max-width: 699px) { .bbar .bid .lv-co { display: none; } }
/* on a phone the mark, the level, the quarter, Save and Resume hold one row a little closer together, at Level 5 and in
   quarter 12 too: when the row runs short (paused, with Show the code under Save) the quarter's Paused mark gives way
   first, and only a phone with no room for the level and the whole quarter moves Save and Pause to a second row */
@media (max-width: 459px) {
  .qbar.bbar > .in { gap: 8px 6px; }
  .bbar .btn { padding: 6px 9px; }
  .bbar .bid { flex: 1 1 150px; gap: 6px; }
  .bbar .bid .lv, .bbar .bid .dv { flex: 0 0 auto; }
  .bbar .bid .when { min-width: 0; overflow: hidden; }
  .bbar .bid .when em { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* the profit track where the goal was: the costs covered from the left end to break even in the middle, the margin
   after it, a star on each mark that fills in gold once the margin passes it, the fill red for the gap to break even
   and green for the profit, and the pin where the last four quarters stand */
.ptk { position: relative; display: block; height: 8px; margin-top: 6px; border-radius: 2px; background: var(--track); }
.ptk .fill { position: absolute; top: 2px; bottom: 2px; left: 50%; width: 0; border-radius: 2px; transition: left .7s ease, width .7s ease, background .3s; }
.ptk .fill.neg { background: rgba(178, 59, 59, .55); }
.ptk .fill.pos { background: var(--pp-green); }
.ptk .zero { position: absolute; top: -3px; bottom: -3px; width: 1px; margin-left: -.5px; background: var(--pp-graphite); }
.ptk .mk { position: absolute; z-index: 1; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; }
.ptk .mk .star { width: 15px; height: 15px; }
.ptk .mk .star path { fill: var(--pp-card); stroke-width: 1.6; opacity: 1; }
.ptk .mk .star.on path { fill: var(--accent); }
.ptk .pin { position: absolute; z-index: 2; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); transition: left .7s ease; }
.ln.pf.broke .hd b { color: var(--pp-green); }

/* the panel above Done: the year on tape and the company's two figures, each with what changed since the year began */
.panel { position: relative; margin: 8px 0 14px 0; padding: 16px 14px 4px; border-radius: 3px; background: #fcf7e8; box-shadow: 0 1px 1px var(--pp-sh1), 0 10px 18px -12px var(--pp-sh2); }
.panel > .tape { left: 12px; top: -10px; transform: rotate(-2.5deg); }
.fig { display: block; padding: 8px 0 9px; border-bottom: 1px dashed var(--pp-rule); }
.fig:last-child { border-bottom: 0; }
.fig .fl { display: block; font: 600 10.5px/1.35 var(--font-body); letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.fig .fv { display: block; margin-top: 3px; font: 400 1.45rem/1.1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.fig .fv small { font: 400 12px/1 var(--font-body); color: var(--text-2); }
.fig .fs { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.panel + .mx .mx-h { margin-top: 4px; }

/* a card that comes back: the Returned tape at its top left, and its line of why under its text */
.rettape { position: absolute; z-index: 4; left: 12px; top: -11px; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 12px 0 10px; font: 400 13.5px/22px var(--font-display); font-style: normal; color: var(--ink); white-space: nowrap; background: var(--pp-tape); clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 25%, calc(100% - 3px) 50%, 100% 75%, calc(100% - 4px) 100%, 4px 100%, 0 75%, 3px 50%, 0 25%); transform: rotate(-2.5deg); pointer-events: none; }
.rettape svg, .retwhy svg { flex: 0 0 auto; width: 13px; height: 13px; fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.paper .rq.ret { padding-top: 22px; }
.paper .rm.ret { padding-top: 18px; background-position: 0 8px, 0 18px; }
.retwhy { display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 10px 0; padding: 6px 9px 6px 8px; border-left: 2px solid var(--accent); background: rgba(226, 204, 146, .24); font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.retwhy svg { margin-top: 2px; }
.rm .retwhy { margin: 4px 0 2px 0; }
.paper .pc.ret { padding-top: 20px; }
.pc .retwhy { margin: 6px 0 4px 0; }

/* the ribbons locked at their start: the plan behind this week inked dark and the rest light, the weeks past the plan
   solid red and the slip still to come hatched in the muted red, a card done early ending at its week with the unused
   plan faint, and a green tick for the week after it is done */
.rib .rw.lk { height: 20px; }
.rib .rw.lk .lk { position: absolute; bottom: 0; height: 6px; }
.rib .lk.a { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.rib .lk.z { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.lk-past { background: var(--pp-graphite); }
.lk-plan { background: rgba(85, 83, 76, .3); }
.lk-lost { background: var(--heart); }
.lk-late { background: repeating-linear-gradient(-60deg, var(--heart) 0 1.6px, rgba(178, 59, 59, .1) 1.6px 4.2px); box-shadow: inset 0 0 0 1px rgba(178, 59, 59, .75); }
.lk-late.over { -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.lk-unused { background: transparent; box-shadow: inset 0 0 0 1px rgba(85, 83, 76, .35); opacity: .7; }
.rib .rw.lk.carry .lk.a { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px); mask-image: linear-gradient(90deg, transparent 0, #000 22px); }
.rib .rw.lk.lk-done .t { color: var(--muted); }
.rib .rw.lk .t { bottom: 8px; max-width: 60%; }
.lk-tick { position: absolute; bottom: -4px; width: 14px; height: 14px; margin-left: -2px; }
.lk-tick svg { display: block; width: 14px; height: 14px; }
@media (max-width: 459px) { .lk-tick, .lk-tick svg { width: 12px; height: 12px; } .lk-tick { bottom: -3px; } }

/* the pick: the career, then the five levels as index cards in a column, the furthest one open lit, the later ones
   greyed under a lock, and the briefing of the level pointed at beside them, or under its card on a phone */
.figure.levelsfig { display: block; min-height: 0; padding: 4px 0 0; text-align: left; }
.onb.pick .slide { gap: 18px; }
.career { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1.1fr); gap: 4px 18px; align-items: start; margin: 0 0 18px 0; padding: 12px 16px; border-radius: 2px; background-color: #fcf7e8; box-shadow: 0 1px 1px var(--pp-sh1), 0 8px 14px -10px var(--pp-sh2); transform: rotate(-.2deg); }
.career small { display: block; font: 600 9.5px/1.6 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.career b { display: block; font: 400 1.4rem/1.15 var(--font-display); font-weight: 400; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.career div > span { display: block; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.career .cnext { grid-column: 1 / -1; margin: 6px 0 0 0; padding-top: 7px; border-top: 1px dashed var(--pp-rule); font-size: 13px; color: var(--text-2); }
.career .cnext b { display: inline; font: 400 15px/1.2 var(--font-display); color: var(--accent); }
.pickgrid { display: grid; grid-template-columns: minmax(270px, 360px) minmax(0, 1fr); gap: 22px; align-items: start; }
.lvlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lvrow { position: relative; width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 12px; align-items: center; margin: 0; padding: 9px 12px 10px 10px; border: 0; border-radius: 2px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background-color: var(--pp-card); background-image: linear-gradient(transparent 31px, var(--pp-redline) 31px, var(--pp-redline) 32px, transparent 32px), repeating-linear-gradient(transparent 0, transparent 21px, var(--pp-blueline) 21px, var(--pp-blueline) 22px); background-position: 0 0, 0 10px;
  box-shadow: 0 1px 1px var(--pp-sh1), 0 10px 18px -12px var(--pp-sh2); transform: rotate(var(--r, 0deg)); transition: box-shadow .2s ease, transform .2s ease; }
.lvlist li:nth-child(odd) .lvrow { --r: -.2deg; }
.lvlist li:nth-child(even) .lvrow { --r: .25deg; }
@media (hover: hover) and (pointer: fine) { .lvrow:hover { box-shadow: 0 1px 1px var(--pp-sh1), 0 16px 26px -14px var(--pp-sh2); transform: rotate(var(--r, 0deg)) translateY(-2px); } }
/* the furthest level open is lit in gold; the one whose briefing shows is outlined in pencil */
.lvrow.current { background-color: #fcf7e8; box-shadow: 0 0 0 1.5px var(--accent), 0 12px 20px -12px var(--pp-sh2); }
.lvrow.sel:not(.current) { box-shadow: 0 0 0 1.5px var(--pp-graphite), 0 12px 20px -12px var(--pp-sh2); }
.lvrow.locked { background-color: #f5f2ea; background-image: linear-gradient(transparent 31px, rgba(178, 59, 59, .14) 31px, rgba(178, 59, 59, .14) 32px, transparent 32px), repeating-linear-gradient(transparent 0, transparent 21px, rgba(43, 108, 176, .06) 21px, rgba(43, 108, 176, .06) 22px); }
.lvrow.locked .lvhead, .lvrow.locked .lvsub { opacity: .62; }
.lvrow.locked .lvno { color: var(--muted); }
.fig2 { position: relative; display: block; width: 52px; height: 52px; }
.fig2 .ic { display: block; width: 52px; height: 52px; overflow: visible; }
.lvrow.locked .fig2 .ic { filter: grayscale(1); opacity: .42; transition: filter .3s, opacity .3s; }
.lockbadge { position: absolute; right: -4px; bottom: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pp-card); box-shadow: 0 0 0 1px var(--pp-rule), 0 4px 8px -4px var(--pp-sh2); }
.lockbadge svg { width: 14px; height: 14px; }
.lvrow.jig .lockbadge { animation: lvJig .45s ease; }
@keyframes lvJig { 20% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 70% { transform: rotate(-6deg); } 100% { transform: none; } }
.lvb { display: block; min-width: 0; }
.lvhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 9px; }
.lvhead .mini { margin-left: auto; align-self: center; }
.lvno { font: 600 10px/22px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.lvname { font: 400 18px/22px var(--font-display); color: var(--ink); }
.lvsub { display: flex; gap: 6px; align-items: center; margin-top: 2px; font-size: 12.5px; line-height: 20px; color: var(--text-2); }
.lvsub svg { flex: 0 0 auto; width: 13px; height: 13px; }
.lvrow .mini .star { width: 15px; height: 15px; }
.lvrow.locked .mini .star path { opacity: .35; }
.inplace { margin: 10px 0 4px; }
.side { position: sticky; top: 12px; }
/* the briefing: the level and its drawing, the ambition in display type, where the company starts, its stars in its own
   words, what the panel will track, the fixed dates of year one, and the button that starts it, or the lock line */
.brief { position: relative; padding: 18px 20px; border-radius: 3px; background: var(--pp-card); box-shadow: 0 1px 1px var(--pp-sh1), 0 12px 22px -12px var(--pp-sh2); text-align: left; }
.brief .bh { display: flex; align-items: center; gap: 12px; margin: 0 0 4px 0; }
.brief .bh .ic { flex: 0 0 auto; width: 46px; height: 46px; }
.brief .bh span { font: 600 10.5px/1.4 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: #7a6020; }
.brief .bh b { display: block; font: 400 1.25rem/1.15 var(--font-display); color: var(--ink); }
.brief .amb { margin: 10px 0 12px 0; font: 400 1.35rem/1.25 var(--font-display); color: var(--ink); text-wrap: balance; }
.brief h3, .ypage h3 { margin: 14px 0 6px 0; font: 600 10.5px/1.4 var(--font-body); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.brief p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.brief p.small { font-size: 13.5px; }
.bstars { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.bstars li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span { padding: 3px 9px 4px; border-radius: 2px; background: #fcf7e8; box-shadow: inset 0 0 0 1px var(--pp-rule); font-size: 13px; color: var(--ink); }
.bdates { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bdates li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.bdates .tape { position: static; transform: rotate(-2deg); font-size: 12px; }
.brief .go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 0 0; }
.brief .go .small { font-size: 13px; color: var(--muted); }
.lockline { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 400 15px/1.3 var(--font-display); color: var(--text-2); }
.lockline svg { flex: 0 0 auto; width: 16px; height: 16px; }
.brief.locked .amb, .brief.locked .bh b { color: var(--text-2); }
.brief.locked .bh .ic { filter: grayscale(1); opacity: .6; }
@media (max-width: 759px) {
  .pickgrid { grid-template-columns: minmax(0, 1fr); }
  .career { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .career > div:first-child { grid-column: 1 / -1; }
  .brief { padding: 16px 14px; }
  .brief .go .btn { flex: 1 1 100%; }
}

/* the drawings come alive on a hover, a tap or a focus, in colour, about two seconds, the streaming picture moving for
   as long as it is pointed at; a locked level only nudges its lock */
.ic .row { stroke-dasharray: 14; }
.ic-acc .tot, .ic-acc .rt { opacity: 0; }
.ic-acc .rt { transform-box: fill-box; transform-origin: center; }
.alive .ic-acc .row { animation: lvWrite .42s ease-out both; }
.alive .ic-acc .r2 { animation-delay: .16s; } .alive .ic-acc .r3 { animation-delay: .32s; } .alive .ic-acc .r4 { animation-delay: .48s; }
@keyframes lvWrite { 0% { stroke-dashoffset: 14; stroke: #9a7b2e; } 85% { stroke: #9a7b2e; } 100% { stroke-dashoffset: 0; stroke: #1a1a1f; } }
.alive .ic-acc .rl { animation: lvTickOver .5s ease both; }
.alive .ic-acc .rl1 { animation-delay: .1s; } .alive .ic-acc .rl2 { animation-delay: .3s; }
.alive .ic-acc .rl3 { animation: lvTickOver .5s .5s ease both, lvGreen .35s 1.15s ease forwards; }
@keyframes lvTickOver { 0% { transform: none; opacity: 1; } 45% { transform: translateY(-1.6px); opacity: .15; } 55% { transform: translateY(1.6px); opacity: .15; } 100% { transform: none; opacity: 1; } }
@keyframes lvGreen { to { stroke: #2e7d4f; stroke-width: 2.3px; } }
.alive .ic-acc .tot { animation: lvIn .25s .78s ease both; }
.ic-acc .tl { stroke-dasharray: 11; }
.alive .ic-acc .tl { animation: lvDraw11 .45s .8s ease-out both; }
@keyframes lvDraw11 { from { stroke-dashoffset: 11; } to { stroke-dashoffset: 0; } }
.alive .ic-acc .rt { animation: lvPopIn .45s 1.2s cubic-bezier(.3, 1.6, .5, 1) both; }
.ic-inv .up, .ic-inv .dn, .ic-inv .dt { opacity: 0; }
.ic-inv .b1, .ic-inv .b2, .ic-inv .b3 { transform-box: fill-box; transform-origin: 50% 100%; }
.ic-inv .dt { transform-box: fill-box; transform-origin: center; }
.alive .ic-inv .l0 { animation: lvOut .25s ease both; }
.alive .ic-inv .b1 { animation: lvGrow .5s .05s cubic-bezier(.3, 1.4, .5, 1) both; }
.alive .ic-inv .b2 { animation: lvGrow .5s .16s cubic-bezier(.3, 1.4, .5, 1) both; }
.alive .ic-inv .b3 { animation: lvGrow .5s .27s cubic-bezier(.3, 1.4, .5, 1) both, lvSag .4s 1.25s ease forwards; }
@keyframes lvGrow { from { transform: scaleY(.12); } to { transform: none; } }
@keyframes lvSag { to { transform: scaleY(.8); } }
.alive .ic-inv .up { opacity: 1; stroke-dasharray: 100; animation: lvDraw100 .8s .35s ease-out both; }
.alive .ic-inv .dn { opacity: 1; stroke-dasharray: 100; animation: lvDraw100 .38s 1.15s ease-in both; }
.alive .ic-inv .dt { animation: lvPopIn .35s 1.5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes lvDraw100 { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.ic-gam .ba, .ic-gam .bb { transform-box: fill-box; transform-origin: center; }
.ic-gam .pad { transform-box: fill-box; transform-origin: 50% 60%; }
.alive .ic-gam .dv { animation: lvGoldStroke .2s .1s ease forwards; }
.alive .ic-gam .dh { animation: lvGoldStroke .2s .35s ease forwards; }
@keyframes lvGoldStroke { to { stroke: #9a7b2e; stroke-width: 2.3px; } }
.alive .ic-gam .ba { animation: lvPress .34s .6s ease both, lvFillGreen .2s .72s ease forwards; }
.alive .ic-gam .bb { animation: lvPress .34s .95s ease both, lvFillRed .2s 1.07s ease forwards; }
@keyframes lvPress { 0% { transform: none; } 40% { transform: scale(.5); } 100% { transform: none; } }
@keyframes lvFillGreen { to { fill: #2e7d4f; } }
@keyframes lvFillRed { to { fill: #b23b3b; } }
.alive .ic-gam .pad { animation: lvRumble .55s 1.35s ease both; }
@keyframes lvRumble { 0%, 100% { transform: none; } 20% { transform: rotate(-5deg); } 45% { transform: rotate(4deg); } 70% { transform: rotate(-2deg); } }
.ic-str .pic { opacity: 0; }
.ic-str .pl { transform-box: fill-box; transform-origin: center; }
.ic-str .pg { transform-origin: 7px 31px; transform: scaleX(0); }
.alive .ic-str .pl { animation: lvPlayOut .4s ease both; }
@keyframes lvPlayOut { 0% { transform: none; } 35% { transform: scale(.72); } 100% { transform: scale(.3); opacity: 0; } }
.alive .ic-str .pic { animation: lvIn .35s .22s ease both; }
.alive .ic-str .hills { animation: lvPan 2.4s .22s linear infinite; }
@keyframes lvPan { from { transform: translateX(0); } to { transform: translateX(-30px); } }
.alive .ic-str .sun { animation: lvRise 1.5s .3s ease-out both; }
@keyframes lvRise { from { transform: translateY(11px); } to { transform: none; } }
.alive .ic-str .pg { animation: lvProg 3.4s .3s linear both; }
@keyframes lvProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ic-ret .awn, .ic-ret .lit, .ic-ret .wl { opacity: 0; }
.ic-ret .awn { transform-origin: 24px 9px; }
.ic-ret .door { transform-origin: 25px 34px; }
.alive .ic-ret .awn { animation: lvUnroll .55s .05s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes lvUnroll { from { opacity: 0; transform: scaleY(.15); } to { opacity: 1; transform: none; } }
.alive .ic-ret .wl { animation: lvIn .4s .55s ease both; }
.alive .ic-ret .lit { animation: lvIn .3s .72s ease both; }
.alive .ic-ret .door { animation: lvSwing .6s .78s ease both; }
@keyframes lvSwing { from { transform: none; } to { transform: scaleX(.26); } }
@keyframes lvIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lvOut { to { opacity: 0; } }
@keyframes lvPopIn { 0% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: none; } }

/* the year pause: a paper page over the plan that opens the year, the clock held, the year played on its left and the
   next one on its right, the button that plans the next quarter at its foot */
main.year { padding-top: 22px; }
.ystage { padding: 8px 0 10px 0; }
.ypage { position: relative; max-width: 980px; margin: 14px auto 0; padding: 30px 26px 22px; border-radius: 3px; background: var(--pp-card); box-shadow: 0 2px 4px var(--pp-sh1), 0 24px 40px -22px rgba(60, 48, 20, .55); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 34px; transform: rotate(-.2deg); }
.ypage > .tape { left: 20px; top: -11px; transform: rotate(-2deg); }
.ypage h2 { margin: 0 0 12px 0; font-size: 1.6rem; }
.ypage .panel { margin: 14px 0 10px 0; }
.ytitle { margin: -6px 0 8px 0; font: 400 1.15rem/1.3 var(--font-display); color: var(--accent); }
.ystory { margin: 0 0 6px 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.yfacts { margin: 6px 0 0 0; }
.yf { padding: 8px 0 9px; border-bottom: 1px dashed var(--pp-rule); }
.yf:last-child { border-bottom: 0; }
.yf dt { font: 600 10px/1.4 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.yf dd { margin: 2px 0 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.yf dd b { font: 400 1.05rem/1.35 var(--font-display); color: var(--ink); }
.ypage .bstars { margin-top: 4px; }
.yacts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--pp-rule); }
@media (max-width: 759px) {
  .ypage { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 26px 16px 18px; }
  .yacts .btn { flex: 1 1 auto; }
}

/* the end of a level: the stars on a track of the final year's profit, filling as the count passes each mark, the stars
   earned in the company's words, the title, the next level open or what opens it */
.lv-which { margin: 0 0 4px 0; font: 600 11px/1.5 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lv-stars { position: relative; width: 100%; max-width: 440px; margin: 4px auto 14px; padding: 0 30px; }
.lv-tcap { margin: 0; font: 600 10px/1.5 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: center; }
.lv-srow { position: relative; height: 48px; }
.lv-sp { position: absolute; bottom: 6px; width: 40px; height: 40px; margin-left: -20px; }
.lv-sp .star { width: 40px; height: 40px; }
.lv-sp.pop .star { animation: lvStarPop .55s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes lvStarPop { 0% { transform: scale(.55) rotate(-12deg); } 60% { transform: scale(1.32) rotate(6deg); } 100% { transform: none; } }
.lv-track { position: relative; height: 10px; border: 1px solid var(--pp-graphite); border-radius: 1px; background: rgba(255, 254, 250, .8); }
.lv-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: repeating-linear-gradient(-60deg, var(--accent) 0 1.4px, rgba(154, 123, 46, .28) 1.4px 3.6px); }
.lv-notch { position: absolute; top: -5px; bottom: -5px; width: 1.5px; margin-left: -.75px; background: var(--pp-graphite); }
.lv-tl { position: relative; height: 24px; margin-top: 7px; }
.lv-tl span { position: absolute; top: 0; transform: translateX(-50%); font: 600 10.5px/1.3 var(--font-body); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; transition: color .25s; }
.lv-tl span.got { color: var(--ink); }
@media (max-width: 459px) { .lv-stars { padding: 0 14px; } .lv-tl span { font-size: 10px; } }
.earned { list-style: none; max-width: 520px; margin: 12px auto 0; padding: 0; display: grid; gap: 4px; text-align: left; }
.earned li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 13.5px; line-height: 1.4; color: var(--text-2); }
.earned li.no { opacity: .5; }
.lv-title { margin: 12px 0 0 0; font: 400 1.12rem/1.3 var(--font-display); color: var(--ink); }
.lv-title b { font-weight: 400; color: var(--accent); }
.lv-open, .lv-shut { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0 0; font-size: 1.05rem; line-height: 1.4; }
.lv-open { color: var(--pp-green); font-weight: 600; }
.lv-shut { color: var(--ink); }
.lv-open svg, .lv-shut svg { flex: 0 0 auto; width: 18px; height: 18px; }
.end-top .chg span { margin: 0 8px; color: var(--muted); }
.sharestars { display: flex; gap: 3px; margin: 8px 0 0 0; }
.sharestars .star { width: 18px; height: 18px; }
/* the scores: each game's level with the stars it earned */
.lbstars { display: inline-flex; gap: 1px; margin-left: 8px; vertical-align: -1px; }
.lbstars .star { width: 12px; height: 12px; }

/* ===== section 34: the organisation's decisions, a link beside the In progress heading and the list on the sheet ===== */
#colWip, #lane-wip { position: relative; }
.declink { position: absolute; right: 0; top: 6px; font-size: 12.5px; color: var(--muted); }
.declink:hover, .declink:focus-visible { color: var(--ink); }
.fin.dec { max-width: 640px; }
.decintro { margin: 0 0 4px 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.declist { list-style: none; margin: 0; padding: 0; }
.decrow { padding: 10px 0 11px 0; border-top: 1px dashed var(--pp-rule); }
.decrow.off { opacity: .62; }
.dech { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
.dech b { font: 400 1.05rem/1.3 var(--font-display); color: var(--ink); }
.dech span { font-size: 12px; color: var(--muted); }
.decrow p { margin: 3px 0 7px 0; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.decs { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink); }
.decrow.pending .decs > span { color: var(--heart); }
.fin .empty { margin: 10px 0 0 0; font-size: 13.5px; color: var(--text-2); }

/* ===== section 35: the rights line in the footer ===== */
.qfoot .rights { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }

/* ===== section 37: the game speed over the timeline, at its left, in the quarter only ===== */
.speed { display: flex; align-items: center; gap: 4px; margin: 12px 0 0 0; font: 600 12px/1.2 var(--font-body); color: var(--muted); }
.speed .lbl { margin-right: 6px; }
.speed .chip { min-width: 36px; min-height: 28px; padding: 4px 8px; border: 1px solid var(--pp-rule); border-radius: 3px; background: var(--pp-card); color: var(--text-2); font: inherit; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.speed .chip:hover { color: var(--ink); border-color: var(--line-strong); }
.speed .chip.on { background: var(--ink); border-color: var(--ink); color: var(--pp-card); }
.speed .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.intro-canvas .speed { display: none; }

/* ===== section 38: the briefing beside the list as tall as the tallest of the five, so the page stays still ===== */
.side .brief { min-height: var(--brief-h, 0px); }