/* TRUCK BOARD — NEW VIEW (Ed 2026-10-02, dispatch New views: "4 classic"). Everything here is scoped to
 * `#panel-wboard.wb-new` (src/truckBoard/098 sets the class only when the user picked New) or to `#wb-new`, so Classic
 * is untouched — byte for byte (test-truckboard-classic-byte-identical). The run is drawn with components/workRun.js
 * (css/work-run.css); this sheet hides Classic's grid under New, sizes the board's own columns, and gives the band's
 * one-truck ribbon table the track rules Classic scopes to #wb-table. Skin B: tokens only, square corners, gold = marker. */

/* Under New the run replaces the grid, the mobile cards and the scroll bar; the header, toolbar, legend and week tabs stay. */
#panel-wboard.wb-new #wb-table-wrap,
#panel-wboard.wb-new #wb-hscroll-bar,
#panel-wboard.wb-new #emr-truckcards { display: none !important; }
#wb-new[hidden] { display: none; }
#panel-wboard.wb-new #wb-new { display: block; flex: 1; overflow: auto; background: var(--bg); }
#panel-wboard.wb-new .emr-acc-view-seg { margin-left: 4px; }

/* The run */
#wb-new .wb-new-strip .run-strip { position: sticky; top: 0; z-index: 3; }
#wb-new .wb-new-table { table-layout: auto; }
#wb-new .wb-new-table > thead > tr > th { position: sticky; top: 42px; z-index: 2; background: var(--bg); }
#wb-new .wb-new-row > td { white-space: nowrap; }
#wb-new .wb-new-where, #wb-new .wb-new-next { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
#wb-new .wb-new-next b { font-weight: 700; }
#wb-new .wb-new-risk { font-style: normal; font-weight: 700; }
#wb-new .wb-new-risk.is-ok { color: var(--ink-ok); }
#wb-new .wb-new-risk.is-tight { color: var(--ink-gold); }
#wb-new .wb-new-risk.is-late { color: var(--ink-bad); }
#wb-new .wb-new-hos { font-family: var(--emr-font-mono, var(--mono)); font-weight: 700; font-size: 10.5px; }
#wb-new .wb-new-hos.is-ok { color: var(--ink-ok); }
#wb-new .wb-new-hos.is-warn { color: var(--ink-gold); }
#wb-new .wb-new-hos.is-low { color: var(--ink-bad); }
#wb-new .wb-new-hos.is-none { color: var(--text3); font-weight: 500; }
#wb-new .wb-new-spark { display: inline-grid; grid-template-columns: repeat(7, 6px); gap: 2px; align-items: end; height: 16px; vertical-align: middle; }
#wb-new .wb-new-spark i { display: block; background: var(--text3); height: 2px; }
#wb-new .wb-new-spark i.is-1 { height: 6px; background: var(--border3); }
#wb-new .wb-new-spark i.is-2 { height: 11px; background: var(--text2); }
#wb-new .wb-new-spark i.is-3 { height: 16px; background: var(--text); }
#wb-new .wb-new-menu { border: 1px solid var(--border2); background: var(--bg); color: var(--text2); font-weight: 800; padding: 1px 6px; margin-left: 6px; cursor: pointer; border-radius: 0; line-height: 1.2; }
#wb-new .wb-new-menu:hover { border-color: var(--text); color: var(--text); }
#wb-new .run-td-next { white-space: nowrap; }

/* The band: Classic's ribbon on its own 9-day axis — the track rules Classic keeps under #wb-table, restated here. */
#wb-new .run-band-in { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, .8fr); }
#wb-new .wb-new-ribbon-wrap { overflow-x: auto; }
#wb-new .wb-new-ribbon-table { border-collapse: collapse; width: max-content; font-size: 11px; }
#wb-new .wb-new-ribbon-table thead th { text-align: left; padding: 2px 4px; font-size: 10px; font-weight: 700; color: var(--text3); border-bottom: 1px solid var(--border); white-space: nowrap; }
#wb-new .wb-new-ribbon-table thead th[data-today="1"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--ink-gold); }
#wb-new .wb-new-ribbon-table thead th[data-preview="1"] { opacity: .62; }
#wb-new .wb-new-ribbon-table th.wb-new-axis { padding: 0; height: 11px; font-weight: 500; font-size: 7px; letter-spacing: -.2px; opacity: .7; }
#wb-new .wb-new-ribbon-table th.wb-new-axis.is-preview { opacity: .45; }
#wb-new .wb-new-ribbon-table th.wb-new-axis div { display: flex; width: 100%; line-height: 11px; }
#wb-new .wb-new-ribbon-table th.wb-new-axis span { flex: 1 1 25%; text-align: left; padding-left: 1px; border-left: 1px solid var(--border); overflow: hidden; }
#wb-new .wb-new-ribbon-table td.wb-ribbon-track { position: relative; padding: 0; height: 34px; border-left: 1px solid var(--border2); border-right: 1px solid var(--border2); border-bottom: 1px solid var(--border); background: var(--bg); }
#wb-new .wb-new-notes { white-space: pre-wrap; font-size: 12px; color: var(--text2); }
@media (max-width: 900px) { #wb-new .run-band-in { grid-template-columns: 1fr; } }

/* Phone: one line per truck still — Unit · Driver · Stage · Next step; where / next / week / money wait for the band. */
@media (max-width: 700px) {
  #wb-new .wb-new-table > thead > tr > th:nth-child(4), #wb-new .wb-new-table > thead > tr > th:nth-child(5),
  #wb-new .wb-new-table > thead > tr > th:nth-child(6), #wb-new .wb-new-table > thead > tr > th:nth-child(7),
  #wb-new .wb-new-row > td:nth-child(4), #wb-new .wb-new-row > td:nth-child(5), #wb-new .wb-new-row > td:nth-child(6), #wb-new .wb-new-row > td:nth-child(7) { display: none; }
  #wb-new .wb-new-table { width: 100%; }
  #wb-new .wb-new-row > td { white-space: normal; padding: 3px 5px; }
  #wb-new .run-next { min-width: 0; padding: 2px 6px; }
  #wb-new .run-td-next .run-flag { display: block; margin-left: 0; }
  #wb-new .wb-new-menu { margin-left: 2px; }
  #wb-new .run-chip { letter-spacing: .02em; }
  #wb-new .run-band-in { grid-template-columns: 1fr; }
}