/* Chấm Công Quán (tenant ryantran): only the components the kit lacks, and layout glue. Kit v1.3 components are used as they are.
   Only var(--*) tokens for colour, spacing, radius, type and shadow; no colour literal anywhere in this file. Each block names its KIT_GAPS.md row. */

/* G1 Brown band: the page title on the header colour under the slim top bar; the first cards of .rt-body rise into it. ----------------------- */
.rt-main { --rt-gutter: var(--sp-7); --rt-lift: calc(var(--sp-9) + var(--sp-5)); display: block; }
.rt-band { padding: var(--sp-2) var(--rt-gutter) calc(var(--rt-lift) + var(--sp-5)); color: var(--header-fg); background: var(--header-bg); }
.rt-band :focus-visible { outline-color: var(--header-focus); }
.rt-band-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-5); }
.rt-band-text { min-width: 0; }
.rt-band-title { margin: 0; font-size: var(--fs-2xl); font-weight: 700; line-height: var(--lh-tight); color: var(--header-fg); }
.rt-band-sub { margin: var(--sp-1) 0 0; font-size: var(--fs-md); color: var(--header-muted); font-variant-numeric: tabular-nums; }
.rt-band-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.rt-band-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-top: var(--sp-4); }
.rt-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); margin-top: calc(var(--rt-lift) * -1); padding: 0 var(--rt-gutter) var(--sp-8); }
.rt-band:has(+ .rt-body-flat) { padding-bottom: var(--sp-6); }
.rt-body-flat { margin-top: 0; padding-top: var(--sp-6); }

/* G2 Period stepper on the band: ‹ label › (kit .period-nav needs kit.js to write its label). */
.rt-period { display: inline-flex; align-items: center; gap: var(--sp-3); }
.rt-period-label { display: grid; min-width: 9.5rem; text-align: center; line-height: var(--lh-tight); }
.rt-period-label strong { font-size: var(--fs-lg); color: var(--header-fg); }
.rt-period-label span { font-size: var(--fs-xs); color: var(--header-muted); font-variant-numeric: tabular-nums; }
.panel .rt-period-label strong { color: var(--heading); }
.panel .rt-period-label span { color: var(--muted); }

/* G3 List and detail in one card: the queue at the left, the chosen item at the right, its actions at the foot. ------------------------------ */
.rt-split { display: grid; grid-template-columns: minmax(19rem, 23rem) minmax(0, 1fr); border-top: 1px solid var(--panel-border); }
.rt-split-list { min-width: 0; border-inline-end: 1px solid var(--panel-border); }
.rt-split-detail { display: grid; align-content: start; gap: var(--sp-5); min-width: 0; padding: var(--sp-6); }

/* G4 Queue row with its own tick and a "chosen" state (kit .work-row has neither a leading check nor aria-current). */
.rt-queue { margin: 0; padding: 0; list-style: none; }
.rt-q { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--panel-border); transition: background-color var(--dur-1) var(--ease); }
.rt-q:last-child { border-bottom: 0; }
.rt-q:not([aria-current="true"]):hover { background: var(--surface-hover); }
.rt-q[aria-current="true"] { background: var(--primary-tint); box-shadow: inset var(--sp-1) 0 0 var(--primary); }
.rt-q-tick { position: relative; z-index: 1; width: 1.25rem; height: 1.25rem; margin: 2px 0 0; accent-color: var(--primary); cursor: pointer; }
.rt-q-link { display: grid; gap: var(--sp-1); min-width: 0; color: inherit; text-decoration: none; }
.rt-q-link::after { content: ""; position: absolute; inset: 0; }
.rt-q-link:focus-visible { outline: 0; }
.rt-q:has(.rt-q-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.rt-q-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.rt-q-name { font-weight: 650; color: var(--heading); }
.rt-q-date { flex: none; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.rt-q-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.rt-q-text { font-size: var(--fs-sm); color: var(--text); }
.rt-q-sug { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); font-weight: 600; color: var(--ok); }
.rt-q-sug .icon { width: var(--icon-sm); height: var(--icon-sm); }
.rt-q[data-state="done"] .rt-q-name { color: var(--muted); }

/* G5 OT tag: the kit's tag has four tones; OT needs its own (purple), outlined while it waits and solid once approved. */
.rt-ot-tag { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-xs); font-weight: 600; line-height: var(--lh-tight); white-space: nowrap; color: var(--rt-ot); background: var(--rt-ot-bg); border: 1px dashed var(--rt-ot-line); border-radius: var(--radius-pill); }
.rt-ot-tag .icon { width: 0.875rem; height: 0.875rem; }
.rt-ot-tag-solid { color: var(--rt-on-ot); background: var(--rt-ot); border: 1px solid var(--rt-ot); }
.rt-ot { color: var(--rt-ot); }

/* G6 Shift chips: one colour set per shift code, always with the code written in it. data-state: pending (registered in the app, dashed),
   unsaved (painted, a dot), fixed (comes from the position every day, quieter), warn (outside the position's shifts). */
