/* Day board (js/pages/dayboard.js). Colours come from the theme tokens; sizes of text in rem (Settings > Text size). */
.db-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.db-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: -4px 0 12px; font-size: 0.8125rem; }
.db-chip { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; color: var(--muted); }
.db-chip.live { color: var(--bull); border-color: var(--bull); }
.db-tide { display: inline-block; width: 140px; height: 8px; border-radius: 4px; background: var(--bear); overflow: hidden; }
.db-tide i { display: block; height: 100%; background: var(--bull); transition: width .8s; }
.db-amber { color: var(--warn); }
.db-panel { margin-bottom: 16px; }
/* the waiter until the first stocks arrive: renko bricks stepping up, then the boards */
.db-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 340px; text-align: center; padding: 28px 16px; }
.db-wait b { font-size: 1rem; }
.db-wait .muted { font-size: 0.8125rem; max-width: 460px; }
.db-loading #dbLadderPanel, .db-loading #dbArenaPanel, .db-loading #dbRace, .db-loading .db-cards { display: none; }
.db-wait .rb-bricks { margin-bottom: 8px; }
.db-wait-bar { width: min(320px, 80%); height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 4px; }
.db-wait-bar i { display: block; height: 100%; background: var(--brass); transition: width .4s; }
.db-wait-bar[hidden] { display: none; }
.db-prog { display: inline-flex; align-items: center; gap: 6px; }
.db-prog-bar { width: 90px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.db-prog-bar i { display: block; height: 100%; background: var(--brass); }
.db-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; font-size: 0.8125rem; }
.db-bar-tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.db-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line-soft); font-size: 0.75rem; color: var(--muted); }
.db-legend span { display: inline-flex; align-items: center; gap: 6px; }
.db-k { display: inline-block; flex: none; }
.db-k.post { width: 2px; height: 14px; background: var(--hold); }
.db-k.wall { width: 6px; height: 14px; border-radius: 2px; background: var(--warn); }
.db-k.floor { width: 3px; height: 14px; border-radius: 2px; background: var(--bull); }
.db-k.ic { width: 16px; height: 16px; }
.db-k.ic svg { width: 16px; height: 16px; display: block; }
.db-k.ring { width: 12px; height: 12px; border-radius: 50%; border: 2px solid; }

