/* v8 (2026-10-31, port r1, the PH-B lane): Recalls, Facility and the supply-map tabs at Today's depth, drawn by next-v8-ph-b.js on
   Today's own parts (next-v8-today.css: .v8t-stat, .v8t-panel, .v8t-h, .v8t-tri, .v8t-li, .v8t-cal, .v8t-svg, .v8t-legend,
   .v8t-fun, .v8t-btn). Every rule here is scoped to #view .v8pb (the parts) or #view .page.v8pb-on (the page they sit in). Sizes keep
   to the workspace's one scale (12, 13, 14, 15, 19, 28, 34, 38, 40). The blocks a part redraws stay in the page, clipped offscreen
   and inert, never display:none. */

/* the redrawn blocks: laid out, clipped offscreen, out of reach (their facts and controls are carried into the parts) */
#view .page.v8pb-on [data-v8pbshelf][aria-hidden] {
  display: block !important; position: absolute !important; left: -20000px !important; top: 0 !important; width: 1000px !important; height: auto !important; max-height: none !important;
  margin: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; pointer-events: none !important; contain: layout paint;
}
#view .page.v8pb-on { position: relative; }
#view .page.v8pb-on > [data-v8pb] { margin: 0 0 16px; min-width: 0; }

#view .v8pb { font-family: var(--v8-sans); color: var(--v8-t1); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
#view .v8pb a { color: inherit; text-decoration: none; }
#view .v8pb :is(h2, h3, p) { margin: 0; }
#view .v8pb .mono { font-family: var(--v8-mono); letter-spacing: 0; }
#view .v8pb .v8ti { width: 16px; height: 16px; }

/* the figures: Today's cards, four (or five) equal */
#view .v8pb .v8pb-stats { grid-template-columns: repeat(var(--k, 4), minmax(0, 1fr)); margin-top: 0; }
#view .v8pb .v8pb-stats .v8t-stat { width: 100%; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; height: 136px; }
#view .v8pb .v8pb-stats div.v8t-stat { cursor: default; }
#view .v8pb .v8pb-stats div.v8t-stat:hover { background: var(--v8-card); }
#view .v8pb .v8pb-stats .v8t-stat:focus-visible { outline: 2px solid var(--v8-accent); outline-offset: 2px; }
#view .v8pb .v8t-v.v8pb-neg { color: var(--v8-neg); }
#view .v8pb .v8t-v.v8pb-warn { color: var(--v8-warn); }
#view .v8pb .v8t-g2, #view .v8pb .v8t-g3 { margin-top: 16px; }
#view .v8pb > .v8t-panel { margin-top: 16px; }
#view .v8pb > :first-child { margin-top: 0; }
#view .v8pb .v8t-g2 > .v8pb-main, #view .v8pb .v8t-g2 > .v8pb-side { align-self: stretch; }
#view .v8pb .v8pb-g2r { margin-top: 0; }

/* panels */
#view .v8pb .v8pb-pn { padding: 20px 22px 18px; min-width: 0; }
#view .v8pb .v8t-h h2 { font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.3; color: var(--v8-t1); }
#view .v8pb .v8t-h .v8t-hr :is(.v8t-btn, .btn) { height: 30px; }
#view .v8pb .v8t-link { font-size: 13px; }
#view .v8pb-sub { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--v8-hair-2); }
#view .v8pb-sub > .v8t-h { margin-bottom: 4px; }
#view .v8pb-foot { margin-top: 12px !important; font-size: 12px; line-height: 1.5; color: var(--v8-t3); }
#view .v8pb-acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
#view .v8pb .v8t-li { font-size: 14px; }
#view .v8pb .v8t-li > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
#view .v8pb .v8t-tri + .v8t-li, #view .v8pb .v8t-h + .v8t-li { border-top: 0; margin-top: 4px; }
#view .v8pb a.v8pb-li:hover > span:nth-child(2), #view .v8pb button.v8pb-li:hover > span:nth-child(2) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v8-hair); }
#view .v8pb button.v8pb-li { width: 100%; border: 0; border-top: 1px solid var(--v8-hair-2); background: none; text-align: left; font: inherit; font-size: 14px; color: var(--v8-t1); cursor: pointer; }
#view .v8pb .v8t-tri b small { font-size: 13px; }
#view .v8pb-dot { display: inline-block; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; flex: none; }
#view .v8pb .v8t-li > .v8pb-dot { justify-self: center; }
#view .v8pb-more { appearance: none; display: block; margin: 10px 0 0; padding: 0; border: 0; background: none; font: 400 13px/1.4 var(--v8-sans); color: var(--v8-t2); cursor: pointer; }
#view .v8pb-more:hover { color: var(--v8-t1); text-decoration: underline; text-underline-offset: 3px; }
#view .v8pb .v8t-cals + .v8pb-more { margin-left: 72px; }