.rt-shift { --sc-bg: var(--sunk); --sc-line: var(--panel-border); --sc-ink: var(--text); position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 1.625rem; padding: 0 var(--sp-2); font-size: var(--fs-xs); line-height: var(--lh-tight); white-space: nowrap; color: var(--sc-ink); background: var(--sc-bg); border: 1px solid var(--sc-line); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; }
.rt-shift > b { font-weight: 700; letter-spacing: 0.02em; }
.rt-shift > span { font-weight: 500; }
:is(.rt-shift, .rt-reg-cell)[data-ca="ca1"] { --sc-bg: var(--rt-shift-ca1-bg); --sc-line: var(--rt-shift-ca1-line); --sc-ink: var(--rt-shift-ca1-ink); }
:is(.rt-shift, .rt-reg-cell)[data-ca="ca2"] { --sc-bg: var(--rt-shift-ca2-bg); --sc-line: var(--rt-shift-ca2-line); --sc-ink: var(--rt-shift-ca2-ink); }
:is(.rt-shift, .rt-reg-cell)[data-ca="sang"] { --sc-bg: var(--rt-shift-sang-bg); --sc-line: var(--rt-shift-sang-line); --sc-ink: var(--rt-shift-sang-ink); }
:is(.rt-shift, .rt-reg-cell)[data-ca="chieu"] { --sc-bg: var(--rt-shift-chieu-bg); --sc-line: var(--rt-shift-chieu-line); --sc-ink: var(--rt-shift-chieu-ink); }
:is(.rt-shift, .rt-reg-cell)[data-ca="toi"] { --sc-bg: var(--rt-shift-toi-bg); --sc-line: var(--rt-shift-toi-line); --sc-ink: var(--rt-shift-toi-ink); }
:is(.rt-shift, .rt-reg-cell)[data-ca="tv2"] { --sc-bg: var(--rt-shift-tv2-bg); --sc-line: var(--rt-shift-tv2-line); --sc-ink: var(--rt-shift-tv2-ink); }
.rt-shift[data-state="pending"] { background: var(--surface); border-style: dashed; border-width: 1.5px; }
.rt-shift[data-state="unsaved"]::after { content: ""; position: absolute; top: calc(var(--sp-1) * -1); inset-inline-end: calc(var(--sp-1) * -1); width: 0.5rem; height: 0.5rem; background: var(--rt-late); border: 1.5px solid var(--surface); border-radius: 50%; }
.rt-shift[data-state="fixed"] { background: var(--surface-2); border-style: dotted; }
.rt-shift[data-state="warn"] { box-shadow: 0 0 0 2px var(--warn-line); }
.rt-shift-stack { display: grid; gap: var(--sp-1); }

/* G7 Time bar: the shift as planned (hatched band, with its break cut out) over the time on site (solid), late and after-shift parts in their
   own colours; an hour axis under it and a "now" line. --t0/--t1 are the axis ends in hours, --a/--b each part's start and end. */
.rt-timebar { --rt-tb-h: 0.75rem; position: relative; display: grid; gap: var(--sp-1); padding-bottom: var(--sp-5); }
.rt-timebar-sm { --rt-tb-h: 0.5rem; padding-bottom: 0; }
.rt-timebar-lg { --rt-tb-h: 1rem; }
.rt-tb-row { position: relative; height: var(--rt-tb-h); }
.rt-tb-row > span { position: absolute; top: 0; bottom: 0; left: calc((var(--a) - var(--t0)) / (var(--t1) - var(--t0)) * 100%); width: calc((var(--b) - var(--a)) / (var(--t1) - var(--t0)) * 100%); border-radius: var(--radius-pill); }
.rt-tb-shift { background: repeating-linear-gradient(135deg, var(--sunk) 0 4px, var(--surface-2) 4px 8px); box-shadow: inset 0 0 0 1px var(--panel-border); }
.rt-tb-present { background: var(--primary); }
.rt-tb-late { background: repeating-linear-gradient(135deg, var(--rt-late) 0 3px, var(--warn-bg) 3px 6px); }
.rt-tb-over { background: var(--rt-ot); }
.rt-tb-missing { background: var(--danger-bg); box-shadow: inset 0 0 0 1.5px var(--danger); }
.rt-tb-row-pres > .rt-tb-present + .rt-tb-over { border-start-start-radius: 0; border-end-start-radius: 0; }
.rt-tb-now { position: absolute; top: calc(var(--sp-1) * -1); bottom: var(--sp-4); left: calc((var(--a) - var(--t0)) / (var(--t1) - var(--t0)) * 100%); width: 2px; background: var(--danger); border-radius: var(--radius-pill); }
.rt-timebar-sm .rt-tb-now { bottom: calc(var(--sp-1) * -1); }
.rt-timebar-axis { padding-bottom: var(--sp-4); }
.rt-tb-axis { position: absolute; inset-inline: 0; bottom: 0; height: var(--sp-4); font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.rt-tb-axis > span { position: absolute; left: calc((var(--a) - var(--t0)) / (var(--t1) - var(--t0)) * 100%); transform: translateX(-50%); white-space: nowrap; }
.rt-tb-axis > span[data-edge="start"] { transform: none; }
.rt-tb-axis > span[data-edge="end"] { transform: translateX(-100%); }

/* G8 Big figures of one day (Vào 16:52 · Ra 23:34 · Công 1 · Sau ca 94p), and the "Vì sao" lines under them. */
.rt-figs { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-7); margin: 0; }
.rt-figs > div { display: grid; gap: var(--sp-1); min-width: 0; }
.rt-figs dt { font-size: var(--fs-sm); color: var(--muted); }
.rt-figs dd { margin: 0; font-size: var(--fs-3xl); font-weight: 650; line-height: var(--lh-tight); color: var(--heading); font-variant-numeric: tabular-nums; }
.rt-figs dd small { margin-inline-start: 2px; font-size: var(--fs-md); font-weight: 500; color: var(--muted); }
.rt-figs dd.rt-ot { color: var(--rt-ot); }
.rt-figs dd.rt-miss { color: var(--danger); }
.rt-figs-sm dd { font-size: var(--fs-xl); }
.rt-why { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.rt-why > li { display: flex; align-items: flex-start; gap: var(--sp-2); }
.rt-why .icon { flex: none; margin-top: 2px; color: var(--ok); }
.rt-why > li[data-tone="warn"] .icon { color: var(--warn); }
.rt-why > li[data-tone="info"] .icon { color: var(--info); }
.rt-title-sm { margin: 0; font-size: var(--fs-md); font-weight: 650; color: var(--heading); }
.rt-h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-md); font-weight: 650; color: var(--heading); }
.rt-detail-head { display: grid; gap: var(--sp-2); }
.rt-detail-title { margin: 0; font-size: var(--fs-2xl); font-weight: 700; line-height: var(--lh-tight); color: var(--heading); }
.rt-detail-sub { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.rt-detail-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--panel-border); }
.rt-detail-foot > .rt-keys { margin-inline-end: auto; }
.rt-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rt-keys { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }

/* G9 Photo placeholder (no portraits): a tile that says when the photo was taken. */
.rt-photos { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rt-photo { display: grid; place-items: center; gap: 2px; width: 4.5rem; height: 4.5rem; padding: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); text-align: center; background: var(--surface-2); border: 1px solid var(--panel-border); border-radius: var(--radius); }
.rt-photo .icon { width: var(--icon-lg); height: var(--icon-lg); color: var(--field-border); }

