/* ═══ CHART BLOCK (task K1, reports-charts.js) ══════════════════════════════════
   Owned by K1. Everything between this line and "END CHART BLOCK" styles the SVG
   charts returned by window.ProstarCharts. K2 adds the page-kit rules AFTER the end
   marker and does not edit inside it.
   Standard: Reports design standard sections 3, 5 and 6 (build plan specs/00).
   Colours reach the SVG only through classes: a series class sets --rpx-c and the
   mark classes paint with it, so no hex ever appears in a chart string. */

/* New chart tokens. They move to design-tokens.css at task G5 (README "Reports").
   Flow hexes are read from the Metrics app (segmented-revenue-sankey.tsx:8 and the
   source colours at jobs-dashboard.tsx:478), the palette the owner set 2026-08-31.
   --ds-chart-prior-2 is darkened from #a2a9b3 (2.37:1) to reach 3:1 on white (3.10:1). */
:root {
  --ds-chart-prior-2:   #8b939e;   /* prior-month comparison line, 1.5px (3.10:1 on white) */
  --ds-flow-revenue:    #0b1d36;   /* Revenue (label ink; the column is the labor + materials split) */
  --ds-flow-quote:      #2a78d6;   /* Quote-generated source */
  --ds-flow-recurring:  #5b7898;   /* Recurring source */
  --ds-flow-service:    #849aaf;   /* Direct service source */
  --ds-flow-labor:      #a84a2c;   /* Labor revenue and labor cost */
  --ds-flow-materials:  var(--ds-chart-5);   /* Materials revenue and cost: teal (kit 4: no ochre anywhere) */
  --ds-flow-gross:      #7e90ac;   /* Gross profit pool */
  --ds-flow-overhead:   #7d55a3;   /* Overhead */
  --ds-flow-other:      #7f8998;   /* Other costs */
  --ds-flow-net:        #3f9e2d;   /* Net profit */
  --ds-flow-loss:       var(--ds-st-late);   /* net loss and shortfall ribbons */
}

/* Frame */
.rpx-chart { position: relative; margin: 0; min-width: 0; color: var(--ds-ink-2); }
.rpx-chart__svg { display: block; width: 100%; height: auto; overflow: hidden; }
.rpx-chart__svg:focus { outline: none; }
.rpx-chart__svg:focus-visible { outline: var(--ds-focus-w) solid var(--ds-focus); outline-offset: var(--ds-focus-off); border-radius: var(--ds-r-sm); }
.rpx-chart text { font-family: var(--ds-font); font-size: var(--ds-text-sm); font-weight: var(--ds-w-regular); font-variant-numeric: var(--ds-nums); fill: var(--ds-ink-3); }
.rpx-chart__empty { margin: 0; padding: var(--ds-s-4) 0; font-size: var(--ds-text-base); line-height: var(--ds-lh-base); color: var(--ds-ink-2); }
.rpx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Legend (two or more series only; S6.4) */
.rpx-legend { display: flex; flex-wrap: wrap; gap: var(--ds-s-1) var(--ds-s-4); margin: 0 0 var(--ds-s-2); padding: 0; list-style: none; font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-2); }
.rpx-legend__item { display: inline-flex; align-items: center; gap: var(--ds-s-2); white-space: nowrap; }
.rpx-legend__sw { flex: none; width: 8px; height: 8px; border-radius: var(--ds-r-tag); background: var(--rpx-tex, var(--rpx-c)); }
.rpx-legend__sw--line { width: 12px; height: 2px; border-radius: 0; }
.rpx-legend__item--dash .rpx-legend__sw--line { background: repeating-linear-gradient(90deg, var(--rpx-c) 0 2px, transparent 2px 4px); }
.rpx-legend__item--dash:not(.rpx-s-py) .rpx-legend__sw--line { background: repeating-linear-gradient(90deg, var(--rpx-c) 0 4px, transparent 4px 6px); }
.rpx-legend__v { color: var(--ds-ink); font-weight: var(--ds-w-medium); font-variant-numeric: var(--ds-nums); }

/* Series identity (S5.1 slot order). Each sets --rpx-c for its marks. */
.rpx-s-cur  { --rpx-c: var(--ds-chart-2); }
.rpx-s-py   { --rpx-c: var(--ds-field); }
.rpx-s-pm   { --rpx-c: var(--ds-chart-prior-2); }
.rpx-s-c2   { --rpx-c: var(--ds-chart-4); }
.rpx-s-c3   { --rpx-c: var(--ds-chart-5); }
.rpx-s-c4   { --rpx-c: var(--ds-chart-shop); }
.rpx-s-rest { --rpx-c: var(--ds-chart-6); }
/* Categories five to seven: the Other grey with a texture in --ds-field (hatch, dots, stripes), never a new hue (S5.5).
   SVG marks fill with the pattern the chart defines (url(#rpx-pat-cN)); legend and tooltip swatches draw the same
   texture with a gradient (--rpx-tex). */