/* a status: an icon and a word, coloured by its tone */
#view .v8pb-st { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.3; white-space: nowrap; color: var(--v8-t2); }
#view .v8pb-st.neg { color: var(--v8-neg); } #view .v8pb-st.warn { color: var(--v8-warn); } #view .v8pb-st.pos { color: var(--v8-pos); }
#view .v8pb-st.s3 { color: var(--v8-s3); } #view .v8pb-st.t3 { color: var(--v8-t3); }
#view .v8pb-st .v8ti { color: currentColor; }

/* an avatar: a firm's initials in its colour, or a mark for a kind of record */
#view .v8pb-av { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--v8-raised); box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair); font: 600 12px/1 var(--v8-sans); color: var(--c, var(--v8-t2)); letter-spacing: .02em; }
#view .v8pb-av .v8ti { width: 18px; height: 18px; color: var(--c, var(--v8-t2)); }

/* rich rows */
#view .v8pb-rows { margin-top: 10px; }
#view .v8pb-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 8px 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--v8-hair-2); color: var(--v8-t1); }
#view .v8pb-rows > .v8pb-row:first-child, #view .v8pb-gh + .v8pb-row { border-top: 0; }
#view a.v8pb-row { transition: background-color .15s var(--v8-ease); border-radius: 0; }
#view a.v8pb-row:hover { background: color-mix(in srgb, var(--v8-raised) 45%, transparent); box-shadow: -12px 0 0 color-mix(in srgb, var(--v8-raised) 45%, transparent), 12px 0 0 color-mix(in srgb, var(--v8-raised) 45%, transparent); }
#view .v8pb-rwho { min-width: 0; }
#view .v8pb-rwho > b { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--v8-t1); overflow-wrap: anywhere; }
#view .v8pb-rwho > b .mono { font-size: 13px; font-weight: 400; color: var(--v8-t2); margin-left: 4px; }
#view .v8pb-rwho > small { display: block; margin-top: 3px; font: 400 12px/1.45 var(--v8-mono); color: var(--v8-t3); overflow-wrap: anywhere; }
#view .v8pb-rdate { font: 400 12px/1.3 var(--v8-mono); color: var(--v8-t3); white-space: nowrap; text-align: right; min-width: 92px; }
#view .v8pb-ract { display: inline-flex; gap: 8px; justify-content: flex-end; }
#view .v8pb .v8t-btn { text-decoration: none !important; }
#view .v8pb-gh { display: flex; align-items: center; gap: 8px; height: 34px; margin: 6px -22px 0; padding: 0 22px; background: color-mix(in srgb, var(--v8-deep) 55%, var(--v8-card)); border-top: 1px solid var(--v8-hair-2); border-bottom: 1px solid var(--v8-hair-2); font-size: 13px; color: var(--v8-t2); }
#view .v8pb-gh i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--v8-t3)); }
#view .v8pb-gh em { font: normal 400 12px var(--v8-mono); color: var(--v8-t3); }