/* G10 Drawn map (no tiles, no remote assets): land, blocks, parks, water, roads, the shop's zone and pins, people as dots with their initials. */
.rt-map { position: relative; overflow: hidden; background: var(--rt-map-land); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); }
.rt-map-svg { display: block; width: 100%; height: var(--map-h, 15rem); }
.rt-map-land { fill: var(--rt-map-land); }
.rt-map-block rect { fill: var(--rt-map-block); }
.rt-map-park { fill: var(--rt-map-park); }
.rt-map-water { fill: var(--rt-map-water); }
.rt-map-river { fill: none; stroke: var(--rt-map-water); stroke-width: 18; stroke-linecap: round; }
.rt-map-road-edge path { fill: none; stroke: var(--rt-map-road-edge); stroke-width: 9; stroke-linecap: round; }
.rt-map-road path { fill: none; stroke: var(--rt-map-road); stroke-width: 6; stroke-linecap: round; }
.rt-map-text text { font-family: var(--font-body); font-size: calc(var(--fs-xs) * var(--map-k, 1)); font-weight: 500; fill: var(--rt-map-label); text-anchor: middle; }
.rt-map-zone { fill: var(--primary); fill-opacity: 0.12; stroke: var(--primary); stroke-width: 2; stroke-dasharray: 6 4; }
.rt-map-pin rect { fill: var(--surface); stroke: var(--field-border); stroke-width: 1; }
.rt-map-pin text { font-family: var(--font-body); font-size: calc(var(--fs-xs) * var(--map-k, 1)); font-weight: 650; fill: var(--text); text-anchor: middle; }
.rt-map-pin path { fill: var(--primary); stroke: var(--surface); stroke-width: 1.5; }
.rt-map-dot circle { fill: var(--ok); stroke: var(--surface); stroke-width: 2.5; }
.rt-map-dot text { font-family: var(--font-body); font-size: calc(var(--fs-xs) * 0.66 * var(--map-k, 1)); font-weight: 700; fill: var(--surface); text-anchor: middle; }
.rt-map-dot[data-s="late"] circle { fill: var(--warn); }
.rt-map-dot[data-s="out"] circle { fill: var(--danger); }
.rt-map-dot[data-s="wait"] circle { fill: var(--muted); }
.rt-map-dot[data-s="me"] circle { fill: var(--info); }
.rt-map-line { fill: none; stroke: var(--danger); stroke-width: 2; stroke-dasharray: 4 4; }
.rt-map-legend { position: absolute; inset-inline-start: var(--sp-3); bottom: var(--sp-3); display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); color: var(--text); background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius-pill); box-shadow: var(--sh-1); }
.rt-map-legend > span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.rt-map-legend i { width: 0.625rem; height: 0.625rem; background: var(--ok); border-radius: 50%; }
.rt-map-legend i[data-s="late"] { background: var(--warn); }
.rt-map-legend i[data-s="out"] { background: var(--danger); }
.rt-map-legend i[data-s="wait"] { background: var(--muted); }
.rt-map-legend i[data-s="zone"] { background: var(--primary-tint); border: 1.5px dashed var(--primary); }
.rt-map-tools { position: absolute; top: var(--sp-3); inset-inline-end: var(--sp-3); display: grid; gap: var(--sp-1); }
/* G29 "Gợi ý từ lần chấm thật" drawn on the map (S9): the suggested pin as a small info ring with a dashed line from the current pin,
   the suggested radius as a second dashed ring; and the pin buttons row of the edit drawer (S9a). */
.rt-map-hint { fill: var(--surface); stroke: var(--info); stroke-width: 3; }
.rt-map-hint-line { stroke: var(--info); stroke-width: 2; stroke-dasharray: 3 3; }
.rt-map-zone-new { fill: none; stroke: var(--info); stroke-width: 2; stroke-dasharray: 3 3; }
.rt-map-legend i[data-s="hint"] { background: var(--surface); border: 2px dashed var(--info); }
.rt-pin-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }

/* G11 Day marks of the timesheet grid, inside the kit's td.cell-mark > a: a small square that says the day in a letter
   (solid brown = full day, ½ M ! V G C, + for OT dashed while waiting and solid once approved, P leave, L holiday). */
.rt-mark { --mk-bg: var(--surface-2); --mk-fg: var(--muted); --mk-line: var(--panel-border); display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; font-size: var(--fs-xs); font-weight: 700; line-height: 1; color: var(--mk-fg); background: var(--mk-bg); border: 1px solid var(--mk-line); border-radius: var(--radius-sm); }
.rt-mark[data-k="du"] { --mk-bg: var(--primary); --mk-line: var(--primary); --mk-fg: var(--on-primary); }
.rt-mark[data-k="nua"] { --mk-bg: var(--ok-bg); --mk-line: var(--ok-line); --mk-fg: var(--ok); }
.rt-mark[data-k="muon"] { --mk-bg: var(--warn-bg); --mk-line: var(--warn-line); --mk-fg: var(--warn); }
.rt-mark[data-k="thieu"] { --mk-bg: var(--danger); --mk-line: var(--danger); --mk-fg: var(--on-danger); }
.rt-mark[data-k="vang"] { --mk-bg: var(--danger-bg); --mk-line: var(--danger); --mk-fg: var(--danger); }
.rt-mark[data-k="ngoai"] { --mk-bg: var(--surface); --mk-line: var(--danger); --mk-fg: var(--danger); border-width: 1.5px; }
.rt-mark[data-k="sai"] { --mk-bg: var(--surface); --mk-line: var(--warn); --mk-fg: var(--warn); border-width: 1.5px; }
.rt-mark[data-k="otc"] { --mk-bg: var(--rt-ot-bg); --mk-line: var(--rt-ot); --mk-fg: var(--rt-ot); border-style: dashed; border-width: 1.5px; }
.rt-mark[data-k="ot"] { --mk-bg: var(--rt-ot); --mk-line: var(--rt-ot); --mk-fg: var(--rt-on-ot); }
.rt-mark[data-k="phep"] { --mk-bg: var(--info); --mk-line: var(--info); --mk-fg: var(--surface); }
.rt-mark[data-k="le"] { --mk-bg: var(--sunk); --mk-line: var(--field-border); --mk-fg: var(--text); }
.rt-mark[data-k="dang"] { --mk-bg: var(--surface); --mk-line: var(--primary); --mk-fg: var(--primary); border-style: dashed; border-width: 1.5px; }
.rt-mark[data-k="nghi"] { --mk-bg: transparent; --mk-line: transparent; }
.rt-mark[data-k="tuong-lai"] { --mk-bg: var(--surface-2); --mk-line: var(--panel-border); }
.rt-mark-lg { width: 1.75rem; height: 1.75rem; font-size: var(--fs-sm); }
.rt-cn { color: var(--danger); }
.rt-dow { display: grid; line-height: 1.1; font-size: var(--fs-xs); }
.rt-dow b { font-weight: 700; }
.rt-person { display: grid; line-height: var(--lh-tight); }
.rt-person > a, .rt-person > b { font-weight: 650; color: var(--heading); text-decoration: none; }
.rt-person > a:hover { text-decoration: underline; }
.rt-person > span { font-size: var(--fs-xs); color: var(--muted); }