/* goal ladder */
.db-scroll { overflow-x: auto; }
.db-ladder { position: relative; min-width: 720px; }
.db-field { position: absolute; left: 70px; right: 156px; top: 0; bottom: 0; }
.db-ez { position: absolute; top: 34px; bottom: 0; }
.db-ez.down { left: 0; background: color-mix(in srgb, var(--bear) 8%, transparent); }
.db-ez.up { right: 0; background: color-mix(in srgb, var(--bull) 8%, transparent); }
.db-post { position: absolute; top: 34px; bottom: 0; border-left: 2px solid var(--hold); opacity: .7; }
.db-post.zero { border-left: 1px dashed var(--line); opacity: 1; }
.db-post-l { position: absolute; top: 2px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; white-space: nowrap; }
.db-post-l b { font-size: 0.75rem; font-weight: 800; }
.db-post-l span { font-size: 0.625rem; color: var(--faint); }
.db-lane, .db-label, .db-stat { position: absolute; height: 26px; transition: top .7s ease, opacity .3s; }
.db-lane { left: 0; right: 0; }
.db-lane::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; border-bottom: 1px solid var(--line-soft); }
.db-lane.sel, .db-label.sel { background: color-mix(in srgb, var(--brass) 12%, transparent); border-radius: 6px; }
.db-label { left: 0; width: 68px; display: flex; align-items: center; gap: 2px; }
.db-tk { flex: 1; min-width: 0; min-height: 24px; padding: 0 6px; border: 0; border-radius: 6px; background: none; color: var(--text); font: 800 0.75rem/1 var(--font); text-align: left; cursor: pointer; }
.db-tk:hover { background: var(--deck-2); }
.db-move { width: 20px; font-size: 0.5625rem; font-weight: 800; }
.db-stat { right: 0; width: 150px; display: flex; align-items: center; gap: 6px; font-size: 0.75rem; }
.db-stat b { width: 44px; text-align: right; flex: none; }
.db-stat span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-range { position: absolute; top: 12px; height: 2px; background: var(--line); transition: left .85s, width .85s; }
.db-tail { position: absolute; top: 12px; height: 3px; border-radius: 2px; transition: left .85s linear, width .85s linear; }
.db-tail.up { background: color-mix(in srgb, var(--bull) 55%, transparent); }
.db-tail.down { background: color-mix(in srgb, var(--bear) 55%, transparent); }
.db-ball { position: absolute; top: 13px; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--ink); box-sizing: border-box; transition: left .85s linear; z-index: 3; }
.db-ball.up { background: var(--bull); }
.db-ball.down { background: var(--bear); }
.db-ball.near { border: 2px dashed var(--text); }
.db-lane.sel .db-ball { box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 30%, transparent); border-color: var(--text); }
.db-wall { position: absolute; top: 3px; width: 6px; height: 20px; border-radius: 2px; background: var(--warn); }
.db-floor { position: absolute; top: 4px; width: 3px; height: 18px; border-radius: 2px; }
.db-floor.up { background: var(--bull); }
.db-floor.down { background: var(--bear); }
.db-mt { position: absolute; top: 7px; font-size: 0.625rem; font-weight: 800; white-space: nowrap; }
.db-mt.amber { color: var(--warn); }
.db-wallic { position: absolute; top: 1px; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; border: 2px solid currentColor; background: var(--deck); box-sizing: border-box; display: flex; align-items: center; justify-content: center; z-index: 2; }
.db-wallic svg { width: 15px; height: 15px; }
.db-wallic.pinning { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 30%, transparent); }
.db-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.db-blast, .db-pop { position: absolute; top: 13px; line-height: 0; }
.db-blast svg { width: 48px; height: 48px; animation: db-blast 1.3s ease-out forwards; transform: translate(-50%, -50%); position: absolute; }
.db-ring { position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; border: 2px solid currentColor; animation: db-ring 1.3s ease-out forwards; }
.db-pop svg { width: 26px; height: 26px; animation: db-pop 1.6s ease-out forwards; position: absolute; transform: translate(-50%, -75%); }
@keyframes db-blast { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 1 } 60% { opacity: 1 } 100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0 } }
@keyframes db-ring { from { transform: translate(-50%, -50%) scale(.6); opacity: .9 } to { transform: translate(-50%, -50%) scale(3); opacity: 0 } }
@keyframes db-pop { 0% { transform: translate(-50%, -30%); opacity: 0 } 25% { transform: translate(-50%, -75%); opacity: 1 } 85% { opacity: 1 } 100% { opacity: 0 } }