.rpx-s-c5, .rpx-s-c6, .rpx-s-c7 { --rpx-c: var(--ds-chart-6); }
.rpx-s-c5 { --rpx-fill: url(#rpx-pat-c5); --rpx-tex: repeating-linear-gradient(45deg, var(--ds-field) 0 1.5px, var(--ds-chart-6) 1.5px 4px); }
.rpx-s-c6 { --rpx-fill: url(#rpx-pat-c6); --rpx-tex: radial-gradient(circle, var(--ds-field) 1px, transparent 1.5px) 0 0 / 4px 4px, var(--ds-chart-6); }
.rpx-s-c7 { --rpx-fill: url(#rpx-pat-c7); --rpx-tex: repeating-linear-gradient(90deg, var(--ds-field) 0 1.5px, var(--ds-chart-6) 1.5px 4px); }
/* Categories eight to fifteen (a long list such as clocked time by activity): more textures on the same grey; c13 is
   the field grey itself, solid. */
.rpx-s-c8, .rpx-s-c9, .rpx-s-c10, .rpx-s-c11, .rpx-s-c12, .rpx-s-c14, .rpx-s-c15 { --rpx-c: var(--ds-chart-6); }
.rpx-s-c8 { --rpx-fill: url(#rpx-pat-c8); --rpx-tex: repeating-linear-gradient(-45deg, var(--ds-field) 0 1.5px, var(--ds-chart-6) 1.5px 4px); }
.rpx-s-c9 { --rpx-fill: url(#rpx-pat-c9); --rpx-tex: repeating-linear-gradient(0deg, var(--ds-field) 0 1.5px, var(--ds-chart-6) 1.5px 4px); }
.rpx-s-c10 { --rpx-fill: url(#rpx-pat-c10); --rpx-tex: repeating-linear-gradient(45deg, var(--ds-field) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, var(--ds-field) 0 1px, var(--ds-chart-6) 1px 4px); }
.rpx-s-c11 { --rpx-fill: url(#rpx-pat-c11); --rpx-tex: radial-gradient(circle, var(--ds-field) 1.6px, transparent 2px) 0 0 / 6px 6px, var(--ds-chart-6); }
.rpx-s-c12 { --rpx-fill: url(#rpx-pat-c12); --rpx-tex: conic-gradient(var(--ds-field) 25%, var(--ds-chart-6) 0 50%, var(--ds-field) 0 75%, var(--ds-chart-6) 0) 0 0 / 4px 4px; }
.rpx-s-c13 { --rpx-c: var(--ds-field); }
.rpx-s-c14 { --rpx-fill: url(#rpx-pat-c14); --rpx-tex: repeating-linear-gradient(90deg, var(--ds-field) 0 1px, transparent 1px 5px), repeating-linear-gradient(0deg, var(--ds-field) 0 1px, var(--ds-chart-6) 1px 5px); }
.rpx-s-c15 { --rpx-fill: url(#rpx-pat-c15); --rpx-tex: linear-gradient(0deg, var(--ds-chart-6) 0 1px, transparent 1px 2.5px, var(--ds-chart-6) 2.5px) 0 0 / 6px 4px, linear-gradient(90deg, var(--ds-field) 0 3px, var(--ds-chart-6) 3px) 0 0 / 6px 4px; }
.rpx-pat-bg { fill: var(--ds-chart-6); }
.rpx-pat-fg { fill: var(--ds-field); }
.rpx-s-soft { --rpx-c: var(--ds-chart-3); }
.rpx-s-over  { --rpx-c: var(--ds-st-late); }
.rpx-s-under { --rpx-c: var(--ds-st-done); }
.rpx-s-on    { --rpx-c: var(--ds-chart-6); }
.rpx-f-revenue   { --rpx-c: var(--ds-flow-revenue); }
.rpx-f-quote     { --rpx-c: var(--ds-flow-quote); }
.rpx-f-recurring { --rpx-c: var(--ds-flow-recurring); }
.rpx-f-service   { --rpx-c: var(--ds-flow-service); }
.rpx-f-labor     { --rpx-c: var(--ds-flow-labor); }
.rpx-f-materials { --rpx-c: var(--ds-flow-materials); }
.rpx-f-gross     { --rpx-c: var(--ds-flow-gross); }
.rpx-f-overhead  { --rpx-c: var(--ds-flow-overhead); }
.rpx-f-other     { --rpx-c: var(--ds-flow-other); }
.rpx-f-net       { --rpx-c: var(--ds-flow-net); }
.rpx-f-loss      { --rpx-c: var(--ds-flow-loss); }

/* Axes and grid (S6.2, S6.3) */
.rpx-grid { stroke: var(--ds-hair); stroke-width: 1; shape-rendering: crispEdges; }
.rpx-base { stroke: var(--ds-line); stroke-width: 1; shape-rendering: crispEdges; }
.rpx-zero { stroke: var(--ds-field); stroke-width: 1; shape-rendering: crispEdges; }
.rpx-chart .rpx-ax { fill: var(--ds-ink-3); }
.rpx-chart .rpx-ax--sel { fill: var(--ds-ink); font-weight: var(--ds-w-semi); }
.rpx-chart .rpx-ax--year { fill: var(--ds-ink-3); }

/* Marks */
.rpx-line { fill: none; stroke: var(--rpx-c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rpx-line--thin { stroke-width: 1.5; }
.rpx-line--part { stroke-dasharray: 4 3; }
.rpx-line--year { stroke-dasharray: 1.5 3; }
.rpx-line--dash { stroke-dasharray: 6 4; }   /* a line the page marks dash: true (kit 4) */   /* year-ago line beside last month's: dotted, so the two greys differ by shape */
.rpx-area { fill: var(--rpx-c); fill-opacity: 0.1; stroke: none; }
.rpx-end { fill: var(--rpx-c); stroke: var(--ds-surface); stroke-width: 2; }
.rpx-end--hollow { fill: var(--ds-surface); stroke: var(--rpx-c); stroke-width: 2; }
.rpx-bar { fill: var(--rpx-fill, var(--rpx-c)); }
.rpx-bar--part { fill-opacity: 0.35; }
.rpx-track { fill: var(--ds-hair); }   /* empty track: lighter than the Other slot (--ds-chart-6) */
.rpx-track--quiet { fill: var(--ds-hair); }
.rpx-cap { fill: var(--ds-ink); }
.rpx-zone { fill: var(--ds-ink); fill-opacity: 0.07; }   /* over-capacity zone: the track past the capacity mark (Metrics tc-over-capacity) */
.rpx-cap.rpx-centre { fill: var(--ds-field); }   /* centre line of a diverging row */
.rpx-node { fill: var(--rpx-c); }
.rpx-link { fill: var(--rpx-c); fill-opacity: 0.34; }
.rpx-pool-extra { fill: var(--ds-surface); fill-opacity: 0.6; stroke: var(--ds-flow-other); stroke-width: 1; }
.rpx-leader { fill: none; stroke: var(--rpx-c); stroke-width: 1.5; }
.rpx-leader-halo { fill: none; stroke: var(--ds-surface); stroke-width: 4; }
.rpx-dotmark { fill: var(--rpx-c); }

/* Direct labels and annotations (S3: 12/16 500 ink-2 with a 3px surface halo) */
.rpx-chart .rpx-note__bg { fill: var(--ds-surface); opacity: .92; }   /* a label another line passes behind (a month-end pace label) */
.rpx-chart .rpx-lbl { fill: var(--ds-ink-2); font-weight: var(--ds-w-medium); paint-order: stroke; stroke: var(--ds-surface); stroke-width: 3px; stroke-linejoin: round; }
.rpx-chart .rpx-lbl--strong { fill: var(--ds-ink); font-weight: var(--ds-w-semi); }
.rpx-chart .rpx-lbl--quiet { fill: var(--ds-ink-3); font-weight: var(--ds-w-regular); }
.rpx-chart .rpx-lbl--val { fill: var(--ds-ink); font-weight: var(--ds-w-medium); }
.rpx-chart .rpx-lbl--loss { fill: var(--ds-st-late-ink); }
.rpx-chart .rpx-lbl--row { fill: var(--ds-ink); font-size: var(--ds-text-base); }
.rpx-chart .rpx-lbl--sub { fill: var(--ds-ink-3); }
.rpx-chart .rpx-lbl--head { fill: var(--ds-ink-3); font-size: var(--ds-text-caps); font-weight: var(--ds-w-semi); letter-spacing: var(--ds-track-caps); text-transform: uppercase; }   /* column heads (S3.1) */
.rpx-chart .rpx-lbl--fig { fill: var(--ds-ink); font-size: var(--ds-text-d2); font-weight: var(--ds-w-semi); }   /* a figure in its own column: tile size (20/24 600) */

/* Hover layer: one guide, hover dots, hit areas (S6.8). Pointer is a hand only on a drill. */
.rpx-hit { fill: transparent; stroke: none; }
.rpx-hit[data-drill] { cursor: pointer; }
.rpx-guide { stroke: var(--ds-field); stroke-width: 1; opacity: 0; pointer-events: none; }
.rpx-hdot { fill: var(--rpx-c); stroke: var(--ds-surface); stroke-width: 2; opacity: 0; pointer-events: none; }
.rpx-chart.is-hover .rpx-guide.is-on,
.rpx-chart.is-hover .rpx-hdot.is-on { opacity: 1; }
.rpx-hl.is-on { opacity: 1; }
.rpx-hl { fill: var(--ds-ink); fill-opacity: 0.04; opacity: 0; pointer-events: none; }

/* Matrix (a plain table; tint 0-20% of --ds-chart-2 set per cell through --rpx-t) */
.rpx-matrix-wrap { max-width: 100%; overflow-x: auto; }
.rpx-matrix { width: 100%; border-collapse: collapse; font-size: var(--ds-text-base); line-height: var(--ds-lh-base); font-variant-numeric: var(--ds-nums); color: var(--ds-ink); }
.rpx-matrix th { padding: 0 var(--ds-s-2); height: 32px; font-size: var(--ds-text-caps); font-weight: var(--ds-w-semi); letter-spacing: var(--ds-track-caps); text-transform: uppercase; color: var(--ds-ink-3); text-align: right; white-space: nowrap; }
.rpx-matrix th[scope="row"] { text-align: left; text-transform: none; letter-spacing: 0; font-size: var(--ds-text-base); font-weight: var(--ds-w-medium); color: var(--ds-ink); }
.rpx-matrix td { padding: 0 var(--ds-s-2); height: 36px; text-align: right; white-space: nowrap; border-top: 1px solid var(--ds-surface); background: color-mix(in srgb, var(--ds-chart-2) var(--rpx-t, 0%), var(--ds-surface)); }
.rpx-matrix td.rpx-matrix__none { background: none; }

/* In-cell bar (C10), progress (C12), spark (C11) */
.rpx-cellbar { display: inline-grid; grid-template-columns: 80px 48px; align-items: center; gap: var(--ds-s-2); vertical-align: middle; }   /* fixed width: tracks share one left edge in any column */
.rpx-cellbar__v { text-align: right; font-variant-numeric: var(--ds-nums); }
.rpx-cellbar__svg, .rpx-spark__svg, .rpx-progress__svg { display: block; flex: none; }
.rpx-progress { display: flex; align-items: center; gap: var(--ds-s-2); font-size: var(--ds-text-sm); color: var(--ds-ink-2); font-variant-numeric: var(--ds-nums); }
.rpx-progress__svg { flex: 1 1 auto; min-width: 0; }

/* Tooltip (S6.7): the README hover card */
.rpx-tip { position: fixed; z-index: 60; top: 0; left: 0; min-width: 140px; max-width: 280px; padding: var(--ds-s-2) var(--ds-s-3); background: var(--ds-surface); border-radius: var(--ds-r-lg); box-shadow: var(--ds-e-pop); font-family: var(--ds-font); font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-2); font-variant-numeric: var(--ds-nums); pointer-events: none; opacity: 0; transition: opacity var(--ds-fast) var(--ds-ease); }
.rpx-tip.is-on { opacity: 1; }
.rpx-tip__t { margin-bottom: var(--ds-s-1); font-weight: var(--ds-w-semi); color: var(--ds-ink); white-space: normal; overflow-wrap: break-word; }   /* a long title (Today's capacity wall) wraps inside the box */
.rpx-tip__r { display: flex; align-items: center; gap: var(--ds-s-2); white-space: nowrap; }
.rpx-tip__sw { flex: none; width: 8px; height: 8px; border-radius: var(--ds-r-tag); background: var(--rpx-tex, var(--rpx-c)); }
.rpx-tip__v { margin-left: auto; padding-left: var(--ds-s-4); font-weight: var(--ds-w-medium); color: var(--ds-ink); }
.rpx-tip__d { margin-top: var(--ds-s-1); color: var(--ds-ink-2); white-space: nowrap; }
.rpx-tip__g--good { color: var(--ds-st-done); }
.rpx-tip__g--bad  { color: var(--ds-st-late); }
.rpx-tip__g--none { color: var(--ds-icon); }
.rpx-chart__readout { height: var(--ds-lh-sm); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0 0 var(--ds-s-1); font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-2); font-variant-numeric: var(--ds-nums); }
@media (hover: hover) { .rpx-chart__readout:empty { display: none; } }

.rpx-chart.is-hover .rpx-note { opacity: 0; }   /* annotations step aside while the tooltip shows */
.rpx-chart__svg[data-scrub] { touch-action: pan-y; }   /* a sideways drag scrubs the chart; vertical still scrolls */
.rpx-chart__summary { display: flex; flex-wrap: wrap; gap: 0 var(--ds-s-2); margin: 0 0 var(--ds-s-2); font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-2); font-variant-numeric: var(--ds-nums); }
.rpx-chart__summary span + span::before { content: '\00b7'; margin-right: var(--ds-s-2); color: var(--ds-icon); }
.rpx-chart__captions { display: flex; justify-content: space-between; gap: var(--ds-s-4); margin: 0 0 var(--ds-s-2); font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); font-weight: var(--ds-w-medium); color: var(--ds-ink-3); }
.rpx-chart__foot { margin-top: var(--ds-s-2); padding-top: var(--ds-s-2); border-top: 1px solid var(--ds-hair); }
.rpx-chart__remain { margin: 0; font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); font-variant-numeric: var(--ds-nums); }
.rpx-chart__more { display: inline-flex; align-items: center; min-height: 32px; margin: var(--ds-s-1) 0 0; padding: 0; border: 0; background: none; font-family: var(--ds-font); font-size: var(--ds-text-sm); font-weight: var(--ds-w-medium); color: var(--ds-st-site-ink); cursor: pointer; }
.rpx-chart__more:hover { text-decoration: underline; }
.rpx-chart__more:focus-visible { outline: var(--ds-focus-w) solid var(--ds-focus); outline-offset: var(--ds-focus-off); border-radius: var(--ds-r-sm); }
@media (max-width: 759px) { .rpx-chart__more { min-height: 44px; } }

@media (prefers-reduced-motion: reduce) { .rpx-tip { transition: none; } }
@media print {
  .rpx-tip, .rpx-chart__readout { display: none; }
  .rpx-guide, .rpx-hdot, .rpx-hl { display: none; }
}
/* ═══ END CHART BLOCK (task K1) ═══════════════════════════════════════════════ */

/* ═══ PAGE KIT BLOCK (task K2, reports-kit.js) ══════════════════════════════════════
   Owned by K2: everything after the chart block's end marker. Tokens only (no hex, no
   off-scale type or radius). Standard: Reports design standard sections 1-4, 7-9.
   Breakpoints: 1440 and up, 1024-1279, 760-1023, 560-759, under 560 (S2.3). */

/* Page frame (S2.1, S2.2): content column 1280 wide, 24 between bands, 16 between cards. */
.rpx-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ds-s-6); max-width: 1280px; min-width: 0; font-variant-numeric: var(--ds-nums); }
.rpx-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ds-s-4); align-items: stretch; }
.rpx-cols > div > .rpx-card { height: 100%; align-content: start; }
/* A state card (empty, error, loading, not allowed) is only as tall as its content; it does not stretch to a tall neighbour. */
.rpx-cols > div:has(> .rpx-card--state) { align-self: start; }
.rpx-cols > div > .rpx-card--state { height: auto; }
/* Every span K.row accepts (1-12; any other span throws in the kit). */
.rpx-c1 { grid-column: span 1; } .rpx-c2 { grid-column: span 2; } .rpx-c3 { grid-column: span 3; } .rpx-c4 { grid-column: span 4; }
.rpx-c5 { grid-column: span 5; } .rpx-c6 { grid-column: span 6; } .rpx-c7 { grid-column: span 7; } .rpx-c8 { grid-column: span 8; }
.rpx-c9 { grid-column: span 9; } .rpx-c10 { grid-column: span 10; } .rpx-c11 { grid-column: span 11; } .rpx-c12 { grid-column: span 12; }
.rpx-cols > div { min-width: 0; }
.rpx-skrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-s-4); }
@media (max-width: 1023px) { .rpx-cols > div[class^="rpx-c"] { grid-column: span 12; } .rpx-skrow { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 760px) and (max-width: 1023px) { .rpx-cols > div.rpx-c1, .rpx-cols > div.rpx-c2, .rpx-cols > div.rpx-c3 { grid-column: span 6; } }

/* Period control (task K3, reports-period.js). One compact row: the label button is the picker (opens a drawn panel), so no native
   date, month or select control shows. Month: arrow, label, arrow. Day: the same plus Today. Range: presets, From, To. */
.acct .rpx-period.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-s-2); padding: 0; position: relative; }
.rpx-step { display: inline-flex; align-items: center; gap: var(--ds-s-1); min-width: 0; }
.rpx-anchor { position: relative; display: inline-flex; min-width: 0; }
.acct .rpx-period .btn.rpx-arrow { width: var(--ds-control-h); min-width: var(--ds-control-h); height: var(--ds-control-h); padding: 0; }
.acct .rpx-period .btn.rpx-label { min-width: 0; height: var(--ds-control-h); gap: var(--ds-s-2); padding: 0 var(--ds-s-3); font-size: var(--ds-text-base); font-weight: var(--ds-w-semi); color: var(--ds-ink); white-space: nowrap; justify-content: flex-start; }
.acct .rpx-period .rpx-step:not(.rpx-range) .btn.rpx-label { min-width: 164px; justify-content: center; }
.acct .rpx-period .btn.rpx-label .ico { color: var(--ds-icon); }
.rpx-to { color: var(--ds-ink-3); font-size: var(--ds-text-sm); }
.rpx-pop { position: absolute; z-index: 30; top: calc(100% + var(--ds-s-1)); left: 0; min-width: 248px; padding: var(--ds-s-3); background: var(--ds-surface); border-radius: var(--ds-r-lg); box-shadow: var(--ds-e-pop); border: 1px solid var(--ds-line); }
.rpx-pophead { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-s-2); margin-bottom: var(--ds-s-2); }
.rpx-poptitle { font-size: var(--ds-text-base); font-weight: var(--ds-w-semi); color: var(--ds-ink); }
.rpx-pgrid { display: grid; gap: var(--ds-s-1); }
.rpx-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rpx-days { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.rpx-dow { text-align: center; font-size: var(--ds-text-sm); color: var(--ds-ink-3); }
.rpx-list { display: grid; gap: var(--ds-s-1); }
.acct .rpx-pop .rpx-cell { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--ds-control-h); min-width: 0; padding: 0; border: 0; border-radius: var(--ds-r-md); background: transparent; color: var(--ds-ink); font: inherit; font-size: var(--ds-text-base); text-align: center; cursor: pointer; box-shadow: none; }
.acct .rpx-pop .rpx-cell:hover:not(:disabled) { background: var(--ds-paper-hover); }
.acct .rpx-pop .rpx-cell.now { box-shadow: inset 0 0 0 1px var(--ds-field); }
.acct .rpx-pop .rpx-cell.on, .acct .rpx-pop .rpx-cell.on:hover { background: var(--ds-action); color: var(--ds-action-fg); font-weight: var(--ds-w-semi); box-shadow: none; }
.acct .rpx-pop .rpx-cell:disabled { color: var(--ds-ink-3); cursor: default; opacity: 0.45; }
.acct .rpx-pop .btn.rpx-arrow:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.acct .rpx-pop .rpx-opt { justify-content: flex-start; text-align: left; padding: 0 var(--ds-s-3); }
.rpx-cell:focus-visible, .acct .rpx-period .btn:focus-visible { outline: var(--ds-focus-w) solid var(--ds-focus); outline-offset: var(--ds-focus-off); }
.rpx-err { flex-basis: 100%; color: var(--ds-st-late-ink); font-size: var(--ds-text-sm); }
@media (max-width: 759px) {
  .acct .rpx-pop .rpx-cell, .acct .rpx-period .btn.rpx-arrow, .acct .rpx-period .btn.rpx-label, .acct .rpx-period .btn { min-height: var(--ds-touch-h); height: var(--ds-touch-h); }
  .acct .rpx-period .btn.rpx-arrow { width: var(--ds-touch-h); min-width: var(--ds-touch-h); }
}
@media (max-width: 559px) {
  .acct .rpx-period.toolbar { width: 100%; }
  .rpx-step:not(.rpx-range) { width: 100%; }
  .rpx-step:not(.rpx-range) .rpx-anchor { flex: 1 1 auto; }
  .acct .rpx-period .rpx-step:not(.rpx-range) .btn.rpx-label { width: 100%; min-width: 0; }
  .rpx-range { width: 100%; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto minmax(0, 1fr); }
  .rpx-range .rpx-anchor, .rpx-range .btn.rpx-label { width: 100%; }
  .acct .rpx-range .btn.rpx-label { padding: 0 var(--ds-s-2); font-size: var(--ds-text-sm); }
  .acct .rpx-range .btn.rpx-label .ico { display: none; }
  .rpx-pop { position: fixed; left: var(--ds-s-4); right: var(--ds-s-4); top: auto; bottom: var(--ds-s-4); min-width: 0; }
}

/* Page head (3.1, S2.6): title, period, freshness, buttons: one row from 1024 up. */
.acct .phead.rpx-head { align-items: center; flex-wrap: wrap; gap: var(--ds-s-2) var(--ds-s-4); }
.acct .phead.rpx-head .acts { margin-left: 0; position: static; padding: 0; background: none; box-shadow: none; width: auto; }
.acct .phead.rpx-head .acts .btn { flex: none; height: var(--ds-control-h); font-size: var(--ds-text-base); border-radius: var(--ds-r-md); }
.acct .phead.rpx-head .acts .btn.sq { width: var(--ds-control-h); }
.acct .phead.rpx-head .mnu-list { min-width: 160px; }
.acct .phead.rpx-head .mnu-list { position: absolute; right: 0; left: auto; top: calc(100% + 4px); bottom: auto; width: auto; transform: none; }
@media (min-width: 1024px) { .acct .phead.rpx-head { flex-wrap: nowrap; } .rpx-head .rpx-fresh { flex: 0 1 auto; overflow: hidden; } .rpx-head__period { flex: 0 1 auto; } .rpx-label { min-width: 120px; } }
@media (min-width: 760px) { .rpx-act-m { display: none; } }
.acct .phead.rpx-head .rpx-act-d { display: inline-flex; gap: var(--ds-s-2); align-items: center; }
@media (max-width: 759px) { .rpx-act-d { display: none !important; } .acct .phead.rpx-head .acts .btn, .acct .phead.rpx-head .acts .btn.sq { height: var(--ds-touch-h); width: var(--ds-touch-h); } }
.rpx-head__period { min-width: 0; }
.rpx-fresh { margin-left: auto; display: inline-flex; align-items: center; gap: var(--ds-s-3); min-width: 0; font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); white-space: nowrap; }
.rpx-late { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--ds-s-1); color: var(--ds-ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rpx-asof { white-space: nowrap; }
.rpx-dot { display: inline-block; flex: none; width: 6px; height: 6px; margin-right: var(--ds-s-2); border-radius: var(--ds-r-full); vertical-align: middle; }
.rpx-late .rpx-dot { margin-right: 0; }
.rpx-dot--bad { background: var(--ds-st-late); }
.rpx-dot--good { background: var(--ds-st-done); }
@media (max-width: 559px) {
  .acct .phead.rpx-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .acct .phead.rpx-head .tt { grid-column: 1; grid-row: 1; }
  .acct .phead.rpx-head .acts { grid-column: 2; grid-row: 1; margin-left: 0; }
  .rpx-head__period, .rpx-head .rpx-fresh { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 1023px) { .rpx-fresh { order: 3; margin-left: 0; flex-basis: 100%; flex-wrap: wrap; white-space: normal; } .acct .phead.rpx-head .acts { margin-left: auto; } }

/* Headline band (3.2, S2.2): lead 4 columns + tiles 8; at most 112 tall at 1440. */
.rpx-band { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1px; overflow: hidden; border-radius: var(--ds-r-lg); background: var(--ds-hair); box-shadow: 0 0 0 1px var(--ds-line); }
.rpx-band--nolead { grid-template-columns: minmax(0, 1fr); }
.rpx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--ds-hair); }
.rpx-band--n1 .rpx-tiles { grid-template-columns: minmax(0, 1fr); } .rpx-band--n2 .rpx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acct .rpx-fig { display: grid; align-content: start; justify-items: start; gap: 0; min-width: 0; padding: var(--ds-s-3) var(--ds-s-4); margin: 0; border: 0; background: var(--ds-surface); color: var(--ds-ink); font: inherit; text-align: left; }
.rpx-fig--btn { cursor: pointer; }
.rpx-fig--btn:hover { background: var(--ds-paper-hover); }
.rpx-fig--btn:focus-visible { outline: var(--ds-focus-w) solid var(--ds-focus); outline-offset: calc(var(--ds-focus-w) * -1); }
.rpx-fig__label { font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); font-weight: var(--ds-w-medium); color: var(--ds-ink-3); }
.rpx-fig__value { display: block; min-height: 24px; font-size: var(--ds-text-md); line-height: 24px; font-weight: var(--ds-w-semi); font-variant-numeric: var(--ds-nums); color: var(--ds-ink); white-space: nowrap; }
.rpx-fig--lead .rpx-fig__value { min-height: 36px; font-size: 32px; line-height: 36px; letter-spacing: -0.02em; }
.rpx-fig--tile .rpx-fig__value { font-size: var(--ds-text-d2); line-height: var(--ds-lh-d2); }
.rpx-fig__sub { display: block; min-height: var(--ds-lh-sm); font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-2); font-variant-numeric: var(--ds-nums); }
.rpx-fig__sub:empty { display: none; }
/* Sub-values wrap whole. The separator sits in the gap before each value; at the start of a wrapped line it falls
   outside the box and is clipped, so no line starts or ends with a dot (S1.4). */
.rpx-fig__sub { display: flex; flex-wrap: wrap; gap: 0 var(--ds-s-4); clip-path: inset(0); }
.rpx-sp { position: relative; white-space: nowrap; }
.rpx-sp + .rpx-sp::before { content: "\00b7"; position: absolute; right: 100%; width: var(--ds-s-4); text-align: center; color: var(--ds-ink-3); }
.rpx-fig__foot { display: block; margin-top: var(--ds-s-1); font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); }
/* A figure that opens something and also has a foot link: the button and the link side by side in the tree. */
.acct .rpx-fig--split { padding: 0; }
.acct .rpx-fig__main { display: grid; align-content: start; justify-items: start; width: 100%; margin: 0; padding: var(--ds-s-3) var(--ds-s-4) 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rpx-fig__main:hover { background: var(--ds-paper-hover); }
.rpx-fig__main:focus-visible { outline: var(--ds-focus-w) solid var(--ds-focus); outline-offset: calc(var(--ds-focus-w) * -1); }
.rpx-fig--split .rpx-fig__foot { margin: 0; padding: 0 var(--ds-s-4) var(--ds-s-3); }
/* Figures side by side inside a card (K.figRow): no band chrome, aligned with the card title. */
.rpx-figrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--ds-s-2) var(--ds-s-4); align-content: start; }
.acct .rpx-figrow .rpx-fig { padding: 0; background: none; }
.rpx-stack { display: grid; gap: var(--ds-s-2); align-content: start; justify-items: start; min-width: 0; }
.rpx-stack > .rpx-figrow { justify-self: stretch; }
.acct .rpx-disclose { justify-self: start; gap: var(--ds-s-1); padding-left: 0; padding-right: var(--ds-s-2); color: var(--ds-ink-2); font-weight: var(--ds-w-medium); }
.rpx-disclose .n { color: var(--ds-ink-3); font-weight: var(--ds-w-regular); }
.rpx-dw { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) { .rpx-band { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .rpx-fig--tile .rpx-fig__deltas { flex-direction: column; } }
.rpx-fig__deltas { display: flex; flex-wrap: wrap; gap: 0 var(--ds-s-3); font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); }
.rpx-loss { color: var(--ds-st-late-ink); }
.rpx-delta { color: var(--ds-ink-2); max-width: 100%; font-variant-numeric: var(--ds-nums); }
.rpx-delta__g { margin-right: var(--ds-s-1); font-style: normal; }
.rpx-delta--good .rpx-delta__g { color: var(--ds-st-done); }
.rpx-delta--bad .rpx-delta__g { color: var(--ds-st-late); }
.rpx-delta--none .rpx-delta__g { color: var(--ds-icon); }
.rpx-reason { display: inline-flex; align-items: center; color: var(--ds-ink-3); }
.rpx-reason .rpx-dot { margin-right: var(--ds-s-1); }
@media (max-width: 1023px) {
  .rpx-band, .rpx-band--nolead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpx-tiles { display: contents; }
  .rpx-band--n2 .rpx-tiles > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  .rpx-band > .rpx-fig--lead { grid-column: 1 / -1; }
  .rpx-band--n2 .rpx-tiles > * { grid-column: 1 / -1; }   /* two tiles under a lead: each full width, so a comparison ("+48.0% vs Nov 1-12, 2025") reads on one line */
  .rpx-band--n1 .rpx-tiles > :last-child, .rpx-band--n3 .rpx-tiles > :last-child { grid-column: 1 / -1; }
  .rpx-fig__deltas { flex-direction: column; }
  
}

/* Cards (3.5): white, 1 px line, 16 padding, never nested. */
.rpx-card { display: grid; gap: var(--ds-s-3); align-content: start; min-width: 0; padding: var(--ds-s-4); background: var(--ds-surface); border-radius: var(--ds-r-lg); box-shadow: 0 0 0 1px var(--ds-line); }
.rpx-card__h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--ds-s-2); min-width: 0; }
.rpx-card__t { font-size: var(--ds-text-md); line-height: var(--ds-lh-md); font-weight: var(--ds-w-semi); color: var(--ds-ink); }
.rpx-card__sub { font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); }
.rpx-card__a { margin-left: auto; display: flex; gap: var(--ds-s-2); align-items: center; }
.rpx-fp { white-space: nowrap; }
.rpx-fp:not(:last-child)::after { content: " \00b7"; margin-right: var(--ds-s-2); }
.rpx-card__f { display: flex; flex-wrap: wrap; gap: 0 var(--ds-s-1); padding-top: var(--ds-s-3); box-shadow: inset 0 1px 0 var(--ds-hair); font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-2); font-variant-numeric: var(--ds-nums); }
.rpx-fit { min-width: 0; }
.rpx-note { margin: 0; font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); }