/* G12 Roster grid (Xếp ca): a week across, people down, grouped by position; cells hold a stack of shift chips. */
.rt-roster { table-layout: fixed; width: 100%; }
.rt-roster col.rt-col-who { width: 13rem; }
.rt-roster td.rt-slot { height: 3.25rem; padding: var(--sp-1); vertical-align: middle; cursor: cell; }
.rt-roster td.rt-slot:hover { box-shadow: inset 0 0 0 2px var(--primary-tint-line); }
.rt-roster td.rt-slot .rt-shift { width: 100%; gap: var(--sp-1); }
.rt-roster td.rt-slot .rt-shift[data-state="unsaved"]::after { inset-inline-end: var(--sp-1); }
.rt-roster tr.rt-group > th { padding: var(--sp-2) var(--sp-3); font-weight: 650; text-align: start; background: var(--surface-2); }
.rt-roster tr.rt-group > td { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--muted); background: var(--surface-2); }
.rt-roster thead th .rt-dow { text-align: center; }
.rt-roster thead th small { display: block; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
/* "Số người mỗi ca" under the week: one row per shift, a red cell where that day has nobody for a shift other days have, then the day totals. */
.rt-cover td { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.rt-cover tr.rt-group > td { text-align: start; font-weight: 400; }
.rt-cover-ca { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 500; }
.rt-cover td.rt-cover-gap { color: var(--danger); background: var(--danger-bg); box-shadow: inset 0 0 0 1.5px var(--danger-line); }
.rt-cover td.rt-cover-gap { white-space: nowrap; }
.rt-cover-gap .icon { display: inline-block; width: var(--icon-sm); height: var(--icon-sm); margin-inline-end: 2px; vertical-align: -3px; }
.rt-cover-total > * { font-weight: 700; color: var(--heading); border-top: 2px solid var(--panel-border); }
.rt-roster [data-col="today"] { background: var(--primary-tint); }
.rt-roster tbody td[data-col="today"] { background: color-mix(in srgb, var(--primary-tint) 45%, var(--surface)); }

/* G13 Shift palette: pick a shift to paint with (radio chips that show the shift chip, its name and time). */
.rt-palette { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.rt-pal { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2); font: inherit; text-align: start; color: var(--text); background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius-pill); cursor: pointer; }
.rt-pal:hover { border-color: var(--field-border); }
.rt-pal[aria-checked="true"] { background: var(--primary-tint); border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.rt-pal-text { display: grid; line-height: 1.15; }
.rt-pal-text b { font-size: var(--fs-sm); font-weight: 650; }
.rt-pal-text span { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.rt-pal > .icon { color: var(--muted); }
.rt-hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--muted); }
.rt-hint b { color: var(--text); }

/* G14 Live board (Điều phối): who is where, by row on one hour axis. */
.rt-board { display: grid; gap: 0; }
.rt-board-row { display: grid; grid-template-columns: 13rem minmax(0, 1fr) 8.5rem; align-items: center; gap: var(--sp-4); min-height: 3.5rem; padding: var(--sp-2) var(--sp-5); border-bottom: 1px solid var(--panel-border); }
.rt-board-row:last-child { border-bottom: 0; }
.rt-board-head { min-height: 0; padding-block: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); background: var(--surface-2); }
.rt-board-head .rt-timebar { padding-bottom: var(--sp-4); }
.rt-board-end { display: grid; justify-items: end; gap: 2px; font-size: var(--fs-sm); color: var(--muted); text-align: end; font-variant-numeric: tabular-nums; }
.rt-board-group { padding: var(--sp-2) var(--sp-5); font-size: var(--fs-sm); font-weight: 650; color: var(--heading); background: var(--surface-2); border-bottom: 1px solid var(--panel-border); }
/* The day boundary (0 giờ) as a dashed line across a row, and a punch made outside the zone as a small red diamond on the presence row. */
.rt-tb-day { position: absolute; top: calc(var(--sp-1) * -1); bottom: calc(var(--sp-1) * -1); left: calc((var(--a) - var(--t0)) / (var(--t1) - var(--t0)) * 100%); border-inline-start: 1px dashed var(--field-border); }
.rt-tb-out, .rt-tb-row > .rt-tb-out { position: absolute; top: 50%; bottom: auto; left: calc((var(--a) - var(--t0)) / (var(--t1) - var(--t0)) * 100%); width: 0.75rem; height: 0.75rem; background: var(--danger); border: 2px solid var(--surface); border-radius: 0; transform: translate(-50%, -50%) rotate(45deg); }
.rt-tb-out-key { position: static; display: inline-block; flex: none; transform: rotate(45deg); }
/* "Chấm công 24 giờ qua": the kit's work list laid out in two columns of punches. */
.rt-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); column-gap: var(--sp-5); padding-inline: var(--sp-1); }
.rt-feed > li > .work-item { min-height: 3.5rem; border-bottom: 1px solid var(--panel-border); }
.rt-feed-warn { font-weight: 600; color: var(--warn); }
.rt-feed-bad { font-weight: 600; color: var(--danger); }
.rt-sec-top { border-top: 1px solid var(--panel-border); }

