/* The PR #482 board from the ad, as a live component. Tokens come from app.css :root.
   State classes on .bd (added by board.js): s-marks, s-line1, s-flag, s-rev, s-tick1..3, s-checked,
   s-bughigh, s-heal, s-glow, s-approve, s-press, s-approved, s-merged. Captions: [data-cap].on */

.board-demo { container-type: inline-size; }
/* the caption sits above the card, so on a phone it's on screen with the board, not below a tall card */
.bd { margin: 0; display: flex; flex-direction: column; }
.bd.no-anim, .bd.no-anim * { transition: none !important; }

.bd-card {
  position: relative; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 16px 16px 14px;
}
@container (min-width: 480px) { .bd-card { padding: 22px 24px 18px; } }

/* PR header ------------------------------------------------------------------------------------- */
.bd-pr { position: relative; padding-bottom: 14px; border-bottom: 1.5px solid var(--line); }
.bd-pr-row1 { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.bd-av {
  width: 26px; height: 26px; border-radius: 50%; background: var(--surface-3); border: 1.5px solid var(--line-2);
  display: grid; place-items: center; font: 600 9.5px/1 var(--sans); color: var(--text);
}
.bd-num { font: 500 13px/1 var(--mono); color: var(--text-2); }
.bd-ex { font: 500 12px/1 var(--sans); color: var(--text-2); background: var(--surface-3); border-radius: 6px; padding: 4px 7px 5px; }
.bd-title { margin-top: 10px; font: 600 clamp(15px, 4.2cqi, 19px)/1.25 var(--sans); letter-spacing: -0.015em; color: var(--text); }
.bd-meta { margin-top: 6px; font: 500 clamp(11.5px, 3.3cqi, 13px)/1.35 var(--mono); color: var(--text-2); }
.bd-wait { color: var(--text); transition: opacity .3s ease; }
.bd-merged {
  position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; height: 28px;
  padding: 0 12px 0 9px; border-radius: 999px; background: var(--merged); color: #fff; font: 600 13px/1 var(--sans);
  opacity: 0; transform: scale(.82); transform-origin: 85% 50%;
  transition: opacity .3s ease, transform .45s cubic-bezier(.2, .8, .2, 1.25);
}
.bd-merged svg { width: 15px; height: 15px; display: block; }
.s-merged .bd-merged { opacity: 1; transform: none; }
.s-merged .bd-wait { opacity: 0; }

/* board ------------------------------------------------------------------------------------------ */
.bd-board {
  position: relative; margin-top: 8px;
  --col-low: 40px; --col-unsure: 70px; --col-high: 46px; --row-h: 42px; --mk: 18px; --head-h: 30px;
}
@container (min-width: 480px) { .bd-board { --col-low: 62px; --col-unsure: 92px; --col-high: 62px; --row-h: 46px; --mk: 20px; } }
.bd-head, .bd-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--col-low) var(--col-unsure) var(--col-high); align-items: center; }
.bd-head { height: var(--head-h); font: 500 12px/1 var(--sans); color: var(--text-2); }
.bd-head span { text-align: center; white-space: nowrap; }
.bd-head .bd-k { text-align: right; padding-right: 6px; color: var(--text-3); }
.bd-row { position: relative; height: var(--row-h); border-top: 1px solid rgba(255, 255, 255, 0.05); }
/* the flagged-row tint bleeds a little past the grid, like the ad */
.bd-row::before { content: ''; position: absolute; inset: 3px -8px; border-radius: 10px; background-color: transparent; transition: background-color .4s ease; }
.bd-row > * { position: relative; z-index: 1; }
.bd-lab {
  padding-left: 2px; font: 500 clamp(14px, 3.9cqi, 16.5px)/1 var(--sans); letter-spacing: -0.01em; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bd-c { position: relative; height: 100%; display: grid; place-items: center; }
.bd-slot { width: var(--mk); height: var(--mk); border-radius: 50%; border: 1.5px solid var(--line-2); }

.bd-mk {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: var(--mk); height: var(--mk);
  margin: calc(var(--mk) / -2) 0 0 calc(var(--mk) / -2); border-radius: 50%;
  opacity: 0; transform: scale(.35); transition: opacity .28s ease, transform .42s cubic-bezier(.2, .8, .2, 1.2);
}
.bd-mk-high { background: var(--high); }
.bd-mk-unsure { border: 2.5px solid var(--unsure); display: grid; place-items: center; font: 700 11px/1 var(--sans); font-style: normal; color: var(--unsure); }
.s-marks .bd-mk.m1 { opacity: 1; transform: none; transition-delay: calc(var(--i) * .26s); }
/* Bugs: the unsure marker steps aside, a High marker lands in the High column */
.s-marks.s-bughigh .bd-mk-unsure.m1 { opacity: 0; transform: translateX(28px) scale(.5); transition-delay: 0s; }
.s-bughigh .bd-bughigh { opacity: 1; transform: none; transition-delay: .12s; }

/* the alignment line: half segments per High cell, drawn top to bottom */
.bd-seg { position: absolute; left: 50%; z-index: 1; width: 4px; margin-left: -2px; background: var(--high); transform: scaleY(0); transform-origin: 50% 0; transition: transform .2s linear; }
.bd-seg-t { top: -1px; height: calc(50% + 1px); }
.bd-seg-b { top: 50%; height: calc(50% + 1px); }
.s-line1 [data-row="0"] .bd-seg-b, .s-line1 [data-row="3"] .bd-seg-b { transform: none; }
.s-line1 [data-row="1"] .bd-seg-t, .s-line1 [data-row="4"] .bd-seg-t { transform: none; transition-delay: .2s; }
.s-heal [data-row="1"] .bd-seg-b { transform: none; }
.s-heal [data-row="2"] .bd-seg-t { transform: none; transition-delay: .2s; }
.s-heal [data-row="2"] .bd-seg-b { transform: none; transition-delay: .4s; }
.s-heal [data-row="3"] .bd-seg-t { transform: none; transition-delay: .6s; }

.bd-glow {
  position: absolute; top: var(--head-h); bottom: 0; right: calc(var(--col-high) / 2 - 34px); width: 68px; border-radius: 34px;
  background: radial-gradient(closest-side, rgba(61, 220, 151, .38), rgba(61, 220, 151, 0)); opacity: 0; pointer-events: none;
  transition: opacity .7s ease;
}
.s-glow .bd-glow { opacity: 1; }

.s-flag [data-row="2"]::before { background-color: var(--unsure-bg); }
.s-checked [data-row="2"]::before { background-color: rgba(61, 220, 151, 0.07); }
.s-bughigh [data-row="2"]::before { background-color: transparent; }

/* panel: one fixed-height cell; the wait rows give way to the Bugs receipts -------------------------- */
.bd-panel { display: grid; margin-top: 12px; padding-top: 12px; border-top: 1.5px solid var(--line); }
.bd-panel > div { grid-area: 1 / 1; min-width: 0; transition: opacity .35s ease, transform .35s ease; }
.bd-p0 { align-self: center; display: grid; gap: 12px; }
.bd-p1 { opacity: 0; transform: translateY(6px); }
.s-flag .bd-p0 { opacity: 0; }
.s-flag .bd-p1 { opacity: 1; transform: none; }

.bd-trow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.bd-tl { font: 500 13.5px/1 var(--sans); color: var(--text-2); white-space: nowrap; }
.bd-track { position: relative; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); }
.bd-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: rgba(233, 238, 245, 0.75); }
.bd-fill-s { width: 7%; }
.bd-fill-l { width: 100%; background: linear-gradient(90deg, rgba(233, 238, 245, .75), var(--unsure)); }
.bd-tv { font: 600 14px/1 var(--sans); color: var(--text); white-space: nowrap; }

