/* how-it-works deck: widget styles */
.tc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tc-col { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px; }
.tc-col.neo { border-color: var(--border-highlight); background: var(--bg-surface-elevated); box-shadow: var(--glow-subtle); }
.tc-col h3 { font-size: 1rem; margin-bottom: 10px; } .tc-col h3 small { display: block; font-weight: 420; color: var(--text-muted); font-size: .8125rem; }
.tc-att { display: flex; flex-wrap: wrap; gap: 5px; min-height: 58px; align-content: flex-start; margin-bottom: 12px; }
.tc-att .chip { opacity: 0; transform: translateY(5px); transition: opacity .3s, transform .3s var(--ease); }
.tc-att .chip.in { opacity: 1; transform: none; }
.tc .hb { grid-template-columns: 64px 1fr auto; }
.rs-dl { display: grid; gap: 4px; }
.rs { display: grid; grid-template-columns: 62px 1fr; gap: 10px; padding: 7px 9px; border-radius: 8px; border: 1px solid transparent; transition: background .3s, border-color .3s; }
.rs .k { color: var(--text-muted); font-size: .8125rem; }
.rs .v { color: var(--text-secondary); font-size: .8125rem; }
.rs.on { background: rgba(56, 189, 248, .08); border-color: var(--border-highlight); } .rs.on .v { color: var(--text-primary); }
.rs-ver { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; color: var(--text-muted); font-size: .8125rem; }
.rs-ver .k { margin-right: 4px; }
.rl li { transition: border-color .3s, background .3s; } .rl li.on { border-color: var(--border-highlight); background: var(--bg-surface-elevated); }
.rscore { display: grid; grid-template-columns: 1.2fr 1.4fr 1.4fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease); }
.rscore:last-child { border-bottom: 0; }
.rscore.in { opacity: 1; transform: none; }
.rscore small { display: block; color: var(--text-muted); font-size: .75rem; font-weight: 420; }
.rscore .hb { margin: 0; grid-template-columns: 62px 1fr 30px; }
.rscore .chip { opacity: 0; transition: opacity .4s .3s; } .rscore.in .chip { opacity: 1; }
.rscore.win-row { background: rgba(0, 245, 160, .05); margin: 0 -16px; padding-inline: 16px; }
.carry .cy-row { display: grid; grid-template-columns: 170px repeat(5, 1fr); gap: 8px; align-items: stretch; margin-top: 14px; }
.cy-name { align-self: center; font-weight: 650; font-size: .9375rem; } .cy-name small { display: block; color: var(--text-muted); font-weight: 420; font-size: .8125rem; }
.blk { font-style: normal; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 14px 6px; border-radius: 10px; border: 1px solid var(--border-medium); background: var(--bg-surface); font-weight: 600; font-size: .875rem; text-align: center; transition: background .4s, border-color .4s, color .4s, transform .4s var(--ease); }
.blk em { font-style: normal; font-weight: 420; font-size: .75rem; color: var(--text-muted); }
.blk.dom { border-style: dashed; color: var(--amber-glow); border-color: rgba(251, 191, 36, .45); }
.cy-row.new .blk:not(.dom) { opacity: .45; }
.cy-row.new .blk.hit { opacity: 1; background: rgba(0, 245, 160, .1); border-color: rgba(0, 245, 160, .55); color: var(--cyan-glow); transform: translateY(-3px); }
.cy-row.new .blk.dom.hit { opacity: 1; background: rgba(251, 191, 36, .08); }
.cy-link { margin: 8px 0 0 178px; font-size: .8125rem; color: var(--text-muted); } .cy-link span::before { content: "\2193  "; color: var(--blue-glow); }
.dp-step { display: grid; grid-template-columns: 22px 1fr auto 90px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border-subtle); opacity: .3; transition: opacity .4s; }
.dp-step.done { opacity: 1; }
.dp-step .no { font-family: var(--font-display); font-weight: 600; color: var(--blue-glow); }
.dp-step .txt { font-size: .875rem; color: var(--text-primary); } .dp-step .txt small { display: block; color: var(--text-muted); font-size: .75rem; }
.dp-bar { height: 8px; border-radius: 999px; background: var(--bg-input); overflow: hidden; border: 1px solid var(--border-subtle); } .dp-bar i { display: block; height: 100%; width: 0; background: var(--blue-glow); border-radius: 999px; transition: width .6s var(--ease); }
.dp-step.done .dp-bar i { width: var(--v); }
.dp-step[data-t="f"] .dp-bar i { background: var(--amber-glow); } .dp-step[data-t="s"] .dp-bar i { background: var(--cyan-glow); }
.dp-esc { margin: 2px 0; padding: 8px 12px; border-left: 3px solid var(--amber-glow); background: rgba(251, 191, 36, .06); font-size: .8125rem; color: var(--text-secondary); border-radius: 0 8px 8px 0; max-height: 0; opacity: 0; overflow: hidden; padding-block: 0; transition: max-height .5s var(--ease), opacity .4s, padding .4s; }
.dp-esc.show { max-height: 80px; opacity: 1; padding-block: 8px; }
.dp-total { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 10px; font-size: .8125rem; color: var(--text-secondary); }
.dp-total b { font-family: var(--font-display); font-size: 1.4rem; color: var(--text-primary); margin-left: 6px; } .dp-total b.g { color: var(--cyan-glow); }
.cvs { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; padding: 16px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.cvs i { aspect-ratio: 1; border-radius: 3px; background: #1a2236; transition: background .25s, transform .25s; }
.cvs i.s { background: rgba(0, 245, 160, .55); } .cvs i.l { background: var(--red-glow); transform: scale(1.25); } .cvs i.m { background: var(--blue-glow); transform: scale(1.1); }
.esc-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.st-code { margin-top: 18px; max-width: 640px; }
.pm { padding: 6px 0; border-bottom: 1px solid var(--border-subtle); } .pm:last-of-type { border-bottom: 0; }
.pm-t { display: block; font-size: .8125rem; font-weight: 650; color: var(--text-primary); margin-bottom: 2px; }
.pm .hb { grid-template-columns: 72px 1fr auto; margin: 5px 0; }
@media (max-width: 899px) {
  .pm { padding: 3px 0; } .pm-t { font-size: .75rem; } .pm .hb { grid-template-columns: 56px 1fr auto; margin: 3px 0; } .pm .hb .tr { height: 8px; }
  #proof .win-body { gap: 0; } #proof .pm .hb { margin: 2px 0; } #proof .numlist { gap: 4px; margin-top: 4px; } #proof .numlist li { padding: 5px 8px 5px 34px; } #proof .numlist li::before { top: 3px; }
  #delegation .section-lead { display: none; } #delegation .claim .stat-row { display: block; margin-top: 4px; } #delegation .claim .fine { margin-top: 4px; }
  .tc-cols { gap: 8px; } .tc-col { padding: 10px; } .tc-col h3 { font-size: .875rem; margin-bottom: 6px; } .tc-att { min-height: 0; margin-bottom: 8px; gap: 4px; }
  .tc .hb { grid-template-columns: 1fr auto; margin: 4px 0; } .tc .hb .tr { grid-column: 1 / -1; grid-row: 2; height: 8px; }
  .rs { grid-template-columns: 50px 1fr; padding: 4px 6px; gap: 6px; } .rs .v, .rs .k { font-size: .75rem; }
  .rl { display: none; }
  .rscore { grid-template-columns: 1fr 1fr auto; gap: 6px; padding: 7px 0; } .rscore > div:first-child { grid-column: 1 / -1; } .rscore .hb { grid-template-columns: 1fr auto; } .rscore .hb .tr { grid-column: 1 / -1; grid-row: 2; height: 8px; } .rscore .hb span:first-child { font-size: .75rem; }
  .rscore.win-row { margin: 0 -12px; padding-inline: 12px; }
  .carry .cy-row { grid-template-columns: repeat(5, 1fr); gap: 5px; margin-top: 8px; } .cy-name { grid-column: 1 / -1; } .cy-name small { display: inline; margin-left: 6px; }
  .blk { padding: 9px 2px; font-size: .6875rem; } .blk em { font-size: .625rem; } .cy-link { margin: 4px 0 0; }
  .dp-step { grid-template-columns: 16px 1fr auto; gap: 6px; padding: 5px 0; } .dp-step .dp-bar { display: none; } .dp-step .txt { font-size: .75rem; } .dp-step .txt small { display: none; }
  .dp-esc { font-size: .6875rem; } .dp-esc.show { padding-block: 5px; }
  .dp-total { font-size: .6875rem; padding-top: 6px; } .dp-total b { font-size: 1.1rem; }
  .cvs { grid-template-columns: repeat(20, 1fr); gap: 2px; padding: 10px; } .esc-legend { gap: 5px; margin-top: 8px; } .esc-legend .chip { font-size: .6875rem; padding: 2px 6px; }
  .st-code { margin-top: 10px; font-size: .625rem; padding: 8px 10px; }
}