:root {
  color-scheme: light dark;
  --ink: #1f2933;
  --muted: #52606d;
  --line: #d9cbb3;
  --accent: #0f766e;
  --accent-soft: #d7f3ea;
  --warm: #c2410c;
  --danger: #b91c1c;
  --canvas-top: #fcf9f2;
  --surface-plain: #ffffff;
  --surface-soft: rgba(255, 255, 255, 0.72);
  --warm-soft: rgba(194, 65, 12, 0.12);
  --danger-soft: rgba(185, 28, 28, 0.12);
  --warm-flare: rgba(194, 65, 12, 0.14);
  --accent-flare: rgba(15, 118, 110, 0.24);
  --glow-flare: rgba(232, 196, 104, 0.22);
  --panel-shadow: 0 18px 48px rgba(31, 41, 51, 0.12);
  --radius-lg: 26px;
  --radius-md: 24px;
  --radius-sm: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6ecf2;
    --muted: #aab7c4;
    --line: #314154;
    --accent: #4dd4c6;
    --accent-soft: rgba(77, 212, 198, 0.18);
    --warm: #ff9a6b;
    --danger: #f87171;
    --canvas-top: #0f1722;
    --surface-plain: #16202d;
    --surface-soft: rgba(22, 32, 45, 0.84);
    --warm-soft: rgba(255, 154, 107, 0.16);
    --danger-soft: rgba(248, 113, 113, 0.18);
    --warm-flare: rgba(255, 154, 107, 0.18);
    --accent-flare: rgba(77, 212, 198, 0.16);
    --glow-flare: rgba(232, 196, 104, 0.12);
    --panel-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
  }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--canvas-top);
}

body {
  --canvas: #f3efe5;
  --panel: rgba(255, 252, 245, 0.92);
  --panel-border: rgba(217, 203, 179, 0.8);
  --panel-radius: 16px;
  --page-title-size: clamp(2.9rem, 6vw, 5.4rem);
  --page-title-margin-top: 1rem;
  --section-title-size: clamp(1.7rem, 4vw, 2.3rem);
  --badge-subtle-color: var(--warm);
  --badge-subtle-background: var(--surface-soft);
  --body-background:
    radial-gradient(circle at 0% 0%, var(--warm-flare), transparent 28%),
    radial-gradient(circle at 100% 40%, var(--accent-flare), transparent 20%),
    radial-gradient(circle at 42% 100%, var(--glow-flare), transparent 24%),
    linear-gradient(180deg, var(--canvas-top) 0%, var(--canvas) 100%);
  margin: 0;
  min-height: 100vh;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink);
  background: var(--body-background);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (prefers-color-scheme: dark) {
  body {
    --canvas: #111a26;
    --panel: rgba(18, 27, 39, 0.9);
    --panel-border: rgba(73, 91, 114, 0.55);
    --badge-subtle-background: rgba(22, 32, 45, 0.84);
  }
}

