/*
 * Timecard styles.
 *
 * Designed for a phone held on a set: large tap targets, high contrast for
 * bright daylight, dark theme by default because crew are often on nights.
 * No framework, no build step.
 */

:root {
  color-scheme: light dark;

  --bg: #0f1319;
  --surface: #171d26;
  --surface-raised: #1e2632;
  --border: #2b3542;
  --border-strong: #3d4a5c;

  --text: #eef2f7;
  --text-dim: #98a4b4;
  --text-faint: #6b7787;

  --accent: #4da3ff;
  --accent-ink: #04121f;
  --good: #3ddc97;
  --warn: #ffc857;
  --danger: #ff6b6b;

  --radius: 14px;
  --radius-sm: 10px;
  --gap: 12px;
  --tap: 48px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f6f9;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --border: #d9dfe8;
    --border-strong: #b9c3d1;
    --text: #131820;
    --text-dim: #5a6676;
    --text-faint: #8b95a3;
    --accent: #0b62c4;
    --accent-ink: #ffffff;
    --good: #14804a;
    --warn: #8a5b00;
    --danger: #c0342f;
  }
}

* { box-sizing: border-box; }

/*
 * Author `display` declarations outrank the UA stylesheet's [hidden] rule, so
 * any hidden element that is also a grid or flex container stays visible. That
 * is what put the second-meal row on screen unbidden.
 */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.ta-r { text-align: right; }

body {
  margin: 0;
  padding: 0 0 4rem;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

h1, h2, h3 { margin: 0; line-height: 1.25; }

/* --- Top bar ------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: max(env(safe-area-inset-top), 10px) var(--gap) 10px;
}

.topbar-row {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}

.svg-defs { display: none; }

/*
 * The mark ships as solid white paths, rewritten to currentColor so it works on
 * both themes and prints black. Aspect ratio is held by width:auto off height.
 */
.logo {
  height: 22px;
  width: auto;
  aspect-ratio: 152.177 / 43.5548;
  color: var(--text);
  flex: none;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand::after {
  content: "";
  order: 1;
  width: 1px;
  height: 20px;
  background: var(--border-strong);
}

.brand .logo { order: 0; }
.brand h1 { order: 2; }

.topbar h1 {
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .brand { gap: 9px; }
  .logo { height: 19px; }
  .topbar h1 { font-size: 0.95rem; }
}

.badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--warn) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent);
  color: var(--text);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.topbar-sub {
  max-width: 1080px;
  margin: 2px auto 0;
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* --- Panels ------------------------------------------------------------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.panel-title { font-size: 1rem; margin-bottom: 14px; }

/* Clears the sticky header when the Setup button scrolls back to it. */
#setup { scroll-margin-top: 74px; }

/* Confirms the jump landed, for the common case of already being at the top. */
#setup.is-flashing { animation: flash 0.9s ease-out; }

@keyframes flash {
  0%, 22% { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { border-color: var(--border); box-shadow: 0 0 0 3px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  #setup.is-flashing { animation: none; }
  .expand svg, .more-toggle svg, .week-toggle svg { transition: none; }
}

.more-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 8px 0;
  background: none;
  border: 0;
  color: var(--accent);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.more-toggle svg { transition: transform 0.15s ease; }
.more-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

#setup-more, #methods-wrap {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.panel-subtitle {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 20px 0 10px;
}

.req {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
}

/* Only shown once someone has actually tried to print or export — a fresh card
   covered in red says nothing useful. */
.field.is-missing input { border-color: var(--danger); }

.field.is-missing .req {
  background: color-mix(in srgb, var(--danger) 20%, transparent);
  border-color: color-mix(in srgb, var(--danger) 55%, transparent);
  color: var(--text);
}

.hint {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: var(--text-dim);
}

/* --- Form fields -------------------------------------------------------- */

.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: var(--gap);
  /* Labels are not all one line — "Day rate (10 hrs) Required" wraps. Aligning
     to the end keeps every input on the same baseline regardless. */
  align-items: end;
}

.field, .time {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.field > span, .time > span {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px 6px;
  line-height: 1.35;
}

.field em, .time em {
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-faint);
}

input[type="text"],
input[type="date"],
input[type="time"],
input[type="number"] {
  min-height: var(--tap);
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

input[type="time"], input[type="number"], .money input {
  font-family: var(--mono);
  font-size: 1.05rem;
}

input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Scoped to day rows: Setup uses .is-missing so a fresh card is not all red. */
.day-row input:invalid { border-color: var(--danger); }

/*
 * The core affordance the spreadsheet lacks: a value that was filled in for you
 * looks different from one you typed. Dashed border + dimmed text.
 */
/*
 * A number input cannot carry a symbol in its value, so the currency mark is an
 * adornment. pointer-events:none keeps the field clickable through it.
 */
.money { position: relative; display: block; }

.money::before {
  content: "$";
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.95rem;
  pointer-events: none;
}

.money input { padding-left: 25px; }
.field > .money { width: 100%; }
.extra-grid .money::before { left: 9px; font-size: 0.85rem; }
.extra-grid .money input { padding-left: 21px; }

input.is-default {
  color: var(--text-faint);
  border-style: dashed;
  background: transparent;
}

.derived {
  list-style: none;
  margin: 10px 0 0;
  padding: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px 16px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.derived b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* --- Weeks and day rows ------------------------------------------------- */

.week-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-dim);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.week-title > span { display: flex; align-items: baseline; gap: 8px; }

.week-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* The title itself is the fold control, so the whole label is a 48px target. */
.week-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-align: left;
}

.week-toggle:hover { color: var(--text); }
.week-toggle svg { flex: none; transition: transform 0.15s ease; }
.week-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }

/* Same quiet treatment as Clear week — it overwrites seven days. */
.copy-week {
  padding: 5px 11px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  cursor: pointer;
}

.copy-week:hover:not(:disabled) { color: var(--text); border-color: var(--text-dim); }
.copy-week:disabled { opacity: 0.4; cursor: default; }

/* Sits above the Paid column, deliberately quiet — it empties the whole week. */
.clear-week {
  padding: 5px 11px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  cursor: pointer;
}

.clear-week:hover:not(:disabled) {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 50%, transparent);
}

.clear-week:disabled { opacity: 0.35; cursor: not-allowed; }

.saved-note button {
  margin-left: 8px;
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--accent);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.week-sub {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-faint);
  font-weight: 400;
}

/*
 * One grid track set, shared by the column header and every row, so the columns
 * line up down the week. `.times` uses display:contents at this width so its
 * four fields become direct grid children.
 */
.days-head, .day-row {
  display: grid;
  grid-template-columns:
    30px minmax(78px, 88px) minmax(96px, 108px)
    repeat(4, minmax(92px, 1fr))
    minmax(84px, 104px) 66px;
  gap: 8px;
  align-items: center;
}

.days-head {
  padding: 0 10px 6px;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
}

.days {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.day.is-active { border-color: var(--border-strong); }
.day.is-holiday { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }

.day-row { padding: 6px 10px; }

/* Expand chevron */

.expand {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text-faint);
  cursor: pointer;
}

.expand svg { transition: transform 0.15s ease; }
.expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.expand:hover { color: var(--text); background: var(--surface-raised); }

.expand .dot {
  position: absolute;
  top: 4px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.day-when {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

/* Print-only: on screen the status select already says this. */
.day-status-note { display: none; }

.day-dow { font-weight: 700; font-size: 0.9rem; }
.day-date { color: var(--text-dim); font-size: 0.8rem; white-space: nowrap; }
.day.is-weekend .day-dow { color: var(--warn); }

/* Cells */

.times { display: contents; }

.cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cell-label {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

.cell em {
  font-style: normal;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-faint);
}

.day-row .cell-label { display: none; }

.day-row input[type="time"],
.day-row select {
  min-height: 40px;
  padding: 6px 8px;
  font-size: 0.95rem;
}

select {
  width: 100%;
  min-height: 40px;
  padding: 6px 8px;
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* A day that records no hours greys its time fields rather than hiding them,
   so the row keeps its shape and the columns stay aligned down the week. */
.day-row input:disabled, .day-row select:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}

.cell-result {
  margin: 0;
  text-align: right;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.3;
}

.cell-result b {
  display: block;
  color: var(--text);
  font-size: 0.95rem;
}

.cell-result .ot { color: var(--warn); }
.cell-result .todo { color: var(--danger); font-size: 0.72rem; }

/* Per-row actions: copy the day above, clear this day */

.row-actions { display: flex; gap: 2px; justify-content: flex-end; }

.row-action {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-faint);
  cursor: pointer;
  flex: none;
}

.row-action:hover:not(:disabled) {
  color: var(--accent);
  border-color: var(--border-strong);
  background: var(--surface-raised);
}

.row-action.is-clear:hover:not(:disabled) {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 50%, transparent);
}

