/* Dibs Market Board look, ported from the Claude Design project
   "Dibs Market Board" (Modernist system: Archivo, square corners, 2px rules,
   one red accent). Tokens live on .dmb-app[data-theme]; board.html and
   batch.html both wear them so the two pages read as one product. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

.dmb-app { --font-heading: "Archivo", system-ui, sans-serif; --font-body: "Archivo", system-ui, sans-serif;
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent); }
.dmb-app[data-theme="light"] { color-scheme: light; --color-bg: #f3f2f2; --color-surface: #eae9e9; --color-text: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent); --color-accent: #ec3013; --color-accent-600: #dd2b0f; --color-accent-700: #ae1800;
  --dmb-text-2: #605d5d; --dmb-text-3: #6b6767; --dmb-hair: #d7d3d3; --dmb-up: #1a7f45; --dmb-down: #c8321f; --dmb-flat: #9b9797;
  --dmb-up-tint: color-mix(in srgb, #1a7f45 10%, transparent); --dmb-down-tint: color-mix(in srgb, #c8321f 10%, transparent);
  --dmb-g0: #7d7979; --dmb-g1: #0f8a7c; --dmb-g2: #1f7fc4; --dmb-g3: #7c4fd3; --dmb-g4: #b07c00;
  --dmb-g5: #26736c; --dmb-g6: #21649a; --dmb-g7: #3458b2; --dmb-g8: #7a46a8; --dmb-g9: #a44173; --dmb-g10: #9b641d; --dmb-sunk: #eae9e9; }
.dmb-app[data-theme="dark"] { color-scheme: dark; --color-bg: #161413; --color-surface: #201e1d; --color-text: #ece7e4;
  --color-divider: color-mix(in srgb, #ece7e4 34%, transparent); --color-accent: #ff563c; --color-accent-600: #ff7a63; --color-accent-700: #ff9783;
  --dmb-text-2: #b3aca8; --dmb-text-3: #969089; --dmb-hair: #312e2c; --dmb-up: #5fc98a; --dmb-down: #f2705c; --dmb-flat: #7d7979;
  --dmb-up-tint: color-mix(in srgb, #5fc98a 13%, transparent); --dmb-down-tint: color-mix(in srgb, #f2705c 13%, transparent);
  --dmb-g0: #a39c98; --dmb-g1: #4fbcae; --dmb-g2: #63b3f5; --dmb-g3: #b48fef; --dmb-g4: #e6b84a;
  --dmb-g5: #3fa89a; --dmb-g6: #4e9ed2; --dmb-g7: #7896e2; --dmb-g8: #ba83e0; --dmb-g9: #db79ac; --dmb-g10: #d4a654; --dmb-sunk: #1b1918; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
.dmb-app { min-height: 100vh; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body);
  font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; position: relative; }
.dmb-app a { color: var(--color-accent); text-underline-offset: 3px; } .dmb-app a:hover { color: var(--color-accent-600); }
.dmb-app h2, .dmb-app h3 { font-family: var(--font-heading); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; margin: 0; }
.dmb-app :focus { outline: none; } .dmb-app :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.heavy { font-family: var(--font-heading); font-weight: 800; }

/* nav */
.dmb-nav { display: flex; align-items: center; gap: 20px; padding: 8px 20px; border-bottom: 2px solid var(--color-divider); }
.dmb-brand { font-family: var(--font-heading); font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 8px; margin-right: 8px; }
.dmb-brand i { display: inline-block; width: 8px; height: 8px; background: var(--color-accent); }
.dmb-nav a { color: inherit; text-decoration: none; font-size: 14px; } .dmb-nav a:hover, .dmb-nav a[aria-current="page"] { color: var(--color-accent); }
.dmb-nav .grow { flex: 1; } .dmb-nav .last { color: var(--dmb-text-3); font-size: 12px; }