/* G15 Punch screen (app): the big clock, the round VÀO CA / RA CA button with its halo, the geofence pill on the band. */
.rt-band-app { padding: var(--sp-1) var(--sp-5) calc(var(--sp-9) + var(--sp-2)); }
.rt-app-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4) var(--sp-5) var(--sp-6); }
.rt-app-lift { margin-top: calc((var(--sp-9) + var(--sp-2)) * -1); padding-top: 0; }
.rt-geo { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 2rem; padding: 0 var(--sp-3); font-size: var(--fs-sm); font-weight: 600; color: var(--header-fg); background: var(--header-button-hover); border: 1px solid var(--header-button-border); border-radius: var(--radius-pill); }
.rt-geo .icon { width: var(--icon-sm); height: var(--icon-sm); }
.rt-geo-in { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-line); }
.rt-geo-out { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-line); }
.rt-geo-wait { color: var(--muted); background: var(--surface-2); border-color: var(--panel-border); }
.rt-shiftcard { display: grid; gap: var(--sp-2); }
.rt-shiftcard-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.rt-shiftcard-name { font-size: var(--fs-lg); font-weight: 700; color: var(--heading); }
.rt-shiftcard-time { font-size: var(--fs-md); color: var(--text); font-variant-numeric: tabular-nums; }
.rt-clock { display: grid; justify-items: center; gap: var(--sp-1); padding-top: var(--sp-2); text-align: center; }
.rt-clock-time { font-size: var(--fs-figure); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: var(--heading); font-variant-numeric: tabular-nums; }
.rt-clock-date { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rt-punch-wrap { display: grid; justify-items: center; gap: var(--sp-3); padding-block: var(--sp-4) var(--sp-2); }
.rt-punch { display: grid; place-content: center; justify-items: center; gap: var(--sp-1); width: 11rem; height: 11rem; padding: 0; font: inherit; color: var(--on-primary); text-decoration: none; background: var(--primary); border: 0; border-radius: 50%; box-shadow: 0 0 0 var(--sp-5) var(--primary-tint), 0 0 0 calc(var(--sp-5) + var(--sp-4)) color-mix(in srgb, var(--primary-tint) 45%, var(--bg)), var(--sh-brand); cursor: pointer; transition: transform var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease); }
.rt-punch:hover { background: var(--primary-hover); }
.rt-punch:active { transform: scale(0.97); }
.rt-punch:focus-visible { outline: 3px solid var(--focus); outline-offset: calc(var(--sp-5) + var(--sp-5)); }
.rt-punch .icon { width: 2.75rem; height: 2.75rem; }
.rt-punch-word { font-size: var(--fs-xl); font-weight: 800; letter-spacing: 0.06em; }
.rt-punch-sub { font-size: var(--fs-sm); color: var(--on-primary); opacity: 0.9; }
.rt-punch-out { background: var(--rt-out); box-shadow: 0 0 0 var(--sp-5) var(--rt-out-tint), 0 0 0 calc(var(--sp-5) + var(--sp-4)) color-mix(in srgb, var(--rt-out-tint) 45%, var(--bg)), var(--sh-2); }
.rt-punch-out:hover { background: var(--rt-out); filter: brightness(0.92); }
.rt-punch[aria-disabled="true"] { color: var(--muted); background: var(--sunk); box-shadow: 0 0 0 var(--sp-5) var(--surface-2); cursor: not-allowed; }
.rt-punch[aria-disabled="true"] .rt-punch-sub { color: var(--muted); }
.rt-punch-wrap .btn-link { margin-top: var(--sp-5); }
.rt-pending { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--tap); padding: var(--sp-4); color: var(--text); text-decoration: none; background: var(--surface); border: var(--border-w, 1px) solid var(--panel-border); border-radius: var(--radius-lg); }
.rt-pending:hover { background: var(--surface-hover); }
.rt-pending > .icon { flex: none; color: var(--primary); }
.rt-pending > .rt-pending-text { flex: 1 1 auto; min-width: 0; }
.rt-pending b { display: block; }
.rt-pending span { font-size: var(--fs-sm); color: var(--muted); }

/* G16 Create tab in the middle of the app tab bar: a raised round primary button inside an ordinary .tabbar-item, plus the "new" dot on Tôi. */
.rt-create-ic { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-top: calc(var(--sp-6) * -1); color: var(--on-primary); background: var(--primary); border: var(--sp-1) solid var(--surface); border-radius: 50%; box-shadow: var(--sh-brand); }
.rt-create-ic .icon { width: var(--icon-lg); height: var(--icon-lg); }
.tabbar-item[aria-current="page"] .rt-create-ic { background: var(--primary-hover); }
.rt-tab-dot { position: absolute; top: 2px; inset-inline-end: 0.875rem; width: 0.5rem; height: 0.5rem; background: var(--danger); border: 1.5px solid var(--surface); border-radius: 50%; }