.row-action:disabled { opacity: 0.22; cursor: not-allowed; }
.row-action[hidden] { display: none !important; }

/* Expanded drawer */

.day-extra {
  display: block;
  padding: 4px 10px 12px 40px;
  border-top: 1px dashed var(--border);
  margin: 0 10px;
}

.extra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  padding-top: 10px;
}

.extra-grid input { min-height: 40px; font-size: 0.9rem; }
.extra-grid .money input { font-size: 0.9rem; }
.cell-note { grid-column: 1 / -1; }

.link {
  align-self: flex-start;
  margin-top: 10px;
  padding: 6px 0;
  background: none;
  border: 0;
  color: var(--accent);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.day-warning, .warnings p {
  margin: 0 10px 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  color: var(--text);
  font-size: 0.78rem;
}

.warnings { display: flex; flex-direction: column; gap: 8px; }
.warnings p { margin: 0; }
.warnings:empty { display: none; }

.week-total {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.week-total b { color: var(--text); }

/* Narrow screens: the row folds into three bands, columns become 2x2. */

/*
 * SCREEN ONLY. A Letter page is about 816 CSS px wide, under this breakpoint,
 * so without the `screen` keyword the printed card silently rendered in the
 * folded phone layout — one block per day instead of a row.
 */
@media screen and (max-width: 860px) {
  .days-head { display: none; }
  .days { gap: 8px; }
  .day { border-radius: var(--radius); }

  .day-row {
    /* First track holds the chevron, which is a 44px touch target down here. */
    grid-template-columns: 44px 1fr minmax(112px, auto);
    grid-template-areas:
      "expand when   status"
      "times  times  times"
      "result result actions";
    row-gap: 10px;
    padding: 10px;
  }

  .row-actions { grid-area: actions; align-self: center; }

  .expand { grid-area: expand; }
  .day-when { grid-area: when; }
  .cell-status { grid-area: status; }
  .cell-result { grid-area: result; text-align: left; }

  .times {
    grid-area: times;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .day-row .cell-label { display: block; }
  .day-row input[type="time"], .day-row select { min-height: 46px; font-size: 1rem; }

  .cell-result {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding-top: 2px;
    border-top: 1px solid var(--border);
  }

  .cell-result b { display: inline; }

  /* An off day collapses to just its header band. */
  .day.is-off .times, .day.is-off .cell-result { display: none; }

  .day-extra { padding-left: 10px; }

  /*
   * Touch targets. Every one of these is comfortable with a mouse and too
   * small for a finger: the chevron and the row actions were 30px, the week
   * buttons 25px, against the 48px this app promises. They are what someone
   * taps most while standing on set, outdoors, one-handed, often gloved.
   *
   * These grow the BOX, not the ink. All four are transparent until hovered,
   * so a bigger hit area is nearly invisible — the icon stays the size it was
   * and simply gets more room around it. Screen only: print hides every one
   * of these, and a mouse never needed the help.
   */
  .expand,
  .row-action {
    width: 44px;
    height: 44px;
  }

  .more-toggle { min-height: 44px; }

  .clear-week,
  .copy-week {
    min-height: 44px;
    padding-inline: 14px;
  }
}

/* --- Summary ------------------------------------------------------------ */

.tally {
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--gap);
}

.tally > div {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.tally dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}

.tally dd {
  margin: 2px 0 0;
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--gap);
}

.method {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.method h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.method table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }

.method td {
  padding: 5px 0;
  font-variant-numeric: tabular-nums;
}

.method td:nth-child(2) { color: var(--text-dim); text-align: right; white-space: nowrap; }
.method td:nth-child(3) { text-align: right; }

.method tr.zero { color: var(--text-faint); }

.method tfoot td {
  border-top: 1px solid var(--border-strong);
  padding-top: 9px;
  font-weight: 700;
  font-size: 1.05rem;
}

/* --- Actions ------------------------------------------------------------ */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

button.primary, button.ghost {
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  flex: 1 1 auto;
}

button.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
}