/* buttons, inputs, segmented control */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 12px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent; padding: 5px 10px; border-radius: 0; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); } .btn-primary:hover:not(:disabled) { background: var(--color-accent-600); }
.btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover:not(:disabled) { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-lg { font-size: 14px; padding: 8px 14px; }
.input { min-height: 0; padding: 6px 8px; font: inherit; font-size: 13px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 0; }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; user-select: none; }
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-opt:has(input:checked) { background: var(--color-text); color: var(--color-bg); }
.dmb-lens .seg-opt:has(input:checked), .dmb-sheet-group:nth-child(-n+3) .seg-opt:has(input:checked) { background: var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* board: filters + stats */
.dmb-board { padding: 0 20px 20px; }
.dmb-filters { display: flex; align-items: center; gap: 8px; padding: 10px 0; min-height: 44px; border-bottom: 2px solid var(--color-divider); flex-wrap: wrap; }
/* 260 in the design; wider when a set's full name needs it, never clipped. */
.dmb-set-picker { min-width: 260px; width: auto; font-weight: 700; } .dmb-search { width: 200px; }
.dmb-filters .grow { flex: 1; }
.dmb-stats { display: flex; font-size: 12px; color: var(--dmb-text-2); align-items: baseline; }
.dmb-stats > span { padding: 0 14px; border-left: 1px solid var(--dmb-hair); } .dmb-stats > span:last-child { padding-right: 0; }
.dmb-stats b { font-family: var(--font-heading); font-weight: 800; font-size: 15px; color: var(--color-text); }
.dmb-stats .dim { color: var(--dmb-text-3); }
.dmb-legend { display: inline-flex; gap: 10px; } .dmb-legend b { font-size: inherit; }
.g-up { color: var(--dmb-up); font-weight: 800; } .g-down { color: var(--dmb-down); font-weight: 800; }
.g-flat { color: var(--dmb-flat); font-weight: 800; } .g-none { color: var(--dmb-text-3); font-weight: 800; }
#note { color: var(--dmb-down); padding: 12px 0; display: flex; align-items: center; gap: 10px; } #note:empty { display: none; }
#note.busy { color: var(--dmb-text-2); animation: dmb-pulse 1.4s ease-in-out infinite; }

/* matrix */
.dmb-board-scroll { overflow: auto; max-height: calc(100vh - 110px); background: var(--color-bg); }
.dmb-matrix { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; min-width: 1100px; }
.dmb-matrix th { position: sticky; top: 0; z-index: 2; background: var(--color-bg); text-align: left; padding: 8px 10px; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dmb-text-2); border-bottom: 2px solid var(--color-divider); font-weight: 600; }
.dmb-matrix th:first-child { width: 300px; left: 0; z-index: 3; padding-left: 0; border-right: 1px solid var(--dmb-hair); }
.dmb-matrix th span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--dmb-text-3); }
.dmb-row { height: 72px; }
.dmb-rowhead { position: sticky; left: 0; z-index: 1; background: var(--color-bg); padding: 0 12px 0 0; border-bottom: 1px solid var(--dmb-hair);
  border-right: 1px solid var(--dmb-hair); vertical-align: middle; }
.dmb-matrix tbody tr:hover td { background-color: color-mix(in srgb, var(--color-text) 3%, var(--color-surface)); }
.dmb-rowhead-in { display: flex; align-items: center; gap: 10px; }
.dmb-rowname { min-width: 0; flex: 1; }
/* Card photo. Empty: a dashed frame on sunken ground, a slot waiting to be
   filled, in the same language as an empty bucket. */
.dmb-thumb { width: 40px; height: 58px; flex: none; background: var(--dmb-sunk); border: 1px dashed var(--dmb-text-3); overflow: hidden; }
.dmb-thumb.filled { border: 1px solid var(--dmb-hair); }
.dmb-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dmb-name-btn { all: unset; cursor: pointer; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
  font-family: var(--font-heading); font-weight: 800; font-size: 13px; line-height: 1.2; color: var(--color-text); }
.dmb-name-btn.cont { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--dmb-text-2); }
.dmb-name-btn:hover { color: var(--color-accent); } .dmb-name-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.dmb-rowmeta { font-size: 11px; color: var(--dmb-text-3); margin-top: 1px; display: flex; gap: 6px; } .dmb-rowmeta b { font-weight: 600; color: var(--dmb-text-2); }
.dmb-cell { padding: 0; border-bottom: 1px solid var(--dmb-hair); border-left: 1px solid var(--dmb-hair); vertical-align: middle; }
/* One line per edition. The tag holds the left edge so the medians of the
   1st Edition and the Unlimited print line up under each other. */
.dmb-line { all: unset; box-sizing: border-box; display: grid; width: 100%;
  grid-template-columns: 30px minmax(0, 1fr) 62px 26px; gap: 8px; align-items: baseline;
  padding: 7px 10px; min-height: 32px; cursor: pointer; color: var(--color-text); }
.dmb-line + .dmb-line { border-top: 1px dotted var(--dmb-hair); }
.dmb-line:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.dmb-line:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.dmb-line.picked { box-shadow: inset 0 0 0 2px var(--color-accent); }
.dmb-ed { font-size: 10px; letter-spacing: .06em; color: var(--dmb-text-3); }
.dmb-median { font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: -.01em; text-align: right; }
.dmb-line.thin .dmb-median { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--dmb-text-2); letter-spacing: 0; }
.dmb-line.suspect .dmb-median { text-decoration: line-through; color: var(--dmb-text-3); }
.dmb-line.suspect .dmb-ed::after { content: " ⚠"; }
.dmb-median.dash { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--dmb-text-3); }
.dmb-trend { font-size: 12px; color: var(--dmb-text-2); white-space: nowrap; text-align: right; }
.dmb-line.thin .dmb-trend { color: var(--dmb-text-3); }
.dmb-n { font-size: 11px; color: var(--dmb-text-2); text-align: right; }
.dmb-line.thin .dmb-n { color: var(--dmb-text-3); }
.dmb-gap { display: flex; align-items: center; gap: 8px; height: 100%; color: var(--dmb-text-3); font-size: 12px; }
.dmb-gap i { width: 12px; height: 12px; border: 1px dashed var(--dmb-text-3); flex: none; }

