/* ============================================================
   THE PUNCH CLOCK — cluster theme for timecard.
   Loaded AFTER atlas.css. Keeps the structural system (plates,
   key/plate layout, ruled rows, clip-path bars, ghost trace,
   pinned mobile bar) and replaces the material world.

   The world: a mechanical time clock and the card it stamps.
   Buff card stock ruled into a grid of days, punch times struck
   in red ink, the machine itself a heavy dark housing. It earns
   its place rather than decorating — the visitor is literally
   reconstructing a time card, and the signature graphic is a
   week of in/out pairs printed into that grid.

   Deliberately not the atlas's cool archival paper: a wage
   dispute is not an engraved statistical plate, it is a piece of
   card someone kept in their pocket.

   Contrast measured against both grounds before shipping;
   figures inline below. Fills that fail as text have a separate
   ink tone, the same discipline as --ochre-ink in workstream 1.
   ============================================================ */

:root{
  /* ground — GREENBAR, the barred continuous-form stock payroll actually ran
     on for decades. It replaces the buff card stock this shipped with: buff is
     authentic to a time card and reads as beige nothing, which is the one
     thing a page about your wages should not do. Greenbar is at least as
     honest to the subject, it is specific rather than generic, and the printed
     bar gives the week grid a built-in rhythm the flat ground never had.

     Ratios below are measured against both grounds in the browser, not
     asserted here — see the verification note at the end of this file. */
  --paper:#dfe7dd;
  --paper-2:#cddbca;        /* the printed bar */
  /* ink — near-black with a green cast, so it sits on the stock rather than
     on top of it */
  --ink:#151a15;
  --ink-2:#3f4a3f;
  --ink-3:#485448;
  --rule:#8fa08d;
  --rule-2:#b3c2b1;
  /* plate inks — remapped so every atlas rule keeps working */
  --prussian:#1a201b;       /* the machine housing — the plate field */
  --vermillion:#c0261a;     /* stamp red, as the machine prints */
  --vermillion-ink:#a41d12;
  --ochre:#b8891f;          /* brass */
  --ochre-ink:#6d5010;
  --olive:#2f5d43;          /* within limits */
  --olive-ink:#28513a;

  /* semantic aliases — the names the markup uses */
  --card:var(--paper);
  --stamp:var(--vermillion);
  --stamp-ink:var(--vermillion-ink);
  --machine:var(--prussian);
  --on-machine:#e6ede4;
  --on-machine-stamp:#e8735a;
}

/* ── the machine housing ─────────────────────────────────────
   A time clock is a heavy dark box bolted to a wall. The
   masthead is that box; the hairline beneath is the slot the
   card goes into. */
.masthead{
  background:var(--machine);
  border-bottom:3px solid var(--ink);
  color:var(--on-machine);
  /* .6rem rendered a 46px strip — too slight to read as a housing bolted to
     a wall, which is the one thing this element is meant to be. */
  padding-block:.9rem;
  position:relative;
}
.masthead::after{
  content:"";
  position:absolute; inset-inline:12%; bottom:-1px; height:3px;
  background:var(--ink);
  box-shadow:0 2px 0 0 var(--rule);   /* a real offset: the card slot lip */
}
.masthead a,.masthead .legend{ color:var(--on-machine); }
.masthead .legend-ink{ color:var(--on-machine-stamp); }
.masthead a:hover,.masthead .brand:hover{
  color:var(--on-machine-stamp); border-color:var(--on-machine-stamp);
}

/* Phone: brand and nav share one line, nav scrolls sideways.
   atlas.css stacks the brand above a 44px touch-target nav, which cost
   119px — 14.7% of the screen spent on housing before the card appears.
   The nav row alone sets the floor, so the brand sits beside it for free.
   flex-wrap must be undone explicitly: the base .masthead sets wrap, and
   without this the nav is wider than the brand leaves and drops a line. */
@media (max-width:40rem){
  .masthead{
    display:flex; align-items:center; gap:.85rem; flex-wrap:nowrap;
    padding:.45rem 1.25rem .5rem;
  }
  .masthead .brand{ flex:0 0 auto; margin-bottom:0; }
  .masthead nav{
    flex:1 1 auto; min-width:0;
    display:flex; flex-wrap:nowrap; gap:1.1rem;
    overflow-x:auto; scrollbar-width:none;
    margin-inline-end:-1.25rem; padding-inline-end:1.25rem;
  }
  .masthead nav::-webkit-scrollbar{ display:none }
  .masthead nav a{ white-space:nowrap; flex:0 0 auto }
}