.shell {
  width: min(1280px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1rem 0 4rem;
  display: grid;
  gap: 1rem;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  padding: 1.5rem;
}

.status-panel {
/*  border-left-width: 6px;*/
}

.status-panel--ok {
/*  border-color: var(--accent);*/
  background:
    linear-gradient(135deg, var(--accent-soft), transparent 82%),
    var(--panel);
}

.status-panel--warning {
/*  border-color: var(--warm);*/
  background:
    linear-gradient(135deg, var(--warm-soft), transparent 82%),
    var(--panel);
}

.status-panel--critical {
/*  border-color: var(--danger);*/
  background:
    linear-gradient(135deg, var(--danger-soft), transparent 82%),
    var(--panel);
}

/* Hangs below the top edge of the header panel rather than lining up flush with
   it. One width everywhere — desktop holds the same 35rem rather than
   stretching. The second term only kicks in on windows narrower than that,
   where it leaves a 0.5rem gutter on each side. */
.status-toast-region {
  position: fixed;
  top: 12rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: min(35rem, calc(100vw - 1rem));
  display: grid;
  gap: 0.5rem;
  pointer-events: none;
}

.status-toast {
  pointer-events: auto;
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.35rem;
  animation: status-toast-in 0.24s ease-out;
}

.status-toast--ok {
  border-left: 4px solid var(--accent);
  background:
    linear-gradient(135deg, var(--accent-soft), transparent 82%),
    var(--surface-plain);
  animation:
    status-toast-in 0.24s ease-out,
    status-toast-out 6s forwards;
}

.status-toast--ok:hover,
.status-toast--ok:focus-within {
  animation-play-state: paused;
}

.status-toast--warning {
  border-left: 4px solid var(--warm);
  background:
    linear-gradient(135deg, var(--warm-soft), transparent 82%),
    var(--surface-plain);
}

.status-toast--critical {
  border-left: 4px solid var(--danger);
  background:
    linear-gradient(135deg, var(--danger-soft), transparent 82%),
    var(--surface-plain);
}

.status-toast__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-toast__title {
  margin: 0;
  flex: 1;
  font: 600 1rem/1.2 "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
}

.status-toast__message {
  margin: 0;
  padding-left: 0.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--muted);
}

.status-toast__close {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: 400 1.35rem/1 "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
}

.status-toast__close:hover,
.status-toast__close:focus-visible {
  border-color: var(--panel-border);
  background: var(--surface-soft);
  color: var(--ink);
}

@keyframes status-toast-in {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

@keyframes status-toast-out {
  0%,
  84% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* Drop the slide-in, but keep the timed fade — that one is behavior, not decoration. */
@media (prefers-reduced-motion: reduce) {
  .status-toast {
    animation: none;
  }

  .status-toast--ok {
    animation: status-toast-out 6s forwards;
  }
}

.pill-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  padding: 0 1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  font: 600 0.92rem/1 "Helvetica Neue", Arial, sans-serif;
}

.pill-button--ghost {
  color: var(--ink);
  background: var(--surface-soft);
  border-color: var(--line);
}

.pill-button--accent {
  width: fit-content;
  color: var(--surface-plain);
  background: var(--accent);
}

.pill-button--danger {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 32%, transparent);
}

.pill-button:disabled,
.pill-button[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--muted);
  background: var(--surface-soft);
  border-color: var(--line);
  opacity: 0.65;
}

