/* Hours calculator — site-local layer on top of the shared Identity B base.
   AAA+++ STUDIO PREMIUM (2026-07-31): the timesheet is the ONE floating object
   on the page (§3.2), its inputs are sunken wells (§4), and every figure a
   reader compares is tabular (§3.4). Anything here that fought the shared
   mechanics layer has been removed rather than reweighted. */

/* §3.3 — the shared layer adds the 44px keel rule ABOVE every h2.sec. The base
   stylesheet's older 3px underline below it is the same idea done twice, and
   two accent rules per heading is the "template" tell. The keel wins. */
h2.sec::after { display: none; }

/* ---- the calculator card ---------------------------------------------- */
/* The .sheet IS the calc card: it carries the single --shadow from the shared
   layer and nothing else on the page floats. The 20px pill radius and the
   local box-shadow are gone — .calc-card owns both. */
.sheet {
  max-width: 900px; margin: 26px auto 0; background: var(--surface);
  border: 1px solid var(--line); overflow: hidden;
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sheet-body { padding: 8px 20px 20px; }

/* Time inputs are the primary field on this tool and the shared well selector
   does not list input[type="time"] — see the shared-layer request. */
.sheet input[type="time"] {
  min-height: 48px;
  background: var(--surface-sunken);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgba(10, 16, 32, .05);
  font-variant-numeric: tabular-nums lining-nums;
  transition: border-color var(--t-fast) var(--ease-out);
}
:root[data-theme="dark"] .sheet input[type="time"] { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .4); }