/* G17 Month of days on the phone (Lịch & công): a 7-column grid, each day a number with its state as a coloured bar under it. */
.rt-cal { width: 100%; table-layout: fixed; border-collapse: collapse; }
.rt-cal th { padding: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-align: center; }
.rt-cal td { padding: 2px; text-align: center; }
.rt-cal-day { --cd-bar: transparent; position: relative; display: grid; place-items: center; width: 100%; min-height: var(--tap); padding-bottom: var(--sp-1); font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text); text-decoration: none; background: none; border: 0; border-radius: var(--radius); font-variant-numeric: tabular-nums; cursor: pointer; }
.rt-cal-day::after { content: ""; position: absolute; bottom: 5px; left: 30%; right: 30%; height: 3px; background: var(--cd-bar); border-radius: var(--radius-pill); }
.rt-cal-day:hover { background: var(--surface-hover); }
.rt-cal-day[data-k="du"] { --cd-bar: var(--primary); }
.rt-cal-day[data-k="muon"] { --cd-bar: var(--rt-late); }
.rt-cal-day[data-k="thieu"] { --cd-bar: var(--danger); }
.rt-cal-day[data-k="ot"] { --cd-bar: var(--rt-ot); }
.rt-cal-day[data-k="phep"] { --cd-bar: var(--info); }
.rt-cal-day[data-k="le"] { --cd-bar: var(--field-border); }
.rt-cal-day[data-k="tuong-lai"] { color: var(--muted); font-weight: 500; }
.rt-cal-day[aria-current="date"] { box-shadow: inset 0 0 0 2px var(--primary); }
.rt-cal-day[aria-pressed="true"] { color: var(--on-primary); background: var(--primary); }
.rt-cal-day[aria-pressed="true"]::after { background: var(--on-primary); }
.rt-cal td.rt-cal-out .rt-cal-day { visibility: hidden; }
.rt-cal-cn { color: var(--danger); }
.rt-bars { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--muted); }
.rt-bars > li { display: inline-flex; align-items: center; gap: var(--sp-1); }
.rt-bars i { width: 0.875rem; height: 3px; background: var(--primary); border-radius: var(--radius-pill); }
.rt-bars i[data-k="muon"] { background: var(--rt-late); }
.rt-bars i[data-k="thieu"] { background: var(--danger); }
.rt-bars i[data-k="ot"] { background: var(--rt-ot); }
.rt-bars i[data-k="phep"] { background: var(--info); }
.rt-bars i[data-k="le"] { background: var(--field-border); }
.rt-bars i[data-k="chon"] { background: var(--rt-shift-sang-line); }
.rt-bars i[data-k="trong"] { background: var(--panel-border); }

/* G18 Statement lines (lương, phiếu lương): label with its working underneath, amount at the end, a section head and the total. */
.rt-lines { display: grid; margin: 0; padding: 0; list-style: none; }
.rt-lines > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-1) var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--panel-border); }
.rt-lines > li:last-child { border-bottom: 0; }
.rt-line-label { font-weight: 600; color: var(--text); }
.rt-line-calc { grid-column: 1; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.rt-line-amt { grid-column: 2; grid-row: 1; font-weight: 650; text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rt-line-amt.rt-neg { color: var(--danger); }
.rt-lines > li.rt-line-head { padding: var(--sp-4) 0 var(--sp-1); font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); border-bottom: 0; }
.rt-lines > li.rt-line-total { padding-top: var(--sp-4); border-top: 2px solid var(--text); border-bottom: 0; }
.rt-line-total .rt-line-label { font-size: var(--fs-lg); font-weight: 700; }
.rt-line-total .rt-line-amt { font-size: var(--fs-2xl); font-weight: 700; color: var(--heading); }
.rt-why-box { display: grid; gap: var(--sp-1); margin-top: var(--sp-1); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--text); background: var(--surface-2); border-radius: var(--radius); }

/* G28 Period status of Lương (S6): the payroll total and its state at the left, readiness and the publish button at the right; and the
   "Từng ngày" table under the sao kê, where a week that needs no look is one row with a toggle. */
.rt-paystat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); align-items: center; gap: var(--sp-4) var(--sp-7); }
.rt-paystat p { margin: 0; }
.rt-paystat-act { justify-items: stretch; padding-inline-start: var(--sp-6); border-inline-start: 1px solid var(--panel-border); }
.rt-paystat-act > .btn { justify-self: start; }
.rt-week-sum > td { padding-block: var(--sp-1); background: var(--surface-2); }
.rt-week-sum .row-toggle { gap: var(--sp-2); font-weight: 500; }
.rt-week-sum .row-toggle .rt-muted { font-weight: 400; }
.rt-daily tbody th { font-weight: 600; white-space: nowrap; }

/* G19 Big figure on the band (Thực lĩnh on the phone): the amount in the header colour, as large as the clock. */
.rt-band-figure { margin: var(--sp-1) 0 0; font-size: var(--fs-3xl); font-weight: 750; line-height: var(--lh-tight); color: var(--header-fg); font-variant-numeric: tabular-nums; }
.rt-band-app .rt-band-row { margin-top: var(--sp-2); justify-content: space-between; }

/* G20 Colour swatches (Cài đặt, màu chủ đạo) and the QR / install placeholders. */
.rt-swatches { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.rt-swatch { --sw: var(--rt-swatch-ca-phe); display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; color: var(--on-primary); background: var(--sw); border: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--panel-border); cursor: pointer; }
.rt-swatch .icon { visibility: hidden; }
.rt-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.rt-swatch[aria-checked="true"] .icon { visibility: visible; }
.rt-swatch[data-c="reu"] { --sw: var(--rt-swatch-reu); }
.rt-swatch[data-c="than"] { --sw: var(--rt-swatch-than); }
.rt-swatch[data-c="gach"] { --sw: var(--rt-swatch-gach); }
.rt-swatch[data-c="dat"] { --sw: var(--rt-swatch-dat); }
.rt-swatch[data-c="muc"] { --sw: var(--rt-swatch-muc); }
.rt-qr { display: block; width: 9rem; height: 9rem; padding: var(--sp-2); color: var(--heading); background: var(--surface); border: 1px solid var(--panel-border); border-radius: var(--radius); }
.rt-qr rect { fill: currentColor; }
.rt-preview { display: grid; grid-template-columns: 5rem minmax(0, 1fr); overflow: hidden; min-height: 9rem; background: var(--bg); border: 1px solid var(--panel-border); border-radius: var(--radius-lg); }
.rt-preview-side { background: var(--surface); border-inline-end: 1px solid var(--panel-border); }
.rt-preview-band { height: 3.5rem; background: var(--header-bg); }
.rt-preview-card { height: 3.5rem; margin: calc(var(--sp-6) * -1) var(--sp-3) var(--sp-3); background: var(--surface); border-radius: var(--radius); box-shadow: var(--sh-1); }

/* G21 Camera screen (app): a dark full-height stage with an oval guide. */
.rt-cam { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 100dvh; color: var(--header-fg); background: var(--heading); }
.rt-cam-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.rt-cam-head h1 { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--header-fg); }
.rt-cam-stage { display: grid; place-items: center; align-content: center; gap: var(--sp-4); padding: var(--sp-4); }
.rt-cam-oval { display: grid; place-items: center; width: 15rem; height: 19rem; border: 3px dashed var(--header-muted); border-radius: 50%; }
.rt-cam-oval .icon { width: 4rem; height: 4rem; color: var(--header-muted); }
.rt-cam-text { max-width: 30ch; margin: 0; font-size: var(--fs-md); text-align: center; color: var(--header-muted); }
.rt-cam-foot { display: grid; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); }
.rt-cam :focus-visible { outline-color: var(--header-focus); }