/* View tabs (3.3) and the page strip (E5): scroll sideways inside their own row, never truncate a label. */
.rpx-tabs-row, .rpx-strip__list { display: flex; overflow-x: auto; scrollbar-width: none; }
.rpx-tabs-row { box-shadow: inset 0 -1px 0 var(--ds-line); }
.rpx-tabs { display: flex; gap: var(--ds-s-6); }
.acct .rpx-tab, .acct .rpx-strip__i { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--ds-text-base); font-weight: var(--ds-w-medium); color: var(--ds-ink-3); white-space: nowrap; cursor: pointer; }
.rpx-tab .n { font-size: var(--ds-text-sm); font-weight: var(--ds-w-regular); color: var(--ds-ink-3); }
.rpx-tab.on, .rpx-strip__i.on { color: var(--ds-ink); font-weight: var(--ds-w-semi); }
.rpx-tab.on::after, .rpx-strip__i.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ds-selection); border-radius: var(--ds-r-tag) var(--ds-r-tag) 0 0; }
.rpx-tab:hover, .rpx-strip__i:hover { color: var(--ds-ink); }
.rpx-tab:focus-visible, .rpx-strip__i:focus-visible { outline: var(--ds-focus-w) solid var(--ds-focus); outline-offset: var(--ds-focus-off); border-radius: var(--ds-r-sm); }
.rpx-strip { display: flex; align-items: center; gap: var(--ds-s-6); min-width: 0; box-shadow: inset 0 -1px 0 var(--ds-line); }
.rpx-strip__list { flex: 1 1 auto; gap: var(--ds-s-5); min-width: 0; }
.rpx-strip__x { flex: none; margin-left: auto; }
.rpx-strip--select { box-shadow: none; }
@media (max-width: 759px) {
  .rpx-tab, .rpx-strip__i { height: var(--ds-touch-h); }
  .rpx-tabs-row, .rpx-strip__list { -webkit-mask-image: linear-gradient(90deg, var(--ds-surface) calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, var(--ds-surface) calc(100% - 24px), transparent); }
}

