/* ═══ base ═════════════════════════════════════════════════════════════════
   Reset, typography, and the elements every section uses without importing
   anything: headings, links, buttons, tables, form controls.

   Tables get real attention here because this is a payroll product. Most of
   what a person looks at all day is a table of numbers, and numbers that are
   not figure-aligned cannot be scanned down a column — the eye has to read
   each one. The typeface draws every figure one width (tokens.css), and
   `tabular-nums` is still on every figure the product prints, for the machine
   where the face did not load.

   Everything that has a size here takes it from a density token (`--d-*`), so
   the same table is a spreadsheet's rows under Payroll and has air under Me
   without either screen saying so.                                            */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  /* The tinted crown: one soft indigo light at the top of the page fading into
     the plane. It is the cheapest depth there is — no border, no shadow.
     Fixed, so scrolling a long table does not slide the light around. There
     were three layers here, one of them violet; a page of figures does not
     need weather behind it. */
  background-color:var(--plane);
  background-image:linear-gradient(180deg, var(--plane-glow), var(--plane) 420px);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--ink);
  font:var(--w-regular) var(--d-body)/var(--lh-body) var(--sans);
  /* On the page itself, so the figure in the cell nobody marked `.num` lines
     up too — a date in a sentence, a count in a chip, an amount in an input. */
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
code,kbd,pre{font-family:var(--mono);font-size:.92em}

/* Focus is visible, always. A keyboard user in a payroll screen who cannot see
   where they are will approve the wrong row. */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-xs)}
:focus:not(:focus-visible){outline:none}

h1{font-size:var(--d-h1);line-height:var(--lh-tight);letter-spacing:-.015em;font-weight:600;margin:0 0 4px}
h2{font-size:var(--fs-base);font-weight:600;letter-spacing:-.005em;margin:0}
h3{font-size:var(--fs-md);font-weight:600;margin:0 0 8px;color:var(--ink-2)}
p{margin:0 0 12px}
p:last-child{margin-bottom:0}

.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
/* Every figure the product prints: money, dates, counts, codes. */
.num{font-variant-numeric:tabular-nums;text-align:right}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.nowrap{white-space:nowrap}
.good{color:var(--good)}
.bad{color:var(--critical)}
.warnc{color:var(--warn)}
/* Money going out of a payslip. Not a status: a deduction is not a failure,
   so it wears ink and a minus sign, never the critical colour (tokens.css). */
.minus{color:var(--ink-2)}

/* ── buttons ───────────────────────────────────────────────────────────── */
/* The primary button is the accent, flat. It carried a gradient into violet
   and a coloured glow; both were decoration on the one control whose colour
   has to mean "this is the thing to press" and nothing else. */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:var(--d-ctl-y) 16px;border-radius:var(--r-sm);
  font-size:var(--fs-md);font-weight:500;line-height:var(--lh-snug);
  background:var(--accent);
  color:var(--on-accent);
  border:1px solid transparent;
  box-shadow:var(--shadow-sm);
  transition:filter var(--fast) var(--ease), transform var(--fast) var(--ease),
             box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none;transform:none}
.btn.ghost{
  background:var(--surface);color:var(--ink);border-color:var(--line-ctl);
  box-shadow:none;
}
.btn.ghost:hover{
  background:var(--accent-wash);color:var(--accent-ink);filter:none;
  border-color:var(--accent);
}
/* The one solid status in the product: the button that ends something. */
.btn.danger{background:var(--critical-solid);color:var(--on-solid)}
.btn.sm{padding:4px 8px;font-size:var(--fs-sm)}

/* ── tables ────────────────────────────────────────────────────────────── */
table{border-collapse:collapse;width:100%;font-size:var(--d-font)}
thead th{
  /* The head is chrome: sunk, quiet capitals, and it stays in view while the
     rows scroll under it. It wore the accent wash, which made every table's
     head the same colour as a selected row. */
  text-align:left;font-weight:600;font-size:var(--fs-2xs);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
  background:var(--sunk);
  padding:var(--d-head-y) var(--d-cell-x);border-bottom:1px solid var(--line);
  white-space:nowrap;
  position:sticky;top:var(--stick, var(--nav-h));z-index:2;
}
thead th:first-child{border-radius:var(--r-sm) 0 0 0}
thead th:last-child{border-radius:0 var(--r-sm) 0 0}
thead th.num{text-align:right}
tbody td{
  padding:var(--d-cell-y) var(--d-cell-x);border-bottom:1px solid var(--line-2);
  vertical-align:top;
}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background var(--fast) var(--ease)}
tbody tr:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
td.num,th.num{font-variant-numeric:tabular-nums;text-align:right}
/* A total row is a different KIND of number, not a bolder one. */
tfoot td{padding:var(--d-cell-y) var(--d-cell-x);border-top:1px solid var(--line-ctl);font-weight:600;
  font-variant-numeric:tabular-nums}