/* card chart */
.dmb-chart { margin: 12px 0; background: var(--color-surface); border: 1px solid var(--dmb-hair); position: relative; }
.dmb-chart[hidden] { display: none; }
.dmb-chart-head { display: flex; align-items: center; gap: 20px; padding: 12px 16px; border-bottom: 1px solid var(--dmb-hair); flex-wrap: wrap; }
.dmb-chart-head .title { font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.2; }
.dmb-chart-head .sub { font-size: 12px; color: var(--dmb-text-2); } .dmb-chart-head .grow { flex: 1; }
.dmb-chart-legend { display: flex; gap: 16px; font-size: 12px; flex-wrap: wrap; } .dmb-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dmb-chart-legend i, .dmb-key i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .dmb-chart-legend em { font-style: normal; color: var(--dmb-text-3); }
.dmb-key { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; color: var(--dmb-text-2); } .dmb-key span { display: inline-flex; align-items: center; gap: 5px; }
.dmb-key i.full { background: var(--color-text); } .dmb-key i.open { border: 2px solid var(--color-text); }
.dmb-chart-svg { display: block; width: 100%; height: auto; }
.dmb-chart-svg .grid { stroke: var(--dmb-hair); stroke-width: 1; } .dmb-chart-svg .month { stroke: var(--dmb-hair); stroke-width: 1; stroke-dasharray: 1 3; }
.dmb-chart-svg text { fill: var(--dmb-text-3); font-size: 11px; font-family: var(--font-body); } .dmb-chart-svg text.med { font-weight: 600; }
.dmb-dot { stroke-width: 2; cursor: pointer; } .dmb-dot:hover, .dmb-dot.hot { stroke: var(--color-text) !important; }
.dmb-tooltip { position: absolute; transform: translate(-50%, -100%); background: var(--color-text); color: var(--color-bg); padding: 8px 10px;
  font-size: 12px; line-height: 1.35; max-width: 300px; pointer-events: none; z-index: 5; }
.dmb-tooltip[hidden] { display: none; } .dmb-tooltip .p { font-weight: 800; font-size: 14px; } .dmb-tooltip .p span { font-weight: 400; opacity: .8; }
.dmb-tooltip .d { opacity: .85; } .dmb-tooltip .t { opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* empty / thin set */
.dmb-empty { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--dmb-hair); background: var(--color-surface); }
.dmb-empty[hidden] { display: none; } .dmb-empty > div { padding: 28px 24px; } .dmb-empty > div:first-child { border-right: 1px solid var(--dmb-hair); }
.dmb-empty h3 { font-size: 22px; margin: 8px 0 10px; } .dmb-empty p { color: var(--dmb-text-2); max-width: 460px; text-wrap: pretty; margin: 0 0 16px; }
.dmb-empty dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 12px 0 0; font-size: 12px; color: var(--dmb-text-2); }
.dmb-empty dt { color: var(--color-text); font-weight: 600; } .dmb-empty dd { margin: 0; }

/* bucket detail drawer */
.dmb-detail { position: fixed; top: 0; right: 0; height: 100vh; width: 440px; max-width: 100vw; background: var(--color-surface);
  border-left: 2px solid var(--color-divider); z-index: 30; overflow: auto; box-shadow: var(--shadow-lg); }
.dmb-detail[hidden] { display: none; }
.dmb-detail-head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--dmb-hair); }
.dmb-detail-head > div { flex: 1; min-width: 0; } .dmb-detail-head .kicker { color: var(--color-accent); }
.dmb-detail-head h3 { font-size: 20px; margin: 4px 0 2px; line-height: 1.15; } .dmb-detail-head .sub { color: var(--dmb-text-2); font-size: 12px; }
.dmb-detail-stats { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--dmb-hair); }
.dmb-detail-stats > div { padding: 14px 20px; } .dmb-detail-stats > div:nth-child(odd) { border-right: 1px solid var(--dmb-hair); }
.dmb-detail-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--dmb-hair); }
.dmb-detail-stats .kicker { color: var(--dmb-text-3); } .dmb-detail-stats .big { font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 1.1; margin-top: 2px; }
.dmb-detail-stats .mid { font-family: var(--font-heading); font-weight: 800; font-size: 20px; line-height: 1.1; margin-top: 2px; }
.dmb-detail-stats .mid small { font-size: 12px; font-weight: 400; color: var(--dmb-text-2); font-family: var(--font-body); }
.dmb-detail-stats .sub { color: var(--dmb-text-2); font-size: 12px; }
.dmb-ladder { padding: 14px 20px; border-bottom: 1px solid var(--dmb-hair); }
.dmb-ladder .head, .dmb-sales .head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dmb-text-3); margin-bottom: 10px; }
.dmb-ladder .head span:last-child { letter-spacing: 0; text-transform: none; }
.dmb-ladder .rows { display: grid; grid-template-columns: 52px 1fr 64px 44px; gap: 8px 10px; align-items: center; font-size: 12px; }
.dmb-ladder .bar { height: 10px; background: var(--dmb-hair); position: relative; } .dmb-ladder .bar i { position: absolute; left: 0; top: 0; height: 10px; background: var(--dmb-text-2); }
.dmb-ladder .bar i.on { background: var(--color-accent); } .dmb-ladder .g { color: var(--dmb-text-2); } .dmb-ladder .g.on, .dmb-ladder .m.on { color: var(--color-text); font-weight: 800; }
.dmb-ladder .m { text-align: right; } .dmb-ladder .x { color: var(--dmb-text-2); }
.dmb-sales { padding: 14px 0 24px; } .dmb-sales .head { padding: 0 20px; margin-bottom: 8px; }
.dmb-app a.dmb-sale, .dmb-sale { display: grid; grid-template-columns: 84px 72px 16px 1fr; gap: 10px; align-items: center; padding: 8px 20px;
  border-top: 1px solid var(--dmb-hair); color: var(--color-text); text-decoration: none; font-size: 12px; }
.dmb-app a.dmb-sale:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); color: var(--color-text); }
.dmb-sale .date { color: var(--dmb-text-2); } .dmb-sale .price { font-weight: 800; font-family: var(--font-heading); font-size: 13px; text-align: right; }
.dmb-sale .v { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--color-text); justify-self: center; } .dmb-sale .v.full { background: var(--color-text); }
.dmb-sale .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--dmb-text-2); }
.dmb-sales .none { padding: 16px 20px; color: var(--dmb-text-2); }

/* pull page */
.dmb-pull { padding: 0 24px 24px; }
.dmb-pull-head { display: flex; align-items: flex-end; gap: 24px; padding: 18px 0 14px; border-bottom: 2px solid var(--color-divider); flex-wrap: wrap; }
.dmb-pull-head .kicker { color: var(--color-accent); } .dmb-pull-head h2 { font-size: 24px; margin: 4px 0 0; }
.dmb-pull-head .nums { display: flex; gap: 28px; font-size: 12px; color: var(--dmb-text-2); padding-bottom: 4px; }
.dmb-pull-head .nums b { color: var(--color-text); font-family: var(--font-heading); font-weight: 800; font-size: 16px; } .dmb-pull-head .grow { flex: 1; }
.dmb-progress { height: 2px; background: var(--dmb-hair); position: relative; } .dmb-progress i { position: absolute; left: 0; top: 0; height: 2px; background: var(--color-accent); transition: width .4s; }
.dmb-pull-setup { display: flex; gap: 8px; align-items: center; padding: 12px 0; flex-wrap: wrap; } .dmb-pull-setup .lab { color: var(--dmb-text-2); font-size: 12px; margin: 0 2px 0 10px; }
.dmb-pull-setup .lab:first-child { margin-left: 0; }
.dmb-pull-scroll { overflow-x: auto; max-width: 100%; }
.dmb-pull-table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; margin-top: 8px; background: var(--color-surface); border: 1px solid var(--dmb-hair); }
.dmb-pull-table th { text-align: left; padding: 10px 12px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dmb-text-2); border-bottom: 2px solid var(--color-divider); font-weight: 600; }
.dmb-pull-table th:first-child { width: 380px; padding-left: 14px; border-right: 1px solid var(--dmb-hair); }
.dmb-pull-table tr { height: 44px; } .dmb-pull-table td { padding: 0 12px; border-bottom: 1px solid var(--dmb-hair); border-left: 1px solid var(--dmb-hair); font-size: 13px; }
.dmb-pull-table td:first-child { padding: 0 14px; border-left: 0; border-right: 1px solid var(--dmb-hair); } .dmb-pull-table tr:last-child td { border-bottom: 0; }
.dmb-pull-table tr.now td { background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
.dmb-pull-table .card { font-weight: 800; font-family: var(--font-heading); } .dmb-pull-table .meta { color: var(--dmb-text-2); font-size: 12px; margin-left: 6px; }
.p-new b { font-weight: 800; font-family: var(--font-heading); } .p-new small { color: var(--dmb-text-3); font-size: 12px; }
.p-none { color: var(--dmb-text-2); } .p-wait, .p-skip { color: var(--dmb-text-3); } .p-err { color: var(--dmb-down); }
.p-now { color: var(--color-accent); font-weight: 600; }
@keyframes dmb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .dmb-blink { animation: dmb-pulse 1.4s ease-in-out infinite; }

/* site only */
.dmb-fineprint { color: var(--dmb-text-3); font-size: 11px; max-width: 900px; margin: 16px 0 0; }
.dmb-app a.dmb-brand { color: inherit; text-decoration: none; }

/* ─── the lens, sort and view toggle ─────────────────────────────────────── */
.dmb-lens { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border: 1px solid var(--color-accent); }
.dmb-lens[hidden], .dmb-viewtoggle[hidden], .dmb-stats[hidden], .dmb-count[hidden] { display: none; }
.dmb-lens-tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-bg);
  background: var(--color-accent); font-weight: 700; padding: 0 7px; align-self: stretch; display: flex; align-items: center; }
.dmb-lens-btn { border-color: var(--color-accent); } .dmb-lens-btn b { color: var(--color-accent); }
.dmb-sort { width: 150px; } .dmb-search { width: 150px; }
.dmb-count { font-size: 12px; color: var(--dmb-text-2); }
.dmb-count b { font-family: var(--font-heading); font-weight: 800; font-size: 15px; color: var(--color-text); }
.dmb-viewtoggle { display: flex; border: 1px solid var(--dmb-hair); margin-left: 4px; }
.dmb-viewtoggle button { all: unset; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; color: var(--dmb-text-2); }
.dmb-viewtoggle button + button { border-left: 1px solid var(--dmb-hair); }
.dmb-viewtoggle button:hover { color: var(--color-text); }
.dmb-viewtoggle button[aria-pressed="true"] { background: var(--color-text); color: var(--color-bg); }
.dmb-viewtoggle button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* ─── browse grid ────────────────────────────────────────────────────────── */
.dmb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 12px; }
.dmb-grid[hidden] { display: none; }
@media (max-width: 1180px) { .dmb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .dmb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dmb-tile { display: flex; flex-direction: column; padding: 12px; background: var(--color-surface);
  border: 1px solid var(--dmb-hair); cursor: pointer; min-width: 0; outline: none; }
.dmb-tile:hover { border-color: var(--dmb-text-3); }
.dmb-tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.dmb-tile-main { display: flex; gap: 12px; flex: 1; }
.dmb-tile-img { width: 112px; aspect-ratio: 150 / 218; flex: none; background: var(--dmb-sunk);
  border: 1px dashed var(--dmb-text-3); box-sizing: border-box; overflow: hidden; }
.dmb-tile-img.filled { border: 1px solid var(--dmb-hair); }
.dmb-tile-img img, .dmb-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dmb-tile--empty .dmb-tile-img { opacity: .45; }
.dmb-tile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dmb-tile-name { all: unset; cursor: pointer; text-align: left; font-family: var(--font-heading); font-weight: 800;
  font-size: 15px; line-height: 1.2; letter-spacing: -.01em; color: var(--color-text);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.dmb-tile-name:hover { color: var(--color-accent); }
.dmb-tile-name:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.dmb-tile-sub { font-size: 12px; color: var(--dmb-text-2); margin-top: 2px; }
.dmb-tile-lens { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--dmb-text-2);
  margin-top: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dmb-only { background: var(--color-text); color: var(--color-bg); padding: 1px 4px; }
.dmb-tile-hero { font-family: var(--font-heading); font-weight: 800; font-size: 24px; line-height: 1.05; letter-spacing: -.01em; margin-top: 1px; }
.dmb-tile--thin .dmb-tile-hero { font-weight: 400; color: var(--dmb-text-2); }
.dmb-tile-hero.empty { display: flex; gap: 8px; align-items: center; margin-top: 8px; color: var(--dmb-text-2);
  font-size: 13px; line-height: 1.3; font-family: var(--font-body); font-weight: 400; letter-spacing: 0; }
.dmb-tile-hero.empty i { width: 12px; height: 12px; border: 1px dashed var(--dmb-text-3); flex: none; }
.dmb-tile-trend { font-size: 12px; color: var(--dmb-text-2); margin-top: 6px; }
.dmb-tile-trend small { color: var(--dmb-text-3); }
.dmb-tile--thin .dmb-tile-trend { color: var(--dmb-text-3); }
.dmb-alt-btn { all: unset; cursor: pointer; color: var(--color-accent); font-size: 12px; font-weight: 600; margin-top: 8px; text-align: left; }
.dmb-alt-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* ─── card page ──────────────────────────────────────────────────────────── */
.dmb-cardpage { padding: 0 20px 32px; }
.dmb-cardpage[hidden] { display: none; }
.dmb-crumb { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 12px;
  color: var(--dmb-text-2); border-bottom: 1px solid var(--dmb-hair); }
.dmb-crumb .sep { color: var(--dmb-text-3); } .dmb-crumb .grow { flex: 1; }
.dmb-cardpage-head { display: flex; gap: 24px; padding: 20px 0; border-bottom: 2px solid var(--color-divider); }
.dmb-card-img { width: 150px; aspect-ratio: 150 / 218; flex: none; background: var(--dmb-sunk);
  border: 1px dashed var(--dmb-text-3); box-sizing: border-box; overflow: hidden; }
.dmb-card-img.filled { border: 1px solid var(--dmb-hair); }
.dmb-cardpage-title { flex: 1; min-width: 0; }
.dmb-cardpage-title .kicker { color: var(--dmb-text-2); }
.dmb-cardpage h1 { font-family: var(--font-heading); font-weight: 800; font-size: 36px; line-height: 1.05;
  letter-spacing: -.02em; margin: 6px 0 16px; text-wrap: balance; }
.dmb-cardpage-editions { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.dmb-edition-card { border: 1px solid var(--dmb-hair); background: var(--color-surface); padding: 12px 14px; }
.dmb-edition-head { display: flex; align-items: baseline; gap: 8px; }
.dmb-edition-head b { font-family: var(--font-heading); font-weight: 800; font-size: 14px; }
.dmb-edition-head small { font-size: 11px; color: var(--dmb-text-3); }
.dmb-ladder-rows { display: grid; grid-template-columns: 52px 1fr 78px 40px; gap: 6px 10px; align-items: center; font-size: 12px; margin-top: 10px; }
.dmb-ladder-rows .g { all: unset; cursor: pointer; color: var(--dmb-text-2); }
.dmb-ladder-rows .g.on, .dmb-ladder-rows .m.on { color: var(--color-text); font-weight: 800; }
.dmb-ladder-rows .g:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.dmb-ladder-rows .bar { height: 10px; background: var(--dmb-hair); position: relative; }
.dmb-ladder-rows .bar i { position: absolute; left: 0; top: 0; height: 10px; background: var(--dmb-text-2); }
.dmb-ladder-rows .bar i.on { background: var(--color-accent); }
.dmb-ladder-rows .m { text-align: right; } .dmb-ladder-rows .m small { color: var(--dmb-text-3); font-weight: 400; }
.dmb-ladder-rows .x { color: var(--dmb-text-2); }
.dmb-cardpage-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
  padding: 16px 0; border-bottom: 1px solid var(--dmb-hair); }
.dmb-bucket-card { border: 1px solid var(--dmb-hair); background: var(--color-surface); padding: 12px 14px; min-width: 0; }
.dmb-bucket-card .head { display: flex; justify-content: space-between; gap: 8px; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dmb-text-2); }
.dmb-bucket-card .head small { letter-spacing: 0; text-transform: none; color: var(--dmb-text-3); }
.dmb-bucket-card .hero { font-family: var(--font-heading); font-weight: 800; font-size: 24px; line-height: 1.05; letter-spacing: -.01em; margin-top: 6px; }
.dmb-bucket-card.thin .hero { font-weight: 400; color: var(--dmb-text-2); }
.dmb-bucket-card .trend { font-size: 12px; color: var(--dmb-text-2); margin-top: 3px; }
.dmb-bucket-card .trend small { color: var(--dmb-text-3); }
.dmb-bucket-card .sales-line { font-size: 12px; color: var(--color-text); margin-top: 6px; font-weight: 600; }
.dmb-bucket-card .evidence { font-size: 11px; color: var(--dmb-text-2); margin-top: 2px; }
.dmb-cardpage .dmb-chart { margin: 16px 0 0; }
.dmb-cardpage-sales { margin-top: 20px; }
.dmb-cardpage-sales .head { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dmb-text-2); padding-bottom: 8px; border-bottom: 2px solid var(--color-divider); }
.dmb-cardpage-sales .head .grow { flex: 1; }
.dmb-sales-filter { letter-spacing: 0; text-transform: none; font-size: 12px; }
.dmb-app a.dmb-sale.wide, .dmb-sale.wide { grid-template-columns: 84px 84px 92px 96px 16px 1fr; padding: 7px 0; }
.dmb-sale .grade { display: inline-flex; align-items: center; gap: 6px; }
.dmb-sale .grade i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dmb-sale .ed { color: var(--dmb-text-2); }

/* ─── phone: the lens lives in a sheet ───────────────────────────────────── */
.dmb-sheet { position: fixed; left: 0; right: 0; bottom: 0; background: var(--color-surface);
  border-top: 2px solid var(--color-divider); z-index: 41; padding: 16px 16px 24px;
  display: flex; flex-direction: column; gap: 14px; font-size: 13px; box-shadow: var(--shadow-lg); }
.dmb-sheet[hidden] { display: none; }
.dmb-sheet-head { display: flex; align-items: center; gap: 10px; }
.dmb-sheet-head b { font-family: var(--font-heading); font-weight: 800; font-size: 16px; }
.dmb-sheet-head .grow { flex: 1; }
.dmb-sheet-group .kicker { color: var(--dmb-text-2); margin-bottom: 6px; }
.dmb-sheet-group .seg, .dmb-sheet-group select { display: flex; width: 100%; }
.dmb-sheet-group .seg-opt { flex: 1; justify-content: center; }
.dmb-lens-btn[hidden] { display: none; }
@media (max-width: 720px) {
  .dmb-tile-main { flex-direction: column; }
  .dmb-tile-img { width: 100%; }
  .dmb-cardpage-head { flex-direction: column; }
  .dmb-card-img { width: 140px; }
  .dmb-cardpage h1 { font-size: 26px; }
  .dmb-app a.dmb-sale.wide, .dmb-sale.wide { grid-template-columns: 74px 72px 1fr; }
  .dmb-sale.wide .grade, .dmb-sale.wide .ed, .dmb-sale.wide .v { display: none; }
  .dmb-filters { gap: 6px; }
}
/* .seg and .dmb-stats set their own display, which would beat [hidden]. */
.dmb-filters [hidden], .dmb-sheet [hidden] { display: none !important; }
/* The count, sort and view toggle travel together when the row wraps. */
.dmb-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* On the card page the chart is part of the page, not a panel you opened:
   the card's name is already the headline and there is nothing to close. */
