/* Reference tables — the table itself. THE CHROME IS NOT HERE.
 *
 * The page mounts inside the tool shell: base.html gives the real site header
 * and footer, and the vendored tools/reference-tables/css/01-tokens.css gives
 * the tool theme and the sticky gradient sub-bar (.app / .toolbar / .brand /
 * .calcchip / .ver / .statuschip), exactly as on the Pay-Revision and MR-Claim
 * pages. Nothing here re-creates any of that — this file styles the table, the
 * hover card and the copy toast, and reads the same tokens the shell reads.
 *
 * COLOURS COME FROM THE SITE TOKEN NAMES (--surface, --ink, --line, --muted,
 * --accent, --gradient), not the tool's (--card, --paper, --ink-2). Both
 * vocabularies are on the page, but only the site's are redefined under
 * .hpfas[data-mode="dark"] — base.html puts data-mode on the .hpfas div, so the
 * tool's own html[data-mode="dark"] block never fires here, and anything
 * painted with --card would stay white in dark mode. Fonts and radii are
 * mode-independent, so those come from the tool tokens and the two stay in step.
 *
 * The page is not selectable — inherited, not asserted here: the tool theme
 * already sets user-select:none on body, as it does inside every other tool.
 * What this file owns is the other half of that bargain, click-to-copy, without
 * which a reader could not get a figure out of the page at all.
 */


/* ---------- the layout ---------- */
/* THE PAGE ITSELF MUST NOT SCROLL. The level row is sticky inside the scroll
   box and always was — but the document scrolled by exactly the footer's height
   (108px measured), carrying the whole box up under the site header and the
   sub-bar, so the row a reader needs at all times disappeared at the bottom of
   the page. No sticky offset can fix that: the row is pinned to the box, and it
   was the box that moved.
   Sizing the box by hand cannot fix it either — any slack added to make room
   for a sticky box adds the same amount of document scroll, so the two can
   never meet. The layout does it instead: .hpfas is already a 100vh flex
   column with main:flex-1, so giving that chain min-height:0 lets the scroll
   box take exactly what is left after the header, the sub-bar and the footer.
   Nothing overflows the document, the footer is always on screen, and the level
   row cannot move. It also retires the calc(100vh - 112px) magic number, which
   had to know both bars' heights and would have gone stale the day either
   changed. */
/* base.html gives .hpfas `min-height:100vh`, which is NOT enough: with no
   definite height there is never negative free space, so `flex:1` children grow
   to fit their content instead of shrinking into the viewport, and a 1,025px
   table made the document 1,261px tall. A definite height is what lets the
   chain shrink. dvh second, for the mobile browsers whose chrome makes vh lie. */
.hpfas { height: 100vh; height: 100dvh; }
.hpfas > main { min-height: 0; display: flex; flex-direction: column; }
.app { flex: 1; display: flex; flex-direction: column; min-height: 0;
  /* The row height lives here rather than on the scroll box: the credit tile is
     a sibling of that box and needs it to clear the sticky header row, so both
     read it from a common ancestor. `--ref-key-w` is emitted here for the same
     reason, by the template, because it differs per table. */
  --ref-h: 25px; }

/* THE FOOTER AUTO-HIDES, so the table gets the whole screen below the sub-bar
   and the side drawer is the same height as the content beside it (Manu).
   Taking it out of the flow is what frees that space — and it is also the ONLY
   way to have both: the page still cannot scroll, so the level row still cannot
   be dragged out from under the sub-bar (W331), and yet the footer is no longer
   standing permanently in the table's light.
   A lip stays visible as the affordance, and the wrap is padded by exactly that
   lip so the footer never covers a figure. Hover or keyboard focus brings it
   up; nothing has to be clicked and nothing has to be remembered.
   Scoped to `.hpfas >` and safe because this stylesheet loads on this page
   only — the site's other pages keep their ordinary footer. */
.hpfas { --ref-lip: 7px; }
.hpfas > footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 58;
  transform: translateY(calc(100% - var(--ref-lip)));
  box-shadow: 0 -6px 22px rgba(0,0,0,.13);
  transition: transform .22s ease; }
.hpfas > footer:hover, .hpfas > footer:focus-within { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .hpfas > footer { transition: none; } }