/* G23 Wide drawer: one person's month needs more than the kit's 560px drawer-lg, so the tenant points drawer-lg at the wide modal width. */
.rt-drawer-xl { --modal-w: var(--modal-w-lg); }
.rt-day-list { display: grid; margin: 0; padding: 0; list-style: none; }
.rt-day { display: grid; grid-template-columns: 5.5rem 6.5rem minmax(0, 1fr) 7rem 9.5rem; align-items: center; gap: var(--sp-3); min-height: 3.25rem; padding: var(--sp-2) var(--sp-5); color: inherit; text-decoration: none; border-bottom: 1px solid var(--panel-border); }
.rt-day:hover { background: var(--surface-hover); }
.rt-day-date { display: grid; line-height: var(--lh-tight); }
.rt-day-date b { font-weight: 650; color: var(--heading); }
.rt-day-date span { font-size: var(--fs-xs); color: var(--muted); }
.rt-day-io { font-size: var(--fs-sm); color: var(--muted); text-align: end; font-variant-numeric: tabular-nums; }
.rt-day-end { display: flex; justify-content: flex-end; }
.rt-week { table-layout: fixed; width: 100%; }
.rt-week col.rt-col-who { width: 11rem; }
.rt-week td { vertical-align: top; }
.rt-week .rt-cell-time { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; }


/* G24 Shift registration grid (app): the shifts down, next week's days across; each cell is a toggle in the shift's colours. */
.rt-reg { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 3px; }
.rt-reg th { padding: 0 0 var(--sp-1); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-align: center; }
.rt-reg th:first-child { width: 3.25rem; }
.rt-reg th[scope="row"] { padding: 0; text-align: start; line-height: var(--lh-tight); white-space: nowrap; }
.rt-reg th[scope="row"] b { display: block; color: var(--text); }
.rt-reg td { padding: 0; }
.rt-reg-cell { --sc-bg: var(--sunk); --sc-line: var(--field-border); --sc-ink: var(--text); display: grid; place-items: center; width: 100%; height: var(--tap); padding: 0; color: var(--muted); background: var(--surface-2); border: 1.5px dashed var(--panel-border); border-radius: var(--radius-sm); cursor: pointer; }
.rt-reg-cell .icon { visibility: hidden; width: var(--icon-sm); height: var(--icon-sm); }
.rt-reg-cell[aria-pressed="true"] { color: var(--sc-ink); background: var(--sc-bg); border: 1.5px solid var(--sc-line); }
.rt-reg-cell[aria-pressed="true"] .icon { visibility: visible; }
.rt-reg-cell[data-state="taken"] .icon { visibility: visible; }
.rt-reg-cell:disabled { background: transparent; border-color: transparent; cursor: not-allowed; }
.rt-reg-cell:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.rt-week-list { display: grid; margin: 0; padding: 0; list-style: none; }
.rt-week-list > li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: var(--sp-2) 0; border-bottom: 1px solid var(--panel-border); }
.rt-week-list > li:last-child { border-bottom: 0; }
.rt-week-list b { font-weight: 650; }
.rt-week-list .rt-shift { gap: var(--sp-1); padding-inline: var(--sp-1); }
.rt-week-list > li > b { white-space: nowrap; }
.rt-week-list .rt-small { color: var(--muted); }

/* G25 Seven-day strip (admin on a phone): a person's week as seven equal cells, under a shared day head. */
.rt-days7 { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-1); }
.rt-days7 > * { display: grid; place-items: center; min-width: 0; }
.rt-days7-head { padding-inline: var(--sp-4); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); text-align: center; }
.rt-pcard { display: grid; gap: var(--sp-3); padding: var(--sp-4); color: var(--text); text-decoration: none; background: var(--surface); border: var(--border-w, 1px) solid var(--panel-border); border-radius: var(--radius-lg); }
a.rt-pcard:hover { background: var(--surface-hover); }
.rt-slot-btn { display: grid; place-items: center; width: 100%; min-height: var(--tap); padding: 0; color: var(--muted); background: var(--surface-2); border: 1.5px dashed var(--panel-border); border-radius: var(--radius-sm); cursor: pointer; }
.rt-slot-btn .icon { width: var(--icon-sm); height: var(--icon-sm); }
.rt-slot-full { background: none; border: 0; }
.rt-slot-full .rt-shift { justify-content: center; width: 100%; min-height: var(--tap); padding: 0 2px; }
.rt-slot-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
@media (max-width: 23.75rem) { .rt-slot-full .rt-shift { padding: 0 1px; } .rt-slot-full .rt-shift > b { font-size: 0.625rem; letter-spacing: 0; } }
.rt-palette-row { flex-wrap: nowrap; }
.rt-palette-row .rt-pal { flex: none; }
/* G22 Small glue: a row of cards, a figure strip inside a panel, two-column forms, list heads, a centred lone panel. */
.rt-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.rt-row-between { justify-content: space-between; }
.rt-row-center { justify-content: center; }
.rt-row-end { justify-content: flex-end; }
.rt-row-top { align-items: flex-start; gap: var(--sp-5); }
.rt-q-sug-warn { color: var(--warn); }
.rt-paper-block { margin-top: 5mm; }
.rt-sign { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14mm; text-align: center; }
.rt-sign p { margin: 0; }
.rt-sign b { display: block; margin-bottom: 18mm; }
.rt-panel-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding: 0 var(--sp-5) var(--sp-4); }
.rt-panel-pad { padding: 0 var(--sp-4) var(--sp-4); }
.rt-grow { flex: 1 1 auto; min-width: 0; }
.rt-muted { color: var(--muted); }
.rt-small { font-size: var(--fs-sm); }
.rt-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-strong { font-weight: 650; color: var(--heading); }
.rt-form-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.rt-span-all { grid-column: 1 / -1; }
.rt-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.rt-filters > .input, .rt-filters > .select { width: 11rem; flex: 0 1 auto; }
.rt-filters > .rt-filter-wide { width: 14.5rem; }
.rt-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; gap: var(--sp-5); }
.rt-cols-even { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--sp-5); }
.rt-sec { display: grid; gap: var(--sp-3); }
.rt-sec + .rt-sec { padding-top: var(--sp-5); border-top: 1px solid var(--panel-border); }
.rt-pin { display: inline-flex; gap: var(--sp-1); }
.rt-pin > span { display: grid; place-items: center; width: 2.25rem; height: 2.75rem; font-size: var(--fs-xl); font-weight: 700; color: var(--heading); background: var(--surface-2); border: 1px solid var(--field-border); border-radius: var(--radius); font-variant-numeric: tabular-nums; }
.rt-steps { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; counter-reset: rt-step; }
.rt-steps > li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--sp-3); align-items: start; counter-increment: rt-step; }
.rt-steps > li::before { content: counter(rt-step); display: grid; place-items: center; width: 2rem; height: 2rem; font-weight: 700; color: var(--on-primary-tint); background: var(--primary-tint); border-radius: 50%; }

