:root {
  color-scheme: light;
  --ink: #1c1917;
  --muted: #57534e;
  --faint: #a8a29e;
  --line: #e7e5e4;
  --line-strong: #d6d3d1;
  --paper: #fafaf9;
  --card: #ffffff;
  --head: #f5f5f4;
  --teal: #0f766e;
  --teal-dark: #115e59;
  --warn: #9a3412;
  --bad: #b91c1c;
  --sidebar: 232px;
  --control: 36px;
  --radius: 8px;
  --pad: 12px;
  font-family: "Avenir Next", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

p, h1, h2 { margin: 0; }

a { color: var(--teal-dark); text-underline-offset: 3px; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

::placeholder { color: var(--faint); opacity: 1; }

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control);
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--teal);
  color: white;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
button:hover, .button:hover { background: var(--teal-dark); }
button.secondary, .button.secondary {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line-strong);
}
button.secondary:hover, .button.secondary:hover { background: var(--head); }
button.danger {
  background: var(--card);
  color: var(--bad);
  border-color: #fecaca;
}
button.danger:hover { background: #fef2f2; }

input, select, textarea {
  width: 100%;
  height: var(--control);
  margin: 0;
  padding: 0 var(--pad);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  color: inherit;
  font: inherit;
  font-size: 14px;
  line-height: 1.3;
}
select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2357534e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
textarea {
  height: auto;
  min-height: 96px;
  padding: 8px var(--pad);
  line-height: 1.45;
  resize: vertical;
}
input[type="checkbox"] {
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--teal);
  flex: 0 0 auto;
}

label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  font-size: 14px;
  font-weight: 500;
}

.app {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 100vh;
}

aside {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px 12px 16px;
  background: #14221f;
  color: #f5f5f4;
  overflow: auto;
}
.side-head { padding: 0 12px 20px; }
.wordmark { margin: 0; }
.side-menu { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
.nav-btn { display: none; }
.nav-close { display: none; }
.brand {
  display: block;
  color: #fafaf9;
  font-family: Righteous, sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}
.brand:hover { color: white; background: transparent; }
.company { margin: 4px 0 0; color: #a8a29e; font-size: 13px; line-height: 1.35; }
aside nav { display: flex; flex-direction: column; gap: 2px; }
aside nav a {
  display: flex;
  align-items: center;
  height: var(--control);
  padding: 0 12px;
  border-radius: var(--radius);
  color: #e7e5e4;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
}
aside nav a.on, aside nav a:hover { background: var(--teal); color: white; }
.logout {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.logout span {
  padding: 8px 12px 0;
  color: #d6d3d1;
  font-size: 13px;
  line-height: 1.3;
}
.logout button {
  justify-content: flex-start;
  width: 100%;
  padding: 0 12px;
  background: transparent;
  color: #e7e5e4;
}
.logout button:hover { background: rgba(255, 255, 255, 0.08); color: white; }

.main {
  min-width: 0;
  padding: 20px 28px 56px;
}

.timer {
  margin: 0 0 20px;
  padding: var(--pad);
  background: var(--teal);
  border: 1px solid var(--teal-dark);
  border-radius: 12px;
  color: white;
}
.timer form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: var(--control);
  gap: 12px;
}
.timer-readout {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
}
.timer-clock { display: block; flex: none; }
.timer-clock .hand {
  transform-box: view-box;
  transform-origin: center;
}
.timer-clock .minute { animation: timer-spin 4s linear infinite; }
.timer-clock .hour { animation: timer-spin 48s linear infinite; }
@keyframes timer-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .timer-clock .hand { animation: none; }
  .flash { animation: none; }
}
.timer form strong {
  min-width: 4.5ch;
  color: white;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.timer-label {
  flex: 1 1 160px;
  min-width: 0;
  color: white;
  font-size: 14px;
}
.timer button {
  background: white;
  color: var(--teal-dark);
}
.timer button:hover { background: #f0fdfa; color: var(--teal-dark); }
.timer button:focus-visible { outline-color: white; }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  margin: 0 0 16px;
}
.bar h1 { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.bar > a:not(.button), .bar-actions a {
  flex: none;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.bar > a:not(.button):hover, .bar-actions a:hover { text-decoration: underline; }
.bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 16px;
}

h1, h2 { font-weight: 600; }
h1 { margin: 0 0 16px; font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; }
.bar h1, .sheet-title h1, .sheet-title h2, .ts-head h1 { margin: 0; }
.sheet-title h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; }
h2 { margin: 32px 0 12px; font-size: 22px; line-height: 1.25; }

.sheet-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 16px;
}
.sheet-title { min-width: 0; text-align: center; }
.week-jump {
  display: inline-flex;
  align-items: center;
  height: var(--control);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.week-jump:hover { text-decoration: underline; }
.week-next { justify-self: end; }
.total {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.total span { color: var(--muted); font-weight: 500; }
.total strong { margin-left: 8px; color: var(--warn); }

.filters, .inline, .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.filters { align-items: flex-end; margin: 0 0 16px; }
.filters input, .filters select, .inline select, .add-row select { width: auto; }
.filters input[name="q"] { width: 220px; }
.filters select { width: 200px; max-width: 100%; }
.filters input[type="date"], .inline input[type="date"] { width: 156px; flex: 0 0 auto; }
.range { display: flex; align-items: center; gap: 8px; flex: 1 0 100%; }
.idle-cover {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  cursor: default;
}
.idle-cover[hidden] { display: none; }
.filters .range-period {
  width: auto;
  min-width: 132px;
  height: var(--control);
  padding: 0 32px 0 14px;
  border: 0;
  border-radius: 10px;
  background-color: var(--head);
  color: var(--ink);
  font-weight: 600;
}
.range .day-pill { border-radius: 10px; }
.range .day-label { white-space: nowrap; }
.range .day-nav.is-open .day-pill { box-shadow: 0 0 0 2px var(--ink); }
.range .chev.is-disabled { color: var(--faint); pointer-events: none; }
.range .cal-pop { width: min(336px, calc(100vw - 32px)); }
button.cal-day.in { background: #f8e6d4; color: var(--ink); border-radius: 8px; }
button.cal-day.range-start,
button.cal-day.range-end { background: var(--ink); color: white; border-radius: 8px; }
button.cal-day.in.today { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
button.cal-day.range-start.today,
button.cal-day.range-end.today { box-shadow: none; color: white; }
.filters label { color: var(--muted); font-size: 12px; font-weight: 600; }
.inline { margin-top: 12px; }
.inline + form { margin-top: 12px; }
.inline select { flex: 1 1 200px; min-width: 160px; }
.inline input { width: 120px; flex: 0 0 auto; }
.inline input[name="notes"] { flex: 1 1 180px; width: auto; min-width: 160px; }
.actions { align-items: center; margin-top: 16px; }
.actions form { margin: 0; }

.hint, .meta, .quiet { color: var(--muted); }
.hint { max-width: 68ch; margin: 0 0 16px; font-size: 14px; line-height: 1.5; }
.bar + .hint { margin-top: -8px; }
.bar:has(+ .meta) { margin-bottom: 6px; }
.meta { margin: 0 0 20px; font-size: 14px; line-height: 1.45; }
.stack .hint { margin: 0; }

.become {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--teal-dark);
  color: white;
}
.become p { margin: 0; }
.become form { margin: 0; }
.become button { background: white; color: var(--teal-dark); }
.become button:hover { background: #f0fdfa; }
td.act form { margin: 0; }

.flash, .error {
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid #99f6e4;
  border-radius: var(--radius);
  background: #ecfdf5;
  font-size: 14px;
  line-height: 1.4;
}
.flash { animation: flash-in 0.35s ease; }
@keyframes flash-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.error { border-color: #fecaca; background: #fef2f2; color: var(--bad); }

.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  margin: -8px 0 16px;
  border-bottom: 1px solid var(--line);
}
.subnav a {
  display: inline-flex;
  align-items: center;
  margin-bottom: -1px;
  padding: 9px 12px 7px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.subnav a:hover { color: var(--ink); }
.subnav a.on { color: var(--teal-dark); border-bottom-color: var(--teal); }

.report-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 20px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--line);
}
.tabs { display: flex; flex-wrap: wrap; gap: 2px 4px; }
.tabs a {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.tabs a:hover { color: var(--ink); }
.tabs a.on {
  border-color: var(--ink);
  background: var(--card);
  color: var(--ink);
}
.report-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 8px;
}
.report-tools form { margin: 0; }
.report-tools .check { color: var(--ink); font-size: 14px; font-weight: 500; }

.report-scroll, .scroll-x { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.split { margin: 0 0 18px; max-width: 720px; }
.split-labels {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
  font-size: 14px;
}
.split-labels strong { font-variant-numeric: tabular-nums; }
.split-track {
  display: flex;
  height: 14px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--line);
}
.split-track .employees { background: var(--teal); }
.split-track .contractors { background: #c2410c; }

table.report td.hours, table.report tfoot th.hours { width: 28%; }
.hours-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.hours-line a, .hours-line > span:first-child {
  flex: 0 0 auto;
  min-width: 4.5em;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.meter {
  flex: 1 1 72px;
  max-width: 160px;
  height: 10px;
}
.meter > span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--teal);
}
.person { display: inline-flex; align-items: center; gap: 10px; }
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.avatar.a0 { background: #1c1917; }
.avatar.a1 { background: #0f766e; }
.avatar.a2 { background: #9a3412; }
.avatar.a3 { background: #1e3a5f; }
.avatar.a4 { background: #44403c; }
table.report tbody tr.section td { font-weight: 700; }
table.report tbody tr.section:hover td { background: transparent; }

table {
  width: 100%;
  border: 1px solid var(--line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  background: var(--card);
}
th, td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
thead th {
  padding-top: 9px;
  padding-bottom: 9px;
  background: var(--head);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
tbody tr:last-child td { border-bottom: 0; }
table:has(tfoot) tbody tr:last-child td { border-bottom: 1px solid var(--line); }
tfoot th {
  border-bottom: 0;
  background: var(--head);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
thead tr:first-child th:first-child { border-top-left-radius: 9px; }
thead tr:first-child th:last-child { border-top-right-radius: 9px; }
tbody tr:last-child td:first-child { border-bottom-left-radius: 9px; }
tbody tr:last-child td:last-child { border-bottom-right-radius: 9px; }
table:has(tfoot) tbody tr:last-child td:first-child,
table:has(tfoot) tbody tr:last-child td:last-child { border-radius: 0; }
tfoot tr:last-child th:first-child { border-bottom-left-radius: 9px; }
tfoot tr:last-child th:last-child { border-bottom-right-radius: 9px; }
tbody tr:hover td { background: #fafaf9; }
td[colspan] { color: var(--muted); }
table.grouped tbody tr.group td {
  padding-top: 18px;
  padding-bottom: 8px;
  border-bottom-color: var(--line-strong);
  background: var(--card);
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
table.grouped tbody tr.group:hover td { background: var(--card); }
table.grouped tbody tr.group a { color: inherit; text-decoration: none; }
table.grouped tbody tr.group a:hover { text-decoration: underline; }
th.num, td.num {
  width: 1%;
  padding-left: 20px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
th.pick, td.pick { width: 1%; padding-right: 8px; padding-left: 14px; text-align: center; }
td.pick input, th.pick input { display: block; margin: 0 auto; }
td input:not([type="checkbox"]):not([type="hidden"]),
td select, td textarea { width: 100%; }

.sheet-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
}
.sheet-wrap { overflow-x: auto; }
.sheet {
  min-width: 1150px;
  border: 0;
  border-radius: 0;
  table-layout: fixed;
}
.sheet col.col-who { width: 260px; }
.sheet col.col-total { width: 72px; }
.sheet th, .sheet td { text-align: center; vertical-align: top; }
.sheet thead th, .sheet tfoot th { vertical-align: middle; }
.sheet thead th:not(:first-child) { white-space: nowrap; }
.sheet thead th:first-child,
.sheet td.who,
.sheet tfoot th:first-child { padding-right: 16px; padding-left: 16px; text-align: left; }
.sheet thead th:last-child,
.sheet td:last-child,
.sheet tfoot th:last-child {
  padding-right: 16px;
  padding-left: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.sheet tbody td:not(.who):not(:last-child) { padding: 8px; }
.sheet td:last-child { padding-top: 14px; font-weight: 600; vertical-align: top; }
.sheet tfoot th:not(:first-child):not(:last-child) { font-variant-numeric: tabular-nums; }
.sheet tbody tr:hover td { background: transparent; }
.sheet td.locked { color: var(--muted); }
.sheet .cell-read { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sheet td.locked strong {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--head);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: center;
}
.sheet .cell-read small {
  min-height: 52px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--head);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sheet td.running { box-shadow: inset 0 0 0 2px var(--teal); }
.sheet td form { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sheet input, .sheet textarea { width: 100%; min-width: 0; }
.sheet input[name="hours"] {
  height: 32px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.sheet textarea {
  min-height: 52px;
  padding: 6px 8px;
  font-size: 13px;
  line-height: 1.35;
  resize: none;
  overflow-wrap: anywhere;
}
.sheet small, .sheet em {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sheet em { color: var(--teal-dark); font-weight: 600; }
.who-client, .who-project, .who small { overflow-wrap: anywhere; }
.who-client, .who small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.who-project {
  display: block;
  margin-top: 2px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.who small { margin-top: 2px; font-weight: 500; }
.add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--head);
}
.add-row select, .add-row .combo { width: 0; min-width: 140px; flex: 1 1 180px; }

.combo { position: relative; min-width: 0; width: 100%; }
.combo-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}
button.combo-btn {
  width: 100%;
  justify-content: flex-start;
  padding: 0 40px 0 var(--pad);
  overflow: hidden;
  background-color: var(--card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2357534e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  color: var(--ink);
  font-weight: 500;
  text-align: left;
  text-overflow: ellipsis;
}
button.combo-btn:hover { background-color: var(--card); }
button.combo-btn.is-placeholder { color: var(--faint); }
button.combo-btn[aria-expanded="true"] { border-color: var(--teal); }
.combo-pop {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  max-height: 280px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 12px 32px rgba(28, 25, 23, 0.16);
}
.combo-pop[hidden] { display: none; }
.combo-search { flex: none; margin-bottom: 8px; }
.combo-list { overflow: auto; display: flex; flex-direction: column; gap: 2px; }
button.combo-opt {
  height: auto;
  min-height: 32px;
  justify-content: flex-start;
  padding: 6px 8px;
  background: transparent;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}
button.combo-opt:hover, button.combo-opt.is-active { background: var(--head); }
button.combo-opt.is-on { color: var(--teal-dark); font-weight: 600; }
.combo-empty { margin: 0; padding: 8px; color: var(--muted); font-size: 14px; }

.ts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
}
.ts-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px 16px;
}
.views { display: flex; flex-direction: row; flex: none; }
.views a {
  display: inline-flex;
  align-items: center;
  height: var(--control);
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.views a:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.views a:last-child { margin-left: -1px; border-radius: 0 var(--radius) var(--radius) 0; }
.views a.on { position: relative; z-index: 1; }
.views a:hover { background: var(--head); }
.views a.on { border-color: var(--teal); background: #f0fdfa; color: var(--teal-dark); }
.person { margin: 0 0 16px; }
.person select { width: 220px; }
.day-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.day-switch .person { margin: 0; }

.day-tools {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}
.day-jump { margin: 0; }
.day-tools > input.track-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
label.track-btn {
  display: inline-flex;
  align-items: center;
  height: var(--control);
  padding: 0 14px;
  border-radius: var(--radius);
  background: var(--teal);
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
label.track-btn:hover { background: var(--teal-dark); }
.track-close { display: none; }
body:has(#track-time:checked) .track-open { display: none; }
body:has(#track-time:checked) .track-close { display: inline; }
.day-tools:has(.track-toggle:checked) label.track-btn {
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--ink);
}
.day-tools:has(.track-toggle:checked) label.track-btn:hover { background: var(--head); }
.day-tools:has(.day-nav.is-open) { z-index: 5; }
.day-nav { position: relative; }
.day-pill {
  display: inline-flex;
  align-items: stretch;
  height: var(--control);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}
.day-nav .chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}
.day-nav .chev:hover { background: var(--head); }
button.day-label {
  gap: 8px;
  height: 100%;
  padding: 0 12px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}
button.day-label:hover,
.day-nav.is-open button.day-label { background: var(--head); }
.cal-icon { flex: none; color: var(--muted); }
.cal-pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  width: min(280px, calc(100vw - 32px));
  padding: 10px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 12px 32px rgba(28, 25, 23, 0.12);
}
.cal-pop[hidden] { display: none; }
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.cal-head strong { font-size: 14px; font-weight: 600; }
button.cal-shift,
button.cal-day,
button.cal-today {
  border: 0;
  background: transparent;
  color: var(--ink);
}
button.cal-shift {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius);
  font-size: 18px;
}
button.cal-shift:hover,
button.cal-day:hover,
button.cal-today:hover { background: var(--head); }
.cal-grid { display: flex; flex-direction: column; gap: 2px; }
.cal-dow,
.cal-grid [role="row"] {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-dow span {
  height: 28px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 28px;
  text-align: center;
}
button.cal-day {
  height: 34px;
  padding: 0;
  border-radius: var(--radius);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
button.cal-day.out { color: var(--faint); font-weight: 500; }
button.cal-day.today { color: var(--teal-dark); box-shadow: inset 0 0 0 1px var(--teal); }
button.cal-day.on,
button.cal-day.on:hover {
  background: var(--teal);
  color: white;
  box-shadow: none;
}
button.cal-day.on:hover { background: var(--teal-dark); }
button.cal-day:focus-visible,
button.cal-shift:focus-visible,
button.cal-today:focus-visible { outline-offset: -2px; }
button.cal-today {
  width: 100%;
  height: 32px;
  margin-top: 8px;
  border-radius: var(--radius);
  color: var(--teal-dark);
  font-size: 13px;
}
.track-form { display: none; }
.day-tools:has(.track-toggle:checked) .track-form { display: grid; flex: 1 1 100%; }

.weekstrip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)) auto;
  gap: 4px 8px;
  align-items: end;
  margin: 0;
}
.weekstrip a {
  display: block;
  min-width: 0;
  padding: 0 2px 8px;
  border-bottom: 3px solid transparent;
  color: inherit;
  text-decoration: none;
}
.weekstrip a:hover { background: var(--head); }
.weekstrip a.on { border-bottom-color: var(--teal); }
.weekstrip a span, .week-total span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.weekstrip a strong, .week-total strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.weekstrip a.on strong { color: var(--teal-dark); }
.week-total { padding: 0 0 11px; text-align: right; white-space: nowrap; }
.week-total strong { color: var(--ink); }

.entries {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: 8px;
  margin-top: 4px;
}
.entry {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  row-gap: 8px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  scroll-margin: 72px 0 24px;
}
.entry.running { border-left-color: var(--teal); }
.entry.running .entry-text { padding-left: 9px; }
.entry-text { min-width: 0; }
.entry-text strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.entry-task, .entry-text p, .entry-text em {
  display: block;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.35;
}
.entry-text p { white-space: pre-wrap; }
.entry-text em { color: var(--teal-dark); font-weight: 600; }
.entry-hours {
  min-width: 4.5ch;
  margin-left: 8px;
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.entry.running .entry-actions button { gap: 6px; }
.entry.running .entry-actions .timer-clock { width: 16px; height: 16px; }
.entry-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.entry-actions > form { display: flex; margin: 0; }
.entry-actions > form button { flex: 1 0 auto; }
.entry-actions .day-nav { position: relative; }
.entry-actions button.day-label,
.entry-edit button.day-label {
  height: var(--control);
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
}
.entry-actions button.day-label:hover,
.entry-actions .day-nav.is-open button.day-label,
.entry-edit button.day-label:hover,
.entry-edit .day-nav.is-open button.day-label { background: var(--head); }
.entry-lock {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
label.ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: stretch;
  height: var(--control);
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
label.ghost:hover { background: var(--head); }
label.ghost input.edit-toggle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.entry:has(.edit-toggle:checked) label.ghost { border-color: var(--teal); background: #f0fdfa; }
.entry-edit { display: none; }
.entry:has(.edit-toggle:checked) .entry-edit {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--head);
}
.entry:has(.day-nav.is-open) { position: relative; z-index: 5; }
.entry-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.entry-edit .form-actions > form { display: flex; margin: 0; }
.track-form {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--head);
}
.entry-form input[name="hours"],
.track-form input[name="hours"] {
  grid-column: 1;
  height: 80px;
  font-size: 24px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.entry-form textarea,
.track-form textarea { grid-column: 2 / -1; min-height: 80px; }
.entry-edit .form-actions, .track-form .form-actions,
.entry-form .hint, .track-form .hint { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.track-form .hint, .entry-form .hint { margin: 0; }
.entry-empty { grid-column: 1 / -1; margin: 16px 0; color: var(--muted); }
button.secondary { gap: 6px; }
.icon { display: block; }
.ts-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}
button.linkish {
  height: auto;
  padding: 0;
  background: transparent;
  color: var(--teal-dark);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}
button.linkish:hover { background: transparent; text-decoration: underline; }
.ts-foot .day-sum { margin: 0; font-size: 15px; font-weight: 600; }
.ts-foot .day-sum strong { font-variant-numeric: tabular-nums; }

.stack { display: grid; gap: 16px; max-width: 32rem; }
.stack input, .stack select, .stack textarea { width: 100%; }
.stack .check input { width: 16px; }
.stack > button { justify-self: start; width: auto; margin-top: 4px; }
.checks { display: grid; gap: 8px; }
.invoice-form { display: grid; gap: 20px; align-items: start; }
.invoice-form .stack { margin: 0; }
.invoice-form > button { justify-self: start; margin-top: 0; }
table + button { margin-top: 12px; }
.copy { display: grid; gap: 8px; margin: 0 0 16px; }
.totals { margin: 12px 0 0; font-variant-numeric: tabular-nums; }
.sheet-wrap { min-width: 0; }
.sheet-wrap .lines { min-width: 720px; }
.lines td:nth-child(2), .lines td:nth-child(3), .lines th:nth-child(2), .lines th:nth-child(3) { width: 108px; }
.lines td:nth-child(4), .lines th:nth-child(4) { width: 112px; }
.lines td.line-remove, .lines th.line-remove {
  width: 1%;
  padding: 8px 14px 8px 8px;
  text-align: right;
  white-space: nowrap;
}
.lines th:nth-child(2), .lines th:nth-child(3), .lines th:nth-child(4), .lines td:nth-child(4) { text-align: right; }
.lines td:nth-child(2), .lines td:nth-child(3) { padding: 8px; }
.lines th:nth-child(2), .lines th:nth-child(3) { padding-right: 20px; }
.lines td:nth-child(2) input, .lines td:nth-child(3) input {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.lines td:nth-child(4) { font-variant-numeric: tabular-nums; }
.assignments th.rate,
.assignments td.rate { width: 128px; }
.assignments th.rate { padding-right: 23px; text-align: right; }
.assignments td.rate { padding: 8px 10px; text-align: right; }
.assignments td.rate:not(:has(input)) {
  padding: 10px 23px 10px 14px;
  font-variant-numeric: tabular-nums;
}
.assignments td.rate input {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.assignments th.flag,
.assignments td.flag {
  width: 1%;
  padding-right: 16px;
  padding-left: 16px;
  text-align: center;
  white-space: nowrap;
}
.assignments td.flag input {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
.assignments th.act,
.assignments td.act {
  width: 1%;
  padding-right: 12px;
  padding-left: 8px;
  text-align: right;
  white-space: nowrap;
}
.assignments td.act button + button { margin-left: 8px; }
.assignments tfoot td { background: var(--head); border-bottom: 0; }
.assignments tfoot td:first-child { border-bottom-left-radius: 9px; }
.assignments tfoot td:last-child { border-bottom-right-radius: 9px; }
.row-form { height: 0; margin: 0; padding: 0; border: 0; overflow: hidden; }

.pager { display: flex; align-items: center; gap: 16px; margin: 16px 0 0; font-size: 14px; }
.pager a { font-weight: 600; text-decoration: none; }
.pager a:hover { text-decoration: underline; }

.login {
  width: min(400px, calc(100% - 32px));
  margin: 12vh auto;
  padding: 32px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.login h1 {
  margin: 0 0 8px;
  font-family: Righteous, sans-serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.login .hint { margin: 0 0 20px; }
.login .stack { max-width: none; }
.login button { width: 100%; margin-top: 0; }

.print { max-width: 720px; margin: 40px auto; padding: 48px; background: white; }
.print header { margin-bottom: 24px; }
.print header p { margin-top: 4px; }
.print pre { margin: 0 0 16px; font: inherit; white-space: pre-wrap; }
.print table { margin: 16px 0 20px; }
.print p { margin: 0 0 8px; }
.print th:nth-child(n+2), .print td:nth-child(n+2) {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (max-width: 800px) {
  .app { grid-template-columns: minmax(0, 1fr); align-content: start; }
  aside {
    position: sticky;
    top: 0;
    z-index: 20;
    display: block;
    height: auto;
    overflow: visible;
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  }
  .side-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0 4px;
  }
  .wordmark {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
  }
  .wordmark .brand,
  .wordmark .company { display: inline; vertical-align: baseline; }
  .brand { font-size: 20px; }
  .company { margin: 0 0 0 8px; line-height: 1.2; }
  .nav-btn {
    display: inline-flex;
    flex: none;
    align-self: center;
    align-items: center;
    justify-content: center;
    height: var(--control);
    margin-left: 4px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius);
    color: #fafaf9;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  aside:has(#nav-toggle:checked) .nav-btn { background: var(--teal); border-color: transparent; }
  aside:has(#nav-toggle:checked) .nav-open { display: none; }
  aside:has(#nav-toggle:checked) .nav-close { display: inline; }
  .side-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    padding: 4px 12px 12px;
    background: #14221f;
    box-shadow: 0 16px 32px rgba(20, 34, 31, 0.28);
  }
  aside:has(#nav-toggle:checked) .side-menu { display: flex; }
  aside nav { flex-direction: column; gap: 2px; margin: 0; padding: 0; overflow: visible; }
  aside nav a { flex: none; padding: 0 12px; white-space: normal; }
  .logout {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  .logout span { max-width: none; padding: 8px 12px 0; }
  .logout button { width: 100%; }
  .main { padding: 16px 16px calc(40px + env(safe-area-inset-bottom)); }
  .bar { flex-wrap: wrap; align-items: center; gap: 8px 12px; }
  .bar-actions { justify-content: flex-start; }
  .become { flex-wrap: wrap; align-items: flex-start; }
  .timer form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 6px;
  }
  .timer-readout { grid-column: 1; grid-row: 1; }
  .timer button { grid-column: 2; grid-row: 1; justify-self: end; }
  .timer-label { grid-column: 1 / -1; grid-row: 2; }
  .sheet-head { grid-template-columns: 1fr 1fr; }
  .sheet-title { grid-column: 1 / -1; grid-row: 1; }
  .sheet-title h2 { font-size: 24px; }
  .week-jump { grid-row: 2; }
  h1 { font-size: 24px; }
  .ts-head { align-items: center; }
  .ts-meta { width: auto; justify-content: flex-end; }
  .day-tools { align-items: stretch; }
  .day-switch {
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
  .day-switch .person,
  .day-switch .person select,
  .day-jump,
  .day-switch .day-nav { width: 100%; min-width: 0; max-width: 100%; }
  .day-switch .day-pill { display: flex; width: 100%; max-width: 100%; }
  .day-switch button.day-label { flex: 1 1 auto; min-width: 0; justify-content: center; overflow: hidden; }
  .day-switch button.day-label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .person, .person .combo, .person select { width: 100%; }
  .weekstrip { gap: 2px; }
  .weekstrip a { padding: 0 0 8px; text-align: center; }
  .weekstrip a span, .week-total span { font-size: 11px; line-height: 1.2; }
  .weekstrip a strong, .week-total strong { font-size: 13px; }
  .week-total { white-space: normal; padding-left: 4px; }
  .entries { display: block; }
  .entry { grid-column: auto; grid-template-columns: minmax(0, 1fr) 5.5ch; }
  .entry-hours { margin-left: 0; }
  .entry-actions {
    display: flex;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .entry-actions > form { margin-left: 0; }
  .entry-form,
  .track-form { grid-template-columns: 6.75rem minmax(0, 1fr); }
  .entry-form .combo,
  .track-form .combo { grid-column: 1 / -1; }
  .entry-form textarea,
  .track-form textarea { grid-column: 2; }
  .entry-form input[name="hours"],
  .track-form input[name="hours"] { font-size: 22px; }
  .add-row select, .add-row .combo { flex: 1 1 100%; width: 100%; min-width: 0; }
  .filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
  .filters .range,
  .filters > button,
  .filters > label { grid-column: 1 / -1; }
  .filters select,
  .filters input[name="q"],
  .filters input[type="date"] { width: 100%; }
  .filters .range { min-width: 0; }
  .filters .range .day-nav { flex: 1 1 auto; min-width: 0; }
  .filters .range .day-pill { display: flex; width: 100%; max-width: 100%; }
  .filters .range button.day-label { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .filters .range button.day-label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .inline { align-items: stretch; }
  .inline input,
  .inline select,
  .inline input[type="date"],
  .inline input[name="notes"] { flex: 1 1 100%; width: 100%; min-width: 0; }
  .subnav { flex-wrap: nowrap; margin-right: -16px; margin-left: -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { flex: none; white-space: nowrap; }
  .report-head { align-items: stretch; }
  .sheet-wrap, .table-scroll, .report-scroll, .scroll-x { max-width: 100%; }
  .sheet col.col-who { width: 148px; }
  .sheet thead th:first-child,
  .sheet td.who,
  .sheet tfoot th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card);
    box-shadow: 6px 0 8px rgba(28, 25, 23, 0.04);
  }
  .sheet thead th:first-child,
  .sheet tfoot th:first-child { z-index: 2; background: var(--head); }
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.report { min-width: 640px; }
  .login { margin: 24px auto; padding: 24px; }
}

@media (max-width: 640px) {
  .weekstrip { display: none; }
  .filters { grid-template-columns: 1fr; }
  .filters .range { flex-wrap: wrap; }
  .filters .range-period,
  .filters .range .day-nav { flex: 1 1 100%; width: 100%; }
}