.badge {
  display: inline-flex;
  gap: 0.35rem;
  width: fit-content;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  font: 700 0.8rem/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.badge--subtle {
  color: var(--badge-subtle-color);
  background: var(--badge-subtle-background);
}

.badge--warm {
  color: var(--warm);
  background: var(--warm-soft);
}

.badge--danger {
  color: var(--danger);
  background: var(--danger-soft);
}

.badge--accent {
  padding: 0.45rem 0.7rem;
  color: var(--accent);
  background: var(--accent-soft);
}

.page-title,
.section-title,
.summary-title {
  margin: 0;
  line-height: 1.05;
  font-weight: 700;
}

.page-title {
  letter-spacing: -0.05em;
  font-size: var(--page-title-size);
  margin-top: var(--page-title-margin-top);
}

.section-title {
  letter-spacing: -0.03em;
  font-size: var(--section-title-size);
}

.summary-title {
  font-size: 1.25rem;
}

.body-copy,
.body-copy li,
.body-copy label,
.body-copy input {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.time-clock-panel {
  overflow: hidden;
  background:
    linear-gradient(120deg, var(--accent-soft), transparent 70%),
    var(--panel);
}

.time-clock-panel__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* .field spaces itself for .form-grid; inside this panel the grid gap
   already separates the controls, so the padding just doubles up. */
.time-clock-panel .field {
  padding: 0;
}

/* Idle: stay at a glance until the operator commits. No project or pay
   role is remembered between shifts, so the controls open on demand
   rather than sitting there pre-filled with whichever sorts first. */
.time-clock-start > summary {
  width: fit-content;
  cursor: pointer;
  list-style: none;
}

.time-clock-start > summary::-webkit-details-marker {
  display: none;
}

.time-clock-start[open] > summary {
  display: none;
}

/* The panel spans the full shell width, so elapsed time, context, and the
   action share one row rather than stacking down the left edge. Baseline
   alignment sits the muted context against the big number. */
.time-clock-live {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
}

.time-clock-live > form,
.time-clock-live > .pill-button {
  margin-left: auto;
  align-self: center;
}

/* Running: elapsed time is the one fact worth reading at a glance;
   project, role, and start time are reference detail. */
.time-clock-live__elapsed {
  margin: 0;
  font: 700 clamp(2rem, 6vw, 2.6rem)/1 "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.time-clock-live__meta {
  margin: 0;
  color: var(--muted);
  font: 600 0.95rem/1.4 "Helvetica Neue", Arial, sans-serif;
}

.time-clock-warning {
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  color: var(--warm);
  background: var(--warm-soft);
  font: 600 0.95rem/1.5 "Helvetica Neue", Arial, sans-serif;
}

.pairing-code-input {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
}

.kiosk-body {
  min-height: 100vh;
}

.kiosk-shell {
  width: min(880px, calc(100% - 2rem));
  min-height: 100vh;
  margin: 0 auto;
  padding: max(2rem, env(safe-area-inset-top)) 0 max(2rem, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
}

.kiosk-card {
  width: 100%;
  display: grid;
  gap: 2rem;
  padding: clamp(2rem, 6vw, 4.5rem);
}

.kiosk-card--pairing {
  text-align: center;
  justify-items: center;
}

.kiosk-pairing-code {
  padding: 1rem 1.4rem;
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  color: var(--accent);
  background: var(--accent-soft);
  font: 800 clamp(2.7rem, 10vw, 6rem)/1 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.12em;
}

.kiosk-employee,
.kiosk-status-block {
  display: grid;
  gap: 0.5rem;
}

.kiosk-identify-form {
  gap: 1.5rem;
}

.kiosk-identify-form input {
  padding: 1.1rem 1.2rem;
  font-size: 1.15rem;
}

.kiosk-action {
  width: 100%;
  min-height: 5rem;
  border: 0;
  border-radius: var(--radius-md);
  color: white;
  font: 800 clamp(1.4rem, 4vw, 2.2rem)/1 "Helvetica Neue", Arial, sans-serif;
}

.kiosk-action--in {
  background: var(--accent);
}

.kiosk-action--out {
  background: var(--warm);
}

@media (max-width: 720px) {
  .time-clock-panel__fields {
    grid-template-columns: 1fr;
  }

  /* No width to share — stack, and keep the action left-aligned rather than
     stranded on the right by the auto margin. */
  .time-clock-live {
    display: grid;
    justify-items: start;
    gap: 0.5rem;
  }

  .time-clock-live > form,
  .time-clock-live > .pill-button {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.site-nav--desktop {
  display: flex;
}

.site-nav-shell {
  flex-direction: column;
  padding: 0.8rem 1rem;
}

.site-nav__primary {
  align-items: center;
}

/* Page title shares a row with the account menu at the top of the nav
   panel, so page identity costs no band of its own. */
.site-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--panel-border);
}

.site-header__title {
  margin: 0;
  font: 700 clamp(1.35rem, 2.2vw, 1.75rem)/1.15 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.02em;
}

.site-header__menu {
  margin-left: auto;
}

.site-nav-menu {
  position: relative;
}

.site-nav-menu > summary {
  cursor: pointer;
  list-style: none;
}

.site-nav-menu > summary::-webkit-details-marker {
  display: none;
}

.site-nav-menu > summary::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  margin-left: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
  transition: transform 140ms ease;
}

.site-nav-menu[open] > summary::after {
  transform: translateY(0.12rem) rotate(225deg);
}

.site-nav-menu:has(.site-nav-menu__link--active) > summary {
  border-color: var(--accent);
  color: var(--surface-plain);
  background: var(--accent);
}

.site-nav-menu__popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.6rem);
  left: 0;
  display: grid;
  min-width: 13rem;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--surface-plain);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  box-shadow: var(--panel-shadow);
}