/* a recalled lot: who, its state, its one step; then where it came from, who it reached and the five steps */
#view .v8pb-rrow { grid-template-columns: minmax(0, 1fr) auto; padding: 16px 0 18px; }
#view .v8pb-rmain { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-width: 0; }
#view .v8pb-rmain:hover .v8pb-rwho > b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v8-hair); }
#view .v8pb-rsrc { grid-column: 1 / -1; margin-left: 50px !important; font-size: 14px; line-height: 1.55; color: var(--v8-t2); }
#view .v8pb-rsrc span { color: var(--v8-t3); }
#view .v8pb-rfig { grid-column: 1 / -1; margin-left: 50px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: var(--v8-t3); }
#view .v8pb-rfig b { font-size: 15px; font-weight: 500; color: var(--v8-t1); margin-right: 6px; }
#view .v8pb-rfig b.neg { color: var(--v8-neg); }
#view .v8pb-rsteps { grid-column: 1 / -1; margin-left: 50px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#view .v8pb-rnext { font: 400 12px/1.4 var(--v8-mono); color: var(--v8-t3); }

/* cells: Today's verdict cells, one a step or a signal */
#view .v8pb-cells { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 10px; gap: 4px; align-items: center; }
#view .v8pb-cells i { display: block; width: 10px; height: 16px; border-radius: 3px; background: var(--v8-raised); box-shadow: inset 0 0 0 1px var(--v8-hair); }
#view .v8pb-cells i.done, #view .v8pb-cells i.t-pos { background: var(--v8-pos); box-shadow: none; }
#view .v8pb-cells i.now { background: transparent; box-shadow: inset 0 0 0 1.5px var(--v8-s3); }
#view .v8pb-cells i.t-s3 { background: var(--v8-s3); box-shadow: none; }
#view .v8pb-cells i.t-warn { background: var(--v8-warn); box-shadow: none; }
#view .v8pb-cells i.t-neg { background: var(--v8-neg); box-shadow: none; }
#view .v8pb-cells.big { grid-auto-columns: 14px; gap: 5px; }
#view .v8pb-cells.big i { width: 14px; height: 22px; border-radius: 4px; }

/* the timeline: a lane a thing on one dated axis, today drawn through every lane */
#view .v8pb-tl { margin-top: 16px; }
#view .v8pb-tl-ax, #view .v8pb-tl-lane { display: grid; grid-template-columns: 210px minmax(0, 1fr) 112px; gap: 16px; align-items: center; }
#view .v8pb-tl-ax { height: 34px; }
#view .v8pb-tl-axt { position: relative; height: 34px; }
#view .v8pb-tl-axt > span, #view .v8pb-tl-axt > em { position: absolute; top: 2px; transform: translateX(-50%); font: normal 400 12px/1 var(--v8-mono); color: var(--v8-t3); white-space: nowrap; }
#view .v8pb-tl-axt > span.l { transform: none; } #view .v8pb-tl-axt > span.r { transform: translateX(-100%); }
#view .v8pb-tl-axt > em { top: auto; bottom: 0; color: var(--v8-accent); font-size: 12px; background: var(--v8-card); padding: 0 4px; z-index: 1; }
#view .v8pb-tl-lane { min-height: 52px; padding: 8px 0; border-top: 1px solid var(--v8-hair-2); }
#view a.v8pb-tl-lane:hover .v8pb-tl-k b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v8-hair); }
#view .v8pb-tl-k { min-width: 0; }
#view .v8pb-tl-k b { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--v8-t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .v8pb-tl-k small { display: block; margin-top: 2px; font: 400 12px/1.35 var(--v8-mono); color: var(--v8-t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .v8pb-tl-tr { position: relative; height: 34px; }
#view .v8pb-tl-g { position: absolute; top: -9px; bottom: -9px; width: 1px; background: var(--v8-grid); }
#view .v8pb-tl-now { position: absolute; top: -9px; bottom: -9px; width: 1px; background: color-mix(in srgb, var(--v8-accent) 70%, transparent); }
#view .v8pb-tl-bar { position: absolute; top: 12px; height: 10px; border-radius: 5px; background: var(--c); }
#view .v8pb-tl-m { position: absolute; top: 17px; transform: translate(-50%, -50%); display: grid; place-items: center; }
#view .v8pb-tl-m.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--v8-card); }
#view .v8pb-tl-m.dot.big { width: 12px; height: 12px; }
#view .v8pb-tl-m.dot.small { width: 7px; height: 7px; opacity: .8; }
#view .v8pb-tl-m.tick { width: 3px; height: 22px; border-radius: 2px; background: var(--c); box-shadow: 0 0 0 2px var(--v8-card); }
#view .v8pb-tl-m b { position: absolute; left: calc(100% + 5px); top: 50%; transform: translateY(-50%); font: 500 12px/1 var(--v8-mono); color: var(--v8-t2); white-space: nowrap; }
#view .v8pb-tl-w { font: 400 12px/1.3 var(--v8-mono); color: var(--v8-t2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .v8pb-tl-w.warn { color: var(--v8-warn); } #view .v8pb-tl-w.neg { color: var(--v8-neg); }
#view .v8pb-legend { margin-top: 14px; }
#view .v8pb-legend i.tick { width: 3px; height: 12px; border-radius: 2px; }
#view .v8pb-legend i.ring { background: transparent !important; box-shadow: inset 0 0 0 1.5px var(--v8-t1); }