/* goal ladder: a bull board and a bear board side by side (columns = stocks, goal posts across) */
.db-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.db-board { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--deck-2); padding: 10px 0 4px; }
.db-bh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px 6px; font-size: 0.8125rem; }
.db-bh b { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9375rem; }
.db-bh svg { width: 20px; height: 20px; }
.db-bscroll { overflow: hidden; }
.db-bplot.narrow .db-cval, .db-bplot.narrow .db-wallv, .db-bplot.narrow .db-hmt { display: none; }
.db-bplot.narrow .db-wallic { transform: scale(.8); }
.db-bplot { position: relative; }
.db-ezv { position: absolute; left: 64px; right: 0; }
.db-ezv.up { background: color-mix(in srgb, var(--bull) 9%, transparent); }
.db-ezv.down { background: color-mix(in srgb, var(--bear) 9%, transparent); }
.db-hpost { position: absolute; left: 64px; right: 0; border-top: 2px solid var(--hold); opacity: .65; }
.db-hpost.zero { border-top: 1px dashed var(--muted); opacity: .8; }
.db-hpost-l { position: absolute; left: 6px; width: 56px; transform: translateY(-50%); display: flex; flex-direction: column; line-height: 1.15; }
.db-hpost-l b { font-size: 0.75rem; font-weight: 800; }
.db-hpost-l span { font-size: 0.625rem; color: var(--faint); }
.db-cols { position: absolute; inset: 0; }
.db-col { position: absolute; top: 0; bottom: 0; transition: left .7s ease, width .7s ease, opacity .3s; }
.db-col::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--line-soft); }
.db-col.sel { background: color-mix(in srgb, var(--brass) 12%, transparent); border-radius: 8px; }
.db-lg-gap { --gc: var(--bull); display: inline-block; width: 7px; height: 14px; margin-right: 4px; vertical-align: -2px; border: 1.5px solid var(--gc); border-radius: 2px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--gc) 40%, transparent) 55%, transparent 55%); }
.db-lg-gap.against { --gc: var(--hold); margin-right: 6px; }
.db-gap { position: absolute; inset: 0; pointer-events: none; }
.db-gap i { position: absolute; left: 50%; width: 10px; margin-left: -5px; box-sizing: border-box; transition: top .85s, height .85s; }
.db-gap .open { border: 1.5px solid var(--gc); border-radius: 3px; background: color-mix(in srgb, var(--gc) 8%, transparent); }
.db-gap .fill { background: color-mix(in srgb, var(--gc) 40%, transparent); border-radius: 3px; }
.db-gap .cap { height: 0; width: 16px; margin-left: -8px; border-top: 2px solid var(--gc); }
.db-gap .cap.clip { border-top-style: dashed; }
.db-gap.with.bull { --gc: var(--bull); } .db-gap.with.bear { --gc: var(--bear); } .db-gap.against { --gc: var(--hold); }
.db-gap.done .open { border-style: solid; }
.db-vrange { position: absolute; left: 50%; width: 2px; margin-left: -1px; background: var(--line); transition: top .85s, height .85s; }
.db-vtail { position: absolute; left: 50%; width: 4px; margin-left: -2px; border-radius: 2px; transition: top .85s linear, height .85s linear; }
.db-vtail.with.bull { background: color-mix(in srgb, var(--bull) 60%, transparent); }
.db-vtail.with.bear { background: color-mix(in srgb, var(--bear) 60%, transparent); }
.db-vtail.against { background: color-mix(in srgb, var(--hold) 60%, transparent); }
.db-vball { position: absolute; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; border: 2px solid var(--ink); box-sizing: border-box; transition: top .85s linear; z-index: 3; }
.db-vball.bull { background: var(--bull); } .db-vball.bear { background: var(--bear); }
.db-vball.near { border: 2px dashed var(--text); }
.db-col.sel .db-vball { border-color: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 30%, transparent); }
.db-hwall { position: absolute; left: 14%; right: 14%; height: 6px; margin-top: -3px; border-radius: 2px; background: var(--warn); }
.db-hfloor { position: absolute; left: 10%; right: 10%; height: 3px; margin-top: -1.5px; border-radius: 2px; }
.db-hfloor.bull { background: var(--bull); } .db-hfloor.bear { background: var(--bear); }
.db-hmt { position: absolute; right: 1px; transform: translateY(-125%); font-size: 0.5625rem; font-weight: 800; }
.db-hmt.amber { color: var(--warn); }
.db-col .db-wallic { left: 50%; margin: -12px 0 0 -12px; }
.db-wallv { position: absolute; left: 50%; transform: translate(-50%, 13px); font-size: 0.5625rem; font-weight: 800; white-space: nowrap; z-index: 4; }   /* under its icon, inside its own lane */
/* labels: the ticker turned sideways on its column line (reading upward), the ATR value beside the open end */
.db-clabel { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.db-col.bull .db-clabel { justify-content: flex-start; }
.db-col.bear .db-clabel { justify-content: flex-end; }
.db-col.bear .db-cval { order: -1; }
.db-col .db-tk { flex: none; writing-mode: vertical-rl; transform: rotate(180deg); height: auto; max-height: 44px; width: auto; min-height: 0;
  padding: 2px 1px; font-size: 0.6875rem; line-height: 1; white-space: nowrap; }   /* sized to the name, so it sits next to the board */
.db-cval { display: flex; flex-direction: column; align-items: center; line-height: 1.05; font-size: 0.625rem; white-space: nowrap; }
.db-cval b { font-weight: 800; }
.db-cval i { font-style: normal; font-size: 0.5625rem; opacity: .85; }
.db-col .db-move { width: auto; position: absolute; right: 0; top: 0; }
.db-col .db-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.db-col .db-blast, .db-col .db-pop { left: 50%; }

/* arena: the velocity race */
.db-vtiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 4px 0 12px; }
.db-vtile { background: var(--deck-2); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.db-vtile > span { font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.db-vtile > div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.db-vtile b { font-size: 1.375rem; font-weight: 800; }
.db-vtile small { font-size: 0.75rem; color: var(--muted); }
.db-vrace { border: 1px solid var(--line-soft); border-radius: 12px; padding: 6px; }
.db-vhead, .db-vrow { display: grid; grid-template-columns: 110px minmax(0, 1fr) 128px 112px 96px 92px; gap: 0 12px; align-items: center; padding: 0 10px; }
.db-vhead { font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.db-vaxis { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; overflow: hidden; }
.db-vrow { width: 100%; min-height: 40px; background: none; border: 0; border-radius: 8px; color: var(--text); font: 500 0.8125rem/1.2 var(--font); text-align: left; cursor: pointer; }
.db-vrow:hover { background: var(--deck-2); }
.db-vrow.sel { background: color-mix(in srgb, var(--brass) 16%, transparent); }
.db-vrow:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.db-vrow.kick { animation: db-vkick 1.6s ease-out; }
@keyframes db-vkick { 0% { background: color-mix(in srgb, var(--wait) 30%, transparent); } 100% { background: transparent; } }
.db-vtk { display: flex; align-items: baseline; gap: 8px; }
.db-vtk small { width: 18px; font-size: 0.6875rem; color: var(--faint); }
.db-vtk b { font-size: 0.9375rem; }
.db-vtrack { position: relative; height: 24px; }
.db-vmid { position: absolute; left: 50%; top: -8px; bottom: -8px; width: 1px; background: var(--line); }
.db-vbar { position: absolute; top: 5px; height: 14px; transition: left .6s, width .6s; }
.db-vbar.up { background: var(--bull); border-radius: 0 7px 7px 0; }
.db-vbar.down { background: var(--bear); border-radius: 7px 0 0 7px; }
.db-vtick, .db-k.vtick { position: absolute; top: 0; height: 24px; width: 3px; margin-left: -1px; border-radius: 2px; background: var(--text); }
.db-k.vtick { position: static; display: inline-block; height: 14px; margin: 0 4px 0 0; vertical-align: middle; }
.db-vval { position: absolute; top: 4px; font: 700 0.75rem/1 var(--font); white-space: nowrap; margin: 0 8px; padding: 1px 3px; border-radius: 4px; background: var(--deck); z-index: 1; }
.db-vcrowd { display: flex; align-items: center; gap: 8px; }
.db-vcrowd i { width: 72px; height: 6px; border-radius: 3px; background: var(--line-soft); position: relative; flex: none; }
.db-vcrowd em { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--muted); }
.db-vcrowd em.hot { background: var(--warn); }
.db-vnum { font-variant-numeric: tabular-nums; }
.db-vstage { font-size: 0.6875rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1.5px solid; }
/* the stage tag under each ladder ticker */
.db-stg { font-size: 0.5rem; font-weight: 800; letter-spacing: .04em; line-height: 1; padding: 1px 3px; border-radius: 4px; border: 1px solid; white-space: nowrap; }
.db-stg[hidden] { display: none; }
.db-bplot.narrow .db-stg { font-size: 0; width: 7px; height: 7px; padding: 0; border-radius: 50%; border-width: 3.5px; }

/* race */
.db-race-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 12px; font-size: 0.8125rem; }
.db-race-h h2 { margin: 0; font-size: 1.125rem; }
.db-race-h > b { margin-left: auto; }
.db-tug { display: grid; grid-template-columns: 120px minmax(0, 1fr) 120px; gap: 12px; align-items: center; margin-bottom: 14px; }
.db-tug > div { display: flex; flex-direction: column; } .db-tug > div:first-child { text-align: right; }
.db-tug b { font-size: 1.375rem; } .db-tug span { font-size: 0.6875rem; color: var(--muted); }
.db-tugbar { position: relative; height: 18px; border-radius: 9px; background: var(--bear); overflow: hidden; }
.db-tugbar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bull); transition: width .8s; }
.db-tugbar em { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--text); }
.db-team { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; margin-top: 10px; }
.db-team-h { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--deck-2); }
.db-team-h svg { width: 22px; height: 22px; }
.db-team-h b { font-size: 1rem; }
.db-team-s { font-size: 0.75rem; }
.db-track { position: relative; height: 122px; border-radius: 10px; border: 1px solid var(--line); background: var(--deck-2); overflow: hidden; }
.db-flag { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--line); }
.db-flag span { position: absolute; bottom: 4px; left: 5px; font-size: 0.625rem; font-weight: 700; color: var(--faint); white-space: nowrap; }
.db-runner { position: absolute; transform: translateX(-100%); padding: 2px 7px; border-radius: 999px; font: 800 0.6875rem/1.2 var(--font); color: var(--text); cursor: pointer; white-space: nowrap; transition: left .85s linear, top .6s; }
.db-runner.up { background: color-mix(in srgb, var(--bull) 25%, transparent); border: 1.5px solid var(--bull); }
.db-runner.down { background: color-mix(in srgb, var(--bear) 25%, transparent); border: 1.5px solid var(--bear); }
.db-runner.sel { border-color: var(--text); z-index: 5; }