.bd-r1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.bd-chips { display: grid; }
.bd-chip { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 7px; font: 600 13.5px/1 var(--sans); color: var(--unsure); white-space: nowrap; transition: opacity .3s ease; }
.bd-ring { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; font: 700 10px/1 var(--sans); }
.bd-ring svg { width: 11px; height: 11px; }
.bd-chip-ok { color: var(--high); opacity: 0; }
.s-checked .bd-chip-q { opacity: 0; }
.s-checked .bd-chip-ok { opacity: 1; }
.bd-rev { display: inline-flex; align-items: center; gap: 6px; font: 500 12.5px/1 var(--sans); color: var(--text-2); white-space: nowrap; opacity: 0; transform: translateX(6px); transition: opacity .3s ease, transform .3s ease; }
.s-rev .bd-rev { opacity: 1; transform: none; }
.bd-rav { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--text-2); display: grid; place-items: center; font: 600 9px/1 var(--sans); color: var(--text); flex: none; }

.bd-reason { margin: 8px 0 0; font: 500 clamp(14px, 3.9cqi, 16px)/1.3 var(--sans); letter-spacing: -0.01em; color: var(--text); }
.bd-ptr { margin: 4px 0 0; font: 500 12px/1.3 var(--mono); color: var(--text-2); }
.bd-diff {
  margin-top: 8px; padding: 5px 0; border-radius: 10px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line);
  overflow-x: auto; font: 500 clamp(11.5px, 3.05cqi, 13px)/1.65 var(--mono); color: var(--text);
}
.bd-dl { position: relative; display: grid; grid-template-columns: 2.4em 1.3em max-content; align-items: center; white-space: pre; padding-right: 8px; transition: background-color .35s ease; }
.bd-dl .n { text-align: right; padding-right: .6em; color: var(--text-3); }
.bd-dl .s { color: var(--text-2); }
.bd-dl.del, .bd-dl.del .s { color: var(--text-3); }
.bd-dl.del .tx { text-decoration: line-through; text-decoration-color: var(--text-3); }
.bd-dl.hl { background: var(--unsure-bg); }
.bd-dl.hl .n { color: var(--unsure); }
.s-checked .bd-dl.hl { background: rgba(61, 220, 151, 0.08); }
.s-checked .bd-dl.hl .n { color: var(--high); }
/* the reviewer's tick replaces the "+" in the gutter, so a long line can never push it out of view */
.bd-ck { position: absolute; left: 2.25em; top: 50%; width: 1.05em; height: 1.05em; margin-top: -.525em; color: var(--high); opacity: 0; transform: scale(.5); transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1.3); }
.bd-ck svg { width: 100%; height: 100%; display: block; }
.bd-dl .s { transition: opacity .15s ease; }
.s-tick1 .bd-dl.hl:nth-child(3) .bd-ck, .s-tick2 .bd-dl.hl:nth-child(4) .bd-ck, .s-tick3 .bd-dl.hl:nth-child(5) .bd-ck { opacity: 1; transform: none; }
.s-tick1 .bd-dl.hl:nth-child(3) .s, .s-tick2 .bd-dl.hl:nth-child(4) .s, .s-tick3 .bd-dl.hl:nth-child(5) .s { opacity: 0; }