/* Table (3.6, E4): heads in caps, one row height (36 or 48), numbers right-aligned on one edge. */
.rpx-table { display: grid; gap: var(--ds-s-2); min-width: 0; }
.rpx-tblframe { min-width: 0; background: var(--ds-surface); border-radius: var(--ds-r-lg); box-shadow: 0 0 0 1px var(--ds-line); overflow: hidden; }
.rpx-tblscroll { overflow-x: auto; background:
  linear-gradient(90deg, var(--ds-surface) 30%, transparent) 0 0 / 24px 100% no-repeat local,
  linear-gradient(270deg, var(--ds-surface) 30%, transparent) 100% 0 / 24px 100% no-repeat local,
  linear-gradient(90deg, var(--ds-line), transparent) 0 0 / 8px 100% no-repeat scroll,
  linear-gradient(270deg, var(--ds-line), transparent) 100% 0 / 8px 100% no-repeat scroll; }
.rpx-tbl { width: 100%; border-collapse: collapse; font-size: var(--ds-text-base); line-height: var(--ds-lh-base); font-variant-numeric: var(--ds-nums); }
.rpx-tbl th { height: 36px; padding: 0 var(--ds-s-3); text-align: left; white-space: nowrap; font-size: var(--ds-text-caps); line-height: var(--ds-lh-caps); font-weight: var(--ds-w-semi); letter-spacing: var(--ds-track-caps); text-transform: uppercase; color: var(--ds-ink-3); box-shadow: inset 0 -1px 0 var(--ds-line); }
.rpx-tbl td { padding: 0 var(--ds-s-3); box-shadow: inset 0 -0.5px 0 var(--ds-rule); vertical-align: middle; color: var(--ds-ink); }
.rpx-h36 td { height: 36px; } .rpx-h40 td { height: 40px; }
.rpx-tbl th.r, .rpx-tbl td.r { text-align: right; white-space: nowrap; }
.rpx-tbl td:first-child, .rpx-tbl th:first-child { padding-left: var(--ds-s-4); }
.rpx-tbl td:last-child, .rpx-tbl th:last-child { padding-right: var(--ds-s-4); }
.rpx-tbl tbody tr:last-child td { box-shadow: none; }
.rpx-tbl .rpx-first { font-weight: var(--ds-w-medium); }
.rpx-tbl tfoot td { font-weight: var(--ds-w-semi); box-shadow: inset 0 1px 0 var(--ds-field); }
.rpx-tbl .rpx-sub { display: block; font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); font-weight: var(--ds-w-regular); color: var(--ds-ink-3); }
.rpx-two { display: grid; }
.rpx-tbl td .rpx-dot { margin-right: var(--ds-s-2); }
.rpx-tbl td .rpx-cellbar { justify-content: flex-end; }
.acct .rpx-sort { display: inline-flex; align-items: center; gap: var(--ds-s-1); height: 100%; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.rpx-sort.on { color: var(--ds-ink); }
.rpx-sort:hover { color: var(--ds-ink); }
.rpx-sort:focus-visible { outline: var(--ds-focus-w) solid var(--ds-focus); outline-offset: var(--ds-focus-off); border-radius: var(--ds-r-sm); }
.rpx-sort__i { font-size: var(--ds-text-caps); font-style: normal; color: var(--ds-ink-2); }
.rpx-pager { display: flex; align-items: center; gap: var(--ds-s-2); font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); }
.rpx-pager { flex-wrap: wrap; justify-content: space-between; }
.rpx-pages { display: flex; align-items: center; gap: var(--ds-s-1); }
.acct .rpx-pg { min-width: 28px; padding: 0 6px; }
@media (max-width: 559px) { .acct .rpx-pg, .acct .rpx-gap { display: none; } }
@media (max-width: 759px) { .acct .rpx-pg { min-width: 44px; } }
.acct .rpx-pg.on { background: var(--ds-sel-bg); box-shadow: inset 0 0 0 1px var(--ds-ink); font-weight: var(--ds-w-semi); }
.rpx-gap { padding: 0 var(--ds-s-1); color: var(--ds-ink-3); }
.rpx-of { display: none; }
.rpx-count { font-variant-numeric: var(--ds-nums); }
.rpx-empty { margin: 0; padding: var(--ds-s-4); font-size: var(--ds-text-base); line-height: var(--ds-lh-base); color: var(--ds-ink-2); }
.rpx-card .rpx-tblframe { box-shadow: none; border-radius: 0; overflow: visible; }
.rpx-card .rpx-empty { padding: var(--ds-s-4) 0; }
@media (min-width: 1024px) and (max-width: 1279px) { .rpx-tbl td.rpx-first, .rpx-tbl th.rpx-first { position: sticky; left: 0; background: var(--ds-surface); z-index: 1; } }
@media (max-width: 1023px) { .rpx-p3 { display: none; } }
@media (min-width: 560px) and (max-width: 759px) { .rpx-p2 { display: none; } }
/* Under 560 each record is a two-line card: title and key figure on line 1, up to three secondary values on line 2. */
@media (max-width: 559px) {
  .rpx-tbl, .rpx-tbl tbody, .rpx-tbl tfoot { display: block; width: 100%; }
  .rpx-tbl thead { display: none; }
  .rpx-tbl tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--ds-s-3); padding: 4px var(--ds-s-4); box-shadow: inset 0 -0.5px 0 var(--ds-rule); }
  .rpx-tbl tr::before { content: ""; order: 3; flex-basis: 100%; height: 0; }
  .rpx-tbl td, .rpx-h36 td, .rpx-h40 td { order: 4; display: flex; gap: var(--ds-s-1); width: auto; height: auto; min-height: 0; padding: 0; box-shadow: none; text-align: left; font-size: var(--ds-text-sm); line-height: var(--ds-lh-base); color: var(--ds-ink-2); }
  .rpx-tbl td::before { content: attr(data-l); flex: none; color: var(--ds-ink-3); }
  .rpx-tbl td.rpx-first { order: 1; flex: 1 1 0; min-width: 0; font-size: var(--ds-text-base); color: var(--ds-ink); }
  .rpx-tbl td.rpx-key { order: 2; flex: none; margin-left: auto; align-items: baseline; font-size: var(--ds-text-base); font-weight: var(--ds-w-semi); color: var(--ds-ink); }
  .rpx-tbl td.rpx-key::before, .rpx-tbl td:not([data-l])::before { content: none; }
  .rpx-tbl td.rpx-key.rpx-lab::before { content: attr(data-l); font-size: var(--ds-text-sm); font-weight: var(--ds-w-regular); color: var(--ds-ink-3); }
  .rpx-tbl tr::after { content: ""; order: 5; flex-basis: 100%; height: 0; }
  .rpx-tbl td.rpx-l3 { order: 6; }
  .rpx-tbl td.rpx-x, .rpx-tbl td:empty, .rpx-tbl .rpx-cellbar__svg { display: none; }
  .rpx-tbl td.rpx-l2, .rpx-tbl td.rpx-l3 { white-space: nowrap; }
  .rpx-tbl tr { column-gap: var(--ds-s-3); }
  .rpx-tbl td { align-items: center; }
  .rpx-tbl td .rpx-dot { align-self: center; margin-right: 0; }
  .rpx-tbl td .rpx-cellbar { display: inline-flex; gap: 0; }
  .rpx-tbl td .rpx-cellbar__v { text-align: left; }
  .rpx-h40 tr { min-height: 88px; align-content: flex-start; }
  .rpx-h40.rpx-lines3 tr { min-height: 108px; }
  .rpx-h40 tfoot tr, .rpx-h40.rpx-lines3 tfoot tr { min-height: 0; }
  .rpx-tbl tfoot tr { box-shadow: inset 0 1px 0 var(--ds-field); }
  .rpx-tbl tfoot td, .rpx-tbl tbody tr:last-child { box-shadow: none; }   /* one total rule, not three */
  .rpx-tbl td:first-child, .rpx-tbl td:last-child { padding-left: 0; padding-right: 0; }
}