button.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border-strong);
}

button.ghost.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }

/* Armed and waiting for a second press. Filled, not outlined, so there is no
   mistaking it for the button that was sitting there a moment ago. */
button.ghost.danger.is-armed {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

/*
 * Handing off to the OS is invisible from in here — the share sheet may be
 * slow, and a mail client that has been disabled fails silently. So the button
 * says what it is doing rather than sitting there looking untouched.
 */
button.ghost.is-working {
  color: var(--text-faint);
  border-style: dashed;
}

button.ghost.is-done {
  color: var(--ok, var(--accent));
  border-color: currentColor;
}

button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.saved-note {
  margin: 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-faint);
}

.print-header { display: none; }

/* --- Print / PDF -------------------------------------------------------- */

@page { margin: 12mm 10mm; }

@media print {
  :root {
    --bg: #fff; --surface: #fff; --surface-raised: #fff;
    --border: #c9c9c9; --border-strong: #999;
    --text: #000; --text-dim: #333; --text-faint: #555;
    --warn: #000; --accent: #000;
  }

  body { padding: 0; font-size: 9pt; }
  main { max-width: none; padding: 0; gap: 10px; }

  .topbar, .actions, .saved-note, .hint, .link, .more-toggle,
  #setup, .expand, .cell-status, .row-actions, .clear-week,
  .copy-week, .week-toggle svg { display: none !important; }

  /*
   * A week folded away on screen must still print. The global
   * `[hidden] { display: none !important }` beats an ordinary declaration, so
   * this needs !important of its own — the same reason `#methods-wrap[hidden]`
   * below exists. Omitting a week someone worked is the worst bug this card
   * could ship: the printout IS the submitted document.
   */
  .week-body[hidden] { display: block !important; }

  /* The fold control keeps its label and date range, minus the chevron. */
  .week-toggle { min-height: 0; display: block; }

  /* --- Header: who, what, when. Leads page 1. --- */

  .print-header {
    display: block;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1.5px solid #000;
  }

  .print-header .logo { height: 24px; color: #000; margin-bottom: 4px; }
  .print-header h1 { font-size: 13pt; margin-bottom: 2px; }
  .print-header p { margin: 1px 0 0; font-size: 9pt; }
  .print-header .who { font-weight: 600; font-size: 10pt; }

  .print-incomplete {
    margin: 0 0 5px !important;
    padding: 3px 6px;
    border: 1.5px solid #000;
    font-size: 9pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* --- Days: one line each, ruled like a table --- */

  .week-title { font-size: 8pt; margin-bottom: 4px; }
  .days { gap: 0; }

  .day.is-off { display: none; }

  .day {
    border: 0;
    border-bottom: 0.5pt solid var(--border);
    border-radius: 0;
    break-inside: avoid;
  }

  .days-head {
    display: grid;
    padding: 0 4px 3px;
    font-size: 7.5pt;
    border-bottom: 1pt solid #000;
  }

  /*
   * Print hides the chevron, the status select and the row actions, so the row
   * has SIX grid items, not nine. Defining nine tracks put the day/date in a
   * 0px column and shifted every time value one column left — the day and the
   * call time drew on top of each other. Track count must match what survives
   * the display:none rules above.
   */
  .days-head, .day-row {
    grid-template-columns: 116px repeat(4, 1fr) 74px;
    gap: 8px;
    padding: 3px 4px;
    align-items: baseline;
  }

  /* Drop the header cells for the three hidden columns, in reverse order so
     the indices stay valid. */
  .days-head span:nth-child(9),
  .days-head span:nth-child(3),
  .days-head span:nth-child(1) { display: none; }

  .day-when { flex-wrap: wrap; column-gap: 5px; }
  .day-dow, .day-date { white-space: nowrap; }

  /* Drops to its own line under the date. */
  .day-status-note {
    display: block;
    width: 100%;
    font-size: 7.5pt;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .day-status-note:empty { display: none; }

  /* Keeps the "--:-- --" placeholder off the card without collapsing the grid. */
  input.is-empty { visibility: hidden; }

  .day-dow { font-size: 9pt; }
  .day-date { font-size: 8.5pt; }
  .cell-result { font-size: 9pt; }

  /*
   * Hours and OT stack, and neither may break mid-value. Inline in a 74px
   * column split "13.00 h" across two lines as "13.00" / "h", which on a
   * payroll document reads as a different number.
   */
  .cell-result b { display: block; font-size: 9pt; white-space: nowrap; }
  .cell-result .ot { margin-left: 0; white-space: nowrap; }

  /*
   * `input[type=time]` paints a clock button. It is a control, not data, and
   * it costs the Paid column the width it needs.
   */
  input::-webkit-calendar-picker-indicator { display: none !important; }

  input, select {
    border: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: none !important;
    color: #000 !important;
    font-size: 9pt !important;
  }

  input.is-default { color: #555 !important; }
  input:disabled { opacity: 1 !important; }

  .money::before { position: static; transform: none; }
  .money input { padding-left: 2px !important; }

  /* A drawer only prints when it actually holds something. */
  .day-extra[hidden] { display: none !important; }

  .day.has-extra .day-extra {
    display: block !important;
    margin: 0;
    padding: 0 4px 4px 100px;
    border: 0;
  }

  .extra-grid { padding-top: 2px; gap: 4px 12px; font-size: 8pt; }
  .extra-grid .cell-label { font-size: 7pt; }
  .extra-grid .cell:has(input:placeholder-shown) { display: none; }

  .day-warning {
    margin: 0 4px 4px 100px;
    padding: 2px 5px;
    font-size: 7.5pt;
    border-radius: 0;
  }

  .week-total {
    margin-top: 4px;
    padding: 4px 6px;
    border: 0;
    border-top: 1pt solid #000;
    border-radius: 0;
    font-size: 9pt;
  }

  /*
   * A 14-day card prints as two week blocks. A week nobody worked would print
   * as a title, a column header and "Days 0" — noise on a submitted card, since
   * `.day.is-off` has already hidden every row inside it. `renderTotals` sets
   * the class; screen keeps the section so the fields stay enterable.
   */
  .week.is-empty-week { display: none !important; }

  /*
   * Two weeks do not fit one Letter page. Let the break fall between the weeks
   * rather than inside one: a column header stranded at the foot of a page, or
   * a lone row carried onto the next, is unreadable on a payroll document.
   */
  .week { break-inside: avoid; }
  .days-head { break-after: avoid; }
  .week-title { break-after: avoid; }

  /* --- Summary --- */

  .panel {
    border: 0;
    border-radius: 0;
    padding: 0;
    break-inside: avoid;
  }

  .panel-title { font-size: 10pt; margin-bottom: 6px; }

  .tally { gap: 8px; margin-bottom: 8px; }

  .tally > div {
    border: 0.5pt solid var(--border);
    border-radius: 0;
    padding: 4px 8px;
  }

  .tally dt { font-size: 7pt; }
  .tally dd { font-size: 12pt; }

  /* Folded away on screen, but always part of a submitted card. */
  #methods-wrap[hidden] { display: block !important; }
  #methods-wrap { margin-top: 0; padding-top: 0; border: 0; }

  .methods { grid-template-columns: 1fr 1fr; gap: 10px; }

  .method {
    border: 0.5pt solid var(--border);
    border-radius: 0;
    padding: 6px 8px;
    break-inside: avoid;
  }

  .method h3 { font-size: 7.5pt; margin-bottom: 4px; }
  .method table { font-size: 8.5pt; }
  .method td { padding: 2px 0; }
  .method tfoot td { padding-top: 4px; font-size: 9.5pt; }
}