/* cards */
.db-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.db-sel-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.db-sel-h h2 { margin: 0; font-size: 1.5rem; }
.db-stage { margin-left: auto; font-size: 0.6875rem; font-weight: 800; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; border: 1.5px solid currentColor; }
.db-spark { width: 100%; height: 70px; display: block; margin: 10px 0 6px; }
.db-spark polyline { fill: none; stroke-width: 2; stroke-linejoin: round; }
.db-spark polyline.vw { stroke: var(--hold); stroke-width: 1.2; stroke-dasharray: 4 3; }
.db-spark polyline.up { stroke: var(--bull); } .db-spark polyline.down { stroke: var(--bear); }
.db-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 8px 0 12px; }
.db-kv span { display: block; font-size: 0.6875rem; color: var(--muted); }
.db-kv b { font-size: 1rem; }
.db-wrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 10px; font-size: 0.8125rem; }
.db-wrow .muted { grid-column: 1 / -1; font-size: 0.75rem; }
.db-wst { font-size: 0.6875rem; font-weight: 800; letter-spacing: .06em; }
.db-levels > div { display: grid; grid-template-columns: 40px 76px minmax(0, 1fr); gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--line-soft); font-size: 0.8125rem; }
.db-levels { margin-bottom: 10px; }
.db-lst { font-size: 0.6875rem; font-weight: 800; letter-spacing: .06em; color: var(--faint); }
.db-lst.floor { color: var(--bull); } .db-lst.wall { color: var(--warn); } .db-lst.touched { color: var(--text); }
.db-fun { display: grid; grid-template-columns: 40px minmax(0, 1fr) 120px; gap: 8px; align-items: center; padding: 4px 0; font-size: 0.75rem; }
.db-funbar { position: relative; height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.db-funbar i, .db-funbar em { position: absolute; left: 0; top: 0; bottom: 0; transition: width .8s; }
.db-funbar.up i { background: color-mix(in srgb, var(--bull) 35%, transparent); } .db-funbar.up em { background: var(--bull); }
.db-funbar.down i { background: color-mix(in srgb, var(--bear) 35%, transparent); } .db-funbar.down em { background: var(--bear); }
.db-fun .muted { text-align: right; }
.db-ev > span:last-child { min-width: 0; white-space: normal; overflow-wrap: anywhere; }   /* long tape lines wrap inside the panel */
.db-ev { display: grid; grid-template-columns: 44px 14px 52px minmax(0, 1fr); gap: 8px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--line-soft); padding: 7px 4px; color: var(--text); font: 500 0.8125rem/1.35 var(--font); cursor: pointer; }
.db-ev:hover { background: var(--deck-2); }
.db-evk { width: 10px; height: 10px; justify-self: center; }
.db-evk.dot { border-radius: 50%; } .db-evk.sq { border-radius: 2px; } .db-evk.bar { width: 5px; height: 12px; border-radius: 2px; } .db-evk.dia { transform: rotate(45deg); border-radius: 1px; }
@media (prefers-reduced-motion: reduce) {
  .db-lane, .db-label, .db-stat, .db-ball, .db-tail, .db-runner, .db-vbar { transition: none; }
  .db-blast svg, .db-ring, .db-pop svg, .db-vrow.kick { animation-duration: .01s; }
}
@media (max-width: 720px) {
  .db-tug { grid-template-columns: 80px minmax(0, 1fr) 80px; }
  .db-team { grid-template-columns: 1fr; }
  .db-vtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-vhead, .db-vrow { grid-template-columns: 64px minmax(0, 1fr) 64px; }
  .db-vhead > :nth-child(n+4), .db-vrow > :nth-child(n+4) { display: none; }
  .db-vcrowd i { display: none; }
}
.db-list { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--muted); }
.db-list select { min-width: 150px; }
/* the $ / % toggle in the ladder bar */
.db-bar-tools .seg button { font-size: 0.75rem; padding: 2px 8px; min-height: 0; }