/* Filter row (S8.3, S8.4): one row at 1024 and up, 32 tall. */
.rpx-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-s-2); min-height: var(--ds-control-h); }
.rpx-search { display: inline-flex; align-items: center; gap: var(--ds-s-2); height: var(--ds-control-h); width: calc(var(--ds-s-10) * 6); max-width: 100%; padding: 0 var(--ds-s-2); border-radius: var(--ds-r-md); background: var(--ds-surface); box-shadow: inset 0 0 0 1px var(--ds-field); color: var(--ds-ink-3); }
.rpx-search .ico { flex: none; width: 14px; height: 14px; color: var(--ds-icon); }
.rpx-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: var(--ds-text-base); color: var(--ds-ink); outline: none; }
.rpx-sel select { height: var(--ds-control-h); max-width: 100%; border: 0; border-radius: var(--ds-r-md); padding: 0 var(--ds-s-2); background: var(--ds-surface); box-shadow: inset 0 0 0 1px var(--ds-field); font: inherit; font-size: var(--ds-text-base); color: var(--ds-ink); }
.rpx-sortsel { display: none; }
.acct .rpx-box select, .rpx-sel select { appearance: none; -webkit-appearance: none; padding-right: var(--ds-s-8);
  background: linear-gradient(45deg, transparent 50%, var(--ds-icon) 50%) calc(100% - 15px) 50% / 5px 5px no-repeat, linear-gradient(135deg, var(--ds-icon) 50%, transparent 50%) calc(100% - 10px) 50% / 5px 5px no-repeat, var(--ds-surface); }