/* the smoothed series' pins: a dated event drawn through the chart */
#view .v8pb-pin path { stroke: var(--c); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
#view .v8pb-pin circle { fill: var(--c); stroke: var(--v8-card); stroke-width: 2; }
#view .v8pb .v8t-chart { padding: 24px 24px 18px; }
#view .v8pb .v8t-chart .v8t-d b.neg { color: var(--v8-neg); }

/* bars: a count a kind */
#view .v8pb-bars { margin-top: 12px; display: grid; gap: 2px; }
#view .v8pb-bar { display: grid; grid-template-columns: minmax(0, 1fr) 96px 28px; gap: 12px; align-items: center; height: 32px; font-size: 13px; color: var(--v8-t2); }
#view .v8pb-bar i { display: block; height: 8px; border-radius: 4px; background: var(--v8-raised); overflow: hidden; }
#view .v8pb-bar u { display: block; height: 100%; border-radius: 4px; background: var(--v8-s3); }
#view .v8pb-bar b { font: 500 13px var(--v8-sans); color: var(--v8-t1); text-align: right; }

/* a day strip: 30 cells, a day each */
#view .v8pb-strip { margin-top: 18px; }
#view .v8pb-days { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 4px; }
#view .v8pb-day { position: relative; height: 54px; border-radius: 6px; background: var(--v8-raised); box-shadow: inset 0 0 0 1px var(--v8-hair); overflow: hidden; }
#view .v8pb-day > i { position: absolute; inset: 0; background: var(--v8-s3); opacity: var(--a, 0); }
#view .v8pb-day > b { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: 500 12px/1 var(--v8-mono); color: #fff; }
#view .v8pb-day.hit::after { content: ""; position: absolute; top: 6px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--v8-neg); box-shadow: 0 0 0 2px var(--v8-card); }
#view .v8pb-day.chk { box-shadow: inset 0 0 0 1.5px var(--v8-t1); }
#view .v8pb-day.now { outline: 1.5px solid var(--v8-accent); outline-offset: 2px; }
#view .v8pb-day.d-ok > i { background: var(--v8-pos); opacity: .8; }
#view .v8pb-day.d-miss > i { background: var(--v8-neg); opacity: .75; }
#view .v8pb-day.d-closed { background: transparent; }
#view .v8pb-days-ax { position: relative; height: 22px; margin-top: 8px; }
#view .v8pb-days-ax span { position: absolute; top: 0; transform: translateX(-50%); font: 400 12px/1 var(--v8-mono); color: var(--v8-t3); white-space: nowrap; }
#view .v8pb-days-ax span.l { transform: translateX(-12%); } #view .v8pb-days-ax span.r { transform: translateX(-88%); }

/* an empty state inside a panel: what it is, why it is empty, the one way to fill it */
#view .v8pb-none, #view .v8pb-empty { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 18px; border-radius: 12px; background: color-mix(in srgb, var(--v8-raised) 40%, var(--v8-card)); box-shadow: 0 0 0 1px var(--v8-hair); }
#view .v8pb-none .v8ti, #view .v8pb-empty .v8ti { width: 18px; height: 18px; margin-top: 1px; color: var(--v8-t3); }
#view .v8pb-none b, #view .v8pb-empty b { display: block; font-size: 14px; font-weight: 500; color: var(--v8-t1); }
#view .v8pb-none small, #view .v8pb-empty small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--v8-t2); max-width: 64ch; }
#view .v8pb-none-a { display: flex; gap: 8px; margin-top: 14px; }
#view .v8pb-empty.big { padding: 26px 24px; }
#view .v8pb-empty.big b { font-size: 15px; }