/* approve bar ------------------------------------------------------------------------------------ */
.bd-approve {
  display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 8px 8px 10px;
  border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface-2);
}
.bd-rav-lg { width: 30px; height: 30px; font-size: 11px; border-width: 2px; }
.bd-rl { flex: 1; min-width: 0; font: 500 14px/1 var(--sans); color: var(--text-2); white-space: nowrap; }
.bd-btnwrap { display: grid; }
.bd-btn, .bd-done {
  grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 16px;
  border-radius: 999px; font: 600 14px/1 var(--sans); white-space: nowrap;
}
.bd-btn {
  border: 1.5px solid var(--line-2); color: var(--text-2); background: transparent;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .14s ease, opacity .25s ease;
}
.s-approve .bd-btn { background: var(--cta-bg); border-color: var(--cta-bg); color: var(--cta-fg); }
.s-press .bd-btn { transform: scale(.93); }
.bd-done { border: 1.5px solid rgba(255, 255, 255, .85); color: #fff; opacity: 0; transition: opacity .25s ease; }
.bd-done svg { width: 15px; height: 15px; }
.s-approved .bd-btn { opacity: 0; }
.s-approved .bd-done { opacity: 1; }

/* captions + replay -------------------------------------------------------------------------------- */
.bd-foot { order: -1; display: flex; align-items: center; gap: 12px; min-height: 34px; margin: 0 0 12px; padding: 0 4px; }
/* captions share one grid cell, so the line keeps the height of the longest caption and never jumps */
.bd-cap { display: grid; flex: 1; min-width: 0; margin: 0; font: 600 clamp(16px, 4.3cqi, 19px)/1.3 var(--sans); letter-spacing: -0.012em; color: var(--text); }
.bd-cap span { grid-area: 1 / 1; opacity: 0; transform: translateY(4px); transition: opacity .32s ease, transform .32s ease; }
.bd-cap span[data-cap="rm"] { display: none; }
@media (prefers-reduced-motion: reduce) { .bd-cap span[data-cap="rm"] { display: block; } }
.bd-cap span.on { opacity: 1; transform: none; }
.bd-cap em { font-style: normal; color: var(--unsure); }
.bd-cap em.h { color: var(--high); }
.bd-replay {
  flex: none; height: 32px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line-2); background: transparent;
  color: var(--text-2); font: 500 13px/1 var(--sans); cursor: pointer;
}
.bd-replay:hover { color: var(--text); border-color: rgba(255, 255, 255, .28); }
.bd-replay:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }