/* board.css — styles for the redesigned views drawn by board.js on top of opendoor-board.html (phase 2: Claim list). */
#v-claim.on { grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; }
.q-top { align-items: end; }
.q-top .right { align-items: center; flex-wrap: wrap; }
.q-top .ctl label { font-size: 10px; }
.q-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; min-height: 0; }
@media (max-width: 1100px) { .q-body { grid-template-columns: 1fr; } }
.q-scroll { min-height: 0; overflow: auto; }
.q-card { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: auto; min-height: 0; height: auto; max-height: none; padding: 12px 14px; display: grid; gap: 10px; align-content: start; border-left: 1px solid var(--line); }
.q-table { font-size: 12.5px; width: 100%; }
.q-table th { position: sticky; top: 0; z-index: 1; }
.q-table td { white-space: normal; vertical-align: middle; }
.q-table tr.q-class td { background: var(--line-soft); font-weight: 600; padding: 6px 10px; border-top: 2px solid var(--line); }
.q-table tr.q-class .q-act { font-weight: 400; color: var(--fg2); margin-left: 8px; }
.q-table tr.q-class .q-n { font-weight: 500; color: var(--fg2); margin-left: 6px; font-variant-numeric: tabular-nums; }
.q-table tr.q-group td { background: color-mix(in srgb, var(--surface) 55%, var(--line-soft)); }
.q-table tr.q-row, .q-table tr.q-group { cursor: pointer; }
.q-table tr.q-row:hover td, .q-table tr.q-group:hover td { background: var(--line-soft); }
.q-table tr.sel td { background: var(--req-soft) !important; }
.q-table tr.q-member td:nth-child(2) { padding-left: 22px; }
.q-table tr.ours td, .q-table tr.claimed td { opacity: 0.7; }
.q-table td.ck { width: 26px; padding-right: 0; }
.q-table td.num { white-space: nowrap; }
.q-table .caret { display: inline-block; width: 12px; color: var(--muted); font-size: 11px; }
.q-table .lcid { margin-right: 6px; }
.q-table .svcchips { gap: 3px; }
.q-table .cls { margin-right: 0; }
.q-table .q-vendor { color: var(--fg2); }
.q-table .q-vendor b { color: var(--fg); font-weight: 600; }
.q-table .q-empty td { color: var(--fg2); padding: 14px 10px; }
.q-table .lcid.newroute { --c: var(--sN); } .q-table .lcid.ext { --c: var(--sE); } .q-table .lcid.seed { --c: var(--sS); }
.q-bar { display: flex; gap: 12px; align-items: end; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.q-bar .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.q-bar #q-ticked { font-weight: 600; align-self: center; }
.q-bar #q-ticked small { font-weight: 400; color: var(--fg2); }
.q-bar #rq-copied { align-self: center; }
.armed { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.armed::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.armed.real { color: var(--bad); } .armed.real::before { background: var(--bad); }
.armed.dry { color: var(--fg2); }
.pop { position: relative; }
.pop > summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 6px; padding: 5px 10px; background: var(--surface); font: inherit; white-space: nowrap; }
.pop > summary::-webkit-details-marker { display: none; }
.pop > summary::after { content: " ▾"; color: var(--muted); font-size: 11px; }
.pop[open] > summary { border-color: var(--fg); }
.pop-body { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(720px, calc(100vw - 48px)); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 36px rgba(0,0,0,0.18); padding: 12px 14px; display: grid; gap: 10px; max-height: 70vh; overflow: auto; }
.pop-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; }
.pop-h { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; align-self: center; }
.pop-body .lc-rules { border-style: solid; }
#q-status { gap: 6px; align-items: center; }
#q-status .chip { cursor: default; }
#q-status .chip.warn { border-color: var(--warn); }
#q-status .chip.bad { border-color: var(--bad); }
.tchip.f { --t: var(--fg2); font-weight: 600; }
.tchip.f[aria-pressed="false"] { text-decoration: none; }
.tchip.todo { --t: var(--fg); }
.tchip.todo[aria-pressed="false"] { text-decoration: none; }
.tchip.todo.ask { --t: var(--warn); } .tchip.todo.claim { --t: var(--l4); } .tchip.todo.check { --t: var(--focus); } .tchip.todo.chase { --t: var(--bad); }
.q-mini { width: 100%; height: 170px; background: var(--land); border-radius: 6px; display: block; }
.q-mini text { font-size: 10px; fill: var(--fg2); font-family: var(--font); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.q-mini .route { fill: none; stroke: var(--l4); stroke-width: 2; stroke-dasharray: 5 4; }
.q-mini .link { fill: none; stroke: var(--fg2); stroke-width: 1.5; stroke-dasharray: 3 3; }
.q-mini .scale { stroke: var(--fg2); stroke-width: 1.5; }
.q-card .reqhead .addr { font-size: 14px; }
.q-card .job.req-card .kv { font-size: 12.5px; }
.pop-body summary, .pop-body .claimlog, .pop-body .note { white-space: normal; }
.pop-body .lc-rules { flex-wrap: wrap; }
.pop-body .lc-rules .lc-rule select { max-width: 170px; }
.q-table .cls.sm { font-size: 11px; }
.q-table td:nth-child(5) { max-width: 240px; }
.q-table td:nth-child(3) { max-width: 260px; }
.q-table .chip.min { margin-left: 4px; font-variant-numeric: tabular-nums; }
.q-table .mapbtn { padding: 2px 7px; font-size: 14px; line-height: 1; }
.q-table td:nth-child(5) { max-width: 320px; }
.q-table td:nth-child(6) { white-space: nowrap; }
.q-table td:nth-child(6) .primary { margin-left: 6px; padding: 3px 8px; font-size: 12px; }

/* ---- phase 3: Overview ---- */
#v-overview.on { grid-template-rows: auto auto auto; align-content: start; gap: 12px; }
.ov-row { display: grid; gap: 12px; min-width: 0; }
.ov-3 { grid-template-columns: 1.25fr 1fr 1fr; }
@media (max-width: 1100px) { .ov-3 { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.card > h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card > h2 i { font-style: normal; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex: none; cursor: help; }
.card .big { font-size: 26px; font-weight: 600; line-height: 1.1; }
.card .big small { font-size: 12.5px; color: var(--fg2); font-weight: 500; margin-left: 8px; }
.card .stack { display: grid; gap: 6px; }
.card .stack .bar { height: 14px; }
.card .key { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--fg2); }
.card .key span { display: inline-flex; align-items: center; gap: 5px; } .card .key b { color: var(--fg); font-variant-numeric: tabular-nums; }
.card .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.act { font: inherit; font-size: 12.5px; cursor: pointer; color: var(--fg); display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; }
.chip.act:hover:not(:disabled) { border-color: var(--fg); }
.chip.act:disabled { cursor: default; color: var(--fg2); }
.chip.act b { font-weight: 700; } .chip.act.bad { border-color: var(--bad); } .chip.act.bad b { color: var(--bad); } .chip.act.warn { border-color: var(--warn); } .chip.act.warn b { color: var(--warn); }
.chip.act.cls-chip { border-color: var(--c); }
.chip.act.todo-ask { border-color: var(--warn); } .chip.act.todo-claim { border-color: var(--l4); } .chip.act.todo-check { border-color: var(--focus); } .chip.act.todo-chase { border-color: var(--bad); }
.card .bw { display: grid; gap: 4px; } .card .bw-l { font-size: 12px; color: var(--fg2); }
.card .spark { width: 100%; height: 90px; display: block; }
.card .spark text { font-size: 11px; font-weight: 600; fill: var(--fg2); font-family: var(--font); } .card .spark text.ax { font-weight: 400; fill: var(--muted); font-size: 10px; }
.ov-att { grid-template-rows: auto auto; }
.ov-att > h2 { margin-bottom: 2px; }

/* ---- phase 4: Map ---- */
svg.map.no-routes .lc-rings, svg.map.no-routes .lc-lbls { display: none; }
svg.map.no-rings .cl-rings { display: none; }
svg.map.no-doors .dbatches { display: none; }
.loc.off .halo, .loc.extra .halo { opacity: 0 !important; }  /* decision 2: the accepted-list ring is retired */
.m-search { position: relative; }
.m-search input { font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; width: 240px; }
.m-matches { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.16); display: grid; padding: 4px; }
.m-hit { text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 6px; font-size: 12.5px; }
.m-hit:hover { background: var(--line-soft); }
.panel .j-more { font-size: 12.5px; } .panel .j-more > summary { cursor: pointer; color: var(--fg2); } .panel .j-more .kv { margin-top: 6px; }
.legend { gap: 6px 14px; }
/* ---- phase 5: Batches ---- */
#v-batches.on { grid-template-rows: auto minmax(0, 1fr); }
.b-scroll { min-height: 0; }
.b-table { font-size: 12.5px; }
.b-table th { position: sticky; top: 0; z-index: 1; }
.b-table td { white-space: nowrap; vertical-align: middle; }
.b-table tr.b-row { cursor: pointer; } .b-table tr.b-row:hover td { background: var(--line-soft); } .b-table tr.b-row.open td { background: var(--line-soft); }
.b-table .caret { display: inline-block; width: 12px; color: var(--muted); font-size: 11px; }
.b-table .bad-t { color: var(--bad); font-weight: 600; }
.b-table .b-owner { white-space: normal; }
.b-table tr.jobs-row td { padding: 0; background: var(--bg); white-space: normal; }
.b-table .jobrow { grid-template-columns: 64px 86px minmax(180px, 1.4fr) 100px minmax(140px, 1fr) minmax(130px, 1fr) minmax(120px, 0.9fr) minmax(130px, 1fr) minmax(110px, 0.9fr) 60px auto; }
/* ---- phase 6: Revenue ---- */
#v-revenue.on { grid-template-rows: auto auto auto auto; align-content: start; }
.r-chart-card svg { width: 100%; height: auto; display: block; }
.r-chart-card .grid { stroke: var(--line-soft); }
.r-chart-card .ax { font-size: 11px; fill: var(--muted); font-family: var(--font); }
.r-chart-card .lbl { font-size: 11px; font-weight: 600; fill: var(--fg2); font-family: var(--font); }
.r-chart-card .gross { fill: var(--muted); opacity: 0.4; } .r-chart-card .gross.cur { opacity: 0.55; } .r-chart-card .gross.fut { opacity: 0.2; }
.r-chart-card .net { fill: var(--l4); }
.r-chart-card .run { fill: none; stroke: var(--l5); stroke-width: 2; stroke-dasharray: 6 4; } .r-chart-card .run-l { fill: var(--l5); }
#r-chips { gap: 6px; }
details.rev-more > summary .note { font-weight: 400; }

/* ---- phase 8: Team ---- */
#v-team.on { grid-template-rows: auto minmax(0, 1fr); }
.tm-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; min-height: 0; }
@media (max-width: 1100px) { .tm-body { grid-template-columns: 1fr; } }
.tm-scroll { min-height: 0; }
.tm-vendors { min-height: 0; overflow: auto; }
.tm-vendors .vchart { border: 0; padding: 0; }
.tm-table { font-size: 12.5px; } .tm-table th { position: sticky; top: 0; z-index: 1; } .tm-table td { white-space: nowrap; vertical-align: middle; }
.tm-table tr.tm-team { cursor: pointer; } .tm-table tr.tm-team td { background: var(--line-soft); font-weight: 600; }
.tm-table tr.tm-member td:first-child { padding-left: 26px; }
.tm-table tr.tm-total td { border-top: 2px solid var(--line); font-weight: 600; }
.tm-table .caret { display: inline-block; width: 12px; color: var(--muted); font-size: 11px; }
.tm-table .bad-t { color: var(--bad); font-weight: 600; }
/* ---- phase 9: Doors ---- */
#v-doors.on { grid-template-rows: auto minmax(0, 1fr); }
.d-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; min-height: 0; }
.d-map { padding: 8px; min-height: 0; } .d-map svg { width: 100%; height: 100%; display: block; }
.d-map .state { fill: var(--land); stroke: var(--land-stroke); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.d-map .d-batch { fill: var(--doors-soft); stroke: var(--doors); stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.d-map .d-lbl { fill: var(--doors); font-weight: 700; text-anchor: middle; dominant-baseline: central; font-family: var(--font); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; pointer-events: none; }
.d-scroll { min-height: 0; }
.d-table { font-size: 12.5px; } .d-table th { position: sticky; top: 0; z-index: 1; } .d-table td { white-space: nowrap; vertical-align: middle; }
/* ---- narrower screens (1280 px): no horizontal scroll in the queue and the batch table ---- */
@media (max-width: 1320px) {
  .q-body { grid-template-columns: minmax(0, 1fr) 320px; }
  .q-table th, .q-table td { padding: 5px 6px; }
  .q-table td:nth-child(5) { max-width: 210px; }
  .q-table td:nth-child(3) { max-width: 210px; }
  .b-table th, .b-table td { padding: 5px 6px; }
  .b-table td:nth-child(6), .b-table th:nth-child(6) { display: none; }
  .tm-body { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1320px) {
  .tm-table td:nth-child(6), .tm-table th:nth-child(6) { display: none; }
  .tm-table td:nth-child(3) .muted { display: none; }
  .tm-table th, .tm-table td { padding: 5px 6px; }
}