.row-head, .day {
  display: grid; grid-template-columns: 108px 1fr 1fr 92px 104px 34px; gap: 10px; align-items: center;
}
.row-head { padding: 12px 0 6px; }
.row-head span { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.row-head span:nth-child(4), .row-head span:nth-child(5) { text-align: right; }
.day { padding: 5px 0; }
.day + .day { border-top: 1px solid var(--line); }
.day-name { font-size: .9rem; font-weight: 650; }
.day-name small { display: block; font-weight: 400; font-size: .75rem; color: var(--muted); font-family: var(--mono); letter-spacing: .05em; }
.day-name small.warn { color: var(--accent-2); }
.day input[type="time"], .day input.brk { padding: 9px 10px; font-size: .9rem; }
.day input.brk { text-align: right; }
/* A live timesheet re-renders on every keystroke; proportional figures here
   make the hours column jiggle, which is the fastest way for an instrument to
   look unmeasured. */
.day .hrs { text-align: right; font-variant-numeric: tabular-nums lining-nums; font-weight: 700; font-size: .95rem; }
.day .hrs small { display: block; font-weight: 500; font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.day .clr { width: 30px; height: 30px; border: 1px solid transparent; background: none; border-radius: var(--radius-sm); color: var(--muted); display: grid; place-items: center; }
.day .clr:hover { color: #dc2626; background: #fef2f2; border-color: #fecaca; }
:root[data-theme="dark"] .day .clr:hover { background: rgba(220,38,38,.12); border-color: rgba(220,38,38,.3); }
.day .clr svg { width: 14px; height: 14px; }
.day.off { opacity: .55; }

@media (max-width: 720px) {
  .row-head { display: none; }
  .day {
    grid-template-columns: 1fr 1fr 34px;
    grid-template-areas: "n n x" "s e ." "b h h";
    gap: 8px; padding: 12px; margin: 8px 0;
    border: 1px solid var(--line); border-top: 1px solid var(--line) !important; border-radius: var(--radius); background: var(--surface-2);
  }
  .day > *:nth-child(1) { grid-area: n; }
  .day > *:nth-child(2) { grid-area: s; }
  .day > *:nth-child(3) { grid-area: e; }
  .day > *:nth-child(4) { grid-area: b; }
  .day > *:nth-child(5) { grid-area: h; }
  .day > *:nth-child(6) { grid-area: x; justify-self: end; }
}

/* ---- the result ------------------------------------------------------- */
/* .result-v / .result-u carry the tabular numerals and the mono unit label
   from the shared layer; only the size is stepped down here, because four
   results sit side by side rather than one hero figure. */
.tot {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
  padding: 20px; background: var(--surface-2); border-top: 1px solid var(--line);
}
.tot-cell { text-align: center; padding: 14px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.tot-cell .k { display: block; }
.tot-cell .v { font-size: clamp(1.6rem, 4.4vw, 2.1rem); font-weight: 650; letter-spacing: -.03em; margin-top: 4px; }
.tot-cell.hi .v { color: var(--accent); }

.pay-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; padding: 18px 20px; border-top: 1px solid var(--line); }
.pay-row .field { margin: 0; min-width: 130px; }
.pay-row .grow { flex: 1; }

/* No figure without a source line, no source line without a date (§6.4). */
.sheet-src { padding: 0 20px; }
.sheet-src .srcline { margin-top: 4px; }

/* ---- the sticky-loop handoff ------------------------------------------ */
/* This was a row of buttons under a site-local .handoff rule that overrode the
   shared block anatomy outright. The shared .handoff is now left alone; only
   its surroundings are positioned here. */
.handoff-wrap { padding: 4px 20px 22px; }
.sheet-foot { margin: 12px 0 0; font-size: .9rem; }
.sheet-foot a { color: var(--muted); }
.sheet-foot a:hover { color: var(--ink-2); }

/* ---- breadcrumb ------------------------------------------------------- */
/* The mono voice comes from the shared layer; only the layout is local. */
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 16px; color: var(--muted); text-transform: uppercase; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--line-2); }

/* ---- brand lockup ----------------------------------------------------- */
.brand-lock { display: block; line-height: 1.15; }

/* ---- conversion table ------------------------------------------------- */
.conv-table caption { caption-side: top; text-align: left; padding: 12px 14px; color: var(--muted); text-transform: uppercase; }
.conv-table td.n, .conv-table th { font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.conv-table th { font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.conv-table td.n b { color: var(--ink); font-weight: 650; }
.conv-table td:nth-child(2n), .conv-table th:nth-child(2n) { border-right: 1px solid var(--line); }
.conv-table td:last-child, .conv-table th:last-child { border-right: 0; }

/* ---- footer ----------------------------------------------------------- */
.foot-site { align-items: baseline; }
.foot-k { color: var(--muted); text-transform: uppercase; }
.foot-legal { color: var(--muted); text-transform: uppercase; margin-top: 4px; }

/* ---- THE SET PIECE: the week timeline ----------------------------------
   Seven days on one shared 24-hour axis. Identity B: hairline rules, mono
   labels, no lift, no scale. The bar's whole is the DAY, not the shift, so
   rows are comparable across the week — a 4-hour Saturday reads as short
   because it IS short, not because it was scaled to fit. */
.tl { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.tl-axis {
  position: relative; height: 14px; margin-left: 38px;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.tl-axis span { position: absolute; transform: translateX(-50%); }
.tl-axis span:first-child { transform: none; }
.tl-axis .tl-end { right: 0; transform: none; }
.tl-rows { display: flex; flex-direction: column; gap: 3px; }
.tl-row { display: flex; align-items: center; gap: 8px; }
.tl-day {
  flex: none; width: 30px; text-align: right;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.tl-track {
  position: relative; flex: 1 1 auto; height: 18px; min-width: 0;
  background: var(--surface-sunken);
  border: 1px solid var(--line); border-radius: 3px; overflow: hidden;
}
/* midday rule — a fixed reference so rows can be compared by eye */
.tl-track::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  border-left: 1px dashed var(--line-2); opacity: .8;
}
.tl-bar {
  position: absolute; top: 0; bottom: 0;
  background: var(--accent); border-radius: 2px;
  transition: left var(--t-fast) var(--ease-out), width var(--t-fast) var(--ease-out);
}
/* The second half of a shift that crossed midnight. Square the joined edges
   so the two segments read as ONE span cut by midnight rather than as two
   unrelated shifts. */
.tl-bar-wrapped { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tl-row .tl-bar:not(.tl-bar-wrapped):not(:only-of-type) {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
}
/* Unpaid break. Hatched, not solid, because it is NOT time at work — and its
   position carries no claim (the site records duration, not time of day). */
.tl-brk {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(45deg,
    var(--surface) 0 3px, transparent 3px 6px);
  border-left: 1px solid var(--surface);
}
.tl-wrap {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--surface);
}
.tl-off .tl-track { opacity: .55; }

.tl-cap {
  margin-top: 10px; font-size: .78rem; color: var(--muted); line-height: 1.55;
}
.tl-key { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; white-space: nowrap; }
.tl-key i { width: 14px; height: 10px; border-radius: 2px; flex: none; }
.tl-k-bar { background: var(--accent); }
.tl-k-brk {
  border: 1px solid var(--line-2);
  background: repeating-linear-gradient(45deg, var(--muted) 0 2px, transparent 2px 4px);
}
@media (max-width: 560px) {
  /* The axis offset MUST equal .tl-day width + the row gap, or every hour
     tick is drawn against the wrong point on the track. Desktop: 30 + 8 = 38.
     Mobile: 24 + 8 = 32 — this was 30 and put midday 2px off, measured. */
  .tl-axis { margin-left: 32px; font-size: .58rem; }
  .tl-day { width: 24px; font-size: .6rem; }
  .tl-track { height: 16px; }
  /* the key lines wrap to their own rows rather than squeezing the caption */
  .tl-key { display: flex; margin: 6px 0 0; white-space: normal; }
}