/* Anything that scrolls on its own is its own frame, and a head inside it holds
   to ITS top, not to the bar's height — held at 56px inside a scrolling box, a
   head sits 56px down the box from the first frame. `--stick` inherits, so the
   frame says it once for every table within it; the attribute selector is for
   the scrolling boxes sections draw with an inline style. */
dialog, .sgscroll, .daybook, .mxwrap, .ocwrap, [style*="overflow"]{--stick:0px}
/* The state of a row is a rail down its first cell, never a coloured row. A
   whole row in the critical wash on a register of forty makes the register
   unreadable, and the point of the mark is that the eye finds it. */
tr.bad > td:first-child, tr.denied > td:first-child{box-shadow:inset 3px 0 0 var(--critical)}
tr.warn > td:first-child{box-shadow:inset 3px 0 0 var(--warn)}

/* What a row offers rests quiet and takes its chrome when the row is reached
   for — by the pointer or by the keyboard. Quiet rather than hidden: a touch
   screen has no hover, and an action nobody can see is an action nobody takes.
   On a directory of forty people this is a hundred and twenty boxes fewer. */
@media (hover:hover) and (pointer:fine){
  tbody tr:not(:hover):not(:focus-within) > td:last-child > .btn.ghost{
    background:transparent;border-color:transparent;color:var(--ink-2);
  }
}

/* Below the width a wide table fits, it scrolls inside the card that holds it
   rather than pushing the page sideways — the card, because half the tables
   in the product are built by their sections and have no wrapper to give the
   rule to; and `.tscroll`, which the shared table draws around itself, for the
   table that stands on the page with no card. And only below that width — a scrolling
   frame is its own scroll container, and the held head above would hold to
   nothing. */
@media (max-width:860px){
  .card, .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  thead th{position:static}
}

/* ── forms ─────────────────────────────────────────────────────────────── */
label{display:block;font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:4px}
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=number],input[type=tel],select,textarea{
  width:100%;padding:var(--d-ctl-y) var(--d-ctl-x);font:inherit;font-size:var(--fs-md);
  background:var(--raised);color:var(--ink);
  border:1px solid var(--line-ctl);border-radius:var(--r-sm);
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
input[type=number],input[type=date],input[type=tel]{font-variant-numeric:tabular-nums}
::placeholder{color:var(--ink-3);opacity:1}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--focus);
  box-shadow:var(--ring);
}
input[aria-invalid="true"]{border-color:var(--critical)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
.field{margin-bottom:12px}
.help{font-size:var(--fs-xs);color:var(--ink-3);line-height:var(--lh-snug)}
.field .help{margin-top:4px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 12px}

/* Reduced motion means no motion, not the same motion faster. Shortening the
   durations alone left three things moving, each measured in a browser with
   the preference set (docs/51 §3):
     - an entrance kept its DELAY, and sat invisible for as long as it lasted;
     - an infinite loop — the loading shimmer — restarted every hundredth of a
       millisecond, ten thousand times in a tenth of a second, which a screen
       samples as flicker;
     - and a hundredth of a millisecond is still a transition. Every element
       transitions `all` unless told otherwise, so every layout change — the
       page's padding as the sign-in screen opens — was painted one frame late,
       the old layout first.
   So transitions are zero, which starts none (nothing in web/ waits for a
   transitionend), and an animation runs once, at once, and stays on its last
   frame — it still ends, for any code that waits for animationend. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    transition-duration:0s !important; transition-delay:0s !important;
    animation-duration:var(--instant) !important; animation-delay:0s !important;
    animation-iteration-count:1 !important;
  }
}