/* ── the card ────────────────────────────────────────────────
   A printed card carries a double border: a heavy outer rule and
   a hairline inside it. That is the atlas rule hierarchy already
   — 2px bounds, 1px separates — so it needs no new weights. */
.card{
  border:2px solid var(--ink);
  padding:2px;
  background:var(--paper);
}
.card-inner{ border:1px solid var(--rule); padding:.9rem .8rem; }

/* ── the week grid ───────────────────────────────────────────
   Columns: day, in, out, break, total. Ruled like the printed
   card, with tabular numerals so the totals column reads down. */
.week{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums lining-nums; }
.week th{
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--ink-2); text-align:left;
  padding:.35rem .4rem; border-bottom:1.5px solid var(--ink);
}
.week th.num,.week td.num{ text-align:right; }
.week td{ padding:.3rem .4rem; border-bottom:1px solid var(--rule-2); }
/* The bar in greenbar. At rgba(0,0,0,.022) the alternation was invisible,
   which left a flat field of seven near-identical rows — the exact thing the
   stock was invented to stop happening to a reader's eye. Tinted from the
   limits green rather than black, so the bar is part of the palette instead
   of a grey wash over it. */
/* 4n+3, not even. Each day row is followed by its own hidden error row, so
   every VISIBLE row is an odd child and nth-child(even) matched only the
   hidden ones — the stripe was dead from the start, and an opacity of .022
   was low enough that nobody noticed it never painted.
   Day rows sit at children 1,3,5,7,9,11,13; every other one is 3,7,11. */
.week tbody tr:nth-child(4n+3){ background:rgba(47,93,67,.115); }
.week .day{ font-size:.8125rem; color:var(--ink-2); white-space:nowrap; }
.week input{
  width:100%; min-width:0; font:inherit; font-size:.9375rem;
  padding:.35rem .4rem; text-align:right;
  background:var(--paper-2); border:1px solid var(--rule); color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
}
.week input:hover{ border-color:var(--ink-2); }
.week input:focus-visible{ outline:2px solid var(--stamp); outline-offset:1px; }

/* Five columns of numbers and seven near-identical rows: the thing most
   likely to go wrong is typing Tuesday's out-time into Wednesday. Lifting
   the whole row while it is hovered or holds focus keeps the eye on the day
   being edited — and reading across is exactly what a paper card lets you
   do with a finger. Ground shift only; the rule hierarchy stays as it was. */
/* stamp red, matching --vermillion after the palette change — it was still
   the buff-era 179,36,31 */
.week tbody tr:hover,
.week tbody tr:focus-within{ background:rgba(192,38,26,.10); }
.week tbody tr:focus-within .day{ color:var(--ink); font-weight:600; }

.week .tot{ font-weight:640; color:var(--ink); }
.week .rowerr{ color:var(--stamp-ink); font-size:.75rem; }

/* the day total, struck into the card */
.week td.num.stamped{ color:var(--stamp-ink); font-weight:680; }

/* ── the stamp ───────────────────────────────────────────────
   The headline figure, printed the way the machine prints: red,
   tight, and sitting on a ruled baseline rather than in a box. */
.stamp-figure{
  font-size:clamp(2rem,6vw,3rem); line-height:1; font-weight:680;
  letter-spacing:-.03em; color:var(--stamp-ink);
  font-variant-numeric:tabular-nums lining-nums;
  border-bottom:2px solid var(--ink); padding-bottom:.2rem; display:inline-block;
}
.stamp-unit{
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--ink-2); display:block; margin-top:.4rem;
}

/* ── the split: regular / overtime / double ──────────────────*/
.split{ display:grid; gap:0; margin-top:1rem; border-top:1px solid var(--rule); }
.split-row{
  display:grid; grid-template-columns:1fr auto auto; gap:.75rem;
  align-items:baseline; padding:.5rem 0; border-bottom:1px solid var(--rule-2);
}
.split-row .lbl{ font-size:.875rem; color:var(--ink-2); }
.split-row .h,.split-row .p{
  font-variant-numeric:tabular-nums lining-nums; font-weight:600; color:var(--ink);
}
.split-row.ot .h,.split-row.ot .p{ color:var(--stamp-ink); }
.split-row.dt .h,.split-row.dt .p{ color:var(--stamp-ink); font-weight:700; }
.split-row.total{ border-bottom:2px solid var(--ink); border-top:1.5px solid var(--ink);
  margin-top:.3rem; padding-top:.5rem; }
.split-row.total .lbl,.split-row.total .h,.split-row.total .p{ font-weight:680; color:var(--ink); }

/* ── the rule being applied, named on screen ─────────────────
   The whole positioning is that the tool shows its working. The
   citation is not fine print; it is the evidence. */