.acct .rpx-box input[type="date"], .acct .rpx-box input[type="month"] { min-width: 132px; }
.rpx-period[data-rpx-period="range"] .rpx-step + .rpx-box { display: none; }
.acct .phead.rpx-head .tt { flex: none; }
.rpx-drawer-lead { padding-bottom: var(--ds-s-2); box-shadow: inset 0 -1px 0 var(--ds-hair); }
.rpx-drawer-lead .rpx-fig { padding: 0 0 var(--ds-s-3); }
.acct .rpx-card > .rpx-fig { padding-left: 0; padding-right: 0; }   /* a figure in a card body lines up with the card title */
.rpx-chip { display: inline-flex; align-items: center; gap: var(--ds-s-1); height: 28px; padding: 0 var(--ds-s-1) 0 10px; border-radius: var(--ds-r-md); background: var(--ds-sel-bg); box-shadow: inset 0 0 0 1px var(--ds-field); font-size: var(--ds-text-sm); font-weight: var(--ds-w-medium); color: var(--ds-ink); white-space: nowrap; }
.acct .rpx-chip__x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: var(--ds-r-sm); background: none; color: var(--ds-icon); cursor: pointer; }
.rpx-chip__x .ico { width: 12px; height: 12px; }
.rpx-chip__x:hover { color: var(--ds-ink); background: var(--ds-paper-hover); }
.rpx-chip__x:focus-visible, .rpx-search input:focus-visible { outline: var(--ds-focus-w) solid var(--ds-focus); outline-offset: var(--ds-focus-off); }
.rpx-search:focus-within { box-shadow: inset 0 0 0 1px var(--ds-field), 0 0 0 var(--ds-focus-w) var(--ds-focus); }
.rpx-sel select:focus-visible { outline: var(--ds-focus-w) solid var(--ds-focus); outline-offset: var(--ds-focus-off); }
@media (max-width: 559px) {
  .rpx-sortsel { display: inline-flex; }
  .rpx-search, .rpx-sel select { width: 100%; height: var(--ds-touch-h); }
  .rpx-sel { flex: 1 1 40%; }
  .rpx-pager .btn { height: var(--ds-touch-h); }
  .rpx-pg, .rpx-gap { display: none; }
  .rpx-of { display: inline; padding: 0 var(--ds-s-2); }
  .rpx-pages { width: 100%; justify-content: space-between; }
}