.site-nav-menu:last-child .site-nav-menu__popover {
  right: 0;
  left: auto;
}

.site-nav-menu__link {
  padding: 0.7rem 0.8rem;
  color: var(--ink);
  border-radius: 11px;
  font: 700 0.9rem/1.15 "Helvetica Neue", Arial, sans-serif;
  text-decoration: none;
}

.site-nav-menu__link:hover,
.site-nav-menu__link:focus-visible {
  background: var(--accent-soft);
}

.site-nav-menu__link--active {
  color: var(--accent);
  background: var(--accent-soft);
}

.site-subnav {
  display: none;
}

.site-subnav:has(a) {
  display: flex;
  align-items: center;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--panel-border);
}

.site-subnav__link {
  padding: 0.45rem 0.65rem;
  color: var(--muted);
  border-radius: 10px;
  font: 700 0.86rem/1 "Helvetica Neue", Arial, sans-serif;
  text-decoration: none;
}

.site-subnav__link:hover,
.site-subnav__link:focus-visible {
  color: var(--ink);
  background: var(--surface-soft);
}

.site-subnav__link--active {
  color: var(--accent);
  background: var(--accent-soft);
}

.site-nav-mobile {
  display: none;
}

.site-nav-mobile__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
  list-style: none;
  font: 700 1rem/1 "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
}

.site-nav-mobile__toggle::-webkit-details-marker {
  display: none;
}

.site-nav-mobile__toggle::after {
  content: "+";
  font-size: 1.35rem;
  line-height: 1;
  color: var(--accent);
}

.site-nav-mobile[open] .site-nav-mobile__toggle::after {
  content: "\2212";
}

.site-nav-mobile__list {
  margin-top: 1rem;
}

.site-nav-mobile__group {
  width: 100%;
  border: 1px solid var(--panel-border);
  background: var(--surface-soft);
  border-radius: 10px;
}

.site-nav-mobile__group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0.9rem;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font: 700 0.95rem/1 "Helvetica Neue", Arial, sans-serif;
}

.site-nav-mobile__group > summary::-webkit-details-marker {
  display: none;
}

.site-nav-mobile__group > summary::after {
  content: "+";
  color: var(--accent);
}

.site-nav-mobile__group[open] > summary::after {
  content: "\2212";
}

.site-nav-mobile__group-links {
  display: grid;
  gap: 0.25rem;
  padding: 0 0.5rem 0.5rem;
}

.site-nav-mobile__subnav {
  padding-top: 1rem;
  border-top: 1px solid var(--panel-border);
}

.site-nav-mobile__list > .pill-button {
  width: 100%;
  justify-content: flex-start;
}

.site-nav-mobile__subnav .site-subnav__link {
  width: 100%;
  padding: 0.7rem 0.8rem;
}

.no-shell-nav .site-nav {
  display: none;
}

.no-shell-nav .site-nav-shell {
  display: none;
}

.no-shell-nav .site-nav-mobile {
  display: none;
}

.hero,
.grid,
.related,
.feature-list,
.section-stack {
  display: grid;
  gap: 1rem;
}

.section-stack {
  min-width: 0;
}

/* A grid item's automatic minimum size is its content, so a panel holding a
   wide table grew past its column and ran over whatever sits beside it.
   Panels shrink to the column instead, and the table scrolls inside its own
   wrapper, which is what that wrapper is for. Both levels need it: the stack
   holds the panel, and the panel holds the form the table sits in. */
.section-stack > *,
.panel-stack > * {
  min-width: 0;
}

.grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
}

.grid--top {
  align-items: start;
}

/* One line of controls: how the queue is split, then what it is narrowed to.
   The select is sized to its longest option rather than to the panel, so the
   buttons stay beside it instead of being flung to the far edge. */
