/* ============================================================================ /draft-order/ — 2026 NHL Mock Draft Light-first design inspired by clean draft-card lists. Dark mode via [data-theme="dark"] on . All colors run through CSS variables so the layout never changes between modes — only the palette. ============================================================================ */ :root { --do-bg: #f5f7fb; --do-bg-2: #ffffff; --do-surface: #ffffff; --do-surface-2: #f8fafc; --do-surface-3: #f1f5f9; --do-border: #e2e8f0; --do-border-2: #cbd5e1; --do-text: #0f172a; --do-text-2: #334155; --do-muted: #64748b; --do-muted-2: #94a3b8; --do-accent: #1d4ed8; --do-accent-2: #2563eb; --do-accent-soft: rgba(37, 99, 235, 0.1); --do-own: #0e7490; --do-own-soft: rgba(14, 116, 144, 0.1); --do-acq: #b45309; --do-acq-soft: rgba(245, 158, 11, 0.14); --do-acq-border: rgba(245, 158, 11, 0.5); --do-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --do-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); --do-shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.08); --do-nav-bg: rgba(255, 255, 255, 0.85); } [data-theme="dark"] { --do-bg: #050a16; --do-bg-2: #0a1628; --do-surface: #0f1e36; --do-surface-2: rgba(255, 255, 255, 0.04); --do-surface-3: rgba(255, 255, 255, 0.02); --do-border: rgba(255, 255, 255, 0.08); --do-border-2: rgba(255, 255, 255, 0.16); --do-text: #f1f5f9; --do-text-2: #cbd5e1; --do-muted: #94a3b8; --do-muted-2: #64748b; --do-accent: #60a5fa; --do-accent-2: #3b82f6; --do-accent-soft: rgba(59, 130, 246, 0.16); --do-own: #22d3ee; --do-own-soft: rgba(34, 211, 238, 0.12); --do-acq: #fbbf24; --do-acq-soft: rgba(245, 158, 11, 0.14); --do-acq-border: rgba(245, 158, 11, 0.45); --do-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --do-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); --do-shadow-lg: 0 24px 50px rgba(0, 0, 0, 0.5); --do-nav-bg: rgba(10, 22, 40, 0.85); } /* ----- Page shell ------------------------------------------------------- */ html, body { background: var(--do-bg); } body.do-page { margin: 0; color: var(--do-text); font-family: "Instrument Sans", "Aptos", "Segoe UI", sans-serif; background: radial-gradient(1200px 600px at 80% -120px, var(--do-accent-soft), transparent 70%), var(--do-bg); background-attachment: fixed; min-height: 100vh; } .do-nav { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 1rem; height: 64px; padding: 0 clamp(1rem, 3vw, 2.4rem); border-bottom: 1px solid var(--do-border); background: var(--do-nav-bg); backdrop-filter: blur(18px); } .do-brand { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 0.55rem; color: var(--do-text); text-decoration: none; font-weight: 800; letter-spacing: -0.005em; white-space: nowrap; } .do-brand-mark { width: 32px; height: 32px; border-radius: 9px; background: transparent; display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: 0 8px 20px rgba(20, 99, 232, 0.18); } .do-brand-mark img { display: block; width: 100%; height: 100%; } .do-brand-mark i { display: none; } .do-brand-tag { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.04em; background: var(--do-accent-soft); color: var(--do-accent); padding: 0.18rem 0.45rem; border-radius: 999px; margin-left: 0.32rem; } .brand-wordmark-short { display: none; } .do-nav-links { margin-left: 0.4rem; display: flex; gap: 0.18rem; } .do-nav-links a { display: inline-flex; align-items: center; height: 34px; padding: 0 0.75rem; border-radius: 999px; color: var(--do-muted); font-size: 0.86rem; font-weight: 700; white-space: nowrap; text-decoration: none; transition: color 0.15s ease, background 0.15s ease; } .do-nav-links a:hover, .do-nav-links a.is-active { background: var(--do-accent-soft); color: var(--do-accent); } .do-nav-right { margin-left: auto; display: flex; align-items: center; gap: 0.7rem; } .do-nav-meta { color: var(--do-muted); font-size: 0.78rem; font-weight: 600; } .do-theme-toggle { width: 34px; height: 34px; /* Global button rule (styles.css) sets `padding: 0 0.95rem` and `min-height: 36px`, which crush this 34px circle — zero them out here, and pin the flex basis so the nav row can't squeeze it into an oval. */ min-height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 999px; border: 1px solid var(--do-border); background: var(--do-surface); color: var(--do-text-2); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .do-theme-toggle:hover { background: var(--do-accent-soft); color: var(--do-accent); border-color: var(--do-accent); } .do-theme-toggle svg { width: 16px; height: 16px; flex: 0 0 auto; } .do-theme-toggle .do-theme-sun { display: none; } .do-theme-toggle .do-theme-moon { display: block; } [data-theme="dark"] .do-theme-toggle .do-theme-sun { display: block; } [data-theme="dark"] .do-theme-toggle .do-theme-moon { display: none; } /* Intermediate widths (721-1239px): same one-row overflow as .site-nav — wrap the links and drop the meta text so the row never scrolls the page. (The palette trigger goes icon-only via the shared styles.css rule.) */ @media (min-width: 721px) and (max-width: 1329px) { .do-nav { flex-wrap: wrap; height: auto; min-height: 64px; padding-top: 0.45rem; padding-bottom: 0.45rem; row-gap: 0.3rem; } .do-nav-links { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 0.25rem; } .do-nav-meta { display: none; } } @media (max-width: 720px) { /* Wrap the nav to a second row instead of hiding links behind a horizontal scroll — every route should expose all destinations. */ .do-nav { flex-wrap: wrap; height: auto; min-height: 64px; gap: 0.5rem 0.6rem; padding: 0.55rem 0.8rem; } .brand-wordmark-full { display: none; } .brand-wordmark-short { display: inline; } .do-nav-links { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; gap: 0.25rem; } .do-nav-right { margin-left: auto; } .do-nav-meta { display: none; } .do-nav-links a { padding: 0 0.68rem; } } .do-main { max-width: 1320px; margin: 0 auto; padding: 1.4rem clamp(1rem, 3vw, 2.4rem) 4rem; } /* ----- Hero ------------------------------------------------------------- */ .do-hero { max-width: 1000px; margin: 1.6rem 0 2rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem 2.4rem; flex-wrap: wrap; } .do-hero-main { flex: 1 1 420px; min-width: 0; } .do-eyebrow { margin: 0; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--do-accent); } .do-eyebrow::before { content: "—"; margin-right: 0.4rem; opacity: 0.6; } .do-hero h1 { margin: 0.5rem 0 0; font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--do-text); } .do-hero h1 em { font-style: italic; color: var(--do-accent); font-weight: 700; } /* Quiet standfirst under the H1: when the draft actually happens. */ .do-hero-dates { margin: 0.6rem 0 0; font-family: var(--mono, monospace); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--do-muted); } .do-hero-dates b { font-weight: 800; color: var(--do-accent); } /* Draft-order count, relocated out of the top nav into the hero. */ .do-hero-meta { margin: 0.55rem 0 0; font-size: 0.82rem; font-weight: 600; color: var(--do-muted); } .do-lede { margin: 0.9rem 0 0; color: var(--do-text-2); font-size: 1rem; line-height: 1.55; } .do-data-bottom { margin-top: 3rem; } .do-data-note { margin: 0 0 0.65rem; color: var(--do-muted); font-size: 0.78rem; font-weight: 650; line-height: 1.45; } /* ----- Sections --------------------------------------------------------- */ .do-section { margin-top: 2.5rem; } .do-section-head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--do-border); } .do-section-head h2 { margin: 0.2rem 0 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.015em; color: var(--do-text); line-height: 1.1; } .do-section-note { margin: 0; font-size: 0.76rem; font-weight: 600; color: var(--do-muted); max-width: 460px; text-align: right; line-height: 1.45; } .do-section-note em { font-style: normal; color: var(--do-acq); font-weight: 700; } .do-section-note b { color: var(--do-accent); font-weight: 700; } @media (max-width: 720px) { .do-section-note { text-align: left; } } /* ----- Data freshness --------------------------------------------------- */ .do-freshness { display: grid; grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr); gap: 0.8rem 1rem; align-items: center; margin: 0; padding: 0.8rem 0.95rem; background: var(--do-surface); border: 1px solid var(--do-border); border-radius: 12px; box-shadow: var(--do-shadow-sm); } .do-freshness h2 { margin: 0.1rem 0 0; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--do-text); } .do-freshness-list { display: flex; flex-wrap: wrap; gap: 0.38rem; justify-content: flex-end; } .do-freshness-list > span, .do-freshness-chip { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 30px; padding: 0.28rem 0.58rem; border-radius: 999px; background: var(--do-surface-2); border: 1px solid var(--do-border); color: var(--do-text-2); font-size: 0.7rem; font-weight: 760; } .do-freshness-chip b { color: var(--do-text); font-weight: 850; } .do-freshness-chip em { font-family: "JetBrains Mono", monospace; font-size: 0.64rem; color: var(--do-accent); } @media (max-width: 820px) { .do-freshness { grid-template-columns: 1fr; } .do-freshness-list { justify-content: flex-start; } } /* ----- Source picker ---------------------------------------------------- */ /* Source picker is now the first control in the toolbar: a button that opens a grouped dropdown. .do-source-field is a grid item inside .do-board-controls. */ .do-source-field { position: relative; display: grid; gap: 0.26rem; } .do-source-field-label { font-size: 0.62rem; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; color: var(--do-muted); } .do-source-btn { display: flex; align-items: center; gap: 0.5rem; width: 100%; height: 40px; padding: 0 0.55rem; border: 1px solid var(--do-border); border-radius: 10px; background: var(--do-surface); color: var(--do-text); font-family: inherit; text-align: left; cursor: pointer; box-shadow: var(--do-shadow-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .do-source-btn:hover { border-color: var(--do-border-2); } .do-source-btn[aria-expanded="true"] { border-color: var(--do-accent); box-shadow: 0 0 0 3px var(--do-accent-soft); } .do-source-btn-mark { flex: 0 0 auto; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; background: var(--do-accent); color: #fff; font-family: "JetBrains Mono", monospace; font-size: 0.68rem; font-weight: 800; } .do-source-btn-text { display: flex; align-items: baseline; gap: 0.4rem; flex: 1 1 auto; min-width: 0; } .do-source-btn-text b { font-size: 0.88rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .do-source-btn-cap { font-family: "JetBrains Mono", monospace; font-size: 0.58rem; font-weight: 700; color: var(--do-muted); white-space: nowrap; } .do-source-btn-caret { flex: 0 0 auto; width: 14px; height: 14px; color: var(--do-muted); transition: transform 0.18s ease; } .do-source-btn[aria-expanded="true"] .do-source-btn-caret { transform: rotate(180deg); } /* Dropdown popover (id="do-source-chips"). */ .do-source-pop { position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; width: min(380px, 92vw); max-height: min(62vh, 460px); overflow-y: auto; padding: 0.4rem; background: var(--do-surface); border: 1px solid var(--do-border); border-radius: 13px; box-shadow: var(--do-shadow-lg); } .do-source-pop[hidden] { display: none; } .do-source-grp { padding: 0.6rem 0.55rem 0.25rem; font-family: "JetBrains Mono", monospace; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--do-muted-2); } .do-source-grp:first-child { padding-top: 0.3rem; } .do-source-chip { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.46rem 0.55rem; border: 0; border-radius: 9px; background: transparent; color: var(--do-text); font-family: inherit; font-size: 0.82rem; text-align: left; cursor: pointer; transition: background 0.12s ease; } .do-source-chip:hover { background: var(--do-surface-2); } .do-source-chip.is-active { background: var(--do-accent-soft); } .do-source-check { flex: 0 0 auto; width: 0.95rem; font-size: 0.8rem; font-weight: 800; color: var(--do-accent); text-align: center; } .do-source-chip.is-active .do-source-check::before { content: "\2713"; } .do-source-name { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .do-source-chip.is-active .do-source-name { color: var(--do-accent); } .do-source-fresh { font-style: normal; font-size: 0.68rem; line-height: 1; color: var(--do-acq); } .do-source-sub { flex: 0 0 auto; font-family: "JetBrains Mono", monospace; font-size: 0.62rem; font-weight: 700; color: var(--do-muted); white-space: nowrap; } .do-source-go { flex: 0 0 auto; width: 1.1rem; text-align: center; font-size: 0.8rem; color: var(--do-muted-2); text-decoration: none; border-radius: 5px; } .do-source-go:hover { color: var(--do-accent); } .do-source-go.is-empty { pointer-events: none; } .do-source-pop-foot { display: flex; justify-content: flex-end; margin-top: 0.3rem; padding: 0.45rem 0.3rem 0.2rem; border-top: 1px solid var(--do-border); } .do-source-pop-foot button { font-family: inherit; font-size: 0.72rem; font-weight: 700; color: var(--do-accent); background: transparent; border: 1px solid var(--do-border); border-radius: 8px; padding: 0.34rem 0.7rem; cursor: pointer; } .do-source-pop-foot button:hover { background: var(--do-accent-soft); border-color: var(--do-accent); } /* Thin meta line beneath the toolbar (replaces the old bordered detail card). */ .do-source-meta-line { margin: 0.55rem 0 1rem; font-size: 0.78rem; font-weight: 600; color: var(--do-text-2); } .do-source-meta-line strong { font-weight: 800; color: var(--do-accent); margin-right: 0.18rem; } .do-source-meta-line em { font-style: italic; color: var(--do-acq); font-weight: 700; } .do-source-link { color: var(--do-accent); font-weight: 700; text-decoration: none; border-bottom: 1px dashed var(--do-accent); } .do-source-link:hover { color: var(--do-accent-2); border-bottom-style: solid; } /* Toolbar: two flex groups — [Source · Sort · Position] left, [Search · Share] right. Every control normalizes to 40px so the row reads as one rule. */ .do-board-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.55rem 1.5rem; margin: 0; } .do-controls-group { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.55rem; min-width: 0; } .do-controls-left { flex: 1 1 auto; } .do-controls-right { flex: 0 1 auto; margin-left: auto; } .do-source-field { flex: 0 1 240px; min-width: 200px; } .do-field-sort { flex: 0 1 175px; min-width: 150px; } .do-field-position { flex: 0 1 150px; min-width: 130px; } .do-field-search { flex: 1 1 220px; min-width: 180px; max-width: 320px; } .do-board-controls label { display: grid; gap: 0.26rem; } .do-board-controls label > span { font-size: 0.62rem; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; color: var(--do-muted); } .do-board-controls input, .do-board-controls select { width: 100%; height: 40px; border: 1px solid var(--do-border); border-radius: 10px; background: var(--do-surface); color: var(--do-text); font-family: inherit; font-size: 0.86rem; font-weight: 650; padding: 0 0.72rem; box-shadow: var(--do-shadow-sm); outline: none; } .do-board-controls input:focus, .do-board-controls select:focus { border-color: var(--do-accent); box-shadow: 0 0 0 3px var(--do-accent-soft); } .do-share-btn { display: inline-flex; align-items: center; gap: 0.42rem; height: 40px; padding: 0 0.85rem; border: 1px solid var(--do-border); border-radius: 10px; background: var(--do-surface); color: var(--do-text-2); font-family: inherit; font-size: 0.8rem; font-weight: 750; white-space: nowrap; cursor: pointer; box-shadow: var(--do-shadow-sm); transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .do-share-btn:hover { border-color: var(--do-accent); color: var(--do-accent); background: var(--do-accent-soft); } .do-share-btn svg { width: 15px; height: 15px; flex: 0 0 auto; } /* Explicit wrap breakpoints: at 1024px the Search/Share pair drops to its own row (left-aligned); at 760px everything stacks one-per-row. 1200px keeps a single row — both groups fit the 1320px shell with room to spare. */ @media (max-width: 1024px) { .do-controls-right { flex: 1 1 100%; margin-left: 0; } .do-field-search { max-width: 420px; } } @media (max-width: 760px) { .do-controls-group { flex: 1 1 100%; flex-direction: column; align-items: stretch; } .do-source-field, .do-field-sort, .do-field-position, .do-field-search { flex: 1 1 auto; min-width: 0; max-width: none; width: 100%; } .do-share-btn { justify-content: center; } } /* ----- Optional draft-history snapshot ---------------------------------- */ .do-history-lite { margin-top: 1.35rem; } .do-history-details { background: var(--do-surface); border: 1px solid var(--do-border); border-radius: 12px; box-shadow: var(--do-shadow-sm); overflow: hidden; } .do-history-details summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; cursor: pointer; list-style: none; } .do-history-details summary::-webkit-details-marker { display: none; } .do-history-details summary span { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; } .do-history-details summary em { font-size: 0.62rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; color: var(--do-accent); } .do-history-details summary strong { font-size: 1.02rem; line-height: 1.1; letter-spacing: -0.01em; color: var(--do-text); } .do-history-details summary small { font-size: 0.78rem; font-weight: 650; line-height: 1.35; color: var(--do-muted); } .do-history-details summary b { flex: 0 0 auto; min-width: 68px; padding: 0.28rem 0.68rem; border-radius: 999px; background: var(--do-text); color: var(--do-surface); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; } .do-history-details[open] summary { border-bottom: 1px solid var(--do-border); } .do-history-details[open] summary b::before { content: "Hide"; } .do-history-details[open] summary b { font-size: 0; } .do-history-details[open] summary b::before { font-size: 0.68rem; } .do-history-panel { padding: 0.9rem 1rem 1rem; } .do-history-loading { margin: 0; padding: 0.8rem; color: var(--do-muted); font-weight: 700; } .do-history-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 0.65rem; } .do-history-head h2 { margin: 0.1rem 0 0; font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 1; letter-spacing: -0.02em; color: var(--do-text); } .do-history-head .do-section-note a { color: var(--do-accent); font-weight: 800; text-decoration: none; border-bottom: 1px dashed var(--do-accent); } .do-history-years { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.72rem; } .do-history-year { min-height: 28px; padding: 0 0.58rem; border-radius: 999px; border: 1px solid var(--do-border); background: var(--do-surface-2); color: var(--do-text-2); font-family: "JetBrains Mono", monospace; font-size: 0.68rem; font-weight: 800; box-shadow: none; } .do-history-year:hover { border-color: var(--do-accent); background: var(--do-accent-soft); color: var(--do-accent); } .do-history-year.is-active { border-color: var(--do-accent); background: var(--do-accent); color: #fff; } .do-history-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem 0.6rem; } .do-history-card { display: grid; grid-template-columns: 48px 1fr; gap: 0.52rem; min-height: 132px; padding: 0.54rem 0.62rem; background: var(--do-surface); border: 1px solid var(--do-border); border-radius: 10px; box-shadow: var(--do-shadow-sm); position: relative; } .do-history-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--do-border-2); } .do-history-logo { width: 48px; height: 48px; display: flex; align-items: flex-start; justify-content: center; } .do-history-logo img { width: 100%; height: 100%; object-fit: contain; } .do-history-body { min-width: 0; } .do-history-pick { display: flex; align-items: center; gap: 0.35rem; font-family: "JetBrains Mono", monospace; font-size: 0.9rem; font-weight: 850; line-height: 1; color: var(--do-text); } .do-history-via { display: inline-flex; align-items: center; min-height: 17px; padding: 0 0.34rem; border-radius: 999px; background: var(--do-acq-soft); border: 1px solid var(--do-acq-border); color: var(--do-acq); font-family: "Instrument Sans", sans-serif; font-size: 0.56rem; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; } .do-history-card h3 { margin: 0.16rem 0 0.18rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1rem; line-height: 1.12; font-weight: 850; letter-spacing: -0.01em; color: var(--do-text); } .do-history-card p { margin: 0; font-size: 0.73rem; line-height: 1.3; font-weight: 700; color: var(--do-text); overflow-wrap: anywhere; } .do-history-card p strong { color: var(--do-muted); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; } .do-history-card .do-flag { width: 14px; aspect-ratio: 3 / 2; height: auto; margin: 0 0.18rem 0 0.28rem; vertical-align: -2px; border-radius: 2px; } @media (max-width: 1280px) { .do-history-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 980px) { .do-history-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .do-history-head { align-items: flex-start; flex-direction: column; } .do-history-head .do-section-note { text-align: left; } } @media (max-width: 720px) { .do-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .do-history-details summary { align-items: flex-start; flex-direction: column; } .do-history-grid { grid-template-columns: 1fr; } } /* ----- Round 1 grid (the main mock-draft view) -------------------------- */ /* Condensed cards: ~4 per row on standard desktop, 5+ on wide monitors. Logo column trimmed and vertical rhythm tightened so the full top 32 fits on roughly two screens of scroll. */ .do-r1-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem 0.6rem; } .do-empty-state { grid-column: 1 / -1; padding: 1.1rem; border: 1px dashed var(--do-border-2); border-radius: 10px; background: var(--do-surface); color: var(--do-muted); font-weight: 750; text-align: center; } @media (min-width: 1480px) { .do-r1-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (max-width: 1200px) { .do-r1-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 880px) { .do-r1-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .do-r1-grid { grid-template-columns: 1fr; } } .do-card { position: relative; overflow: hidden; padding: 0.85rem 0.95rem 0.9rem; background: var(--do-surface); border: 1px solid var(--do-border); border-radius: 14px; box-shadow: var(--do-shadow-sm); transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; } /* Duotone: soft team-color wash + faint crest watermark, theme-aware via --do-surface so it reads in light and dark for any of the 32 team colors. */ .do-card.do-duotone { background: linear-gradient(155deg, color-mix(in srgb, var(--team-color) 14%, var(--do-surface)), var(--do-surface) 72%); } .do-card.do-duotone::before { content: ""; position: absolute; right: -24px; bottom: -24px; width: 132px; height: 132px; background: var(--team-logo) center / contain no-repeat; opacity: 0.07; pointer-events: none; } /* Dark grid: the 14% wash goes muddy on navy teams, so push the mix to 22%, lift the crest watermark, and add a 2px team-color rail along the top so Blues / Canucks / Jets stay tellable apart. */ [data-theme="dark"] .do-card.do-duotone { background: linear-gradient(155deg, color-mix(in srgb, var(--team-color) 22%, var(--do-surface)), var(--do-surface) 72%); } [data-theme="dark"] .do-card.do-duotone::before { opacity: 0.10; } [data-theme="dark"] .do-card.do-duotone::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: color-mix(in srgb, var(--team-color) 62%, #cfe0f5); pointer-events: none; z-index: 2; } .do-card:hover { box-shadow: var(--do-shadow); transform: translateY(-2px); border-color: color-mix(in srgb, var(--team-color) 32%, var(--do-border)); } .do-card-logo { position: absolute; top: 0.8rem; right: 0.9rem; width: 34px; height: 34px; object-fit: contain; z-index: 2; filter: drop-shadow(0 2px 4px rgba(10, 22, 40, 0.12)); } .do-card-body { position: relative; z-index: 1; display: flex; flex-direction: column; min-width: 0; } .do-card-head { display: flex; align-items: center; gap: 0.4rem; padding-right: 2.3rem; } .do-pickchip { display: inline-flex; align-items: center; font-family: "JetBrains Mono", monospace; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; color: #fff; background: color-mix(in srgb, var(--team-color) 88%, #0a1020); padding: 0.26rem 0.5rem; border-radius: 7px; white-space: nowrap; } .do-via { font-family: "Instrument Sans", sans-serif; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--do-acq); background: var(--do-acq-soft); border: 1px solid var(--do-acq-border); border-radius: 999px; padding: 0.08rem 0.4rem 0.08rem 0.26rem; display: inline-flex; align-items: center; gap: 0.2rem; cursor: help; } .do-via img { width: 12px; height: 12px; object-fit: contain; } .do-via em { font-style: normal; } .do-card-name { margin: 0.6rem 0 0.28rem; font-size: 1.18rem; font-weight: 800; color: var(--do-text); letter-spacing: -0.015em; line-height: 1.08; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .do-card-meta { display: flex; align-items: center; gap: 0.36rem; font-size: 0.74rem; font-weight: 650; color: var(--do-text-2); min-width: 0; } .do-card-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .do-card-meta .do-flag { width: 16px; aspect-ratio: 3 / 2; height: auto; border-radius: 2px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(10, 22, 40, 0.08); } .do-card-club { margin-top: 0.16rem; font-size: 0.7rem; color: var(--do-muted); overflow-wrap: anywhere; } .do-card-stats { margin-top: 0.7rem; padding-top: 0.55rem; border-top: 1px solid color-mix(in srgb, var(--team-color) 16%, var(--do-border)); display: flex; justify-content: space-between; gap: 0.3rem; font-family: "JetBrains Mono", monospace; align-items: flex-start; } .do-card-stats > span { display: flex; flex-direction: column; align-items: flex-start; font-size: 0.86rem; font-weight: 800; color: var(--do-text); white-space: nowrap; } .do-card-stats > span em { font-style: normal; color: var(--do-muted); font-weight: 800; font-size: 0.46rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.14rem; } .do-card-stats .do-pts, .do-card-stats .do-ppg { color: color-mix(in srgb, var(--team-color) 68%, var(--do-text)); } .do-card-stats .do-pts em, .do-card-stats .do-ppg em { color: color-mix(in srgb, var(--team-color) 50%, var(--do-muted)); } .do-card-empty { font-size: 0.8rem; color: var(--do-muted); font-style: italic; margin-top: 0.22rem; } .do-compare-btn { margin-top: 0.42rem; align-self: flex-start; display: inline-flex; align-items: center; gap: 0.32rem; min-height: 28px; padding: 0.28rem 0.52rem; border-radius: 999px; border: 1px solid var(--do-border); background: var(--do-surface-2); color: var(--do-text); font-family: "Instrument Sans", sans-serif; font-size: 0.68rem; font-weight: 850; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease, transform 0.14s ease; } .do-compare-btn:hover { border-color: var(--do-accent); background: var(--do-accent-soft); transform: translateY(-1px); } .do-compare-btn em { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--do-text); color: var(--do-surface); font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 0.68rem; line-height: 1; } .do-compare-btn.is-selected { border-color: var(--do-accent); background: var(--do-accent); color: #fff; } .do-compare-btn.is-selected em { background: #fff; color: var(--do-accent); } /* ----- Skeleton Round-1 cards (two-stage paint) -------------------------- Painted before any heavy JSON arrives; hydrated card-for-card in place. Line min-heights mirror the real card so the swap causes zero shift. */ .do-card.do-skel { --team-color: #64748b; cursor: default; pointer-events: none; } .do-card.do-skel::before { content: none; } .do-card.do-skel:hover { transform: none; box-shadow: var(--do-shadow-sm); border-color: var(--do-border); } .do-skel-mono { position: absolute; top: 0.8rem; right: 0.9rem; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--do-surface-2); border: 1px solid var(--do-border); font-family: "JetBrains Mono", monospace; font-size: 0.72rem; font-weight: 800; color: var(--do-muted); z-index: 2; } .do-skel .do-card-name { min-height: 20px; color: var(--do-text-2); } .do-skel .do-card-meta { min-height: 18px; } .do-skel .do-card-club { min-height: 17px; } .do-skel .do-card-stats { min-height: 45px; align-items: center; } .do-skel-btn { display: inline-flex; align-items: center; width: 96px; min-height: 28px; margin-top: 0.42rem; padding: 0 0.52rem; border-radius: 999px; border: 1px solid var(--do-border); background: var(--do-surface-2); } .do-skel-bar { display: inline-block; height: 0.7em; border-radius: 4px; background: linear-gradient(90deg, var(--do-surface-3), var(--do-border) 45%, var(--do-surface-3) 90%); background-size: 200% 100%; } [data-theme="dark"] .do-skel-bar { background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0.05) 90%); background-size: 200% 100%; } /* Shimmer sweep only when the user hasn't asked for reduced motion. */ @media (prefers-reduced-motion: no-preference) { .do-skel-bar { animation: do-skel-sweep 1.4s linear infinite; } } @keyframes do-skel-sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* Shared load-failure panel mounts inside the R1 grid — span every column. */ #do-r1-grid .hid-error-panel { grid-column: 1 / -1; } /* Trade-details collapsible (acquired picks) */ .do-card.is-acquired { cursor: pointer; } .do-card-details { grid-column: 1 / -1; margin-top: 0.4rem; padding: 0; background: var(--do-acq-soft); border: 1px solid var(--do-acq-border); border-radius: 8px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.25s ease, opacity 0.25s ease, padding 0.25s ease; } .do-card.is-open .do-card-details { max-height: 220px; padding: 0.6rem 0.75rem; opacity: 1; } .do-card-details p { margin: 0 0 0.32rem; font-size: 0.85rem; line-height: 1.45; color: var(--do-text); } .do-card-details p:last-child { margin: 0; } .do-card-details p strong { display: inline-block; font-size: 0.63rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--do-acq); margin-right: 0.45rem; } .do-card-details p em { font-style: normal; color: var(--do-muted); font-size: 0.8rem; margin-left: 0.4rem; } /* (The standalone "Round 1 ownership" leaderboard was removed in favor of the pivoted pick board, which already shows team × round capital.) */ /* ----- Rounds 2-7 accordion --------------------------------------------- */ .do-rounds { display: flex; flex-direction: column; gap: 0.55rem; } .do-round { background: var(--do-surface); border: 1px solid var(--do-border); border-radius: 10px; overflow: hidden; } .do-round > summary { list-style: none; cursor: pointer; display: grid; /* num · range · count · view-toggle · chevron */ grid-template-columns: auto 1fr auto auto auto; gap: 1rem; align-items: center; padding: 0.7rem 1rem; user-select: none; } .do-round > summary::-webkit-details-marker { display: none; } .do-round > summary::after { content: "▾"; font-size: 0.85rem; color: var(--do-muted); transition: transform 0.2s ease; margin-left: 0.2rem; } .do-round[open] > summary::after { transform: rotate(180deg); } .do-round-num { font-weight: 800; font-size: 0.92rem; color: var(--do-text); letter-spacing: -0.005em; } .do-round-range { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; font-weight: 700; color: var(--do-muted); } .do-round-count { font-size: 0.7rem; font-weight: 700; color: var(--do-muted); letter-spacing: 0.02em; } .do-round-grid { padding: 0.6rem 1rem 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.42rem; border-top: 1px solid var(--do-border); background: var(--do-surface-2); } .do-mini { display: grid; grid-template-columns: auto 22px 1fr; align-items: center; gap: 0.42rem; padding: 0.38rem 0.55rem; background: var(--do-surface); border: 1px solid var(--do-border); border-radius: 7px; font-size: 0.7rem; } .do-mini-no { font-family: "JetBrains Mono", monospace; font-weight: 800; font-size: 0.78rem; color: var(--do-text); letter-spacing: -0.02em; } .do-mini img { width: 25px; height: 25px; object-fit: contain; } .do-mini-team { font-weight: 700; color: var(--do-text); letter-spacing: 0.02em; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .do-mini.is-acquired .do-mini-team { color: var(--do-acq); } .do-mini-team em { font-style: normal; font-size: 0.56rem; font-weight: 600; color: var(--do-muted); margin-left: 0.18rem; letter-spacing: 0.02em; } /* Per-round view toggle (Compact ⇄ Full cards). Sits in the round summary. */ .do-round-view { display: inline-flex; align-items: stretch; background: var(--do-surface-2); border: 1px solid var(--do-border); border-radius: 999px; padding: 2px; gap: 2px; } .do-round-view-btn { appearance: none; border: none; background: transparent; color: var(--do-muted); font-family: inherit; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 999px; cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .do-round-view-btn:hover { color: var(--do-text); } .do-round-view-btn.is-on { background: var(--do-accent); color: #fff; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28); } /* When a round flips to full-card mode, the inner grid reuses the same .do-r1-grid layout. Wrap it in a padded body so it doesn't butt up against the summary border. */ .do-round-body { background: var(--do-surface-2); } .do-round[data-mode="full"] .do-round-body { padding: 0.7rem 1rem 1rem; border-top: 1px solid var(--do-border); } .do-round-full { /* Slightly tighter than the root R1 grid since rounds are usually deeper. */ gap: 0.5rem 0.55rem !important; } /* =========================================================================== Pick board — pivoted teams × rounds matrix. Teams across the top (sorted by R1 pick), rounds 1-7 down the side, totals row at the bottom. Single screen view of every team's pick capital. ======================================================================== */ .do-pickboard { background: var(--do-surface); border: 1px solid var(--do-border); border-radius: 12px; box-shadow: var(--do-shadow-sm); overflow: hidden; } /* ----- Toolbar above the matrix: mode toggle + legend ------------------- */ .do-pb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--do-border); background: var(--do-surface-2); flex-wrap: wrap; } .do-pb-mode { display: inline-flex; background: var(--do-bg); border: 1px solid var(--do-border); border-radius: 999px; padding: 2px; gap: 2px; } .do-pb-mode-btn { appearance: none; border: none; background: transparent; color: var(--do-muted); font-family: inherit; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.35rem 0.85rem; border-radius: 999px; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .do-pb-mode-btn:hover { color: var(--do-text); } .do-pb-mode-btn.is-on { background: var(--do-accent); color: #fff; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3); } .do-pb-legend { margin: 0; display: flex; gap: 0.85rem; font-size: 0.7rem; font-weight: 600; color: var(--do-muted); } .do-pb-legend span { display: inline-flex; align-items: center; gap: 0.36rem; } .do-pb-leg-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--do-border); } .do-pb-leg-dot.is-own { background: var(--do-accent-soft); border-color: color-mix(in srgb, var(--do-accent) 40%, var(--do-border)); } .do-pb-leg-dot.is-acq { background: var(--do-acq-soft); border-color: var(--do-acq-border); } /* ----- Scroll container ------------------------------------------------- */ .do-pb-scroll { /* Horizontal scroll kicks in below ~1180px viewport. The first column (round label) stays put via `position: sticky` so context is never lost. */ overflow-x: auto; } .do-pb-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-family: "JetBrains Mono", monospace; } /* ----- Sticky top-left corner ------------------------------------------- */ .do-pb-corner { width: 48px; background: var(--do-text); border-bottom: 1.5px solid var(--do-text); position: sticky; left: 0; z-index: 3; } /* ----- Column headers: just the team logo, big and centered ------------- */ .do-pb-th { width: calc((100% - 48px) / 32); min-width: 38px; padding: 0.5rem 0.18rem; text-align: center; background: var(--do-surface-2); border-bottom: 1.5px solid var(--do-border-2); border-left: 1px solid var(--do-border); cursor: help; } .do-pb-th:first-of-type { border-left: none; } .do-pb-logo { display: block; width: 32px; height: 32px; object-fit: contain; margin: 0 auto; transition: transform 0.12s ease; } .do-pb-th:hover .do-pb-logo { transform: scale(1.12); } /* ----- Row labels: dark blocks down the left edge ----------------------- */ .do-pb-rowlabel { width: 48px; padding: 0.45rem 0.4rem; text-align: center; background: var(--do-text); border-right: 1px solid var(--do-text); border-bottom: 1px solid color-mix(in srgb, var(--do-text) 70%, var(--do-bg)); font-family: "Instrument Sans", sans-serif; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--do-bg); position: sticky; left: 0; z-index: 2; } [data-theme="dark"] .do-pb-rowlabel { color: var(--do-text); background: rgba(255,255,255,0.08); border-right-color: rgba(255,255,255,0.08); border-bottom-color: rgba(255,255,255,0.04); } [data-theme="dark"] .do-pb-corner { background: rgba(255,255,255,0.08); border-bottom-color: rgba(255,255,255,0.16); } /* ----- Data cells ------------------------------------------------------- */ .do-pb-cell { padding: 0.34rem 0.18rem; text-align: center; border-left: 1px solid var(--do-border); border-bottom: 1px solid var(--do-border); vertical-align: middle; min-height: 38px; transition: background 0.12s ease; } .do-pb-cell.is-empty { color: var(--do-muted-2); font-size: 1rem; font-weight: 400; } /* === Counts mode ======================================================== Each filled cell shows the number of picks. Background heatmap intensifies with the count (1 → flat, 2 → soft tint, 3+ → stronger). Acquired-heavy cells get an orange wash. */ .do-pb-cell.is-counts { cursor: help; } .do-pb-count { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 0.95rem; font-weight: 800; letter-spacing: -0.02em; color: var(--do-text); line-height: 1; } .do-pb-cell.is-heat-1 { background: color-mix(in srgb, var(--do-accent) 6%, transparent); } .do-pb-cell.is-heat-2 { background: color-mix(in srgb, var(--do-accent) 14%, transparent); } .do-pb-cell.is-heat-3 { background: color-mix(in srgb, var(--do-accent) 24%, transparent); } .do-pb-cell.is-heat-2 .do-pb-count { font-size: 1.02rem; } .do-pb-cell.is-heat-3 .do-pb-count { font-size: 1.08rem; color: var(--do-accent); } .do-pb-cell.has-acq.is-heat-1 { background: color-mix(in srgb, var(--do-acq) 10%, transparent); } .do-pb-cell.has-acq.is-heat-2 { background: color-mix(in srgb, var(--do-acq) 18%, transparent); } .do-pb-cell.has-acq.is-heat-3 { background: color-mix(in srgb, var(--do-acq) 28%, transparent); } .do-pb-cell.is-all-acq .do-pb-count { color: var(--do-acq); } /* Small "*" superscript on acquired-bearing cells so the orange is decoded. */ .do-pb-cell.has-acq .do-pb-count::after, .do-pb-cell.is-all-acq .do-pb-count::after { content: "*"; font-size: 0.62rem; color: var(--do-acq); margin-left: 0.06em; vertical-align: super; font-weight: 800; } /* === Pick #s mode ====================================================== Expanded: one chip per pick, stacked when multi. */ .do-pb-cell.has-multi { padding: 0.22rem 0.14rem; line-height: 1.05; } .do-pb-chip { display: inline-block; padding: 0.14rem 0.4rem; background: var(--do-surface-2); border: 1px solid var(--do-border); border-radius: 999px; font-family: "JetBrains Mono", monospace; font-size: 0.66rem; font-weight: 800; letter-spacing: -0.01em; color: var(--do-text); white-space: nowrap; cursor: help; } .do-pb-chip.is-acq { background: var(--do-acq-soft); border-color: var(--do-acq-border); color: var(--do-acq); } .do-pb-cell.has-multi .do-pb-chip { display: block; margin: 1.5px auto; width: fit-content; } /* ----- Totals row ------------------------------------------------------- */ .do-pb-totalrow { background: var(--do-surface-2); } .do-pb-totalrow .do-pb-rowlabel { background: var(--do-accent); color: #fff; border-bottom: none; } .do-pb-totalcell { font-family: "JetBrains Mono", monospace; font-size: 0.92rem; font-weight: 800; color: var(--do-text); letter-spacing: -0.02em; background: var(--do-surface-2); border-bottom: none; padding: 0.55rem 0.18rem; border-top: 1.5px solid var(--do-border-2); } .do-pb-totalcell.is-loaded { color: var(--do-own); font-size: 1rem; } .do-pb-totalcell.is-zero { color: var(--do-muted-2); } /* Cell hover lights up just the one you're pointing at. */ .do-pb-table tbody td:hover { background: var(--do-accent-soft); } .do-pb-table tbody td.is-counts:hover .do-pb-count { color: var(--do-accent); } @media (max-width: 1180px) { .do-pb-table { min-width: 1100px; } } @media (max-width: 720px) { .do-pb-table { min-width: 1040px; } .do-pb-th { padding: 0.4rem 0.1rem; } .do-pb-logo { width: 25px; height: 25px; } .do-pb-count { font-size: 0.86rem; } } .do-foot { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--do-border); color: var(--do-muted); font-size: 0.78rem; text-align: center; } .do-foot p { margin: 0; } .do-foot a { color: var(--do-accent); font-weight: 800; text-decoration: none; border-bottom: 1px dashed var(--do-accent); } /* ========================================================================== Compare tray - bottom sheet for a small side-by-side player decision. ======================================================================== */ .do-compare { position: fixed; left: clamp(0.8rem, 3vw, 2.4rem); right: clamp(0.8rem, 3vw, 2.4rem); bottom: 0.8rem; z-index: 70; transform: translateY(calc(100% + 1.2rem)); opacity: 0; pointer-events: none; transition: transform 0.26s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.18s ease; } .do-compare[aria-hidden="false"] { transform: translateY(0); opacity: 1; pointer-events: auto; } .do-compare-inner { max-width: 1180px; margin: 0 auto; background: color-mix(in srgb, var(--do-surface) 94%, transparent); border: 1px solid var(--do-border-2); border-radius: 14px; box-shadow: 0 22px 60px rgba(15, 23, 42, 0.2); overflow: hidden; backdrop-filter: blur(18px); } [data-theme="dark"] .do-compare-inner { background: color-mix(in srgb, var(--do-bg-2) 92%, transparent); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58); } .do-compare-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(180px, auto) auto; align-items: center; gap: 0.75rem; padding: 0.62rem 0.72rem; } .do-compare-title { display: flex; align-items: baseline; gap: 0.42rem; white-space: nowrap; } .do-compare-title strong { font-family: "Newsreader", Georgia, serif; font-size: 1.12rem; font-weight: 650; color: var(--do-text); } .do-compare-title span, .do-compare-note { font-size: 0.72rem; font-weight: 800; color: var(--do-muted); } .do-compare-chips { display: flex; align-items: center; gap: 0.36rem; overflow: hidden; min-width: 0; } .do-compare-chip { min-width: 0; max-width: 190px; display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.28rem 0.42rem 0.28rem 0.55rem; border: 1px solid var(--do-border); border-radius: 999px; background: var(--do-surface-2); color: var(--do-text); cursor: pointer; } .do-compare-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.76rem; font-weight: 850; } .do-compare-chip em { font-style: normal; color: var(--do-muted); font-weight: 900; } .do-compare-chip:hover { border-color: var(--do-acq); background: var(--do-acq-soft); } .do-compare-note { margin: 0; text-align: right; } .do-compare-actions { display: inline-flex; gap: 0.36rem; justify-content: flex-end; } .do-compare-action, .do-compare-open-card { min-height: 32px; padding: 0.38rem 0.7rem; border-radius: 999px; border: 1px solid var(--do-border); background: var(--do-surface-2); color: var(--do-text); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; } .do-compare-action:hover, .do-compare-open-card:hover { border-color: var(--do-accent); background: var(--do-accent-soft); } .do-compare-action.is-primary { border-color: var(--do-text); background: var(--do-text); color: var(--do-surface); } .do-compare-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.55rem; max-height: min(58vh, 520px); overflow: auto; padding: 0 0.72rem 0.72rem; border-top: 1px solid var(--do-border); } .do-compare-card { position: relative; margin-top: 0.72rem; background: var(--do-surface); border: 1px solid var(--do-border); border-radius: 10px; padding: 0.72rem; min-width: 0; } .do-compare-card header { padding-right: 1.8rem; border-bottom: 1px solid var(--do-border); padding-bottom: 0.55rem; margin-bottom: 0.55rem; } .do-compare-card header p { margin: 0 0 0.2rem; color: var(--do-accent); font-family: "JetBrains Mono", monospace; font-size: 0.72rem; font-weight: 900; } .do-compare-card h3 { margin: 0 0 0.32rem; color: var(--do-text); font-size: 1.04rem; font-weight: 900; line-height: 1.05; } .do-compare-card header span { display: flex; align-items: center; gap: 0.3rem; color: var(--do-muted); font-size: 0.74rem; font-weight: 750; line-height: 1.25; } .do-compare-flag { width: 16px; aspect-ratio: 3 / 2; height: auto; border-radius: 2px; flex: 0 0 auto; } .do-compare-remove { position: absolute; top: 0.48rem; right: 0.48rem; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--do-border); background: var(--do-surface-2); color: var(--do-muted); font-weight: 900; cursor: pointer; } .do-compare-remove:hover { border-color: var(--do-acq); background: var(--do-acq-soft); color: var(--do-acq); } .do-compare-card dl { display: grid; gap: 0.42rem; margin: 0 0 0.65rem; } .do-compare-card dl div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 0.5rem; align-items: baseline; } .do-compare-card dt { color: var(--do-muted); font-size: 0.58rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; } .do-compare-card dd { margin: 0; color: var(--do-text); font-family: "Newsreader", Georgia, serif; font-size: 0.88rem; font-weight: 600; line-height: 1.25; } .do-compare-open-card { width: 100%; } @media (max-width: 900px) { .do-compare-bar { grid-template-columns: 1fr auto; } .do-compare-chips, .do-compare-note { grid-column: 1 / -1; } .do-compare-note { text-align: left; } .do-compare-actions { grid-column: 2; grid-row: 1; } } @media (max-width: 560px) { .do-compare { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; } .do-compare-bar { grid-template-columns: 1fr; } .do-compare-actions { grid-column: 1; grid-row: auto; justify-content: stretch; } .do-compare-action { flex: 1; } .do-compare-panel { grid-template-columns: 1fr; max-height: 62vh; } } /* ----- Print-friendly: no shadows, condensed ---------------------------- */ @media print { .do-nav, .do-board-controls, .do-rounds, .do-foot, .do-drawer, .do-drawer-backdrop, .do-compare { display: none; } .do-card { break-inside: avoid; box-shadow: none; } } /* =========================================================================== Player drawer — slides in from the right when a draft card is clicked. Mirrors the editorial drawer pattern from /board/, scoped to the do-* set. ======================================================================== */ .do-card { cursor: pointer; } .do-card:hover { border-color: var(--do-accent); } .do-drawer-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 80; backdrop-filter: blur(2px); } .do-drawer { position: fixed; top: 0; right: 0; width: min(720px, 96vw); height: 100vh; background: var(--do-surface); border-left: 1px solid var(--do-border); box-shadow: -28px 0 60px rgba(15, 23, 42, 0.22); z-index: 81; overflow-y: auto; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.5, 0, 0.2, 1); } .do-drawer[aria-hidden="false"] { transform: translateX(0); } .do-drawer-inner { padding: 1.6rem 1.8rem 4rem; } [data-theme="dark"] .do-drawer { background: var(--do-bg-2); box-shadow: -28px 0 60px rgba(0, 0, 0, 0.55); } /* ----- Header (close · eyebrow · name · deck) --------------------------- */ .do-d-head { position: relative; border-bottom: 2px solid var(--do-text); padding-bottom: 0.9rem; margin-bottom: 1.2rem; } .do-d-close { position: absolute; top: -0.3rem; right: -0.3rem; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--do-border); background: var(--do-surface); color: var(--do-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: all 0.15s ease; } .do-d-close:hover { background: var(--do-accent); border-color: var(--do-accent); color: #fff; } .do-d-eyebrow { margin: 0; font-family: "Instrument Sans", sans-serif; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--do-accent); } .do-d-head h2 { margin: 0.32rem 0 0.3rem; font-family: "Newsreader", Georgia, serif; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; color: var(--do-text); } .do-d-deck { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-family: "Instrument Sans", sans-serif; font-size: 0.92rem; font-weight: 600; color: var(--do-text); } .do-d-deck em { font-style: normal; font-weight: 800; font-size: 0.7rem; padding: 0.1rem 0.45rem; background: var(--do-surface-2); border: 1px solid var(--do-border); border-radius: 999px; } .do-d-flag { width: 18px; aspect-ratio: 3 / 2; height: auto; border-radius: 2px; display: inline-block; } /* ----- Hero (photo + bio) ---------------------------------------------- */ .do-d-hero { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1.3rem; margin-bottom: 1.6rem; align-items: start; } @media (max-width: 600px) { .do-d-hero { grid-template-columns: 1fr; } } .do-d-photo { width: 150px; height: 180px; border-radius: 8px; background-size: cover; background-position: center 15%; background-color: var(--do-surface-2); border: 1px solid var(--do-border); } .do-d-photo.is-empty { background: linear-gradient(135deg, var(--do-surface-2), var(--do-accent-soft)); } .do-d-bio { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem 1rem; margin: 0; } .do-d-bio > div { display: flex; flex-direction: column; gap: 0.1rem; } .do-d-bio dt { font-family: "Instrument Sans", sans-serif; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--do-muted); } .do-d-bio dd { margin: 0; display: inline-flex; align-items: center; gap: 0.45rem; font-family: "Newsreader", Georgia, serif; font-size: 0.96rem; font-weight: 500; color: var(--do-text); } .do-d-team-logo { width: 24px; height: 24px; object-fit: contain; } /* ----- Sections (trade · ranks · stats) -------------------------------- */ .do-d-section { margin-bottom: 1.6rem; } .do-d-section h3 { margin: 0 0 0.6rem; font-family: "Newsreader", Georgia, serif; font-size: 1.2rem; font-weight: 600; font-style: italic; color: var(--do-text); border-bottom: 1px solid var(--do-border); padding-bottom: 0.35rem; } .do-d-section h3 em { font-style: normal; font-family: "Instrument Sans", sans-serif; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--do-muted); margin-left: 0.4rem; } .do-d-trade { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: 0.96rem; line-height: 1.55; color: var(--do-text); } .do-d-trade em { font-style: normal; color: var(--do-muted); font-family: "JetBrains Mono", monospace; font-size: 0.82rem; margin-left: 0.3rem; } .do-d-condition { margin: 0.55rem 0 0; padding: 0.5rem 0.75rem; background: var(--do-acq-soft); border: 1px solid var(--do-acq-border); border-radius: 8px; font-size: 0.85rem; color: var(--do-text); } .do-d-condition strong { font-family: "Instrument Sans", sans-serif; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--do-acq); margin-right: 0.4rem; } .do-d-empty { margin: 0; font-family: "Newsreader", Georgia, serif; font-style: italic; color: var(--do-muted); } /* ----- Ranks across sources -------------------------------------------- */ .do-d-rank-summary { display: flex; flex-wrap: wrap; gap: 1rem; padding: 0.6rem 0.8rem; background: var(--do-surface-2); border: 1px solid var(--do-border); border-radius: 8px; margin-bottom: 0.7rem; font-family: "Instrument Sans", sans-serif; font-size: 0.72rem; font-weight: 700; color: var(--do-muted); text-transform: uppercase; letter-spacing: 0.08em; } .do-d-rank-summary b { font-family: "JetBrains Mono", monospace; font-size: 0.88rem; font-weight: 800; color: var(--do-text); letter-spacing: -0.01em; margin-left: 0.25rem; } /* Compact rank grid — 3-4 columns of single-line cells. No per-cell bars (the summary strip already gives the at-a-glance picture). Cuts the section to roughly half its previous height. */ .do-d-rank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.28rem 0.32rem; } .do-d-rank-cell { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.3rem 0.55rem; background: var(--do-surface); border: 1px solid var(--do-border); border-radius: 6px; cursor: help; transition: border-color 0.12s ease, background 0.12s ease; min-height: 28px; } .do-d-rank-cell:hover { border-color: var(--do-accent); } .do-d-rank-cell.is-best { background: var(--do-accent-soft); border-color: var(--do-accent); } .do-d-rank-label { display: inline-flex; align-items: center; gap: 0.28rem; font-family: "Instrument Sans", sans-serif; font-size: 0.7rem; font-weight: 700; color: var(--do-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .do-d-rank-label small { color: var(--do-muted); font-size: 0.52rem; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; } .do-d-rank-val { font-family: "JetBrains Mono", monospace; font-size: 0.86rem; font-weight: 800; letter-spacing: -0.02em; color: var(--do-text); } .do-d-rank-cell.is-best .do-d-rank-val { color: var(--do-accent); } .do-d-rank-star { font-style: normal; font-size: 0.7rem; color: var(--do-acq); line-height: 1; flex: 0 0 auto; } [data-theme="dark"] .do-d-rank-cell { background: rgba(255, 255, 255, 0.04); } /* ----- Per-season stat tables (same shape as /board/ drawer) ----------- */ .do-d-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .do-d-table thead th { text-align: left; padding: 0.35rem 0.5rem; font-family: "Instrument Sans", sans-serif; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--do-muted); border-bottom: 1px solid var(--do-border); } .do-d-table thead th.num { text-align: right; } .do-d-table tbody td { padding: 0.42rem 0.5rem; border-bottom: 1px solid var(--do-border); color: var(--do-text); font-family: "Newsreader", Georgia, serif; vertical-align: baseline; } .do-d-table .num { text-align: right; font-family: "JetBrains Mono", monospace; font-weight: 700; } .do-d-t-season { font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 500; color: var(--do-text-2); } .do-d-t-league { font-family: "Newsreader", Georgia, serif; font-weight: 600; } .do-d-t-team { color: var(--do-muted); font-style: italic; } /* ----- Stats line ------------------------------------------------------ */ .do-d-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; } @media (max-width: 480px) { .do-d-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .do-d-stats > div { display: flex; flex-direction: column; align-items: center; padding: 0.55rem 0.5rem; background: var(--do-surface-2); border: 1px solid var(--do-border); border-radius: 8px; } .do-d-stats dt { font-family: "Instrument Sans", sans-serif; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--do-muted); } .do-d-stats dd { margin: 0.18rem 0 0; font-family: "JetBrains Mono", monospace; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--do-text); } [data-theme="dark"] .do-d-stats > div { background: rgba(255, 255, 255, 0.04); } /* ----- Draft history (redesigned): year dropdown + Duotone Round-1 cards ----- */ .do-history-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.8rem;margin:0 0 1rem;} .do-history-yearpick{display:flex;flex-direction:column;gap:.3rem;} .do-history-yearpick span{font-size:.62rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase;color:var(--do-muted);} .do-history-yearpick select{min-height:42px;min-width:210px;border:1px solid var(--do-border);border-radius:10px;background:var(--do-surface);color:var(--do-text);font-family:inherit;font-size:.95rem;font-weight:800;letter-spacing:-.01em;padding:0 .85rem;box-shadow:var(--do-shadow-sm);outline:none;cursor:pointer;} .do-history-yearpick select:focus{border-color:var(--do-accent);box-shadow:0 0 0 3px var(--do-accent-soft);} .do-history-loading{color:var(--do-muted);font-size:.9rem;padding:1rem 0;} /* ----- Round 1 -> rankings cross-link + draft-history callout ----- */ .do-r1-after{margin:1rem 0 0;font-size:.85rem;color:var(--do-muted);} .do-r1-after a{color:var(--do-accent);font-weight:800;text-decoration:none;border-bottom:1px dashed var(--do-accent);} .do-r1-after a:hover{border-bottom-style:solid;} .do-history-callout{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 1.2rem;border:1px solid var(--do-border);border-radius:14px;background:var(--do-surface);box-shadow:var(--do-shadow-sm);text-decoration:none;color:var(--do-text);transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease;} .do-history-callout:hover{border-color:var(--do-accent);box-shadow:var(--do-shadow);transform:translateY(-1px);} .do-history-callout-text{display:flex;flex-direction:column;gap:.12rem;min-width:0;} .do-history-callout strong{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;color:var(--do-text);} .do-history-callout-text span:last-child{font-size:.82rem;color:var(--do-muted);} .do-history-callout-go{color:var(--do-accent);font-weight:800;white-space:nowrap;} /* ===== Draft Day Live overlay (data/draft_results_2026.json) ===== */ .do-live-banner{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:0 0 1rem;padding:.6rem .9rem;border-radius:12px;border:1px solid var(--border);border-left:3px solid #dc2626;background:var(--surface);font-size:.82rem;color:var(--muted)} .do-live-banner.is-final{border-left-color:#0e9f6e} .do-live-bug{font-family:var(--mono,monospace);font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text)} .do-live-count{font-size:.92rem;font-weight:800;color:var(--text)} .do-live-dot{width:9px;height:9px;border-radius:999px;background:#dc2626;flex:0 0 auto;box-shadow:0 0 0 3px var(--red-bg,rgba(220,38,38,.18))} .do-live-banner.is-live .do-live-dot{animation:doLivePulse 1.6s ease-in-out infinite} .do-live-banner.is-final .do-live-dot{background:#0e9f6e;box-shadow:0 0 0 3px var(--green-bg,rgba(16,185,129,.18));animation:none} @keyframes doLivePulse{0%,100%{opacity:1}50%{opacity:.35}} .do-actual{display:flex;align-items:center;gap:.4rem;margin-top:.45rem;padding:.3rem .55rem;border-radius:8px;background:color-mix(in srgb, var(--team-color, #1d4ed8) 18%, var(--do-surface, var(--surface)));border:1px solid color-mix(in srgb, var(--team-color, #1d4ed8) 55%, transparent);box-shadow:var(--shadow-xs);font-size:.78rem;font-weight:700;color:var(--text)} .do-actual em{font-style:normal;font-family:var(--mono,monospace);font-size:.56rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--blue,#2563eb)} /* ===== Hero countdown chip ===== */ /* Broadcast-scoreboard countdown band in the hero (chosen from a 5-concept scratch page). Always-dark unit — same family as the team-pipeline / season-database hero bands — so it pops on the light hero and holds in dark. */ .do-cd{flex:0 0 auto;margin-top:1.3rem;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:14px;transition:transform .15s} .do-cd[hidden]{display:none} .do-cd:hover{transform:translateY(-1px)} .do-cd:focus-visible{outline:2px solid var(--do-accent,#2563eb);outline-offset:4px} .do-cd-hint{display:block;text-align:right;font-family:var(--mono,"JetBrains Mono",monospace);font-size:.5rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--do-muted);margin:0 0 .4rem} .do-cd-hint em{font-style:normal;color:var(--do-accent,#2563eb)} .do-cd-rings{display:flex;gap:.5rem} .do-cd-ring{position:relative;width:72px;height:72px} .do-cd-ring svg{width:100%;height:100%;transform:rotate(-90deg)} .do-cd-ring .trk{fill:none;stroke:color-mix(in srgb,var(--do-accent,#2563eb) 16%,transparent);stroke-width:6} .do-cd-ring .arc{fill:none;stroke:var(--do-accent,#2563eb);stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--do-accent,#2563eb) 55%,transparent));transition:stroke-dashoffset .5s ease} .do-cd-ring.sec .arc{stroke:#e3a008;filter:drop-shadow(0 0 4px rgba(227,160,8,.55))} .do-cd-ring .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.04rem} .do-cd-ring .ctr b{font-family:var(--mono,"JetBrains Mono",monospace);font-size:1.22rem;font-weight:800;line-height:1;color:var(--do-text);font-variant-numeric:tabular-nums} .do-cd-ring .ctr span{font-family:var(--mono,"JetBrains Mono",monospace);font-size:.42rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--do-muted)} .do-cd-led{display:none} .do-cd[data-mode="led"] .do-cd-led{display:grid;position:fixed;inset:0;place-items:center;z-index:200;padding:1rem;background:rgba(2,4,10,.64);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:do-led-fade .22s ease;cursor:pointer} .do-cd[data-mode="led"],.do-cd[data-mode="led"]:hover{transform:none} .do-cd-led-panel{position:relative;overflow:hidden;border-radius:18px;padding:1.6rem 2rem 1.5rem;width:min(560px,92vw);background:radial-gradient(120% 150% at 50% 0%,#16120a,#070707);box-shadow:0 44px 90px -34px rgba(0,0,0,.9),0 0 0 1px rgba(255,180,60,.12);animation:do-led-pop .28s cubic-bezier(.2,.9,.3,1)} .do-cd-led-panel::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 3px);pointer-events:none;mix-blend-mode:overlay} .do-cd-led-h{display:block;text-align:center;font-family:var(--mono,"JetBrains Mono",monospace);font-size:.78rem;font-weight:800;letter-spacing:.34em;text-transform:uppercase;color:#ffb43b;text-shadow:0 0 12px rgba(255,140,0,.6);margin-bottom:1.1rem} .do-cd-led-row{display:flex;align-items:flex-start;justify-content:center;gap:.45rem} .do-cd-led-row .g{display:flex;flex-direction:column;align-items:center;gap:.45rem} .do-cd-led-row .led{font-family:var(--mono,"JetBrains Mono",monospace);font-size:3.4rem;line-height:1;font-weight:800;color:#ffd24a;text-shadow:0 0 7px #ff9d00,0 0 20px rgba(255,120,0,.75);font-variant-numeric:tabular-nums} .do-cd-led-row .g span:not(.led){font-family:var(--mono,"JetBrains Mono",monospace);font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#a8702a} .do-cd-led-row .colon{font-family:var(--mono,"JetBrains Mono",monospace);font-size:2.6rem;font-weight:800;color:#ff9d00;text-shadow:0 0 10px rgba(255,120,0,.7);margin-top:.3rem} .do-cd-led-close{display:block;text-align:center;margin-top:1.2rem;font-family:var(--mono,"JetBrains Mono",monospace);font-size:.54rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#7a5a2a} .do-cd[data-mode="led"] .do-cd-hint em{color:#ffb43b} .do-cd.is-final .do-cd-hint em{color:#34d399} @keyframes do-led-fade{from{opacity:0}to{opacity:1}} @keyframes do-led-pop{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}} @media (max-width:560px){.do-cd{margin-top:.6rem}.do-cd-hint{text-align:left}.do-cd-led-row .led{font-size:2.6rem}.do-cd-led-row .colon{font-size:2rem}} /* ===== Round 1 pick ribbon ===== */ .do-ribbon{display:flex;gap:3px;margin:0 0 .8rem;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px} .do-ribbon-cell{flex:1 0 26px;min-width:26px;height:24px;border:0;border-radius:5px;background:color-mix(in srgb,var(--c,#1d4ed8) 24%,var(--do-surface,#fff));border-bottom:3px solid var(--c,#1d4ed8);color:var(--do-text-2,#334155);font-family:var(--mono,monospace);font-size:.58rem;font-weight:800;cursor:pointer;transition:transform .1s ease,background .12s ease;padding:0} .do-ribbon-cell:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--c,#1d4ed8) 42%,var(--do-surface,#fff))} .do-ribbon-cell:focus-visible{outline:2px solid var(--do-accent,#1d4ed8);outline-offset:2px} .do-ribbon-cell.is-filled{background:var(--c,#1d4ed8);color:#fff} @media (prefers-reduced-motion: reduce){.do-ribbon-cell,.do-ribbon-cell:hover{transition:none;transform:none}} /* Jump flash when arriving from the ribbon */ .do-card.is-jump{animation:doJumpFlash 1.2s ease} @media (prefers-reduced-motion: reduce){.do-card.is-jump{animation:none;outline:2px solid var(--do-accent,#1d4ed8)}} @keyframes doJumpFlash{0%{box-shadow:0 0 0 3px var(--do-accent,#1d4ed8)}100%{box-shadow:0 0 0 0 rgba(29,78,216,0)}} /* ===== vs-consensus delta chip (non-consensus sources) ===== */ .do-delta{display:inline-flex;align-items:center;gap:.1rem;font-family:var(--mono,monospace);font-size:.6rem;font-weight:800;padding:.1rem .38rem;border-radius:999px;line-height:1} .do-delta.is-up{color:#0e9f6e;background:rgba(16,185,129,.12)} .do-delta.is-down{color:#dc2626;background:rgba(239,35,60,.1)}