/* ---------- the scroll box ---------- */
/* THE TABLE STARTS AT THE FIRST PIXEL BELOW THE SUB-BAR — no gap, no border and
   no rounded corner between the two — and it is the only thing on the page that
   scrolls. z-index:0 makes it a stacking context so the watermark below can sit
   at -1: behind every cell, but above the box's own background. */
.ref-wrap { flex: 1; min-height: 0; position: relative; z-index: 0;
  overflow: auto; background: var(--surface);
  /* ...by exactly the footer's lip, so the one part of it that is always on
     screen is never on top of a figure. */
  padding-bottom: var(--ref-lip); }

table.ref { border-collapse: separate; border-spacing: 0; font-family: var(--ui);
  font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* NO GRID LINES. The table is read as banded rows instead (Manu) — and the
   banding is SEMI-TRANSPARENT, mixed with `transparent` rather than with
   --surface, so the watermark shows through it instead of being blanked out
   every other row. The only two rules left are structural, not grid: the line
   under the header and the one down the right of the frozen cell-number column,
   both of which mark where a frozen pane ends and are the reason a reader can
   tell the panes apart at all while scrolling. */
table.ref th, table.ref td { height: var(--ref-h); box-sizing: border-box;
  padding: 0 11px; background: transparent; }
table.ref tbody tr:nth-child(even) td:not(.ref-x) {
  background: color-mix(in srgb, var(--ink) 5%, transparent); }

/* ---------- the frozen panes ---------- */
/* Excel freezes this sheet at D19 — three columns and the whole header stack.
   The three columns are fixed-width because a sticky column has to know its own
   offset; the stack's row offsets are emitted per row by the template. */
table.ref .ref-key { position: sticky; left: 0; z-index: 4;
  width: var(--ref-key-w, 46px); min-width: var(--ref-key-w, 46px); }

/* Both axis heads are hoverable and copyable, so both say so. */
table.ref .ref-h, table.ref tbody .ref-key { cursor: pointer; }
table.ref .ref-corner { cursor: default; }
table.ref .ref-key { font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; color: var(--accent-deep); text-align: center;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  border-right: 2px solid var(--line); }
/* The band has to carry across the frozen column or it stops at its edge — so
   the same stripe, mixed to an OPAQUE colour rather than a translucent one. */
table.ref tbody tr:nth-child(even) .ref-key {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

/* ---------- the header stack ---------- */
/* z-index: the three frozen columns (4) sit above the header cells (3) so the
   stack scrolls under them, and the corner where both stick needs to beat both. */
/* A FROZEN PANE STAYS OPAQUE. The body is see-through now so the watermark can
   read through it, but a header or a row-key that let the columns scrolling
   underneath show through would be unreadable — that fault has already been
   fixed once here, when --accent-soft turned out to be an rgba. */
table.ref thead th { position: sticky; z-index: 3;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
/* The corner sticks in both directions, so it has to beat both. */
table.ref thead .ref-key { z-index: 5; }
/* THE AXES READ AS A FRAME, NOT AS DATA. The level row and the cell-number
   column carried the same ink, weight and near-enough size as the figures, so
   the eye had to work out which was which. They now take --accent-deep and the
   mono face at a wider tracking — the vocabulary this theme already uses for a
   label rather than a value (the tile eyebrows, the hint chip, the crosshair).
   No new device, no heavier rule: the figures stay ink on paper and the two
   axes recede into one continuous accent-washed L down the top and left. */
table.ref .ref-h { font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; color: var(--accent-deep); text-align: center;
  max-width: 108px; overflow: hidden; text-overflow: ellipsis; }
table.ref .ref-h.num { font-family: var(--mono); font-weight: 700; }
/* The stack's last row is the one the body hangs from. */
table.ref thead tr:last-child th { border-bottom: 2px solid var(--line); }

/* ---------- the body ---------- */
table.ref td { text-align: right; color: var(--ink); cursor: pointer;
  font-family: var(--mono); font-size: 11.5px; }
/* Past the end of a short scale. Not an empty box: nothing to hover, nothing to
   click, and visibly not a figure that has gone missing. */
table.ref td.ref-x { cursor: default; background: repeating-linear-gradient(
  -45deg, transparent 0 6px, color-mix(in srgb, var(--line) 60%, transparent) 6px 7px); }

/* ---------- crosshair ---------- */
/* Reading cell 27 of the ninth scale across a 32-column sheet is the whole
   difficulty of this table on a screen. Row and column light together, so the
   eye never has to walk back to the header stack to be sure of what it is on.
 *
 * THE CROSSHAIR HAS TO OUT-SPECIFY THE ROW BANDING, and by weight rather than
 * by source order. `tr:nth-child(even) td` carries three class-level parts and
 * four elements; a plain `td.ref-col` carries three and two, so the banding was
 * winning and the highlight simply did not appear on every other row. Naming
 * the banded row in the highlight's own selector is what settles it — one part
 * heavier, on purpose, and it cannot be undone by moving a block. */
table.ref tbody tr:hover td:not(.ref-x),
table.ref tbody tr:nth-child(even):hover td:not(.ref-x) {
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
table.ref tbody tr:hover th.ref-key { background: color-mix(in srgb, var(--accent) 13%, var(--surface)); }
table.ref tbody tr td.ref-col:not(.ref-x),
table.ref tbody tr:nth-child(even) td.ref-col:not(.ref-x) {
  background: color-mix(in srgb, var(--accent) 10%, transparent); }
table.ref tbody tr:hover td.ref-col:not(.ref-x),
table.ref tbody tr:nth-child(even):hover td.ref-col:not(.ref-x) {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-deep); font-weight: 700; }
/* Hovered, an axis head goes from the muted accent to the solid one — the
   crosshair still has somewhere louder to go now that the axes start accented. */
table.ref thead th.ref-col { background: color-mix(in srgb, var(--accent) 11%, var(--surface)); }
table.ref tbody tr:hover th.ref-key,
table.ref thead th.ref-col { color: var(--accent); font-weight: 800; }
table.ref td:not(.ref-x):active { background: var(--accent); color: var(--on-accent); }

/* The info chip is the tool's own .idpill, styled by the tool theme. Two things
   are this page's: .banner-mid wraps by default and the sub-bar is 46px tall and
   does not grow, so a pill carrying a statutory line pushes itself out of the
   bar; and .desig is sized for a designation (260px), not for a sentence. */
.toolbar .banner-mid { flex-wrap: nowrap; min-width: 0; }
/* The theme caps .idpill at 600px, sized for an IP code and a designation. Four
   short labels want a little more than that at some widths, and the flex row is
   what should decide how much.
 *
 * CENTRED ON THE PAGE, not in the gap between the brand and the right slot
   (Manu). Those two are different widths, so flex-centring the pill inside
   `.banner-mid` put it visibly off-centre; absolute against the sub-bar is what
   makes "centre" mean the page's centre. `.banner-mid` stays in the flex row as
   the spacer it was, so nothing else in the bar moves. */
.toolbar .idpill { max-width: 100%;
  position: absolute; left: 50%; transform: translateX(-50%); }
/* Under about 1200px the pill and the table switcher beside it cannot both have
   what they need, and the pill loses characters off its end rather than saying
   less. The statute is the segment to give up: the two counts are what a reader
   glances at, and the statute is also in the article that links here. */
@media (max-width: 1200px) {
  .toolbar .idpill .ref-statute, .toolbar .idpill .ref-statute-sep { display: none; }
}

/* ---------- the watermark ---------- */
/* Fixed to the viewport, so it is stationary in the middle of the visible area
   and the figures scroll over it (Manu). z-index:-1 inside .ref-wrap's stacking
   context puts it behind every cell but still above the box's own background —
   which is why the body cells had to stop painting themselves --surface and the
   banding had to become translucent.

   THE MR-CLAIM TOOL'S OWN SCREEN WATERMARK (Manu, 2026-08-24), decoded from its
   logo_mark_grey.b64 — the asset that tool already floats behind its sheets, so
   two HPFAS surfaces do not show two different marks. Being greyscale it needs
   no tinting and no light/dark variant, which is the whole reason it was cut
   that way. (A round-bordered mark with two ring taglines was tried first; that
   file is not in the repo, and Manu chose this over chasing it.)
   Centred on the viewport rather than on the box: the chrome above (66 + 46)
   and the footer below come to within a few pixels of each other, so the two
   centres coincide and there is no height to measure or keep in step. */
.ref-wm { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(48vh, 48vw); height: auto; object-fit: contain;
  opacity: .15; z-index: -1; pointer-events: none;
  -webkit-user-select: none; user-select: none; }
@media print { .ref-wm { display: none; } }

/* ---------- the credit, in the table's blank corner ---------- */
/* The pay matrix is ragged at the top of the scale — the highest levels stop at
   cell 14 — so the bottom-right of the sheet is a large blank triangle, twelve
   columns wide and twenty-six rows deep. The mark sits in it (Manu). .ref-canvas
   shrink-wraps the table and is what actually scrolls, so the credit travels
   with the table's own corner instead of pinning itself to the viewport. */
.ref-canvas { position: relative; display: inline-block; min-width: 100%; }
/* On its own round-edged gradient tile with a shadow (Manu) — the same
   treatment the tools give the credit on their empty-state card. That also
   settles the mark: logo_cred is natively the WHITE signature, so on a gradient
   it is used as cut, with no brightness/invert tinting and nothing to undo in
   dark mode. */
/* IT FLOATS IN THE VISIBLE PORTION OF THE SCREEN (Manu): the tile sits OUTSIDE
   the scroll box, so the table moves under it and it stays where it is. WHICH
   corner is per table — 2016 and 1996 run out on the right, 2006 on the left,
   because a later fitment table starts AND ends lower — which also makes it the
   corner a reader is least often reading. The left one has to clear the drawer
   rail and the frozen row-key column, both of which own that edge. */
/* ONE GAP, MEASURED FROM THE TABLE'S OWN EDGES (Manu). The tile hangs off
   `.app`, whose bottom is the window's, but the table's content stops a lip
   short of that — the footer's — so the bottom offset has to add the lip back
   or the gap under the tile reads smaller than the gap beside it. */
.ref-cred { --ref-cred-gap: 26px;
  position: absolute; z-index: 6; display: flex;
  flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 31px; border-radius: calc(var(--r) * 1.2); background: var(--gradient);
  box-shadow: var(--shadow-lg);
  transition: opacity .18s ease, transform .18s ease;
  /* pointer-events:none is load-bearing twice over: the tile must not eat a
     cell's hover, AND the veil test reads what is under it with
     elementFromPoint, which would otherwise only ever find the tile itself. */
  pointer-events: none; -webkit-user-select: none; user-select: none; }
/* Four corners, because which one a sheet leaves empty depends on where its
   columns start and stop — and on 2006 the one a reader meets ON LOAD is not
   the same as the one that is empty after scrolling. Each offset clears the
   furniture on its own side: the header row on top, the footer's lip below,
   the drawer rail and the frozen key column on the left. */
.ref-cred--bottom-right { bottom: calc(var(--ref-cred-gap) + var(--ref-lip, 0px));
  right: var(--ref-cred-gap); }
.ref-cred--bottom-left { bottom: calc(var(--ref-cred-gap) + var(--ref-lip, 0px));
  left: calc(var(--rd-rail, 0px) + var(--ref-key-w, 46px) + var(--ref-cred-gap)); }
.ref-cred--top-right { top: calc(var(--rd-top, 0px) + var(--ref-h, 25px) + var(--ref-cred-gap));
  right: var(--ref-cred-gap); }
.ref-cred--top-left { top: calc(var(--rd-top, 0px) + var(--ref-h, 25px) + var(--ref-cred-gap));
  left: calc(var(--rd-rail, 0px) + var(--ref-key-w, 46px) + var(--ref-cred-gap)); }
/* The client's: it fades the tile out while a figure is underneath and back in
   when the figure moves on. */
.ref-cred.ref-veiled { opacity: 0; transform: translateY(8px); }
.ref-cred-t { font-family: var(--mono); font-size: 11.4px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72);
  line-height: 1; }
.ref-cred-logo { display: block; width: 276px; height: auto; opacity: .95; }
/* Narrower than this the tile would crowd the table wherever it stood. */
@media (max-width: 900px) { .ref-cred { display: none; } }

/* ---------- hover card ---------- */
/* The same three-panel shape as the tool's database hover card: a gradient cap
   top and bottom naming the two axes, the figure itself between them. */
/* Above the drawer rail (121), which is the highest thing on the page it could
   meet — a transient card answering "what am I on" must not be the thing that
   goes underneath. */
.ref-card { position: absolute; z-index: 130; min-width: 186px; border-radius: var(--r-sm);
  overflow: hidden; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--pop-shadow); pointer-events: none;
  opacity: 0; transform: translateY(4px); transition: opacity .13s, transform .13s; }
.ref-card.on { opacity: 1; transform: translateY(0); }
/* The two caps are one fixed height, not two content-driven ones. Left to grow
   with their contents the bottom cap ran 8.5px taller than the top, because the
   group chip carries its own padding and radius — so the card looked bottom-
   heavy on every hover. Height here, and the chip sized to sit inside it. */
.ref-card-hd, .ref-card-ft { display: flex; align-items: center;
  justify-content: space-between; gap: 14px;
  height: 28px; box-sizing: border-box; padding: 0 12px;
  background: var(--gradient); color: #fff;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; }
/* A cap carrying one caption instead of two centres it. space-between would
   otherwise shove a lone "Cell Number" or "Level" against the left edge, which
   reads as a missing second half rather than a deliberate single label. */
.ref-card-hd.solo, .ref-card-ft.solo { justify-content: center; }
/* An empty half is still a flex item, and the 14px gap beside it survives — so
   centring alone left the lone caption 14px off-centre. Take it out of the row
   entirely. */
.ref-card-hd > span:empty, .ref-card-ft > span:empty { display: none; }
/* The class or group is one letter. Set as running text beside a rupee figure
   it reads like a stray character, so it gets a chip — in whichever cap the
   table nominates, since the 2016 matrix has its top-right slot spoken for. */
.ref-card-hd .chip, .ref-card-ft .chip { flex: none; min-width: 17px;
  padding: 2px 7px; line-height: 1; border-radius: var(--r-pill);
  background: #fff; color: var(--accent-deep); font-weight: 800; text-align: center; }
/* THE FIGURE IS THE CARD'S CENTRE — dead centre, horizontally and vertically
   (Manu). It is therefore the ONLY thing in the body's flow: the label above it
   and the click-to-copy line below are both absolutely positioned in the body's
   own padding, so neither can push it off. Equal top and bottom padding is what
   makes "centred vertically" true; text-align does the other axis. */
.ref-card-bd { position: relative; padding: 30px 20px; text-align: center;
  font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums; }
/* The click-to-copy line is ABSOLUTE, and that is the whole point of it: it sits
   in the body's existing bottom padding, so it takes no layout space, the card
   does not grow, the gradient caps do not move, and the figure stays centred
   exactly where it was. */
/* What the figure IS — "Basic Pay", "Pay in Pay Band" — set in the same ink as
   the figure but small, so it reads as its caption and not as a second value.
   Unlike the click-to-copy line below, this one is IN the flow: it belongs to
   the figure and the card is meant to make room for it. */
.ref-card-bd .lab { position: absolute; left: 0; right: 0; top: 7px;
  font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); line-height: 1; pointer-events: none; }
.ref-card-bd .v { display: block; }

/* What the figure sits WITHIN — the level's range, or the pay band the pay is in
   (Manu). Absolute like the label and the hint, in the body's own padding, so
   the figure above it does not move a pixel whether a table fills this or not. */
.ref-card-bd .sub { position: absolute; left: 0; right: 0; bottom: 17px;
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .1em;
  color: var(--muted); line-height: 1; pointer-events: none; }
.ref-card-bd .hint { position: absolute; left: 0; right: 0; bottom: 5px;
  font-family: var(--mono); font-size: 7.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); opacity: .8; line-height: 1;
  pointer-events: none; }

/* ---------- copy toast ---------- */
.ref-toast { position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 12px);
  z-index: 132; display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 20px; border-radius: var(--r-pill); background: var(--ink); color: var(--surface);
  font-family: var(--ui); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s; }
.ref-toast.on { opacity: 1; transform: translate(-50%, 0); }
.ref-toast code { font-family: var(--mono); font-size: 12px; opacity: .7; }



@media (max-width: 720px) {
  table.ref { font-size: 11.5px; }
  table.ref th, table.ref td { padding: 0 8px; }
}