/* G26 Coach-mark tour (first visit of a page, S29a): the part being explained is lifted above a scrim, with a small card under it
   ("Hướng dẫn · bước 1 / 4", a title, one or two sentences, progress dots, Bỏ qua / Tiếp). The card is not modal: the page stays readable. */
.rt-tour-target { position: relative; z-index: calc(var(--z-topbar) + 2); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 0 0 var(--sp-2) var(--surface), 0 0 0 100vmax var(--scrim); }
.rt-tour { position: absolute; top: calc(100% + var(--sp-5)); inset-inline-start: 0; z-index: 1; display: grid; gap: var(--sp-2); width: 22rem; padding: var(--sp-4) var(--sp-5); color: var(--text); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--sh-3); }
.rt-tour::before { content: ""; position: absolute; top: calc(var(--sp-2) * -1); inset-inline-start: var(--sp-7); width: var(--sp-4); height: var(--sp-4); background: var(--surface); transform: rotate(45deg); }
.rt-tour p { margin: 0; }
.rt-tour-step { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.rt-tour-step .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--primary); }
.rt-tour-title { margin: 0; font-size: var(--fs-lg); font-weight: 700; color: var(--heading); }
.rt-tour-foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.rt-tour-dots { display: inline-flex; gap: var(--sp-1); margin-inline-end: auto; }
.rt-tour-dots i { width: 0.5rem; height: 0.5rem; background: var(--panel-border); border-radius: 50%; }
.rt-tour-dots i[data-on] { width: 1.25rem; background: var(--primary); border-radius: var(--radius-pill); }

/* G27 Working days of a position (S8): seven small day squares, T2 … CN, the days the position works filled with the brand tint. */
.rt-wdays { display: inline-flex; gap: 2px; }
.rt-wdays > span { display: grid; place-items: center; width: 1.625rem; height: 1.5rem; font-size: var(--fs-xs); font-weight: 650; color: var(--on-primary-tint); background: var(--primary-tint); border-radius: var(--radius-sm); }
.rt-wdays > span[data-off] { color: var(--muted); background: var(--surface-2); font-weight: 500; text-decoration: line-through; }
.rt-stack-sm { display: grid; gap: var(--sp-1); justify-items: start; }

/* Kit defect 10 (KIT_GAPS), stopgap: a group of radios or checkboxes as one field (fieldset.field > legend.label) has no rule in the
   vendored kit v1.3, so the browser's grooved frame showed. Same two rules as the current kit; drop them when the
   kit is re-vendored. */
fieldset.field { min-width: 0; padding: 0; margin: 0; border: 0; }
fieldset.field > legend.label { padding: 0; margin-bottom: var(--sp-2); }
/* Kit defect 9 (KIT_GAPS), stopgap: .tabs had overflow-x: auto only, so .tab's -1px margin gave the strip a 1px vertical scrollbar.
   Same rule as the current kit; drop it when the kit is re-vendored. */
.tabs { overflow-y: hidden; }

/* Narrow windows: the split stacks, two-column glue becomes one. */
@media (max-width: 64rem) {
  .rt-split { grid-template-columns: minmax(0, 1fr); }
  .rt-split-list { border-inline-end: 0; border-bottom: 1px solid var(--panel-border); }
  .rt-cols, .rt-cols-even { grid-template-columns: minmax(0, 1fr); }
  .rt-board-row { grid-template-columns: 10rem minmax(0, 1fr); }
  .rt-board-end { display: none; }
}
@media (max-width: 48rem) {
  .rt-main { --rt-gutter: var(--sp-4); }
  .rt-form-2 { grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .rt-band, .rt-main > .rt-band { display: none; }
}

/* G28 Phone grids of seven day cells (S18 calendar, S19 week sign-up, S5e per-person row): on a 360-390 px screen the seven cells only
   reach the 44 px touch size when the grid bleeds into the card's padding and the gaps are small. */
.rt-bleed { margin-inline: calc(var(--sp-4) * -1); width: calc(100% + var(--sp-4) * 2); }
.rt-bleed-sm { margin-inline: calc(var(--sp-2) * -1); gap: 2px; }
.rt-reg.rt-bleed { margin-inline: calc(var(--sp-5) * -1); width: calc(100% + var(--sp-5) * 2); border-spacing: 2px; }
.rt-reg-ca th { padding: var(--sp-2) var(--sp-2) 0; font-size: var(--fs-sm); font-weight: 400; color: var(--muted); text-align: start; }
.rt-reg-ca th b { display: inline; color: var(--text); }
.rt-cal.rt-bleed td { padding: 0; }
@media (max-width: 400px) {
  .rt-app-body { padding-inline: var(--sp-3); }
}

/* G29 Positions table (S8, S8b, S29a): the position name stays on one line; the other columns take the rest. */
.rt-tbl-pos th[scope="row"] { white-space: nowrap; }

/* G30 A row of a work list with a chevron of its own: keep three columns when the list sits in a narrow card (S28). */
.work-item:has(> svg.icon:last-child) { grid-template-columns: auto minmax(0, 1fr) auto; }