/* Ledger and bridge (3.7): label left, amounts on one right edge, the total on a rule. */
.rpx-ledger { width: 100%; border-collapse: collapse; font-size: var(--ds-text-base); line-height: var(--ds-lh-base); font-variant-numeric: var(--ds-nums); }
.rpx-ledger th, .rpx-ledger td { padding: var(--ds-s-2) 0; text-align: left; font-weight: var(--ds-w-regular); vertical-align: top; color: var(--ds-ink); }
.rpx-ledger td { text-align: right; white-space: nowrap; }
.rpx-ledger td.rpx-loss, .rpx-ledger td.rpx-lv.rpx-loss { color: var(--ds-st-late-ink); }
.rpx-ledger td.rpx-ls { padding-right: var(--ds-s-4); color: var(--ds-ink-3); }
.rpx-ld { display: block; font-size: var(--ds-text-sm); line-height: var(--ds-lh-sm); color: var(--ds-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpx-lr--start th, .rpx-lr--subtotal th, .rpx-lr--total th, .rpx-strong { font-weight: var(--ds-w-semi); }
.rpx-lr--total th, .rpx-lr--total td { box-shadow: inset 0 1px 0 var(--ds-field); }
/* A bridge under a table in the same card reads down the table's columns: its labels start on the first column's left
   edge and its amounts end on the last number column's right edge (the table cells' 16 px side padding). */
.rpx-table ~ .rpx-ledger th:first-child { padding-left: var(--ds-s-4); }
.rpx-table ~ .rpx-ledger td:last-child { padding-right: var(--ds-s-4); }

/* States (3.10): quiet lines; skeletons at real size, no motion (S6.14). */
.rpx-empty--na { color: var(--ds-ink-2); }
.rpx-sk { display: block; border-radius: var(--ds-r-tag); background: var(--ds-skeleton); }
.rpx-sk--label { width: 40%; height: 12px; margin: 2px 0; } .rpx-sk--lead { width: 60%; height: 28px; margin: 4px 0; } .rpx-sk--tile { width: 50%; height: 20px; margin: 2px 0; }
.rpx-sk--sub { width: 75%; height: 10px; margin: 3px 0; } .rpx-sk--short { width: 45%; }
.rpx-sk--title { width: 30%; height: 14px; } .rpx-sk--chart { width: 100%; height: 240px; }
.rpx-updating__body { opacity: 0.6; }

/* Drawer (3.8, S2.7): 480 wide, 640 wide for the job drawer, full screen under 560. */
.acct .sheet.rpx-drawer { width: 480px; }
.acct .sheet.rpx-drawer.rpx-drawer--wide { width: 640px; }
.acct .sheet.rpx-drawer:focus { outline: none; }
.rpx-back { display: inline-block; margin-bottom: var(--ds-s-2); }
.acct .rpx-drawer .sheet-b { gap: var(--ds-s-4); }
@media (max-width: 559px) { .acct .sheet.rpx-drawer, .acct .sheet.rpx-drawer.rpx-drawer--wide { width: 100%; } .rpx-back { min-height: var(--ds-touch-h); } }

@media (min-width: 560px) and (max-width: 759px) { .rpx-h36 td { height: 48px; } .rpx-h40 td { height: 64px; } }
@media (max-width: 759px) { .acct .sheet.rpx-drawer .sheet-h .x { width: 44px; height: 44px; top: 8px; right: 8px; } }
@media (max-width: 559px) {
  .acct .rpx-period[data-rpx-period="day"].toolbar { flex-wrap: nowrap; align-items: center; }
  .rpx-period[data-rpx-period="day"] .rpx-step:not(.rpx-range) { flex: 1 1 0; width: auto; }
  .acct .rpx-period[data-rpx-period="day"] > .btn { flex: none; width: auto; }
}
@media (max-width: 559px) {
  .rpx-ld { white-space: normal; }
  .rpx-head .rpx-fresh { flex-basis: auto; }
  .rpx-h40 tr { min-height: 88px; align-content: flex-start; }
  .acct .rpx-drawer .btn { min-height: 44px; }
}
@media (min-width: 560px) { .rpx-filters:not(:has(> :not(.rpx-sortsel))) { display: none; } }
@media (max-width: 759px) { .acct .rpx-drawer .btn { min-height: 44px; height: 44px; } }
/* Touch targets (S9.7): 44 px high and wide under 760 (the gate measures the element itself, so no hit-box tricks).
   Desktop density and the 36/48 row heights do not change. */
@media (max-width: 759px) {
  .rpx-head .btn, .rpx-card .btn, .rpx-pager .btn { min-height: var(--ds-touch-h); }
  .rpx-fig--btn { min-height: var(--ds-touch-h); }
  .acct .rpx-tab, .acct .rpx-strip__i { min-height: 44px; min-width: 44px; height: 44px; justify-content: center; }
  .acct:has(.rpx-page) .stale .btn.sm { height: 44px; min-height: 44px; }
  .acct .rpx-head .ulink, .acct .rpx-page .ulink, .acct .rpx-strip__x, .acct .rpx-back, .acct .rpx-drawer .ulink { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
  .acct .rpx-drawer dl.kv { align-items: center; }
  .acct .rpx-page .btn.sm { height: 44px; min-height: 44px; }
  .acct .rpx-sort { min-height: 44px; min-width: 44px; }
  .rpx-tbl th { height: 44px; }
  .rpx-pager .btn, .acct .rpx-pager .btn.sm { height: 44px; min-height: 44px; }
  .rpx-search, .rpx-sel select, .acct .rpx-box input, .acct .rpx-box select, .acct .rpx-period .btn { height: 44px; min-height: 44px; }
  .rpx-arrow, .acct .rpx-period .btn.rpx-arrow { min-width: 44px; width: 44px; height: 44px; }
  .acct .rpx-chip { height: 44px; }
  .acct .rpx-chip__x { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .rpx-fig--btn, .rpx-sort { transition: none; } }

/* Print (S8.8, accounting.css print rules extended): head, figures, charts as drawn, the full table with repeated heads. */
@media print {
  .rpx-head .acts, .rpx-pager, .rpx-filters, .rpx-tabs-row, .rpx-strip, .rpx-card__a, .rpx-sortsel, .sheet.rpx-drawer { display: none !important; }
  .rpx-page { display: block; max-width: none; }
  .rpx-page > *, .rpx-cols > * { margin-bottom: 4mm; break-inside: avoid; }
  .rpx-cols { display: block; }
  .rpx-card .rpx-cols { display: grid; }   /* parts side by side inside a card (figures, two meters) stay side by side */
  .rpx-card__a:has(> .rpx-legend) { display: flex !important; }   /* a chart legend in a card head prints; controls do not */
  .rpx-band, .rpx-card, .rpx-tblframe { box-shadow: none; border: 0.5pt solid var(--ds-line); border-radius: 0; }
  .rpx-tblscroll { overflow: visible; background: none; }
  .rpx-tbl thead { display: table-header-group; }
  .rpx-tbl tr { break-inside: avoid; }
  .rpx-tbl th, .rpx-tbl td { height: auto; padding: 3px 6px; font-size: var(--ds-text-sm); }
  .rpx-p2, .rpx-p3 { display: table-cell; }
  .rpx-fresh { margin-left: auto; }
  /* The Reports print heading (title, the page's own period, print time) replaces the shared Accounting one, which
     would name the first select on the page (a capacity window) as if it were the period. */
  .acct:has(.rpx-page) .acct-print-head { display: none !important; }
  .acct .phead.rpx-head { flex-wrap: wrap !important; }
  .rpx-chart__svg { width: auto; max-width: 100%; }   /* a chart prints at the size it was drawn, never stretched */
  .acct .rpx-printhead { display: block; order: -1; flex-basis: 100%; margin: 0 0 6mm; padding-bottom: 3mm; border-bottom: 1px solid var(--ds-ink); }
  .acct .rpx-printhead::before { content: attr(data-title); display: block; font-size: var(--ds-text-d2); font-weight: var(--ds-w-semi); color: var(--ds-ink); }
  .acct .rpx-printhead::after { content: "Pro Star Mechanical · " attr(data-meta); display: block; margin-top: 1mm; font-size: var(--ds-text-sm); color: var(--ds-ink-2); }
  .rpx-head .tt, .rpx-head__period { display: none !important; }
}
.rpx-printhead { display: none; }
/* ═══ END PAGE KIT BLOCK (task K2) ═══════════════════════════════════════════════ */

/* ═══ KIT 2 (FIX-LIST K, 2026-11-12): additive parts; nothing above changes. ═══════════════════════ */
/* K1 one-line text cells (column.clip / clipSub): cut with an ellipsis, the whole text in the title. */
.rpx-clip { display: block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpx-clip--s { max-width: 160px; } .rpx-clip--m { max-width: 240px; } .rpx-clip--l { max-width: 400px; }
.acct .rpx-clip > .ulink { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; text-align: left; }
.rpx-tbl .rpx-sub.rpx-clip { display: block; }
/* K11 a second line that opens its own record reads as the quiet line it is. */
.acct .rpx-sub .rpx-sublink { font-size: var(--ds-text-sm); font-weight: var(--ds-w-regular); color: var(--ds-ink-3); }
/* K10 a dot of the row's own colour (a Simpro status colour). */
.rpx-dot--c { background: var(--rpx-dot, var(--ds-icon)); }
/* K2 kit checkbox: the label is the target. */
.acct .rpx-check { display: inline-flex; align-items: center; gap: var(--ds-s-2); font-size: var(--ds-text-base); color: var(--ds-ink); cursor: pointer; }
.acct .rpx-check input { width: 14px; height: 14px; margin: 0; accent-color: var(--ds-selection); cursor: pointer; }
.rpx-tbl td .rpx-check { vertical-align: middle; }
/* K3 segmented toggle: buttons from 760 px, the kit select below. */
.rpx-seg { display: inline-flex; min-width: 0; }
.rpx-seg > .rpx-seg__sel { display: none; }
/* K6 a lone lead is as wide as a lead in a full band; a text-valued figure; a label-only sub-line. */
.rpx-band.rpx-band--lone { grid-template-columns: minmax(0, 1fr); width: calc(100% / 3); min-width: 320px; }
.rpx-fig__value--text { display: inline-flex; align-items: center; }
.rpx-fig__value--text .rpx-dot { width: 8px; height: 8px; }
.rpx-sp--word { color: var(--ds-ink-2); }
.rpx-sp--word .rpx-dot { margin-right: var(--ds-s-1); }
@media (max-width: 1023px) {
  .rpx-band.rpx-band--lone { width: 50%; min-width: 0; }
  .rpx-band--nolead.rpx-band--n3 .rpx-tiles > :last-child, .rpx-band--nolead.rpx-band--n1 .rpx-tiles > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 759px) {
  .rpx-seg > .rpx-seg__btns { display: none; }
  .rpx-seg > .rpx-seg__sel { display: flex; flex: 1 1 auto; }
  .acct .rpx-check { min-height: 44px; min-width: 44px; justify-content: center; }
  .acct .rpx-clip > .ulink { min-height: 44px; line-height: 44px; }
  /* K11 a second-line link is a 44 px target that keeps the line 20 px tall (negative margins), so rows keep one height. */
  .acct .rpx-tbl .rpx-sub .rpx-sublink { display: inline-block; min-height: 0; min-width: 44px; padding: 12px 0; margin: -12px 0; line-height: 20px; vertical-align: top; }
}
@media (max-width: 559px) {
  .rpx-band.rpx-band--lone { width: auto; }
  /* K1 a phone card's title wraps (the record grows a line per line, K12); other one-line cells stay cut. */
  .rpx-tbl td.rpx-first .rpx-clip, .acct .rpx-tbl td.rpx-first .rpx-clip > .ulink { display: inline; max-width: none; overflow: visible; white-space: normal; text-overflow: clip; line-height: inherit; }
  .acct .rpx-tbl td.rpx-first .ulink { max-width: 100%; white-space: normal; text-align: left; overflow-wrap: anywhere; }
  .rpx-tbl td.rpx-first .rpx-sub.rpx-clip { display: block; }
  /* K12 a text role is its own full-width line that may wrap. */
  .rpx-tbl td.rpx-tx { order: 7; flex-basis: 100%; white-space: normal; }
  .rpx-tbl td.rpx-tx .rpx-clip { display: inline; max-width: none; overflow: visible; white-space: normal; }
  /* K2 a checkbox on a phone card keeps its 44 px target without making its line taller. */
  .acct .rpx-tbl .rpx-check { margin: -12px 0; }
  /* K7 a phone sort select showing long words ("Job number, low to high") takes its own full row, so they are never cut. */
  .rpx-sel.rpx-sortsel--wide { flex: 1 1 100%; }
}
@media print { .rpx-seg { display: none !important; } }
/* ═══ END KIT 2 ═══════════════════════════════════════════════════════════════════ */
/* K10 a flow label with no clear spot sits on a surface plate, never straight on a ribbon. */
.rpx-lbl-plate { fill: var(--ds-surface); fill-opacity: 0.92; }
/* K10 the pale key of a column chart's incomplete months; columns whose figure is known but incomplete (35%, S6.6). */
.rpx-bar--late { fill-opacity: 0.35; }
.rpx-legend__item--pale .rpx-legend__sw { opacity: 0.35; }
/* K10 a cell bar's value slot as wide as the column's widest value. */
.rpx-cellbar[style] { grid-template-columns: 80px var(--rpx-cbv, 48px); }

/* ═══ KIT 3 (2026-11-12): additive parts; nothing above changes. ═══════════════════════════════════════ */
/* Item 1, owner rule "nothing greyed out": a pager end or a period arrow that leads nowhere is left out; its invisible
   stand-in (aria-hidden, no action) holds its place so nothing jumps. */
.rpx-pn--none, .rpx-none { visibility: hidden; pointer-events: none; }
/* The calendar's empty places (before the first day, a day after today) keep their grid cell on a phone too. */
.acct .rpx-pop .rpx-gap { display: block; padding: 0; }
/* Item 2: a phone text-role cell that opens its record wraps like the text around it (Technicians site); a ledger label
   that opens something keeps its 20 px line, its 44 px target made of padding, so its amount lines up (Books). */
@media (max-width: 759px) {
  .acct .rpx-ledger th .ulink { display: inline-block; min-height: 0; min-width: 44px; padding: 12px 0; margin: -12px 0; line-height: 20px; vertical-align: top; text-align: left; }
}
@media (max-width: 559px) {
  .acct .rpx-tbl td.rpx-tx .rpx-clip > .ulink { display: inline; max-width: none; min-height: 0; padding: 12px 0; overflow: visible; white-space: normal; text-overflow: clip; line-height: inherit; text-align: left; overflow-wrap: anywhere; }
}
/* Item 3: a status dot outside a table; a dot-and-link line. */
.rpx-status { display: inline-flex; align-items: center; gap: var(--ds-s-2); }
.rpx-status .rpx-dot, .rpx-dotlink .rpx-dot { margin-right: 0; }
.rpx-dotlink { gap: var(--ds-s-2); align-items: flex-start; }
.rpx-dotlink > .rpx-dot { margin-top: 7px; }   /* the dot sits on the link's first line when it wraps */
@media (max-width: 759px) { .acct .rpx-dotlink > .ulink { display: inline-block; min-height: 0; padding: 12px 0; margin: -12px 0; text-align: left; } }
.rpx-dot--alone { margin-right: 0; }
/* Item 4: an aligned headline band. Each figure is a column: label, value, comparison at the top; its spark and its link
   at the bottom, so tiles with and without a spark keep their links on one line. An empty slot keeps a missing row. */
.acct .rpx-band--aligned .rpx-fig { display: flex; flex-direction: column; align-items: flex-start; }
.acct .rpx-band--aligned .rpx-fig--split > .rpx-fig__main { flex: none; }
.rpx-band--aligned .rpx-fig__spark { margin-top: auto; }
.rpx-fig__spark { display: block; padding-top: var(--ds-s-1); line-height: 0; }
.rpx-fig--split > .rpx-fig__spark { padding: var(--ds-s-1) var(--ds-s-4) 0; }
.rpx-fig--split > .rpx-fig__spark:last-child { padding-bottom: var(--ds-s-3); }
.rpx-fig__sub.rpx-fig__slot, .rpx-fig__deltas.rpx-fig__slot { display: block; min-height: var(--ds-lh-sm); }
.rpx-fig__foot.rpx-fig__slot { min-height: var(--ds-lh-sm); }
.rpx-spark__svg[tabindex]:focus { outline: none; }
.rpx-spark__svg[tabindex]:focus-visible { outline: var(--ds-focus-w) solid var(--ds-focus); outline-offset: var(--ds-focus-off); border-radius: var(--ds-r-sm); }
.rpx-spark__svg[data-scrub] { touch-action: pan-y; }
/* A month flagged late with no figure (Materials, p5f patch): a short dashed outline on the baseline, never a height. */
.rpx-bar--nofig { fill: var(--rpx-c); fill-opacity: 0.08; stroke: var(--rpx-c); stroke-opacity: 1; stroke-width: 1; stroke-dasharray: 3 2; }
/* A server's message after a save (K.notice): every line whole, wrapped as text. */
.acct .rpx-notice { margin-top: 0; align-items: flex-start; }
.acct .rpx-notice > .ico { margin-top: 2px; }
.rpx-notice .nt { display: grid; gap: 2px; }
.rpx-notice__l { margin: 0; white-space: normal; overflow-wrap: anywhere; }
/* Item 5: print hides nothing. A one-line cell prints its whole text, wrapped; so does any cut label or line. */
@media print {
  .rpx-clip, .rpx-clip--s, .rpx-clip--m, .rpx-clip--l, .acct .rpx-clip > .ulink, .rpx-tbl .rpx-sub.rpx-clip, .rpx-late, .rpx-head .rpx-fresh { display: inline; max-width: none; overflow: visible; white-space: normal; text-overflow: clip; }
  /* P0-h: the late line and "Data as of" print inline: keep the gap they have on screen ("yetData" in print). */
  .rpx-head .rpx-fresh > * + * { margin-left: var(--ds-s-3); }
  /* a ledger / bridge detail stays its own line under its label in print (inline, it ran into the label) */
  .rpx-ld { display: block; white-space: normal; overflow: visible; text-overflow: clip; }
  .rpx-tbl .rpx-sub.rpx-clip { display: block; }
  .rpx-tbl td:not(.r) { white-space: normal; overflow-wrap: anywhere; }
  .rpx-tblframe, .rpx-card, .rpx-fit { overflow: visible; }
  .rpx-fig__spark .rpx-spark__svg { display: block; }
}
/* ═══ END KIT 3 ═══════════════════════════════════════════════════════════════════ */
/* Kit 3 (Profit p2f): a phone card title cut on purpose and allowed to wrap is a block, so its lines are measured as lines
   (a button set to display: inline still lays out as an inline-block). */
@media (max-width: 559px) { .rpx-tbl td.rpx-first .rpx-clip[data-rpx-wrap] { display: block; } }
/* Kit 4: a month stepper and From/To sit on one row at desktop width. */
.rpx-head__period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.rpx-delta__lead { color: var(--ds-ink-2); }
/* Kit 4 (Data health): controls with nothing to print (an empty request form) are left out of the printout. */
@media print { .rpx-noprint, [data-rpx-noprint] { display: none !important; } }
/* Kit 4 (Data health): column `nowrap: true` keeps a cell (and its second line) on one line WITHOUT cutting it: the table grows and
   may scroll sideways below 1280; nothing is hidden behind an ellipsis. Phone cards (under 560) wrap as usual. */
@media (min-width: 560px) { .rpx-tbl td.rpx-nowrap, .rpx-tbl td.rpx-nowrap * { white-space: nowrap; } }
/* Close-out: a two-line list row that opens something (category mix, top lists) reads as a link. */
.rpx-chart .rpx-lbl--link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }