@font-face {
  font-family: "KP";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/space-grotesk-300.woff2") format("woff2");
}

@font-face {
  font-family: "KP";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/space-grotesk-700.woff2") format("woff2");
}

@font-face {
  font-family: "KM";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/space-mono-400.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --ink: #0c0d0f;
  --paper: #eceef0;
  --mute: #8b9197;
  --faint: #0c0d0f12;
  --hair: #0c0d0f26;
  --red: #f12114;
  --white: #f8f9fa;
  --native-safe-top: env(safe-area-inset-top, 0px);
  --native-safe-right: env(safe-area-inset-right, 0px);
  --native-safe-bottom: env(safe-area-inset-bottom, 0px);
  --native-safe-left: env(safe-area-inset-left, 0px);
  --safe-top: max(var(--native-safe-top), var(--tg-safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
  --safe-right: max(var(--native-safe-right), var(--tg-safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px));
  --safe-bottom: max(var(--native-safe-bottom), var(--tg-safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
  --safe-left: max(var(--native-safe-left), var(--tg-safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px));
  --sans: "KP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "KM", "SFMono-Regular", Consolas, monospace;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  min-height: 100%;
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 300px;
  min-height: 100vh;
  min-height: var(--tg-viewport-stable-height, 100vh);
  margin: 0;
  overflow-x: hidden;
  padding:
    calc(14px + var(--safe-top))
    calc(14px + var(--safe-right))
    calc(14px + var(--safe-bottom))
    calc(14px + var(--safe-left));
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.42;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  border-radius: 0;
  color: inherit;
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 1.5px solid var(--red);
  outline-offset: 3px;
}

button:disabled {
  cursor: wait;
  opacity: .58;
}

::selection {
  background: var(--red);
  color: var(--paper);
}

[hidden] {
  display: none !important;
}

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

.app-shell {
  position: relative;
  width: min(100%, 600px);
  min-height: calc(var(--tg-viewport-stable-height, 100vh) - 28px - var(--safe-top) - var(--safe-bottom));
  margin: 0 auto;
  border: 1.5px solid var(--ink);
  background: var(--paper);
}

.tick {
  position: absolute;
  z-index: 12;
  width: 9px;
  height: 9px;
  border: 0 solid var(--ink);
  pointer-events: none;
}

.tick-tl { top: 7px; left: 7px; border-top-width: 1.5px; border-left-width: 1.5px; }
.tick-tr { top: 7px; right: 7px; border-top-width: 1.5px; border-right-width: 1.5px; }
.tick-bl { bottom: 7px; left: 7px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.tick-br { right: 7px; bottom: 7px; border-right-width: 1.5px; border-bottom-width: 1.5px; }

.app-header,
.system-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 20px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .5px;
}

.app-header {
  min-height: 39px;
  border-bottom: 1px solid var(--ink);
}

.system-footer {
  min-height: 37px;
  border-top: 1px solid var(--ink);
  color: var(--mute);
}

.brand-wordmark,
.brand-lockup {
  margin: 0;
}

.brand-wordmark b,
.system-footer b {
  color: var(--red);
  font-weight: 400;
}

.sync-state {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.sync-prefix {
  color: var(--ink);
}

.sync-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mute);
}

.sync-state.is-ready .sync-dot { background: var(--ink); }
.sync-state.is-error .sync-dot { background: var(--red); }
.sync-state.is-error { color: var(--red); }

.tab-bar {
  position: sticky;
  z-index: 10;
  top: var(--safe-top);
  display: flex;
  border-bottom: 1.5px solid var(--ink);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 1.2px;
}

.tab-button {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 45px;
  flex: 1;
  place-items: center;
  padding: 0 6px;
  border: 0;
  border-right: 1px solid var(--ink);
  background: none;
  color: var(--mute);
  font: inherit;
}

.tab-button:last-child {
  border-right: 0;
}

.tab-button svg {
  display: none;
}

.tab-button.is-active {
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}

.app-main {
  padding: 26px 28px 104px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 1.3px;
  line-height: 1.2;
  text-transform: uppercase;
}

.period-card {
  padding-bottom: 24px;
  border-bottom: 1.5px solid var(--ink);
}

.period-hero {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 5px 0 22px;
}

.period-count {
  flex: 0 0 auto;
  font-size: clamp(88px, 30vw, 128px);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -7px;
  line-height: .72;
}

.period-context {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding-top: 8px;
}

.period-context h2 {
  margin: 0;
  font-size: clamp(19px, 6vw, 25px);
  font-weight: 700;
  letter-spacing: -.8px;
  line-height: 1.03;
}

.period-year {
  width: fit-content;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.period-unit {
  color: var(--mute);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .7px;
}

.period-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 36px;
}

.metric strong {
  display: block;
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1;
}

.metric span {
  display: block;
  margin-top: 4px;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .6px;
}

.review-banner {
  display: grid;
  width: 100%;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  margin: 14px 0 0;
  padding: 9px 11px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  text-align: left;
}

.review-symbol {
  color: var(--red);
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
}

.review-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.review-copy strong {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.review-copy span {
  overflow: hidden;
  color: var(--paper);
  font-family: var(--mono);
  font-size: 9px;
  opacity: .72;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-arrow {
  color: var(--red);
  font-family: var(--mono);
  font-size: 20px;
}

.view {
  margin-top: 29px;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.section-heading h2,
.sheet-header h2,
.modal-header h2 {
  margin: 0;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}

.section-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.text-button,
.export-button,
.quiet-badge {
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: none;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.export-button {
  display: flex;
  align-items: center;
  gap: 4px;
}

.export-button svg {
  display: none;
}

.quiet-badge {
  display: inline-block;
  border-color: var(--hair);
}

.filter-strip,
.archive-role-filter {
  display: flex;
  gap: 17px;
  margin: 0 0 15px;
  overflow-x: auto;
  padding: 5px 0 10px;
  scrollbar-width: none;
}

.filter-strip::-webkit-scrollbar,
.archive-role-filter::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.filter-chip.is-active {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

.content-state {
  min-height: 120px;
}

.loading-list {
  border-top: 1.5px solid var(--ink);
}

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--faint);
}

.skeleton::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #ffffff85, transparent);
  content: "";
  animation: shimmer 1.1s linear infinite;
  transform: translateX(-100%);
}

.skeleton-card {
  height: 72px;
  border-bottom: 1px solid var(--hair);
}

.skeleton-card.short { width: 74%; }

@keyframes shimmer {
  to { transform: translateX(100%); }
}

.date-group + .date-group {
  margin-top: 22px;
}

.date-group-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--ink);
}

.date-group-heading h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.35px;
}

.date-group-heading span {
  color: var(--mute);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.shift-stack {
  display: grid;
}

.shift-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--faint);
}

.shift-card.needs-review {
  margin-left: -9px;
  padding-left: 8px;
  border-left: 1px solid var(--red);
}

.shift-card.is-cancelled {
  color: var(--mute);
}

.shift-card.is-cancelled .shift-copy {
  opacity: .56;
}

.shift-card[data-slot="night"] .shift-time {
  padding: 4px 6px;
  background: var(--ink);
  color: var(--paper);
}

.shift-copy {
  min-width: 0;
}

.shift-title-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.shift-copy h4 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-pill,
.status-pill {
  flex: 0 0 auto;
  padding: 2px 4px;
  border: 1px solid var(--hair);
  color: var(--mute);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .3px;
  line-height: 1.1;
  text-transform: uppercase;
}

.status-pill.review {
  border-color: var(--red);
  color: var(--red);
}

.status-pill.cancelled {
  text-decoration: line-through;
}

.shift-meta,
.shift-note,
.shift-transition {
  margin: 3px 0 0;
  color: var(--mute);
  font-size: 11px;
  line-height: 1.35;
}

.shift-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shift-transition {
  color: var(--ink);
}

.shift-time {
  align-self: start;
  padding-top: 2px;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.empty-state,
.error-state {
  display: grid;
  min-height: 245px;
  place-items: center;
  border-top: 1.5px solid var(--ink);
  text-align: center;
}

.empty-state-symbol,
.error-state-symbol {
  display: block;
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 46px;
  font-weight: 400;
  line-height: 1;
}

.error-state-symbol { color: var(--red); }

.empty-state h3,
.error-state h3 {
  margin: 0 0 5px;
  font-size: 20px;
}

.empty-state p,
.error-state p {
  max-width: 330px;
  margin: 0 auto 14px;
  color: var(--mute);
  font-size: 12px;
}

.empty-state button,
.error-state button {
  padding: 10px 14px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  border-bottom: 1.5px solid var(--ink);
}

.search-field:focus-within {
  border-bottom-color: var(--red);
}

.search-field svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--mute);
  stroke-width: 1.5;
}