/* the supply flow */
#view .v8pb-flowwrap { margin-top: 14px; }
#view .v8pb-flowh { position: relative; height: 20px; margin-bottom: 8px; }
#view .v8pb-flowh span { position: absolute; top: 0; font: 400 12px/1 var(--v8-mono); color: var(--v8-t3); white-space: nowrap; }
#view .v8pb-flow { display: block; width: 100%; height: auto; overflow: visible; }
#view .v8pb-flow text { font: 400 13px var(--v8-sans); fill: var(--v8-t1); }
#view .v8pb-flow text.s { font: 400 12px var(--v8-mono); fill: var(--v8-t3); }
#view .v8pb-bands path { transition: opacity .15s var(--v8-ease); }
#view .v8pb-bands:hover path { opacity: .55; }
#view .v8pb-bands path:hover { opacity: 1; }

/* the files, item by item */
#view .v8pb-files { margin-top: 12px; }
#view .v8pb-file { display: grid; grid-template-columns: 36px minmax(150px, 1.1fr) minmax(0, 2fr) 72px; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--v8-hair-2); }
#view .v8pb-file:first-child { border-top: 0; }
#view .v8pb-file:hover .v8pb-rwho > b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v8-hair); }
#view .v8pb-fbar .v8t-track { margin-top: 0; height: 10px; border-radius: 5px; }
#view .v8pb-fn2 { font-size: 13px; color: var(--v8-t3); text-align: right; white-space: nowrap; }
#view .v8pb-fn2 b { font-size: 15px; font-weight: 500; color: var(--v8-t1); }

/* the chain matrix: a lot a row, nine steps a row */
#view .v8pb-mxh, #view .v8pb-mx { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 56px; gap: 12px; align-items: center; }
#view .v8pb-mxh { grid-template-columns: 8px minmax(0, 1fr) auto 56px; margin-top: 14px; padding-bottom: 6px; }
#view .v8pb-mxh > span:first-child { grid-column: 1 / 3; }
#view .v8pb-mx { width: 100%; padding: 9px 8px; margin: 0 -8px; border: 0; border-top: 1px solid var(--v8-hair-2); border-radius: 8px; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background-color .15s var(--v8-ease); box-sizing: content-box; }
#view .v8pb-mxs .v8pb-mx { width: calc(100% - 0px); }
#view .v8pb-mx:hover { background: color-mix(in srgb, var(--v8-raised) 55%, transparent); }
#view .v8pb-mx.on { background: var(--v8-raised); box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair); }
#view .v8pb-mx .v8pb-dot { margin-top: 0; }
#view .v8pb-mxk { min-width: 0; }
#view .v8pb-mxk b { display: block; font-size: 14px; font-weight: 400; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .v8pb-mxk small { display: block; margin-top: 2px; font: 400 12px/1.3 var(--v8-mono); color: var(--v8-t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view .v8pb-cells.mx { grid-auto-columns: 26px; gap: 4px; }
#view .v8pb-cells.mx i { width: 26px; height: 16px; border-radius: 4px; }
#view .v8pb-cells.hd em { display: block; width: 26px; font: normal 400 12px/1 var(--v8-mono); color: var(--v8-t3); writing-mode: vertical-rl; transform: rotate(180deg); height: 88px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-self: center; }
#view .v8pb-mxn { font: 400 12px var(--v8-mono); color: var(--v8-t2); text-align: right; white-space: nowrap; }
#view .v8pb-fun { margin-top: 18px; height: 140px; gap: 4px; }
#view .v8pb-fun span { font-size: 12px; }

/* the signal cells of one certificate */
#view .v8pb-sig { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding-bottom: 6px; }
#view .v8pb-sign { font: 400 12px var(--v8-mono); color: var(--v8-t3); }
#view .v8pb-grow { grid-template-columns: 36px minmax(0, 1fr) 128px minmax(0, 1.2fr); align-items: start; }
#view .v8pb-grow > .v8pb-st { margin-top: 8px; }
#view .v8pb-gwhy { font-size: 13px; line-height: 1.55; color: var(--v8-t2); margin-top: 1px; }

/* rows of the other pages */
#view .v8pb-erow { grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: start; }
#view .v8pb-erow > .v8pb-st, #view .v8pb-erow > .v8t-btn { margin-top: 6px; }
#view .v8pb-enext { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--v8-warn); }
#view .v8pb-enext.neg { color: var(--v8-neg); }
#view .v8pb-precrow { grid-template-columns: 36px minmax(0, 1fr) auto auto auto; }
#view .v8pb-srow, #view .v8pb-lrow, #view .v8pb-prow { grid-template-columns: 36px minmax(0, 1fr) auto auto; }
#view .v8pb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
#view .v8pb-chip { appearance: none; height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; box-shadow: 0 0 0 1px var(--v8-hair); font: 400 13px/1 var(--v8-sans); color: var(--v8-t2); cursor: pointer; transition: background-color .15s var(--v8-ease); }
#view .v8pb-chip:hover { background: color-mix(in srgb, var(--v8-raised) 55%, transparent); color: var(--v8-t1); }
#view .v8pb-chip[aria-pressed="true"] { background: var(--v8-raised); box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair); color: var(--v8-t1); }
#view .v8pb-noexp { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--v8-hair-2); }
#view .v8pb-noexp > span { display: grid; grid-template-columns: 16px auto; column-gap: 8px; font-size: 13px; color: var(--v8-t1); }
#view .v8pb-noexp small { grid-column: 2; font: 400 12px/1.4 var(--v8-mono); color: var(--v8-t3); }

/* the copy check's month, a column a fill day */
#view .v8pb-cols { display: flex; align-items: flex-end; gap: 4px; height: 180px; margin-top: 18px; }
#view .v8pb-cols span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
#view .v8pb-cols i { position: relative; display: flex; flex-direction: column; justify-content: flex-end; border-radius: 4px 4px 2px 2px; background: var(--v8-s3); overflow: hidden; }
#view .v8pb-cols u { display: block; background: var(--v8-neg); }
#view .v8pb-cols em { margin-top: 6px; font: normal 400 12px var(--v8-mono); color: var(--v8-t3); text-align: center; }

/* the pages the parts sit on: what stays visible below takes the parts' rhythm */
#view .page.v8pb-on[data-v8pb-page="recall"] > .grid.g-main { margin-top: 0; }
#view .page.v8pb-on[data-v8pb-page="map"] > .smgrid { margin-top: 0; }