.dmb-cardpage .dmb-chart-head .title, .dmb-cardpage .dmb-chart-head .btn { display: none; }
.dmb-cardpage .dmb-chart-head .sub::before { content: "Every sale · "; color: var(--dmb-text-3); }
@media (max-width: 720px) {
  .dmb-nav { gap: 12px; padding: 8px 12px; flex-wrap: nowrap; }
  .dmb-nav a, .dmb-brand { white-space: nowrap; font-size: 13px; }
  .dmb-nav .last { display: none; }            /* the board itself dates the data */
  .dmb-set-picker { min-width: 0; width: 100%; }
  .dmb-search { width: auto; flex: 1; min-width: 120px; }
  .dmb-detail { width: 100%; border-left: 0; }
}

/* ─── tiles as links, evidence, skeletons, card-page switch ──────────────── */
.dmb-app a.dmb-tile, .dmb-app a.dmb-tile:hover { color: var(--color-text); text-decoration: none; }
.dmb-tile-name { cursor: inherit; }
a.dmb-tile:hover .dmb-tile-name { color: var(--color-accent); }
.dmb-tile-evidence { font-size: 12px; color: var(--dmb-text-2); margin-top: auto; padding-top: 8px; }
.dmb-tile--thin .dmb-tile-evidence { color: var(--dmb-text-3); }
.dmb-alt { color: var(--color-accent); font-size: 12px; font-weight: 600; margin-top: 8px; }
.dmb-skel { background: var(--dmb-hair); animation: dmb-pulse 1.4s ease-in-out infinite; }
.dmb-tile--skeleton { cursor: default; } .dmb-tile--skeleton .dmb-tile-img { border: 0; }
.dmb-intro { margin: 12px 0 0; padding: 10px 12px; background: var(--color-surface); border: 1px solid var(--dmb-hair);
  border-left: 3px solid var(--color-accent); color: var(--dmb-text-2); font-size: 13px; max-width: 980px; }
.dmb-intro[hidden] { display: none; } .dmb-intro b { color: var(--color-text); } .dmb-intro .btn { margin-left: 8px; }
.dmb-cardpage-bar { display: flex; align-items: center; gap: 12px; padding-top: 16px; }
.dmb-cardpage-bar .kicker { color: var(--dmb-text-2); }
.dmb-cardpage-buckets { padding-top: 10px; }
button.dmb-bucket-card { all: unset; box-sizing: border-box; display: block; cursor: pointer; border: 1px solid var(--dmb-hair);
  background: var(--color-surface); padding: 12px 14px; min-width: 0; color: var(--color-text); }
button.dmb-bucket-card:hover { border-color: var(--dmb-text-3); }
button.dmb-bucket-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.dmb-bucket-card.picked { box-shadow: inset 0 0 0 2px var(--color-accent); }
/* a matrix cell with nothing in any edition: tags only, no stack of dashes */
.dmb-cell.void .dmb-median.dash { visibility: hidden; }
.dmb-cell.void .dmb-ed { opacity: .55; }
.dmb-legend .dim { color: var(--dmb-text-3); }

/* DIBS-066: how badly a bucket needs sales, beside its last-run cell. */
small.need { color: var(--dmb-text-3); font-size: 11px; }