.search-field input {
  width: 100%;
  min-height: 43px;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  font-size: 15px;
}

.search-field input::placeholder {
  color: var(--mute);
}

.archive-role-filter {
  margin-bottom: 10px;
}

.payroll-summary {
  margin-bottom: 28px;
}

.money-console {
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.money-console-head {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px;
  border-bottom: 1px solid #eceef03d;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.money-console-head span:first-child {
  color: var(--red);
}

.money-console-head span:last-child {
  color: #eceef09c;
  text-align: right;
}

.money-console-core {
  display: flex;
  align-items: flex-end;
  gap: 15px;
  padding: 15px 15px 13px;
}

.money-console-core strong {
  font-size: clamp(78px, 23vw, 112px);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -7px;
  line-height: .77;
}

.money-console-core p {
  margin: 0 0 1px;
  color: #eceef0a6;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .5px;
  line-height: 1.5;
  text-transform: uppercase;
}

.money-console-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border-top: 1px solid #eceef03d;
}

.money-console-stats div {
  display: flex;
  min-height: 47px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 13px;
}

.money-console-stats div + div {
  border-left: 1px solid #eceef03d;
}

.money-console-stats dt {
  color: #eceef09c;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.money-console-stats dd {
  margin: 0;
  font-size: 25px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
}

.money-console-rule {
  display: flex;
  min-height: 39px;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0 13px;
  border-top: 1px solid #eceef03d;
  color: #eceef0a6;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.35;
  text-transform: uppercase;
}

.money-console-rule i {
  width: 22px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--red);
}

.role-ledger {
  margin-bottom: 34px;
}

.role-ledger > header,
.money-evidence > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 9px;
  border-bottom: 1.5px solid var(--ink);
}

.role-ledger h3,
.money-evidence h3 {
  margin: 1px 0 0;
  font-size: 20px;
  letter-spacing: -.4px;
}

.role-ledger > header > span {
  color: var(--mute);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
}

.role-ledger-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}

.role-ledger-grid div {
  display: grid;
  min-height: 51px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 11px 8px 0;
  border-bottom: 1px solid var(--faint);
}

.role-ledger-grid div:nth-child(odd) {
  padding-right: 16px;
  border-right: 1px solid var(--hair);
}

.role-ledger-grid div:nth-child(even) {
  padding-left: 16px;
}

.role-ledger-grid dt {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-ledger-grid dd {
  margin: 0;
  font-size: 25px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -1px;
}

.money-evidence {
  margin-top: 6px;
}

.money-evidence-note {
  max-width: 440px;
  margin: 9px 0 15px;
  color: var(--mute);
  font-size: 11px;
}

.money-periods {
  border-top: 1.5px solid var(--ink);
}

.money-period {
  border-bottom: 1px solid var(--ink);
}

.money-period summary {
  display: grid;
  min-height: 62px;
  grid-template-columns: 28px minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.money-period summary::-webkit-details-marker {
  display: none;
}

.money-period summary::after {
  color: var(--red);
  content: "+";
  font-family: var(--mono);
  font-size: 17px;
  line-height: 1;
  text-align: right;
}

.money-period[open] summary::after {
  content: "−";
}

.money-period-index {
  color: var(--red);
  font-family: var(--mono);
  font-size: 9px;
}

.money-period-title {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.money-period-title strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money-period-title small,
.money-period-state {
  color: var(--mute);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.money-period-state {
  color: var(--red);
  text-align: right;
}

.money-period-body {
  padding: 2px 0 17px 38px;
}

.money-kind + .money-kind {
  margin-top: 15px;
}

.money-kind h4 {
  margin: 0 0 5px;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.money-claim {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--faint);
}

.money-claim code {
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.money-claim mark {
  flex: 0 0 auto;
  padding: 2px 4px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 8px;
}

.add-shift-button {
  position: fixed;
  z-index: 30;
  right: max(calc(22px + var(--safe-right)), calc((100vw - 600px) / 2 + 22px));
  bottom: calc(22px + var(--safe-bottom));
  display: flex;
  min-height: 47px;
  align-items: center;
  gap: 9px;
  padding: 0 17px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.add-shift-button span:first-child {
  color: var(--red);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.scrim {
  position: fixed;
  z-index: 40;
  inset: 0;
  background: #0c0d0fb8;
}

.bottom-sheet,
.modal-card {
  position: fixed;
  z-index: 50;
  right: calc(14px + var(--safe-right));
  left: calc(14px + var(--safe-left));
  width: auto;
  max-width: 600px;
  max-height: calc(var(--tg-viewport-height, 100vh) - var(--safe-top) - var(--safe-bottom) - 14px);
  margin-right: auto;
  margin-left: auto;
  overflow-y: auto;
  padding: 10px 28px calc(24px + var(--safe-bottom));
  border: 1.5px solid var(--ink);
  background: var(--paper);
  overscroll-behavior: contain;
}

.bottom-sheet {
  bottom: 0;
  border-bottom: 0;
}

.modal-card {
  top: calc(50% + (var(--safe-top) - var(--safe-bottom)) / 2);
  max-width: 520px;
  max-height: min(calc(var(--tg-viewport-height, 100vh) - var(--safe-top) - var(--safe-bottom) - 28px), 680px);
  padding-top: 24px;
  transform: translateY(-50%);
}

.sheet-handle {
  width: 38px;
  height: 2px;
  margin: 0 auto 19px;
  background: var(--ink);
}

.sheet-header,
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1.5px solid var(--ink);
}

.icon-button {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--ink);
  background: none;
  color: var(--red);
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.field,
.form-group {
  display: block;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.field > span,
.form-group legend {
  display: block;
  margin-bottom: 5px;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.field input,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  outline: 0;
  background: none;
  font-size: 18px;
  font-weight: 300;
}

.field textarea {
  min-height: 78px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-bottom-color: var(--red);
}

.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.role-quick-field {
  margin-bottom: 12px;
}

.field-help {
  display: block;
  min-height: 15px;
  margin-top: 5px;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 8.5px;
}

.role-choice input,
.segment-control input,
.review-option input {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.role-choice input:focus-visible + span,
.segment-control input:focus-visible + span,
.review-option input:focus-visible + span {
  outline: 1.5px solid var(--red);
  outline-offset: 2px;
}

.role-choice span {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border: 1px solid var(--hair);
  color: var(--mute);
  font-size: 12px;
  text-align: center;
}

.role-choice input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.segment-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--ink);
}

.segment-control label + label {
  border-left: 1px solid var(--ink);
}

.segment-control span {
  display: grid;
  min-height: 42px;
  place-items: center;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.segment-control input:checked + span {
  background: var(--ink);
  color: var(--paper);
}

.optional-fields {
  margin: 2px 0 22px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

.optional-fields summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .6px;
  list-style: none;
  text-transform: uppercase;
}

.optional-fields summary::-webkit-details-marker { display: none; }
.optional-fields summary::after { color: var(--red); content: "+"; font-size: 18px; }
.optional-fields[open] summary::after { content: "−"; }

.optional-fields summary span {
  margin-right: auto;
  margin-left: 7px;
  color: var(--mute);
  font-size: 8px;
}

.time-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.primary-button {
  display: grid;
  width: 100%;
  min-height: 48px;
  place-items: center;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.primary-button.is-loading {
  color: var(--mute);
}

.button-progress {
  display: none;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--mute);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin .72s linear infinite;
}

.primary-button.is-loading .button-label { display: none; }
.primary-button.is-loading .button-progress { display: block; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

.review-prompt {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
}

.source-quote {
  margin: 0 0 18px;
  padding: 11px 12px;
  border-top: 1px solid var(--hair);
  border-right: 0;
  border-bottom: 1px solid var(--hair);
  border-left: 2px solid var(--red);
}

.source-quote span {
  display: block;
  margin-bottom: 5px;
  color: var(--red);
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.source-quote code {
  display: block;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 10px;
  white-space: pre-wrap;
}

.review-option-list {
  display: grid;
  gap: 5px;
  margin-bottom: 20px;
}

.review-option span {
  display: flex;
  min-height: 44px;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid var(--hair);
  font-size: 12px;
}

.review-option input:checked + span {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.review-help {
  color: var(--mute);
  font-size: 12px;
}

.review-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 9px;
}

.review-progress-track {
  height: 2px;
  flex: 1;
  overflow: hidden;
  background: var(--hair);
}

.review-progress-track i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--red);
  transition: width .22s ease;
}

.toast-region {
  position: fixed;
  z-index: 80;
  right: calc(16px + var(--safe-right));
  bottom: calc(82px + var(--safe-bottom));
  left: calc(16px + var(--safe-left));
  display: grid;
  justify-items: center;
  pointer-events: none;
}

.toast {
  max-width: 430px;
  padding: 10px 14px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3px;
  text-align: center;
  animation: toast-in .18s ease-out both;
}

.toast.is-error {
  border-color: var(--red);
  color: var(--red);
}

@keyframes toast-in {
  from { transform: translateY(7px); }
}

body.has-overlay {
  overflow: hidden;
}

@media (max-width: 520px) {
  .app-main { padding: 23px 20px 102px; }
  .app-header,
  .system-footer { padding-right: 18px; padding-left: 18px; }
  .period-hero { gap: 13px; }
  .period-count { font-size: clamp(78px, 27vw, 106px); letter-spacing: -5px; }
  .period-context { padding-top: 5px; }
  .period-metrics { gap: 18px; }
  .shift-card { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .bottom-sheet,
  .modal-card { padding-right: 20px; padding-left: 20px; }
}

@media (max-width: 350px) {
  body {
    padding-right: calc(8px + var(--safe-right));
    padding-left: calc(8px + var(--safe-left));
  }
  .app-main { padding-right: 15px; padding-left: 15px; }
  .app-header,
  .system-footer { padding-right: 14px; padding-left: 14px; }
  .brand-wordmark { font-size: 9.5px; }
  .sync-state { font-size: 9px; }
  .tab-bar { font-size: 10px; letter-spacing: .7px; }
  .period-count { font-size: 75px; }
  .period-context h2 { font-size: 18px; }
  .role-grid { grid-template-columns: 1fr; }
  .role-ledger-grid { grid-template-columns: 1fr; }
  .role-ledger-grid div:nth-child(n) {
    padding-right: 0;
    padding-left: 0;
    border-right: 0;
  }
  .money-period summary {
    grid-template-columns: 23px minmax(0, 1fr) 12px;
    grid-template-rows: auto auto;
    gap: 2px 7px;
    padding: 9px 0;
  }
  .money-period-index { grid-row: 1 / span 2; }
  .money-period-title { grid-column: 2; grid-row: 1; }
  .money-period-state {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }
  .money-period summary::after {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
  .money-period-body { padding-left: 30px; }
  .section-actions .quiet-badge { display: none; }
  .add-shift-button { right: calc(16px + var(--safe-right)); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}