/* tablets and phones */
@media (max-width: 1180px) {
  #view .v8pb .v8pb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view .v8pb .v8t-g2, #view .v8pb .v8t-g3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  #view .v8pb-tl-ax, #view .v8pb-tl-lane { grid-template-columns: 150px minmax(0, 1fr) 96px; gap: 12px; }
  #view .v8pb-grow { grid-template-columns: 36px minmax(0, 1fr) auto; }
  #view .v8pb-grow > .v8pb-gwhy { grid-column: 2 / -1; }
}
@media (max-width: 699px) {
  #view .v8pb .v8pb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #view .v8pb .v8pb-stats .v8t-stat { height: 116px; padding: 16px; }
  #view .v8pb .v8pb-stats .v8t-stat .v8t-v { font-size: 28px; }
  #view .v8pb .v8pb-stats .v8t-stat .v8t-d { left: 16px; right: 16px; bottom: 14px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  #view .v8pb .v8pb-stats .v8t-stat:has(.v8t-segs) .v8t-d { right: 16px; }
  #view .v8pb .v8pb-stats .v8t-segs { display: none; }
  #view .v8pb .v8pb-pn { padding: 18px 16px 14px; }
  #view .v8pb .v8t-chart { padding: 18px 16px 14px; }
  #view .v8pb .v8t-chart .v8t-v { font-size: 28px; }
  #view .v8pb .v8t-h { flex-wrap: wrap; white-space: normal; row-gap: 6px; }
  #view .v8pb .v8t-h .v8t-hr { margin-left: 0; width: 100%; }
  #view .v8pb .v8t-h .v8t-hr:empty { display: none; }
  #view .v8pb-tl-ax { grid-template-columns: minmax(0, 1fr); }
  #view .v8pb-tl-ax > span:first-child, #view .v8pb-tl-ax > span:last-child { display: none; }
  #view .v8pb-tl-lane { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k w" "t t"; row-gap: 8px; padding: 12px 0; }
  #view .v8pb-tl-k { grid-area: k; } #view .v8pb-tl-w { grid-area: w; } #view .v8pb-tl-tr { grid-area: t; }
  #view .v8pb-row, #view .v8pb-erow, #view .v8pb-precrow, #view .v8pb-srow, #view .v8pb-lrow, #view .v8pb-prow { grid-template-columns: 36px minmax(0, 1fr); }
  #view .v8pb-row > .v8pb-st, #view .v8pb-row > .v8pb-rdate, #view .v8pb-row > .v8pb-ract, #view .v8pb-row > .v8t-btn, #view .v8pb-row > .v8pb-gwhy { grid-column: 2; justify-self: start; text-align: left; min-width: 0; margin-top: 0; }
  #view .v8pb-rrow { grid-template-columns: minmax(0, 1fr); }
  #view .v8pb-rmain { grid-template-columns: 36px minmax(0, 1fr); }
  #view .v8pb-rmain > .v8pb-st { grid-column: 2; }
  #view .v8pb-rrow > .v8pb-ract { justify-content: flex-start; margin-left: 50px; }
  #view .v8pb-rsrc, #view .v8pb-rfig, #view .v8pb-rsteps { margin-left: 50px; }
  #view .v8pb .v8t-btn, #view .v8pb .v8pb-chip, #view .v8pb .v8pb-more { min-height: 44px; }
  #view .v8pb .v8pb-more { display: inline-flex; align-items: center; }
  #view .v8pb .v8t-cals + .v8pb-more { margin-left: 0; }
  #view .v8pb .v8t-li, #view .v8pb a.v8t-cal { min-height: 44px; }
  #view .v8pb-days { gap: 2px; }
  #view .v8pb-day { height: 40px; border-radius: 4px; }
  #view .v8pb-day > b { display: none; }
  #view .v8pb-file { grid-template-columns: 36px minmax(0, 1fr) auto; }
  #view .v8pb-file > .v8pb-fbar { grid-column: 2 / -1; grid-row: 2; }
  #view .v8pb-mxh { display: none; }
  #view .v8pb-mx { grid-template-columns: 8px minmax(0, 1fr) auto; min-height: 44px; }
  #view .v8pb-mx > .v8pb-cells { grid-column: 2 / -1; grid-row: 2; }
  #view .v8pb-mx > .v8pb-mxn { grid-column: 3; grid-row: 1; }
  #view .v8pb-cells.mx { grid-auto-columns: minmax(0, 1fr); width: 100%; }
  #view .v8pb-cells.mx i { width: 100%; }
  #view .v8pb-bar { grid-template-columns: minmax(0, 1fr) 72px 24px; }
  #view .v8pb-cols { height: 140px; gap: 2px; }
}

/* round 2: long sentences in rows read in the sans; long figure labels take two lines; carried units sit beside their figure */
#view .v8pb .v8pb-prose small { font: 400 13px/1.5 var(--v8-sans); color: var(--v8-t3); }
#view .v8pb .v8pb-stats button.v8t-stat { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
#view .v8pb .v8pb-stats .v8t-stat > .v8t-l { line-height: 1.3; }
#view .v8pb .v8pb-stats .v8pb-long .v8t-v { font-size: 28px; margin-top: 6px; }
#view .v8pb .v8t-v small { font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--v8-t3); }
#view .v8pb-legend i.box { background: var(--v8-raised) !important; box-shadow: inset 0 0 0 1px var(--v8-hair); width: 10px; height: 10px; border-radius: 3px; }
#view .v8pb a.v8pb-bar { color: var(--v8-t2); border-radius: 6px; }
#view .v8pb a.v8pb-bar:hover { color: var(--v8-t1); }
#view .v8pb a.v8pb-bar:hover span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v8-hair); }
#view .v8pb .v8pb-gap { margin-top: 10px; border-top: 1px solid var(--v8-hair-2); }