/* Contenders: one ranked row per grade bucket, the evidence in columns. */
.dmb-edge-note { max-width: 980px; margin: 4px 0 14px; font-size: 13px; line-height: 1.5; color: var(--dmb-text-2); }
.dmb-edge-note b { color: var(--color-text); }
.dmb-edge-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1100px; font-size: 13px; }
.dmb-edge-table th { position: sticky; top: 0; z-index: 1; background: var(--color-bg); text-align: left; padding: 8px 10px; font-size: 11px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dmb-text-2); border-bottom: 1px solid var(--dmb-hair); white-space: nowrap; }
.dmb-edge-table td { padding: 8px 10px; border-bottom: 1px solid var(--dmb-hair); vertical-align: middle; }
.dmb-edge-table td small { display: block; font-size: 11px; color: var(--dmb-text-3); margin-top: 2px; }
.dmb-edge-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dmb-edge-table td.strong { font-family: var(--font-heading); font-weight: 800; font-size: 15px; }
.dmb-edge-table td.rank { font-family: var(--font-heading); font-weight: 800; color: var(--dmb-text-3); width: 28px; }
.dmb-edge-table td small.warn { max-width: 190px; white-space: normal; }
.dmb-edge-row { cursor: pointer; }
.dmb-edge-row:hover td, .dmb-edge-row:focus-visible td { background-color: color-mix(in srgb, var(--color-text) 4%, var(--color-surface)); }
.dmb-edge-row:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.dmb-edge-row.out td:not(.rank) { opacity: .62; }
.dmb-edge-table td.card { min-width: 250px; }
.dmb-edge-table td.card .dmb-rowmeta span { white-space: nowrap; }
.dmb-edge-group td { padding: 18px 10px 6px; font-size: 12px; color: var(--dmb-text-2); border-bottom: 1px solid var(--dmb-text-3); }
.dmb-edge-group td b { font-family: var(--font-heading); font-weight: 800; font-size: 13px; color: var(--color-text); margin-right: 6px; }
.dmb-edge-table td.target b { font-family: var(--font-heading); font-weight: 800; font-size: 15px; }

/* Market analysis: a report over every set's comps, then an explorer. */
.dmb-mkt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--dmb-hair); border: 1px solid var(--dmb-hair); margin: 6px 0 8px; }
.dmb-mkt-kpis > div { background: var(--color-surface); padding: 12px 16px; min-width: 0; }
.dmb-mkt-kpis .kicker { color: var(--dmb-text-3); }
.dmb-mkt-kpis .big { font-family: var(--font-heading); font-weight: 800; font-size: 26px; line-height: 1.1; margin-top: 2px; }
.dmb-mkt-kpis small { display: block; font-size: 12px; color: var(--dmb-text-2); margin-top: 2px; }
.dmb-mkt-section { margin-top: 28px; }
.dmb-mkt-section > .kicker { color: var(--color-accent); }
.dmb-mkt-section > h3 { font-size: 20px; margin: 2px 0 10px; }
.dmb-edge-table.dmb-mkt-summary { min-width: 720px; }
.dmb-mkt-summary td.strong:first-child { font-size: 13px; }
.dmb-mkt-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; padding: 10px 0 12px; border-bottom: 1px solid var(--dmb-hair); }
.dmb-mkt-field { display: flex; flex-direction: column; gap: 4px; }
.dmb-mkt-field .kicker { color: var(--dmb-text-3); }
.dmb-mkt-field input.input { width: 96px; }
.dmb-mkt-check .seg-opt { padding: 6px 12px; }
.dmb-mkt-check .seg-opt input { position: static; opacity: 1; width: auto; height: auto; pointer-events: auto; margin: 0; }
.dmb-mkt-check .seg-opt:has(input:checked) { background: transparent; color: inherit; }
.dmb-mkt-line { font-size: 13px; color: var(--dmb-text-2); margin: 12px 0 0; }
.dmb-mkt-line b { color: var(--color-text); font-family: var(--font-heading); font-weight: 800; }
.dmb-mkt-pad { padding: 16px; margin: 0; }
.dmb-mkt-chart circle.under { fill: var(--dmb-up); fill-opacity: .85; cursor: pointer; }
.dmb-mkt-chart circle.over { fill: var(--dmb-text-3); fill-opacity: .45; cursor: pointer; }
.dmb-mkt-chart circle:hover { stroke: var(--color-text); stroke-width: 1.5; }
.dmb-mkt-chart polyline.cap { fill: none; stroke: var(--color-accent); stroke-width: 2; }
.dmb-mkt-chart line.grid.one { stroke: var(--dmb-text-3); }
@media (max-width: 720px) {
  .dmb-mkt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dmb-mkt-field input.input { width: 80px; }
}
/* The report's tables flow with the page instead of scrolling in a box. */
.dmb-mkt .dmb-board-scroll { max-height: none; }
.dmb-mkt-field { min-width: 0; max-width: 100%; }
.dmb-mkt-field select.input { max-width: 100%; }
/* The empty state (and the members-only panel) stacks on a phone. */
@media (max-width: 720px) {
  .dmb-empty { grid-template-columns: 1fr; }
  .dmb-empty > div:first-child { border-right: 0; border-bottom: 1px solid var(--dmb-hair); }
}
/* Link-buttons: `.dmb-app a` would otherwise paint their text accent-on-accent. */
.dmb-app a.btn { text-decoration: none; }
.dmb-app a.btn-primary, .dmb-app a.btn-primary:hover { color: var(--color-bg); }
.dmb-app a.btn-secondary, .dmb-app a.btn-secondary:hover { color: var(--color-text); }