/* Panel kit: the pieces shared by the landing page and the demo —
   pattern tiles, readouts, the "This group / Your usual" pair, play-chips, evidence bars and video covers. */

/* ---- pattern tile: a pastel surface that you can press */
.tile {
  --tile: var(--fog);
  position: relative; display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s5); border-radius: var(--r-xl); border: var(--line); background: var(--tile);
  box-shadow: var(--shadow); color: var(--ink); text-decoration: none;
  transition: transform var(--dur-press) ease-out, box-shadow var(--dur-press) ease-out;
}
a.tile:hover, button.tile:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
a.tile:active, button.tile:active { transform: translateY(2px); box-shadow: var(--shadow-pressed); }
.tile.state-working { --tile: var(--state-working); }
.tile.state-slipping { --tile: var(--state-slipping); }
.tile.state-emerging { --tile: var(--state-emerging); }
.tile.state-neutral { --tile: var(--state-neutral); }
.tile.state-insufficient { --tile: var(--state-insufficient); background-image: var(--hatch); }
.tile .chip { background: var(--panel); }
.tile-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2); }
.tile h2, .tile h3 { font-size: var(--fs-xl); font-weight: 600; }
.tile-sub { font-size: var(--fs-sm); }
.tile-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font: 600 var(--fs-sm)/1 var(--font-display); }

/* ---- readout: one number, big and calm */
.readout { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 0; }
.readout b { font: 600 clamp(48px, 6.5vw, 72px)/0.95 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.readout span { font: 500 var(--fs-md)/1.2 var(--font-display); }
.readout.sm b { font-size: 40px; }
.readout.none { font: 500 var(--fs-lg)/1.2 var(--font-display); color: var(--ink-muted); }

/* ---- bar pair: "This group" against "Your usual", with the calculation under each label */
.pair { display: grid; gap: var(--s4); }
.pair-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label value" "track track"; gap: 6px var(--s3); align-items: end; }
.pair-label { grid-area: label; display: grid; gap: 1px; font-size: var(--fs-sm); min-width: 0; }
.pair-label b { font: 600 var(--fs-md)/1.2 var(--font-display); }
.pair-label small { color: var(--ink-muted); font-size: var(--fs-xs); line-height: 1.35; }
.pair-value { grid-area: value; font: 600 var(--fs-xl)/1 var(--font-display); }
.pair-track { grid-area: track; height: 14px; border-radius: var(--r-pill); background: var(--fog); overflow: hidden; }
.pair-track i { display: block; height: 100%; width: var(--w); border-radius: var(--r-pill); background: var(--ink); transform-origin: left; transition: width 420ms var(--ease-settle); animation: barGrow 560ms var(--ease-settle) both; }
.pair-row.base .pair-track i { background: repeating-linear-gradient(90deg, var(--ink-muted) 0 6px, transparent 6px 9px); opacity: 0.55; }
@keyframes barGrow { from { transform: scaleX(0.02); } }

/* ---- play-chip: a timestamp you can tap */
.play-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper); font: 700 var(--fs-xs)/1.2 var(--font-body); white-space: nowrap;
}
.play-chip .icon { width: 12px; height: 12px; }

/* ---- evidence strength: three little bars plus words */
.quality { display: inline-flex; align-items: center; gap: 7px; font: 700 var(--fs-xs)/1 var(--font-body); }
.quality .bars { display: inline-flex; gap: 2px; align-items: end; }
.quality .bars i { width: 5px; border-radius: 2px; background: var(--ink-line); }
.quality .bars i:nth-child(1) { height: 7px; } .quality .bars i:nth-child(2) { height: 10px; } .quality .bars i:nth-child(3) { height: 13px; }
.quality .bars i.on { background: var(--ink); }

/* ---- video covers (flat pastel SVG) */
.thumb { position: relative; display: block; flex: none; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; border: var(--line); background: var(--fog); }
.thumb svg { width: 100%; height: 100%; }
.cover-title { font: 600 13px var(--font-display); }
.thumb-dur, .thumb-tag { position: absolute; bottom: 5px; padding: 1px 6px; border-radius: 6px; background: var(--ink); color: var(--paper); font: 700 10px/1.5 var(--font-body); }
.thumb-dur { right: 5px; }
.thumb-tag { left: 5px; top: 5px; bottom: auto; background: var(--apricot); color: var(--ink); }