/* ---- Alignment view (Day board: alignment) ---- */
.db-achips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.db-achips .chip { padding: 3px 10px; font-size: 0.75rem; font-weight: 700; }
.db-achips .chip.pos.on { color: var(--bull); } .db-achips .chip.neg.on { color: var(--bear); } .db-achips .chip.on { color: var(--text); }
.db-achips .muted { font-size: 0.75rem; margin-left: 6px; }
.db-atable { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.db-ahead, .db-arow-main { display: grid; grid-template-columns: minmax(96px, 1.2fr) repeat(5, minmax(64px, 1fr)) minmax(118px, 1.1fr); gap: 8px; align-items: center; }
.db-ahead { padding: 6px 10px; font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.db-ahead .day, .db-arow-main .day { border-left: 1px dashed var(--line); padding-left: 8px; }
.db-arow { position: relative; display: grid; grid-template-columns: 1fr; gap: 8px; align-items: center; padding: 6px 10px; border: 1px solid var(--line-soft);
  border-radius: 10px; background: var(--deck-2); }
.db-arow.up { border-color: color-mix(in srgb, var(--bull) 55%, transparent); }
.db-arow.dn { border-color: color-mix(in srgb, var(--bear) 55%, transparent); }
.db-arow-main { border: 0; background: none; color: inherit; text-align: left; cursor: pointer; padding: 0; font: inherit; }
.db-astock { display: flex; flex-direction: column; } .db-astock b { font-size: 0.9375rem; } .db-astock small { color: var(--muted); }
.db-af { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 62px; padding: 3px 6px; border-radius: 7px; font-weight: 800;
  font-size: 0.8125rem; line-height: 1.15; border: 1px solid transparent; }
.db-af small { font-size: 0.625rem; font-weight: 500; color: var(--muted); }
.db-af.up { color: var(--bull); background: color-mix(in srgb, var(--bull) 9%, transparent); border-color: color-mix(in srgb, var(--bull) 35%, transparent); }
.db-af.dn { color: var(--bear); background: color-mix(in srgb, var(--bear) 9%, transparent); border-color: color-mix(in srgb, var(--bear) 35%, transparent); }
.db-af.strong.up { background: color-mix(in srgb, var(--bull) 17%, transparent); border-color: color-mix(in srgb, var(--bull) 65%, transparent); }
.db-af.strong.dn { background: color-mix(in srgb, var(--bear) 17%, transparent); border-color: color-mix(in srgb, var(--bear) 65%, transparent); }
.db-af.none { color: var(--muted); }
.db-am { display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 7px; border: 1px solid var(--line); }
.db-am i { width: 7px; height: 16px; border-radius: 2px; background: var(--line); }
.db-am i.u { background: var(--bull); } .db-am i.d { background: var(--bear); }
.db-am b { margin-left: 6px; font-size: 0.875rem; } .db-am small { color: var(--muted); font-size: 0.6875rem; }
.db-am.up { border-color: var(--bull); } .db-am.dn { border-color: var(--bear); } .db-am.mix { border-color: var(--warn); }
.db-adetail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.db-adetail > div { background: var(--deck); border: 1px solid var(--line-soft); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.db-adetail svg { width: 100%; height: 66px; }
.db-adh { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 0.75rem; }
.db-adh .db-af { min-width: 0; font-size: 0.6875rem; }
.db-atiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 8px; }
.db-atile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 10px; border: 1px solid var(--line-soft); background: var(--deck-2);
  color: inherit; cursor: pointer; font: inherit; }
.db-atile.up { border-color: color-mix(in srgb, var(--bull) 60%, transparent); } .db-atile.dn { border-color: color-mix(in srgb, var(--bear) 60%, transparent); }
.db-atile.on { outline: 2px solid var(--accent, #4cc3f5); }
.db-atile small { font-size: 0.6875rem; color: var(--muted); }
.db-aslices { display: flex; gap: 3px; }
.db-aslices i { width: 12px; height: 26px; border-radius: 3px; background: var(--line); }
.db-aslices i.u { background: var(--bull); } .db-aslices i.d { background: var(--bear); } .db-aslices i.day { opacity: .6; margin-left: 3px; }
.db-arow.open .db-arow-h { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; }
.db-aturn { color: var(--muted); } .db-aturn b { font-weight: 800; }
/* Setups view */
.db-stools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.db-stools .muted { font-size: 0.75rem; }
.db-smine { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 8px 10px; margin-top: 6px; border: 1px dashed var(--line); border-radius: 8px; font-size: 0.8125rem; }
.db-smine > span { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.db-sstatus { font-size: 0.75rem; margin: 6px 0 2px; }
.db-scols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.db-scol { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 10px; background: var(--deck); border: 1px solid var(--line-soft); min-width: 0; }
.db-scol.lining { border-top: 3px solid var(--brass); } .db-scol.close { border-top: 3px solid var(--warn); } .db-scol.turned { border-top: 3px solid var(--wait); }
.db-scolh { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.db-scolh small { flex-basis: 100%; font-size: 0.6875rem; }
.db-scount { font-size: 0.75rem; font-weight: 800; padding: 0 7px; border-radius: 999px; background: var(--deck-2); border: 1px solid var(--line); }
.db-scard { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 5px; text-align: left; width: 100%; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line-soft); background: var(--deck-2);
  color: inherit; font: inherit; cursor: pointer; }
.db-scard.up { border-left: 3px solid var(--bull); } .db-scard.dn { border-left: 3px solid var(--bear); }
.db-scard.on { outline: 2px solid var(--accent, #4cc3f5); }
.db-sh { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .db-sh b { font-size: 0.9375rem; }
.db-sh small { margin-left: auto; color: var(--muted); font-size: 0.75rem; }
.db-sdir { font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.db-sboxes { display: flex; gap: 3px; align-items: center; }
.db-sboxes i { font-style: normal; font-size: 0.625rem; font-weight: 800; padding: 1px 5px; border-radius: 4px; background: var(--line); color: var(--text); }
.db-sboxes i.u { background: color-mix(in srgb, var(--bull) 30%, transparent); } .db-sboxes i.d { background: color-mix(in srgb, var(--bear) 30%, transparent); }
.db-sboxes em { font-style: normal; font-size: 0.625rem; font-weight: 800; margin-left: 6px; padding: 1px 5px; border-radius: 4px; border: 1px dashed var(--line); color: var(--muted); }
.db-sstrip svg { width: 100%; height: 40px; display: block; }
.db-sturn { display: flex; flex-direction: column; font-size: 0.75rem; } .db-sturn b { font-weight: 800; }
.db-sprog { display: block; width: 100%; min-height: 5px; height: 5px; flex: 0 0 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.db-sprog i { display: block; height: 5px; min-width: 2px; } .db-sprog.up i { background: var(--bull); } .db-sprog.dn i { background: var(--bear); }
.db-smore { font-size: 0.75rem; text-align: center; }
.db-sopen { margin-top: 10px; }
.db-adetail > div.trig { outline: 1px dashed var(--brass); }
.db-sfeed { margin-top: 12px; } .db-sfeed h2 { font-size: 0.9375rem; margin: 0 0 6px; }
.db-sfeedl { display: flex; flex-wrap: wrap; gap: 6px; }
.db-sev { display: inline-flex; gap: 6px; align-items: center; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-soft); font-size: 0.75rem; }
.db-sev.up { border-color: color-mix(in srgb, var(--bull) 55%, transparent); } .db-sev.dn { border-color: color-mix(in srgb, var(--bear) 55%, transparent); }
.db-sev.early { opacity: .65; }
.db-sreplay { color: var(--text); }
@media (max-width: 900px) {
  .db-ahead { display: none; }
  .db-arow-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .db-adetail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .db-scols { grid-template-columns: 1fr; }
}