.review-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem 1.75rem;
}

.review-controls__group {
  display: grid;
  gap: 0.35rem;
  padding: 1rem 0;
}

.review-controls__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem 1rem;
  /* Takes the rest of the line so the select and its buttons stay on one row.
     The select is width-capped, so growing here spends the room between the
     two halves of the bar rather than on a field nobody needs that wide. */
  flex: 1 1 auto;
  /* Filtering sits opposite the grouping: the two controls do different jobs,
     and pushing them apart keeps the pills from reading as part of the form. */
  justify-content: flex-end;
}

.review-controls .field {
  width: min(20rem, 100%);
}

.review-controls__group .related {
  margin-top: 0;
}

/* Matches the padding the labelled fields carry, which is what puts the
   buttons on the dropdown's baseline rather than a row below it. */
.review-controls__filter .related {
  margin-top: 0;
  padding-bottom: 1rem;
}

/* The bar holds one line only while the pills, the select, and both buttons
   fit side by side. Short of that it stacks: letting the filter split across
   two rows on its own stranded the select above its buttons. This is wider
   than the shell's usual breakpoint because it is measuring its own contents,
   not the viewport. */
@media (max-width: 980px) {
  .review-controls,
  .review-controls__filter {
    align-items: stretch;
  }

  .review-controls__group,
  .review-controls__filter,
  .review-controls .field {
    width: 100%;
  }

  /* Stacked, there are no sides left to sit opposite. */
  .review-controls__filter {
    justify-content: flex-start;
  }

  /* The buttons hold their own row here, so there is no dropdown baseline
     left to match. */
  .review-controls__filter .related {
    padding-bottom: 0;
  }
}

.feature-list {
  padding-left: 1.1rem;
  gap: 0.9rem;
}

.feature-list strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--ink);
}

.related {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.button-row {
  flex-wrap: nowrap;
  align-items: center;
}

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

.panel-list,
.panel-stack {
  display: grid;
  gap: 1rem;
}

.panel-list {
  grid-template-columns: minmax(0, 1fr);
}

.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

/* A project ledger runs the whole life of the project, so each pay period
   collapses to its header. The summary carries the week, the entry count, and
   the hours so a closed section is still worth reading. */
.pay-period-section > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
}

.pay-period-section > summary::-webkit-details-marker {
  display: none;
}

.pay-period-section > summary::after {
  content: "+";
  color: var(--accent);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
}

.pay-period-section[open] > summary::after {
  content: "\2212";
}

.pay-period-section__heading {
  display: grid;
  gap: 0.25rem;
}

/* Badges group against the toggle rather than spreading across the row, so a
   collapsed week reads as label-on-the-left, state-on-the-right. */
.pay-period-section__badges {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.5rem;
  margin-left: auto;
  white-space: nowrap;
}

/* Every directory in the app is one row per record: hours entries, statements,
   pay groups, projects. The shell below is shared by all of them, and the
   .hours-table rules further down are the hours-only columns layered on top. */
.listing-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
}

