/* v8 (2026-10-31, port r1, the PH-A lane): the pharmacy's Review and Release tabs at Today's depth, drawn by next-v8-ph-a.js. The compositions wear next-v8-today.css's own classes (figures, panels, the chart, Needs you, tri, rows, Coming up) and Review's tiles wear the board's (next-v8-pages.css .v8q-tile), so these tabs are one product with Today and the board; this file adds the frame (#view .page.v8pa-on and its modifiers) and the few parts Today has no class for: the lanes, the flow, the timelines, the bars and the batch rows. Every rule is scoped to #view .v8pa or #view .page.v8pa-on. Sizes keep to the workspace's one scale (12, 13, 14, 15, 19, 28, 34, 38, 40). The blocks a composition redraws stay in the page, clipped offscreen and inert. */ /* ---------------- the redrawn blocks: laid out, clipped offscreen, out of reach (their facts and controls are carried) ---------------- */ #view .page.v8pa-on { position: relative; } #view .page.v8pa-on [data-v8pashelf][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; } /* ---------------- the composition ---------------- */ #view .v8pa { font-family: var(--v8-sans); color: var(--v8-t1); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } #view .v8pa a { color: inherit; text-decoration: none; } #view .v8pa :is(h2, h3, p) { margin: 0; } #view .v8pa .mono { font-family: var(--v8-mono); letter-spacing: 0; } #view .page.v8pa-on > [data-v8pa] { margin: 0 0 16px !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; max-width: none; } #view .v8pa > * + * { margin-top: 16px; } #view .v8pa > .v8t-g2, #view .v8pa > .v8t-g3 { margin-top: 16px; } #view .v8pa .v8t-g2 { align-items: stretch; } #view .v8pa .v8pa-g2e { grid-template-columns: repeat(2, minmax(0, 1fr)); } #view .v8pa .v8pa-pad { padding: 4px 20px 20px; } #view .v8pa .v8t-empty { white-space: normal; line-height: 1.5; } #view .v8pa .v8t-v.neg { color: var(--v8-neg); } #view .v8pa .v8t-v.warn { color: var(--v8-warn); } #view .v8pa .v8t-v.pos { color: var(--v8-pos); } #view .v8pa .v8t-d b.neg { color: var(--v8-neg); } #view .v8pa .v8t-l:is(a):hover { color: var(--v8-t1); } #view .v8pa .v8ti.s3 { color: var(--v8-s3); } /* ---------------- the figures: Today's, carried from the strip ---------------- */ #view .v8pa .v8pa-stats { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); margin-top: 0; } #view .v8pa .v8pa-stat { height: 132px; padding: 20px 22px; width: 100%; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; } #view .v8pa .v8pa-stat .v8t-l { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #view .v8pa .v8pa-stat .v8t-v { font-size: 38px; } #view .v8pa .v8pa-stat .v8t-d { left: 22px; right: 22px; bottom: 18px; } #view .v8pa .v8pa-stat.has-x .v8t-d { right: 120px; } #view .v8pa div.v8pa-stat { cursor: default; } #view .v8pa div.v8pa-stat:hover { background: var(--v8-card); } #view .v8pa button.v8pa-stat:focus-visible, #view .v8pa a.v8pa-stat:focus-visible { outline: 2px solid var(--v8-accent); outline-offset: 2px; } #view .v8pa .v8pa-segs { right: 20px; bottom: 20px; } /* Review's four: the board's tiles (a dot by the label, the count, one line), the strip's own buttons */ #view .v8pa .v8pa-tiles { margin: 0; } #view .v8pa .v8pa-tile { width: 100%; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: background-color .15s var(--v8-ease); } #view .v8pa .v8pa-tile:hover { background: color-mix(in srgb, var(--v8-raised) 55%, var(--v8-card)); } #view .v8pa .v8pa-tile:focus-visible { outline: 2px solid var(--v8-accent); outline-offset: 2px; } #view .v8pa .v8pa-tile small b.neg { font-weight: 500; color: var(--v8-neg); } /* ---------------- panels and rows ---------------- */ #view .v8pa .v8pa-chart { min-width: 0; } #view .v8pa .v8pa-chart > .v8t-l { display: block; color: var(--v8-t2); font-size: 15px; } #view .v8pa .v8pa-needs { display: flex; flex-direction: column; } #view .v8pa .v8pa-needs .v8t-tasks { flex: 1; } #view .v8pa .v8pa-needs .v8t-task:first-child { border-top: 1px solid var(--v8-hair-2); } #view .v8pa .v8t-task .v8t-acts .v8t-btn { height: 30px; } #view .v8pa .v8t-task.v8t-more .v8t-t { color: var(--v8-t2); } #view .v8pa .v8pa-flat { margin: 6px -20px -16px; } #view .v8pa .v8pa-flat .v8t-task { border-top: 1px solid var(--v8-hair-2); } #view .v8pa .v8pa-side { align-self: stretch; } #view .v8pa .v8t-li .v8t-lw { color: var(--v8-t2); } #view .v8pa .v8t-pn > .v8t-h + .v8t-li { border-top: 0; margin-top: 6px; } #view .v8pa-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; } /* a status: the icon and its word, the small line under it */ #view .v8pa-st { display: inline-flex; align-items: flex-start; gap: 8px; min-width: 0; } #view .v8pa-st .v8ti { width: 16px; height: 16px; margin-top: 1px; } #view .v8pa-st > span { min-width: 0; } #view .v8pa-st b { display: block; font-size: 13px; font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #view .v8pa-st small { display: block; margin-top: 2px; font: 400 12px/1.35 var(--v8-mono); color: var(--v8-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #view .v8pa-st.t-neg b { color: var(--v8-neg); } #view .v8pa-st.t-warn b { color: var(--v8-warn); } #view .v8pa-st.t-pos b { color: var(--v8-pos); } #view .v8pa-st.t-s3 b { color: var(--v8-s3); } #view .v8pa-st.t-t3 b { color: var(--v8-t2); } /* bars in a panel: a label and its line, the bar, the count */ #view .v8pa .v8pa-hbs, #view .v8pa .v8pa-obs { margin-top: 12px; } #view .v8pa .v8pa-hb { display: grid; grid-template-columns: 104px minmax(0, 1fr) 28px; align-items: center; gap: 12px; padding: 7px 0; font-size: 13px; color: var(--v8-t2); } #view .v8pa .v8pa-hb > b { font-weight: 500; color: var(--v8-t1); text-align: right; } #view .v8pa .v8pa-hbt { display: block; height: 8px; border-radius: 4px; background: var(--v8-raised); overflow: hidden; } #view .v8pa .v8pa-hbt .v8t-track { margin: 0; height: 8px; border-radius: 4px; background: none; min-width: 0; } #view .v8pa .v8pa-ob { display: grid; grid-template-columns: minmax(0, 1fr) 88px 52px; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--v8-hair-2); font-size: 14px; line-height: 1.35; color: var(--v8-t1); } #view .v8pa .v8pa-ob:first-child { border-top: 0; } #view .v8pa .v8pa-ob small { display: block; margin-top: 3px; font: 400 12px/1.35 var(--v8-mono); color: var(--v8-t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view .v8pa .v8pa-ob > span:first-child { min-width: 0; } #view .v8pa .v8pa-obt { display: block; height: 6px; border-radius: 3px; background: var(--v8-raised); overflow: hidden; } #view .v8pa .v8pa-obt i { display: block; height: 100%; border-radius: 3px; background: var(--v8-warn); } #view .page.v8pa-ship .v8pa .v8pa-obt i, #view .page.v8pa-orders .v8pa .v8pa-obt i { background: var(--v8-s3); } #view .v8pa .v8pa-ob > b { font-weight: 500; text-align: right; font-size: 14px; white-space: nowrap; } #view .v8pa a.v8pa-ob:hover > span:first-child { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v8-hair); } #view .v8pa .v8pa-sps { margin-top: 8px; } #view .v8pa .v8pa-sp { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--v8-hair-2); font-size: 14px; color: var(--v8-t1); } #view .v8pa .v8pa-sp:first-child { border-top: 0; } #view .v8pa .v8pa-sp > span { min-width: 0; } #view .v8pa .v8pa-sp small { display: block; margin-top: 3px; font: 400 12px/1.35 var(--v8-mono); color: var(--v8-t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view .v8pa .v8pa-sp > b { font-weight: 500; font-size: 14px; } #view .v8pa .v8pa-sp > .v8t-track { grid-column: 2 / -1; margin-top: 2px; height: 6px; } #view .v8pa a.v8pa-sp:hover > span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v8-hair); } /* ---------------- the lanes ---------------- */ #view .v8pa .v8pa-lanes { margin-top: 16px; } #view .v8pa .v8pa-lane path { stroke: var(--v8-grid); stroke-width: 1; fill: none; } #view .v8pa .v8pa-now { stroke: var(--v8-hair); stroke-width: 1; stroke-dasharray: 3 4; fill: none; } #view .v8pa .v8pa-links path { fill: none; stroke: color-mix(in srgb, var(--v8-t1) 26%, transparent); stroke-width: 1.25; } #view .v8pa .v8pa-ln { font: 400 13px var(--v8-sans); fill: var(--v8-t1); } #view .v8pa .v8pa-ls { font: 400 12px var(--v8-mono); fill: var(--v8-t3); } #view .v8pa .v8pa-pts circle { stroke: var(--v8-card); stroke-width: 2; transition: r .15s var(--v8-ease); } #view .v8pa .v8pa-pts text { font: 400 12px var(--v8-mono); fill: var(--v8-t2); } #view .v8pa .v8pa-pt:hover text { fill: var(--v8-t1); } #view .v8pa .v8pa-pt:hover circle { stroke: var(--v8-t1); } #view .v8pa .v8pa-pt:focus-visible { outline: none; } #view .v8pa .v8pa-pt:focus-visible circle { stroke: var(--v8-accent); stroke-width: 3; } #view .v8pa .v8t-legend i.v8pa-lk { width: 14px; height: 0; border-radius: 0; border-top: 1.25px solid color-mix(in srgb, var(--v8-t1) 40%, transparent); } /* ---------------- the flow ---------------- */ #view .v8pa .v8pa-flow { margin-top: 18px; } #view .v8pa .v8pa-bands path { transition: opacity .15s var(--v8-ease); } #view .v8pa .v8pa-bands:hover path { opacity: .55; } #view .v8pa .v8pa-bands path:hover { opacity: 1; } #view .v8pa .v8pa-fn { font: 400 13px var(--v8-sans); fill: var(--v8-t1); } #view .v8pa .v8pa-fc { font: 400 12px var(--v8-mono); fill: var(--v8-t3); } #view .v8pa .v8pa-fs { font: 400 12px var(--v8-mono); fill: var(--v8-t3); } #view .v8pa .v8pa-flow a:hover .v8pa-fn { text-decoration: underline; } #view .v8pa .v8pa-flowl { margin-top: 14px; } #view .v8pa .v8pa-fg + .v8pa-fg { margin-top: 14px; } #view .v8pa .v8pa-fh { display: flex; align-items: center; gap: 8px; font-size: 14px; } #view .v8pa .v8pa-fh b { font-weight: 500; } #view .v8pa .v8pa-fh em { margin-left: auto; font: 400 12px var(--v8-mono); font-style: normal; color: var(--v8-t3); } #view .v8pa .v8pa-fr { display: grid; grid-template-columns: minmax(0, 1fr) 72px 28px; align-items: center; gap: 10px; padding: 8px 0 0 16px; font-size: 13px; color: var(--v8-t2); } #view .v8pa .v8pa-fr small { display: block; font: 400 12px var(--v8-mono); color: var(--v8-t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view .v8pa .v8pa-fr > span:first-child { min-width: 0; } #view .v8pa .v8pa-fr .v8t-track { margin: 0; height: 6px; } #view .v8pa .v8pa-fr em { font: 400 12px var(--v8-mono); font-style: normal; color: var(--v8-t1); text-align: right; } /* ---------------- the timelines: a row per record, a bar over the days ---------------- */ #view .v8pa .v8pa-tline { margin-top: 18px; } #view .v8pa .v8pa-tax, #view .v8pa .v8pa-tr { display: grid; grid-template-columns: 200px minmax(0, 1fr) 210px; gap: 16px; align-items: center; } #view .v8pa .v8pa-tax { height: 22px; } #view .v8pa .v8pa-taxs { position: relative; height: 22px; font: 400 12px var(--v8-mono); color: var(--v8-t3); } #view .v8pa .v8pa-taxs > span { position: absolute; top: 2px; transform: translateX(-50%); white-space: nowrap; } #view .v8pa .v8pa-taxs > span:first-child { transform: none; } #view .v8pa .v8pa-taxs > span:last-of-type { transform: translateX(-100%); } #view .v8pa .v8pa-tr { min-height: 56px; padding: 8px 0; border-top: 1px solid var(--v8-hair-2); } #view .v8pa a.v8pa-tr:hover .v8pa-tl b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--v8-hair); } #view .v8pa .v8pa-tl { min-width: 0; } #view .v8pa .v8pa-tl b { display: block; font-size: 13px; font-weight: 400; color: var(--v8-t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #view .v8pa .v8pa-tl small { display: block; margin-top: 3px; font-size: 12px; color: var(--v8-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #view .v8pa .v8pa-tt { position: relative; height: 28px; border-radius: 6px; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--v8-grid) calc(25% - 1px) 25%); } #view .v8pa .v8pa-tt::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--v8-hair-2); } #view .v8pa .v8pa-tb { position: absolute; top: 8px; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--c) 30%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent); } #view .v8pa .v8pa-tb::after { content: ""; position: absolute; right: -1px; top: -3px; width: 3px; height: 18px; border-radius: 2px; background: var(--c); } #view .v8pa .v8pa-tk { position: absolute; top: 9px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--v8-card); box-shadow: 0 0 0 1.5px var(--v8-t2); } #view .v8pa .v8pa-born { position: absolute; top: 10px; width: 8px; height: 8px; margin-left: -4px; border-radius: 2px; background: var(--v8-t3); } #view .v8pa .v8pa-td { min-width: 0; } #view .v8pa .v8t-legend i.v8pa-tki { background: var(--v8-card); box-shadow: 0 0 0 1.5px var(--v8-t2); } #view .v8pa .v8t-legend i.v8pa-borni { border-radius: 2px; background: var(--v8-t3); } /* the batches' calendar: made to use-by, the release, each day Passports issued, today drawn through every row */ #view .v8pa .v8pa-calendar .v8pa-taxs { overflow: visible; } #view .v8pa .v8pa-calendar .v8pa-tt { overflow: visible; } #view .v8pa .v8pa-cb { position: absolute; top: 8px; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); } #view .v8pa .v8pa-cm { position: absolute; top: 9px; width: 10px; height: 10px; margin-left: -5px; border-radius: 3px; background: var(--v8-t3); } #view .v8pa .v8pa-cr { position: absolute; top: 4px; width: 3px; height: 20px; margin-left: -1.5px; border-radius: 2px; background: var(--v8-pos); } #view .v8pa .v8pa-cp { position: absolute; top: 9px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--v8-s3); box-shadow: 0 0 0 2px var(--v8-card); } #view .v8pa .v8pa-ce { position: absolute; top: -14px; transform: translateX(-100%); font: 400 12px var(--v8-mono); font-style: normal; color: var(--v8-t3); white-space: nowrap; display: none; } #view .v8pa .v8t-legend i.v8pa-cri { width: 3px; height: 12px; border-radius: 2px; background: var(--v8-pos); } #view .v8pa .v8t-legend i.v8pa-cpi { background: var(--v8-s3); } /* ---------------- the batch rows: the board's grouped rows (next-v8-pages.css .v8q-row), with checks as cells ---------------- */ #view .v8pa .v8pa-list { padding: 0; overflow: hidden; } #view .v8pa .v8pa-list > .v8t-h { padding: 20px 22px 14px; } #view .v8pa .v8pa-thead, #view .v8pa .v8pa-main { display: grid; grid-template-columns: 32px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, 1fr); gap: 14px; align-items: center; } #view .v8pa .v8pa-thead { padding: 0 190px 10px 22px; font-size: 12px; color: var(--v8-t3); border-bottom: 1px solid var(--v8-hair-2); } #view .v8pa .v8pa-gh { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 22px; background: color-mix(in srgb, var(--v8-deep) 45%, var(--v8-card)); border-bottom: 1px solid var(--v8-hair-2); font-size: 13px; color: var(--v8-t2); } #view .v8pa .v8pa-gh em { font: 400 12px var(--v8-mono); font-style: normal; color: var(--v8-t3); } #view .v8pa .v8pa-row { display: grid; grid-template-columns: minmax(0, 1fr) 176px; align-items: center; gap: 14px; padding-right: 22px; border-bottom: 1px solid var(--v8-hair-2); transition: background-color .15s var(--v8-ease); } #view .v8pa .v8pa-row:last-child { border-bottom: 0; } #view .v8pa .v8pa-row:hover { background: color-mix(in srgb, var(--v8-raised) 55%, transparent); } #view .v8pa .v8pa-main { min-height: 64px; padding: 10px 0 10px 22px; font-size: 14px; color: var(--v8-t1); } #view .v8pa .v8pa-main:focus-visible { outline: 2px solid var(--v8-accent); outline-offset: -2px; } #view .v8pa .v8pa-main > span { min-width: 0; } #view .v8pa .v8pa-main small { display: block; margin-top: 3px; font: 400 12px/1.35 var(--v8-mono); color: var(--v8-t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #view .v8pa .v8pa-nm b { display: block; font-size: 13px; font-weight: 400; } #view .v8pa .v8pa-nm small { font-family: var(--v8-sans); font-size: 13px; color: var(--v8-t2); } #view .v8pa .v8pa-av { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, var(--v8-raised)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent); font: 500 12px var(--v8-sans); color: var(--c); } #view .v8pa .v8pa-act { justify-self: end; } #view .v8pa .v8pa-mute { color: var(--v8-t3); font-size: 13px; } #view .v8pa .v8pa-cells { display: inline-flex; align-items: center; gap: 3px; } #view .v8pa .v8pa-cells i { width: 10px; height: 16px; border-radius: 3px; background: var(--v8-raised); box-shadow: inset 0 0 0 1px var(--v8-hair); } #view .v8pa .v8pa-cells i.pos { background: var(--v8-pos); box-shadow: none; } #view .v8pa .v8pa-cells i.neg { background: var(--v8-neg); box-shadow: none; } #view .v8pa .v8pa-cells em { margin-left: 8px; font: 400 12px var(--v8-mono); font-style: normal; color: var(--v8-t2); } /* ---------------- the earlier tables on these tabs, in the v8 table form ---------------- */ /* All lots: the lot's name on one line with its number under it, never cut to three lines and an ellipsis */ #view .page.v8pa-all #lotTable td.two .v96-cl-t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } #view .page.v8pa-all #lotTable td.two .v96-cl-t b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } #view .page.v8pa-all #lotTable td.two .v96-cl-t .mono { font-size: 12px; color: var(--v8-t3); overflow: visible; max-width: none; } #view .page.v8pa-all #lotTable tbody tr:hover > td { background: color-mix(in srgb, var(--v8-raised) 55%, transparent); } /* Held: the register's rows at the board's height */ #view .page.v8pa-held > section.card table tbody tr:hover > td { background: color-mix(in srgb, var(--v8-raised) 55%, transparent); } /* the Staged Passports card: an empty state the height of a row, not a panel's: what it is on the left, its action on the right */ #view .page.v8pa-on > section.r91c-staged .v89-empty { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: center; justify-items: start; gap: 2px 16px !important; padding: 2px 0 0 !important; min-height: 0 !important; text-align: left !important; } #view .page.v8pa-on > section.r91c-staged .v89-empty > svg { display: none !important; } #view .page.v8pa-on > section.r91c-staged .v89-empty > b { grid-column: 1; font-size: 15px !important; line-height: 22px !important; font-weight: 500 !important; color: var(--v8-t1) !important; } #view .page.v8pa-on > section.r91c-staged .v89-empty > span { grid-column: 1; max-width: 72ch !important; font-size: 13px !important; line-height: 20px !important; color: var(--v8-t3) !important; } #view .page.v8pa-on > section.r91c-staged .v89-empty > button { grid-column: 2; grid-row: 1 / span 2; margin: 0 !important; } /* ClearGate: the order and its product never print over each other; the log and its receipt sit side by side without overlap */ #view .page.v8pa-cg .r91c-cgt { table-layout: fixed; } #view .page.v8pa-cg .r91c-cgt td, #view .page.v8pa-cg .r91c-log td { overflow: hidden; text-overflow: ellipsis; } #view .page.v8pa-cg .r91c-cgt td > *, #view .page.v8pa-cg .r91c-log td > * { min-width: 0; max-width: 100%; } /* ---------------- tablets and phones ---------------- */ @media (max-width: 1180px) { #view .v8pa .v8pa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } #view .v8pa .v8pa-g2e { grid-template-columns: minmax(0, 1fr); } #view .v8pa .v8pa-tax, #view .v8pa .v8pa-tr { grid-template-columns: 160px minmax(0, 1fr) 180px; } } @media (max-width: 899px) { #view .v8pa .v8pa-thead { display: none; } #view .v8pa .v8pa-main { grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr); row-gap: 8px; } #view .v8pa .v8pa-main > .v8pa-c3, #view .v8pa .v8pa-main > .v8pa-c4 { grid-column: 2 / span 1; } #view .v8pa .v8pa-main > .v8pa-c5 { grid-column: 3; grid-row: 1; } } @media (max-width: 699px) { #view .v8pa .v8pa-stats { grid-template-columns: minmax(0, 1fr); gap: 12px; } #view .v8pa .v8pa-stat { height: 116px; padding: 16px 18px; } #view .v8pa .v8pa-stat .v8t-v { font-size: 28px; } #view .v8pa .v8pa-stat .v8t-d { left: 18px; bottom: 14px; } #view .v8pa .v8pa-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } #view .v8pa .v8pa-tax { grid-template-columns: minmax(0, 1fr); } #view .v8pa .v8pa-tax > span:first-child, #view .v8pa .v8pa-tax > span:last-child { display: none; } #view .v8pa .v8pa-tr { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 10px 0; } #view .v8pa .v8pa-tr > .v8pa-tt { grid-column: 1 / -1; grid-row: 2; } #view .v8pa .v8pa-td { justify-self: end; max-width: 180px; } #view .v8pa .v8pa-hb { grid-template-columns: 96px minmax(0, 1fr) 24px; } #view .v8pa .v8pa-ob { grid-template-columns: minmax(0, 1fr) 56px auto; gap: 10px; } #view .v8pa .v8pa-list > .v8t-h { padding: 18px 16px 12px; } #view .v8pa .v8pa-gh { padding: 0 16px; } #view .v8pa .v8pa-row { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px 12px; } #view .v8pa .v8pa-main { grid-template-columns: 32px minmax(0, 1fr); padding: 12px 0 10px; } #view .v8pa .v8pa-main > .v8pa-c2, #view .v8pa .v8pa-main > .v8pa-c3, #view .v8pa .v8pa-main > .v8pa-c4, #view .v8pa .v8pa-main > .v8pa-c5 { grid-column: 2; grid-row: auto; } #view .v8pa .v8pa-act { justify-self: start; } #view .v8pa .v8pa-act .v8t-btn { height: 44px; } #view .v8pa .v8t-task .v8t-acts .v8t-btn { height: 44px; } #view .v8pa .v8pa-flat { margin: 6px -16px -14px; } #view .v8pa .v8pa-pad { padding: 4px 16px 18px; } } /* ---------------- round 2: the tile's emphasis, the timeline's words, the lot table's widths ---------------- */ #view .v8pa .v8pa-tile small em { font-style: normal; } #view .v8pa .v8pa-tile small em.neg { color: var(--v8-neg); } #view .v8pa .v8pa-life { position: absolute; top: 13px; height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--v8-t1) 22%, transparent); } #view .v8pa .v8pa-tw { position: absolute; top: 6px; font: 400 12px/16px var(--v8-sans); font-style: normal; color: var(--c); white-space: nowrap; padding: 0 4px; background: var(--v8-card); border-radius: 4px; } #view .v8pa .v8pa-td { font: 400 12px var(--v8-mono); color: var(--v8-t2); text-align: right; white-space: nowrap; } #view .v8pa .v8pa-tline:not(.v8pa-calendar) .v8pa-tax, #view .v8pa .v8pa-tline:not(.v8pa-calendar) .v8pa-tr { grid-template-columns: 190px minmax(0, 1fr) 64px; } #view .page.v8pa-all #lotTable col.c-lot { width: 262px !important; } #view .page.v8pa-all #lotTable col.c-sup { width: 186px !important; } #view .page.v8pa-all #lotTable col.c-st { width: 236px !important; } #view .page.v8pa-all #lotTable col.c-doc { width: 124px !important; } #view .page.v8pa-all #lotTable col.c-open { width: 96px !important; } #view .page.v8pa-all #lotTable col.c-pass { width: 92px !important; } #view .page.v8pa-all #lotTable col.c-upd { width: 84px !important; } #view .page.v8pa-all #lotTable td.two .v96-cl-t b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } @media (max-width: 699px) { #view .v8pa .v8pa-tline:not(.v8pa-calendar) .v8pa-tr { grid-template-columns: minmax(0, 1fr) auto; } } /* ---------------- round 3: figures that are buttons, the calendar, ClearGate's tables ---------------- */ #view .v8pa button.v8pa-stat, #view .v8pa button.v8pa-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } #view .v8pa button.v8pa-tile > span { width: 100%; } #view .v8pa .v8pa-calendar .v8pa-tax, #view .v8pa .v8pa-calendar .v8pa-tr { grid-template-columns: 170px minmax(0, 1fr) 176px; } #view .v8pa .v8pa-calendar .v8pa-td { text-align: left; font: inherit; } #view .v8pa .v8pa-tdy { position: absolute; top: -9px; bottom: -9px; width: 0; border-left: 1px dashed color-mix(in srgb, var(--v8-t1) 34%, transparent); } #view .v8pa .v8pa-taxs > .v8pa-tdy-l { color: var(--v8-t1); transform: translateX(-50%) !important; } #view .v8pa .v8pa-ob small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #view .v8pa .v8t-figs a:hover span { color: var(--v8-t1); } /* ClearGate: the order wraps at its slash instead of cutting; the log takes the row and its receipt sits under it */ #view .page.v8pa-cg .r91c-cgt col:nth-child(1) { width: 23% !important; } #view .page.v8pa-cg .r91c-cgt col:nth-child(3) { width: 13% !important; } #view .page.v8pa-cg .r91c-cgt col:nth-child(4) { width: 14% !important; } #view .page.v8pa-cg .r91c-cgt col:nth-child(5) { width: 18% !important; } #view .page.v8pa-cg .r91c-cgt td, #view .page.v8pa-cg .r91c-log td { white-space: normal !important; overflow-wrap: break-word; } #view .page.v8pa-cg .r91c-cgt td *, #view .page.v8pa-cg .r91c-log td * { white-space: normal !important; } #view .page.v8pa-cg .r91c-log-g { grid-template-columns: minmax(0, 1fr) !important; } #view .page.v8pa-cg .r91c-log-g > .tablewrap { min-width: 0 !important; width: auto !important; max-width: 100%; } #view .page.v8pa-cg .r91c-log-g > .r91c-receipt { grid-column: 1 !important; grid-row: auto !important; max-width: 560px; } /* the lot table's name cell: next-v7-work.css sets it a row with !important, so the column needs the same weight and one more id */ #view .page.v8pa-all #lotTable td.two .v96-cl-t { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 1px !important; white-space: normal !important; } #view .page.v8pa-all #lotTable td.two .v96-cl-t > span.mono { font-size: 12px !important; line-height: 16px !important; color: var(--v8-t3) !important; overflow: visible !important; } #view .page.v8pa-all #lotTable td.two .v96-cl-t > b { line-height: 20px !important; } /* Needs you's rows here hold one line each, the full words in their tooltip */ #view .v8pa :is(.v8pa-needs, .v8pa-flat) .v8t-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #view .v8pa :is(.v8pa-needs, .v8pa-flat) .v8t-m { overflow-wrap: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #view .v8pa .v8pa-st { max-width: 100%; } #view .v8pa .v8pa-st > span { overflow: hidden; } /* Issued: the Passport cell stacked (its number, its order, its link), so the list fits its card without a sideways scroll */ #view .page.v8pa-issued .v88pass td.v93-passcell { white-space: normal !important; } #view .page.v8pa-issued .v88pass td.v93-passcell > :is(.l1, .l2, .r91c-open) { display: block !important; margin-left: 0 !important; } /* ---------------- round 4: phones ---------------- */ #view .v8pa button.v8pa-tile { align-items: stretch; } @media (max-width: 699px) { #view .v8pa .v8pa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #view .v8pa .v8pa-stat { height: 112px; padding: 14px 14px; } #view .v8pa .v8pa-stat .v8t-l { font-size: 14px; } #view .v8pa .v8pa-stat .v8t-v { font-size: 28px; margin-top: 8px; } #view .v8pa .v8pa-stat .v8t-d { left: 14px; right: 14px; bottom: 12px; } #view .v8pa .v8pa-stat.has-x .v8t-d { right: 14px; } #view .v8pa .v8pa-stat .v8pa-segs { display: none; } #view .v8pa .v8pa-calendar .v8pa-tax { grid-template-columns: minmax(0, 1fr); } #view .v8pa .v8pa-calendar .v8pa-tr { grid-template-columns: minmax(0, 1fr) auto; } #view .v8pa .v8pa-calendar .v8pa-tr > .v8pa-tt { grid-column: 1 / -1; grid-row: 2; } #view .v8pa .v8pa-calendar .v8pa-td { max-width: 168px; } #view .v8pa .v8pa-tline .v8pa-tt { margin: 0 4px; } } /* ---------------- a Passport: its state under the title, then three panels (the record pages' own .v8x-panel and .v8l-sig) ---------------- */ #view .v8pa .v8pa-psub { margin: 0 0 16px; } #view .v8pa .v8pa-psub .v8ti { width: 15px; height: 15px; } #view .v8pa .v8pa-pg3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; } #view .v8pa .v8pa-pp { padding-bottom: 16px; } #view .v8pa .v8pa-facts { padding: 0 20px; } #view .v8pa .v8pa-fact { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--v8-hair-2); font-size: 13px; } #view .v8pa .v8pa-fact:first-child { border-top: 0; } #view .v8pa .v8pa-fact > span { color: var(--v8-t3); flex: none; } #view .v8pa .v8pa-fact > b { font-weight: 400; color: var(--v8-t1); text-align: right; overflow-wrap: anywhere; min-width: 0; } #view .v8pa .v8pa-plinks { display: flex; gap: 18px; padding: 12px 20px 0; border-top: 1px solid var(--v8-hair-2); margin-top: 6px; } #view .v8pa .v8pa-pcells { padding: 14px 20px 0; } #view .v8pa .v8l-sig p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--v8-t2); } #view .v8pa .v8pa-pslip { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; margin: 0 20px 6px; padding: 12px 14px; border-radius: 12px; background: var(--v8-raised); box-shadow: var(--v8-hi), 0 0 0 1px var(--v8-hair); font-size: 14px; color: var(--v8-t1); } #view .v8pa .v8pa-pslip .v8ti { width: 16px; height: 16px; margin-top: 1px; } #view .v8pa .v8pa-pslip small { display: block; margin-top: 3px; font: 400 12px var(--v8-mono); color: var(--v8-t3); } #view .v8pa .v8pa-pp > .v8t-li { margin: 0 20px; } #view .v8pa .v8x-ph .v8t-btn { height: 30px; } @media (max-width: 1180px) { #view .v8pa .v8pa-pg3 { grid-template-columns: minmax(0, 1fr); } } /* the Passport page is the v7x record grid (max 1032px, its status card in the second row); with the card carried into the composition it reads as a block the width of the tabs: the title and its two buttons on one row, the composition under them */ #view .page.v8pa-pass { display: block !important; max-width: none !important; } #view .page.v8pa-pass > .phead { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; height: auto !important; margin: 0 0 14px !important; } #view .page.v8pa-pass > .phead > .v7x-acts { grid-area: auto !important; position: static !important; margin: 0 !important; } #view .page.v8pa-pass > .r91c-pgrid { margin-top: 16px; } @media (max-width: 699px) { #view .v8pa .v8x-ph .v8t-btn, #view .v8pa .v8t-hr .v8t-link { min-height: 44px; display: inline-flex; align-items: center; } #view .v8pa .v8pa-plinks .v8t-link { min-height: 44px; display: inline-flex; align-items: center; } } @media (max-width: 699px) { #view .v8pa a.v8t-obs, #view .v8pa a.v8t-l { display: flex; align-items: center; min-height: 44px; } #view .v8pa .v8t-cal { min-height: 44px; } } /* ---------------- round 5: narrow panels (a tablet with the sidebar open) ---------------- */ #view .v8pa .v8pa-chart > .v8t-figs { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); } #view .v8pa .v8pa-stats { container-type: inline-size; } @container (max-width: 560px) { #view .v8pa .v8pa-stat .v8pa-segs { display: none; } #view .v8pa .v8pa-stat.has-x .v8t-d { right: 14px; } }