.applied{
  margin-top:1rem; border-top:1px solid var(--rule); padding-top:.7rem;
  font-size:.8125rem; color:var(--ink-2);
}
.applied b{ color:var(--ink); font-weight:600; }
.applied cite{ font-style:normal; color:var(--ochre-ink); }
.applied ul{ margin-top:.4rem; padding-left:1rem; }
.applied li{ margin-top:.25rem; }

/* ── the advanced panel ──────────────────────────────────────
   A disclosure, not a modal: setting a pay band is a refinement of the
   card you are already reading, and interrupting it to ask would be the
   wrong shape. Closed it costs one line; open it stays inside the key
   column so the card never moves.

   The marker is a stamped bracket rather than a triangle — the machine
   prints marks, it does not draw arrows. */
.adv{ margin-top:.9rem; border-top:1px solid var(--rule); padding-top:.7rem; }
.adv summary{
  cursor:pointer; list-style:none;
  font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--ink-2); display:flex; align-items:center; gap:.5rem;
  min-height:44px;
}
.adv summary::-webkit-details-marker{ display:none }
.adv summary::before{
  content:"+"; display:inline-flex; align-items:center; justify-content:center;
  width:1.15rem; height:1.15rem; flex:0 0 auto;
  border:1.5px solid var(--ink-2); color:var(--ink-2);
  font-size:.8125rem; line-height:1; font-weight:700; letter-spacing:0;
}
.adv[open] summary::before{ content:"–"; }
.adv summary:hover{ color:var(--ink); }
.adv summary:hover::before{ border-color:var(--ink); color:var(--ink); }
.adv summary:focus-visible{ outline:2px solid var(--stamp); outline-offset:2px; }
.adv-body{ padding-top:.35rem; }
.adv-note{ font-size:.8125rem; color:var(--ink-2); line-height:1.5; margin-bottom:.8rem; }

/* ── a pay band ──────────────────────────────────────────────
   Two ruled lines per band, the way a rate schedule is printed: the
   condition on one line and the money on the next. Wrapping is expected
   at 375px, which is why the labels are inline words rather than a
   header row that would fall out of register the moment it wrapped. */
.tier{
  border-top:1px solid var(--rule-2);
  padding:.6rem 0 .55rem;
}
.tier:first-child{ border-top:0; padding-top:0 }
.tier-line{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .45rem;
  font-size:.875rem; color:var(--ink-2);
}
.tier-line + .tier-line{ margin-top:.4rem }
.tier-lbl{ white-space:nowrap }
.tier-eq{ color:var(--ink-3) }
.tier-cur{ color:var(--ink-2); margin-right:-.25rem }
/* Sized to fit the 20.5rem key column on one line each. The first pass used
   roomier fields and the words "× base" and "an hour", which pushed Remove
   and the trailing label onto lines of their own — a ragged three-and-a-bit
   line block where two clean lines were available. */
.tier input{
  font:inherit; font-size:.875rem; width:3.4rem; min-width:0;
  padding:.4rem .4rem; text-align:right;
  background:var(--paper-2); border:1px solid var(--rule); color:var(--ink);
  font-variant-numeric:tabular-nums lining-nums;
}
.tier input.t-abs{ width:4.4rem }
.tier input:disabled{ color:var(--ink-3); background:transparent; border-style:dashed }
.tier input:focus-visible,.tier select:focus-visible{ outline:2px solid var(--stamp); outline-offset:1px }
.tier select{
  font:inherit; font-size:.875rem; padding:.35rem .4rem;
  background:var(--paper-2); border:1px solid var(--rule); color:var(--ink);
}
/* destructive, so it is named — and quiet, so it never competes with the card */
.tier .t-del{
  margin-left:auto; font:inherit; font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; font-weight:600;
  background:none; border:0; padding:.35rem 0 .35rem .35rem; min-height:44px;
  color:var(--ink-3); cursor:pointer; text-decoration:underline;
  text-underline-offset:3px; white-space:nowrap;
}
.tier .t-del:hover{ color:var(--stamp-ink) }
.tier .t-del:focus-visible{ outline:2px solid var(--stamp); outline-offset:2px }

/* ── mobile ──────────────────────────────────────────────────
   The grid is the one thing that cannot simply reflow: five
   columns of numbers need their headings. Below 30rem the break
   column folds away and its input moves under the row. */
@media (max-width:34rem){
  .week th,.week td{ padding:.3rem .25rem; }
  .week .day{ font-size:.75rem; }
  .week input{ font-size:.875rem; padding:.3rem .25rem; }
}