.listing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.listing-table th,
.listing-table td {
  padding: 0.8rem 0.6rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.listing-table th {
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.listing-table tbody tr:last-child td {
  border-bottom: 0;
}

.listing-table tbody tr:hover {
  background: var(--surface-soft);
}

.listing-table__detail-link {
  color: var(--ink);
  font-weight: 700;
}

/* Hours-only columns, layered onto .listing-table by the second class on
   the table element. */
.hours-table td[data-label="Worked"],
.hours-table td[data-label="Clock In"],
.hours-table td[data-label="Clock Out"] {
  white-space: nowrap;
}

/* Sits beside the date worked so the two can be read against each other. The
   pair only disagrees when an entry arrived after its own period closed, which
   is the case this column exists to make visible. */
.hours-table__pay-period {
  white-space: nowrap;
  cursor: help;
}

.hours-table__pay-period-range {
  font-variant-numeric: tabular-nums;
}

/* Worked in one period, paid in the next. Correct, but it reads as missing
   hours to anyone reconciling the earlier period, so it gets found rather than
   derived by comparing two columns on every row. */
.hours-table__late-flag,
.hours-table__kind-flag {
  margin-left: 0.4rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.68rem;
  vertical-align: middle;
}

/* A day paid without being worked. The row carries no clock times and its
   hours come from what was granted, so without this it reads as a shift
   somebody logged and then deleted. */
.hours-table__kind-flag {
  white-space: nowrap;
}

.listing-table__number {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

.hours-table__split {
  white-space: nowrap;
}

/* A padded row pays more hours than it worked, so the two number columns
   disagree on purpose. Marking it keeps that from reading as a mistake. */
.hours-table__split--padded {
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

/* For values with no natural break point, such as an email address. Half a row
   is not enough for them on a narrow screen, where they used to overrun the
   column beside them rather than wrap. */
.listing-table__wide {
  overflow-wrap: anywhere;
}

.listing-table__status {
  min-width: 10rem;
}

.listing-table__status .badge {
  padding: 0.45rem 0.65rem;
  font-size: 0.72rem;
}

.listing-table__select-heading,
.listing-table__select {
  width: 1%;
  white-space: nowrap;
}

.listing-table__bulk-actions {
  justify-content: flex-end;
  margin-top: 1rem;
}

.listing-table__actions-heading {
  text-align: right !important;
}

.listing-table__actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  margin-top: 0;
  gap: 0.4rem;
}

.listing-table__actions .pill-button {
  height: 2.1rem;
  padding: 0 0.7rem;
  font-size: 0.8rem;
}

.utilization-list {
  display: grid;
  gap: 1rem;
}

.utilization-row {
  display: grid;
  gap: 0.9rem;
}

.utilization-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.utilization-bar-shell {
  position: relative;
  overflow: hidden;
  height: 1rem;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(22, 163, 74, 0.16) 0%, rgba(22, 163, 74, 0.16) 66.67%, rgba(245, 158, 11, 0.18) 66.67%, rgba(245, 158, 11, 0.18) 80%, rgba(220, 38, 38, 0.18) 80%, rgba(220, 38, 38, 0.18) 100%);
  border: 1px solid var(--line);
}

.utilization-threshold-marker {
  position: absolute;
  top: -0.2rem;
  bottom: -0.2rem;
  width: 2px;
  background: var(--ink);
  opacity: 0.55;
  z-index: 2;
}

.utilization-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: 999px;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.utilization-fill--healthy {
  background: linear-gradient(90deg, #15803d, #22c55e);
}

.utilization-fill--warning {
  background: linear-gradient(90deg, #d97706, #f59e0b);
}

.utilization-fill--danger {
  background: linear-gradient(90deg, #dc2626, #ef4444);
}

.time-clock-heat-bar {
  background:
    linear-gradient(
      90deg,
      rgba(22, 163, 74, 0.16) 0%,
      rgba(22, 163, 74, 0.16) 62.5%,
      rgba(245, 158, 11, 0.18) 62.5%,
      rgba(245, 158, 11, 0.18) 75%,
      rgba(220, 38, 38, 0.18) 75%,
      rgba(220, 38, 38, 0.18) 100%
    );
}

.time-clock-heat-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.time-clock-heat-fill--straight {
  left: 0;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(90deg, #15803d, #22c55e);
}

.time-clock-heat-fill--overtime {
  left: 62.5%;
  background: linear-gradient(90deg, #d97706, #f59e0b);
}

.time-clock-heat-fill--double {
  left: 75%;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, #dc2626, #ef4444);
}

.time-clock-heat-marker--overtime {
  left: 62.5%;
}

.time-clock-heat-marker--double-time {
  left: 75%;
}

.bar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  justify-self: stretch;
  gap: 0.5rem 1rem;
  font-size: 0.82rem;
  text-align: right;
}

.bar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.bar-legend-key {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
}

.bar-legend-key--healthy {
  background: #22c55e;
}

.bar-legend-key--warning {
  background: #f59e0b;
}

.bar-legend-key--danger {
  background: #ef4444;
}

.top-gap {
  margin-top: 1rem;
}

.form-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

input[type="time"] {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  -webkit-appearance: none;
  appearance: none;
}


.time-buckets-field {
  display: grid;
  gap: 0.35rem;
}

.time-buckets-field h3 {
  margin: 0;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.time-buckets-panel {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 0.95rem;
  background: var(--surface-plain);
  color: var(--ink);
}

.time-buckets-panel .related {
  margin-top: 0;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

.notes-textarea {
  min-height: 3.75rem;
}

.field.notes-field {
  padding: 0;
  grid-template-rows: auto 1fr;
}

/* Full width, the role's fields run two to a row, and a row is only as tall as
   its taller cell. The date field carries a hint under it, which stretched the
   input beside it to match; the controls sit at the top of their row instead. */
.role-form > .field {
  align-content: start;
}

.form-grid--stacked {
  display: grid;
/*  gap: 1rem;*/
  grid-template-columns: minmax(0, 1fr);
}

.form-stack {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.form-stack > .pill-button {
  width: fit-content;
}

.field {
  padding: 1rem 0;
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.field span,
.field-label {
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* Sits under an input to explain a field whose consequence is not visible from
   its name. Overrides the label treatment `.field span` would otherwise give
   it, since this reads as a sentence rather than a heading. */
.field-hint {
  margin-top: 0.35rem;
  text-transform: none;
  font-size: 0.78rem;
  letter-spacing: normal;
  line-height: 1.5;
  color: var(--muted);
}

input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 0.95rem;
  background: var(--surface-plain);
  color: var(--ink);
  font-weight: 600;
  font: inherit;
}

input[type="date"] {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 0.95rem;
  background: var(--surface-plain);
  color: var(--ink);
  font-weight: 600;
  font: inherit;
  resize: vertical;
}

select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 3rem 0.85rem 0.95rem;
  background-color: var(--surface-plain);
  color: var(--ink);
  font-weight: 600;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--accent) 50%),
    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position:
    calc(100% - 1.35rem) calc(50% - 0.15rem),
    calc(100% - 0.9rem) calc(50% - 0.15rem);
  background-size: 0.5rem 0.5rem, 0.5rem 0.5rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 16%, transparent);
}

select:disabled,
input:disabled,
textarea:disabled {
  cursor: not-allowed;
  background-color: color-mix(in srgb, var(--surface-plain) 82%, var(--line));
  color: var(--muted);
}

input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  border-radius: 0.38rem;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  background: var(--surface-plain);
  accent-color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 0.12rem color-mix(in srgb, var(--accent) 10%, transparent);
  cursor: pointer;
}

input[type="checkbox"]:focus {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 0.2rem color-mix(in srgb, var(--accent) 18%, transparent);
}

input[type="checkbox"]:disabled {
  box-shadow: none;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface-plain) 78%, var(--accent-soft));
}

.checkbox-field span {
  margin: 0;
  color: var(--ink);
  font: 600 0.95rem/1.2 "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.01em;
  text-transform: none;
}

.pay-group-field {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
  border: 0;
}

.pay-group-field legend {
  padding: 0;
  transform: translateY(0.65rem);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.pay-group-control {
  display: grid;
  gap: 0.8rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-plain);
}

.pay-group-control .body-copy {
  margin: 0;
}

.pay-group-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.pay-group-options .checkbox-field {
  padding: 0.7rem 0.85rem;
}

input::placeholder {
  color: var(--muted);
}

textarea::placeholder {
  color: var(--muted);
}

.theme-form {
  --page-title-size: clamp(2.5rem, 5vw, 4.2rem);
  --page-title-margin-top: 0.6rem;
  --section-title-size: clamp(1.4rem, 3vw, 1.9rem);
}

/* Data-dense pages: pages read repeatedly rather than once. Trades the
   editorial hero for vertical budget and gives lists the full width. */
.theme-workspace {
  --page-title-size: clamp(1.6rem, 2.5vw, 2.1rem);
  --page-title-margin-top: 0;
  --section-title-size: clamp(1.2rem, 2vw, 1.45rem);
}

.theme-workspace .page-title {
  letter-spacing: -0.02em;
}

/* The hero becomes a header row, not a panel. */
.theme-workspace .hero.panel {
  padding: 0.25rem 0.25rem 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.theme-workspace .hero .section-stack {
  gap: 0.25rem;
}

/* Panels stacked inside another panel read as rows, not boxes-in-boxes.
   Scoped to stacked containers — .panel-grid children stay cards, since a
   row separator under a half-width grid cell reads as a broken rule. */
.theme-workspace .panel .panel-list > .panel,
.theme-workspace .panel .section-stack > .panel {
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.theme-workspace .panel .panel-list > .panel:last-child,
.theme-workspace .panel .section-stack > .panel:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.theme-workspace .panel .panel-list > .panel:first-child,
.theme-workspace .panel .section-stack > .panel:first-child {
  padding-top: 0;
}

@media (max-width: 860px) {
  .panel {
    padding: 1.15rem;
    --panel-radius: 20px;
  }

  .site-nav--desktop {
    display: none;
  }

  .site-nav--desktop.site-subnav:has(a) {
    display: none;
  }

  .site-nav-mobile {
    display: block;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .panel-head {
    flex-wrap: wrap;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .listing-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }

  .listing-table,
  .listing-table tbody,
  .listing-table tr,
  .listing-table td {
    display: block;
    width: 100%;
  }

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

  .listing-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
  }

  .listing-table tbody tr:first-child {
    padding-top: 0;
  }

  .listing-table tbody tr:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .listing-table th,
  .listing-table td {
    padding: 0;
    border: 0;
  }

  .listing-table td::before {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--muted);
    content: attr(data-label);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .listing-table__number {
    text-align: left !important;
  }

  .listing-table__status,
  .listing-table__select,
  .listing-table__wide,
  .listing-table td[data-label="Actions"] {
    grid-column: 1 / -1;
  }

  .listing-table__select {
    width: auto;
  }

  .listing-table__actions,
  .listing-table__bulk-actions {
    justify-content: flex-start;
  }
}

/* Retroactive adjustments on the finalize page. Each card has to carry a short
   argument as well as a number, so the cards are wider than the summary tiles
   beside them. */
.adjustment-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

.adjustment-figures {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 0.6rem 0 0;
}

.adjustment-figures dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.adjustment-figures dd {
  margin: 0.15rem 0 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* A week whose totals were later corrected. Marked rather than restated: the
   figures below stay exactly as finalized, and this says the week did not end
   there. */
.statement-week__adjusted {
  margin-top: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--accent, currentColor);
  background: var(--surface-soft);
  border-radius: 0 0.4rem 0.4rem 0;
}

/* How the week was priced, read above the hours it was priced from. This used
   to be a narrow panel beside the table, which squeezed the entries for the
   sake of six figures; as a band across the top the numbers stay together and
   the table gets the full width it wants. */
.statement-week__breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  margin: 0.6rem 0 0;
  padding: 0.75rem 0.9rem;
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
}

.statement-week__breakdown dt {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.statement-week__breakdown dd {
  margin: 0.15rem 0 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* What a week was made of, above the comparison that explains how it was
   priced. Days off sit in the same list as hours worked because they are both
   money on the same statement — the flag is what separates them. */
.statement-week__lines {
  margin-top: 0.75rem;
}

.statement-week__lines tfoot th,
.statement-week__lines tfoot td {
  font-weight: 600;
  border-top: 1px solid var(--border-strong, rgba(255, 255, 255, 0.18));
}

.statement-week__leave-flag {
  margin-left: 0.4rem;
  padding: 0.15rem 0.4rem;
  font-size: 0.68rem;
  vertical-align: middle;
}