@media (max-width: 699px) {
  #view .v8pb .v8t-tri span { white-space: normal; }
  #view .v8pb .v8t-tri.v8pb-tri4 { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view .v8pb .v8t-tri.v8pb-tri4 > :nth-child(odd) { padding-left: 0; border-left: 0; }
  #view .v8pb .v8t-tri.v8pb-tri4 > :nth-child(n+3) { border-top: 1px solid var(--v8-hair-2); }
  #view .v8pb .v8t-h .v8t-link { display: inline-flex; align-items: center; min-height: 44px; }
  #view .v8pb a.v8pb-bar { height: 44px; }
}
@media (max-width: 699px) { #view .v8pb .btn { min-height: 44px; } }
@media (max-width: 699px) {
  #view .v8pb-row.v8pb-rrow { grid-template-columns: minmax(0, 1fr); }
  #view .v8pb-row.v8pb-rrow > .v8pb-ract { grid-column: 1; justify-self: start; margin-left: 50px; }
  #view .v8pb-row.v8pb-rrow > :is(.v8pb-rsrc, .v8pb-rfig, .v8pb-rsteps) { grid-column: 1; }
}
@media (max-width: 699px) {
  #view .v8pb .v8pb-stats .v8t-stat { height: auto; min-height: 116px; display: flex; flex-direction: column; }
  #view .v8pb .v8pb-stats .v8t-stat .v8t-d { position: static; margin-top: auto; padding-top: 8px; }
  #view .v8pb .v8pb-stats .v8pb-long .v8t-v { font-size: 28px; }
}
#view .v8pb-two .v8pb-fda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
#view .v8pb-two .v8pb-fda > .v8t-li:nth-child(2) { border-top: 0; margin-top: 4px; }
@media (max-width: 699px) { #view .v8pb-two .v8pb-fda { grid-template-columns: minmax(0, 1fr); } #view .v8pb-two .v8pb-fda > .v8t-li:nth-child(2) { border-top: 1px solid var(--v8-hair-2); margin-top: 0; } }
#view .v8pb button.v8pb-bar { width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--v8-t2); text-align: left; cursor: pointer; }
#view .v8pb button.v8pb-bar:hover span { color: var(--v8-t1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v8-hair); }
@media (max-width: 699px) { #view .v8pb button.v8pb-bar { height: 44px; } }

/* one lot's chain (#/chain/<lot>): the lot's own head over its figures; a step with no dated record says so on its lane */
#view .v8pb-lh { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 0 0 16px; }
#view .v8pb-lh > .v8pb-av { width: 44px; height: 44px; border-radius: 12px; }
#view .v8pb-lhn { min-width: 0; }
#view .v8pb-lhn > b { display: block; font-size: 19px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--v8-t1); overflow-wrap: anywhere; }
#view .v8pb-lhn > b .mono { font-size: 15px; font-weight: 400; color: var(--v8-t2); margin-left: 6px; }
#view .v8pb-lhm { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; font-size: 13px; color: var(--v8-t3); }
#view .v8pb-tl-note { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font: normal 400 12px/1 var(--v8-mono); color: var(--v8-t3); white-space: nowrap; }
@media (max-width: 699px) {
  #view .v8pb-lh { grid-template-columns: 44px minmax(0, 1fr); }
  #view .v8pb-lh > .v8pb-ract { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
}
/* four counts in a side panel sit two by two */
#view .v8pb .v8pb-side .v8t-tri.v8pb-tri4 { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#view .v8pb .v8pb-side .v8t-tri.v8pb-tri4 > :nth-child(odd) { padding-left: 0; border-left: 0; }
#view .v8pb .v8pb-side .v8t-tri.v8pb-tri4 > :nth-child(n+3) { border-top: 1px solid var(--v8-hair-2); }
#view .v8pb .v8pb-side .v8t-tri span { white-space: normal; }