/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.pickup-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.pickup-slot {
  background: #fff;
  border: 1px solid rgba(30, 27, 24, 0.2);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.5rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--charcoal);
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.pickup-slot:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.pickup-slot.selected {
  background: var(--accent);
  color: var(--dust);
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(180, 91, 63, 0.2);
}

:root {
  --charcoal: #1f1d1a;
  --forest: #234039;
  --sage: #9bb6a2;
  --mist: #f6f2ec;
  --clay: #e5d6c3;
  --dust: #fdfbf7;
  --accent: #b45b3f;
  --accent-dark: #8c3f27;
  --theme-primary: #b45b3f;
  --theme-secondary: #234039;
  --theme-accent: #8c3f27;
  --theme-background: #f6f2ec;
  --theme-text: #1f1d1a;
  --theme-radius: 18px;
  --font-heading: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --font-body: "Work Sans", "Helvetica Neue", sans-serif;
  --shadow: 0 24px 60px rgba(22, 19, 16, 0.16);
  --radius-lg: calc(var(--theme-radius) * 1.6);
  --radius-md: var(--theme-radius);
  --radius-sm: calc(var(--theme-radius) * 0.6);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--mist);
}

body:not(.admin-body):not(.admin-auth-body) {
  --accent: var(--theme-primary);
  --accent-dark: var(--theme-accent);
  --forest: var(--theme-secondary);
  --mist: var(--theme-background);
  --dust: var(--theme-background);
  --charcoal: var(--theme-text);
  --radius-lg: calc(var(--theme-radius) * 1.6);
  --radius-md: var(--theme-radius);
  --radius-sm: calc(var(--theme-radius) * 0.6);
}

body:not(.admin-body):not(.admin-auth-body) * {
  font-family: var(--font-body) !important;
}

body:not(.admin-body):not(.admin-auth-body) h1,
body:not(.admin-body):not(.admin-auth-body) h2,
body:not(.admin-body):not(.admin-auth-body) h3,
body:not(.admin-body):not(.admin-auth-body) h4,
body:not(.admin-body):not(.admin-auth-body) h5,
body:not(.admin-body):not(.admin-auth-body) h6 {
  font-family: var(--font-heading) !important;
}

body.admin-body,
body.admin-auth-body {
  font-family: "Manrope", "Helvetica Neue", sans-serif;
  background: #f3f2ee;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  margin: 0 0 1rem;
  letter-spacing: 0.4px;
}

p {
  margin: 0 0 1rem;
  color: var(--charcoal);
  line-height: 1.6;
}

.storefront-hero {
  padding: 2rem 6vw 3.2rem;
}

.page-nav {
  padding: 2.5rem 6vw 0;
}

.page-nav .nav {
  align-items: center;
}

.page-nav .brand {
  text-decoration: none;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: inherit;
}

.brand-logo {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid rgba(44, 40, 35, 0.1);
}

.brand-title {
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.brand-subtitle {
  font-size: 0.9rem;
  color: #4d4a44;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.nav-actions {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-size: 0.95rem;
  flex-wrap: wrap;
}

.nav-menu {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.nav-utility {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.nav-item {
  position: relative;
}

.nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.75rem;
}

.nav-heading {
  font-weight: 500;
  letter-spacing: 0.4px;
  color: inherit;
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px rgba(26, 22, 18, 0.2);
  padding: 0.75rem;
  display: grid;
  gap: 0.5rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-dropdown-link {
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--charcoal);
}

.nav-dropdown-link:hover {
  background: rgba(35, 64, 57, 0.08);
}

.time-clock-page {
  min-height: 100vh;
  padding: 2.5rem 1rem;
  background: radial-gradient(circle at top, rgba(180, 91, 63, 0.14), transparent 42%),
    linear-gradient(180deg, #f8f2e8 0%, #efe3d2 100%);
}

.time-clock-shell {
  width: min(720px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.time-clock-header {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(31, 29, 26, 0.12);
  border-radius: 20px;
  padding: 1.25rem 1.5rem;
}

.time-clock-header h1 {
  margin-bottom: 0.35rem;
}

.time-clock-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(31, 29, 26, 0.1);
  box-shadow: 0 12px 32px rgba(28, 24, 20, 0.1);
  padding: 1.25rem 1.5rem;
}

.time-clock-form {
  display: grid;
  gap: 0.9rem;
}

.time-clock-state {
  margin: 1rem 0;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  font-weight: 600;
}

.time-clock-state.is-in {
  background: rgba(35, 64, 57, 0.12);
  color: #1f342d;
}

.time-clock-state.is-out {
  background: rgba(180, 91, 63, 0.12);
  color: #6d301f;
}

/* "Signed in as <name>" — the session identity, kept visually distinct from
   the timecard status below it so the two are never confused. */
.time-clock-identity h2 {
  margin: 0.1rem 0 0.25rem;
}

.time-clock-eyebrow {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a7f70;
}

.time-clock-meta {
  margin: 0;
  color: #6b6255;
}

/* The timecard status card: green when on the clock, amber when off. This is
   about the timecard only — never the sign-in session. */
.time-clock-status {
  margin: 1.1rem 0 0.4rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
}

.time-clock-status.is-in {
  background: rgba(35, 64, 57, 0.12);
}

.time-clock-status.is-out {
  background: rgba(180, 91, 63, 0.12);
}

.time-clock-status-label {
  margin: 0;
  font-weight: 700;
}

.time-clock-status.is-in .time-clock-status-label {
  color: #1f342d;
}

.time-clock-status.is-out .time-clock-status-label {
  color: #6d301f;
}

.time-clock-status form {
  margin: 0;
}

.time-clock-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
}

/* Sign Out lives top-right of the identity card — where anyone on a shared
   machine instinctively reaches for it — and is styled to be found fast:
   solid, high-contrast, and clearly a button, never buried among the daily
   station links. */
.time-clock-head-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.time-clock-signout {
  background: #2d271f;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(45, 39, 31, 0.25);
}

.time-clock-signout:hover,
.time-clock-signout:focus {
  background: #1c1813;
}

.time-clock-head-actions form {
  margin: 0;
}

/* Manager reach is present but quiet: a small labeled link in the card
   corner, deliberately not competing with the daily clock-in buttons. */
.time-clock-manager-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: #234039;
  text-decoration: none;
  border-bottom: 1px solid rgba(35, 64, 57, 0.35);
  white-space: nowrap;
}

.time-clock-manager-link:hover,
.time-clock-manager-link:focus {
  border-bottom-color: #234039;
}

.time-clock-actions {
  margin-top: 0.9rem;
}

.time-clock-shifts {
  display: grid;
  gap: 0.55rem;
}

.time-clock-shift-row {
  border: 1px solid #e8dfd3;
  border-radius: 12px;
  background: #fcfaf6;
  padding: 0.55rem 0.7rem;
}

.time-clock-shift-window {
  font-weight: 700;
  color: #2d271f;
}

.staff-shift-designations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.15rem;
}

.staff-shift-designation {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--sd-line, #ded5c6);
  border-radius: 999px;
  color: var(--sd-ink-2, #57503f);
  font-size: var(--sd-text-sm, 0.875rem);
  font-style: normal;
}

.staff-pto-balance {
  margin: 0 0 0.5rem;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid var(--sd-accent, #234039);
  background: rgba(35, 64, 57, 0.06);
  border-radius: 0 6px 6px 0;
  line-height: 1.4;
}

.staff-pto-balance strong {
  font-size: 1.05rem;
}

.staff-pto-balance span {
  display: block;
  font-size: 0.875rem;
  opacity: 0.75;
}

.staff-schedule-page {
  min-height: 100vh;
  padding: 2rem 1rem 2.5rem;
  background: radial-gradient(circle at top left, rgba(35, 64, 57, 0.12), transparent 38%),
    linear-gradient(180deg, #f7f1e6 0%, #efe4d2 100%);
}

.staff-schedule-shell {
  width: min(1080px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.staff-schedule-header,
.staff-schedule-card {
  background: #fff;
  border: 1px solid rgba(31, 29, 26, 0.1);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(26, 21, 16, 0.1);
  padding: 1rem 1.1rem;
}

.staff-schedule-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.staff-schedule-header h1 {
  margin: 0 0 0.25rem;
}

.staff-schedule-header p {
  margin: 0;
  color: #62574b;
}

.staff-time-off-overlaps {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid #e8dfd3;
  border-radius: 12px;
  background: #fcfaf6;
  display: grid;
  gap: 0.4rem;
}

.staff-time-off-overlaps h2 {
  margin: 0;
  font-size: 0.9rem;
}

.staff-time-off-overlaps ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.staff-time-off-overlaps li {
  border: 1px solid #e8dfd4;
  border-radius: 10px;
  background: #fff;
  padding: 0.4rem 0.5rem;
  display: grid;
  gap: 0.1rem;
}

.staff-time-off-overlaps li span {
  color: #5a4f43;
  font-size: 0.77rem;
}

.staff-time-off-overlaps__empty {
  margin: 0;
  color: #7b7063;
  font-size: 0.82rem;
}

@media (max-width: 640px) {
  .staff-schedule-page {
    padding: 0.7rem 0.5rem 1rem;
    background: linear-gradient(180deg, #f7f1e6 0%, #efe4d2 100%);
    min-height: 100dvh;
  }

  .staff-schedule-shell {
    gap: 0.5rem;
  }

  .staff-schedule-header,
  .staff-schedule-card {
    border-radius: 10px;
    padding: 0.62rem 0.68rem;
    box-shadow: 0 6px 16px rgba(26, 21, 16, 0.08);
  }

  .staff-schedule-header {
    gap: 0.45rem;
  }

  .staff-schedule-header h1 {
    margin-bottom: 0.1rem;
    font-size: 1.08rem;
    line-height: 1.1;
  }

  .staff-schedule-header p {
    font-size: 0.76rem;
    line-height: 1.2;
  }
}

@media (max-width: 380px) {
  .staff-schedule-page {
    padding-inline: 0.35rem;
  }

  .staff-schedule-header,
  .staff-schedule-card {
    padding: 0.56rem;
  }
}

.designer-station-page {
  min-height: 100vh;
  padding: 2rem 1rem 3rem;
  background: radial-gradient(circle at 20% 0%, rgba(35, 64, 57, 0.12), transparent 35%),
    linear-gradient(180deg, #f6efe2 0%, #efe4d1 100%);
}

.designer-station-shell {
  width: 100%;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.designer-station-workspace {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 1rem;
  align-items: start;
}

.designer-station-workspace__plan,
.designer-station-workspace__build {
  display: grid;
  gap: 1rem;
}

.designer-station-header__meta {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 1rem;
  font-weight: 700;
}

.designer-station-header-timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  padding: 0.22rem 0.55rem;
  border-radius: 10px;
  background: rgba(31, 29, 26, 0.08);
  border: 1px solid rgba(31, 29, 26, 0.12);
  font-size: 0.82rem;
  line-height: 1;
}

.designer-station-header-timer.is-active {
  background: rgba(35, 64, 57, 0.12);
  border-color: rgba(35, 64, 57, 0.22);
  color: #234039;
}

.designer-station-costs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.designer-station-cost-card {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(31, 29, 26, 0.12);
  border-radius: 14px;
  background: #fbf8f2;
}

.designer-station-cost-card strong {
  font-size: 1.2rem;
}

.designer-station-cost-card small {
  color: #6b635a;
}

.designer-station-cost-card--accent {
  background: #eef6f0;
  border-color: rgba(35, 64, 57, 0.18);
}

.designer-station-cost-pills {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.35rem 0;
}

.designer-station-cost-pill {
  align-items: center;
  background: #fbf8f2;
  border: 1px solid rgba(31, 29, 26, 0.12);
  border-radius: 999px;
  color: #6b635a;
  display: inline-flex;
  font-size: 0.78rem;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
}

.designer-station-cost-pill strong {
  color: #1f1d1a;
  font-size: 0.82rem;
}

.designer-station-cost-pill--accent {
  background: #eef6f0;
  border-color: rgba(35, 64, 57, 0.18);
  color: #234039;
}

.designer-station-cost-pill--accent strong {
  color: #234039;
}

.designer-station-cost-pill.designer-station-price--on-target,
.batch-line-card__cost-summary span.designer-station-price--on-target {
  background: #dcfce7;
  border-color: rgba(22, 101, 52, 0.3);
  color: #166534;
}

.designer-station-cost-pill.designer-station-price--on-target strong,
.batch-line-card__cost-summary span.designer-station-price--on-target strong {
  color: #166534;
}

.designer-station-cost-pill.designer-station-price--under,
.batch-line-card__cost-summary span.designer-station-price--under {
  background: #fef3c7;
  border-color: rgba(146, 64, 14, 0.3);
  color: #92400e;
}

.designer-station-cost-pill.designer-station-price--under strong,
.batch-line-card__cost-summary span.designer-station-price--under strong {
  color: #92400e;
}

.designer-station-cost-pill.designer-station-price--over,
.batch-line-card__cost-summary span.designer-station-price--over {
  background: #fee2e2;
  border-color: rgba(153, 27, 27, 0.3);
  color: #991b1b;
}

.designer-station-cost-pill.designer-station-price--over strong,
.batch-line-card__cost-summary span.designer-station-price--over strong {
  color: #991b1b;
}

/* The usage table's total row: the summed suggested price sits directly under
   the Price column, ruled off like a receipt total. The value chip carries the
   same on-target / under / over states as the cost pills. */
.designer-station-usage-total td {
  border-bottom: none;
  border-top: 2px solid rgba(31, 29, 26, 0.25);
  padding-top: 0.45rem;
}

.designer-station-usage-total__label {
  color: #6b635a;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-right: 0.75rem;
}

.designer-station-usage-total__value {
  background: #fbf8f2;
  border: 1px solid rgba(31, 29, 26, 0.12);
  border-radius: 6px;
  display: inline-block;
  padding: 0.15rem 0.45rem;
}

.designer-station-usage-total__value strong {
  color: #1f1d1a;
  font-size: 0.85rem;
}

.designer-station-usage-total__value.designer-station-price--on-target {
  background: #dcfce7;
  border-color: rgba(22, 101, 52, 0.3);
}

.designer-station-usage-total__value.designer-station-price--on-target strong {
  color: #166534;
}

.designer-station-usage-total__value.designer-station-price--under {
  background: #fef3c7;
  border-color: rgba(146, 64, 14, 0.3);
}

.designer-station-usage-total__value.designer-station-price--under strong {
  color: #92400e;
}

.designer-station-usage-total__value.designer-station-price--over {
  background: #fee2e2;
  border-color: rgba(153, 27, 27, 0.3);
}

.designer-station-usage-total__value.designer-station-price--over strong {
  color: #991b1b;
}

.designer-station-pick-list-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.designer-station-pick-list-header h2,
.designer-station-pick-list-header h3 {
  margin: 0;
}

.designer-station-pick-list-header__actions {
  align-items: center;
  display: flex;
  gap: 0.65rem;
}

.designer-station-pick-list-group__heading {
  background: #f3efe7;
  color: #234039;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.designer-station-pick-list-material {
  align-items: center;
  display: flex;
  gap: 0.55rem;
}

.designer-station-pick-list-material__image,
.designer-station-pick-list-material__placeholder {
  border-radius: 8px;
  flex-shrink: 0;
  height: 42px;
  width: 42px;
}

.designer-station-pick-list-material__image {
  display: block;
  object-fit: cover;
}

.designer-station-pick-list-material__placeholder {
  align-items: center;
  background: #f8f5ef;
  color: #a8a29e;
  display: flex;
  font-size: 0.72rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.04em;
}

.designer-station-print-pick-list__sheet {
  background: #fff;
  border: 1px solid rgba(31, 29, 26, 0.12);
  border-radius: 10px;
  padding: 0.8rem;
}

.designer-station-print-pick-list__header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.designer-station-print-pick-list__header h1,
.designer-station-print-pick-list__line-items h2 {
  margin: 0;
}

.designer-station-print-pick-list__line-items {
  margin-top: 0.75rem;
}

.designer-station-print-icon {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(35, 64, 57, 0.18);
  border-radius: 999px;
  color: #234039;
  background: #eef6f0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.designer-station-print-icon:hover {
  background: #ddece1;
}

.designer-station-print-icon svg {
  width: 1rem;
  height: 1rem;
}

/* Material bundle component rows: the quantity and its unit read as one
   control, with the retail equivalent previewed beneath. */
.bundle-component-qty {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.bundle-component-qty__amount {
  width: 5.5rem;
  flex: 0 0 auto;
}

.bundle-component-qty__unit {
  flex: 1 1 auto;
  min-width: 7rem;
}

.bundle-component-qty__preview {
  min-height: 1.2em;
  margin: 0.3rem 0 0;
}

.designer-station-combobox {
  position: relative;
}

.designer-station-combobox__input {
  width: 100%;
}

.designer-station-combobox__hint {
  margin: 0.3rem 0 0;
  color: #6f6a63;
  font-size: 0.78rem;
}

.designer-station-combobox__menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid #d9cec1;
  border-radius: 0.9rem;
  background: #fffaf4;
  box-shadow: 0 14px 30px rgba(61, 42, 24, 0.12);
}

.designer-station-combobox__option,
.designer-station-combobox__empty {
  width: 100%;
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: 0.7rem;
  font: inherit;
  text-align: left;
}

.designer-station-combobox__option {
  border: 0;
  color: #3d2a18;
  background: transparent;
  cursor: pointer;
}

.designer-station-combobox__option-title,
.designer-station-combobox__option-meta,
.designer-station-combobox__option-action {
  display: block;
}

.designer-station-combobox__option-title {
  font-weight: 600;
}

.designer-station-combobox__option-meta {
  margin-top: 0.15rem;
  color: #75685c;
  font-size: 0.9rem;
}

.designer-station-combobox__option-action {
  margin-top: 0.25rem;
  color: #3f6f5f;
  font-size: 0.8rem;
  font-weight: 700;
}

.designer-station-combobox__option:hover,
.designer-station-combobox__option.is-active {
  background: #efe3d2;
}

.designer-station-combobox__empty {
  color: #6b635b;
}

.designer-station-substitute-chips {
  display: grid;
  gap: 0.5rem;
}

.designer-station-substitute-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.55rem;
  align-items: center;
  width: 100%;
  border: 1px solid rgba(35, 64, 57, 0.16);
  border-radius: 0.7rem;
  background: #fffdfa;
  padding: 0.45rem;
  color: #234039;
  text-align: left;
  cursor: pointer;
}

.designer-station-substitute-card:hover,
.designer-station-substitute-card:focus-visible {
  border-color: rgba(35, 64, 57, 0.38);
  background: #f8fbf7;
}

.designer-station-substitute-card__thumb {
  width: 44px;
  height: 44px;
  border-radius: 0.55rem;
  object-fit: cover;
  background: #f8f5ef;
}

.designer-station-substitute-card__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #a8a29e;
}

.designer-station-substitute-card__body {
  display: grid;
  gap: 0.12rem;
}

.designer-station-substitute-card__name {
  font-weight: 700;
}

.designer-station-substitute-card__meta {
  color: #6f6a63;
  font-size: 0.78rem;
}

.designer-station-substitute-reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.55rem 0;
  align-items: center;
}

.designer-station-substitute-reasons__label {
  color: #6f6a63;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 0.15rem;
}

.designer-station-reason-radio {
  display: inline-flex;
  align-items: center;
  color: #4f4a43;
  cursor: pointer;
  font-size: 0.8rem;
}

.designer-station-reason-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.designer-station-reason-radio span {
  border: 1px solid rgba(63, 111, 95, 0.24);
  border-radius: 999px;
  background: #f8f5ef;
  padding: 0.22rem 0.55rem;
}

.designer-station-reason-radio input:checked + span {
  background: #234039;
  border-color: #234039;
  color: #fff;
}

.designer-station-reason-radio input:focus-visible + span {
  outline: 2px solid #3f6f5f;
  outline-offset: 2px;
}

.designer-station-combobox__input-wrap {
  position: relative;
}

.designer-station-combobox__input--clearable {
  padding-right: 2.1rem;
  width: 100%;
}

.designer-station-combobox__clear {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: #6f6a63;
  cursor: pointer;
  display: inline-flex;
  font-size: 1.2rem;
  height: 1.7rem;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.7rem;
}

.designer-station-combobox__clear:hover,
.designer-station-combobox__clear:focus-visible {
  background: rgba(63, 111, 95, 0.12);
  color: #234039;
}

.designer-station-substitute-row td {
  background: #fbf8f2;
  border-top: 0;
  padding-top: 0;
}

.designer-station-substitute-row[data-substitute-reveal-state="open"] td {
  animation: workstation-substitute-reveal 180ms ease-out;
}

.designer-station-substitute-panel {
  border: 1px solid rgba(35, 64, 57, 0.12);
  border-top-color: rgba(63, 111, 95, 0.35);
  border-radius: 0.8rem;
  background: #fffdfa;
  padding: 0.75rem;
}

@keyframes workstation-substitute-reveal {
  from {
    opacity: 0;
    transform: translateY(-0.4rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .designer-station-substitute-row[data-substitute-reveal-state="open"] td {
    animation: none;
  }
}

.designer-station-header,
.designer-station-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(31, 29, 26, 0.12);
  padding: 1rem 1.1rem;
}

.designer-station-card__header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.designer-station-card__header h2 {
  margin: 0;
}

.batch-mode-segmented {
  display: flex;
  gap: 0;
}

.batch-mode-segmented__option {
  cursor: pointer;
  user-select: none;
}

.batch-mode-segmented__option span {
  align-items: center;
  background: #f1f5f9;
  border: 2px solid #cbd5e1;
  color: #64748b;
  display: flex;
  font-size: 0.8rem;
  font-weight: 600;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.batch-mode-segmented__option:first-child span {
  border-radius: 999px 0 0 999px;
  border-right-width: 1px;
}

.batch-mode-segmented__option:last-child span {
  border-radius: 0 999px 999px 0;
  border-left-width: 1px;
}

.batch-mode-segmented__option.is-selected span {
  background: #234039;
  border-color: #234039;
  color: #f6f2ec;
}

.milestone-template-timing {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.milestone-template-timing > input {
  width: 7rem;
}

.milestone-template-timing__unit {
  align-self: center;
  color: #62584e;
  font-weight: 700;
}

.milestone-template-direction {
  display: inline-flex;
}

/* `position: relative` is load-bearing, not decoration. The radio inside is taken out of
   flow to hide it (position: absolute, opacity: 0, just below), and without a positioned
   ancestor its containing block is the viewport: it rendered its full width at its static
   position and pushed the document to 2314px on a 1280px window — a horizontal scrollbar
   on the whole admin page, caused by an element nobody can see. GitLab #78 sweep. */
.milestone-template-direction__option {
  position: relative;
  cursor: pointer;
}

.milestone-template-direction__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.milestone-template-direction__option span {
  display: grid;
  min-height: 100%;
  place-items: center;
  padding: 0.55rem 0.9rem;
  border: 1px solid #cfc3b5;
  background: #fffdf9;
  color: #62584e;
  font-weight: 700;
}

.milestone-template-direction__option:first-child span {
  border-radius: 9px 0 0 9px;
}

.milestone-template-direction__option:last-child span {
  border-left: 0;
  border-radius: 0 9px 9px 0;
}

.milestone-template-direction__option input:checked + span {
  border-color: #234039;
  background: #234039;
  color: #fff;
}

.milestone-template-direction__option input:focus-visible + span {
  outline: 3px solid rgba(35, 64, 57, 0.25);
  outline-offset: 2px;
}

.milestone-template-description {
  margin: 0.9rem 0 1.1rem;
  padding: 0.85rem 1rem;
  border-left: 4px solid #a65d43;
  border-radius: 0 10px 10px 0;
  background: #f8f1e8;
  color: #493f36;
}

.milestone-template-description p {
  margin: 0.25rem 0 0;
}

.designer-station-order-card {
  background: rgba(246, 242, 236, 0.55);
  border: 1px solid rgba(31, 29, 26, 0.08);
  border-radius: 12px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.designer-station-order-card__header {
  align-items: center;
  background: rgba(31, 29, 26, 0.04);
  display: flex;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  flex-wrap: wrap;
}

.designer-station-order-card__header strong {
  color: #1f1d1a;
  font-size: 0.9rem;
}

.designer-station-order-card__header .form-note {
  color: #78716c;
}

.designer-station-line-choice {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  transition: background 0.15s ease;
}

.designer-station-line-choice:hover {
  background: rgba(31, 29, 26, 0.04);
}

.designer-station-line-choice + .designer-station-line-choice {
  border-top: 1px solid rgba(31, 29, 26, 0.06);
}

.designer-station-line-choice__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.designer-station-line-choice__check input[type="checkbox"] {
  accent-color: #234039;
  cursor: pointer;
  height: 18px;
  width: 18px;
  margin: 0;
}

.designer-station-line-choice__info {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.designer-station-line-choice__info strong {
  color: #1f1d1a;
  font-size: 0.88rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.designer-station-line-choice__meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}

.designer-station-line-choice__meta .form-note {
  color: #78716c;
  font-size: 0.78rem;
}

.designer-station-line-choice__action {
  flex-shrink: 0;
  margin-left: auto;
}

.designer-station-line-choice__action .button {
  font-size: 0.78rem;
  padding: 0.28rem 0.65rem;
}

.designer-station-line-choice__action .designer-station-status-muted {
  color: #a8a29e;
  font-size: 0.78rem;
  font-weight: 600;
}

.form-actions--batch {
  align-items: center;
  background: rgba(35, 64, 57, 0.06);
  border: 1px solid rgba(35, 64, 57, 0.12);
  border-radius: 10px;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.85rem;
}

.form-actions--batch .button {
  font-size: 0.85rem;
  padding: 0.45rem 1rem;
}

.batch-count {
  color: #234039;
  font-size: 0.8rem;
  font-weight: 600;
}

.batch-back-link {
  color: #78716c;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: -0.25rem;
  text-decoration: none;
  transition: color 0.15s ease;
}

.batch-back-link:hover {
  color: #234039;
}

.batch-timer-card {
  background: linear-gradient(135deg, rgba(35, 64, 57, 0.06), rgba(35, 64, 57, 0.02));
  border-color: rgba(35, 64, 57, 0.18);
}

.batch-timer-card__content {
  align-items: baseline;
  display: flex;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.batch-timer-card__content h1 {
  font-size: 1.15rem;
  margin: 0;
}

.batch-timer-card__content .time-clock-state {
  margin: 0;
}

.batch-line-card {
  border-left: 3px solid rgba(35, 64, 57, 0.25);
}

/* A premade card is the same card an order line gets, marked so a designer
   scanning down the batch can see at a glance which arrangements are spoken
   for and which are going to the cooler. */
.batch-line-card--premade {
  border-left-color: rgba(138, 98, 24, 0.55);
}

.batch-line-card__premade-badge,
.designer-station-order-card--premade .designer-station-order-card__header strong {
  color: #8a6218;
}

.batch-line-card__premade-badge {
  border-radius: 999px;
  background: #f8eeda;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-right: 0.35rem;
  padding: 0.1rem 0.5rem;
  text-transform: uppercase;
}

.designer-station-order-card--premade {
  border-left: 3px solid rgba(138, 98, 24, 0.45);
}

.batch-line-card__body {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
}

.batch-line-card__left {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-width: 0;
}

.batch-line-card__left .designer-station-product__image-trigger,
.batch-line-card__left .batch-line-card__placeholder {
  height: 72px;
  width: 72px;
}

.batch-line-card__right {
  min-width: 0;
}

.batch-line-card__title {
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}

.batch-line-card__meta {
  color: #7b6f5d;
  font-size: 0.86rem;
  line-height: 1.35;
  margin: 0;
}

.batch-line-card__cost-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.batch-line-card__cost-summary span {
  background: #f8f5ef;
  border: 1px solid rgba(31, 29, 26, 0.08);
  border-radius: 999px;
  color: #5f574e;
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
}

.batch-line-card__cost-summary strong {
  color: #1f2624;
}

.batch-line-card__cost-summary span.batch-line-card__cost-summary-total {
  background: #eef8f1;
  border-color: rgba(35, 64, 57, 0.14);
}

.batch-line-card__details {
  border-top: 1px solid #eadfce;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
}

.batch-line-card__details .batch-line-card__design-photo {
  align-items: center;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: minmax(0, 1fr) auto;
}

.batch-line-card__design-photo .designer-station-design-photo {
  max-width: 160px;
}

.batch-line-card__header {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.batch-line-card__info {
  flex: 1;
  min-width: 0;
}

.batch-variant-form {
  align-items: center;
  display: flex;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.batch-variant-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.batch-variant-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 29, 26, 0.55);
}

.batch-variant-modal__panel {
  align-items: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 44px rgba(15, 23, 42, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 50%;
  max-width: 440px;
  padding: 1.5rem;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw - 2rem);
}

.batch-variant-modal__panel h3 {
  align-self: stretch;
  font-size: 1rem;
  margin: 0 0 0.25rem;
}

.batch-variant-modal__panel .form-note {
  align-self: stretch;
}

.batch-variant-modal__panel .designer-station-combobox {
  align-self: stretch;
  margin-top: 0.75rem;
}

.batch-variant-modal__panel .form-actions {
  align-self: stretch;
}

.batch-variant-modal__close {
  background: none;
  border: 0;
  color: #78716c;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.2rem;
  position: absolute;
  right: 0.9rem;
  top: 0.7rem;
}

.batch-variant-modal__close:hover {
  color: #1f1d1a;
}

.batch-variant-form select {
  font-size: 0.78rem;
  max-width: 200px;
}

.batch-change-product {
  font-size: 0.76rem;
  font-weight: 600;
  margin-left: 0.4rem;
  vertical-align: middle;
}

.batch-line-card__header h2 {
  font-size: 0.95rem;
  margin: 0 0 0.15rem;
}

.batch-line-card__minutes {
  background: rgba(35, 64, 57, 0.08);
  border-radius: 999px;
  color: #234039;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
}

.batch-line-card__thumb {
  border-radius: 10px;
  flex-shrink: 0;
  height: 64px;
  width: 64px;
  overflow: hidden;
}

.batch-line-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

.batch-line-card__placeholder {
  align-items: center;
  background: #f3efe7;
  border-radius: 10px;
  color: #a8a29e;
  display: flex;
  font-size: 0.75rem;
  font-weight: 700;
  height: 100%;
  justify-content: center;
  letter-spacing: 0.04em;
  width: 100%;
}

.batch-line-card__footer {
  background: #fbf8f2;
  border: 1px solid rgba(31, 29, 26, 0.1);
  border-radius: 10px;
  margin-top: 0.65rem;
  padding: 0.55rem;
}

.batch-line-card__notes-row {
  align-items: start;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(0, 1fr) max-content;
}

.batch-line-card__notes-row .field {
  margin: 0;
}

.batch-line-card__notes-field textarea {
  min-height: 2.25rem;
  resize: vertical;
}

.batch-line-card__recipe-correction-field {
  margin-top: 1.35rem;
}

.batch-line-card__recipe-correction-label {
  align-items: center;
  display: flex;
  gap: 0.35rem;
  line-height: 1;
  white-space: nowrap;
}

.batch-line-card__recipe-correction-field input[type="checkbox"] {
  margin: 0;
}

@media (max-width: 720px) {
  .batch-line-card__body,
  .batch-line-card__details .batch-line-card__design-photo {
    grid-template-columns: 1fr;
  }

  .batch-line-card__notes-row {
    grid-template-columns: 1fr;
  }
}

.admin-table--compact {
  font-size: 0.84rem;
}

.admin-table--compact th,
.admin-table--compact td {
  padding: 0.35rem 0.5rem;
}

.designer-station-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.designer-station-header__main {
  display: grid;
  gap: 0.2rem;
}

.designer-station-header__main h1,
.designer-station-header__main p {
  margin: 0;
}

.designer-station-header__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-left: auto;
}

.designer-station-claim-form {
  display: flex;
  align-items: center;
  gap: 0;
}

.designer-station-claim-form input[type="text"] {
  min-width: 11rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.designer-station-claim-form .button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.designer-station-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.45rem;
}

.designer-station-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.92rem;
}

.designer-station-status-muted {
  font-size: 0.85rem;
  color: #6b7280;
  font-weight: 600;
}

.designer-station-section {
  margin-top: 1rem;
}

.designer-station-section h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.designer-station-po-groups {
  display: grid;
  gap: 0.85rem;
}

.designer-station-po-group {
  border: 1px solid rgba(31, 29, 26, 0.1);
  border-radius: 14px;
  background: rgba(249, 250, 251, 0.9);
  padding: 0.85rem;
}

.designer-station-po-group__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.designer-station-po-group__header h4 {
  margin: 0 0 0.2rem;
  font-size: 0.98rem;
}

.designer-station-po-group__header .form-note {
  margin: 0;
}

.designer-station-po-group__stats {
  display: grid;
  gap: 0.2rem;
  text-align: right;
  font-size: 0.83rem;
  color: #4b5563;
}

.designer-station-count {
  color: #6b7280;
  font-weight: 500;
}

.designer-station-gathered-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Premade numbers are copied onto cooler labels, so they read large. */
.designer-station-premade-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.designer-station-premade-number {
  padding: 0.15rem 0.55rem;
  border: 1px solid #c7b8a8;
  border-radius: 6px;
  background: #fffaf3;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A line QC sent back for rework reads red on the queue, with what failed. */
.designer-station-order-card--qc-return {
  border-color: rgba(185, 28, 28, 0.45);
  background: #fff5f5;
}

.designer-station-order-card--qc-return .designer-station-order-card__header {
  background: rgba(185, 28, 28, 0.08);
}

.designer-station-line-choice--qc-return {
  background: #fef2f2;
  box-shadow: inset 4px 0 0 #b91c1c;
}

.designer-station-line-choice--qc-return:hover {
  background: #fee2e2;
}

.designer-station-line-choice--qc-return .designer-station-line-choice__info > strong {
  color: #991b1b;
}

.designer-station-qc-return-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #b91c1c;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
}

.designer-station-gather-chip {
  display: inline-block;
  width: fit-content;
  align-self: flex-start;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: middle;
}

.designer-station-gather-chip--gathering {
  background: #fde8c8;
  color: #7a4a00;
}

.designer-station-gather-chip--gathered {
  background: #d9efe0;
  color: #1f5a37;
}

/* When the order is due and what moves it up the queue (QueueTimingHelper). */
.designer-station-priority-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.designer-station-priority-chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: rgba(31, 29, 26, 0.08);
  color: #1f1d1a;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}

.designer-station-priority-chip--date {
  background: #e7efe9;
  color: #234039;
}

.designer-station-priority-chip--today {
  background: #234039;
  color: #fff;
}

.designer-station-priority-chip--late {
  background: #f8e3d9;
  color: #7a2f1a;
}

.designer-station-priority-chip--timed {
  background: #f8e3d9;
  color: #7a2f1a;
}

.designer-station-qc-return-reason {
  display: block;
  margin-top: 0.15rem;
  color: #991b1b;
  font-size: 0.8rem;
  line-height: 1.35;
  letter-spacing: normal;
  text-transform: none;
}

.designer-station-qc-return-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin: 0 0 0.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(185, 28, 28, 0.45);
  border-left-width: 4px;
  border-radius: 10px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 0.85rem;
}

.designer-station-qc-return-banner strong {
  color: #991b1b;
}

.designer-station-claim-summary {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding-left: 1.1rem;
  color: #4b5563;
  font-size: 0.9rem;
}

.designer-station-product {
  display: grid;
  gap: 1rem;
}

.designer-station-product__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(31, 29, 26, 0.08);
}

.designer-station-product__body {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.designer-station-product__media {
  width: 160px;
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(31, 29, 26, 0.12);
  background: #f8f5ef;
}

.designer-station-product__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.designer-station-product__image-trigger {
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  display: block;
  cursor: zoom-in;
}

.designer-station-product__image-trigger:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}

.designer-station-photo-modal {
  z-index: 1200;
}

.designer-station-photo-modal__panel {
  position: relative;
  max-width: min(94vw, 1200px);
  max-height: 90vh;
  width: auto;
  background: #111827;
  border-radius: 0.85rem;
  padding: 0.75rem;
  box-shadow: 0 24px 44px rgba(15, 23, 42, 0.4);
}

.designer-station-photo-modal__image {
  display: block;
  max-width: min(92vw, 1160px);
  max-height: calc(90vh - 2.4rem);
  width: auto;
  height: auto;
  border-radius: 0.5rem;
}

.designer-station-photo-modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.72);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.designer-station-photo-modal__close:hover,
.designer-station-photo-modal__close:focus-visible {
  background: rgba(17, 24, 39, 0.9);
}

.designer-station-product__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: #6b7280;
  background: #f3efe7;
}

.designer-station-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
}

.designer-station-modal {
  background: #fff;
  border-radius: 10px;
  width: min(900px, 100%);
  max-height: min(85vh, calc(100dvh - 2rem));
  overflow: auto;
  padding: 1rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
}

.designer-station-modal--small {
  width: min(460px, 100%);
}

.designer-station-camera-modal {
  width: min(680px, 100%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* The webcam/phone panels flex so the video shrinks to fit instead of
   forcing the modal to scroll. */
.designer-station-camera-modal [data-panel] {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

.designer-station-camera-modal [data-panel][hidden] {
  display: none !important;
}

.designer-station-camera-modal .form-actions {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-shrink: 0;
}

.designer-station-camera-modal__tabs {
  border-bottom: 1px solid rgba(31, 29, 26, 0.12);
  display: flex;
  gap: 0;
  margin: 0 0 0.75rem;
}

.designer-station-camera-modal__tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #6b635a;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: -1px;
  padding: 0.4rem 0.9rem;
}

.designer-station-camera-modal__tab:hover,
.designer-station-camera-modal__tab.active {
  border-bottom-color: #234039;
  color: #234039;
}

.designer-station-camera-modal__qr {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 1rem;
}

/* Sits above the QR code so a photo taken on a phone lands in view. */
.designer-station-camera-modal [data-panel="phone"] .designer-station-design-photo {
  margin: 0.75rem auto 0;
  max-width: 220px;
  text-align: center;
  width: 100%;
}

.designer-station-camera-modal__qr svg {
  max-width: 220px;
}

.designer-station-camera-modal__select {
  background: #fff;
  border: 1px solid #d8d2c8;
  border-radius: 0.5rem;
  color: #234039;
  font-size: 0.82rem;
  margin-top: 0.75rem;
  max-width: 100%;
  padding: 0.35rem 0.6rem;
}

.designer-station-camera-modal__video,
.designer-station-camera-modal__preview {
  background: #111827;
  border-radius: 0.75rem;
  display: block;
  margin: 0.6rem 0;
  flex: 1 1 auto;
  min-height: 140px;
  max-height: 55vh;
  object-fit: contain;
  width: 100%;
}

.designer-station-camera-modal__video[hidden],
.designer-station-camera-modal__preview[hidden] {
  display: none !important;
}

/* Design photo thumbnail, shown under the variant photo once a photo exists. */
.designer-station-design-photo[hidden] {
  display: none !important;
}

.designer-station-design-photo__label {
  color: #6b635a;
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.designer-station-design-photo__image {
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(31, 29, 26, 0.12);
  border-radius: 8px;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

/* One check mark, two homes: inline beside a labelled button, and a corner
   badge on an icon button. The surrounding context picks the treatment. */
.designer-station-photo-check {
  color: #15803d;
  font-weight: 700;
  margin-left: 0.35rem;
}

.designer-station-photo-check[hidden] {
  display: none !important;
}

.designer-station-icon-button--camera {
  position: relative;
}

.designer-station-icon-button .designer-station-photo-check {
  background: #15803d;
  border-radius: 999px;
  color: #fff;
  font-size: 0.6rem;
  height: 0.95rem;
  line-height: 0.95rem;
  margin: 0;
  position: absolute;
  right: -0.2rem;
  text-align: center;
  top: -0.2rem;
  width: 0.95rem;
}

.designer-station-product__meta h2 {
  margin-bottom: 0.45rem;
}

.designer-station-product__meta p {
  margin: 0.2rem 0;
}

.designer-station-product__howto {
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(31, 29, 26, 0.12);
  border-radius: 10px;
  background: #faf9f6;
}

.designer-station-product__howto h3 {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7a6858;
}

.designer-station-product__howto p {
  margin: 0 0 0.4rem;
  font-size: 0.92rem;
}

.designer-station-product__description {
  color: #5f574e;
  font-size: 0.98rem;
}

.designer-station-product__summary-row,
.designer-station-product__photo-tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.designer-station-product__summary-row p {
  margin: 0;
}

.designer-station-product__variant {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(31, 29, 26, 0.08);
}

.designer-station-icon-button {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(47, 42, 36, 0.16);
  border-radius: 999px;
  background: #fffaf4;
  color: #3d2a18;
  box-shadow: 0 1px 2px rgba(61, 42, 24, 0.08);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.designer-station-icon-button:hover,
.designer-station-icon-button:focus-visible {
  background: #f5ead9;
  border-color: rgba(61, 42, 24, 0.26);
  transform: translateY(-1px);
}

.designer-station-icon-button svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.designer-station-product__qr {
  width: 188px;
  height: 188px;
  display: inline-block;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid rgba(47, 42, 36, 0.12);
  border-radius: 0.75rem;
  overflow: visible;
}

.designer-station-product__qr svg {
  width: 100%;
  height: 100%;
  display: block;
}

.designer-station-autosave-status {
  font-size: 0.92rem;
  color: #6b7280;
}

.designer-station-autosave-status[data-state="pending"],
.designer-station-autosave-status[data-state="saving"] {
  color: #8b5e1a;
}

.designer-station-autosave-status[data-state="saved"] {
  color: #166534;
}

.designer-station-autosave-status[data-state="error"] {
  color: #b91c1c;
}

.designer-station-product__photo-tools {
  margin-top: 0.35rem;
}

.designer-station-build-state--compact h3 {
  margin: 0 0 0.2rem;
}

.designer-station-card__compact-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.designer-station-card__compact-header h2 {
  margin: 0 0 0.2rem;
}

.percentage-input {
  position: relative;
}

.percentage-input input {
  padding-right: 2rem;
}

.percentage-input__suffix {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  transform: translateY(-50%);
  color: #6b6259;
  font-weight: 700;
  pointer-events: none;
}

.designer-station-numpad {
  position: fixed;
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: max(0.75rem, env(safe-area-inset-bottom));
  z-index: 300;
  display: grid;
  gap: 0.4rem;
  width: 236px;
  padding: 0.55rem;
  border: 1px solid rgba(31, 29, 26, 0.16);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(31, 29, 26, 0.24);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.designer-station-numpad[hidden] {
  display: none;
}

.designer-station-numpad__keys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.designer-station-numpad__footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0.4rem;
}

.designer-station-numpad__key {
  min-height: 52px;
  padding: 0;
  border: 1px solid rgba(31, 29, 26, 0.14);
  border-radius: 10px;
  background: #fbf8f2;
  color: #1f1d1a;
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.designer-station-numpad__key:active {
  background: #efe4d1;
}

.designer-station-numpad__key:disabled {
  opacity: 0.35;
  cursor: default;
}

.designer-station-numpad__key--clear {
  font-size: 0.9rem;
}

.designer-station-numpad__key--done {
  background: var(--forest, #234039);
  border-color: var(--forest, #234039);
  color: #fff;
  font-size: 0.95rem;
}

.designer-station-numpad__key--done:active {
  background: #1a312c;
}

input.is-numpad-active {
  border-color: var(--forest, #234039);
  box-shadow: 0 0 0 2px rgba(35, 64, 57, 0.25);
}

.designer-station-workspace--single {
  grid-template-columns: 1fr;
}

.form-actions.designer-station-active-actions {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.designer-station-active-actions form {
  display: contents;
}

.designer-station-active-actions .button {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
}

.designer-station-build-state h2 {
  margin: 0 0 0.35rem;
}

.designer-station-start-button {
  width: 100%;
}

.designer-station-reminder {
  margin: 0 0 0.75rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(181, 97, 0, 0.22);
  background: #fff4df;
  color: #8a5200;
  font-weight: 700;
}

@media (max-width: 720px) {
  .designer-station-workspace {
    grid-template-columns: 1fr;
  }

  .designer-station-product {
    grid-template-columns: 1fr;
  }

  .designer-station-product__body {
    grid-template-columns: 1fr;
  }

  .designer-station-product__media {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
  }

}

.events-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.65rem;
}

.events-calendar-head {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4b5563;
  text-align: center;
}

.events-calendar-cell {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  padding: 0.6rem;
  min-height: 112px;
}

.events-calendar-cell.is-outside {
  background: #f9fafb;
}

.events-calendar-cell header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.45rem;
}

.events-capacity {
  font-size: 0.66rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
}

.events-capacity-open {
  background: #dcfce7;
  color: #166534;
}

.events-capacity-full {
  background: #fef3c7;
  color: #92400e;
}

.events-capacity-overbooked {
  background: #fee2e2;
  color: #991b1b;
}

.events-day-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.events-day-list li a {
  font-weight: 600;
}

.events-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.events-photo-item {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 0.4rem;
  background: #fff;
}

.events-photo-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  margin-bottom: 0.4rem;
}

.events-photo-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.events-photo-action,
.events-photo-action:visited {
  border: 1px solid #e2d9ce;
  background: #fffaf3;
  color: #5a5147;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.events-photo-action svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.events-photo-action:hover {
  border-color: #c9bfb3;
  color: #3f352b;
  transform: translateY(-1px);
}

.events-photo-action:focus-visible {
  outline: 2px solid #2d6a4f;
  outline-offset: 2px;
}

.events-photo-action-form {
  display: inline-flex;
}

.events-photo-action-danger,
.events-photo-action-danger:visited {
  color: #9b1c1c;
  border-color: #efcaca;
  background: #fff6f6;
}

.events-photo-action-danger:hover {
  color: #7f1d1d;
  border-color: #e4a4a4;
}

.event-tabs {
  margin-top: 1.25rem;
}

.event-index-panel {
  margin-bottom: 1rem;
}

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

.event-list-segments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.event-list-segment {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid #d6cfc5;
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  color: #4b4137;
  background: #f7f1e7;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.event-list-segment-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(38, 69, 61, 0.12);
  color: inherit;
  font-size: 0.82rem;
  line-height: 1.2;
}

.event-list-segment.is-active {
  color: #fff;
  border-color: #26453d;
  background: #26453d;
}

.event-list-segment.is-active .event-list-segment-count {
  background: rgba(255, 255, 255, 0.18);
}

.event-list-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  align-items: end;
}

.event-list-filters__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* The base .admin-actions flex display turns the td into a block, which loses
   the row's vertical centering — invisible on short rows, obvious on these tall
   multi-line ones. Restore table-cell behavior and space the links manually. */
.event-list-table .admin-actions {
  white-space: nowrap;
  display: table-cell;
  vertical-align: middle;
}

.event-list-table .admin-actions > * + * {
  margin-left: 0.6rem;
}

.event-list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.event-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  background: #f2eadf;
  color: #5b4c3f;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.event-pill--accent {
  background: #e7f1ea;
  color: #1f5d47;
}

.event-pill--alert {
  background: #fff2de;
  color: #9a5d00;
}

.event-pill--dark {
  background: #243b35;
  color: #fff;
}

.event-details-shell {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
  background: linear-gradient(180deg, #fffaf2 0%, #f6efe4 100%);
}

.event-details-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  flex-wrap: wrap;
}

.event-details-copy {
  margin: 0;
}

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

.event-details-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.event-details-list div {
  border-bottom: 1px solid #ece3d7;
  padding-bottom: 0.55rem;
}

.event-details-list dt {
  color: #6a5d50;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.event-details-list dd {
  margin: 0.18rem 0 0;
  font-size: 1rem;
  font-weight: 600;
}

.event-detail-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.event-detail-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: #fffdfa;
  border: 1px solid #ece0d0;
  border-radius: var(--radius-md);
  padding: 1.15rem 1.3rem;
  box-shadow: 0 8px 22px rgba(35, 25, 15, 0.05);
}

.event-detail-card__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid #f0e7da;
}

.event-detail-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: #f4e7dc;
  color: var(--accent-dark);
  flex-shrink: 0;
}

.event-detail-card__icon svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: currentColor;
}

.event-detail-card__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent-dark);
}

.event-detail-rows {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.event-detail-rows > div {
  display: grid;
  gap: 0.15rem;
}

.event-detail-rows dt {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a7b6a;
}

.event-detail-rows dd {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--charcoal);
  overflow-wrap: anywhere;
}

.event-detail-rows__value--strong {
  font-size: 1.12rem;
  font-weight: 700;
}

.event-detail-address {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
}

.event-detail-address__name {
  font-weight: 700;
}

.event-detail-card--notes {
  margin-top: 1rem;
}

.event-detail-notes-body {
  color: var(--charcoal);
  line-height: 1.55;
}

.event-detail-notes-body p {
  margin: 0 0 0.6rem;
}

.event-detail-notes-body p:last-child {
  margin-bottom: 0;
}

.event-detail-card__edit {
  margin-left: auto;
}

.event-edit-modal-card {
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  text-align: left;
}

.event-edit-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.event-edit-modal-header .modal-title {
  margin-bottom: 0;
}

.event-edit-modal-actions {
  justify-content: flex-end;
  margin-top: 1.1rem;
}

/* The unsaved-changes strip: only ever visible after a close was attempted on a
   changed form, so it reads as a consequence of the click rather than a warning
   sitting there from the start. */
.event-edit-modal-dirty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #d9c48a;
  border-radius: 8px;
  background: #fdf6e3;
}

.event-edit-modal-dirty__message {
  margin: 0;
  font-size: 0.9rem;
  color: #5c4a1a;
}

.event-edit-modal-dirty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Add contact, Cancel and Save on ONE row: Add pinned left, the two commit actions
   right — the same margin-right:auto idiom .event-edit-modal-actions--proposal uses.
   Deliberately NOT evenly spaced: Add belongs to the list and the other two finish
   the job, and an even trio would read as three ways to finish.
   Carries both classes because `.modal-actions` is defined ~2600 lines further down
   and would otherwise win on source order. Scoped to the contacts modal; the other
   five modals keep the row they have. */
.modal-actions.event-edit-modal-actions--contacts {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0.6rem;
}

.modal-actions.event-edit-modal-actions--contacts > :first-child {
  margin-right: auto;
}

/* The app styles every input at width:100%, which makes a submit swallow the whole
   remaining row. Here it should be the size of its own label, sitting beside Cancel. */
.modal-actions.event-edit-modal-actions--contacts input[type="submit"] {
  width: auto;
}

/* Narrow: one column, Save last and full width, with Cancel between it and Add so
   the list action never sits against the commit action. A media query rather than a
   container query here because this card IS the viewport at these sizes
   (min(1040px, 96vw)) — unlike a contact row, which lives inside a sidebar. */
@media (max-width: 560px) {
  .modal-actions.event-edit-modal-actions--contacts {
    flex-direction: column;
  }

  .modal-actions.event-edit-modal-actions--contacts > :first-child {
    margin-right: 0;
  }

  .modal-actions.event-edit-modal-actions--contacts > *,
  .modal-actions.event-edit-modal-actions--contacts input[type="submit"] {
    width: 100%;
  }
}

.modal-card.event-edit-modal-card--proposal {
  max-width: 680px;
}

.event-edit-modal-actions.event-edit-modal-actions--proposal {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.event-edit-modal-actions--proposal > :first-child {
  margin-right: auto;
}

@media (max-width: 640px) {
  .event-edit-modal-actions.event-edit-modal-actions--proposal {
    align-items: stretch;
    flex-direction: column;
  }

  .event-edit-modal-actions--proposal > .button {
    width: 100%;
  }

  .event-edit-modal-actions--proposal > :first-child {
    margin-right: 0;
    order: 3;
  }

  .event-edit-modal-actions--proposal > :nth-child(2) {
    order: 2;
  }

  .event-edit-modal-actions--proposal > :last-child {
    order: 1;
  }
}

.event-edit-modal-subsection {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid #eee8df;
}

.event-edit-modal-subsection__title {
  margin: 0 0 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a7b6a;
}

.event-form-section {
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #ece3d7;
}

.event-form-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

.event-form-section > .event-section-title {
  margin: 0 0 0.9rem;
}

.event-header-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.event-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #ece3d7;
  color: #4a3f33;
  white-space: nowrap;
}

.event-status-badge--proposal_sent {
  background: #fdf0d5;
  color: #8a5a12;
}

.event-status-badge--pc_approved {
  background: #dcefe0;
  color: #1f6b3b;
}

.event-status-badge--in_production {
  background: #dbe7fb;
  color: #234b8a;
}

.event-status-badge--completed {
  background: #dfe8df;
  color: #2f5233;
}

.event-status-badge--canceled {
  background: #f4dcd8;
  color: #8a2f28;
}

.milestone-add-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.event-milestone-summary {
  margin-bottom: 0.55rem;
  color: #6b5e50;
  font-size: 0.85rem;
  font-weight: 700;
}

.event-milestone-empty {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-left: 3px solid #91aa96;
  background: #f5f8f4;
  color: #526158;
  font-size: 0.82rem;
}

.event-milestone-empty strong {
  color: #31513b;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .event-milestone-empty {
    display: grid;
    gap: 0.15rem;
  }
}

.event-milestone-list {
  overflow: visible;
  border: 1px solid #e3d8ca;
  border-radius: var(--radius-md);
  background: #fffdf9;
  box-shadow: 0 1px 2px rgba(74, 63, 51, 0.04);
}

.event-milestone-task {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid #eee6dc;
}

.event-milestone-task:last-child {
  border-bottom: 0;
  border-bottom-right-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

.event-milestone-task:first-child {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.event-milestone-task > form:first-child {
  margin: 0;
}

.event-milestone-task__content {
  min-width: 0;
}

.event-milestone-task__checkbox {
  display: inline-grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  padding: 0;
  border: 1px solid #aa9b89;
  border-radius: 0.3rem;
  background: #fff;
  color: #315c45;
  cursor: pointer;
}

.event-milestone-task--completed .event-milestone-task__checkbox {
  border-color: #537763;
  background: #537763;
  color: #fff;
}

.event-milestone-task--superseded .event-milestone-task__checkbox {
  border-color: #7b7188;
  background: #7b7188;
  color: #fff;
}

.event-milestone-task__checkbox:focus-visible,
.event-milestone-task__title:focus-visible,
.event-milestone-menu > summary:focus-visible {
  outline: 2px solid #315c45;
  outline-offset: 2px;
}

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

.event-milestone-task__heading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.event-milestone-task__title {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: #20362d;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.event-milestone-task__metadata {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0;
  margin: 0.2rem 0 0;
  color: #76695b;
  font-size: 0.8rem;
  line-height: 1.35;
}

.event-milestone-task__notes {
  margin: 0.22rem 0 0;
  overflow: hidden;
  color: #7f7265;
  font-size: 0.8rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-milestone-task__metadata span + span::before {
  content: " · ";
  color: #b2a493;
}

.event-milestone-status {
  flex: none;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #eee8df;
  color: #62584d;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.event-milestone-status--overdue {
  background: #f8ded8;
  color: #873d31;
}

.event-milestone-status--due_today {
  background: #f9e7c7;
  color: #765016;
}

.event-milestone-status--snoozed {
  background: #e5e4f5;
  color: #514a7a;
}

/* Staff reported it done from the hub; an admin confirms (it moves the event). */
.event-milestone-status--reported {
  background: #e1f0e5;
  color: #2f6b45;
}

.event-milestone-status--completed {
  background: #dfeade;
  color: #315c3a;
}

.event-milestone-status--superseded {
  background: #e8e3ed;
  color: #594d68;
}

.event-milestone-menu {
  position: relative;
  align-self: start;
}

.event-milestone-menu > summary {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  padding: 0;
  border-radius: var(--radius-sm);
  color: #76695b;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

.event-milestone-menu > summary:hover {
  background: #f2ebe2;
  color: #3e5148;
}

.event-milestone-menu > summary::-webkit-details-marker {
  display: none;
}

.event-milestone-menu__actions {
  position: absolute;
  z-index: 5;
  top: 1.5rem;
  right: 0;
  display: grid;
  min-width: 8rem;
  padding: 0.45rem;
  border: 1px solid #ded3c5;
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow);
}

.event-milestone-menu__actions form,
.event-milestone-menu__actions button {
  width: 100%;
  margin: 0;
  padding: 0.35rem 0.45rem;
  text-align: left;
}

.event-milestone-menu__actions form:last-child button {
  color: #9a352d;
}

.event-milestone-task--completed {
  background: #f8f6f1;
}

.event-milestone-task--completed .event-milestone-task__title,
.event-milestone-task--completed .event-milestone-task__metadata,
.event-milestone-task--completed .event-milestone-task__notes {
  color: #796f64;
}

.event-milestone-task--completed .event-milestone-task__title {
  text-decoration: line-through;
  text-decoration-color: #b8aea2;
}

.event-milestone-task--superseded {
  background: #f7f4f8;
}

.event-milestone-task--superseded .event-milestone-task__title,
.event-milestone-task--superseded .event-milestone-task__metadata,
.event-milestone-task--superseded .event-milestone-task__notes {
  color: #7b7180;
}

.event-milestone-completed {
  margin-top: 0.8rem;
}

.event-milestone-superseded {
  margin-top: 0.8rem;
}

.event-milestone-completed > summary {
  padding: 0.25rem 0;
  color: #62584d;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.event-milestone-superseded > summary {
  padding: 0.25rem 0;
  color: #62584d;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.event-milestone-completed[open] > summary {
  margin-bottom: 0.55rem;
}

.modal-card.event-milestone-modal-card {
  max-width: 640px;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  text-align: left;
}

.modal-card.event-milestone-modal-card--edit {
  max-width: 640px;
}

.modal-card.event-milestone-modal-card--snooze {
  max-width: 460px;
}

.event-milestone-attachments {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid #eee6dc;
}

.event-milestone-attachments .event-activity-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
}

.event-milestone-attachments .event-activity-list form {
  flex: none;
  margin: 0;
}

@media (max-width: 640px) {
  .modal-overlay[data-milestone-modal-target="modal"] {
    padding: 0.5rem;
  }

  .milestone-add-button {
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    justify-content: center;
    padding-inline: 0;
  }

  .milestone-add-button__label {
    display: none;
  }

  .event-milestone-task {
    grid-template-columns: 1.75rem minmax(0, 1fr) 2.75rem;
    align-items: start;
    gap: 0.55rem;
    padding: 0.7rem 0.55rem;
  }

  .event-milestone-task__heading {
    display: grid;
    justify-items: start;
    gap: 0.35rem;
  }

  .event-milestone-task__title {
    max-width: 100%;
  }

  .event-milestone-task__metadata {
    display: grid;
    gap: 0.08rem;
  }

  .event-milestone-task__metadata span + span::before {
    content: none;
  }

  .event-milestone-menu > summary {
    width: 2.75rem;
    height: 2.75rem;
  }

  .event-milestone-menu__actions {
    top: 2.75rem;
    max-width: calc(100vw - 1rem);
  }

  .modal-card.event-milestone-modal-card,
  .modal-card.event-milestone-modal-card--edit,
  .modal-card.event-milestone-modal-card--snooze {
    box-sizing: border-box;
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow-x: hidden;
    overflow-y: auto;
  }

  .event-milestone-attachments .event-activity-list li {
    align-items: flex-start;
    flex-direction: column;
  }
}

.event-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0;
  padding: 0 0.35rem;
  border-bottom: 1px solid #dccfbe;
}

.event-tabs-button {
  position: relative;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  color: #6b5e50;
  border-radius: 12px 12px 0 0;
  padding: 0.7rem 1rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -1px;
}

.event-tabs-button.is-active {
  background: #fffdf9;
  border-color: #dccfbe;
  color: #1f342d;
  box-shadow: 0 -1px 0 #f5ecdf inset;
}

.event-tab-panel {
  display: none;
  padding: 1rem 0 0;
}

.event-tab-panel.is-active {
  display: block;
}

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

.event-quote-stat-grid {
  margin-bottom: 1rem;
}

.event-quote-workspace-grid {
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
}

.event-staffing-submit {
  align-self: end;
}

.event-staffing-table {
  margin-top: 1rem;
}

.event-quote-callout {
  display: grid;
  gap: 0.2rem;
  margin-bottom: 0.9rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid #e6d8c8;
  border-radius: 12px;
  background: #fffaf3;
}

.event-total-stack {
  margin-top: 0.9rem;
}

.event-quote-actions {
  gap: 0.45rem;
}

.event-quote-actions--row {
  justify-content: flex-end;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.event-quote-actions-cell {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle !important;
}

.event-quote-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: #7a7066;
  cursor: grab;
  user-select: none;
}

.event-quote-drag-handle:active {
  cursor: grabbing;
}

.event-quote-icon-button,
.event-quote-icon-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.event-quote-icon-button {
  min-width: 2rem;
}

.event-quote-icon-link {
  color: #5a5148;
}

.event-quote-icon-button:hover,
.event-quote-icon-button:focus-visible,
.event-quote-icon-link:hover,
.event-quote-icon-link:focus-visible {
  background: rgba(180, 91, 63, 0.1);
  color: var(--accent-dark);
  box-shadow: inset 0 0 0 1px rgba(180, 91, 63, 0.18);
  transform: translateY(-1px);
}

.event-quote-icon-link--danger:hover,
.event-quote-icon-link--danger:focus-visible {
  background: rgba(162, 43, 43, 0.1);
  color: #8f2b2b;
  box-shadow: inset 0 0 0 1px rgba(162, 43, 43, 0.18);
}

.event-quote-icon-button--primary:hover,
.event-quote-icon-button--primary:focus-visible {
  background: var(--accent-dark);
  color: var(--dust);
  box-shadow: 0 10px 20px rgba(140, 63, 39, 0.2);
}

.event-quote-icon-button::after,
.event-quote-icon-link::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  transform: translate(-50%, 0.15rem);
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  background: rgba(31, 29, 26, 0.92);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 8;
}

.event-quote-icon-button:hover::after,
.event-quote-icon-button:focus-visible::after,
.event-quote-icon-link:hover::after,
.event-quote-icon-link:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* A label or cell that explains its own arithmetic on hover. */
.event-calc-tooltip {
  position: relative;
  cursor: help;
  text-decoration: underline dotted rgba(31, 29, 26, 0.4);
  text-underline-offset: 3px;
}

.event-calc-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  transform: translate(-50%, 0.15rem);
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  background: rgba(31, 29, 26, 0.92);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
  z-index: 8;
}

.event-calc-tooltip:hover::after,
.event-calc-tooltip:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.event-line-item-editor-reveal {
  animation: eventLineItemEditorReveal 0.22s ease-out;
  transform-origin: top center;
}

@keyframes eventLineItemEditorReveal {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.995);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-line-item-editor-reveal {
    animation: none;
  }
}

.event-quote-builders {
  display: grid;
  gap: 1rem;
}

.event-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.event-section-title {
  margin: 0;
}

.event-subsection-title {
  margin-top: 0;
}

.event-note-tight {
  margin-top: 0;
}

.event-fulfillment-stale {
  padding: 0.6rem 0.8rem;
  border-left: 3px solid #9a5d00;
  background: #fff2de;
  color: #5a3a00;
}

.event-spacing-sm {
  margin-bottom: 1rem;
}

.event-panel-offset {
  margin-top: 1rem;
}

.event-line-item-name {
  max-width: 240px;
  overflow-wrap: anywhere;
}

.event-quote-table th,
.event-quote-table td,
.event-materials-table th,
.event-materials-table td {
  vertical-align: top;
}

.event-suggested-price {
  margin-top: 0.5rem;
  margin-bottom: 0.55rem;
}

.event-inline-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.event-inline-actions--material-row {
  flex-wrap: nowrap;
}

.event-inline-actions input[type="number"] {
  width: 7.5rem;
}

.event-inline-save-icon {
  min-width: 2rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.event-inline-save-icon[hidden] {
  display: none;
}

.event-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.event-activity-list li {
  border: 1px solid #eee8df;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  background: #fcfaf6;
}

.settings-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.settings-tabs-button {
  border: 1px solid #d6cfc5;
  background: #f8f5ef;
  color: #2f2a24;
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.settings-tabs-button.is-active {
  background: #1f342d;
  border-color: #1f342d;
  color: #fff;
}

.settings-tab-panel {
  display: none;
}

.settings-tab-panel.is-active {
  display: block;
}

.settings-tab-panel h2 {
  margin-bottom: 0.5rem;
}

.settings-card {
  border: 1px solid #eee8df;
  border-radius: var(--radius-md);
  background: #fdfbf7;
  padding: 1.25rem 1.4rem 1.4rem;
  margin-bottom: 1.25rem;
}

.settings-card__header {
  margin-bottom: 1.1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid #eee8df;
}

.settings-card__header h3 {
  margin: 0;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.settings-card__hint {
  margin: 0.35rem 0 0;
  font-size: 0.87rem;
  line-height: 1.45;
  color: #6b6259;
}

.settings-card__badge {
  font-size: 0.68rem;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b6259;
  background: #f2ede5;
  border: 1px solid #e4dccf;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}

.settings-card__subheading {
  margin: 1.4rem 0 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid #eee8df;
  font-size: 0.95rem;
}

.settings-card > :last-child {
  margin-bottom: 0;
}

.settings-card .field:last-child {
  margin-bottom: 0;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.9rem 1.25rem;
}

.field.field--checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 0.6rem;
  row-gap: 0.2rem;
  margin-bottom: 0;
}

.field.field--checkbox input[type="checkbox"] {
  width: auto;
  margin-top: 0.2rem;
  accent-color: #1f342d;
}

.field.field--checkbox label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #2f2a24;
  cursor: pointer;
}

.field.field--checkbox .form-note {
  grid-column: 2;
  margin: 0;
  font-size: 0.82rem;
}

.hours-grid {
  display: grid;
  gap: 0.5rem;
  max-width: 34rem;
}

.hours-grid .field {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0;
}

.settings-card .verification-row {
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.settings-card .verification-row input[type="email"] {
  width: auto;
  flex: 1 1 220px;
}

.settings-form-actions {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid #eee8df;
}

.settings-form-actions--top {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-top: 0;
  border-top: 0;
}

.paid-holidays-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.paid-holidays-table td {
  vertical-align: middle;
}

.settings-save-fab-wrap {
  position: fixed;
  right: 1.6rem;
  bottom: 1.5rem;
  z-index: 80;
}

.settings-save-fab {
  border-radius: 999px;
  padding: 0.75rem 1.1rem;
  box-shadow: 0 14px 28px rgba(20, 20, 20, 0.2);
}

@media (max-width: 980px) {
  .settings-save-fab-wrap {
    right: 1rem;
    bottom: 1rem;
  }

  .settings-save-fab {
    width: calc(100vw - 2rem);
    justify-content: center;
  }

  .settings-tabs {
    padding-bottom: 4.5rem;
  }
}

@media (max-width: 700px) {
  .settings-tabs-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.25rem;
  }

  .settings-tabs-nav::-webkit-scrollbar {
    display: none;
  }

  .settings-tabs-button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .settings-card {
    padding: 1rem 1rem 1.1rem;
  }

  .paid-holidays-table {
    display: block;
    overflow-x: auto;
  }

  .hours-grid .field {
    grid-template-columns: 5.5rem 1fr;
  }
}

.event-chat-window {
  max-height: 280px;
  overflow-y: auto;
}

/* A viewport-locked workspace: the page itself does not scroll, and the pane
   inside it does. That contract needs a HARD height — `body.admin-body` sets
   only `min-height: 100dvh`, so content taller than the screen used to grow the
   body instead, which handed every `height: 100%` pane below a box taller than
   the viewport. The inner pane then had nothing left to scroll, and body's
   hidden overflow put the excess out of reach entirely: content simply fell off
   the bottom of the screen with no way to get to it. */
.admin-body--viewport-workspace {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}

/* Fills the shell rather than the viewport: the shell is already the viewport
   less whatever sits above it, and asking for 100dvh here put that chrome's
   height back on the bottom of the page. */
.admin-main--viewport-workspace {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}

.event-wizard-page {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.event-wizard-sidebar {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  row-gap: 0.18rem;
  column-gap: 0;
  background: linear-gradient(180deg, #fffdfa 0%, #f7f0e7 100%);
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  border-right: 1px solid #e8dccf;
  border-radius: 0;
  padding: 0.45rem 0.4rem 0.45rem 0.35rem;
}

.event-wizard-sidebar__stepper {
  min-height: 0;
}

.event-wizard-sidebar__event-head {
  display: grid;
  gap: 0.12rem;
  padding: 0.1rem 0.15rem 0.2rem;
}

.event-wizard-sidebar__section {
  display: grid;
  gap: 0.25rem;
  flex-shrink: 0;
}

.event-wizard-sidebar__section-link {
  color: inherit;
  text-decoration: none;
}

.event-wizard-sidebar__section-link:hover {
  color: #b35b3e;
}

.event-wizard-sidebar__section.is-current .event-wizard-sidebar__section-link {
  color: #b35b3e;
}

.event-wizard-sidebar__event-head .event-section-title {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.1;
}

.event-wizard-sidebar__event-link {
  font-size: 0.75rem;
  font-weight: 700;
}

.event-wizard-sidebar__budget {
  display: grid;
  gap: 0.3rem;
  padding: 0.35rem 0.4rem;
  border: 1px solid #e4d7c9;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
}

.event-wizard-sidebar__budget-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: center;
}

.event-wizard-sidebar__budget-state {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.12rem 0.38rem;
  font-size: 0.68rem;
  font-weight: 800;
}

.event-wizard-sidebar__budget-state.is-on-track {
  background: #e8f3ec;
  color: #226247;
}

.event-wizard-sidebar__budget-state.is-over {
  background: #fde8e3;
  color: #a23b20;
}

.event-wizard-sidebar__budget-list {
  display: grid;
  gap: 0.22rem;
  margin: 0;
}

.event-wizard-sidebar__budget-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem;
  align-items: baseline;
}

.event-wizard-sidebar__budget-list dt,
.event-wizard-sidebar__budget-list dd {
  margin: 0;
}

.event-wizard-sidebar__budget-list dt {
  color: #6b6259;
  font-size: 0.76rem;
}

.event-wizard-sidebar__budget-list dd {
  font-size: 0.82rem;
  font-weight: 700;
  color: #2f2924;
}

.event-wizard-sidebar__budget-list dd.is-on-track {
  color: #226247;
}

.event-wizard-sidebar__budget-list dd.is-over {
  color: #a23b20;
}

.event-wizard-sidebar__context {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 0;
  overflow-y: auto;
}

.event-wizard-sidebar__readout {
  display: grid;
  gap: 0.12rem;
  padding: 0.45rem;
  border: 1px solid #ebe0d4;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.event-wizard-sidebar__list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.4rem;
}

.event-wizard-stepper {
  display: grid;
  gap: 0;
  padding-left: 0;
}

.event-wizard-stepper__step {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 0.38rem;
  align-items: center;
  padding: 0.28rem 0;
}

.event-wizard-stepper__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid #d3c4b3;
  background: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  color: #8a7a6a;
}

.event-wizard-stepper__number {
  line-height: 1;
}

.event-wizard-stepper__check {
  color: #245540;
  font-size: 0.72rem;
  line-height: 1;
}

.event-wizard-stepper__step.is-complete .event-wizard-stepper__marker {
  border-color: #4a8a6a;
  background: #e8f3ec;
  color: #245540;
}

.event-wizard-stepper__step.is-current .event-wizard-stepper__marker {
  border-color: #26453d;
  background: #26453d;
  color: #fff;
}

.event-wizard-stepper__label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #6b5a4b;
}

.event-wizard-stepper__step.is-complete .event-wizard-stepper__label a {
  color: #245540;
  text-decoration: none;
}

.event-wizard-stepper__step.is-complete .event-wizard-stepper__label a:hover {
  text-decoration: underline;
}

.event-wizard-stepper__step.is-current .event-wizard-stepper__label {
  color: #26453d;
  font-weight: 800;
}

.event-wizard-stepper__connector {
  position: absolute;
  top: 26px;
  left: 11px;
  width: 2px;
  height: calc(100% - 8px);
  background: #e3d5c6;
}

.event-wizard-stepper__step.is-complete .event-wizard-stepper__connector {
  background: #c8ddcf;
}

.event-wizard-step-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.event-wizard-step-heading h2 {
  margin: 0;
  font-size: 1.05rem;
}

.event-wizard-step-heading__aside {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.event-wizard-step-heading__aside .form-note {
  margin: 0;
}

.event-wizard-main .button.event-wizard-step-heading__action {
  padding: 0.22rem 0.7rem;
  font-size: 0.8rem;
}

.event-wizard-details-block {
  margin: 0.1rem 0 0.3rem;
}

.event-wizard-details-block__summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5c4b3d;
  padding: 0.25rem 0;
}

.event-wizard-details-block > .form-grid {
  padding-left: 0.4rem;
  border-left: 2px solid #e3d5c6;
}

.form-grid--compact {
  gap: 0.3rem;
}

.event-wizard-workspace {
  display: grid;
  grid-template-columns: minmax(248px, 282px) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  min-height: 0;
  height: 100%;
}

.event-wizard-content {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.55rem;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 0.4rem 0.5rem 0.4rem 0.35rem;
}

.event-wizard-eyebrow {
  margin: 0 0 0.35rem;
  color: #8a5d4f;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-wizard-step-strip {
  display: grid;
  gap: 0.4rem;
}

.event-wizard-step-strip--top {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: min(100%, 340px);
}

.event-wizard-content > .admin-header {
  justify-content: flex-end;
  margin-bottom: 0;
}

.event-wizard-content > .admin-header .admin-header-actions {
  gap: 0.4rem;
  align-items: center;
}

.event-wizard-step-chip {
  border: 1px solid #e3d5c6;
  border-radius: 11px;
  padding: 0.42rem 0.56rem;
  background: rgba(255, 255, 255, 0.72);
  color: #6b5647;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.event-wizard-step-chip.is-current {
  border-color: #26453d;
  background: #26453d;
  color: #fff;
}

.event-wizard-step-chip.is-complete:not(.is-current) {
  border-color: #c8ddcf;
  background: #eef6f1;
  color: #245540;
}

.event-wizard-template-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  padding-right: 0.05rem;
}

.event-wizard-template {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.42rem;
  align-items: start;
  padding: 0.4rem 0.44rem;
  border: 1px solid #ebe0d4;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.event-wizard-template.is-current {
  border-color: #b35b3e;
  box-shadow: 0 0 0 1px rgba(179, 91, 62, 0.12);
  background: #fff7f0;
}

.event-wizard-template__body {
  min-width: 0;
}

.event-wizard-template__status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.1rem 0.34rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: #efe7dc;
  color: #655244;
}

.event-wizard-template__status.is-yes {
  background: #e8f3ec;
  color: #226247;
}

.event-wizard-template__status.is-no {
  background: #f2ece4;
  color: #6d5a49;
}

.event-wizard-template__status.is-maybe {
  background: #fff2de;
  color: #9a5d00;
}

.event-wizard-main {
  display: grid;
  gap: 0.4rem;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  align-content: start;
  padding: 0.1rem 0.15rem 0.1rem 0;
}

.event-wizard-item-hero {
  display: block;
  padding: 0.25rem 0.6rem;
  border: 1px solid #e5d8cb;
  border-radius: 10px;
  background: #fffaf3;
  text-align: center;
}

.event-wizard-item-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
}

.event-wizard-item-hero__title {
  min-width: 0;
}

.event-wizard-item-hero__nav {
  min-width: 0;
}

.event-wizard-item-hero__nav--prev {
  justify-self: start;
}

.event-wizard-item-hero__nav--next {
  justify-self: end;
}

.event-wizard-item-hero__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.28rem;
  align-self: start;
}

.event-wizard-item-hero__facts div {
  min-width: 110px;
  padding: 0.3rem 0.38rem;
  border: 1px solid #eadccd;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.88);
}

.event-wizard-item-hero__facts strong {
  display: block;
  margin-top: 0.08rem;
  font-size: 0.88rem;
}

.event-wizard-nav-row {
  display: flex;
  justify-content: space-between;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

.event-wizard-segmented {
  display: flex;
  width: 100%;
  border: 1px solid #b5a392;
  border-radius: 8px;
  overflow: hidden;
  background: #f4ede4;
}

.event-wizard-segmented__option {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.5rem;
  border: 0;
  border-right: 1px solid #d3c4b3;
  background: transparent;
  color: #5c4b3d;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  min-width: 0;
  white-space: nowrap;
}

.event-wizard-segmented__option:last-child {
  border-right: 0;
}

.event-wizard-segmented__option:hover {
  background: #ede6db;
}

.event-wizard-segmented__option.is-selected {
  background: #26453d;
  color: #fff;
}

.event-wizard-segmented__option.is-selected span {
  color: inherit;
}

.event-wizard-segmented__option.is-selected:hover {
  background: #1f3a33;
}

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

.event-wizard-inline-note {
  margin: 0.2rem 0 0;
  padding: 0.38rem 0.46rem;
  border-radius: 9px;
  background: #f5efe7;
  color: #5b4c3f;
  font-weight: 600;
  font-size: 0.8rem;
}

.event-wizard-line-item-panel {
  display: grid;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid #ddd0c1;
  border-radius: 9px;
  background: #faf6ef;
}

.event-wizard-two-up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
  align-items: start;
}

.event-wizard-custom-items {
  display: grid;
  gap: 0.4rem;
}

.event-wizard-custom-items__row-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.event-wizard-custom-items__row-actions form {
  display: inline;
}

.event-wizard-custom-items__row-actions button.text-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.event-wizard-assignment-list {
  display: grid;
  gap: 0.4rem;
}

.event-wizard-assignment-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 280px);
  gap: 0.4rem;
  align-items: center;
  padding: 0.35rem 0.45rem;
  border: 1px solid #e5d9cc;
  border-radius: 9px;
  background: #fffdfa;
}

.event-wizard-main .field {
  margin-bottom: 0.3rem;
}

.event-wizard-main .form-grid {
  gap: 0.3rem;
}

.event-wizard-main .form-actions {
  margin-top: 0.25rem;
  gap: 0.3rem;
}

.event-wizard-main h2,
.event-wizard-main h3,
.event-wizard-sidebar h2,
.event-wizard-sidebar h3 {
  margin-bottom: 0.05rem;
}

.event-wizard-main p.form-note,
.event-wizard-sidebar p.form-note {
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 980px) {
  /* Narrow screens hand scrolling back to the page, so the cap comes off with
     the hidden overflow — otherwise the body would clip at one screen. */
  .admin-body--viewport-workspace {
    overflow: auto;
    height: auto;
  }

  .admin-main.admin-main--viewport-workspace {
    height: auto;
    overflow: visible;
    padding: 3.65rem 0.9rem 1.6rem;
  }

  .event-wizard-page,
  .event-wizard-content {
    height: auto;
    overflow: visible;
  }

  .event-wizard-content {
    padding: 0;
  }

  .designer-station-costs {
    grid-template-columns: 1fr;
  }

  .designer-station-header__actions {
    margin-left: 0;
  }

  .event-list-filters,
  .event-details-grid {
    grid-template-columns: 1fr;
  }

  .event-wizard-workspace,
  .event-wizard-two-up,
  .event-wizard-item-hero,
  .event-wizard-assignment-card {
    grid-template-columns: 1fr;
  }

  .event-wizard-sidebar {
    position: static;
    height: auto;
    max-height: none;
    overflow: visible;
    border-right: 0;
    padding: 0;
  }

  .event-wizard-segmented__option {
    padding: 0.38rem 0.35rem;
    font-size: 0.78rem;
  }

  .event-wizard-sidebar__context,
  .event-wizard-main {
    overflow: visible;
  }

  .event-wizard-stepper__connector {
    display: none;
  }

  .events-calendar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .events-calendar-head {
    display: none;
  }

  .event-quote-table {
    font-size: 0.9rem;
  }

  .event-quote-actions--row {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .event-list-filters__actions {
    display: grid;
  }

  .event-list-filters__actions .button {
    width: 100%;
  }

  .time-clock-page {
    padding-top: 1.25rem;
  }

  .event-quote-icon-button::after,
  .event-quote-icon-link::after {
    display: none;
  }

  .time-clock-header,
  .time-clock-card {
    border-radius: 14px;
    padding: 1rem;
  }

  .event-tabs-nav {
    padding: 0;
    border-bottom: none;
  }

  .event-line-item-editor-reveal {
    animation-duration: 0.16s;
  }

  .event-tabs-button {
    width: 100%;
    text-align: left;
    border: 1px solid #dccfbe;
    border-radius: 12px;
    margin-bottom: 0;
  }

  .designer-station-header__actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .event-inline-actions {
    display: grid;
    width: 100%;
  }

  .event-inline-actions input[type="number"],
  .event-inline-actions .button {
    width: 100%;
  }
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-cta {
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-lg);
  background: var(--charcoal);
  color: var(--mist);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.cart-count {
  background: var(--accent);
  color: var(--dust);
  font-size: 0.75rem;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-lg);
  min-width: 1.6rem;
  text-align: center;
}

.hero-classic {
  display: grid;
  grid-template-columns: minmax(240px, 1.2fr) minmax(280px, 0.9fr);
  gap: 2.2rem;
  align-items: center;
  margin-top: 2rem;
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.hero-media {
  position: relative;
}

.hero-image {
  width: 100%;
  height: clamp(260px, 42vw, 420px);
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid rgba(44, 40, 35, 0.1);
}

.hero-image.placeholder {
  background: linear-gradient(135deg, #f7eee5 0%, #e7d8c5 100%);
}

.hero-content h1 {
  font-size: clamp(2.6rem, 3vw, 3.4rem);
  max-width: 520px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-size: 0.75rem;
  color: var(--accent-dark);
  margin-bottom: 0.6rem;
}

.hero-lede {
  max-width: 520px;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  margin: 1.4rem 0 1rem;
  flex-wrap: wrap;
}

.hero-actions .button.ghost {
  border-color: var(--accent-dark);
  color: var(--accent-dark);
}

.home-categories {
  padding: 2.5rem 6vw 3.2rem;
  display: grid;
  gap: 2rem;
}

.home-category {
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  box-shadow: var(--shadow);
}

.home-category-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}

.home-category-header .text-link {
  margin-top: 0.2rem;
}

.home-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

.home-product-card {
  background: var(--dust);
  border-radius: var(--radius-md);
  padding: 0;
  border: 1px solid rgba(44, 40, 35, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
  min-height: 260px;
}

.home-product-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  border: none;
  display: block;
}

.home-product-photo.placeholder {
  background: linear-gradient(135deg, #f7eee5 0%, #e7d8c5 100%);
}

.home-product-card .home-product-body p {
  margin-bottom: 0;
}

.card-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1rem 1rem 0.9rem;
  color: var(--card-overlay-text);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  isolation: isolate;
}

.card-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card-overlay-surface);
  z-index: 0;
}

@supports (backdrop-filter: blur(6px)) {
  .card-overlay::before {
    backdrop-filter: blur(6px);
  }
}

.card-overlay p,
.card-overlay h3,
.card-overlay .price,
.card-overlay .text-link {
  color: inherit;
  position: relative;
  z-index: 1;
}

.card-overlay p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-overlay .text-link {
  font-size: 0.8rem;
}

.home-product-body h3 {
  margin-bottom: 0.4rem;
}

.home-product-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.home-empty {
  text-align: center;
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.footer-seo {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(44, 40, 35, 0.1);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.8rem;
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button.primary {
  background: var(--accent);
  color: var(--dust);
  box-shadow: var(--shadow);
}

.button.secondary {
  background: var(--forest);
  color: var(--dust);
}

.button.ghost {
  background: transparent;
  border-color: var(--forest);
  color: var(--forest);
}

.button.warning {
  background: #f4b740;
  border-color: #c98508;
  color: #2d1f08;
}

.admin-body .button.primary {
  background: #3d4b47;
  color: #f7f4ef;
  box-shadow: none;
}

.admin-body .button.secondary,
.admin-auth-body .button.primary {
  background: #1f2624;
  color: #f7f4ef;
}

.admin-body .button.ghost {
  border-color: #3d4b47;
  color: #3d4b47;
}

.button:hover {
  transform: translateY(-2px);
}

.hero-meta {
  display: flex;
  gap: 2.5rem;
  margin-top: 1rem;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-size: 0.9rem;
}

.meta-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.7rem;
  color: #756d63;
}

.meta-value {
  font-weight: 600;
}

.hero-card {
  background: rgba(255, 255, 255, 0.78);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.hero-card-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-lg);
  background: var(--clay);
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.card-price {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.price {
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
}

.price-note {
  font-size: 0.85rem;
  color: #6a6259;
}

.card-footnote {
  font-size: 0.9rem;
  color: #6e655c;
}

.collection,
.how {
  padding: 3.5rem 6vw 4rem;
}

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

.section-subtitle {
  max-width: 360px;
}

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

.product-card {
  padding: 1.6rem;
  border-radius: var(--radius-md);
  background: var(--dust);
  border: 1px solid rgba(44, 40, 35, 0.08);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 220px;
}

.product-card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.product-photo {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid rgba(44, 40, 35, 0.12);
}

.product-photo.placeholder {
  background: linear-gradient(135deg, #f7eee5 0%, #e7d8c5 100%);
}

.product-card.romantic {
  background: linear-gradient(140deg, #fdf8f2 0%, #f7e7dc 100%);
}

.product-card.cheerful {
  background: linear-gradient(140deg, #fff6e9 0%, #f7edd0 100%);
}

.product-card.calm {
  background: linear-gradient(140deg, #f3f7f4 0%, #dfece2 100%);
}

.product-card.earthy {
  background: linear-gradient(140deg, #f6f1ea 0%, #e7dccf 100%);
}

.product-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text-link {
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-dark);
}

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

.how-item {
  background: rgba(255, 255, 255, 0.75);
  padding: 1.8rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

.step {
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 2px;
  color: var(--accent-dark);
}

.checkout {
  padding: 3.5rem 6vw 5rem;
}

.checkout-header {
  margin-bottom: 2rem;
}

.checkout-grid {
  display: grid;
  grid-template-columns: minmax(300px, 1.1fr) minmax(320px, 1fr);
  gap: 2.5rem;
  align-items: flex-start;
}

.order-summary {
  position: sticky;
  top: 2rem;
}

.summary-card {
  background: var(--dust);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(44, 40, 35, 0.08);
}

.cart-items {
  display: grid;
  gap: 1.5rem;
}

.cart-item {
  background: #fff8f1;
  border-radius: var(--radius-md);
  border: 1px solid rgba(44, 40, 35, 0.08);
  padding: 1.25rem;
  display: grid;
  gap: 1rem;
}

.cart-item-main {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cart-item-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  align-items: center;
}

.quantity-control {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(30, 27, 24, 0.18);
  padding: 0.35rem 0.6rem;
}

.quantity-control input {
  width: 64px;
  text-align: center;
  border: none;
  padding: 0.35rem 0.2rem;
}

.quantity-btn {
  border: none;
  background: transparent;
  font-size: 1.1rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  color: var(--accent-dark);
}

.quantity-btn:hover {
  background: rgba(180, 91, 63, 0.12);
}

.cart-remove {
  display: flex;
  justify-content: flex-end;
}

.cart-totals {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid rgba(44, 40, 35, 0.1);
}

.cart-empty {
  text-align: center;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px dashed rgba(44, 40, 35, 0.2);
}

.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.addon-card {
  background: var(--dust);
  border: 1px solid rgba(44, 40, 35, 0.12);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.addon-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: rgba(35, 64, 57, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.addon-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.addon-thumb.placeholder {
  background: rgba(35, 64, 57, 0.12);
}

.addon-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.addon-name,
.addon-price {
  margin: 0;
}

.addon-name {
  font-weight: 600;
}

.addon-price {
  font-size: 0.9rem;
  color: rgba(31, 29, 26, 0.7);
}

.addon-fields .field {
  margin-bottom: 0.6rem;
}

.addon-editor {
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(44, 40, 35, 0.12);
}

.addon-editor summary {
  cursor: pointer;
  font-weight: 600;
}

.addon-editor-form {
  margin-top: 1rem;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 29, 26, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 200;
}

.modal-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  max-width: 520px;
  width: 100%;
  box-shadow: var(--shadow);
  text-align: center;
}

.modal-title {
  margin: 0 0 0.6rem;
  font-weight: 600;
  font-size: 1.2rem;
}

.modal-body {
  margin: 0 0 1.4rem;
  color: rgba(31, 29, 26, 0.75);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.event-transfer-header-button {
  width: 2.65rem;
  min-width: 2.65rem;
  padding-inline: 0;
}

.event-transfer-header-button svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: currentColor;
}

.event-transfer-modal-card,
.order-transfer-modal-card {
  text-align: left;
}

.event-transfer-modal-header,
.order-transfer-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.event-transfer-modal-header .modal-title,
.order-transfer-modal-header .modal-title {
  margin-bottom: 0.25rem;
}

.event-transfer-warning,
.order-transfer-warning {
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  background: rgba(180, 91, 63, 0.09);
  color: #6f3a28;
}

.event-transfer-modal-actions,
.order-transfer-modal-actions {
  justify-content: flex-end;
}

.order-transfer-shop-handling {
  margin-bottom: 1rem;
  padding: 0.78rem 0.9rem;
  border: 1px solid #eee8df;
  border-radius: var(--radius-sm);
  background: #fcfaf7;
}

.order-edit-modal-card {
  max-width: 620px;
  max-height: 88vh;
  overflow-y: auto;
  text-align: left;
}

.order-edit-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.order-edit-modal-header .modal-title {
  margin-bottom: 0;
}

.order-edit-modal-actions {
  justify-content: flex-end;
  margin-top: 1.1rem;
}

.order-edit-sender-panel {
  margin-bottom: 0.9rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid #eee8df;
  border-radius: var(--radius-sm);
  background: #fcfaf7;
}

.order-edit-sender-panel .field:last-child {
  margin-bottom: 0;
}

.order-edit-sender-panel .phone-order-results {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.order-transfer-shop-handling p {
  margin-bottom: 0.32rem;
  line-height: 1.35;
}

.order-transfer-shop-handling p:last-child {
  margin-bottom: 0;
}

/* A paper document embedded in an admin page. Hidden on screen; under
   @media print it is the only thing on the page (see the print block), so a
   Print button can call window.print() without leaving the page. */
.print-document {
  display: none;
}

.event-proposal-print-page {
  background: #f8f6f1;
}

.event-proposal-print-kicker {
  margin-bottom: 0.35rem;
  color: #7a6c5d;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.event-proposal-print-card {
  background: #fffdfa;
}

.event-proposal-print-page .admin-header {
  margin-bottom: 0.75rem;
}

.event-proposal-print-page .admin-header h1 {
  margin-bottom: 0.15rem;
}

.event-proposal-print-page h2 {
  margin: 0 0 0.55rem;
  font-size: 1rem;
}

.event-proposal-print-summary {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.event-proposal-print-summary > div {
  border: 1px solid #e6ded4;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.65rem;
  background: #fff;
}

.event-proposal-print-summary span {
  display: block;
  margin-bottom: 0.25rem;
  color: #7a6c5d;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-proposal-print-summary strong {
  display: block;
}

.event-proposal-print-summary p {
  margin: 0.2rem 0 0;
  color: #5f554c;
  font-size: 0.82rem;
}

.event-proposal-print-notes {
  margin-bottom: 0.9rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #e6ded4;
  background: #fffdfa;
}

.event-proposal-print-notes h2 {
  margin-top: 0;
  color: #3f3428;
  font-size: 0.95rem;
}

.event-proposal-print-notes p:last-child {
  margin-bottom: 0;
}

.event-proposal-print-totals {
  margin-top: 0.5rem;
  padding-top: 0.3rem;
  border-top: 2px solid #e6ded4;
}

.event-proposal-print-totals .admin-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: auto;
  margin: 0;
  padding: 0.08rem 0;
  font-size: 0.9rem;
  line-height: 1.15;
}

.event-proposal-print-totals .admin-total span {
  color: #5f554c;
}

.event-proposal-print-totals .admin-total strong {
  font-weight: 600;
}

.event-proposal-print-grand-total {
  margin-top: 0.12rem;
  padding-top: 0.2rem;
  border-top: 1px solid #e6ded4;
  font-size: 1rem;
}

.event-proposal-print-grand-total strong {
  font-weight: 800;
  font-size: 1.15rem;
}

@media print {
  @page {
    margin: 0.35in;
  }

  body.admin-body {
    background: #fff;
  }

  body:has(.designer-station-print-pick-list) {
    background: #fff !important;
  }

  .admin-sidebar,
  .admin-topbar,
  .admin-mobile-menu-toggle,
  .toast-stack,
  .print-actions {
    display: none !important;
  }

  .admin-main {
    margin: 0 !important;
    padding: 0 !important;
  }

  .designer-station-print-pick-list,
  .designer-station-print-pick-list .designer-station-shell {
    background: #fff !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .designer-station-print-pick-list__sheet {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  .designer-station-print-pick-list__header {
    margin-bottom: 0.25rem !important;
    padding-bottom: 0.2rem !important;
  }

  .designer-station-print-pick-list__header h1 {
    font-size: 1.25rem;
  }

  .designer-station-print-pick-list .form-note,
  .designer-station-print-pick-list .designer-station-header__meta {
    margin: 0.1rem 0 !important;
  }

  .designer-station-print-pick-list-table th,
  .designer-station-print-pick-list-table td {
    padding: 0.18rem 0.28rem !important;
  }

  .designer-station-pick-list-group__heading {
    background: #f1f1f1 !important;
    font-size: 0.68rem !important;
  }

  .designer-station-pick-list-material {
    gap: 0.35rem !important;
  }

  .designer-station-pick-list-material__image,
  .designer-station-pick-list-material__placeholder {
    height: 30px !important;
    width: 30px !important;
  }

  .designer-station-print-pick-list__line-items {
    margin-top: 0.45rem !important;
    page-break-inside: avoid;
  }

  .impersonation-banner {
    display: none !important;
  }

  .admin-page--prints-document {
    background: #fff !important;
    padding: 0 !important;
  }

  .admin-page--prints-document > :not(.print-document) {
    display: none !important;
  }

  .print-document {
    display: block;
    color: #000;
    font-size: 10.5pt;
    line-height: 1.35;
  }

  .po-print h1,
  .po-print h2 {
    margin: 0;
    color: #000;
  }

  .po-print h2 {
    margin-bottom: 0.15rem;
    font-size: 8pt;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #555;
  }

  .po-print p {
    margin: 0.1rem 0 0;
  }

  .po-print__letterhead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #000;
  }

  .po-print__shop strong {
    display: block;
    font-size: 14pt;
  }

  .po-print__shop p {
    color: #333;
  }

  .po-print__title {
    text-align: right;
  }

  .po-print__title h1 {
    font-size: 20pt;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
  }

  .po-print__number {
    font-size: 15pt;
    font-weight: 700;
  }

  .po-print__status {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid #000;
    border-radius: 999px;
    font-size: 8.5pt;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .po-print__parties {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #bbb;
  }

  .po-print__parties strong {
    display: block;
    font-size: 11.5pt;
  }

  .po-print__parties p {
    color: #333;
  }

  .po-print__changes ul {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
  }

  .po-print__notes {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid #000;
    background: #f2f2f2 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    break-inside: avoid;
  }

  .po-print__notes p {
    margin: 0;
  }

  .po-print__notes p + p {
    margin-top: 0.35rem;
  }

  .po-print h2.po-print__items-heading {
    margin-top: 1.1rem;
    break-after: avoid;
  }

  .po-print__table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.25rem;
  }

  .po-print__table thead {
    display: table-header-group;
  }

  .po-print__table th,
  .po-print__table td {
    padding: 0.3rem 0.4rem;
    border-bottom: 1px solid #ccc;
    text-align: left;
    vertical-align: top;
  }

  .po-print__table thead th {
    border-bottom: 1.5px solid #000;
    font-size: 8pt;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #333;
  }

  .po-print__table tbody tr {
    break-inside: avoid;
  }

  .po-print__group th {
    padding-top: 0.55rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid #000;
    font-size: 8.5pt;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: #fff !important;
    color: #000;
    break-after: avoid;
  }

  .po-print__check {
    width: 1.6rem;
    text-align: center !important;
  }

  .po-print__box {
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    margin-top: 0.1rem;
    border: 1.5px solid #000;
    border-radius: 2px;
  }

  .po-print__qty {
    width: 9rem;
    text-align: right !important;
    white-space: nowrap;
  }

  .po-print__qty strong {
    font-size: 12pt;
  }

  .po-print__detail {
    margin-top: 0.1rem;
    font-size: 9pt;
    color: #444;
  }

  .po-print__table tfoot td {
    border-bottom: 0;
    padding-top: 0.5rem;
    font-size: 9pt;
    color: #444;
  }

  .po-print__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin-top: 1.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid #bbb;
    font-size: 8.5pt;
    color: #555;
  }

  .admin-page.event-proposal-print-page {
    background: #fff !important;
    padding: 0;
  }

  .event-proposal-print-header,
  .event-proposal-print-card {
    box-shadow: none !important;
  }

  .event-proposal-print-card {
    background: #fff !important;
    border: 0;
    border-radius: 0 !important;
    padding: 0;
  }

  .event-proposal-print-summary > div,
  .event-proposal-print-notes,
  .event-proposal-print-table,
  .event-proposal-print-table th,
  .event-proposal-print-table td {
    border-radius: 0 !important;
  }

  .event-proposal-print-summary > div,
  .event-proposal-print-notes {
    background: #fff !important;
  }

  .event-proposal-print-header {
    margin-bottom: 0.35rem !important;
    padding-bottom: 0.35rem !important;
  }

  .event-proposal-print-summary {
    gap: 0.35rem;
    margin-bottom: 0.45rem;
  }

  .event-proposal-print-summary > div {
    padding: 0.35rem 0.45rem;
  }

  .event-proposal-print-notes {
    margin-bottom: 0.5rem;
    padding: 0.45rem 0.55rem;
  }

  .event-proposal-print-table th,
  .event-proposal-print-table td {
    padding: 0.35rem 0.45rem !important;
  }

  .event-proposal-print-table .form-note {
    margin-top: 0.12rem;
    font-size: 0.78rem;
    line-height: 1.2;
  }

  .event-proposal-print-table,
  .event-proposal-print-table tr,
  .event-proposal-print-table td,
  .event-proposal-print-table th {
    break-inside: avoid;
  }
}

.toast-stack {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1000;
  display: grid;
  gap: 0.75rem;
  justify-items: end;
  pointer-events: none;
}

.toast {
  width: min(24rem, calc(100vw - 2rem));
  background: rgba(31, 29, 26, 0.95);
  color: #f6f2ec;
  padding: 0.9rem 1.15rem;
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  opacity: 0;
  pointer-events: auto;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast--success {
  background: rgba(35, 64, 57, 0.96);
}

.toast--error {
  background: rgba(124, 44, 44, 0.97);
}

.toast .text-link {
  color: var(--mist);
}

.toast__close {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  opacity: 0.8;
}

.toast__close:hover {
  opacity: 1;
}

.product-detail {
  padding: 3.5rem 6vw 5rem;
}

.product-detail .checkout-header {
  margin-bottom: 2.5rem;
}

.product-visual .product-photo,
.product-visual .product-photo.placeholder {
  height: 460px;
  width: 100%;
  object-fit: cover;
}

.product-visual {
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  min-height: 420px;
}

.product-info {
  margin-bottom: 2rem;
}

.product-info h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.product-sku {
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #777;
  margin-bottom: 0.5rem;
}

.product-price {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
}

.product-description {
  color: #5c554d;
  line-height: 1.5;
}

.category-index,
.category-page {
  padding: 2.6rem 6vw 3.6rem;
  display: grid;
  gap: 2rem;
}

.category-hero {
  background: rgba(255, 255, 255, 0.82);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  box-shadow: var(--shadow);
  max-width: 760px;
}

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

.category-card {
  background: var(--dust);
  border-radius: var(--radius-md);
  border: 1px solid rgba(44, 40, 35, 0.08);
  padding: 1.1rem;
  display: grid;
  gap: 0.8rem;
  box-shadow: 0 18px 40px rgba(22, 19, 16, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px rgba(22, 19, 16, 0.12);
}

.category-card-photo {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid rgba(44, 40, 35, 0.12);
}

.category-card-photo.placeholder {
  background: linear-gradient(135deg, #f7eee5 0%, #e7d8c5 100%);
}

.category-header {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(220px, 0.7fr);
  gap: 1.4rem;
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  box-shadow: var(--shadow);
}

.category-header-photo {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid rgba(44, 40, 35, 0.12);
}

.category-header-photo.placeholder {
  background: linear-gradient(135deg, #f7eee5 0%, #e7d8c5 100%);
}

.category-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6b6259;
}

.breadcrumb-separator {
  color: #9a9187;
}

.subcategory-section {
  display: grid;
  gap: 1.1rem;
}

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

.subcategory-card {
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-md);
  border: 1px solid rgba(44, 40, 35, 0.08);
  padding: 1rem;
  display: grid;
  gap: 0.75rem;
  box-shadow: 0 18px 40px rgba(22, 19, 16, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.subcategory-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(22, 19, 16, 0.12);
}

.subcategory-photo {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(44, 40, 35, 0.12);
}

.subcategory-photo.placeholder {
  background: linear-gradient(135deg, #f7eee5 0%, #e7d8c5 100%);
}

.category-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}

@media (max-width: 980px) {
  .category-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .category-products {
    grid-template-columns: 1fr;
  }
}

.category-empty {
  text-align: center;
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.summary-label {
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #6d655d;
  margin-bottom: 0.25rem;
}

.summary-value {
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.summary-note {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #5c554d;
}

.checkout-form {
  background: rgba(255, 255, 255, 0.8);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.checkout-split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.account-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.account-actions {
  margin-top: 1.5rem;
}

.recipient-list {
  display: grid;
  gap: 1.2rem;
}

.recipient-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-md);
  border: 1px solid rgba(44, 40, 35, 0.1);
  padding: 1.2rem;
  display: grid;
  gap: 0.6rem;
}

.recipient-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.05rem;
}

.recipient-badge {
  background: rgba(35, 64, 57, 0.1);
  color: var(--forest);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-lg);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.recipient-meta {
  display: grid;
  gap: 0.25rem;
  color: #5b5650;
  font-size: 0.95rem;
}

.recipient-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
}

.form-section {
  margin-bottom: 2.2rem;
}

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

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.radio-group.horizontal {
  flex-direction: row;
  gap: 1.5rem;
  align-items: center;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.radio-option label {
  margin-bottom: 0;
  cursor: pointer;
}

label {
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6b6259;
}

input,
select,
textarea {
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(30, 27, 24, 0.2);
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-size: 0.95rem;
  background: #fff;
  width: 100%;
}

.week-picker {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
}

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

.week-nav {
  border: 1px solid rgba(30, 27, 24, 0.16);
  background: #fff;
  color: var(--accent-dark);
  border-radius: var(--radius-lg);
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.week-nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.week-nav:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(24, 20, 16, 0.12);
}

.week-day {
  display: grid;
  gap: 0.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(30, 27, 24, 0.12);
  padding: 0.55rem 0.4rem;
  background: #fff;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
}

.week-day-name {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.65rem;
  color: #6b6259;
}

.week-day-date {
  font-weight: 600;
  color: #3d3731;
}

.week-day-fee {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #b35431;
}

.week-day:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 20px rgba(24, 20, 16, 0.12);
  border-color: rgba(180, 91, 63, 0.4);
}

.week-day.selected {
  background: var(--accent);
  color: var(--dust);
  border-color: transparent;
}

.week-day.selected .week-day-name,
.week-day.selected .week-day-date {
  color: var(--dust);
}

.week-day.selected .week-day-fee {
  color: var(--dust);
}

.week-day.today {
  border-color: var(--accent);
}

.week-day:disabled {
  cursor: not-allowed;
  background: #f2ede5;
  color: #9b948a;
  border-color: rgba(30, 27, 24, 0.08);
  box-shadow: none;
  transform: none;
}

.week-day:disabled .week-day-name,
.week-day:disabled .week-day-date {
  color: #9b948a;
}

.week-day:disabled .week-day-fee {
  color: #b9b2a8;
}

@media (max-width: 600px) {
  .week-picker {
    grid-template-columns: 1fr;
  }

  .week-nav {
    justify-self: center;
  }

  .week-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .week-day {
    padding: 0.5rem 0.35rem;
  }
}

.form-actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.form-note {
  font-size: 0.9rem;
  color: #6b6259;
}

.verification-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.verification-status.is-ok {
  color: #2f6b3a;
}

.verification-status.is-error {
  color: #9b2c1c;
}

.verification-status.is-loading {
  color: #6b6259;
}

.payment-refund-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.input-prefix {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.input-prefix > span {
  color: #6b6259;
}

.input-prefix input {
  width: 6rem;
}

.order-show-payment-status {
  justify-content: flex-end;
  gap: 0.5rem;
}

.order-show-charge {
  margin-top: 1rem;
  max-width: 32rem;
}

.variant-price {
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(30, 27, 24, 0.2);
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  background: #fff9f1;
}

.alert {
  background: #f6e1d6;
  color: #7a2f1a;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
}

.alert--warning {
  background: #fbf0d5;
  color: #6b4a08;
  border: 1px solid #e6c97a;
}

.alert--warning ul {
  margin: 0.4rem 0 0.4rem 1.2rem;
  padding: 0;
}

.alert--warning p {
  margin: 0.4rem 0 0;
}

/* The staff bar is a sibling ABOVE the shell, not part of it. While the shell
   asked for a full viewport of its own, every page that renders the bar was the
   bar's height too tall — the routing board, built to fit one screen, ended
   38px past the bottom of it and scrolled. Laying the body out as a column and
   letting the shell take what is left makes the bar cost its own height and
   nothing more, whatever that height turns out to be on the day.

   A page taller than the viewport still grows the shell: flex-grow only hands
   out space that is spare. */
body.admin-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.admin-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  flex: 1 1 auto;
  min-height: 0;
}

.admin-shell.is-minimal {
  grid-template-columns: 1fr;
}

.admin-sidebar {
  background: #1f2624;
  color: #f6f3ee;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.admin-mobile-menu-toggle,
.admin-sidebar-backdrop,
.admin-sidebar-close {
  display: none;
}

.admin-mobile-menu-toggle {
  border: 1px solid #d8cdbf;
  background: #fff7ee;
  color: #3d3229;
  border-radius: 999px;
  font-weight: 600;
  padding: 0.45rem 0.75rem;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.admin-shop-select {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.8rem;
  border-radius: var(--radius-md);
}

.admin-sidebar-tools {
  display: grid;
  gap: 0.65rem;
}

.admin-shop-select .field {
  margin-bottom: 0;
}

.admin-shop-select label {
  color: #d6d0c6;
  font-size: 0.7rem;
}

.admin-global-search-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #f6f3ee;
  padding: 0.65rem 0.75rem;
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.admin-global-search-trigger:hover,
.admin-global-search-trigger:focus-visible {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.13);
  outline: none;
}

.admin-global-search-trigger kbd {
  margin-left: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.16);
  color: #d6d0c6;
  padding: 0.12rem 0.35rem;
  font: 600 0.68rem/1.2 "Work Sans", sans-serif;
}

.admin-global-search {
  width: min(44rem, calc(100vw - 2rem));
  max-width: none;
  max-height: min(46rem, calc(100dvh - 4rem));
  margin: 8vh auto auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: #261f19;
}

.admin-global-search::backdrop {
  background: rgba(18, 15, 12, 0.58);
  backdrop-filter: blur(3px);
}

.admin-global-search__panel {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  max-height: min(46rem, calc(100dvh - 4rem));
  overflow: hidden;
  border: 1px solid #ddcdbd;
  border-radius: 18px;
  background: #fffdfa;
  box-shadow: 0 28px 80px rgba(16, 13, 9, 0.34);
}

.admin-global-search__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.2rem 0.75rem;
}

.admin-global-search__eyebrow {
  margin: 0 0 0.15rem;
  color: #9a5d3c;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.admin-global-search__header h2 {
  margin: 0;
  font-size: 1.35rem;
}

.admin-global-search__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  border: 1px solid #dfd2c4;
  border-radius: 999px;
  background: #f9f1e8;
  color: #604d3e;
  font-size: 1.25rem;
  cursor: pointer;
}

.admin-global-search__input-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  margin: 0 1.2rem;
  padding: 0 0.8rem;
  border: 1px solid #cdbba9;
  border-radius: 12px;
  background: #fff;
  color: #7a6858;
  box-shadow: 0 6px 18px rgba(56, 42, 30, 0.08);
}

.admin-global-search__input-wrap:focus-within {
  border-color: #6e8f7f;
  box-shadow: 0 0 0 3px rgba(86, 124, 106, 0.14);
}

.admin-global-search__input-wrap input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0.85rem 0;
  font-size: 1rem;
}

.admin-global-search__input-wrap kbd,
.admin-global-search__footer kbd {
  border: 1px solid #d8cbbb;
  border-radius: 5px;
  background: #f6efe7;
  color: #6c594a;
  padding: 0.12rem 0.32rem;
  font: 600 0.68rem/1.2 "Work Sans", sans-serif;
}

.admin-global-search__status {
  min-height: 2rem;
  margin: 0;
  padding: 0.55rem 1.25rem 0.35rem;
  color: #796b5f;
  font-size: 0.78rem;
}

.admin-global-search__scope {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1.25rem 0;
  color: #796b5f;
  font-size: 0.75rem;
}

.admin-global-search__scope-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.75rem;
  border: 1px solid #d8cbbb;
  border-radius: 999px;
  background: #f8f1e9;
  padding: 0.2rem 0.65rem;
  color: #594a3d;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.admin-global-search__scope-toggle input {
  width: 0.9rem;
  height: 0.9rem;
  margin: 0;
  accent-color: #345546;
}

.admin-global-search__results {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0.7rem 0.7rem;
}

.admin-global-search__group + .admin-global-search__group {
  margin-top: 0.55rem;
}

.admin-global-search__group h3 {
  margin: 0;
  padding: 0.45rem 0.55rem 0.3rem;
  color: #897565;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-global-search__result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.65rem;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  color: #30271f;
  text-decoration: none;
}

.admin-global-search__result:hover,
.admin-global-search__result:focus-visible,
.admin-global-search__result.is-active {
  background: #f4ece3;
  outline: none;
}

.admin-global-search__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 9px;
  background: #e7eee9;
  color: #345546;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.admin-global-search__badge--events {
  background: #f4e7dc;
  color: #8b4f2d;
}

.admin-global-search__badge--orders {
  background: #e7edf4;
  color: #405e7a;
}

.admin-global-search__badge--contacts {
  background: #f0e8f3;
  color: #73517d;
}

.admin-global-search__badge--products {
  background: #e8f1e5;
  color: #42663b;
}

.admin-global-search__badge--materials {
  background: #f4edd9;
  color: #77602b;
}

.admin-global-search__badge--employees {
  background: #e3eef1;
  color: #35616c;
}

.admin-global-search__badge--organizations {
  background: #eee7dc;
  color: #69543a;
}

.admin-global-search__result-copy {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.admin-global-search__result-copy strong,
.admin-global-search__result-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-global-search__result-copy strong {
  font-size: 0.9rem;
}

.admin-global-search__result-copy small {
  color: #74675b;
  font-size: 0.76rem;
}

.admin-global-search__result-arrow {
  color: #9a8878;
  font-size: 1rem;
}

.admin-global-search__footer {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  border-top: 1px solid #eadfd4;
  background: #faf5ef;
  padding: 0.65rem 1.2rem;
  color: #78695d;
  font-size: 0.7rem;
}

.admin-global-search__footer span:last-child {
  margin-left: auto;
}

@media (max-width: 640px) {
  .admin-global-search {
    width: calc(100vw - 1rem);
    max-height: calc(100dvh - 1rem);
    margin-top: 0.5rem;
  }

  .admin-global-search__panel {
    max-height: calc(100dvh - 1rem);
    border-radius: 14px;
  }

  .admin-global-search__header {
    padding: 0.9rem 0.9rem 0.65rem;
  }

  .admin-global-search__input-wrap {
    margin: 0 0.9rem;
  }

  .admin-global-search__status {
    padding-left: 0.95rem;
    padding-right: 0.95rem;
  }

  .admin-global-search__footer {
    display: none;
  }
}

.theme-preview {
  margin-top: 1.5rem;
  --accent: var(--preview-primary);
  --accent-dark: var(--preview-accent);
  --forest: var(--preview-secondary);
  --mist: var(--preview-background);
  --dust: var(--preview-background);
  --charcoal: var(--preview-text);
  --radius-lg: calc(var(--preview-radius) * 1.6);
  --radius-md: var(--preview-radius);
  --radius-sm: calc(var(--preview-radius) * 0.6);
}

.theme-preview .button.primary {
  background: var(--accent);
  color: var(--dust);
  box-shadow: var(--shadow);
}

.theme-preview-card {
  background: var(--preview-background);
  color: var(--preview-text);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: 0 18px 45px rgba(18, 16, 12, 0.15);
}

.theme-preview-card h3 {
  font-family: var(--preview-heading-font) !important;
  margin-bottom: 0.6rem;
}

.theme-preview-card p {
  font-family: var(--preview-body-font);
  color: var(--preview-text);
}

.theme-preview-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.theme-preview-card .button {
  font-family: var(--preview-body-font);
}

.theme-preview-card .button.ghost {
  background: transparent;
  color: var(--preview-secondary);
  border: 1px solid var(--preview-secondary);
}

.admin-brand {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-brand-text {
  display: flex;
  flex-direction: column;
}

.admin-brand span {
  font-family: "Libre Baskerville", "Georgia", serif;
  font-size: 1.4rem;
}

.admin-brand small {
  color: #c7c2b8;
  overflow-wrap: anywhere;
}

.admin-sidebar-close {
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #f6f3ee;
  border-radius: 0.6rem;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.admin-sidebar-close:active {
  background: rgba(255, 255, 255, 0.18);
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-nav a,
.admin-nav-heading {
  color: inherit;
  font-weight: 600;
}

.admin-nav-group {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 0.8rem;
}

.admin-nav-group:first-child {
  border-top: none;
  padding-top: 0;
}

.admin-nav-heading {
  background: transparent;
  border: none;
  padding: 0.25rem 0;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 0.95rem;
  -webkit-tap-highlight-color: transparent;
}

.admin-nav-heading::after {
  content: "▾";
  font-size: 0.9rem;
  color: #c7c2b8;
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}

.admin-nav-group.is-open .admin-nav-heading::after {
  transform: rotate(0deg);
}

.admin-nav-items {
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.45rem 0 0.2rem 0.45rem;
}

.admin-nav-items a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;
  border-radius: 0.55rem;
  color: #d9d4ca;
  font-weight: 500;
  line-height: 1.35;
  -webkit-tap-highlight-color: transparent;
}

.admin-nav-items a:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
}

.admin-nav-items a.is-active {
  background: rgba(255, 255, 255, 0.13);
  color: #ffffff;
  font-weight: 600;
}

.admin-nav-group.is-open .admin-nav-items {
  display: flex;
}

.admin-footer {
  margin-top: 0.25rem;
  display: grid;
  gap: 0.6rem;
  align-items: stretch;
}

.admin-footer .button_to {
  margin: 0;
}

.admin-logout {
  background: transparent;
  color: #f6f3ee;
  border: 1px solid #5a5f5a;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  display: block;
  text-align: center;
  width: 100%;
}

.admin-badge {
  background: rgba(180, 91, 63, 0.25);
  color: #fef6ed;
  border-radius: 999px;
  font-size: 0.7rem;
  padding: 0.15rem 0.55rem;
  letter-spacing: 0.5px;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
}

/* Issue tracker: the workflow decision panel. Sits first in the detail panel and drawer —
   the two decisions and the next step have to be readable without scrolling. */
.issue-decision--awaiting {
  border: 1px solid #d8c7a8;
  background: #fffaf0;
}

.issue-decision__next {
  font-size: 1rem;
  color: #2d271f;
  margin: 0.6rem 0 0;
}

.issue-decision__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 0.35rem;
}

/* Equal weight: the rejection path must not read as the lesser option. */
.issue-decision__actions .button {
  flex: 1 1 14rem;
  justify-content: center;
  text-align: center;
}

.issue-decision__actions form {
  display: contents;
}

.issue-decision__reject {
  border-color: #c9b7a0;
}

.issue-decision__legend {
  margin-top: 0.75rem;
}

/* The pipeline strip. Reading left to right answers "where does a finished report end up". */
.issue-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  counter-reset: none;
}

.issue-flow__stage {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: #f1ede6;
  color: #8a8073;
  white-space: nowrap;
}

.issue-flow__stage[data-state="done"] {
  background: rgba(35, 64, 57, 0.12);
  color: #23413a;
}

.issue-flow__stage[data-state="current"] {
  background: #234039;
  color: #fdfbf7;
}

.issue-flow__rest {
  font-weight: 500;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.issue-rework-badge {
  display: inline-block;
  background: rgba(180, 91, 63, 0.16);
  color: #8f3a22;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.12rem 0.5rem;
  margin-bottom: 0.3rem;
}

.issue-rework-banner {
  border-left: 3px solid #b45b3f;
  background: #fdf3ee;
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  margin-top: 0.9rem;
}

.issue-rework-banner p {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: #8f3a22;
}

.issue-rework-banner blockquote {
  margin: 0;
  color: #2d271f;
}

.issue-rework-form {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e5ddd1;
}

.issue-rework-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

/* Submit inputs stretch full-width by default in the admin forms, which pushed Cancel onto
   its own line and made the pair read as two unrelated controls. */
.issue-rework-form__actions .button {
  flex: 0 1 auto;
  width: auto;
}

.issue-close-without-fix {
  margin-top: 1rem;
  border-top: 1px solid #e5ddd1;
  padding-top: 0.75rem;
}

.issue-close-without-fix summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: #6b6255;
}

/* Activity thread: attributed decision history, newest first. */
.issue-activity {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
}

.issue-activity__entry {
  border-left: 3px solid #e1d8cc;
  padding: 0.15rem 0 0.15rem 0.85rem;
}

.issue-activity__entry[data-kind="rework_requested"] {
  border-left-color: #b45b3f;
}

.issue-activity__entry[data-kind="accepted"] {
  border-left-color: #23413a;
}

.issue-activity__meta {
  margin: 0 0 0.3rem;
  font-size: 0.82rem;
  color: #6b6255;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
}

.issue-activity__meta strong {
  color: #2d271f;
}

.issue-activity__body {
  color: #2d271f;
}

.issue-attachment-grid--inline {
  margin-top: 0.5rem;
}

/* Internal notes are the team talking to itself: amber, locked, unmistakable. */
.issue-activity__entry[data-visibility="internal"] {
  border-left-color: #c9a227;
  background: #fffbea;
  border-radius: var(--radius-sm);
  padding-right: 0.6rem;
}

/* Read-only mirrors of GitLab comments carry GitLab's orange. */
.issue-activity__entry[data-origin="gitlab"] {
  border-left-color: #fc6d26;
}

.issue-note-chip {
  display: inline-block;
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
}

.issue-note-chip--internal {
  background: #f6e7b3;
  color: #7a5c00;
}

/* The note composer. Its whole job is making "who sees this" impossible to miss. */
.issue-note-composer {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e5ddd1;
}

.issue-note-composer__title {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
}

.issue-note-visibility {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border: 0;
  margin: 0.2rem 0 0;
  padding: 0;
}

.issue-note-visibility__legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: #2d271f;
  margin-bottom: 0.35rem;
  padding: 0;
}

.issue-note-visibility__option {
  /* Hard-reset the admin form cascade: a global label rule applies uppercase,
     1px letter-spacing, display:flex and block-level child spans, which
     inflated these pills until the text wrapped and clipped outside them. The
     pill owns its own typography. */
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  font-size: 0.95rem;
  line-height: 1.2;
  border: 1px solid #d9d1c3;
  border-radius: 999px;
  padding: 0.28rem 0.85rem;
  font-size: 0.85rem;
  background: #fff;
  cursor: pointer;
}

.issue-note-visibility__option input {
  /* The global `input { width: 100% }` rule inflates the radio to fill the
     whole pill, shoving the text outside it. The radio is a dot, not a field. */
  width: auto;
  margin: 0;
  flex: none;
}

.issue-note-visibility__option span {
  display: inline;
  white-space: nowrap;
}

.issue-workload {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.4rem;
  padding: 0.7rem 1.1rem;
  font-size: 0.92rem;
}

.issue-workload__stat strong,
.issue-workload__assignee strong {
  font-weight: 700;
}

.issue-workload__stat--attention strong {
  color: #a53d2a;
}

.issue-workload__window {
  color: #7d7468;
  font-size: 0.82rem;
}

.issue-note-visibility__option--public:has(input:checked) {
  background: rgba(35, 64, 57, 0.12);
  border-color: #234039;
  color: #23413a;
  font-weight: 700;
}

.issue-note-visibility__option--internal:has(input:checked) {
  background: #f6e7b3;
  border-color: #c9a227;
  color: #7a5c00;
  font-weight: 700;
}

/* One hint at a time; without :has() support both render, which is merely wordy. */
.issue-note-composer__hint {
  margin-top: 0.4rem;
}

.issue-note-composer__form:has(input[name="note[visibility]"][value="internal"]:checked) .issue-note-composer__hint--public {
  display: none;
}

.issue-note-composer__hint--internal {
  display: none;
  color: #7a5c00;
}

.issue-note-composer__form:has(input[name="note[visibility]"][value="internal"]:checked) .issue-note-composer__hint--internal {
  display: block;
}

/* The composer itself tints amber while composing an internal note. */
.issue-note-composer__form:has(input[name="note[visibility]"][value="internal"]:checked) textarea {
  background: #fffbea;
  border-color: #c9a227;
}

.issue-note-composer__actions {
  margin-top: 0.6rem;
}

.issue-note-composer__actions .button {
  flex: 0 1 auto;
  width: auto;
}

/* Editing the problem definition: collapsed and secondary, like close-without-fix. */
.issue-edit-definition {
  margin-top: 1rem;
  border-top: 1px solid #e5ddd1;
  padding-top: 0.75rem;
}

.issue-edit-definition summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: #6b6255;
}

.issue-edit-definition form {
  margin-top: 0.75rem;
}

.issue-status-group__hint {
  flex-basis: 100%;
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  color: #6b6255;
}

/* Issue tracker: urgency pills (amber/green/grey) + the header summary counts. */
.issue-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.issue-pill--urgent {
  background: rgba(180, 91, 63, 0.16);
  color: #8f3a22;
}

/* Between urgent and normal, matching AvBase's amber High badge. */
.issue-pill--high {
  background: rgba(191, 132, 32, 0.18);
  color: #7c5310;
}

.issue-pill--normal {
  background: rgba(35, 64, 57, 0.14);
  color: #23413a;
}

.issue-pill--low {
  background: rgba(31, 29, 26, 0.08);
  color: #6b6255;
}

.issue-summary {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.issue-summary-stat {
  color: #6b6255;
  font-size: 0.9rem;
}

.issue-summary-stat strong {
  color: #2d271f;
  font-size: 1.05rem;
}

.issue-view-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 1rem 0;
}

.issue-view-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  color: #51483e;
  background: #f8f5f0;
  border: 1px solid #e5ddd1;
  border-radius: var(--radius-md);
  font-size: 0.86rem;
  font-weight: 600;
}

.issue-view-nav__link strong {
  color: #2d271f;
  font-size: 1rem;
}

.issue-view-nav__link[aria-current="page"] {
  color: #ffffff;
  background: #234039;
  border-color: #234039;
}

.issue-view-nav__link[aria-current="page"] strong {
  color: inherit;
}

.issue-filters {
  padding: 0.9rem 1rem;
}

.issue-filter-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.7rem;
  align-items: end;
}

.issue-filter-form__search {
  grid-column: span 2;
}

.issue-layout-toggle {
  display: inline-flex;
  margin: 1rem 0;
  padding: 0.2rem;
  background: #ece5db;
  border-radius: var(--radius-md);
}

.issue-layout-toggle__link {
  padding: 0.5rem 1rem;
  color: #62584d;
  border-radius: calc(var(--radius-md) - 2px);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.issue-layout-toggle__link[aria-current="page"] {
  color: #ffffff;
  background: #234039;
  box-shadow: 0 1px 2px rgba(31, 29, 26, 0.15);
}

.issue-filter-form .field {
  margin: 0;
  min-width: 0;
}

/* Scoped to the fields on purpose. Unscoped, this also caught the submit button —
   an <input> like any other — and handed it width:100% with min-width:0 inside a
   flex row it shared with "Clear filters". Both then shrank below their own labels
   and "Apply filters" rendered as "App". GitLab #78. */
.issue-filter-form .field input,
.issue-filter-form .field select {
  width: 100%;
  min-width: 0;
}

/* Two buttons never fit a 9rem auto-fit track, so the actions cell claims the same
   two columns the search field does rather than overflowing its own. */
.issue-filter-form__actions {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  white-space: nowrap;
  grid-column: span 2;
}

/* Sits between the filters and the results and reports on both: how much of the
   match set this view is actually showing. */
.issue-search-summary {
  margin: 0.85rem 0 0;
  padding: 0.55rem 0.9rem;
  border-left: 3px solid #234039;
  background: #f3efe8;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  color: #4a4238;
}

.issue-search-summary strong {
  font-weight: 700;
  color: #1f1d1a;
}

.issue-search-summary a {
  font-weight: 600;
  color: #234039;
  white-space: nowrap;
}

.issue-groups,
.issue-archive__content {
  display: grid;
  gap: 1.25rem;
}

.issue-status-group__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.55rem;
  padding: 0 0.15rem;
}

.issue-status-group__header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.issue-status-group__header span,
.issue-archive > summary span:last-child {
  color: #756b5f;
  font-size: 0.82rem;
}

.issue-card-list {
  display: grid;
  gap: 0.55rem;
}

.issue-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
  background: #ffffff;
  border: 1px solid #e7dfd4;
  border-left: 3px solid #b9aa94;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(45, 39, 31, 0.04);
}

.issue-card__main {
  min-width: 0;
}

.issue-card__eyebrow,
.issue-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  align-items: center;
  color: #756b5f;
  font-size: 0.76rem;
}

.issue-card h3 {
  margin: 0.3rem 0 0;
  font-size: 1rem;
  line-height: 1.3;
}

.issue-card__title {
  color: #2d271f;
  text-decoration: none;
}

.issue-card__title:hover {
  text-decoration: underline;
}

.issue-card__description {
  margin: 0.25rem 0 0;
  color: #62584d;
  font-size: 0.86rem;
  line-height: 1.4;
}

.issue-card__meta {
  margin-top: 0.45rem;
}

.issue-card__meta strong {
  color: #51483e;
  font-weight: 600;
}

.issue-card__side {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}

.issue-gitlab-badge {
  display: grid;
  gap: 0.1rem;
  padding: 0.4rem 0.55rem;
  background: #f7f4ef;
  border-radius: var(--radius-sm);
  font-size: 0.76rem;
  text-align: right;
}

.issue-gitlab-badge small {
  color: #756b5f;
}

.issue-gitlab-badge__error,
.issue-sync-error {
  color: #8f3a22 !important;
}

.issue-gitlab-badge__warning,
.issue-sync-warning {
  color: #7c5310 !important;
}

.issue-archive {
  border: 1px solid #ddd4c7;
  border-radius: var(--radius-md);
  background: #f8f5f0;
}

.issue-archive > summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
  font-weight: 700;
}

.issue-archive__content {
  padding: 0.25rem 0.75rem 0.75rem;
}

.issue-empty-state {
  padding: 2.5rem 1.25rem;
  border: 1px dashed #d8cdbd;
  border-radius: var(--radius-md);
  background: #faf8f4;
  text-align: center;
}

.issue-empty-state h2 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}

.issue-empty-state p {
  margin: 0 auto 1rem;
  max-width: 34rem;
  color: #6b6255;
}

.issue-board-switcher {
  display: none;
}

.issue-kanban {
  display: grid;
  grid-auto-columns: minmax(17rem, 1fr);
  grid-auto-flow: column;
  gap: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  background: #f0ede8;
  border: 1px solid #e1d8cc;
  border-radius: var(--radius-md);
}

.issue-kanban__column {
  min-width: 0;
  padding: 0.5rem;
  background: transparent;
  border: 0;
  border-right: 1px solid #e1d8cc;
  border-radius: 0;
}

.issue-kanban__column:nth-child(1) {
  background: #fffaf2;
}

.issue-kanban__column:nth-child(2) {
  background: #eee8df;
}

.issue-kanban__column:nth-child(3) {
  background: #ddd8d2;
}

.issue-kanban__column:nth-child(4) {
  background: #cbc9ca;
}

.issue-kanban__column:last-child {
  border-right: 0;
}

.issue-kanban .issue-card-list {
  min-height: 8rem;
}

.issue-kanban__empty {
  display: none;
  margin: 1rem 0;
  color: #8a7e70;
  font-size: 0.8rem;
  text-align: center;
}

.issue-kanban .issue-card-list:not(:has(.issue-card)) .issue-kanban__empty {
  display: block;
}

.issue-kanban .issue-card {
  position: relative;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  align-items: start;
  padding: 0.75rem;
}

.issue-card__drag-handle {
  position: absolute;
  top: 0.4rem;
  right: 0.45rem;
  padding: 0.2rem 0.35rem;
  color: #756b5f;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: grab;
  font-weight: 700;
  letter-spacing: -0.12rem;
}

.issue-card__drag-handle:hover,
.issue-card__drag-handle:focus-visible {
  color: #234039;
  background: #e7e0d5;
}

.issue-card--ghost {
  opacity: 0.45;
}

.issue-card[aria-busy="true"] .issue-card__drag-handle {
  cursor: wait;
  pointer-events: none;
}

.issue-kanban .issue-card__eyebrow {
  margin-top: 0.55rem;
}

.issue-kanban .issue-card h3 {
  padding-right: 2rem;
}

.issue-kanban .issue-card__side {
  display: grid;
  gap: 0.4rem;
  width: 100%;
}

.issue-groups--archive {
  margin-top: 1rem;
}

.issue-compact-list {
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e1d8cc;
  border-radius: var(--radius-md);
}

.issue-list-row {
  display: grid;
  grid-template-columns: auto minmax(14rem, 2fr) minmax(7rem, 0.8fr) minmax(8rem, 1fr) minmax(7rem, 0.8fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #eee7dd;
  font-size: 0.8rem;
}

.issue-list-row:last-child {
  border-bottom: 0;
}

.issue-list-row__summary {
  display: grid;
  min-width: 0;
}

.issue-list-row__title {
  overflow: hidden;
  color: #2d271f;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issue-list-row__summary > span,
.issue-list-row__person,
.issue-list-row__shop,
.issue-list-row time {
  overflow: hidden;
  color: #756b5f;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.issue-list-row__status {
  color: #51483e;
  font-weight: 600;
}

.issue-drawer {
  width: min(47rem, 92vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  background: #f7f4ef;
  border: 0;
  box-shadow: -1rem 0 3rem rgba(31, 29, 26, 0.24);
}

.issue-drawer[open] {
  animation: issue-drawer-enter 180ms ease-out;
}

.issue-drawer[open]::backdrop {
  animation: issue-drawer-backdrop-enter 180ms ease-out;
}

@keyframes issue-drawer-enter {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes issue-drawer-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.issue-drawer::backdrop {
  background: rgba(31, 29, 26, 0.48);
}

.issue-drawer__panel {
  min-height: 100%;
}

.issue-drawer__header {
  position: sticky;
  z-index: 2;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(247, 244, 239, 0.97);
  border-bottom: 1px solid #ddd4c7;
}

.issue-drawer__header h2 {
  margin: 0.2rem 0 0;
  font-size: 1.45rem;
}

.issue-drawer__kicker {
  display: inline;
  margin: 0 0 0 0.4rem;
  color: #756b5f;
  font-size: 0.8rem;
}

.issue-drawer__close {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  color: #51483e;
  background: #ece5db;
  border: 0;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
}

.issue-drawer__content {
  display: grid;
  gap: 1rem;
  padding: 1rem 1.25rem 2rem;
}

.issue-drawer__content .admin-panel {
  margin: 0;
}

.issue-drawer__loading,
.issue-drawer__failure {
  margin: 3rem 1.25rem;
  text-align: center;
}

.issue-drawer__save-error {
  color: #8f3a22;
  font-weight: 600;
}

@media (max-width: 1100px) {
  .issue-filter-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .issue-filter-form__search,
  .issue-filter-form__actions {
    grid-column: span 2;
  }
}

@media (max-width: 700px) {
  .issue-view-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .issue-filter-form__search,
  .issue-filter-form__actions {
    grid-column: auto;
  }

  .issue-filter-form__actions,
  .issue-filter-form__actions .button {
    width: 100%;
  }

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

  .issue-card__side {
    justify-content: space-between;
  }

  .issue-list-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
  }

  .issue-list-row__summary {
    grid-column: 2 / 4;
    grid-row: 1;
  }

  .issue-list-row > .issue-pill {
    grid-column: 1;
    grid-row: 1;
  }

  .issue-list-row__status {
    grid-column: 2;
  }

  .issue-list-row time {
    grid-column: 3;
  }

  .issue-list-row__person,
  .issue-list-row__shop {
    display: none;
  }

  .issue-gitlab-badge {
    text-align: left;
  }

  .issue-board-switcher {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin-bottom: 0.7rem;
  }

  .issue-board-switcher a {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    padding: 0.6rem;
    color: #51483e;
    background: #f5f1eb;
    border: 1px solid #ddd4c7;
    border-radius: var(--radius-sm);
    text-align: left;
    text-decoration: none;
  }

  .issue-board-switcher a[aria-pressed="true"] {
    color: #ffffff;
    background: #234039;
    border-color: #234039;
  }

  .issue-kanban {
    display: block;
    overflow: visible;
  }

  .issue-kanban__column {
    display: none;
  }

  .issue-kanban__column[data-mobile-selected="true"] {
    display: block;
    border-right: 0;
  }

  .issue-card__drag-handle {
    display: none;
  }

  .issue-drawer {
    width: 100vw;
  }

  .issue-drawer__header,
  .issue-drawer__content {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .issue-drawer,
  .issue-card {
    scroll-behavior: auto;
    transition: none;
    animation: none;
  }
}

.issue-screenshot-previews,
.issue-attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.issue-screenshot-preview,
.issue-attachment-card {
  display: grid;
  align-content: start;
  gap: 0.65rem;
}

.issue-screenshot-preview__image,
.issue-attachment-card__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #f6f3ee;
  border: 1px solid rgba(31, 29, 26, 0.12);
  border-radius: var(--radius-md);
}

.issue-attachment-card__image-link {
  display: block;
}

.issue-attachment-card .form-note {
  margin: 0;
}

.admin-list-divider {
  color: #cbbfae;
  margin: 0 0.25rem;
}

/* Show which filter is actually on — without this the issue list gives no
   feedback and "All open" looks identical to a status filter. */
.admin-list-actions .text-link[aria-current="page"] {
  font-weight: 600;
  color: #2d271f;
  text-decoration-thickness: 2px;
}

/* The ladybug (.report-problem-button) lives in report_problem_button.css — its
   own sheet because the mobile layouts, which don't load this bundle, mount it
   too. */

/* The report form mirrors AvBase's: sentence-case labels in the body face rather than
   the app-wide uppercase field style, plus a red required marker. Scoped to this form
   only — the global `label` rule is uppercase on purpose everywhere else. */
.issue-report-form label {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: #2d271f;
}

.issue-report-form .field-required {
  color: #b3261e;
  border: 0;
  text-decoration: none;
  cursor: help;
}

/* Help text under a field: small and quiet, like AvBase's. Without this these read
   as body paragraphs, because .form-note is only styled under specific parents
   elsewhere in this sheet and has no base rule. */
.issue-report-form .form-note {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: #6b6259;
}

.issue-report-form .form-note + .form-note {
  margin-top: 0.15rem;
}

/* Impersonation is powerful and works in production, so the banner is loud,
   sticky, and follows you onto every screen until you explicitly stop. */
.impersonation-banner {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
  background: #8f3a22;
  color: #fff;
  padding: 0.6rem 1rem;
}

.impersonation-banner__label {
  font-weight: 600;
  line-height: 1.35;
}

.impersonation-banner form {
  margin: 0;
}

.impersonation-banner__stop {
  background: #fff;
  color: #8f3a22;
  border: none;
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.impersonation-banner__stop:hover,
.impersonation-banner__stop:focus {
  background: #ffe9e0;
}

.qualification-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.2rem;
}

.qualification-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.55rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(35, 64, 57, 0.16);
  background: #f2ece3;
  color: #234039;
}

.qualification-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95rem;
  height: 0.95rem;
}

.qualification-pill__icon svg {
  width: 100%;
  height: 100%;
}

.qualification-pill__label {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
}

/* Qualifications as checkboxes (admin/qualifications/_picker): the employee,
 * product and work type forms. One box per qualification, so ticking one
 * never clears another; on a phone the options stack one to a row. */
.qualification-picker {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
  min-width: 0;
}

.field > .qualification-picker {
  margin-bottom: 0;
}

.qualification-picker__legend {
  padding: 0;
  margin-bottom: 0.4rem;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6b6259;
}

.qualification-picker__group + .qualification-picker__group {
  margin-top: 0.75rem;
}

.qualification-picker__heading {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4a433c;
}

.qualification-picker__options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.45rem;
}

label.qualification-picker__option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid #e2d7c8;
  border-radius: var(--radius-sm);
  background: #fff;
  color: #2f2a24;
  font-size: 0.92rem;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

label.qualification-picker__option:has(.qualification-picker__input:checked) {
  border-color: #8fb79a;
  background: #eef5ef;
  color: #1f4a2c;
}

label.qualification-picker__option:has(.qualification-picker__input:focus-visible) {
  outline: 2px solid #1f5fbf;
  outline-offset: 2px;
}

.qualification-picker__input[type="checkbox"] {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  padding: 0;
  accent-color: #1f342d;
}

.qualification-picker__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.qualification-picker__name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.qualification-picker__note,
.qualification-picker__empty {
  margin: 0.4rem 0 0;
}

.qualification-picker__range,
.qualification-picker__shop {
  font-size: 0.8rem;
  font-weight: 400;
  color: #6b6259;
}

@media (max-width: 640px) {
  .qualification-picker__options {
    grid-template-columns: 1fr;
  }
}

.admin-main {
  padding: 1.6rem 3rem 2.25rem;
}

.admin-main.admin-main--viewport-workspace {
  padding: 0;
}

.admin-main--full {
  padding: 1.6rem 3.25rem 2.5rem;
}

.users-table td {
  vertical-align: top;
}

.users-person {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.users-avatar {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #e7ddd1;
  background: #f2e6d8;
}

.users-avatar--large {
  width: 5.5rem;
  height: 5.5rem;
}

.users-avatar--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: #654735;
}

.users-name {
  font-weight: 600;
  color: #1f2624;
}

.users-email {
  color: #6a6057;
  font-size: 0.85rem;
}

.users-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d9ccbc;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.78rem;
  color: #52463c;
  background: #faf4eb;
}

.users-pill--super {
  border-color: #c7b48f;
  background: #efe4d2;
}

.users-pill--wide {
  min-width: 5.4rem;
  justify-content: center;
}

.users-actions {
  white-space: nowrap;
}

.users-actions a + a {
  margin-left: 0.65rem;
}

.users-profile-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem 1.4rem;
  align-items: center;
  margin: 0 0 1.3rem;
  padding: 1rem 1.2rem;
  background: #fbf5ed;
  border: 1px solid #e9dece;
  border-radius: var(--radius-md);
}

.users-profile-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem 1rem;
  margin: 0;
}

.users-profile-meta dt {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6f655b;
  margin-bottom: 0.2rem;
}

.users-profile-meta dd {
  margin: 0;
  font-weight: 600;
  color: #2b231c;
}

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 0.5rem;
}

.admin-header-actions {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  align-items: center;
}

/* button_to renders a wrapping form; as a flex child it must not add height or
   width of its own, or the button it holds sits a few pixels off its siblings. */
.admin-header-actions .button_to {
  display: flex;
  margin: 0;
}

/* Destructive actions. Three screens already ask for this class in their markup
   and, until now, silently got the plain button. */
.button.danger {
  background: #fdf3f1;
  border-color: #d8a99b;
  color: #9b2c1c;
}

.button.danger:hover,
.button.danger:focus-visible {
  background: #f7e3de;
  border-color: #9b2c1c;
  color: #7d2416;
}

.admin-header > div:first-child > p,
.admin-header > div:first-child > .form-note,
.admin-page-header > p,
.admin-page-header > .form-note {
  margin: 0.1rem 0 0;
}

.admin-header .button,
.admin-header-actions .button,
.admin-page-header .button {
  padding: 0.42rem 0.78rem;
}

.admin-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1rem;
}

.admin-page-header h1 {
  margin: 0;
}

.shift-grid__header-actions {
  gap: 0.5rem;
  flex-wrap: wrap;
}

.shift-grid__header {
  align-items: stretch;
  flex-direction: column;
}

.shift-grid__view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid #d9ccbc;
  border-radius: 999px;
  background: #f4ece4;
}

.shift-grid__view-button {
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #5a4a3a;
  text-decoration: none;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.shift-grid__view-button:hover,
.shift-grid__view-button:focus-visible {
  color: #3e3124;
  background: rgba(255, 255, 255, 0.6);
  outline: none;
}

.shift-grid__view-button.is-active {
  background: #fffdfa;
  color: #8c3f27;
  box-shadow: 0 4px 10px rgba(28, 24, 20, 0.1);
}

.shift-grid__header-actions .button {
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  font-size: 0.82rem;
}

/* "Includes 6 Lakeside drafts" hangs under the approve button. Lining the row
   up on its text keeps that button level with its neighbours. */
.shift-grid__approve {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

.shift-grid__header-actions:has(.shift-grid__approve-note) {
  align-items: baseline;
}

.shift-grid__approve-note {
  padding: 0 0.2rem;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #6b4a08;
}

/* As wide as what they say, so they read as two short lines, not banners. */
.shift-grid__draft-notices {
  display: grid;
  justify-items: start;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
}

.shift-grid__draft-notice.alert {
  max-width: 100%;
  margin: 0;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.shift-grid__period-nav {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #243a32;
  border-radius: 8px;
}

.shift-grid__period-nav .button {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.shift-grid__period-nav .button + .button {
  border-left: 1px solid #243a32;
}

.shift-grid__title-row {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.shift-grid__help-icon {
  border: 1px solid #d9ccbc;
  background: #fbf5ed;
  color: #5a4a3a;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  padding: 0;
}

.shift-grid__help-tooltip {
  position: relative;
  display: inline-flex;
}

.shift-grid__help-bubble {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  width: min(24rem, 76vw);
  background: #2c231a;
  color: #fff8ee;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  font-size: 0.75rem;
  line-height: 1.35;
  box-shadow: 0 14px 28px rgba(26, 19, 13, 0.25);
  z-index: 15;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.shift-grid__help-bubble ul {
  margin: 0;
  padding-left: 1rem;
}

.shift-grid__help-bubble li + li {
  margin-top: 0.25rem;
}

.shift-grid__help-bubble::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 10px;
  width: 10px;
  height: 10px;
  background: #2c231a;
  transform: rotate(45deg);
}

.shift-grid__help-tooltip:hover .shift-grid__help-bubble,
.shift-grid__help-tooltip:focus-within .shift-grid__help-bubble {
  opacity: 1;
  transform: translateY(0);
}

.shift-grid__help-icon:hover,
.shift-grid__help-icon:focus-visible {
  border-color: #bca688;
  color: #3e3124;
  outline: none;
}

.shift-designation-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.shift-designation-picker__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #e2d7c8;
  border-radius: 999px;
  background: #faf4eb;
  color: #3b2f23;
  padding: 0.25rem 0.55rem;
  font-size: 0.84rem;
  cursor: pointer;
}

.shift-designation-picker__item input[type="checkbox"] {
  margin: 0;
}

.shift-designation-picker__icon {
  line-height: 1;
}

.admin-page h1,
.admin-dashboard h1 {
  margin-bottom: 0.1rem;
}

.admin-panel {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 1.8rem;
  box-shadow: 0 22px 50px rgba(20, 20, 20, 0.12);
}

/* The row of status filters that sits above an admin list — the employee
   roster tabs and the subscriber status filters. It had markup in
   admin/subscriptions but no rule, so the buttons ran together with no gap and
   no separation from the table beneath them. */
.admin-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(20, 20, 20, 0.08);
}

.dashboard-customize {
  position: relative;
}

.dashboard-customize summary {
  list-style: none;
  cursor: pointer;
}

.dashboard-customize summary::-webkit-details-marker {
  display: none;
}

.dashboard-customize__form {
  position: absolute;
  right: 0;
  z-index: 20;
  margin-top: 0.35rem;
  min-width: 240px;
  padding: 0.75rem 0.85rem;
  display: grid;
  gap: 0.55rem;
  background: #fff;
  border: 1px solid rgba(31, 29, 26, 0.14);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(26, 21, 16, 0.14);
}

.dashboard-customize__form > .form-note {
  margin: 0;
}

.dashboard-customize__option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.dashboard-customize__option input[type="checkbox"] {
  margin-top: 0.18rem;
}

.dashboard-customize__option .form-note {
  display: block;
  margin: 0.1rem 0 0;
}

.dashboard-customize__form .button {
  justify-self: start;
}

.dashboard-widget-grid {
  display: grid;
  gap: 1.25rem;
}

.dashboard-widget {
  display: grid;
  gap: 1.25rem;
}

.dashboard-widget__header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.dashboard-widget__header h2 {
  margin: 0 0 0.25rem;
}

.dashboard-widget__eyebrow {
  margin: 0 0 0.25rem;
  color: var(--color-primary, #5d4b3d);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-widget__manage-link {
  align-self: flex-start;
  padding: 0.32rem 0.58rem;
  border: 1px solid #b9c1bd;
  border-radius: 999px;
  color: #3d4b47;
  font-size: 0.76rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.dashboard-widget__manage-link:hover {
  border-color: #3d4b47;
  background: #f5f7f6;
}

.dashboard-widget__clear-state {
  display: grid;
  gap: 0.25rem;
  border: 1px solid #d7e7d2;
  border-radius: var(--radius-sm);
  background: #f3faf0;
  color: #2f5f28;
  padding: 0.85rem 1rem;
}

.dashboard-assignment-widget__counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}

.dashboard-assignment-widget__count {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem;
  border: 1px solid #d8dedb;
  border-radius: var(--radius-sm);
  color: #34443e;
}

.dashboard-assignment-widget__count span {
  font-size: 0.78rem;
}

.dashboard-assignment-widget__count strong {
  font-size: 1.35rem;
}

.dashboard-assignment-widget__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dashboard-assignment-widget__list li {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.7rem 0;
  border-top: 1px solid #e4e8e6;
}

.dashboard-assignment-widget__list li:first-child {
  border-top: 0;
}

.dashboard-assignment-widget__counts--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-assignment-widget__work {
  display: grid;
}

.dashboard-assignment-widget__title {
  color: #234039;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.dashboard-assignment-widget__work small,
.dashboard-assignment-widget__list time {
  color: #5b6a64;
  font-size: 0.82rem;
}

@media (max-width: 48rem) {
  .dashboard-assignment-widget__counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-assignment-widget__counts--three > :last-child {
    grid-column: 1 / -1;
  }

  .dashboard-assignment-widget__list li {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dashboard-event-milestones__table-wrap {
  overflow-x: auto;
}

.dashboard-event-milestones__assignment select {
  width: auto;
  min-width: 10rem;
  padding: 0.45rem 2rem 0.45rem 0.65rem;
  font-size: 0.82rem;
}

.dashboard-event-milestones__assignment {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.dashboard-event-milestones__unassigned-alert {
  display: inline-grid;
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  place-items: center;
  border-radius: 999px;
  background: #f8ded8;
  color: #873d31;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

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

.scheduling-widget__summary-card {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  border: 1px solid #eadfce;
  border-radius: var(--radius-sm);
  background: #fcfaf7;
  padding: 1rem;
}

.scheduling-widget__summary-card > span {
  color: #6e6255;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.scheduling-widget__summary-card > strong {
  color: #2f261f;
  font-size: 1.15rem;
}

.scheduling-widget__summary-card > small {
  color: #6e6255;
}

.scheduling-widget__summary-card .button {
  justify-self: start;
  margin-top: 0.25rem;
}

.scheduling-widget__requests-wrap {
  overflow-x: auto;
}

.scheduling-widget__requests {
  margin-top: 0;
}

.scheduling-widget__warnings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.scheduling-widget__warning {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid;
}

.scheduling-widget__warning-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.scheduling-widget__warning strong {
  font-size: 1.1rem;
  line-height: 1.2;
}

.scheduling-widget__warning small {
  font-size: 0.82rem;
}

.scheduling-widget__warning--red {
  background: #fdf0ed;
  border-color: #e8b4a8;
  color: #7a2f1a;
}

.scheduling-widget__warning--red .scheduling-widget__warning-label {
  color: #9b3d28;
}

.scheduling-widget__warning--yellow {
  background: #fef9e7;
  border-color: #e6d49a;
  color: #6b5518;
}

.scheduling-widget__warning--yellow .scheduling-widget__warning-label {
  color: #8a6d1f;
}

.scheduling-widget__warning--green {
  background: #f3faf0;
  border-color: #b8d9a8;
  color: #2f5f28;
}

.scheduling-widget__warning--green .scheduling-widget__warning-label {
  color: #3d732f;
}

.upcoming-events-widget__summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.upcoming-events-widget__summary-card {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  border: 1px solid #eadfce;
  border-radius: var(--radius-sm);
  background: #fcfaf7;
  padding: 1rem;
}

.upcoming-events-widget__summary-card > span {
  color: #6e6255;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
}

.upcoming-events-widget__summary-card > strong {
  color: #2f261f;
  font-size: 1.15rem;
}

.upcoming-events-widget__summary-card > small {
  color: #6e6255;
}

.upcoming-events-widget__events-wrap {
  overflow-x: auto;
}

.upcoming-events-widget__events {
  margin-top: 0;
}

.shift-grid-wrap {
  overflow-x: auto;
}

.scheduler-month {
  display: grid;
  gap: 0.75rem;
}

.scheduler-month__title {
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  color: #3f3327;
}

.scheduler-month-filter {
  border: 1px solid #e5ddd2;
  border-radius: 10px;
  background: #fcfaf7;
  padding: 0.65rem;
  display: grid;
  gap: 0.55rem;
}

.scheduler-month-filter__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.scheduler-month-filter__header h3 {
  margin: 0;
  font-size: 0.9rem;
}

.scheduler-month-filter__actions {
  display: inline-flex;
  gap: 0.5rem;
}

.scheduler-month-filter__cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.scheduler-month-filter__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #d8cebf;
  background: #fff;
  color: #4a3f33;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
}

.scheduler-month-filter__pill input {
  margin: 0;
}

.scheduler-month-filter__pill.is-selected {
  border-color: #958266;
  background: #f6f0e4;
}

.scheduler-month__legend {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.scheduler-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.55rem;
}

.scheduler-month-grid__weekday {
  font-size: 0.76rem;
  font-weight: 700;
  color: #5b4d3f;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.25rem 0.3rem;
}

.scheduler-month-day {
  border: 1px solid #e5ddd2;
  border-radius: 10px;
  background: #fff;
  min-height: 8.75rem;
  padding: 0.45rem;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.4rem;
}

.scheduler-month-day--outside {
  background: #faf7f2;
  border-color: #ece4d8;
}

.scheduler-month-day__header {
  display: flex;
  justify-content: flex-end;
}

.scheduler-month-day__date-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: #3f3327;
  text-decoration: none;
}

.scheduler-month-day__date-link:hover,
.scheduler-month-day__date-link:focus-visible {
  text-decoration: underline;
}

.scheduler-month-day__list {
  display: grid;
  gap: 0.28rem;
  align-content: start;
}

.scheduler-month-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.16rem 0.5rem;
  font-size: 0.72rem;
  border: 1px solid transparent;
  width: fit-content;
  max-width: 100%;
}

.scheduler-month-chip__name {
  font-weight: 700;
}

.scheduler-month-chip__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.22rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 1;
}

.scheduler-month-chip--local {
  background: #e7f6ea;
  border-color: #9ecfaf;
  color: #1f5f36;
}

.scheduler-month-chip--shop-0 {
  background: #eaf2ff;
  border-color: #aac4ea;
  color: #234d86;
}

.scheduler-month-chip--shop-1 {
  background: #fff0e8;
  border-color: #e6bca4;
  color: #7e4224;
}

.scheduler-month-chip--shop-2 {
  background: #f2ecff;
  border-color: #c6b5eb;
  color: #4a2e7f;
}

.scheduler-month-chip--shop-3 {
  background: #e8faf7;
  border-color: #a5ded3;
  color: #1f665d;
}

.scheduler-month-chip--shop-4 {
  background: #fff7df;
  border-color: #e4d095;
  color: #6f5717;
}

.scheduler-month-chip--shop-5 {
  background: #fbe9f3;
  border-color: #e0b0c7;
  color: #7a2f54;
}

.scheduler-month-chip--draft {
  box-shadow: inset 0 0 0 1px rgba(40, 35, 30, 0.22);
}

@media (max-width: 980px) {
  .scheduler-month-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scheduler-month-grid__weekday {
    display: none;
  }
}

.scheduler-date-weekday {
  margin-left: 0.35rem;
  font-weight: 600;
  color: #5f5243;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8rem;
}

.scheduler-notes {
  border: 1px solid #e8e1d8;
  border-radius: 12px;
  background: #fcfaf7;
  padding: 0.9rem;
  margin-bottom: 1rem;
}

.scheduler-notes__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

.scheduler-notes__header h3 {
  margin: 0;
  font-size: 0.98rem;
}

.scheduler-notes__header p {
  margin: 0;
  color: #6f6253;
  font-size: 0.8rem;
}

.scheduler-notes__grid {
  margin-bottom: 0;
}

.scheduler-notes__actions {
  margin-top: 0.2rem;
}

.scheduler-staff-summary {
  border: 1px solid #e4d8c8;
  border-radius: 12px;
  background: #fff9f2;
  padding: 0.8rem 0.9rem;
  margin: 0 0 1rem;
}

.scheduler-staff-summary__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}

.scheduler-staff-summary__header h3 {
  margin: 0;
  font-size: 1rem;
}

.scheduler-staff-summary__header p {
  margin: 0;
  color: #6a5e50;
  font-size: 0.82rem;
}

.scheduler-staff-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.65rem;
}

.scheduler-staff-summary__card,
.scheduler-staff-summary__day-card {
  border: 1px solid #ebdece;
  border-radius: 10px;
  background: #fff;
  padding: 0.55rem 0.65rem;
}

.scheduler-staff-summary__card h4,
.scheduler-staff-summary__day-card h4 {
  margin: 0 0 0.3rem;
  font-size: 0.84rem;
  color: #2f261d;
}

.scheduler-staff-summary__card p,
.scheduler-staff-summary__day-card p {
  margin: 0;
  font-size: 0.77rem;
  color: #594d40;
  line-height: 1.35;
}

.scheduler-staff-summary__totals {
  margin: 0.65rem 0 0;
  font-size: 0.82rem;
  color: #3f3428;
}

.scheduler-staff-summary__daily-grid {
  margin-top: 0.65rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.55rem;
}

.scheduler-projection {
  border: 1px solid #d8d8d8;
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
  background: #f9faf9;
}

.scheduler-projection__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.scheduler-projection__header h3 {
  margin: 0;
  font-size: 0.98rem;
}

.scheduler-projection__status {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
  border: 1px solid currentColor;
}

.scheduler-projection__status-block {
  display: grid;
  justify-items: end;
  gap: 0.15rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.scheduler-projection__total {
  color: #222;
  font-size: 0.82rem;
}

.scheduler-projection__total strong {
  font-size: 0.95rem;
}

.scheduler-projection__total-design {
  color: #5d5d5d;
  font-size: 0.76rem;
}

.scheduler-projection .scheduler-projection__headline {
  margin: 0.3rem 0 0;
  color: var(--projection-ink, inherit);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}

.scheduler-projection .scheduler-projection__action {
  margin: 0.15rem 0 0;
  color: #222;
  font-size: 0.95rem;
  font-weight: 600;
}

.scheduler-projection__detail {
  display: block;
  margin-top: 0.1rem;
  color: #5d5d5d;
  font-size: 0.82rem;
  font-weight: 500;
}

/* The zone ruler: five fixed zones around the middle (too light, a little
   light, on track, a little strong, too strong) and a marker for where the
   schedule sits. Fixed shares of the middle, so the zones never move; only
   the marker does. */
.scheduler-projection__ruler {
  max-width: 48rem;
  margin-top: 0.75rem;
  padding-top: 1.35rem;
}

.scheduler-projection__zones {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
  gap: 2px;
  height: 28px;
}

.scheduler-projection__zone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
  padding-inline: 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.scheduler-projection__zone--far { background: #f0c2c2; color: #7a2020; }
.scheduler-projection__zone--near { background: #f2dd9c; color: #6a5200; }
.scheduler-projection__zone--on { background: #bfe2c5; color: #245a31; }

.scheduler-projection__marker {
  position: absolute;
  top: -1.35rem;
  bottom: -4px;
  left: var(--marker-at);
  width: 0;
}

.scheduler-projection__marker::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  bottom: 0;
  left: -1.5px;
  width: 3px;
  border-radius: 2px;
  background: #1e2420;
}

.scheduler-projection__marker-label {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #1e2420;
  font-size: 0.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.scheduler-projection__marker[data-edge="end"] .scheduler-projection__marker-label { transform: translateX(-100%); }
.scheduler-projection__marker[data-edge="start"] .scheduler-projection__marker-label { transform: none; }

.scheduler-projection__ticks {
  position: relative;
  height: 1.1rem;
  margin-top: 0.2rem;
  color: #5d5d5d;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

.scheduler-projection__tick {
  position: absolute;
  left: var(--tick-at);
  transform: translateX(-50%);
  white-space: nowrap;
}

.scheduler-projection__tick--middle {
  color: #222;
  font-weight: 700;
}

.scheduler-projection__aim-row {
  max-width: 48rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 0.65rem;
}

.scheduler-projection__aim {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.6rem;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.scheduler-projection__aim dt {
  color: #5d5d5d;
  font-size: 0.74rem;
  font-weight: 600;
}

.scheduler-projection__aim dd {
  margin: 0.05rem 0 0;
  color: #222;
  font-size: 1.05rem;
  font-weight: 700;
}

.scheduler-projection__units {
  display: inline-flex;
  gap: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  padding: 2px;
  background: rgba(255, 255, 255, 0.7);
}

.scheduler-projection__units button {
  border: 0;
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  background: transparent;
  color: #5d5d5d;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.scheduler-projection__units button[aria-pressed="true"] {
  background: #2f5d46;
  color: #fff;
}

.scheduler-projection__units button:focus-visible {
  outline: 2px solid #2f5d46;
  outline-offset: 2px;
}

.scheduler-projection[data-unit="hours"] [data-unit-show="dollars"],
.scheduler-projection[data-unit="dollars"] [data-unit-show="hours"] {
  display: none;
}

.scheduler-projection__by-day {
  max-width: 60rem;
  margin-top: 0.8rem;
}

.scheduler-projection .scheduler-projection__subhead {
  margin: 0 0 0.35rem;
  color: #5d5d5d;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.scheduler-projection__days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scheduler-projection__day {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  background: #fff;
  color: #222;
  font-variant-numeric: tabular-nums;
}

.scheduler-projection__day-name {
  color: #5d5d5d;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.scheduler-projection__day-chip {
  justify-self: start;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 800;
}

.scheduler-projection__day-chip--green { background: #bfe2c5; color: #245a31; }
.scheduler-projection__day-chip--yellow { background: #f2dd9c; color: #6a5200; }
.scheduler-projection__day-chip--red { background: #f0c2c2; color: #7a2020; }

.scheduler-projection__day-value {
  font-weight: 800;
}

.scheduler-projection__day-total,
.scheduler-projection__day-aim {
  color: #5d5d5d;
  font-size: 0.74rem;
}

.scheduler-projection__details {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.scheduler-projection__details summary {
  cursor: pointer;
  width: fit-content;
  font-size: 0.8rem;
  font-weight: 600;
  color: #5d5d5d;
}

.scheduler-projection__details dl {
  display: grid;
  max-width: 60rem;
  gap: 0.55rem;
  margin: 0.55rem 0 0;
}

.scheduler-projection__details dt {
  font-size: 0.76rem;
  font-weight: 700;
  color: #3a3a3a;
}

.scheduler-projection__details dd {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #5d5d5d;
}

.scheduler-projection__org-score .scorecard-pill {
  margin-left: 0.15rem;
  vertical-align: middle;
}

.scheduler-projection__org-score-basis {
  display: block;
  margin-top: 0.2rem;
}

@media (max-width: 640px) {
  .scheduler-projection__status-block { justify-items: start; text-align: left; }
  .scheduler-projection__tick:not(.scheduler-projection__tick--middle) { display: none; }
  .scheduler-projection__zone { font-size: 0; }
  .scheduler-projection__zone--on { font-size: 0.7rem; }
  .scheduler-projection__days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.scheduler-projection--green {
  border-color: #8ccf96;
  background: #f2fbf3;
  color: #265a2f;
  --projection-ink: #265a2f;
}

.scheduler-projection--yellow {
  border-color: #e8c25a;
  background: #fff9e8;
  color: #6d5400;
  --projection-ink: #6d5400;
}

.scheduler-projection--red {
  border-color: #e7a1a1;
  background: #fff2f2;
  color: #7a2020;
  --projection-ink: #7a2020;
}

.shift-grid-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 980px;
}

.shift-grid-table th,
.shift-grid-table td {
  border: 1px solid #e5ddd2;
  vertical-align: top;
  background: #fff;
}

.shift-grid-table thead th {
  background: #f7f2ea;
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Column headers that follow the page down the grid.
   `position: sticky` above is what pins the staff column to the left edge; it
   cannot also pin the day row to the top of the page, because the sideways
   scrolling these grids need makes their wrapper the scroll container, and the
   header would stick to the top of a box that never scrolls vertically. The
   `floating-table-header` controller measures the page scroll instead and
   writes the distance into --floating-header-offset; translating the header
   cells keeps them inside the wrapper, so they still slide with their columns
   when the grid scrolls sideways. */
.shift-grid-wrap,
.day-shift-wrap,
.scheduler-month-grid {
  --floating-header-inset: 0px;
}

.shift-grid-table thead th,
.day-shift-axis,
.scheduler-month-grid__weekday {
  transform: translateY(var(--floating-header-offset, 0px));
}

/* The axis and the weekday labels sit on the panel with no fill of their own,
   which reads as smeared text once rows pass underneath them. */
.day-shift-axis,
.scheduler-month-grid__weekday {
  background: #fff;
  z-index: 3;
}

.day-shift-wrap.is-header-floating .day-shift-axis,
.scheduler-month-grid.is-header-floating .scheduler-month-grid__weekday,
.shift-grid-wrap.is-header-floating .shift-grid-table thead th {
  box-shadow: 0 8px 12px -10px rgba(31, 26, 20, 0.65);
}

/* Print takes the page as it stands, including a header parked mid-grid. */
@media print {
  .shift-grid-table thead th,
  .day-shift-axis,
  .scheduler-month-grid__weekday {
    transform: none;
    box-shadow: none;
  }
}

.shift-grid-table__employee-col {
  width: 220px;
  min-width: 220px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fdfaf5;
  text-align: left;
  padding: 0.75rem;
}

.shift-grid-table thead .shift-grid-table__employee-col {
  z-index: 4;
}

.shift-grid-table tfoot .shift-grid-table__employee-col {
  z-index: 1;
}

.shift-grid-table__notes-label {
  background: #f7f2ea;
  font-size: 0.75rem;
  color: #6b5d4d;
}

.shift-grid-cell__notes-title {
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #5f5243;
}

.shift-grid-cell__notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.shift-grid-cell__notes-header .shift-grid-cell__notes-title {
  margin-bottom: 0;
}

.shift-grid-table__day-heading {
  display: grid;
  gap: 0.2rem;
  text-align: center;
  padding: 0.5rem 0.2rem;
}

.shift-grid-table__day-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
}

.shift-grid-table__day-link:hover,
.shift-grid-table__day-link:focus-visible {
  background: rgba(140, 63, 39, 0.08);
  outline: none;
}

.shift-grid-table__day-name {
  text-transform: uppercase;
  letter-spacing: 0.9px;
  font-size: 0.72rem;
  color: #7b6f61;
}

.shift-grid-table__day-date {
  font-size: 0.92rem;
  color: #3c352d;
  font-weight: 700;
}

.shift-grid-table__employee-name {
  font-size: 0.94rem;
  font-weight: 700;
  color: #2f281f;
}

.shift-grid-table__employee-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.shift-grid-table__staff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.shift-grid-table__employee-meta {
  margin-top: 0.2rem;
  font-size: 0.76rem;
  color: #7d7163;
  font-weight: 500;
}

.shift-grid-table__employee-summary {
  margin-top: 0.22rem;
  font-size: 0.72rem;
  color: #66584a;
  line-height: 1.35;
}

.shift-grid-table__employee-summary--global {
  color: #4f5f76;
}

.shift-grid-table__employee-actions {
  display: flex;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

.shift-grid-table__employee-actions .button_to,
.shift-grid-table__header-actions .button_to {
  display: inline-flex;
  margin: 0;
}

.shift-grid-table__header-actions {
  display: flex;
  gap: 0.35rem;
}

.shift-icon-button {
  border: 1px solid rgba(30, 27, 24, 0.2);
  background: #fff;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.shift-icon-button svg {
  width: 14px;
  height: 14px;
  fill: var(--accent-dark);
}

.shift-icon-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 14px rgba(24, 20, 16, 0.12);
}

.shift-grid-cell {
  min-width: 145px;
  height: 96px;
  padding: 0.4rem;
  background: #fffdf9;
}

.shift-grid-cell--notes {
  background: #fcf8f3;
}

.shift-grid-cell__day-note-form .field {
  margin-bottom: 0.4rem;
}

.shift-grid-cell__week-note-form .field {
  margin-bottom: 0.4rem;
}

.shift-grid-cell__day-note-form label {
  font-size: 0.66rem;
}

.shift-grid-cell__week-note-form label {
  font-size: 0.66rem;
}

.shift-grid-cell__day-note-form textarea {
  padding: 0.35rem 0.45rem;
  font-size: 0.78rem;
}

.shift-grid-cell__week-note-form textarea {
  padding: 0.35rem 0.45rem;
  font-size: 0.78rem;
}

.note-save-button {
  border: 1px solid #8bbf8f;
  background: #eef8ef;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.note-save-button svg {
  width: 12px;
  height: 12px;
  fill: #26672c;
}

.note-save-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 12px rgba(22, 18, 14, 0.12);
}

.note-save-button.is-clean {
  border-color: #84b689;
  background: #edf8ee;
}

.note-save-button.is-clean svg {
  fill: #2d7a33;
}

.note-save-button.is-dirty {
  border-color: #d17070;
  background: #fdecec;
}

.note-save-button.is-dirty svg {
  fill: #a23030;
}

.note-save-button.is-saving {
  border-color: #cfb17e;
  background: #fff5e6;
}

.note-save-button.is-saving svg {
  fill: #8a5f21;
}

.shift-grid-cell__note-status {
  margin: 0.2rem 0 0;
  font-size: 0.68rem;
  color: #5f7c62;
}

.shift-grid-cell__note-status.is-error {
  color: #9b3737;
}

.shift-grid-cell--unavailable {
  background: #fcf8f9;
}

.shift-grid-cell--partial-unavailable {
  background: #fffaf2;
}

.shift-grid-cell__stack {
  display: grid;
  gap: 0.35rem;
}

.shift-grid-cell__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 78px;
  width: 100%;
  border-radius: 10px;
  border: 1px dashed #dbcdbd;
  color: #9a7a56;
  font-size: 0.82rem;
  font-weight: 600;
}

.shift-grid-cell__add:hover {
  border-color: #b98a54;
  color: #7e5630;
  background: #fff7ec;
}

.shift-grid-cell__unavailable {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 78px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #d9ced2;
  color: #7d6670;
  font-size: 0.8rem;
  font-weight: 600;
  background: repeating-linear-gradient(
    -45deg,
    #f4edf0,
    #f4edf0 10px,
    #f9f4f6 10px,
    #f9f4f6 20px
  );
}

.shift-grid-cell__unavailability-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.2rem;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #ead6b7;
  color: #8d6338;
  font-size: 0.74rem;
  font-weight: 600;
  background: linear-gradient(180deg, #fff8ed 0%, #ffefda 100%);
}

.day-shift-wrap {
  overflow-x: auto;
}

.day-shift-axis {
  margin-left: 220px;
  margin-bottom: 0.45rem;
  position: relative;
  height: 18px;
  color: #7b6f61;
  font-size: 0.72rem;
  letter-spacing: 0.4px;
}

.day-shift-axis span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.day-shift-axis span:nth-child(1) {
  left: 0%;
  transform: none;
}

.day-shift-axis span:nth-child(2) {
  left: 25%;
}

.day-shift-axis span:nth-child(3) {
  left: 50%;
}

.day-shift-axis span:nth-child(4) {
  left: 75%;
}

.day-shift-axis span:nth-child(5) {
  left: 100%;
  transform: translateX(-100%);
}

.day-shift-table {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
}

.day-shift-table th,
.day-shift-table td {
  border: 1px solid #e5ddd2;
  vertical-align: middle;
  background: #fff;
}

.day-shift-table td {
  padding: 0;
}

.day-shift-table__employee-col {
  width: 220px;
  min-width: 220px;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fdfaf5;
  text-align: left;
  padding: 0.75rem;
}

.day-shift-lane {
  position: relative;
  height: 64px;
  background: repeating-linear-gradient(
    to right,
    #fffdf9,
    #fffdf9 calc(100% / 12 - 1px),
    #f0e5d6 calc(100% / 12 - 1px),
    #f0e5d6 calc(100% / 12)
  );
}

.daily-unavailability-block {
  position: absolute;
  left: var(--day-shift-left);
  width: var(--day-shift-width);
  top: 18px;
  bottom: 18px;
  min-width: 60px;
  border-radius: 999px;
  border: 1px solid rgba(168, 117, 60, 0.35);
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 226, 188, 0.8),
    rgba(255, 226, 188, 0.8) 8px,
    rgba(255, 244, 229, 0.92) 8px,
    rgba(255, 244, 229, 0.92) 16px
  );
  pointer-events: none;
  overflow: hidden;
}

.daily-unavailability-block--full {
  top: 10px;
  bottom: 10px;
}

.daily-unavailability-block__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.6rem;
  color: #7e5630;
  font-size: 0.72rem;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

.shift-block {
  position: relative;
  border: 1px solid #d6c1a4;
  background: linear-gradient(180deg, #fcf4e7 0%, #f7ead7 100%);
  color: #33271a;
  width: 100%;
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  padding: 0.45rem 0.5rem;
  display: grid;
  gap: 0.2rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.shift-block--draft {
  border-color: #c18a49;
  background: linear-gradient(180deg, #fff5e5 0%, #fbe9cc 100%);
}

.shift-block--approved {
  border-color: #6b9d73;
  background: linear-gradient(180deg, #eff9ef 0%, #deefde 100%);
}

.shift-block--ghost {
  border-style: dashed;
  border-color: #8ea0bb;
  background: linear-gradient(180deg, #f6f8fc 0%, #e9eef8 100%);
  color: #30435d;
  cursor: default;
  box-shadow: none;
}

.shift-block--ghost-draft {
  border-color: #b89b6d;
  background: linear-gradient(180deg, #fdf7ed 0%, #f7eddc 100%);
  color: #6f532d;
}

.shift-block--ghost:hover,
.shift-block--ghost:focus-visible {
  border-color: inherit;
  box-shadow: none;
}

.shift-block__move-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shift-block__move-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.6);
}

.daily-shift-block {
  position: absolute;
  left: var(--day-shift-left);
  width: var(--day-shift-width);
  top: 8px;
  bottom: 8px;
  min-width: 70px;
  padding: 0.35rem 1rem;
  align-content: center;
}

.daily-shift-block--ghost {
  top: 16px;
  bottom: 16px;
  padding: 0.3rem 0.75rem;
  opacity: 0.92;
  pointer-events: none;
}

.daily-shift-block.is-dragging {
  box-shadow: 0 12px 18px rgba(59, 39, 17, 0.22);
}

.daily-shift-handle {
  position: absolute;
  top: 4px;
  bottom: 4px;
  width: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(141, 88, 44, 0.55);
  cursor: ew-resize;
}

.daily-shift-handle--start {
  left: -5px;
}

.daily-shift-handle--end {
  right: -5px;
}

.shift-block:hover,
.shift-block:focus-visible {
  border-color: #af7a40;
  box-shadow: 0 8px 16px rgba(59, 39, 17, 0.14);
  outline: none;
}

.shift-block__time {
  font-size: 0.81rem;
  font-weight: 700;
  line-height: 1.1;
}

.shift-block__location {
  font-size: 0.73rem;
  color: #72593f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shift-block__duration {
  font-size: 0.72rem;
  color: #5f4f3e;
  font-weight: 600;
}

.shift-block__ghost-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 0.1rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(73, 93, 128, 0.2);
  background: rgba(255, 255, 255, 0.75);
  font-size: 0.66rem;
  font-weight: 700;
  color: inherit;
}

.shift-block__break-indicator {
  position: absolute;
  top: 6px;
  right: 34px;
  font-size: 0.76rem;
  line-height: 1;
}

.shift-block__holiday-indicator {
  position: absolute;
  top: 6px;
  right: 34px;
  font-size: 0.76rem;
  line-height: 1;
}

.shift-block__holiday-indicator--with-break {
  right: 58px;
}

.shift-block__designations {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  margin-top: 0.1rem;
  max-width: calc(100% - 52px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shift-block__designation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.shift-block__status-badge {
  position: absolute;
  top: 6px;
  right: 8px;
  border-radius: 999px;
  border: 1px solid #d5b487;
  background: #fdf2de;
  color: #7f551f;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.12rem 0.32rem;
}

.shift-block--approved .shift-block__status-badge {
  border-color: #8cbb93;
  background: #e7f6e8;
  color: #2f6640;
}

.daily-shift-block .shift-block__status-badge {
  top: 5px;
  right: 8px;
}

.daily-shift-block .shift-block__break-indicator {
  top: 6px;
  right: 34px;
}

.daily-shift-block .shift-block__holiday-indicator {
  top: 6px;
  right: 34px;
}

.daily-shift-block .shift-block__holiday-indicator--with-break {
  right: 58px;
}

.daily-shift-block .shift-block__designations {
  position: absolute;
  top: 6px;
  right: 58px;
  margin-top: 0;
  max-width: none;
}

.shift-popover {
  position: fixed;
  z-index: 220;
  width: min(420px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid #d8cdbf;
  border-radius: 14px;
  box-shadow: 0 26px 42px rgba(16, 13, 9, 0.24);
  padding: 0.9rem;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.shift-popover.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.shift-popover__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.shift-popover__heading {
  display: grid;
  gap: 0.2rem;
}

.shift-popover__heading h3 {
  margin: 0;
  font-size: 1rem;
}

.shift-popover__heading p {
  margin: 0;
  font-size: 0.82rem;
  color: #72685d;
}

.shift-popover__close {
  border: 1px solid #d8cdbf;
  background: #fff8ef;
  color: #5c4c3d;
  border-radius: 8px;
  width: 28px;
  height: 28px;
  line-height: 1;
  font-size: 1.05rem;
  cursor: pointer;
}

.shift-popover__close:hover,
.shift-popover__close:focus-visible {
  border-color: #bda58b;
  background: #fdf2e4;
  outline: none;
}

.shift-popover__meta {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.85rem;
  font-size: 0.78rem;
  color: #5b5043;
}

.shift-popover__status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #d9c7b0;
  padding: 0.08rem 0.52rem;
  background: #fdf7ef;
}

.shift-popover__timeline {
  margin-top: 0.65rem;
}

.shift-popover__location-field {
  margin-top: 0.55rem;
}

.shift-popover__notes-field {
  margin-top: 0.55rem;
}

.shift-popover__notes-field label {
  font-size: 0.68rem;
}

.shift-popover__notes-field textarea {
  margin-top: 0.2rem;
  font-size: 0.84rem;
  padding: 0.45rem 0.55rem;
  resize: vertical;
}

.shift-popover__notes-field .button {
  margin-top: 0.3rem;
}

.shift-popover__location-field label {
  font-size: 0.68rem;
}

.shift-popover__location-field select {
  margin-top: 0.2rem;
  font-size: 0.86rem;
  padding: 0.45rem 0.55rem;
}

.shift-popover__timeline-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  letter-spacing: 0.3px;
  color: #8a7c6e;
  margin-bottom: 0.25rem;
}

.shift-popover__track {
  height: 42px;
  border-radius: 12px;
  border: 1px solid #dccfc0;
  background: repeating-linear-gradient(
    to right,
    #f8f2ea,
    #f8f2ea calc(25% - 1px),
    #eadfce calc(25% - 1px),
    #eadfce 25%
  );
  position: relative;
}

.shift-popover__range {
  position: absolute;
  top: 5px;
  height: 30px;
  border-radius: 10px;
  background: linear-gradient(180deg, #e48646 0%, #c9692d 100%);
  box-shadow: 0 8px 14px rgba(139, 77, 32, 0.35);
}

.shift-popover__handle {
  position: absolute;
  top: -2px;
  width: 12px;
  height: 34px;
  border: 1px solid #9d5626;
  background: #fff;
  border-radius: 999px;
  cursor: ew-resize;
  padding: 0;
}

.shift-popover__handle--start {
  left: -6px;
}

.shift-popover__handle--end {
  right: -6px;
}

.shift-popover.is-dragging .shift-popover__range {
  box-shadow: 0 10px 18px rgba(139, 77, 32, 0.42);
}

.shift-popover__message {
  margin: 0.55rem 0 0;
  font-size: 0.76rem;
}

.shift-popover__message.is-error {
  color: #b0382f;
}

.shift-popover__actions {
  margin-top: 0.45rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.shift-popover__holiday-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: auto;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  border: 1px solid #d8cebf;
  background: #fffaf3;
  color: #4a3f33;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
}

.shift-popover__holiday-pill input {
  margin: 0;
}

.shift-popover__holiday-pill:hover,
.shift-popover__holiday-pill:focus-within {
  border-color: #bda58b;
  background: #fdf2e4;
}

@media (max-width: 900px) {
  /* The floating menu button owns the top-left corner at this width, so the
     column headers stop below it instead of sliding underneath it. */
  .shift-grid-wrap,
  .day-shift-wrap,
  .scheduler-month-grid {
    --floating-header-inset: 56px;
  }

  /* Week grid becomes a day-by-day swipe carousel: the staff column stays
     pinned on the left, each day column fills the remaining width, and
     horizontal scrolling snaps one day at a time. */
  .shift-grid-wrap {
    container-type: inline-size;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 7.25rem;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .shift-grid-table {
    min-width: 0;
  }

  .shift-grid-table__employee-col {
    width: 7.25rem;
    min-width: 7.25rem;
    max-width: 7.25rem;
    padding: 0.5rem;
  }

  /* One snap area per day; sizing the header th sizes the whole column.
     The vw line is a fallback for browsers without container query units. */
  .shift-grid-table thead th:not(.shift-grid-table__employee-col) {
    min-width: calc(100vw - 9rem);
    min-width: calc(100cqw - 7.25rem);
    scroll-snap-align: start;
  }

  /* Compact the pinned staff cells so the day column gets the space */
  .shift-grid-table__employee-name {
    font-size: 0.85rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .shift-grid-table__employee-summary {
    font-size: 0.7rem;
  }

  .shift-grid-table__employee-meta,
  .shift-grid-table__employee-actions,
  .shift-grid-table__header-actions {
    display: none;
  }

  .day-shift-axis {
    margin-left: 180px;
  }

  .day-shift-table__employee-col {
    width: 180px;
    min-width: 180px;
  }
}

@media (max-width: 720px) {
  .shift-grid__header-actions {
    width: 100%;
  }

  .shift-popover {
    width: calc(100vw - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    padding: 0.8rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .shift-popover__close {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
  }

  .shift-popover__actions {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .shift-popover__actions .button,
  .shift-popover__actions .text-link,
  .shift-popover__holiday-pill {
    width: 100%;
    min-height: 2.75rem;
    justify-content: center;
    text-align: center;
  }

  .shift-popover__holiday-pill {
    margin-right: 0;
  }
}

.admin-subpanel {
  border: 1px solid #e8e1d8;
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #fcfaf7;
}

.admin-subpanel:last-child {
  margin-bottom: 0;
}

.admin-subpanel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.admin-subpanel-header h3 {
  margin: 0;
  font-size: 1rem;
}

/* "Show me this employee's numbers for a day I remember." A one-line control,
   not a form to fill in — the global `input { width: 100% }` would otherwise
   give the date field and the button a row each. */
.employee-metrics-daypicker {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}

.employee-metrics-daypicker .field {
  margin: 0;
}

.employee-metrics-daypicker input[type="date"],
.employee-metrics-daypicker .button {
  width: auto;
}

.employee-metrics-daypicker .button {
  padding: 0.55rem 1.2rem;
}

/* Discarding a premade is a one-line decision: reason, optional note, go.
   Without this the global `input, select, textarea { width: 100% }` gives each
   control a row of its own and one arrangement fills the screen. */
.inline-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0;
}

.inline-form .inline-select {
  width: auto;
  min-width: 12rem;
}

.inline-form .inline-text {
  width: auto;
  flex: 1 1 9rem;
  min-width: 8rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid #d6cfc5;
  border-radius: 8px;
}

.inline-form input[type="submit"] {
  width: auto;
  flex: 0 0 auto;
}

.inline-select {
  width: 100%;
  min-width: 130px;
  padding: 0.35rem 0.45rem;
  border: 1px solid #d6cfc5;
  border-radius: 8px;
  background: #fff;
  font-size: 0.85rem;
}

.button-inline {
  padding: 0.35rem 0.7rem;
  font-size: 0.8rem;
}

.inventory-counts {
  display: grid;
  gap: 1.5rem;
}

.inventory-count-summary {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.95rem;
  color: #4c453f;
  margin-top: 0.6rem;
}

.inventory-count-summary strong {
  font-weight: 600;
}

.inventory-location {
  background: #f8f5f0;
  border-radius: var(--radius-md);
  padding: 1.2rem;
  border: 1px solid #e7ded4;
}

.inventory-location-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-left: calc(var(--location-depth, 0) * 1.25rem);
}

.inventory-location-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.inventory-list {
  display: grid;
  gap: 0;
}

.inventory-row {
  background: #fff;
  border-radius: 0;
  padding: 0;
  border: 1px solid #e9e0d6;
  border-left: 0;
  border-right: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  grid-template-areas:
    "title title"
    "meta form"
    "stats stats";
  gap: 0;
  position: relative;
  overflow: hidden;
}

/* Rows run edge to edge: pull out exactly the .admin-main--full side padding,
   no further, or the first letters slip off-screen and the page scrolls sideways. */
.inventory-counts-page .inventory-counts {
  margin-left: -3.25rem;
  margin-right: -3.25rem;
}

.inventory-row::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #f1ebe1;
  background-image: var(--inventory-bg-image);
  background-size: cover;
  background-position: center;
  opacity: 0.35;
  z-index: 0;
}

.inventory-row > * {
  position: relative;
  z-index: 1;
}

.inventory-row--fresh {
  background: #f3faf2;
  border-color: #dbe8d8;
}

.inventory-row--stale {
  background: #fff8e3;
  border-color: #f0e2be;
}

.inventory-row.is-hidden {
  display: none;
}

.inventory-meta h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.inventory-row-title {
  grid-area: title;
  padding: 0.35rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border-bottom: 1px solid rgba(38, 31, 22, 0.14);
}

.inventory-row-title h3 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.1;
}

.inventory-location-selector {
  position: static;
  margin: 0;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.inventory-location-selector select {
  padding: 0.25rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  font-size: inherit;
  min-width: 120px;
}

.inventory-meta {
  padding: 0.35rem 0.5rem;
  grid-area: meta;
}

.inventory-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.9rem;
  color: #4c453f;
  grid-area: stats;
  padding: 0.35rem 0.5rem;
  border-top: 1px solid rgba(38, 31, 22, 0.12);
  align-items: center;
}

.inventory-confirm-button {
  margin-left: auto;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
}

.inventory-form {
  display: grid;
  gap: 0;
  padding: 0;
  grid-area: form;
}

.inventory-keypad {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
}

.inventory-column {
  background: #f7f3ed;
  border-radius: var(--radius-sm);
  padding: 0.7rem;
  border: 1px solid #e6ddd2;
  display: grid;
  gap: 0.5rem;
}

.inventory-column-label {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.7rem;
  color: #736b62;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
}

.inventory-buttons {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
}

.inventory-buttons--preset {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 100%;
  gap: 0;
  margin: 0;
}

.inventory-buttons--preset .inventory-button {
  border-radius: 0;
  padding: 0;
  min-height: 3.1rem;
  font-size: 0.78rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.5);
  color: #111827;
}

.spoilage-filter-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.spoilage-reset-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.3rem;
  font-size: 0.85rem;
  color: #4a4038;
}

.spoilage-type-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.8rem;
}

.spoilage-mode-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.8rem;
}

.spoilage-vendor-field {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
}

.spoilage-vendor-field.is-hidden {
  display: none;
}

.spoilage-type-button {
  border: 1px solid #d9cfbf;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4f443b;
  text-decoration: none;
  background: #f8f4ee;
}

.spoilage-type-button.is-active {
  background: #e6f2ee;
  border-color: #9bc5bb;
  color: #24584f;
}

.spoilage-alpha-grid {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 0.35rem;
  margin-bottom: 0.8rem;
}

.spoilage-alpha-button {
  border: 1px solid #d7cec1;
  border-radius: 8px;
  background: #f8f4ee;
  color: #3f352d;
  font-weight: 600;
  min-height: 2rem;
  cursor: pointer;
}

.spoilage-alpha-button.is-selected {
  background: #e5f2ee;
  border-color: #9fc5bb;
  color: #224f47;
}

.spoilage-feedback {
  min-height: 1.25rem;
  margin-bottom: 0.8rem;
  color: #285f56;
}

.spoilage-feedback.is-error {
  color: #9f3120;
}

.material-adjustments-toast {
  position: fixed;
  left: 1.25rem;
  right: auto;
  bottom: 1.25rem;
  max-width: min(560px, calc(100vw - 2.5rem));
  z-index: 1200;
}

.material-adjustments-toast.is-error {
  background: rgba(130, 35, 28, 0.96);
}

.spoilage-list {
  display: grid;
  gap: 0.8rem;
}

.spoilage-row {
  border: 1px solid #e2d8cb;
  border-radius: 10px;
  background: #fcfaf7;
  overflow: hidden;
}

.spoilage-row.is-hidden {
  display: none;
}

.spoilage-row-head {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid #e8dfd4;
}

.spoilage-row-head h3 {
  margin: 0;
}

.spoilage-row-head p {
  margin: 0.2rem 0 0;
  color: #655c53;
}

.spoilage-keypad-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.45rem 0.5rem 0.55rem;
  -webkit-overflow-scrolling: touch;
}

.spoilage-keypad-scroll .inventory-button {
  flex: 0 0 calc((100% - 1.4rem) / 5);
  border-radius: 8px;
  min-height: 2.35rem;
  font-size: 0.8rem;
}

@media (max-width: 900px) {
  .spoilage-alpha-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

.inventory-move-button {
  border: 1px solid rgba(32, 41, 54, 0.35);
  background: rgba(255, 255, 255, 0.5);
  color: #111827;
  border-radius: 999px;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.inventory-move-button--header {
  width: auto;
  min-width: 1.6rem;
  height: 1.2rem;
  padding: 0 0.35rem;
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1;
}

.inventory-location-select-hidden {
  display: none;
}

.inventory-location-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(12, 18, 28, 0.55);
  z-index: 1001;
  padding: 1rem;
}

.inventory-location-modal.is-open {
  display: flex;
}

.inventory-location-modal__panel {
  width: min(560px, 100%);
  max-height: 82vh;
  overflow: auto;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e7ddd1;
  box-shadow: 0 20px 42px rgba(16, 24, 36, 0.25);
}

.inventory-location-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #efe6db;
}

.inventory-location-modal__header h4 {
  margin: 0;
  font-size: 1rem;
}

.inventory-location-modal__close {
  border: 1px solid #d7cfc3;
  background: #fff;
  border-radius: 8px;
  width: 2rem;
  height: 2rem;
  font-size: 1.1rem;
  cursor: pointer;
}

.inventory-location-modal__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  padding: 0.9rem;
}

.inventory-location-modal__option {
  border: 1px solid #d9d0c4;
  background: #faf6ef;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  text-align: left;
  font-weight: 600;
  color: #2f2a24;
  cursor: pointer;
}

.inventory-button {
  border: 1px solid #d7cfc5;
  background: #fff;
  border-radius: 10px;
  padding: 0.4rem 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #403a35;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.inventory-button:hover {
  transform: translateY(-1px);
  border-color: #c5b9ad;
}

.inventory-button.is-selected {
  background: #3d4b47;
  color: #f7f4ef;
  border-color: #2f3a36;
}

.inventory-location.is-empty {
  display: none;
}

.inventory-filter {
  position: fixed;
  right: 2rem;
  bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
  background: #ffffff;
  border-radius: 20px;
  padding: 0.65rem 1rem;
  border: 1px solid #e2d8cc;
  box-shadow: 0 18px 40px rgba(20, 20, 20, 0.15);
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  max-width: calc(100vw - 4rem);
  z-index: 120;
}

.inventory-filter__controls {
  display: contents;
}

.inventory-filter__controls-inner {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  min-width: 0;
}

.inventory-filter__search-row {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  min-width: 0;
}

.inventory-filter__toggle {
  display: none;
  align-items: center;
  flex: 0 0 auto;
  padding: 0.45rem 0.85rem;
  border: 1px solid #e2d8cc;
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2d271f;
  cursor: pointer;
}

.inventory-filter__form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin: 0;
}

.inventory-filter__field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.inventory-filter__field select {
  border: 1px solid #e2d8cc;
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  background: #fff;
  font-size: 0.9rem;
  max-width: 100%;
}

.inventory-filter__location strong {
  font-size: 0.9rem;
  color: #4c453f;
}

.inventory-filter-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6f6760;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
}

.inventory-filter__search input {
  border: none;
  background: transparent;
  padding: 0.2rem 0;
  min-width: 180px;
  font-size: 0.95rem;
}

.inventory-filter__search input:focus {
  outline: none;
}

@media (max-width: 900px) {
  .inventory-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  }

  .inventory-form {
    grid-area: form;
  }

  .inventory-meta {
    grid-area: meta;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .inventory-meta {
    padding-top: 0.35rem;
    padding-right: 0.5rem;
  }

  .inventory-location-selector {
    position: static;
    margin: 0.45rem 0;
  }

  .inventory-form {
    padding-bottom: 0;
  }

  .inventory-filter {
    right: 1rem;
    left: 1rem;
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    border-radius: var(--radius-lg);
    max-width: none;
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .inventory-filter__controls {
    display: grid;
    grid-template-rows: 1fr;
    width: 100%;
    transition: grid-template-rows 0.25s ease;
  }

  .inventory-filter.mobile-filters--collapsed .inventory-filter__controls {
    grid-template-rows: 0fr;
  }

  .inventory-filter__controls-inner {
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.25s ease;
  }

  .inventory-filter.mobile-filters--collapsed .inventory-filter__controls-inner {
    opacity: 0;
    transform: translateY(0.5rem);
  }

  .inventory-filter__form {
    width: 100%;
  }

  .inventory-filter__field {
    flex: 1 1 45%;
  }

  .inventory-filter__field select {
    width: 100%;
  }

  .inventory-filter__search-row {
    width: 100%;
    margin-top: 0.6rem;
    align-items: center;
  }

  .inventory-filter.mobile-filters--collapsed .inventory-filter__search-row {
    margin-top: 0;
  }

  .inventory-filter__search {
    flex: 1 1 auto;
  }

  .inventory-filter__search input {
    min-width: 0;
    width: 100%;
  }

  .inventory-filter__toggle {
    display: inline-flex;
  }

  .inventory-counts-page .inventory-counts {
    margin-left: calc(-1 * max(0.9rem, env(safe-area-inset-left)));
    margin-right: calc(-1 * max(0.9rem, env(safe-area-inset-right)));
  }

  /* The background reaches the screen edge; the row's content keeps clear of
     a notch or rounded corner. */
  .inventory-counts-page .inventory-row {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

@media (max-width: 600px) {
  .inventory-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "meta"
      "form"
      "stats";
  }

  .inventory-buttons--preset {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.admin-list {
  display: grid;
  gap: 0.75rem;
}

.admin-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid #e8e0d6;
  background: #faf8f4;
}

.admin-list-row--nested {
  margin-left: 1.5rem;
  background: #f7f4ef;
}

.admin-list-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
}

.admin-filter-form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}

.admin-filter-form select {
  min-width: 280px;
}

.category-product-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid rgba(44, 40, 35, 0.12);
}

.category-product-thumb.placeholder {
  display: inline-block;
  background: linear-gradient(135deg, #f7eee5 0%, #e7d8c5 100%);
}

.drag-handle {
  cursor: grab;
  font-size: 1.1rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid #e0d6c9;
  background: #fff;
}

.drag-handle:active {
  cursor: grabbing;
}

.icon-button {
  border: 1px solid #e2d9ce;
  background: #fffaf3;
  color: #5a5147;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.icon-button:hover {
  border-color: #c9bfb3;
  color: #3f352b;
  transform: translateY(-1px);
}

.admin-panel h2 {
  margin-top: 0;
}

/* A panel that repeats h2 as a group heading — the note-template library grouped
   by category — needs the space back between groups that the reset above removes
   for the first one. */
.admin-panel h2 + .admin-table {
  margin-top: 0.5rem;
}

.admin-panel .admin-table + h2 {
  margin-top: 1.75rem;
}

.slideout-overlay {
  position: fixed;
  inset: 0;
  background: rgba(24, 20, 16, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 40;
}

.slideout-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 92vw);
  height: 100vh;
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: -18px 0 40px rgba(20, 20, 20, 0.2);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  z-index: 50;
}

.slideout-open .slideout-overlay {
  opacity: 1;
  pointer-events: auto;
}

.slideout-open .slideout-panel {
  transform: translateX(0);
}

.slideout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.slideout-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.slideout-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0;
  border-bottom: 1px solid #efe7dd;
  gap: 1rem;
}

.checkbox-group {
  display: grid;
  gap: 0.5rem;
  padding: 0.4rem 0;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.inquiry-form-block {
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(44, 40, 35, 0.08);
  margin: 2.5rem 0;
  box-sizing: border-box;
}

.trix-content .inquiry-form-block {
  padding: 2.5rem !important;
  margin: 2.5rem 0 !important;
}

.inquiry-form {
  display: grid;
  gap: 1.4rem;
  margin-top: 1.5rem;
}

.inquiry-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
}

.inquiry-form .field {
  margin-bottom: 0;
}

.inquiry-form input,
.inquiry-form select,
.inquiry-form textarea {
  background: #fffaf4;
  border: 1px solid rgba(44, 40, 35, 0.18);
  box-shadow: 0 1px 0 rgba(44, 40, 35, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  padding: 0.9rem 1rem;
  min-height: 48px;
}

.trix-content .inquiry-form input,
.trix-content .inquiry-form select,
.trix-content .inquiry-form textarea {
  padding: 0.9rem 1rem !important;
  min-height: 48px;
}

.inquiry-form textarea {
  min-height: 140px;
}

.inquiry-form input:focus,
.inquiry-form select:focus,
.inquiry-form textarea:focus {
  outline: none;
  border-color: rgba(35, 64, 57, 0.5);
  box-shadow: 0 0 0 3px rgba(35, 64, 57, 0.12);
}

.inquiry-form .checkbox-item input {
  width: 18px;
  height: 18px;
  accent-color: var(--forest);
}

.inquiry-form .inline-field {
  align-items: center;
}

.inquiry-form .form-actions {
  margin-top: 0.5rem;
}

.honeypot-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.slideout-list li:last-child {
  border-bottom: 0;
}

.slideout-empty {
  color: #6b645c;
}

.variant-card {
  border: 1px solid #e4ddd2;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-top: 1.5rem;
  background: #faf8f5;
}

.variant-card .alert {
  margin-bottom: 1rem;
}

.variant-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
}

.variant-header__left {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.variant-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.variant-info strong {
  display: block;
}

.variant-thumb.placeholder {
  background: #efe8dd;
  border: 1px dashed rgba(44, 40, 35, 0.2);
}

.variant-thumb {
  width: 96px;
  height: 96px;
}

.variant-header .form-note {
  margin: 0;
}

.variant-header button.text-link {
  border: none;
  background: transparent;
  font-weight: 600;
}

/* Size cards lay out by the card's own width, not the window's: the admin
   sidebar takes a different share of the window at every size, so a 1280
   window leaves a card about 890px. */
.admin-variant-list {
  container: variant-list / inline-size;
}

/* Photo, the size's numbers, then its buttons stacked in a column of their
   own. A stacked column grows only downward, so a long label or an extra
   button can never push across into the numbers. */
.admin-variant-card {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(0, 1.4fr) minmax(16rem, 1fr);
  align-items: stretch;
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.admin-variant-card__image-column {
  min-height: 220px;
}

.admin-variant-card__image-column .variant-thumb {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  border-radius: 0;
}

.admin-variant-card__image-column .variant-thumb.placeholder {
  border: 0;
}

.admin-variant-card__info-column,
.admin-variant-card__controls-column {
  padding: 1.5rem;
}

.admin-variant-card__info-column {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  overflow-wrap: anywhere;
  border-right: 1px solid rgba(44, 40, 35, 0.08);
}

.admin-variant-card__info-column .form-note {
  margin: 0;
}

.admin-variant-card__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
}

.admin-variant-card__price {
  font-weight: 600;
  color: #3d2a18;
  white-space: nowrap;
}

.admin-variant-card__controls-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
}

.admin-variant-card__controls-column .button {
  padding-inline: 1rem;
  text-align: center;
}

.admin-variant-card__controls-column form .button {
  width: 100%;
}

/* No room for a third column: the buttons go under the photo and numbers, as
   a row that wraps. */
@container variant-list (max-width: 720px) {
  .admin-variant-card {
    grid-template-columns: minmax(140px, 0.7fr) minmax(0, 1.4fr);
  }

  .admin-variant-card__info-column {
    border-right: 0;
  }

  .admin-variant-card__controls-column {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 1.25rem;
  }
}

.admin-variant-card__form-column {
  grid-column: 1 / -1;
  padding: 0 1.5rem 1.5rem;
}

.admin-variant-card__build-log {
  grid-column: 1 / -1;
  padding: 0 1.5rem 1rem;
  border-top: 1px solid rgba(44, 40, 35, 0.08);
}

.variant-build-log summary {
  cursor: pointer;
  padding: 0.75rem 0;
  font-weight: 600;
  color: #234039;
}

.variant-build-log__table {
  margin-top: 0.25rem;
}

.variant-build-log__table td .form-note {
  display: block;
  margin: 0;
}

.variant-build-log__outlier td {
  color: #6b6259;
}

.inline-label {
  margin-left: 0.4rem;
  font-size: 0.9rem;
  color: #5b5650;
}

.inline-field {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.inline-field input[type="checkbox"] {
  margin: 0;
}

.field-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6b6259;
  font-weight: 600;
}

.variant-options {
  align-items: start;
}

.variant-primary-group {
  display: grid;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: #fcfaf7;
}

.variant-primary-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.variant-primary-option {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.7rem 0.95rem;
  border: 1px solid #ddd2c2;
  border-radius: 12px;
  background: #fff;
  color: #45372a;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.variant-primary-option:hover,
.variant-primary-option:focus-within {
  border-color: #bfa58a;
  background: #fffaf2;
  box-shadow: 0 0 0 3px rgba(180, 91, 63, 0.08);
}

.variant-primary-option input[type="radio"] {
  margin: 0;
}

.variant-primary-option span {
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
}

.variant-primary-note {
  margin: 0;
}

@media (max-width: 700px) {
  .variant-primary-options {
    flex-direction: column;
  }

  .variant-primary-option {
    width: 100%;
  }
}

.option-group {
  border: 1px solid #e4ddd2;
  border-radius: var(--radius-sm);
  padding: 0.8rem;
  margin: 0;
}

.option-group legend {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6b6259;
  font-weight: 600;
  padding: 0 0.4rem;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.option-item input {
  margin: 0;
}

.remove-option {
  margin-top: 1rem;
}

.inline-field {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.inline-field input[type="checkbox"] {
  margin: 0;
}

.inline-field input[type="radio"] {
  margin: 0;
}

.field-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6b6259;
  font-weight: 600;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.9rem 0.6rem;
  border-bottom: 1px solid #eee8df;
}

.admin-table input[type="time"] {
  min-width: 140px;
}

/* The base .admin-actions flex display turns the td into a block, which drops
   it out of the row's vertical centering — invisible on one-line rows, obvious
   on these two-line ones, where the actions rode up against the top border.
   Same fix the event list needed. */
.variant-list-table .admin-actions {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
}

.variant-list-table .admin-actions > * + * {
  margin-left: 0.7rem;
}

/* An icon standing in for a word in a table cell: smaller than the standalone
   .icon-button, and it must not lift on hover the way a page-level control
   does — a row of them twitching as the cursor crosses is noise. */
.icon-button--table {
  width: 28px;
  height: 28px;
  vertical-align: middle;
}

.icon-button--table:hover,
.icon-button--table:focus-visible {
  transform: none;
}

.icon-button--table svg {
  width: 15px;
  height: 15px;
}

/* The recipe screen's price panel: what it sells for now, and the two
   recommendations the ingredients below imply. */
.recipe-price-summary {
  border: 1px solid #eee8df;
  border-radius: 12px;
  padding: 0.9rem 1rem;
  background: #fffaf3;
}

.recipe-price-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid #eee8df;
}

.recipe-price-summary__current {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.recipe-price-summary__price {
  font-size: 1.35rem;
  color: #234039;
}

.recipe-price-summary__basis {
  margin-top: 0.75rem;
}

.recipe-price-summary__basis p {
  margin: 0 0 0.3rem;
}

/* Segmented control. Links, not buttons: each option is a real address for the
   page in that reading, so it can be bookmarked and the back button works. */
.pricing-mode-switch {
  display: inline-flex;
  border: 1px solid #e2d9ce;
  border-radius: 999px;
  background: #fffaf3;
  padding: 2px;
}

.pricing-mode-switch__option {
  padding: 0.32rem 0.8rem;
  border-radius: 999px;
  font-size: 0.82rem;
  color: #5a5147;
  text-decoration: none;
  white-space: nowrap;
}

.pricing-mode-switch__option:hover {
  color: #234039;
}

.pricing-mode-switch__option--active {
  background: #234039;
  color: #fffaf3;
}

.pricing-mode-switch__option--active:hover {
  color: #fffaf3;
}

.recipe-price-summary__suggested {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

/* The variant recipe editor: photo and notes beside the ingredients on a
   desk, one column on a phone (below, in the catalog phone block). */
.recipe-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.recipe-editor__photo {
  width: 100%;
  height: auto;
}

.recipe-editor__photo.placeholder {
  aspect-ratio: 1;
}

.recipe-editor__notes,
.recipe-editor-table,
.recipe-editor__add {
  margin-top: 1.5rem;
}

.recipe-editor__empty {
  margin-top: 1rem;
}

.recipe-editor-stepper .designer-station-qty-stepper__input {
  width: 72px;
  text-align: right;
}

/* Keep the bin's cell a cell, so the row border runs under it. */
.recipe-editor-table .admin-actions {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
  text-align: right;
}

/* Recipe sketches: the start-from-a-size form on the list, and the apply-to-
   a-size fold-out beside the editor. The combobox needs room to show a product
   name; the button sits at its baseline on a desk and drops below on a phone. */
.recipe-sketches__start-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.recipe-sketches__start-form .designer-station-combobox {
  flex: 1 1 280px;
  min-width: 0;
}

/* The generic input rule makes a submit 100% wide; here it is a peer of the
   search box, not a row of its own. */
.recipe-sketches__start-form .button {
  flex: 0 0 auto;
  width: auto;
}

.recipe-sketches__notes {
  display: block;
  margin-top: 0.2rem;
}

.recipe-sketches__thumb {
  float: left;
  width: 48px;
  height: 48px;
  margin-right: 0.6rem;
  border-radius: 6px;
  object-fit: cover;
}

.recipe-sketch-editor__photo {
  margin-bottom: 1.25rem;
}

.recipe-sketch-editor__photo-link {
  display: block;
  margin-bottom: 0.75rem;
}

.recipe-sketch-editor__photo-image {
  display: block;
  width: 100%;
  max-height: 360px;
  border-radius: 8px;
  object-fit: contain;
  background: #f7f4ef;
}

.recipe-sketch-editor__photo-form input[type="file"] {
  max-width: 100%;
}

.recipe-sketch-editor__photo-remove {
  margin-top: 0.5rem;
}

.recipe-sketch-editor__apply {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #eee8df;
}

.recipe-sketch-editor__apply summary {
  cursor: pointer;
  font-weight: 600;
  color: #234039;
}

.recipe-sketch-editor__apply .designer-station-combobox {
  margin-top: 0.75rem;
}

.recipe-sketch-editor__draft-title {
  margin: 0 0 0.25rem;
  font-weight: 600;
  color: #234039;
}

.recipe-sketch-editor__draft .form-note {
  margin: 0 0 0.75rem;
  overflow-wrap: anywhere;
}

.recipe-sketch-editor__draft-form {
  margin-top: 0.75rem;
}

.recipe-sketch-editor__order-lookup {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.recipe-sketch-editor__order-lookup input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}

.recipe-sketch-editor__order-lookup .button {
  flex: 0 0 auto;
  width: auto;
}

.recipe-sketch-editor__lines {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.recipe-sketch-editor__lines li + li {
  margin-top: 0.4rem;
}

/* A line is named, not labelled: undo the form-label capitals. */
.recipe-sketch-editor__lines label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95rem;
  color: inherit;
}

.recipe-sketch-editor__lines input[type="radio"] {
  width: auto;
  margin-top: 0.3rem;
}

.recipe-sketch-editor__lines .form-note {
  display: block;
}

/* Measured columns read right-aligned so magnitudes line up down the column. */
.admin-table th.admin-table-number,
.admin-table td.admin-table-number {
  text-align: right;
  white-space: nowrap;
}

/* Sortable column headings. The heading stays a heading — the arrow, not a
   button chrome, is what says the column is the one doing the ordering. */
.admin-table th .table-sort {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted #cdc3b6;
}

.admin-table th .table-sort:hover,
.admin-table th .table-sort:focus-visible {
  color: #234039;
  border-bottom-color: #234039;
}

.admin-table th .table-sort--active {
  border-bottom-color: transparent;
  font-weight: 600;
}

.markup-variance--over {
  color: #2f6b3a;
}

.markup-variance--under {
  color: #9b2c1c;
}

.markup-variance--even,
.markup-variance--unknown {
  color: #6b6259;
}

/* Build time reads the other way round from price: running over the estimate
   is the costly direction. */
.build-variance--over {
  color: #9b2c1c;
}

.build-variance--under {
  color: #2f6b3a;
}

.build-variance--even {
  color: #6b6259;
}

.admin-table .purchase-order-group-heading {
  background: #f3efe7;
  color: #234039;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-actions {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.admin-actions form {
  display: inline;
}

.admin-actions .text-link {
  border: none;
  background: transparent;
  padding: 0;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.admin-stat {
  background: #f8f4ee;
  padding: 1.2rem;
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.4rem;
}

.admin-stat strong {
  font-size: 1.8rem;
}

.admin-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 0;
}

.admin-details dt {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.75rem;
  color: #6b635b;
}

.admin-details dd {
  margin: 0.3rem 0 0;
  font-weight: 600;
}

/* A denser details card for pages whose header already carries the headline
   facts: narrower columns, tighter gaps, so the stats read as one short strip
   instead of a panel-sized block. Prose rows opt into the full width. */
.admin-details--compact {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem 1.25rem;
}

.admin-details--compact dt {
  font-size: 0.68rem;
  letter-spacing: 0.6px;
}

.admin-details--compact dd {
  margin-top: 0.15rem;
  font-size: 0.95rem;
}

.admin-details--compact .admin-details__wide {
  grid-column: 1 / -1;
}

.admin-two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.admin-two-col h2 {
  margin-bottom: 0.5rem;
}

.admin-inline-stack {
  display: grid;
  gap: 0.4rem;
}

.recipe-readiness-progress {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.35rem 0;
}

.recipe-readiness-header {
  margin-bottom: 1rem;
  align-items: center;
}

.recipe-readiness-header p {
  margin: 0.1rem 0 0;
}

.recipe-readiness-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.65rem;
  padding: 1.15rem;
}

.recipe-readiness-shell .form-grid {
  gap: 0.6rem;
}

.recipe-readiness-shell .field {
  gap: 0.25rem;
  margin-bottom: 0;
}

.recipe-readiness-shell .admin-stat-grid {
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}

.recipe-readiness-shell .admin-stat {
  padding: 0.65rem 0.75rem;
  gap: 0.2rem;
}

.recipe-readiness-shell .admin-stat strong {
  font-size: 1.35rem;
}

.recipe-readiness-card {
  display: grid;
  gap: 0.5rem;
  padding: 0.8rem;
  border: 1px solid #ece2d5;
  border-radius: 0.9rem;
  background: #fffaf4;
}

.recipe-readiness-card p {
  margin: 0;
}

.recipe-readiness-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.3rem 0.7rem;
}

.recipe-readiness-meta div {
  margin: 0;
}

.recipe-readiness-meta dt {
  margin: 0;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b6259;
}

.recipe-readiness-meta dd {
  margin: 0.02rem 0 0;
  color: #2f271f;
}

.recipe-readiness-actions {
  gap: 0.42rem;
  flex-wrap: wrap;
  align-items: center;
}

.recipe-readiness-actions .button_to {
  margin: 0;
}

.recipe-readiness-shell .button {
  padding: 0.38rem 0.68rem;
}

.recipe-readiness-shell .admin-inline-stack {
  gap: 0.28rem;
}

.recipe-readiness-combobox {
  width: 100%;
}

/* Sits between the header and the shell so the undo is still on screen once
   the card that was marked has left the queue. */
.recipe-readiness-undo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid #ece2d5;
  border-radius: 0.9rem;
  background: #fffaf4;
}

.admin-two-col--wide {
  gap: 1.25rem;
}

.admin-stat small {
  color: #6b6259;
  font-size: 0.78rem;
}

.spoilage-stat-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.spoilage-stat-strip .admin-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 0;
  padding: 0.38rem 0.6rem;
  border: 1px solid rgba(31, 29, 26, 0.1);
  border-radius: 999px;
  background: #f8f4ee;
}

.spoilage-stat-strip .admin-stat span {
  overflow: hidden;
  color: rgba(31, 29, 26, 0.64);
  font-size: 0.78rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spoilage-stat-strip .admin-stat strong {
  color: #234039;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .spoilage-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .spoilage-stat-strip {
    grid-template-columns: 1fr;
  }
}

/* Header date picker: a calendar-tile button with a month-grid popover
   whose day cells carry that day's order count. */
.orders-calendar {
  position: relative;
}

.orders-calendar__button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.35rem;
  padding: 0.25rem 0.85rem;
  border: 1px solid #dfd4c7;
  border-radius: 999px;
  background: #f8f4ee;
  color: #473c33;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.orders-calendar__button:hover,
.orders-calendar__button:focus-visible {
  background: #f2e8dc;
  border-color: #cdbca7;
}

.orders-calendar__icon {
  width: 1.05rem;
  height: 1.05rem;
  color: #8c6f52;
  flex-shrink: 0;
}

.orders-calendar__day {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
}

.orders-calendar__meta {
  display: grid;
  line-height: 1.15;
  text-align: left;
}

.orders-calendar__meta strong {
  font-size: 0.78rem;
}

.orders-calendar__meta span {
  font-size: 0.68rem;
  color: #7a6858;
}

.orders-calendar__panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: min(92vw, 19.5rem);
  padding: 0.7rem;
  background: #fff;
  border: 1px solid #dfd4c7;
  border-radius: 0.8rem;
  box-shadow: 0 14px 30px rgba(53, 42, 31, 0.18);
}

.orders-calendar__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.orders-calendar__month {
  font-weight: 700;
}

.orders-calendar__nav-button {
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid #dfd4c7;
  border-radius: 999px;
  background: #f8f4ee;
  color: #473c33;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.orders-calendar__nav-button:hover,
.orders-calendar__nav-button:focus-visible {
  background: #f2e8dc;
}

.orders-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 0.2rem;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a6858;
}

.orders-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.orders-calendar__cell {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 0.22rem 0;
  border-radius: 0.5rem;
  text-decoration: none;
  color: #473c33;
}

.orders-calendar__cell:hover,
.orders-calendar__cell:focus-visible {
  background: #f2e8dc;
}

.orders-calendar__cell.is-today {
  outline: 1px dashed #b79f84;
  outline-offset: -1px;
}

.orders-calendar__cell.is-selected {
  background: #efe3d2;
}

.orders-calendar__cell-day {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.1;
}

.orders-calendar__cell-count {
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #dcefe0;
  color: #1f6b3b;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
}

.orders-calendar__cell-count.is-empty {
  visibility: hidden;
}

.orders-calendar__note {
  margin: 0.45rem 0 0;
  text-align: center;
}

/* Five filters, one row at every width: the cards shrink before they wrap. */
/* Summary filters: one connected, full-width segmented control. The
   segments share a single border, and the active one is filled so it reads
   as the single current choice rather than one card among five. */
.orders-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 0.35rem;
  border: 1px solid #cdbca7;
  border-radius: var(--radius-md);
  background: #f8f4ee;
  overflow: hidden;
}

/* A two-way switch (the purchase order templates' Active / Deactivated): two
   equal segments, kept narrow so they don't stretch across a wide panel. */
.orders-summary-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 22rem;
}

.orders-summary-card {
  display: grid;
  gap: 0.15rem;
  justify-items: center;
  align-content: center;
  text-align: center;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.4rem 0.2rem;
  border-left: 1px solid #cdbca7;
  color: #473c33;
  text-decoration: none;
  transition: background-color 0.18s ease;
}

.orders-summary-card:first-child {
  border-left: 0;
}

.orders-summary-card:hover,
.orders-summary-card:focus-visible {
  background: #f2e8dc;
}

.orders-summary-card:focus-visible {
  outline: 2px solid #234039;
  outline-offset: -2px;
}

.orders-summary-card span {
  font-size: 0.74rem;
  font-weight: 700;
  color: #7a6858;
  white-space: nowrap;
}

.orders-summary-card strong {
  font-size: 1.2rem;
  line-height: 1;
}

.orders-summary-card.is-active,
.orders-summary-card.is-active:hover {
  background: #234039;
  color: #fdfbf7;
}

.orders-summary-card.is-active span {
  color: #cfdcd4;
}

.orders-summary-card.is-active strong {
  color: #fdfbf7;
}

/* Table heading with the visible order value hanging off its right end. */
.orders-table-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.orders-table-title__value {
  font-size: 0.9rem;
  font-weight: 700;
  color: #7a6858;
  white-space: nowrap;
}

.orders-search-print-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.orders-search-print-row .orders-assignment-search {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}

/* The generic .field bottom margin would lift the input off the row's
   centerline next to the action buttons. */
.orders-search-print-row .field {
  margin-bottom: 0;
}

.orders-search-print-row .orders-print-actions {
  margin: 0;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .orders-search-print-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }

  .orders-search-print-row .orders-print-actions {
    justify-content: space-between;
  }
}

.reports-tab-nav {
  display: inline-flex;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.reports-tab-button {
  border: 1px solid #dfd4c7;
  border-radius: 999px;
  padding: 0.38rem 0.8rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: #5f5347;
  text-decoration: none;
  background: #f5eee5;
}

.reports-tab-button.is-active {
  color: #2c5f57;
  border-color: #9dc2bb;
  background: #e7f3f0;
}

.admin-chart {
  display: grid;
  gap: 0.45rem;
}

.admin-chart-row {
  display: grid;
  grid-template-columns: 66px 1fr 38px;
  gap: 0.55rem;
  align-items: center;
}

.admin-chart-label {
  font-size: 0.78rem;
  color: #6b6259;
}

.admin-chart-track {
  height: 0.75rem;
  border-radius: 999px;
  background: #efe7dc;
  overflow: hidden;
}

.admin-chart-track--compare {
  height: auto;
  background: transparent;
  display: grid;
  gap: 0.2rem;
}

.admin-chart-bar {
  display: block;
  height: 0.58rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #638a5b, #86b177);
}

.admin-chart-bar--current {
  background: linear-gradient(90deg, #638a5b, #86b177);
}

.admin-chart-bar--prior {
  background: linear-gradient(90deg, #99a98f, #b9c9ae);
}

.admin-chart-bar--current-alt {
  background: linear-gradient(90deg, #5c7a9f, #78a5cf);
}

.admin-chart-bar--prior-alt {
  background: linear-gradient(90deg, #8ea2bb, #afc4d9);
}

.admin-chart-value {
  text-align: right;
  font-size: 0.82rem;
}

.designer-scorecard-chart {
  min-width: 0;
}

.designer-scorecard-chart__row {
  grid-template-columns: minmax(100px, 132px) minmax(0, 1fr) minmax(120px, max-content);
}

.designer-scorecard-chart__value {
  white-space: nowrap;
}

@media (max-width: 720px) {
  .designer-scorecard-chart__row {
    grid-template-columns: minmax(88px, 112px) minmax(0, 1fr) minmax(96px, max-content);
    gap: 0.4rem;
  }

  .designer-scorecard-chart__value {
    font-size: 0.76rem;
  }
}

.admin-chart-legend {
  display: flex;
  gap: 0.9rem;
  margin-bottom: 0.6rem;
  color: #6b6259;
  font-size: 0.78rem;
}

.admin-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.admin-chart-dot {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  display: inline-block;
}

.admin-chart-dot--current {
  background: #7aa86f;
}

.admin-chart-dot--prior {
  background: #aebea0;
}

.admin-chart-dot--current-alt {
  background: #6c93b7;
}

.admin-chart-dot--prior-alt {
  background: #9fb6cc;
}

.premade-shelf-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-left: 4px solid #dc2626;
}

.premade-row--spoiled td {
  background: #fef2f2;
}

.premade-shelf-age {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #fee2e2;
  color: #991b1b;
  font-size: 0.75rem;
  font-weight: 600;
}

.premade-history {
  white-space: pre-wrap;
  font: inherit;
  margin: 0;
}

.phone-order-cap-warning {
  display: block;
  margin-top: 0.25rem;
  color: #991b1b;
  font-size: 0.8rem;
  font-weight: 600;
}

.phone-order-cap-override,
.phone-order-cutoff-override {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #991b1b;
  margin-bottom: 0.5rem;
}

.admin-table-compact th,
.admin-table-compact td {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.order-show-page .admin-header {
  margin-bottom: 0.65rem;
}

.order-show-page .admin-header h1 {
  margin-bottom: 0.15rem;
}

.order-show-page .admin-header p {
  margin: 0.08rem 0 0;
  line-height: 1.3;
}

.order-show-header-meta {
  color: #2f2a24;
  font-weight: 600;
}

.order-transfer-header-button {
  gap: 0.35rem;
  white-space: nowrap;
}

.order-transfer-header-button__icon {
  font-size: 0.95em;
  line-height: 1;
}

.order-show-panel {
  padding: 1.05rem;
}

.order-show-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.75rem;
}

.order-show-grid > div {
  padding: 0.72rem 0.78rem;
  border: 1px solid #eee8df;
  border-radius: 14px;
  background: #fcfaf7;
}

.order-show-grid h2,
.order-show-panel > h2 {
  margin: 0 0 0.48rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #eee8df;
  color: #3f352b;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.order-show-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.order-show-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  padding: 0;
  border: 1px solid #e2d9ce;
  border-radius: 999px;
  background: #fffaf3;
  color: #6b6055;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.order-show-edit-button:hover,
.order-show-edit-button:focus-visible {
  border-color: #c9bfb3;
  color: #3f352b;
  transform: translateY(-1px);
}

.order-show-edit-button svg {
  width: 0.85rem;
  height: 0.85rem;
}

.order-show-header-meta .order-show-edit-button {
  vertical-align: middle;
  margin-left: 0.25rem;
}

.order-show-page p {
  margin-bottom: 0.34rem;
  line-height: 1.35;
}

.order-show-page .summary-label {
  margin-bottom: 0.12rem;
  font-size: 0.68rem;
}

.order-show-page .summary-value {
  margin-bottom: 0.35rem;
}

.order-show-page .admin-note-block {
  margin-bottom: 0.62rem;
}

.order-show-page .admin-divider {
  margin: 0.85rem 0;
}

.order-show-page .field {
  gap: 0.25rem;
  margin-bottom: 0.58rem;
}

.order-show-page input,
.order-show-page select,
.order-show-page textarea {
  padding: 0.48rem 0.6rem;
}

.order-show-page .button {
  padding: 0.5rem 0.85rem;
}

.order-show-page .button-inline {
  padding: 0.28rem 0.55rem;
}

.order-show-page ul {
  margin: 0.35rem 0 0;
  padding-left: 1.15rem;
}

.order-line-items-table {
  font-size: 0.82rem;
}

.order-line-items-table th,
.order-line-items-table td {
  padding: 0.48rem 0.38rem;
  vertical-align: top;
}

.order-line-items-table .inline-select {
  min-width: 112px;
  padding: 0.28rem 0.38rem;
  font-size: 0.78rem;
}

.order-line-items-table .form-note {
  line-height: 1.25;
}

.order-line-item-variant__link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 150px;
  text-decoration: none;
  color: inherit;
}

a.order-line-item-variant__link:hover span,
a.order-line-item-variant__link:focus-visible span {
  text-decoration: underline;
}

.order-line-item-variant__thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid rgba(44, 40, 35, 0.12);
}

.order-line-item-variant__thumb.placeholder {
  background: linear-gradient(135deg, #f7eee5 0%, #e7d8c5 100%);
}

.order-show-totals {
  max-width: 380px;
  margin: 0.85rem 0 0 auto;
  padding: 0.58rem 0.72rem;
  border: 1px solid #e8e1d8;
  border-radius: 14px;
  background: #fcfaf7;
}

.order-show-totals .admin-total {
  margin: 0;
  padding: 0.32rem 0;
  border-bottom: 1px solid #eee8df;
  font-size: 0.92rem;
}

.order-show-totals .admin-total:last-child {
  border-bottom: 0;
}

.order-show-totals .tax-breakdown {
  padding: 0.1rem 0 0.22rem;
  border-bottom: 1px solid #eee8df;
}

.order-show-totals .tax-breakdown p {
  margin: 0.12rem 0;
  font-size: 0.76rem;
}

.order-show-total-final {
  color: #2f2a24;
  font-size: 1rem;
}

.spoilage-chart-grid {
  align-items: stretch;
}

.spoilage-chart-panel {
  display: grid;
  gap: 0.55rem;
  align-content: start;
}

.spoilage-chart-panel h2 {
  margin-bottom: 0;
}

.spoilage-chart,
.spoilage-pie {
  border: 1px solid rgba(31, 29, 26, 0.12);
  border-radius: 14px;
  padding: 0.55rem;
  background: #fff;
}

.spoilage-chart {
  overflow-x: auto;
}

.spoilage-chart svg {
  display: block;
  min-width: 560px;
  width: 100%;
  height: auto;
}

.spoilage-chart__grid {
  stroke: rgba(31, 29, 26, 0.08);
  stroke-width: 1;
}

.spoilage-chart__axis {
  stroke: rgba(31, 29, 26, 0.22);
  stroke-width: 1.5;
}

.spoilage-chart__axis-label,
.spoilage-chart__date-label {
  fill: rgba(31, 29, 26, 0.62);
  font-size: 12px;
}

.spoilage-chart__date-label {
  text-anchor: middle;
}

.spoilage-chart__line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spoilage-chart__line--value {
  stroke: #b45b3f;
  stroke-width: 3;
}

.spoilage-chart__line--average {
  stroke: #234039;
  stroke-width: 2.5;
  stroke-dasharray: 7 5;
}

.spoilage-chart__point {
  fill: #b45b3f;
  stroke: #fff;
  stroke-width: 2;
}

.spoilage-legend__item--value::before {
  background: #b45b3f;
}

.spoilage-legend__item--average::before {
  height: 0.2rem;
  border-radius: 0;
  background: repeating-linear-gradient(90deg, #234039 0 7px, transparent 7px 12px);
  vertical-align: 0.15rem;
}

.spoilage-pie {
  display: grid;
  grid-template-columns: minmax(130px, 170px) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

.spoilage-pie svg {
  display: block;
  width: 100%;
  max-width: 170px;
  height: auto;
  margin: 0 auto;
}

.spoilage-pie__track {
  fill: #efe7dc;
}

.spoilage-pie__slice {
  stroke: #fff;
  stroke-width: 1.5;
}

.spoilage-pie__legend {
  display: grid;
  gap: 0.38rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.spoilage-pie__legend li {
  display: grid;
  grid-template-columns: 0.8rem minmax(0, 1fr);
  gap: 0 0.45rem;
  align-items: center;
}

.spoilage-pie__swatch {
  grid-row: span 2;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  background: var(--slice-color);
}

.spoilage-pie__name {
  overflow: hidden;
  color: #2f2a24;
  font-size: 0.88rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spoilage-pie__value {
  color: rgba(31, 29, 26, 0.62);
  font-size: 0.82rem;
}

@media (max-width: 760px) {
  .spoilage-pie {
    grid-template-columns: 1fr;
  }

  .spoilage-pie__legend li {
    grid-template-columns: 0.8rem minmax(0, 1fr);
  }
}

.staff-scorecard-day-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(31, 29, 26, 0.35);
  text-underline-offset: 3px;
}

.staff-scorecard-day-link:hover {
  text-decoration-color: currentColor;
}

.staff-scorecard-header {
  align-items: end;
  gap: 1rem;
}

.staff-scorecard-header p {
  max-width: 56rem;
  margin: 0.35rem 0 0;
}

.staff-scorecard-header__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.65rem;
}

.staff-scorecard-header__meta span {
  border: 1px solid #e4d7c9;
  background: linear-gradient(180deg, #fffdfa 0%, #f8f0e8 100%);
  color: #584839;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.88rem;
}

.staff-scorecard-shell {
  display: grid;
  gap: 1.4rem;
  padding: 1.35rem;
  background: linear-gradient(180deg, #fffdfa 0%, #faf6f0 100%);
}

.staff-scorecard-tabs {
  display: grid;
  gap: 0;
  min-width: 0;
}

.staff-scorecard-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.4rem;
  padding: 0 0.35rem;
  margin-bottom: 0;
  border-bottom: 1px solid #d8cabd;
  background: transparent;
  position: relative;
}

.staff-scorecard-tabs__button {
  appearance: none;
  display: grid;
  gap: 0.14rem;
  min-width: 13rem;
  text-align: left;
  padding: 0.9rem 1.1rem 0.82rem;
  margin: 0 0 -1px;
  border: 1px solid #d8cabd;
  border-bottom: 0;
  border-radius: 0.95rem 0.95rem 0 0 !important;
  background: linear-gradient(180deg, #f6ede4 0%, #ebdfd1 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  position: relative;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
  cursor: pointer;
  font: inherit;
  transform: translateY(0.35rem);
}

.staff-scorecard-tabs__button span {
  font-size: 0.96rem;
  line-height: 1.2;
  color: #3f3228;
  font-weight: 650;
}

.staff-scorecard-tabs__button small {
  font-size: 0.76rem;
  font-weight: 500;
  color: #7b6a5b;
}

.staff-scorecard-tabs__button:hover {
  background: linear-gradient(180deg, #fbf5ee 0%, #f2e7dc 100%);
  border-color: #d2c0ae;
}

.staff-scorecard-tabs__button.is-active {
  background: linear-gradient(180deg, #fffdfb 0%, #fff8f1 100%);
  border-color: #d8cabd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  z-index: 2;
  transform: translateY(0);
}

.staff-scorecard-tabs__button.is-active span {
  color: #243a32;
  font-weight: 700;
}

.staff-scorecard-tabs__button.is-active small {
  color: #6e635a;
}

.staff-scorecard-tabs__button.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: #fffdfb;
}

.staff-scorecard-tabs__button:focus-visible {
  outline: 2px solid rgba(36, 58, 50, 0.3);
  outline-offset: 2px;
}

.staff-scorecard-panel {
  display: grid;
  gap: 1.35rem;
  min-width: 0;
  padding: 1.4rem;
  border: 1px solid #d8cabd;
  border-top: 0;
  border-radius: 0 1.1rem 1.1rem 1.1rem;
  background: linear-gradient(180deg, #fffdfb 0%, #fdf8f2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.staff-scorecard-stats {
  margin-bottom: 0;
}

.staff-scorecard-stat {
  border: 1px solid #efe2d3;
  background: linear-gradient(180deg, #fffdfb 0%, #f7efe7 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.staff-scorecard-stat span {
  color: #725d4c;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.staff-scorecard-stat strong {
  color: #2f241d;
}

.staff-scorecard-stat--sage {
  background: linear-gradient(180deg, #f6fbf8 0%, #e8f1eb 100%);
  border-color: #d7e8dd;
}

.staff-scorecard-stat--rose {
  background: linear-gradient(180deg, #fff8fa 0%, #f7e6ea 100%);
  border-color: #edd7de;
}

.staff-scorecard-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-top: 0.2rem;
}

.staff-scorecard-section-heading h2 {
  margin: 0;
}

.staff-scorecard-section-heading p {
  margin: 0.3rem 0 0;
  color: #6f6358;
}

.staff-scorecard-legend {
  margin-bottom: 0.35rem;
}

.staff-scorecard-section {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
  padding: 0.15rem 0 0.1rem;
}

.org-scorecard-task-contribution {
  margin: 0;
}

.org-scorecard-task-detail > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.3rem 0;
}

.org-scorecard-task-detail[open] > summary {
  margin-bottom: 0.5rem;
}

.staff-scorecard-chart {
  padding: 1rem 0 0.8rem;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.staff-scorecard-table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid #eadbcb;
  border-bottom: 1px solid #eadbcb;
  background: rgba(255, 253, 250, 0.75);
}

.staff-scorecard-table {
  margin-bottom: 0;
}

.staff-scorecard-table thead th {
  background: #f8f2ea;
  color: #6b5748;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.staff-scorecard-table tbody tr:nth-child(even) {
  background: rgba(249, 242, 235, 0.65);
}

.staff-scorecard-role {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #f3eadf;
  color: #654f40;
  padding: 0.3rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.staff-scorecard-detail-list {
  display: grid;
  gap: 0;
  min-width: 0;
  border-top: 1px solid #eadbcb;
}

.staff-scorecard-detail-block {
  min-width: 0;
  padding: 1rem 0;
  border-bottom: 1px solid #eadbcb;
}

.staff-scorecard-detail-block--delivery {
  background: transparent;
}

.staff-scorecard-detail-block__header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.staff-scorecard-detail-block__header h3 {
  margin: 0;
}

.staff-scorecard-detail-block__header p {
  margin: 0.2rem 0 0;
  color: #7a6858;
}

.staff-scorecard-detail-block__total {
  min-width: 9rem;
  text-align: right;
}

.staff-scorecard-detail-block__total span {
  display: block;
  color: #7b6757;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.staff-scorecard-detail-block__total strong {
  font-size: 1.15rem;
}

@media (min-width: 960px) {
  .staff-scorecard-detail-block {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: 1.4rem;
    align-items: start;
  }

  .staff-scorecard-detail-block__header {
    margin-bottom: 0;
    padding-top: 0.25rem;
    border-right: 1px solid #efe2d3;
    padding-right: 1.2rem;
    margin-right: 0.2rem;
    min-height: 100%;
    flex-direction: column;
    justify-content: space-between;
  }

  .staff-scorecard-detail-block__total {
    text-align: left;
  }
}

.staff-scorecard-outside-range {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding: 0.9rem 1rem;
  border: 1px solid #edd7de;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff8fa 0%, #f7e6ea 100%);
}

.staff-scorecard-outside-range p {
  margin: 0.3rem 0 0;
  color: #6f6358;
}

.staff-scorecard-unassigned-orders {
  margin-top: 0.65rem;
}

@media (max-width: 720px) {
  .designer-scorecard-chart__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.3rem 0.5rem;
  }

  .designer-scorecard-chart__row .admin-chart-label {
    grid-column: 1;
    grid-row: 1;
  }

  .designer-scorecard-chart__row .admin-chart-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .designer-scorecard-chart__value {
    grid-column: 2;
    grid-row: 1;
  }

  .staff-scorecard-header {
    align-items: start;
    flex-direction: column;
  }

  .staff-scorecard-header__meta {
    justify-content: flex-start;
  }

  .staff-scorecard-shell {
    padding: 0.8rem;
  }

  .staff-scorecard-tabs__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.3rem;
    padding: 0;
  }

  .staff-scorecard-tabs__button {
    min-width: 0;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.65rem 0.5rem;
    transform: none;
  }

  .staff-scorecard-tabs__button span {
    font-size: 0.82rem;
    text-align: center;
  }

  .staff-scorecard-tabs__button small {
    display: none;
  }

  .staff-scorecard-panel {
    padding: 0.85rem;
    border-radius: 0 0 1rem 1rem;
  }

  .staff-scorecard-table {
    display: inline-table;
    width: max-content;
    min-width: max-content;
    max-width: none;
    overflow: visible;
  }

  .staff-scorecard-table th,
  .staff-scorecard-table td {
    white-space: nowrap;
  }

  .staff-scorecard-table-wrap::after {
    content: "Swipe table to see more";
    position: sticky;
    left: 0;
    display: block;
    width: max-content;
    padding: 0.45rem 0.1rem 0.25rem;
    color: #7b6757;
    font-size: 0.72rem;
  }

  .staff-scorecard-detail-block__header {
    flex-direction: column;
  }

  .staff-scorecard-detail-block__total {
    text-align: left;
  }

  .staff-scorecard-section-heading {
    align-items: start;
  }

  .staff-scorecard-outside-range {
    flex-direction: column;
    align-items: start;
  }
}

.admin-divider {
  height: 1px;
  background: #eee8df;
  margin: 2rem 0;
}

.admin-total {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  font-size: 1.1rem;
}

.admin-note-block {
  margin-bottom: 1.25rem;
}

.admin-note-block:last-child {
  margin-bottom: 0;
}

.import-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1rem;
}

.import-card {
  border: 1px solid #e7ddd2;
  border-radius: 12px;
  background: #fcf8f2;
  padding: 0.9rem;
  display: grid;
  gap: 0.5rem;
}

.import-card h2 {
  margin: 0;
  font-size: 1.05rem;
}

.import-card p {
  margin: 0;
  color: #5f5347;
  font-size: 0.88rem;
}

.import-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.14rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid #d7cec1;
  background: #f8f2e9;
  color: #5a4f43;
}

.import-status--applied {
  border-color: #9ac39d;
  background: #ebf7ed;
  color: #2d6831;
}

.import-status--dry-run-complete {
  border-color: #ceb27e;
  background: #fff5e3;
  color: #7f5a1e;
}

.import-status--failed {
  border-color: #d28a8a;
  background: #fdecec;
  color: #8a2a2a;
}

.sales-training-page {
  display: grid;
  gap: 0.9rem;
}

.sales-training-page .admin-header {
  margin-bottom: 0.15rem;
}

.sales-training-page .admin-header h1 {
  margin-bottom: 0.35rem;
}

.sales-training-page .admin-header-actions {
  gap: 0.45rem;
}

.sales-training-table {
  background: #fff;
  border: 1px solid #e3dbcf;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(33, 28, 22, 0.04);
}

.sales-training-table th,
.sales-training-table td {
  padding-top: 0.72rem;
  padding-bottom: 0.72rem;
  vertical-align: top;
}

.sales-training-table thead th {
  background: #f8f3ec;
  color: #4e463d;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sales-training-table tbody th {
  width: 160px;
  background: #fcf9f4;
  color: #4b433b;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sales-training-table strong {
  display: inline-block;
  margin-bottom: 0.1rem;
  color: #1f1d1a;
}

.sales-training-table .form-note {
  margin-bottom: 0;
  font-size: 0.83rem;
  line-height: 1.45;
}

.sales-training-page--index .sales-training-table td:nth-child(3) {
  min-width: 230px;
}

.sales-training-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: -0.1rem 0 0.05rem;
}

.sales-training-split {
  align-items: start;
  gap: 0.85rem;
}

.sales-training-split > div {
  min-width: 0;
}

.sales-training-section-heading {
  margin-top: 0.2rem;
}

.sales-training-import-page {
  display: grid;
  gap: 0.9rem;
}

.sales-training-import-page .admin-header {
  margin-bottom: 0.1rem;
}

.sales-training-import-page > .form-note {
  margin-bottom: 0;
}

.sales-training-import-sample {
  margin: 0;
  padding: 0.95rem 1rem;
  overflow-x: auto;
  border: 1px solid #ddd3c4;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbf7f1 0%, #f6efe5 100%);
  color: #463d34;
  font-size: 0.84rem;
  line-height: 1.5;
}

.sales-training-import-sample code {
  font-family: "IBM Plex Sans", "SFMono-Regular", Consolas, monospace;
}

.sales-training-import-notes {
  margin-top: 0.15rem;
}

.sales-training-import-details {
  margin: 0;
  padding: 0.95rem 1rem;
  border: 1px solid #e3dbcf;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(33, 28, 22, 0.04);
}

.sales-training-import-page .admin-stat-grid {
  margin: 0.1rem 0;
}

.sales-training-editor-page {
  display: grid;
  gap: 1rem;
}

.sales-training-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(240px, 0.8fr);
  gap: 1rem;
  align-items: start;
}

.sales-training-form {
  display: grid;
  gap: 0.9rem;
}

.sales-training-form__section {
  background: #fff;
  border: 1px solid #e3dbcf;
  border-radius: 14px;
  padding: 1rem 1rem 1.05rem;
  box-shadow: 0 6px 18px rgba(33, 28, 22, 0.04);
}

.sales-training-form__section-header {
  margin-bottom: 0.75rem;
}

.sales-training-form__section-header h2 {
  margin: 0 0 0.2rem;
  font-size: 1rem;
}

.sales-training-form__section-header .form-note {
  margin: 0;
}

.sales-training-form__grid {
  gap: 0.8rem 1rem;
}

.sales-training-form__grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sales-training-form .field {
  margin-bottom: 0.85rem;
}

.sales-training-form .field:last-child {
  margin-bottom: 0;
}

.sales-training-form input::placeholder,
.sales-training-form textarea::placeholder {
  color: #918577;
}

.sales-training-form input:focus,
.sales-training-form select:focus,
.sales-training-form textarea:focus {
  border-color: #b88b5f;
  box-shadow: 0 0 0 3px rgba(184, 139, 95, 0.12);
}

.sales-training-form textarea {
  min-height: 0;
}

.sales-training-form__toggle-field {
  align-self: end;
}

.sales-training-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.7rem 0.85rem;
  border: 1px solid #ddd3c4;
  border-radius: 12px;
  background: #fbf7f1;
  color: #4d463d;
  font-size: 0.92rem;
  font-weight: 600;
}

.sales-training-toggle input {
  margin: 0;
}

.sales-training-form__actions {
  margin-top: -0.1rem;
}

.sales-training-editor__sidebar {
  display: grid;
  gap: 0.55rem;
  padding: 0.95rem 1rem;
  background: linear-gradient(180deg, #fbf7f1 0%, #f5eee3 100%);
  border: 1px solid #e2d7c7;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(33, 28, 22, 0.04);
}

.sales-training-editor__sidebar h2 {
  margin: 0 0 0.15rem;
  font-size: 1rem;
}

.sales-training-editor__sidebar .form-note {
  margin: 0;
  line-height: 1.5;
}

.sales-training-editor__sidebar .form-note + .form-note {
  padding-top: 0.15rem;
  border-top: 1px solid rgba(184, 139, 95, 0.12);
}

@media (max-width: 900px) {
  .sales-training-table tbody th {
    width: 120px;
  }

  .sales-training-editor {
    grid-template-columns: 1fr;
  }

  .sales-training-form__grid--three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .sales-training-page,
  .sales-training-import-page {
    gap: 0.75rem;
  }

  .sales-training-table th,
  .sales-training-table td {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  .sales-training-actions {
    margin-top: 0;
  }
}

.admin-auth {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem;
}

.admin-auth-alert {
  width: min(420px, 100%);
  margin-top: 1rem;
  margin-bottom: 0;
}

.admin-auth-card {
  background: #fff;
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  width: min(420px, 100%);
  box-shadow: 0 20px 50px rgba(20, 20, 20, 0.18);
}

.admin-auth-card h1 {
  margin-bottom: 0.5rem;
}

.admin-auth-card p {
  margin-bottom: 1.5rem;
  color: #5b5650;
}

.admin-auth-body .field label,
.admin-body .field label {
  font-family: "Manrope", "Helvetica Neue", sans-serif;
}

.admin-body input,
.admin-body select,
.admin-body textarea,
.admin-auth-body input,
.admin-auth-body select,
.admin-auth-body textarea {
  font-family: "Manrope", "Helvetica Neue", sans-serif;
}

.admin-page p,
.admin-dashboard p {
  color: #5b5650;
}

.button.order-cancel-button {
  color: #8c3f27;
  border-color: #cfa08e;
}

.button.order-cancel-button:hover {
  background: #8c3f27;
  border-color: #8c3f27;
  color: #fdf8f4;
}

.orders-summary-card--canceled:not(.is-active) strong {
  color: #8c3f27;
}

.order-cancel-modal-scope {
  display: inline-flex;
}

.button.primary.order-cancel-confirm-button {
  background: #8c3f27;
  border-color: #8c3f27;
  color: #fdf8f4;
}

.button.primary.order-cancel-confirm-button:hover:not([disabled]) {
  background: #6f3220;
  border-color: #6f3220;
}

.order-cancel-effects {
  margin-bottom: 1rem;
  padding: 0.78rem 0.9rem;
  border: 1px solid #eee8df;
  border-radius: var(--radius-sm);
  background: #fcfaf7;
}

.order-cancel-effects ul {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
}

.order-cancel-effects li {
  margin-bottom: 0.25rem;
}

.order-cancel-effects__warning {
  color: #8c3f27;
  font-weight: 600;
}

.order-cancel-kind {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.order-cancel-kind legend {
  width: 100%;
  margin-bottom: 0.45rem;
  padding: 0;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6b6259;
}

.order-cancel-kind__option,
.order-cancel-email {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin: 0;
  font-family: inherit;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: #2f2a25;
  cursor: pointer;
}

.order-cancel-kind__option input,
.order-cancel-email input {
  width: auto;
  margin: 0;
  flex: 0 0 auto;
}

.order-cancel-email {
  margin-bottom: 0.5rem;
}

.order-fulfillment-switch-button {
  margin-top: 0.35rem;
}

.order-canceled-pill {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: #f6e0d8;
  color: #8c3f27;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.phone-order-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1.25rem;
}

.phone-order-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.phone-order-page input[type="radio"],
.phone-order-page input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
}

.phone-order-page .form-section {
  margin-bottom: 0;
  padding: 1rem;
  border: 1px solid #e9e0d3;
  border-radius: var(--radius-md);
  background: #fdfbf8;
}

.phone-order-page .form-section > h3 {
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #efe6d8;
  font-size: 1rem;
  color: #3d3731;
}

/* Inline labels: label sits in a fixed left column instead of over the input,
   roughly halving each field's height. Fields whose label belongs above a wide
   widget (date week-pickers, hosted card fields, the custom-item row) opt back
   into the stacked layout below. */
.phone-order-page .field {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.3rem 0.65rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.phone-order-page .field > label {
  font-size: 0.72rem;
  line-height: 1.3;
}

/* Inside side-by-side field grids the fixed label column would swallow the
   narrow cells (City/State/Zip), so labels size to their text instead. */
.phone-order-page .form-grid .field {
  grid-template-columns: max-content minmax(0, 1fr);
}

.phone-order-page .form-grid {
  gap: 0.4rem 0.75rem;
}

/* Once the pair grids collapse to one column, text-sized labels leave the
   inputs ragged; snap back to the shared fixed column. The locality row stays
   two-up at this width, so its short labels keep sizing to their text. */
@media (max-width: 640px) {
  .phone-order-page .form-grid:not(.form-grid--locality) .field {
    grid-template-columns: 7.5rem minmax(0, 1fr);
  }
}

.phone-order-page .field > .form-note,
.phone-order-page .field > .phone-order-results,
.phone-order-page .field > .inline-field {
  grid-column: 1 / -1;
}

.phone-order-page .field:has(> textarea) {
  align-items: start;
}

.phone-order-page .field:has(> textarea) > label {
  padding-top: 0.55rem;
}

.phone-order-page .delivery-date,
.phone-order-page .pickup-date,
.phone-order-page .clover-card-fields .field,
.phone-order-page .phone-order-custom-row .field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
}

.phone-order-page .delivery-date > label,
.phone-order-page .pickup-date > label,
.phone-order-page .clover-card-fields .field > label,
.phone-order-page .phone-order-custom-row .field > label {
  font-size: 0.85rem;
  padding-top: 0;
}

.phone-order-page .form-section > .field:last-child {
  margin-bottom: 0;
}

.phone-order-top-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1rem;
  align-items: start;
}

.form-grid--locality {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 640px) {
  .form-grid--locality {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .form-grid--locality .field:first-child {
    grid-column: 1 / -1;
  }
}

.phone-order-results {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.phone-order-results:empty {
  display: none;
}

.phone-order-result {
  border: 1px solid #e1dad0;
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  background: #fff;
  text-align: left;
  font-weight: 600;
  cursor: pointer;
}

.phone-order-result:hover {
  border-color: #cbbcad;
  background: #fdfaf6;
}

.phone-order-add-input {
  width: 100%;
}

.phone-order-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
}

.phone-order-product-grid:not(:empty) {
  margin-top: 0.75rem;
}

.phone-order-product-tile {
  display: grid;
  gap: 0.1rem;
  padding: 0;
  border: 1px solid #e1dad0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.phone-order-product-tile:hover,
.phone-order-product-tile:focus-visible {
  border-color: #cbbcad;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(26, 19, 13, 0.12);
}

.phone-order-tile-photo {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
}

.phone-order-tile-photo--empty {
  display: grid;
  place-items: center;
  background: #f2ece2;
  color: #96897a;
  font-size: 0.8rem;
}

.phone-order-tile-name {
  display: block;
  padding: 0.45rem 0.6rem 0;
  font-weight: 600;
  line-height: 1.25;
}

.phone-order-tile-meta {
  display: block;
  padding: 0 0.6rem 0.5rem;
  color: #6a6157;
  font-size: 0.85rem;
}

.phone-order-quantity {
  width: 64px;
}

.phone-order-cart {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.phone-order-payment .radio-group {
  margin-bottom: 0.85rem;
}

.clover-card-fields {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #d8cec1;
  border-radius: var(--radius-md);
  background: #fbf8f3;
}

.clover-card-fields__details {
  display: grid;
  grid-template-columns: 0.85fr 1fr 1.2fr;
  gap: 0.85rem;
}

.clover-card-fields__details .field {
  min-width: 0;
}

.clover-card-fields__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.clover-card-fields__security-note {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #625b53;
  font-size: 0.78rem;
  line-height: 1.4;
}

.clover-card-fields__security-note svg {
  flex: 0 0 auto;
}

.checkout-payment {
  padding: clamp(1.25rem, 3vw, 2rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--forest) 18%, transparent);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
    rgba(255, 255, 255, 0.88);
}

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

.checkout-payment__heading h3 {
  margin: 0.15rem 0 0;
}

.checkout-payment__step {
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.checkout-payment__secure {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--forest) 10%, white);
  color: var(--forest);
  font-size: 0.75rem;
  font-weight: 700;
}

.checkout-payment__intro {
  max-width: 44rem;
  margin: 0.75rem 0 0;
  color: #625b53;
  font-size: 0.94rem;
}

.clover-card-fields--storefront {
  margin-top: 1.35rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.clover-card-fields--storefront .field {
  margin-bottom: 0.9rem;
}

.clover-card-fields--storefront .clover-field {
  height: 54px;
  padding-inline: 0.9rem;
  border: 1.5px solid #aa9d8d;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(30, 27, 24, 0.04);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.clover-card-fields--storefront .clover-field:focus-within {
  border-color: var(--accent-dark);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.clover-card-fields--storefront .clover-field iframe {
  height: 50px !important;
}

.clover-card-fields--storefront .clover-card-fields__security-note {
  padding-top: 0.15rem;
  border-top: 1px solid rgba(44, 40, 35, 0.08);
}

.clover-field {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: 46px;
  padding: 0 0.75rem;
  overflow: hidden;
  border: 1px solid #9b8e7f;
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(30, 27, 24, 0.08);
}

.clover-field iframe {
  width: 100% !important;
  height: 42px !important;
  min-height: 0;
  border: 0;
}

.clover-payment-error {
  color: #8c3f27;
  font-weight: 700;
  margin: 0.5rem 0 0;
}

@media (max-width: 600px) {
  .checkout-payment__heading {
    align-items: center;
  }

  .checkout-payment__secure {
    padding-inline: 0.5rem;
  }

  .clover-card-fields__details {
    grid-template-columns: 1fr 1fr;
  }

  .clover-card-fields__postal {
    grid-column: 1 / -1;
  }
}

.phone-order-cart-table {
  width: 100%;
  display: block;
}

.phone-order-cart-table thead {
  display: none;
}

.phone-order-cart-table tbody {
  display: grid;
  gap: 0.4rem;
}

.phone-order-cart-table tr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 0.35rem 0.75rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid #e9e0d3;
  border-radius: var(--radius-sm);
  background: #fff;
}

.phone-order-line-photo {
  line-height: 0;
}

.phone-order-line-thumb {
  display: block;
  width: 52px;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border-radius: 0.45rem;
  background: #f2ece2;
}

.phone-order-cart-table td {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
}

.phone-order-line-main strong {
  display: block;
  line-height: 1.3;
}

.phone-order-line-meta {
  display: block;
  color: #6a6157;
  font-size: 0.85rem;
}

.phone-order-line-x {
  color: #96897a;
}

.phone-order-line-notes {
  margin-top: 0.35rem;
}

.phone-order-notes-input {
  width: 100%;
  max-width: 34rem;
  padding: 0.3rem 0.55rem;
  border-color: rgba(30, 27, 24, 0.14);
  font-size: 0.85rem;
  background: #fdfaf5;
}

.phone-order-notes-input::placeholder {
  color: #a99d8e;
}

.order-line-item-note {
  margin-top: 0.3rem;
  color: #7a5a1f;
}

/* Staff-only order notes: tinted so it reads as internal at a glance. */
.admin-note-block--internal {
  padding: 0.6rem 0.8rem;
  border: 1px dashed #d9c9a8;
  border-radius: var(--radius-sm);
  background: #fbf6ec;
}

.admin-note-block--internal p {
  margin: 0 0 0.35rem;
}

.admin-note-block--internal p:last-child {
  margin-bottom: 0;
}

/* Per-line staff note, shown wherever production staff read a line item.
   The left border keeps it legible on black-and-white pick-list printouts. */
.line-item-note {
  display: block;
  margin: 0.35rem 0 0;
  padding: 0.35rem 0.6rem;
  border-left: 3px solid #d9a437;
  border-radius: 0 0.45rem 0.45rem 0;
  background: #fbf3e2;
  color: #6d5426;
  font-size: 0.85rem;
  line-height: 1.4;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.designer-station-product__line-note {
  margin: 0.35rem 0;
  padding: 0.45rem 0.65rem;
  border-left: 3px solid #d9a437;
  border-radius: 0 0.45rem 0.45rem 0;
  background: #fbf3e2;
  color: #6d5426;
}

.phone-order-line-total {
  min-width: 4.5rem;
  font-weight: 700;
  text-align: right;
}

.phone-order-remove {
  border: 0;
  background: transparent;
  color: #96897a;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.3rem 0.45rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.phone-order-remove:hover {
  color: #8c3d2e;
  background: #f7efe6;
}

@media (max-width: 640px) {
  .phone-order-cart-table tr {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .phone-order-line-photo {
    grid-row: 1 / 3;
    grid-column: 1;
    align-self: start;
  }

  .phone-order-line-thumb {
    width: 44px;
  }

  .phone-order-line-main {
    grid-row: 1;
    grid-column: 2;
  }

  .phone-order-line-remove {
    grid-row: 1;
    grid-column: 3;
    align-self: start;
    justify-self: end;
  }

  .phone-order-line-controls {
    grid-row: 2;
    grid-column: 2;
  }

  .phone-order-line-total {
    grid-row: 2;
    grid-column: 3;
    min-width: 0;
  }

  .phone-order-quantity {
    width: 52px;
  }

  .phone-order-price {
    width: 72px;
  }
}

.phone-order-addon-list {
  margin-top: 0.4rem;
  color: #6a6157;
  font-size: 0.9rem;
  display: grid;
  gap: 0.2rem;
}

.phone-order-addon-trigger {
  margin-top: 0.35rem;
}

.addon-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 80;
}

.addon-modal.is-open {
  display: block;
}

.addon-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 16, 12, 0.5);
}

.addon-modal-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem;
  width: min(880px, 92vw);
  max-height: 85vh;
  overflow: auto;
  margin: 6vh auto 0;
  box-shadow: 0 30px 60px rgba(12, 10, 8, 0.25);
}

.addon-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

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

.addon-modal-card-item {
  border: 1px solid #e7ded2;
  border-radius: var(--radius-sm);
  padding: 1rem;
  background: #fdfaf7;
  display: grid;
  gap: 0.75rem;
}

.phone-order-quantity-form {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.phone-order-price-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-weight: 600;
  color: #5b5650;
}

.phone-order-price {
  width: 96px;
}

.phone-order-catalog-price {
  font-size: 0.78rem;
  color: #96897a;
}

.phone-order-custom-item {
  margin-top: 0.6rem;
}

.phone-order-custom-item > summary {
  width: fit-content;
  cursor: pointer;
  color: var(--accent-dark);
  font-weight: 600;
  font-size: 0.88rem;
}

.phone-order-custom-item[open] > summary {
  margin-bottom: 0.5rem;
}

.phone-order-custom-row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.9fr) minmax(0, 0.6fr) auto;
  gap: 0.6rem;
  align-items: end;
}

.phone-order-custom-row .field {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .phone-order-custom-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .phone-order-custom-row .field:first-child,
  .phone-order-custom-row .button {
    grid-column: 1 / -1;
  }
}

.phone-order-cart-total {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  padding-top: 0.5rem;
  border-top: 1px solid #e2d9cd;
}

.phone-order-empty {
  margin: 0;
  color: #6b645c;
}

.phone-order-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid #e3d9ca;
}

.phone-order-summary-totals {
  display: flex;
  align-items: baseline;
  gap: 0.3rem 1.25rem;
  flex-wrap: wrap;
  min-width: 0;
}

.phone-order-summary-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  color: #6b6259;
  font-size: 0.85rem;
  white-space: nowrap;
}

.phone-order-summary-item strong {
  color: #2f2a24;
  font-size: 1rem;
}

.phone-order-summary-item--total strong {
  font-size: 1.2rem;
}

.phone-order-place-button {
  flex: 0 0 auto;
  min-height: 2.9rem;
  padding-inline: 2.25rem;
}

.phone-order-summary-totals .tax-breakdown {
  flex-basis: 100%;
}

.phone-order-summary-totals .tax-breakdown:not(:has(p)) {
  display: none;
}

.phone-order-summary-totals .tax-breakdown p {
  margin: 0;
  font-size: 0.72rem;
}

@media (max-width: 900px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-mobile-menu-toggle {
    display: inline-flex;
    position: fixed;
    top: max(0.85rem, env(safe-area-inset-top));
    left: max(0.9rem, env(safe-area-inset-left));
    z-index: 95;
    box-shadow: 0 10px 24px rgba(26, 19, 13, 0.18);
  }

  .admin-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 11, 8, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 89;
    border: 0;
    padding: 0;
    touch-action: none;
  }

  .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(84vw, 330px);
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 90;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-104%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0.22s;
    gap: 1.4rem;
    padding: 1.25rem 1.25rem 1.5rem;
    padding-top: max(1.25rem, env(safe-area-inset-top));
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    box-shadow: 0 18px 55px rgba(15, 11, 8, 0.4);
  }

  .admin-shell.is-nav-open .admin-sidebar {
    transform: translateX(0);
    visibility: visible;
  }

  .admin-shell.is-nav-open .admin-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Pin the page while the drawer is open so the background can't scroll and
     the layout can't be panned; JS sets the inline `top` to preserve position. */
  .admin-body.admin-nav-open {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .admin-sidebar-close {
    display: inline-flex;
  }

  /* Comfortable thumb-sized rows inside the drawer */
  .admin-nav-heading {
    min-height: 2.75rem;
    padding: 0.5rem 0;
    font-size: 1rem;
  }

  .admin-nav-items {
    gap: 0.1rem;
    padding-left: 0.25rem;
  }

  .admin-nav-items a {
    min-height: 2.75rem;
    padding: 0.6rem 0.7rem;
    font-size: 1rem;
  }

  .admin-shop-select select {
    font-size: 1rem;
  }

  .admin-footer {
    margin-top: 0;
    margin-left: 0;
  }

  .admin-footer .button_to {
    width: 100%;
  }

  .admin-logout {
    width: 100%;
    min-height: 2.75rem;
  }

  .admin-main {
    /* Top padding clears the floating menu pill (fixed at the top-left) */
    padding: 3.65rem 0.9rem 2rem;
    padding-left: max(0.9rem, env(safe-area-inset-left));
    padding-right: max(0.9rem, env(safe-area-inset-right));
    min-width: 0;
  }

  /* Prevent focus zoom on iOS (needs >=16px) and keep wide tables reachable */
  .admin-body input,
  .admin-body select,
  .admin-body textarea {
    font-size: 1rem;
  }

  .admin-table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Edge shadows that ride the scroll position (background-attachment:
       local), so a table wider than the phone visibly says "more this way"
       instead of silently hiding its rightmost columns — often the actions. */
    background:
      linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left / 40px 100%,
      linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right / 40px 100%,
      radial-gradient(farthest-side at 0 50%, rgba(31, 29, 26, 0.18), transparent) left / 14px 100%,
      radial-gradient(farthest-side at 100% 50%, rgba(31, 29, 26, 0.18), transparent) right / 14px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }

  .admin-header,
  .admin-page-header {
    align-items: flex-start;
    margin-bottom: 0.85rem;
  }

  .users-profile-card {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .phone-order-panel {
    padding: 1rem;
  }

  .phone-order-page .form-section {
    padding: 0.85rem;
  }

  .phone-order-summary,
  .phone-order-place-button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .admin-sidebar,
  .admin-sidebar-backdrop {
    transition: none;
  }
}

.confirmation {
  padding: 4rem 6vw 6rem;
  display: flex;
  justify-content: center;
}

.confirmation-card {
  background: rgba(255, 255, 255, 0.86);
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  max-width: 720px;
}

.confirmation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.confirmation-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.page-index,
.blog-index,
.page-show,
.blog-show {
  padding: 3.5rem 6vw 5rem;
}

.page-header {
  margin-bottom: 2.5rem;
}

.page-grid,
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.page-card,
.blog-card {
  background: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-md);
  border: 1px solid rgba(44, 40, 35, 0.08);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 18px 40px rgba(22, 19, 16, 0.08);
}

.page-card.featured {
  background: linear-gradient(140deg, #fdf8f2 0%, #f1e3d4 100%);
}

.page-card-meta,
.blog-meta {
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-size: 0.85rem;
  color: #6a6259;
}

.blog-excerpt {
  color: #4a433b;
  margin-bottom: 0.5rem;
}

.page-body {
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  background: var(--clay);
  color: var(--charcoal);
  border-radius: var(--radius-lg);
  padding: 0.2rem 0.7rem;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
}

.storefront-footer {
  padding: 3.5rem 6vw 4rem;
  background: rgba(255, 255, 255, 0.7);
  border-top: 1px solid rgba(44, 40, 35, 0.1);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  align-items: start;
}

.footer-grid h2,
.footer-grid h3 {
  margin-bottom: 0.75rem;
}

.footer-grid a {
  color: var(--accent-dark);
}

.footer-hours {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
  font-size: 0.9rem;
}

.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.footer-links {
  display: grid;
  gap: 0.5rem;
  font-family: "Work Sans", "Helvetica Neue", sans-serif;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-self: start;
}

.footer-logo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  object-fit: cover;
  border: 1px solid rgba(44, 40, 35, 0.12);
}

.footer-seo p {
  max-width: 900px;
}

.link-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.copy-text {
  cursor: pointer;
  transition: color 0.2s ease;
}

.copy-text:hover {
  color: var(--accent-dark);
  text-decoration: underline;
}

.link-copy a {
  word-break: break-all;
}

.copy-button {
  border: 1px solid rgba(30, 27, 24, 0.2);
  background: #fff;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.copy-button svg {
  width: 16px;
  height: 16px;
  fill: var(--accent-dark);
}

.copy-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(24, 20, 16, 0.12);
}

.copy-button.copied {
  background: var(--accent);
  border-color: transparent;
}

.copy-button.copied svg {
  fill: var(--dust);
}

.trix-content {
  line-height: 1.7;
}

.trix-content h1,
.trix-content h2,
.trix-content h3 {
  margin-top: 1.8rem;
}

.trix-content a {
  color: var(--accent-dark);
  text-decoration: underline;
}

/* Design notes and customer notes stack; the customer editor needs full width. */
.proposal-notes-rows {
  display: grid;
  gap: 1.5rem;
}

.proposal-notes-editor {
  min-width: 0;
}

.proposal-notes-editor__template-control {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.proposal-notes-editor__template-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Subordinate to the field label above it. Uppercased and letter-spaced like a
   field label, it outweighed "Notes for the customer" and read as though the
   field label belonged to the picker rather than to the editor below. */
.proposal-notes-editor__template-label {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: none;
  color: rgba(30, 27, 24, 0.62);
}

.proposal-notes-editor__template-heading > a {
  font-size: 0.85rem;
}

/* The note-group buttons: one click puts a whole bundle in the tray, so they sit
   above the filter where they are seen before anyone starts hunting note by note. */
.proposal-notes-editor__groups {
  display: grid;
  gap: 0.35rem;
}

.proposal-notes-editor__groups-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(30, 27, 24, 0.62);
}

.proposal-notes-editor__groups-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.proposal-notes-editor__group-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.3rem 0.65rem;
  font-size: 0.9rem;
}

.proposal-notes-editor__group-button-count {
  padding: 0 0.35rem;
  border-radius: 999px;
  background: rgba(30, 27, 24, 0.08);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.admin-inline-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}

.proposal-notes-editor__filter-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.proposal-notes-editor__filter-input {
  width: 100%;
}

/* The library is browsed inside a fixed height so a fifty-note list cannot push
   the editor off the screen; the groups below collapse to keep it short. */
.proposal-notes-editor__template-list {
  display: grid;
  gap: 0.25rem;
  align-content: start;
  max-height: 18rem;
  overflow-y: auto;
  border: 1px solid rgba(30, 27, 24, 0.14);
  border-radius: var(--radius-sm);
  background: #fffdfa;
  padding: 0.35rem;
}

.proposal-notes-editor__category {
  border-radius: var(--radius-sm);
}

.proposal-notes-editor__category[hidden] {
  display: none;
}

.proposal-notes-editor__category-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
}

.proposal-notes-editor__category-summary:hover {
  background: rgba(30, 27, 24, 0.05);
}

.proposal-notes-editor__category-count {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(30, 27, 24, 0.6);
  font-variant-numeric: tabular-nums;
}

/* One line per note. Nothing here may grow taller than its text: the row count
   is what makes a large library browsable. */
.proposal-notes-editor__template-item {
  padding: 0.15rem 0.5rem 0.15rem 1.25rem;
  border-radius: var(--radius-sm);
}

.proposal-notes-editor__template-item[hidden] {
  display: none;
}

.proposal-notes-editor__template-item.is-selected {
  background: rgba(30, 27, 24, 0.05);
}

/* flex-wrap, so an opened preview can claim a second line; and the label GROWS
   rather than shrinking — with space-between and no grow it collapsed to its
   narrowest width and broke every name one word per line. */
.proposal-notes-editor__template-item-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.proposal-notes-editor__template-choice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}

/* `input { width: 100% }` is global in this stylesheet, and it applies to a
   checkbox too — which is what pushed the note's name to the far edge of its
   label and broke long names one word per line. The same width: auto reset the
   other checkbox rows in the admin use. */
.proposal-notes-editor__template-choice input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
  width: auto;
}

/* A note's name is content, not a field label. Without this it inherits the
   admin label styling from the <label> wrapping it and renders shouted and
   letter-spaced, which is what made three-word names wrap onto three lines. */
.proposal-notes-editor__template-name {
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.95rem;
  font-weight: 500;
}

.proposal-notes-editor__filter-empty {
  margin: 0.35rem 0.5rem;
}

/* The order the notes go in is set once, here, rather than by a pair of arrows
   on every row of the library above. */
.proposal-notes-editor__selection {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* The numbers are the point — "inserted in this order" has to be legible as an
   order. Numbered with a counter rather than a list marker because the rows are
   laid out with grid, and any display other than list-item suppresses the
   marker entirely; the counter also renumbers itself when a row moves. */
.proposal-notes-editor__selected-list {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding-left: 0;
  list-style: none;
  counter-reset: selected-note;
}

.proposal-notes-editor__selected-item {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  counter-increment: selected-note;
}

.proposal-notes-editor__selected-item::before {
  content: counter(selected-note) ".";
  color: rgba(30, 27, 24, 0.6);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.proposal-notes-editor__selected-name {
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

.proposal-notes-editor__order-controls {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.proposal-notes-editor__order-controls .button {
  min-width: 2rem;
  padding: 0.25rem 0.45rem;
  margin: 0;
}

.proposal-notes-editor__preview {
  margin: 0;
  flex: 0 0 auto;
}

/* Open, it takes a row of its own so the wording is read at full width. The row
   is a wrapping flex line, so this moves the body below the name rather than
   squeezing it into the right-hand column. */
.proposal-notes-editor__preview[open] {
  flex: 1 1 100%;
}

.proposal-notes-editor__preview summary {
  width: fit-content;
  color: var(--accent-dark);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.proposal-notes-editor__preview-body {
  margin-top: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-left: 3px solid rgba(30, 27, 24, 0.16);
  background: #fff;
  font-size: 0.9rem;
}

.proposal-notes-editor__preview-body > :first-child {
  margin-top: 0;
}

.proposal-notes-editor__preview-body > :last-child {
  margin-bottom: 0;
}

.proposal-notes-editor__insert-button {
  justify-self: start;
}

.proposal-notes-editor trix-toolbar .trix-button--icon-attach,
.proposal-notes-editor trix-toolbar .trix-button--icon-link,
.proposal-notes-editor trix-toolbar .trix-button--icon-strike,
.proposal-notes-editor trix-toolbar .trix-button--icon-quote,
.proposal-notes-editor trix-toolbar .trix-button--icon-code,
.proposal-notes-editor trix-toolbar .trix-button-group--file-tools,
.proposal-notes-editor trix-toolbar .trix-button-group--history-tools,
.proposal-notes-editor trix-toolbar .trix-dialogs {
  display: none;
}

.proposal-notes-editor__underline-button {
  font-weight: 700;
}

trix-toolbar .trix-button--icon.proposal-notes-editor__underline-button::before {
  display: flex;
  align-items: center;
  justify-content: center;
  content: "U";
  background-image: none;
  color: currentColor;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: underline;
  text-indent: 0;
}

.proposal-notes-editor trix-editor,
.proposal-note-template-editor trix-editor {
  min-height: 12rem;
  overflow-y: auto;
  resize: vertical;
}

.proposal-notes-editor .proposal-notes-editor__toggle {
  margin-top: 0.65rem;
}

/* The raw HTML escape hatch. Deliberately quiet: a small pair of text tabs above
 * the editor, not a mode switch competing with the toolbar. Almost nobody should
 * need it, and the people who do will be looking for it. */
.proposal-notes-editor__view-switch {
  display: flex;
  justify-content: flex-end;
  gap: 0.15rem;
  margin-bottom: 0.25rem;
}

.proposal-notes-editor__view-tab {
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: rgba(30, 27, 24, 0.6);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}

.proposal-notes-editor__view-tab:hover:not(:disabled) {
  color: var(--accent-dark);
}

.proposal-notes-editor__view-tab.is-active {
  background: #f4ece4;
  color: var(--accent-dark);
}

.proposal-notes-editor__view-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.proposal-notes-editor__view--raw {
  display: grid;
  gap: 0.5rem;
}

/* Only drawn when it has something to say — an empty status box reads as a
 * broken panel. */
.proposal-notes-editor__raw-status:not(:empty) {
  margin: 0;
  padding: 0.5rem 0.65rem;
  border-left: 3px solid var(--accent-dark);
  border-radius: var(--radius-sm);
  background: #fdf4ea;
}

.proposal-notes-editor__raw-input {
  width: 100%;
  min-height: 22rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  resize: vertical;
  tab-size: 2;
}

.proposal-notes-editor__raw-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.proposal-notes-editor__raw-help summary {
  width: fit-content;
  color: var(--accent-dark);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.proposal-notes-editor__raw-help-body {
  margin-top: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-left: 3px solid rgba(30, 27, 24, 0.16);
  background: #fff;
  font-size: 0.85rem;
}

.proposal-notes-editor__raw-help-body p {
  margin: 0 0 0.5rem;
}

.proposal-notes-editor__raw-help-body p:last-child {
  margin-bottom: 0;
}

.proposal-notes-editor__raw-help-body code {
  font-size: 0.8rem;
}

.contract-editor {
  display: grid;
  gap: 1.5rem;
}

.contract-editor__header {
  max-width: 62rem;
  display: grid;
  gap: 0.35rem;
}

.contract-editor__mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: fit-content;
  padding: 0.25rem;
  border: 1px solid rgba(30, 27, 24, 0.12);
  border-radius: 999px;
  background: #f4ece4;
}

.contract-editor__mode-button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--charcoal);
  font: inherit;
  font-weight: 600;
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.contract-editor__mode-button.is-active {
  background: #fffdfa;
  color: var(--accent-dark);
  box-shadow: 0 6px 14px rgba(28, 24, 20, 0.08);
}

.contract-editor__header h2 {
  margin: 0 0 0.35rem;
}

.contract-editor__section {
  display: grid;
  gap: 0.75rem;
}

.contract-editor__label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.contract-editor__note {
  margin: 0;
}

.contract-editor__field {
  border: 1px solid rgba(30, 27, 24, 0.16);
  border-radius: var(--radius-lg);
  background: #fffdfa;
  overflow: hidden;
}

.contract-editor__field:focus-within {
  border-color: rgba(140, 63, 39, 0.45);
  box-shadow: 0 0 0 4px rgba(180, 91, 63, 0.12);
}

.contract-editor__field trix-toolbar {
  margin: 0;
  display: block;
  padding: 0.75rem 0.85rem 0.6rem;
  border: 0;
  border-radius: 0;
  background: #f8f1e8;
  overflow: hidden;
}

.contract-editor__field trix-toolbar .trix-button-row {
  margin: 0;
  overflow-x: visible;
  overflow-y: visible;
  align-items: flex-end;
}

.contract-editor__field trix-toolbar .trix-button-row:last-child {
  margin-bottom: 0;
}

.contract-editor__field trix-toolbar .trix-button-row {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.45rem;
}

.contract-editor__field trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 0;
}

.contract-editor__field trix-toolbar .trix-button-group-spacer {
  display: none;
}

.contract-editor__field trix-toolbar .trix-button-group {
  margin-bottom: 0;
  border-color: rgba(30, 27, 24, 0.14);
  border-top-color: rgba(30, 27, 24, 0.14);
  border-bottom-color: rgba(30, 27, 24, 0.14);
  background: rgba(255, 253, 250, 0.92);
}

.contract-editor__field trix-editor {
  min-height: 26rem;
  margin: 0;
  padding: 1.25rem 1.35rem;
  border: 0;
  border-top: 1px solid rgba(30, 27, 24, 0.12);
  border-radius: 0;
  background: #fffdfa;
  font-size: 1rem;
  line-height: 1.8;
  box-shadow: none;
}

.contract-editor__field trix-editor:focus {
  box-shadow: none;
}

.contract-editor__preview-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.contract-editor__preview-shell {
  position: relative;
  min-height: 24rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(30, 27, 24, 0.16);
  background: #fffdfa;
  padding: 1.5rem;
  overflow: hidden;
}

.contract-editor__preview {
  min-height: 100%;
}

.contract-editor__preview h1,
.contract-editor__preview h2,
.contract-editor__preview h3 {
  letter-spacing: 0.02em;
}

.contract-editor__preview blockquote {
  border-left: 3px solid rgba(140, 63, 39, 0.3);
  margin-left: 0;
  padding-left: 1rem;
  color: var(--ink-muted);
}

.contract-editor__empty {
  position: absolute;
  inset: 1.5rem;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.96rem;
  border: 1px dashed rgba(30, 27, 24, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.68);
}

@media (max-width: 900px) {
  .contract-editor__header {
    gap: 0.75rem;
  }

  .contract-editor__preview-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .contract-editor__field trix-editor,
  .contract-editor__preview-shell {
    min-height: 22rem;
  }

  .nav {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .hero-meta {
    flex-direction: column;
    gap: 1rem;
  }

  .section-heading {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .category-hero {
    max-width: 100%;
  }

  .home-category-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-products {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

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

  .order-summary {
    position: static;
  }

  .toast {
    left: 1rem;
    right: 1rem;
    border-radius: var(--radius-md);
    justify-content: space-between;
  }
}

@media (max-width: 600px) {
  .storefront-hero {
    padding: 1.6rem 6vw 2.4rem;
  }

  .hero-actions,
  .confirmation-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .nav-actions {
    flex-wrap: wrap;
  }
}

.orders-assignment-search {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
  max-width: 26rem;
}

.orders-assignment-search__input-wrap {
  position: relative;
}

/* Room for the in-input help icon plus the clear button beside it. */
.orders-assignment-search__input {
  padding-right: 4rem;
}

.orders-assignment-search__help {
  position: absolute;
  top: 50%;
  right: 0.55rem;
  transform: translateY(-50%);
  display: inline-flex;
}

.orders-assignment-search__clear {
  position: absolute;
  top: 50%;
  right: 2.2rem;
  transform: translateY(-50%);
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid #d9ccbc;
  border-radius: 999px;
  background: #fbf5ed;
  color: #5a4a3a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.orders-assignment-search__clear:hover,
.orders-assignment-search__clear:focus-visible {
  border-color: #bca688;
  color: #3e3124;
  outline: none;
}

.orders-assignment-search__empty {
  margin-top: -0.1rem;
  margin-bottom: 0.6rem;
}

.orders-assignment-search__summary {
  margin-top: -0.1rem;
  margin-bottom: 0.35rem;
}

.orders-index-table {
  min-width: 760px;
}

.orders-index-cell--select {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

.orders-print-actions {
  margin: 0.4rem 0;
  align-items: center;
  gap: 0.75rem;
}

.orders-selected-count.is-active {
  color: #234039;
  font-weight: 700;
}

/* Desktop selects all via the checkbox in each table's header row; the button
   comes back on phones, where that header row is hidden. */
.orders-select-all--mobile-only {
  display: none;
}

.orders-sort-button {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.orders-sort-button::after {
  content: "↕";
  margin-left: 0.25rem;
  opacity: 0.45;
  font-size: 0.75em;
}

.orders-sort-button[data-sort-direction="asc"]::after {
  content: "↑";
  opacity: 1;
}

.orders-sort-button[data-sort-direction="desc"]::after {
  content: "↓";
  opacity: 1;
}

.orders-print-modal__panel {
  width: min(96vw, 9.25in);
  max-width: 9.25in;
  height: min(92vh, 11.75in);
  display: grid;
  grid-template-rows: auto 1fr;
}

.orders-print-modal__actions {
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

.orders-print-modal__frame {
  width: 100%;
  height: 100%;
  border: 1px solid #d9d0c2;
  background: #fff;
}

.orders-index-cell--mobile-compact {
  display: none;
}

.orders-index-cell--order a {
  font-weight: 700;
}

.orders-index-cell--required {
  font-weight: 600;
  white-space: nowrap;
}

.order-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: #ece3d7;
  color: #4a3f33;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.order-status-badge__icon {
  display: inline-flex;
}

.order-status-badge__icon svg {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}

.order-status-badge--ok {
  background: #dcefe0;
  color: #1f6b3b;
}

.order-status-badge--progress {
  background: #fdf0d5;
  color: #8a5a12;
}

.order-status-badge--muted {
  background: #ece3d7;
  color: #7c705f;
}

/* A product started from a recipe sketch, until it is published. */
.catalog-draft-badge {
  margin-left: 0.35rem;
  text-decoration: none;
}

a.catalog-draft-badge:hover,
a.catalog-draft-badge:focus-visible {
  text-decoration: underline;
}

.catalog-draft-note {
  margin-bottom: 1.25rem;
}

.catalog-draft-note p {
  margin: 0;
}

.catalog-draft-note a:not(.catalog-draft-badge) {
  color: var(--accent-dark);
  text-decoration: underline;
}

.catalog-draft-note .catalog-draft-badge {
  margin: 0 0.35rem 0 0;
}

.order-status-badge--designed {
  background: #dbe7fb;
  color: #234b8a;
}

.order-status-badge--out {
  background: #fbe4d0;
  color: #94500f;
}

.order-status-badge--external {
  background: #e9def5;
  color: #5b3a8a;
}

/* Taller than a phone screen: the card fits the screen and scrolls inside
   itself, with Cancel and Create route pinned to its foot. Centered and
   unbounded, its top and bottom ran off the screen out of reach. */
.quick-route-modal-card {
  max-width: 560px;
  max-height: calc(100vh - 3rem);
  max-height: calc(100dvh - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
}

.quick-route-modal-card .order-edit-modal-actions {
  position: sticky;
  bottom: -1.5rem;
  margin: 1.1rem -1.5rem -1.5rem;
  padding: 0.75rem 1.5rem;
  background: #fff;
  border-top: 1px solid #eee6dc;
}

@media (max-width: 640px) {
  .modal-overlay:has(.quick-route-modal-card) {
    padding: 0.75rem;
  }

  .quick-route-modal-card {
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    padding: 1.1rem;
  }

  .quick-route-modal-card .order-edit-modal-actions {
    bottom: -1.1rem;
    flex-wrap: nowrap;
    margin: 1rem -1.1rem -1.1rem;
    padding: 0.7rem 1.1rem;
  }

  .quick-route-modal-card .order-edit-modal-actions > * {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

.quick-route-location {
  margin: 0.6rem 0;
  border: 1px solid #d9d0c2;
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
}

.quick-route-location summary {
  cursor: pointer;
  font-weight: 600;
}

.quick-route-location .field {
  margin-top: 0.5rem;
}

/* The date navigation stays pinned while the order tables scroll. z-index sits
   above the tables' sticky cells (2–3) but below the mobile menu pill (95),
   the impersonation banner (200) and the modals (1000). The calendar dropdown
   (z 40) lives inside the header, so it keeps overlaying the page. */
.admin-header--orders {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #f3f2ee;
  padding: 0.6rem 0;
  border-bottom: 1px solid #e5ddd2;
  box-shadow: 0 8px 14px -12px rgba(53, 42, 31, 0.35);
}

@media (max-width: 900px) {
  /* Below 900px the fixed menu pill owns the top of the viewport, and the
     header stacks too tall to pin on a phone anyway. */
  .admin-header--orders {
    position: static;
    padding: 0;
    border-bottom: 0;
    box-shadow: none;
  }
}

@media (max-width: 720px) {
  .admin-header--orders {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-header-actions--orders {
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr) minmax(0, 1fr) 2.35rem;
    gap: 0.25rem;
    width: 100%;
  }

  /* The calendar tile takes its own full-width row above the nav buttons. */
  .admin-header-actions--orders .orders-calendar {
    grid-row: 1;
    grid-column: 1 / -1;
  }

  .admin-header-actions--orders .orders-calendar__button {
    width: 100%;
    justify-content: center;
  }

  .admin-header-actions--orders .button {
    justify-content: center;
    min-height: 2.15rem;
    padding-inline: 0.35rem;
    font-size: 0.78rem;
    width: 100%;
  }

  .orders-summary-card {
    padding: 0.4rem 0.1rem;
  }

  .orders-summary-card span {
    font-size: 0.66rem;
  }

  .orders-summary-card strong {
    font-size: 1rem;
  }

  .orders-assignment-search {
    max-width: none;
  }

  .orders-index-table {
    min-width: 0;
  }

  .orders-index-table thead {
    display: none;
  }

  .orders-select-all--mobile-only {
    display: inline-flex;
  }

  .orders-index-table,
  .orders-index-table tbody,
  .orders-index-row,
  .orders-index-cell {
    display: block;
    width: 100%;
  }

  .orders-index-table .orders-index-row {
    margin-bottom: 0.85rem;
    padding: 0.8rem;
    border: 1px solid #e2d7c9;
    border-radius: 0.9rem;
    background: #fffaf4;
    box-shadow: 0 8px 18px rgba(53, 42, 31, 0.06);
  }

  .orders-index-table .orders-index-cell {
    display: grid;
    grid-template-columns: minmax(7.2rem, 36%) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.45rem 0;
    border-bottom: 1px solid #eee5da;
  }

  .orders-index-table .orders-index-cell:last-child {
    border-bottom: none;
  }

  .orders-index-cell::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7a6858;
  }
}

@media (max-width: 430px) {
  .orders-index-table .orders-index-cell {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}.daily-ops-blockers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.daily-ops-blocker {
  border: 1px solid rgba(180, 91, 63, 0.35);
  border-radius: 10px;
  background: #fff7f3;
  padding: 0.65rem 0.7rem;
  display: grid;
  gap: 0.2rem;
}

.daily-ops-blocker strong {
  font-size: 1.15rem;
}

.audit-stats-grid {
  margin-top: 1.2rem;
  margin-bottom: 1.4rem;
}

.audit-filter-wrap {
  position: sticky;
  top: 0.8rem;
  z-index: 30;
  background: #fff;
  border: 1px solid #ece4d9;
  border-radius: 12px;
  padding: 0.85rem;
  margin-bottom: 1rem;
  box-shadow: 0 10px 24px rgba(20, 20, 20, 0.08);
}

.audit-filter-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.audit-preset-chips {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.audit-log-list {
  display: grid;
  gap: 0.85rem;
}

.audit-log-row {
  border: 1px solid #e7dfd4;
  border-radius: 12px;
  background: #fcfbf8;
  padding: 0.85rem 1rem;
}

.audit-log-row__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.7rem;
}

.audit-log-row__meta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.audit-log-row__meta strong {
  font-size: 0.95rem;
}

.audit-log-row time {
  color: #6b635a;
  font-size: 0.82rem;
  white-space: nowrap;
}

.audit-log-row__summary {
  margin-top: 0.55rem;
}

.audit-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.14rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: #ece8e1;
  color: #4e473f;
}

.audit-pill--create {
  background: #e5f5eb;
  color: #205a36;
}

.audit-pill--update {
  background: #e9f1fb;
  color: #254f7f;
}

.audit-pill--destroy {
  background: #fdebec;
  color: #8f2f35;
}

.audit-pill--login,
.audit-pill--logout {
  background: #f1edff;
  color: #4d3c86;
}

.audit-field-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.audit-field-chip {
  border: 1px solid #ddd4c8;
  background: #fff;
  border-radius: 999px;
  font-size: 0.75rem;
  padding: 0.13rem 0.45rem;
  color: #5a5248;
}

.audit-log-row__details {
  margin-top: 0.6rem;
}

.audit-log-row__details summary {
  cursor: pointer;
  color: #3a6255;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.audit-diff-table {
  margin-top: 0.3rem;
}

.audit-diff-table code {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.8rem;
  background: #f7f4ee;
  border-radius: 6px;
  padding: 0.15rem 0.35rem;
  display: inline-block;
  max-width: 100%;
}

.material-photo-preview {
  display: inline-flex;
  align-items: center;
}

.material-photo-thumb {
  width: 96px;
  height: 96px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #e5ddd2;
  background: #f7f4ee;
}

.material-photo-thumb--small {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

.material-photo-thumb--tiny {
  width: 52px;
  height: 52px;
  border-radius: 8px;
}

.inventory-material-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}

@media (max-width: 900px) {
  .audit-filter-wrap {
    position: static;
  }

  .audit-filter-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
}

.branding-image-field {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cta-link-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cta-link-targets {
  margin-top: 0.5rem;
}

.cta-target-field {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(44, 40, 35, 0.08);
}

.cta-target-field .field {
  margin-bottom: 0;
}

.admin-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.admin-card {
  padding: 1rem;
}

.driver-station-page {
  padding: 2rem 1rem 3rem;
}

.driver-station-shell {
  width: min(1100px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.driver-station-header,
.driver-station-card {
  display: grid;
  gap: 1rem;
}

.driver-station-header {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
}

.driver-station-header__actions {
  justify-self: end;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.driver-station-route-grid,
.driver-station-form-grid,
.driver-station-summary-grid {
  display: grid;
  gap: 1rem;
}

.driver-station-route-grid,
.driver-station-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.driver-station-form-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.driver-station-route-card,
.driver-station-card--nested,
.driver-station-stop {
  padding: 1rem;
  border: 1px solid #e6ddd1;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.78);
}

.driver-station-route-card,
.driver-station-stop,
.driver-station-next-stop {
  display: grid;
  gap: 0.75rem;
}

.driver-station-route-card__header,
.driver-station-card__header,
.driver-station-stop__meta,
.driver-station-next-stop__links,
.driver-station-stop__times {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
}

.driver-station-route-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.driver-station-route-stats dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6f6358;
}

.driver-station-route-stats dd {
  margin: 0.2rem 0 0;
  font-weight: 600;
}

.driver-station-stat {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
}

.driver-station-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.driver-station-status--planned,
.driver-station-status--pending {
  background: #efe8dc;
  color: #6d5b45;
}

.driver-station-status--active,
.driver-station-status--arrived {
  background: #dff1ff;
  color: #0f4b74;
}

.driver-station-status--completed {
  background: #dff3e7;
  color: #1f6a3f;
}

.driver-station-status--failed,
.driver-station-status--skipped {
  background: #fde4e4;
  color: #8a2d2d;
}

.driver-station-stop-list {
  display: grid;
  gap: 0.75rem;
}

.driver-station-stop__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #67594f;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.driver-station-stop__result {
  padding-top: 0.5rem;
  border-top: 1px solid #ece3d8;
}

.photo-capture__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.photo-capture__input {
  position: absolute;
  left: -9999px;
}

.photo-capture__preview-section {
  margin-top: 0.75rem;
}

.photo-capture__status {
  font-weight: 600;
  color: #2d6a4f;
  margin-top: 0.4rem;
}

.photo-capture__preview {
  display: block;
  width: 100%;
  max-width: 24rem;
  border-radius: 0.9rem;
  border: 1px solid #e6ddd1;
}

.delivery-confirmation-page {
  padding: 2rem 1rem 3rem;
}

.delivery-confirmation-shell {
  width: min(640px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 1rem;
}

.delivery-confirmation-header,
.delivery-confirmation-card,
.delivery-confirmation-form {
  display: grid;
  gap: 1rem;
}

@media (max-width: 720px) {
  .driver-station-header {
    grid-template-columns: 1fr;
  }

  .driver-station-header__actions {
    justify-self: start;
  }
}

.driver-station-page--wizard {
  min-height: 100dvh;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* The staff bar renders in-page here (show.html.erb) so its height comes out
   of the wizard's share of the viewport instead of stacking on top of 100dvh
   and pushing the bottom card off screen. */
.driver-station-page--wizard > .staff-bar {
  flex: none;
}

.driver-route-wizard {
  flex: 1;
  min-height: 0;
  width: min(640px, 100%);
  margin: 0 auto;
  padding: 0.75rem;
  display: grid;
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  gap: 0.65rem;
}

.driver-route-wizard__status-strip,
.driver-route-wizard__command,
.driver-route-wizard__route-list {
  border: 1px solid #e6ddd1;
  background: rgba(255, 255, 255, 0.9);
}

.driver-route-wizard__status-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
}

.driver-route-wizard__route-id {
  min-width: 0;
}

.driver-route-wizard__eyebrow {
  display: block;
  color: #6f6358;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.driver-route-wizard h1,
.driver-route-wizard h2,
.driver-route-wizard h3 {
  margin: 0;
}

.driver-route-wizard h1 {
  font-size: 1rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.driver-route-wizard__stats {
  display: grid;
  gap: 0.05rem;
  text-align: right;
  white-space: nowrap;
}

.driver-route-wizard__stats strong {
  font-size: 1rem;
  line-height: 1;
}

.driver-route-wizard__stats span {
  color: #6f6358;
  font-size: 0.72rem;
  font-weight: 700;
}

.driver-route-wizard__command {
  min-width: 0;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Stop details anchor to the top, action buttons to the bottom (thumb reach),
   instead of the whole group floating mid-card. */
.driver-route-wizard__command .driver-route-wizard__primary-actions {
  margin-top: auto;
}

.driver-route-wizard__empty-state {
  margin-block: auto;
}

.driver-route-wizard__stop-card,
.driver-route-wizard__empty-state {
  display: grid;
  gap: 0.45rem;
  overflow-wrap: anywhere;
  flex-shrink: 0;
}

.driver-route-wizard__stop-card h2,
.driver-route-wizard__empty-state h2 {
  font-size: clamp(1.55rem, 8vw, 2.35rem);
  line-height: 0.98;
  color: #1f2624;
}

.driver-route-wizard__business,
.driver-route-wizard__address,
.driver-route-wizard__instructions,
.driver-route-wizard__warning {
  margin: 0;
}

.driver-route-wizard__business {
  color: #4b5563;
  font-weight: 700;
}

.driver-route-wizard__pickup {
  display: grid;
  gap: 0.35rem;
}

.driver-route-wizard__pickup p {
  margin: 0;
}

.driver-route-wizard__pickup-list {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.2rem;
}

.driver-route-wizard__address {
  color: #2f2924;
  font-size: 1rem;
  line-height: 1.25;
}

.driver-route-wizard__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: #6f6358;
  font-size: 0.9rem;
  font-weight: 700;
}

.driver-route-wizard__phone {
  color: #0f4b74;
  font-weight: 800;
  text-decoration: none;
}

.driver-route-wizard__instructions {
  color: #374151;
  font-size: 0.9rem;
  line-height: 1.3;
}

.driver-route-wizard__warning {
  border-radius: 0.75rem;
  background: #fff7ed;
  color: #9a3412;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.45rem 0.6rem;
}

.driver-route-wizard__primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.driver-route-wizard__primary-actions .button,
.driver-route-wizard__wide-action {
  width: 100%;
  min-height: 3.25rem;
  justify-content: center;
  font-size: 1rem;
}

.driver-route-wizard__primary-actions form,
.driver-route-wizard__wide-action form {
  display: contents;
}

.driver-route-wizard__primary-actions form:only-child,
.driver-route-wizard__primary-actions .driver-route-wizard__wide-action {
  grid-column: 1 / -1;
}

.driver-route-wizard__utility-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  font-size: 0.85rem;
}

.driver-route-wizard__route-list {
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 0.65rem 0.75rem;
}

.driver-route-wizard__route-list summary {
  cursor: pointer;
  font-weight: 800;
}

.driver-station-stop-list--compact {
  margin-top: 0.65rem;
}

.driver-station-stop--compact {
  padding: 0.65rem;
  gap: 0.35rem;
}

.driver-station-stop--compact h3,
.driver-station-stop--compact p {
  margin: 0;
}

.driver-station-stop--compact p {
  color: #6f6358;
  font-size: 0.82rem;
}

.driver-route-dialog {
  width: min(92vw, 34rem);
  max-height: 88dvh;
  overflow: auto;
  border: 0;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 24px 80px rgba(31, 38, 36, 0.28);
}

.driver-route-dialog::backdrop {
  background: rgba(31, 38, 36, 0.42);
}

.driver-route-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.driver-route-dialog__close {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: #efe8dc;
  color: #3d342d;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 900;
}

.driver-route-dialog__form {
  display: grid;
  gap: 0.8rem;
}

.driver-route-dialog__form--skip {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid #ece3d8;
}

@media (max-width: 540px) {
  .driver-route-wizard__status-strip {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .driver-route-wizard__status-strip .driver-station-status {
    display: none;
  }
}

.cash-till-page {
  display: grid;
  gap: 1rem;
}

.cash-till-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 0.95fr);
  gap: 1rem;
  align-items: start;
}

.cash-till-card-grid {
  display: grid;
  gap: 0.75rem;
}

.cash-till-card-grid--featured {
  grid-template-columns: 1fr;
}

.cash-till-card-grid--secondary,
.cash-till-card-grid--multi {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.cash-till-card-grid--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cash-till-workflow-card {
  display: grid;
  gap: 0.7rem;
  padding: 1rem;
}

.cash-till-workflow-card__header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 0.75rem;
}

.cash-till-workflow-card__metrics,
.cash-till-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem;
}

.cash-till-metric {
  background: #f8f4ee;
  border-radius: 12px;
  padding: 0.6rem 0.7rem;
  display: grid;
  gap: 0.2rem;
}

.cash-till-filters-panel details summary,
.cash-till-workflow-card__more-actions summary,
.cash-till-settings-archived summary,
.cash-till-settings-rules details summary {
  cursor: pointer;
}

.cash-till-action-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.cash-till-guided-start,
.cash-till-start-card,
.cash-till-wizard-status,
.cash-till-wizard-nav {
  display: grid;
  gap: 1rem;
}

.cash-till-start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.cash-till-start-card {
  border: 1px solid #eee8df;
  border-radius: 8px;
  padding: 1rem;
  align-content: start;
}

.cash-till-wizard-status__meter {
  height: 0.5rem;
  border-radius: 999px;
  background: #eee8df;
  overflow: hidden;
}

.cash-till-wizard-status__meter span {
  display: block;
  width: 16.666%;
  height: 100%;
  background: #3f4d45;
  transition: width 140ms ease;
}

.cash-till-wizard-status__notice {
  color: #7f1d1d;
}

.cash-till-counted-so-far {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.cash-till-counted-so-far[hidden],
.cash-till-summary-panel[hidden] {
  display: none;
}

.cash-till-counted-so-far span,
.cash-till-locked-confirmation {
  border: 1px solid #eee8df;
  border-radius: 8px;
  background: #faf8f4;
  padding: 0.65rem 0.75rem;
}

.cash-till-counted-so-far span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cash-till-wizard-nav {
  grid-template-columns: auto auto;
  justify-content: end;
  align-items: center;
}

.cash-till-next-button {
  background: #24382f;
  border-color: #24382f;
  color: #fff;
  min-width: 9rem;
}

.cash-till-next-button:hover,
.cash-till-finish-button:hover {
  filter: brightness(0.95);
}

.cash-till-finish-button {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
  min-width: 12rem;
}

.cash-till-form,
.cash-till-question-flow,
.cash-till-question {
  display: grid;
  gap: 1rem;
}

.cash-till-question-flow {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cash-till-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cash-till-action-grid {
  display: grid;
  gap: 0.75rem;
}

.cash-till-action-grid--common {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cash-till-action-grid--other {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: 0.75rem;
}

.cash-till-movement-button {
  align-items: start;
  border-color: #d9d1c4;
  color: #24382f;
  display: grid;
  gap: 0.35rem;
  justify-items: start;
  min-height: 7rem;
  padding: 1rem;
  text-align: left;
  white-space: normal;
}

.cash-till-movement-button:hover,
.cash-till-movement-button--active {
  background: #24382f;
  border-color: #24382f;
  color: #fff;
}

.cash-till-movement-button__label {
  font-weight: 700;
}

.cash-till-movement-button__help {
  font-size: 0.9rem;
  line-height: 1.35;
}

.cash-till-other-movements {
  border-top: 1px solid #eee8df;
  padding-top: 1rem;
}

.cash-till-other-movements summary {
  cursor: pointer;
  font-weight: 700;
}

.cash-till-session-guidance {
  border-color: #d9d1c4;
}

.cash-till-session-guidance,
.cash-till-session-guidance__header,
.cash-till-session-guidance__actions {
  display: grid;
  gap: 1rem;
}

.cash-till-session-guidance__header {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) auto;
}

.cash-till-session-guidance__header h2,
.cash-till-session-guidance__header p {
  margin-bottom: 0;
}

.cash-till-session-guidance__actions {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.cash-till-session-guidance__action {
  align-content: space-between;
  border: 1px solid #eee8df;
  border-radius: 8px;
  display: grid;
  gap: 0.85rem;
  min-height: 10rem;
  padding: 1rem;
}

.cash-till-session-guidance__action p {
  margin-bottom: 0;
}

.cash-till-field-cloak {
  display: none;
}

.field--span-2 {
  grid-column: span 2;
}

.cash-till-summary-panel {
  position: sticky;
  top: 1rem;
}

.cash-till-denomination-panel {
  overflow-x: auto;
}

.cash-till-check-table input,
.cash-till-receipt-table input,
.cash-till-quantity-input {
  max-width: 8rem;
}

.cash-till-soft-warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  color: #7c2d12;
  display: grid;
  gap: 0.45rem;
  margin-top: 0.55rem;
  max-width: 18rem;
  padding: 0.65rem;
}

.cash-till-soft-warning[hidden] {
  display: none;
}

.cash-till-soft-warning button {
  background: transparent;
  border: 0;
  color: #7c2d12;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  justify-self: start;
  padding: 0;
  text-decoration: underline;
}

.cash-till-variance--over {
  color: #0f766e;
}

.cash-till-variance--short {
  color: #b91c1c;
}

.cash-till-settings-list {
  display: grid;
  gap: 0.8rem;
}

.cash-till-settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid #eee8df;
}

.cash-till-settings-row:first-child {
  border-top: none;
  padding-top: 0;
}

@media (max-width: 960px) {
  .cash-till-layout,
  .cash-till-card-grid--pair,
  .cash-till-form-grid,
  .cash-till-settings-row {
    grid-template-columns: 1fr;
  }

  .field--span-2 {
    grid-column: auto;
  }

  .cash-till-summary-panel {
    position: static;
  }
}

.material-planning-filter__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.material-planning-filter__actions input[type="submit"] {
  width: auto;
  min-width: 10rem;
}

.material-chart__zero {
  stroke: rgba(31, 29, 26, 0.28);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}

.material-chart__grid {
  stroke: rgba(31, 29, 26, 0.08);
  stroke-width: 1;
}

.material-chart__safety-line {
  stroke: #b42318;
  stroke-width: 2;
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}

.material-chart__target-line {
  stroke: #7a6858;
  stroke-width: 2;
  stroke-dasharray: 8 5;
  stroke-linecap: round;
}

.material-chart__bar {
  opacity: 0.88;
}

.material-chart__bar--actual {
  fill: #9bb6a2;
}

.material-chart__bar--planned {
  fill: #b45b3f;
}

.material-chart__line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.material-chart__axis-label,
.material-chart__date-label,
.material-chart__reference-label,
.material-chart__today-label {
  fill: rgba(31, 29, 26, 0.62);
  font-size: 12px;
}

.material-chart__date-label {
  text-anchor: middle;
}

.material-chart__reference-label {
  font-size: 11px;
  font-weight: 700;
}

.material-chart__today {
  stroke: rgba(31, 29, 26, 0.35);
  stroke-width: 1;
}

.material-chart__crosshair {
  stroke: rgba(31, 29, 26, 0.45);
  stroke-width: 1;
  pointer-events: none;
}

.material-chart__po-hit {
  fill: transparent;
}

.material-chart__po-dot {
  stroke-width: 2.5;
  paint-order: stroke;
}

.material-chart__po--draft .material-chart__po-dot {
  stroke-dasharray: 3 2;
}

.material-chart__po-label {
  fill: #1f1d1a;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 3px;
}

.material-chart__po:focus-visible .material-chart__po-dot {
  stroke: #1f1d1a;
}

.material-demand-table .form-note {
  display: block;
  margin-top: 0.15rem;
}

.material-demand-short {
  display: block;
  margin-top: 0.15rem;
  color: #8f1f13;
  font-weight: 600;
}

.material-planning-results {
  margin-top: 1.5rem;
}

.material-plan-detail__forecast {
  margin: 0.6rem 0 0;
  font-size: 0.86rem;
}

.material-planning-drift--short {
  color: #8f1f13;
}

.material-planning-drift--over {
  color: #8a5a00;
}

.material-planning-row--short > td:first-of-type + td {
  box-shadow: inset 3px 0 0 #b42318;
}

.material-planning-po {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.02);
}

.material-planning-po__grid {
  margin-top: 1rem;
}

.material-planning-po__notes {
  grid-column: 1 / -1;
}

/* Material Planning worklist: one row per material, next five days first,
   Later folded away. Each row is the problem, what's coming, and the
   buttons that fix it; the name folds out the numbers and chart. */
.material-worklist-filter__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem 0.75rem;
}

.material-worklist-filter__bar .field {
  flex: 1 1 12rem;
  margin: 0;
}

.material-worklist-filter__actions {
  display: flex;
  gap: 0.5rem;
}

.material-worklist-filter__more {
  margin-top: 0.6rem;
}

.material-worklist-filter__more > summary {
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
}

.material-worklist-filter__more .form-grid {
  margin-top: 0.75rem;
}

.material-worklist-section + .material-worklist-section {
  margin-top: 1.25rem;
}

.material-worklist-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  margin-bottom: 0.4rem;
}

summary.material-worklist-section__header {
  cursor: pointer;
}

.material-worklist-section__header h2 {
  display: inline;
  margin: 0;
  font-size: 1.1rem;
}

.material-worklist-section__fine {
  margin-left: auto;
}

.material-worklist__count {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: #fbefd9;
  color: #6b4a0e;
  font-size: 0.8rem;
  font-weight: 700;
}

.material-worklist__count--short {
  background: #fde8e4;
  color: #8f1f13;
}

.material-worklist__count--out,
.material-worklist__out {
  background: #8f1f13;
  color: #fff;
}

.material-worklist__late {
  background: #fbebe4;
  color: #7a2c10;
  border: 1px solid #a8401c;
}

.material-worklist__out,
.material-worklist__late {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.material-worklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.material-worklist__row {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr) minmax(0, 2fr);
  align-items: start;
  gap: 0.35rem 1rem;
  padding: 0.6rem 0.5rem 0.6rem 0.75rem;
  border-top: 1px solid #f0e8de;
  border-left: 3px solid transparent;
  font-size: 0.88rem;
}

.material-worklist__row--short {
  border-left-color: #c0392b;
}

.material-worklist__head {
  display: grid;
  gap: 0.1rem;
}

.material-worklist__name {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.material-worklist__name::before {
  content: "▸";
  display: inline-block;
  margin-right: 0.3rem;
  color: #7a6858;
  transition: transform 0.15s ease;
}

.material-worklist__name[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

.material-worklist__facts {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.material-worklist__problem--short {
  color: #8f1f13;
  font-weight: 600;
}

.material-worklist__problem--over {
  color: #6b4a0e;
  font-weight: 600;
}

.material-worklist__facts .text-link,
.material-worklist__facts .form-note .text-link {
  font-size: inherit;
  text-transform: none;
  letter-spacing: 0;
}

.material-worklist__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 0.5rem;
}

.material-worklist__actions .button {
  min-height: 2.1rem;
  padding: 0.2rem 0.8rem;
  font-size: 0.82rem;
}

.material-worklist .material-worklist__pick {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
  color: inherit;
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.material-worklist__on-hand {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.86rem;
}

.material-worklist .material-worklist__on-hand label {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.material-worklist__on-hand input[type="number"] {
  width: 5rem;
  min-height: 2.1rem;
  padding: 0.2rem 0.4rem;
}

.material-worklist__detail {
  grid-column: 1 / -1;
  padding: 0.75rem 0.9rem 1rem;
  border-radius: 10px;
  background: #fbf8f3;
}

.material-worklist__detail[hidden] {
  display: none;
}

.material-worklist__detail .material-plan-chart {
  margin: 0 0 0.75rem;
}

@media (max-width: 900px) {
  .material-worklist__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }

  .material-worklist__actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .material-worklist__row {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0.5rem 0.25rem;
  }

  .material-worklist-section__fine {
    margin-left: 0;
  }
}

/* The facts strip under a material page's chart. */
.material-planning-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(35, 64, 57, 0.06);
  color: rgba(31, 29, 26, 0.72);
  font-size: 0.88rem;
}

/* Planner chart: one chart for the whole list, pinned while the list scrolls.
   Rows join it from their Chart checkbox. */
.material-plan-chart {
  position: sticky;
  top: 0.5rem;
  z-index: 5;
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #e2d7c9;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(53, 42, 31, 0.12);
}

/* On a material's page the chart sits in flow inside its panel. */
.material-plan-chart--standalone {
  position: static;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.material-plan-chart--standalone .material-plan-chart__legend {
  display: none;
}

.material-plan-chart__bar[hidden] {
  display: none;
}

.material-plan-chart__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.material-plan-chart__bar h2 {
  margin: 0;
  font-size: 1rem;
}

.material-plan-chart__count {
  color: #7a6858;
  font-size: 0.82rem;
  font-weight: 600;
}

.material-plan-chart__scales {
  display: inline-flex;
  border: 1px solid #d9cdbd;
  border-radius: 999px;
  overflow: hidden;
}

.material-plan-chart__scales[hidden] {
  display: none;
}

.material-plan-chart__scale {
  min-height: 2rem;
  padding: 0 0.8rem;
  border: 0;
  background: #fff;
  color: #234039;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.material-plan-chart__scale[aria-pressed="true"] {
  background: #234039;
  color: #fff;
}

.material-plan-chart__tools {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
}

.material-plan-chart__tools .button {
  min-height: 2rem;
  padding: 0.2rem 0.7rem;
  font-size: 0.8rem;
}

.material-plan-chart__empty {
  margin: 0.5rem 0 0;
}

.material-plan-chart__frame {
  position: relative;
  margin-top: 0.4rem;
}

.material-plan-chart__frame[hidden] {
  display: none;
}

.material-plan-chart__canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: pan-y;
}

.material-plan-chart__canvas:focus-visible {
  outline: 2px solid #234039;
  outline-offset: 2px;
  border-radius: 6px;
}

.material-plan-chart__tooltip {
  position: absolute;
  /* Over the rail's pills (positioned, and later in the frame), under an
     open action sheet (5) and the rail's overflow menu (6). */
  z-index: 4;
  top: 0.25rem;
  left: var(--readout-x, 50%);
  min-width: min(11rem, 100%);
  max-width: min(18rem, 100%);
  margin-left: 0.75rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid #e2d7c9;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 6px 16px rgba(53, 42, 31, 0.14);
  font-size: 0.78rem;
  pointer-events: none;
}

.material-plan-chart__tooltip--left {
  margin-left: 0;
  transform: translateX(calc(-100% - 0.75rem));
}

.material-plan-chart__tooltip dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.75rem;
  margin: 0.25rem 0 0;
}

.material-plan-chart__tooltip dt {
  color: #6f5f50;
}

.material-plan-chart__tooltip dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.material-plan-chart__key,
.material-plan-chart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
  color: #6f5f50;
  font-size: 0.78rem;
}

.material-plan-chart__key-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.material-plan-chart__key-item::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 0.2rem;
  background: #1f1d1a;
}

.material-plan-chart__key-item--po::before,
.material-plan-chart__key-item--draft::before {
  width: 0.6rem;
  height: 0.6rem;
  border: 2px solid #1f1d1a;
  border-radius: 999px;
}

.material-plan-chart__key-item--draft::before {
  border-style: dashed;
  background: #fff;
}

.material-plan-chart__key-item--used::before,
.material-plan-chart__key-item--planned::before {
  width: 0.5rem;
  height: 0.75rem;
  border-radius: 2px;
  background: #9bb6a2;
}

.material-plan-chart__key-item--planned::before {
  background: #b45b3f;
}

.material-plan-chart__key-item--safety::before {
  background: repeating-linear-gradient(90deg, #b42318 0 2px, transparent 2px 6px);
}

.material-plan-chart__key-item--target::before {
  background: repeating-linear-gradient(90deg, #7a6858 0 7px, transparent 7px 11px);
}

.material-plan-chart:not([data-single]) .material-plan-chart__key-item--single {
  display: none;
}

/* The balance as if every draft and queued change went through: the same
   colour as the plan's line, dashed, shown whenever the material has a
   draft on the way or something is queued or hovered for it. */
.material-chart__line--after {
  stroke-width: 2.5;
  stroke-dasharray: 6 4;
  opacity: 0.9;
}

.material-chart__target-after-line {
  stroke: #1f6f50;
  stroke-width: 2;
  stroke-dasharray: 8 5;
  stroke-linecap: round;
}

.material-plan-chart__key-item--after::before {
  background: repeating-linear-gradient(90deg, #1f1d1a 0 6px, transparent 6px 10px);
}

/* Hidden but still taking its place, so a preview never shifts the list
   under the pointer that asked for it. */
.material-plan-chart:not([data-after]) .material-plan-chart__key-item--after {
  visibility: hidden;
}

/* Material Planning chart actions: chips accept a suggestion, sheets hold
   every choice for one order or suggested order, the list under the chart
   mirrors the chart's markers. */
.plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2rem;
  padding: 0.2rem 0.75rem;
  border: 1px solid #1f6f50;
  border-radius: 999px;
  background: #e8f3ee;
  color: #1f4f3a;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.plan-chip:hover,
.plan-chip:focus-visible {
  background: #1f6f50;
  color: #fff;
}

.plan-chip--review {
  border-color: #9a6a12;
  background: #fbf3e2;
  color: #6b4a0c;
}

.plan-chip--review:hover,
.plan-chip--review:focus-visible {
  background: #9a6a12;
  color: #fff;
}

.plan-chip:disabled {
  opacity: 0.6;
  cursor: progress;
}

.plan-sheet {
  margin: 0.5rem 0 0.25rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #cfc7bb;
  border-radius: 10px;
  background: #fffdf9;
  box-shadow: 0 6px 18px rgba(32, 28, 22, 0.08);
}

.plan-sheet[hidden] {
  display: none;
}

.plan-sheet__title:focus {
  outline: none;
}

.plan-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.plan-sheet__title {
  margin: 0;
  font-size: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  align-items: baseline;
}

.plan-sheet__close,
.plan-notice__close {
  border: 0;
  background: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.35rem;
  color: inherit;
}

.plan-sheet__line {
  margin: 0.4rem 0;
}

.plan-sheet__choices {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.plan-sheet__choice {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
}

.plan-sheet__choice,
.plan-sheet__choice .form-note {
  font-family: inherit;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
}

.plan-sheet__choice input[type="radio"] {
  width: auto;
  margin: 0.2rem 0 0;
  flex: none;
}

.plan-sheet__choice input[type="number"],
.plan-sheet__choice input[type="date"] {
  width: auto;
  padding: 0.3rem 0.5rem;
}

.plan-sheet__choice > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
}

.plan-sheet__choice--suggested {
  background: #e8f3ee;
}

.plan-sheet__choice.is-unavailable {
  color: #8a847b;
}

.plan-sheet__choice .plan-sheet__keep {
  width: 4.5rem;
}

.plan-sheet__vendor {
  margin: 0.5rem 0 0;
  color: #6b4a0c;
  font-weight: 600;
}

.plan-sheet__error {
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: #fbe9e6;
  color: #8a2a1c;
}

.plan-sheet__error[hidden] {
  display: none;
}

.plan-sheet__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.5rem 0.75rem;
}

.plan-sheet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.plan-sheet__more-targets > summary {
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
}

/* The dock: on a wide screen, a panel fixed at the foot of the screen
   holding what the pointer is on (a day's readout or a pill's detail), the
   opened pill's detail pinned, and the open sheet with every control in
   view at once (Josh, 2026-10-31: nothing floats over a chart, nothing is
   scrolled to). The list keeps room above it. Under 600px there is none:
   the detail floats in the chart and a sheet opens in the page. */
.plan-dock {
  display: none;
}

@media (min-width: 600px) {
  .material-worklist-results {
    --plan-dock-height: clamp(15rem, 36vh, 26rem);
    padding-bottom: calc(var(--plan-dock-height) + 1rem);
  }

  .material-worklist-results:has(.plan-dock[data-collapsed]) {
    --plan-dock-height: 2.4rem;
  }

  .plan-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    height: var(--plan-dock-height);
    border-top: 1px solid #cfc7bb;
    background: #fffdf9;
    box-shadow: 0 -8px 24px rgba(32, 28, 22, 0.12);
    container: plan-dock / inline-size;
  }

  .plan-dock[data-collapsed] .plan-dock__body {
    display: none;
  }
}

/* Beside the admin sidebar, which is in the page above 640px. */
@media (min-width: 641px) {
  .plan-dock {
    left: 240px;
  }
}

.plan-dock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  padding: 0.3rem 1rem;
  border-bottom: 1px solid #eee6dc;
  color: #6f5f50;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan-dock__toggle {
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  text-decoration: underline;
}

.plan-dock__body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(13rem, 0.8fr) minmax(0, 3fr);
  gap: 0 1.5rem;
  padding: 0.5rem 1rem 0.6rem;
  overflow: auto;
}

.plan-dock[data-state="idle"] .plan-dock__body {
  grid-template-columns: minmax(0, 1fr);
}

/* With a sheet open the detail gives up room, so the sheet's choices get
   two columns. */
.plan-dock[data-state="sheet"] .plan-dock__body {
  grid-template-columns: minmax(12rem, 0.6fr) minmax(0, 3.4fr);
}

.plan-dock[data-state="idle"] .plan-dock__sheet {
  display: none;
}

.plan-dock__detail {
  min-width: 0;
  font-size: 0.85rem;
}

.plan-dock__hint {
  margin: 0;
  color: #6f5f50;
}

.plan-dock__detail:has(.plan-dock__hover:not([hidden]), .plan-dock__pinned:not([hidden])) .plan-dock__hint,
.plan-dock__hover:not([hidden]) ~ .plan-dock__pinned {
  display: none;
}

.plan-dock__hover dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.75rem;
  margin: 0.25rem 0 0;
}

.plan-dock__hover dt {
  color: #6f5f50;
}

.plan-dock__hover dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.plan-dock__hover .material-plan-chart__hint {
  margin: 0.3rem 0 0;
  color: #6f5f50;
  font-size: 0.8rem;
}

.plan-dock__hover .material-plan-chart__order-day {
  margin-top: 0.35rem;
}

/* The sheet in the dock: no box of its own, its choices (two columns when
   they fit) on the left and the fields that end in Apply on the right, so
   the whole sheet is in view at once. */
.plan-dock__sheet .plan-sheet {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.85rem;
}

.plan-dock__sheet .plan-sheet__title {
  font-size: 0.95rem;
}

.plan-dock__sheet .plan-sheet__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24rem;
  gap: 0.25rem 1.5rem;
  align-items: start;
}

.plan-dock__sheet .plan-sheet__choices:not(.plan-sheet__targets) {
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.15rem 0.75rem;
  align-items: start;
}

.plan-dock__sheet .plan-sheet__choice .plan-sheet__keep {
  flex: none;
  width: 4rem;
}

/* The fields of a move or a replacement show once that choice is picked. */
.plan-dock__sheet .plan-sheet__choices:not(:has(input[value="switch"]:checked)) > .plan-sheet__switch-fields,
.plan-dock__sheet .plan-sheet__choices:not(:has(input[value="replace"]:checked)) > .plan-sheet__replace-fields {
  display: none;
}

.plan-dock__sheet .plan-sheet__choices > legend,
.plan-dock__sheet .plan-sheet__choices > .plan-sheet__fields,
.plan-dock__sheet .plan-sheet__choices > .plan-sheet__order-more {
  grid-column: 1 / -1;
}

.plan-dock__sheet .plan-sheet__fields {
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.3rem 0.6rem;
}

.plan-dock__sheet .plan-sheet__choice,
.plan-dock__sheet .plan-sheet__choice .form-note,
.plan-dock__sheet .plan-sheet__side .form-note {
  font-size: 0.82rem;
}

.plan-dock__sheet .plan-sheet__side:only-child {
  grid-column: 1 / -1;
}

.plan-dock__sheet .plan-sheet__choices {
  gap: 0.2rem;
}

.plan-dock__sheet .plan-sheet__choice {
  padding: 0.2rem 0.4rem;
}

.plan-dock__sheet .plan-sheet__line {
  margin: 0.15rem 0 0.3rem;
}

.plan-dock__sheet .plan-sheet__actions {
  margin-top: 0.5rem;
}

/* Last, so it wins over the two-column rules above. A narrow dock (a tablet beside the sidebar): detail above the sheet, the
   sheet's fields under its choices, and the dock scrolls. */
@container plan-dock (max-width: 56rem) {
  .plan-dock__body,
  .plan-dock[data-state="sheet"] .plan-dock__body,
  .plan-dock__sheet .plan-sheet__form {
    grid-template-columns: minmax(0, 1fr);
  }

  .plan-dock__detail {
    margin-bottom: 0.5rem;
  }
}

.plan-notice {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  background: #e8f3ee;
  color: #1f4f3a;
}

.plan-notice[data-kind="error"] {
  background: #fbe9e6;
  color: #8a2a1c;
}

.plan-notice[data-kind="warning"] {
  background: #fdf3dc;
  color: #6b4a0b;
}

.plan-notice[hidden],
.plan-notice__resort[hidden],
.plan-drafts[hidden] {
  display: none;
}

.plan-notice__resort {
  margin-left: auto;
  white-space: nowrap;
}

.plan-drafts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 0.75rem;
  margin: 0 0 0.6rem;
}

/* Redrawn on its own after a change; its fold sits in the strip's row. */
.plan-drafts__slot {
  display: contents;
}

/* A row redrawn after a change keeps its place and says so. */
.material-worklist__updated {
  font-size: 0.8rem;
  font-weight: 600;
  color: #1f6b47;
  white-space: nowrap;
}

.material-worklist__row--updated {
  animation: plan-row-updated 1.6s ease-out;
}

@keyframes plan-row-updated {
  from { background-color: #e3f2ea; }
  to { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .material-worklist__row--updated {
    animation: none;
  }
}

/* Applying: the row's chart already shows the change (its preview) while
   the server confirms it. */
.material-worklist__row.is-applying {
  opacity: 0.7;
  transition: opacity 0.15s;
}

.plan-drafts__summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}

.plan-drafts__list {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
  font-size: 0.85rem;
}

.plan-drafts__item {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
}

.material-worklist__chart {
  grid-column: 1 / -1;
  min-width: 0;
  position: relative;
}

/* A worklist row kept short: one line of name, problem and on hand, then
   the chart and its rail. */
.material-worklist__row--compact {
  display: block;
  padding: 0.45rem 0.5rem 0.35rem 0.75rem;
}

.material-worklist__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.75rem;
}

.material-worklist__line .material-worklist__on-hand {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.material-worklist__line .material-worklist__on-hand input {
  width: 4.5rem;
  padding: 0.2rem 0.4rem;
}

.material-worklist__line .material-worklist__on-hand .button {
  padding: 0.2rem 0.65rem;
  min-height: 0;
  font-size: 0.8rem;
}

.material-worklist__drafted {
  font-size: 0.85rem;
  color: #6b4a0c;
}

.material-plan-chart--compact {
  margin: 0.15rem 0 0;
}

.material-plan-chart--compact .material-plan-chart__body {
  padding: 0;
}

.plan-chip--small {
  min-height: 1.6rem;
  padding: 0.05rem 0.6rem;
  font-size: 0.8rem;
}

/* The rail: pills along the chart's dates. Positioned (two lanes) on a wide
   chart; wrapping in date order, each dated, under 600 px. */
.plan-rail {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.1rem 0 0.15rem;
}

.plan-rail--placed {
  display: block;
  min-height: 28px;
}

.plan-rail--placed > .plan-pill {
  position: absolute;
}

.plan-rail--placed .plan-pill__date {
  display: none;
}

.plan-pill {
  display: inline-flex;
  align-items: stretch;
  height: 24px;
  border: 1px solid #b9b1a6;
  border-radius: 999px;
  background: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}

.plan-pill__date {
  display: inline-flex;
  align-items: center;
  padding: 0 0.4rem;
  color: #6f6a62;
  font-weight: 500;
  border-right: 1px solid #e7e1d8;
}

.plan-pill button {
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  padding: 0 0.5rem;
  cursor: pointer;
  min-height: 0;
}

.plan-pill__more {
  border-left: 1px solid currentColor !important;
  padding: 0 0.4rem !important;
}

.plan-pill--transfer {
  border-color: #4a3aa7;
  color: #33287a;
}

.plan-pill--transfer .plan-pill__main {
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem;
  color: inherit;
  text-decoration: none;
}

.plan-pill--ghost {
  border-style: dashed;
}

.plan-pill--draft {
  color: #5f5a52;
  border-style: dashed;
}

.plan-pill--suggested {
  border-color: #1f6f50;
  background: #e8f3ee;
  color: #1f4f3a;
}

.plan-pill--review {
  border-color: #9a6a12;
  background: #fbf3e2;
  color: #6b4a0c;
}

/* A placed line past its day: counted as arriving today until the buyer
   says whether it's still coming. */
.plan-pill--late {
  border-color: #a8401c;
  border-style: solid;
  background: #fbebe4;
  color: #7a2c10;
}

.plan-pill button:hover,
.plan-pill button:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  outline: none;
}

.plan-pill:focus-within {
  box-shadow: 0 0 0 2px #1d1b18;
}

.plan-rail__more {
  position: absolute;
  font-size: 0.75rem;
}

.plan-rail:not(.plan-rail--placed) .plan-rail__more {
  position: static;
}

.plan-rail__more summary {
  cursor: pointer;
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem;
  border: 1px solid #b9b1a6;
  border-radius: 999px;
  background: #fff;
}

.plan-rail__menu {
  position: absolute;
  right: 0;
  z-index: 6;
  display: grid;
  gap: 0.3rem;
  margin-top: 0.25rem;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid #cfc7bb;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(32, 28, 22, 0.12);
}

.plan-rail__menu .plan-pill__date {
  display: inline-flex;
}

/* The ideal range on a material's chart: safety to target. */
.material-chart__zone {
  fill: rgba(31, 111, 80, 0.08);
}

/* Where a previewed change leaves the material against that range. */
.material-plan-chart__verdict,
.plan-sheet__verdict {
  font-weight: 600;
}

.material-plan-chart__verdict--in,
.plan-sheet__verdict[data-kind="in"] {
  color: #1f6f50;
}

.material-plan-chart__verdict--under,
.plan-sheet__verdict[data-kind="under"] {
  color: #8f1f13;
}

.material-plan-chart__verdict--over,
.plan-sheet__verdict[data-kind="over"] {
  color: #6b4a0e;
}

.plan-sheet__verdict {
  margin: 0;
  font-size: 0.85rem;
}

.material-plan-chart__tip-lines {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}

@media (max-width: 599px) {
  .plan-pill {
    height: 32px;
  }
}

.material-chart__po--actionable,
.material-chart__ghost,
.material-chart__chip {
  cursor: pointer;
}

.material-chart__po--actionable .material-chart__po-dot {
  stroke-width: 3;
}

.material-chart__ghost-dot {
  fill: #fff;
  stroke-width: 2;
  stroke-dasharray: 3 2;
}

.material-chart__ghost:focus-visible .material-chart__ghost-dot,
.material-chart__chip:focus-visible .material-chart__chip-box {
  outline: none;
  stroke: #1d1b18;
  stroke-width: 2;
}

.material-chart__chip-box {
  fill: #1f6f50;
}

.material-chart__chip--review .material-chart__chip-box {
  fill: #9a6a12;
}

.material-chart__chip-label {
  fill: #fff;
  font-size: 11px;
  font-weight: 700;
}

.material-plan-chart__message {
  margin: 0.35rem 0 0;
  color: #8f1f13;
  font-size: 0.8rem;
  font-weight: 600;
}

.material-plan-chart__legend {
  margin-top: 0.45rem;
  gap: 0.35rem;
}

.material-plan-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0 0 0.6rem;
  border: 1px solid #e2d7c9;
  border-radius: 999px;
  color: #1f1d1a;
  font-size: 0.8rem;
  font-weight: 700;
}

.material-plan-chart__swatch,
.material-plan-chart__readout-key {
  display: inline-block;
  width: 0.9rem;
  height: 0.25rem;
  border-radius: 2px;
  background: var(--series-color);
}

.material-plan-chart__readout-key {
  margin-right: 0.35rem;
  vertical-align: middle;
}

.material-plan-chart__remove {
  width: 1.9rem;
  height: 1.9rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #7a6858;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.material-plan-chart__remove:hover,
.material-plan-chart__remove:focus-visible {
  background: #f3ece3;
  color: #1f1d1a;
}

.material-plan-detail__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}

.material-plan-detail__header p {
  margin: 0;
}

.material-plan-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.material-plan-detail__grid {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(0, 2.5fr);
  gap: 1rem;
  margin-top: 0.75rem;
}

.material-plan-detail__grid > * {
  min-width: 0;
}

/* The demand list sits in a material's detail panel, which is much narrower
   than the screen on a laptop: it follows the panel's width, not the
   screen's. Purchase orders stack above it when the panel is narrow, and its
   rows become compact cards narrower still (phones included). */
.material-plan-detail {
  container: plan-detail / inline-size;
}

@container plan-detail (max-width: 960px) {
  .material-plan-detail__grid {
    grid-template-columns: 1fr;
  }
}

@container plan-detail (max-width: 720px) {
  /* Demand rows read as compact lines instead of a seven-field card: date
     and amount, the arrangement, the recipient, then order and design. The
     right column holds only amount and design status and is capped, so a
     long value there wraps instead of collapsing the left column under it. */
  .material-demand-table--responsive .material-demand-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) fit-content(45%);
    grid-template-areas:
      "date needed"
      "product product"
      "recipient recipient"
      "order design";
    gap: 0.15rem 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.6rem 0.7rem;
  }

  .material-demand-table--responsive .material-demand-cell {
    display: block;
    padding: 0;
    border: 0;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
  }

  .material-demand-table--responsive .material-demand-cell::before {
    content: none;
  }

  .material-demand-cell--date { grid-area: date; font-weight: 700; }
  .material-demand-cell--needed { grid-area: needed; text-align: right; }
  .material-demand-cell--product { grid-area: product; }
  .material-demand-cell--order { grid-area: order; }
  .material-demand-cell--recipient { grid-area: recipient; }
  .material-demand-cell--design { grid-area: design; text-align: right; color: #7a6858; font-size: 0.78rem; }
  .material-demand-table--responsive .material-demand-cell--qty { display: none; }

  .material-demand-cell--order .form-note,
  .material-demand-cell--product .form-note {
    display: inline;
    margin-left: 0.3rem;
  }

  .material-demand-table--responsive {
    min-width: 0;
  }

  .material-demand-table--responsive thead {
    display: none;
  }

  .material-demand-table--responsive,
  .material-demand-table--responsive tbody,
  .material-demand-row,
  .material-demand-cell {
    display: block;
    width: 100%;
  }

  .material-demand-row {
    margin-bottom: 0.85rem;
    padding: 0.8rem;
    border: 1px solid #e2d7c9;
    border-radius: 0.9rem;
    background: #fffaf4;
    box-shadow: 0 8px 18px rgba(53, 42, 31, 0.06);
  }

  .material-demand-cell {
    display: grid;
    grid-template-columns: minmax(7.5rem, 38%) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.45rem 0;
    border-bottom: 1px solid #eee5da;
  }

  .material-demand-cell:last-child {
    border-bottom: none;
  }

  .material-demand-cell::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7a6858;
  }
}

.material-plan-detail__grid h3 {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
}

.material-plan-detail__orders {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.material-plan-detail__order {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.5rem;
}

.material-plan-detail__order .form-note {
  flex-basis: 100%;
}

.material-plan-detail__order--draft {
  opacity: 0.8;
}

/* Purchasing area strip (orders, templates, planning), drawn like the holiday planner's and event page's strip. */
.purchasing-tabs {
  display: flex;
  gap: 0.3rem;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid #dfe3da;
}

.purchasing-tab {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.8rem 1rem;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  color: #6b7069;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.purchasing-tab:hover {
  background: #eaf0e6;
  color: #1f2a26;
}

.purchasing-tab.is-active {
  color: #1f2a26;
  border-bottom-color: #1f2a26;
}

.purchasing-tab:focus-visible {
  outline: 3px solid #b88a3d;
  outline-offset: -3px;
}

/* Template page: one row per expected receive date, plus what was just made. */
.po-template-dates {
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
}

.po-template-dates legend {
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.po-template-dates__list {
  display: grid;
  gap: 0.5rem;
  max-width: 20rem;
}

.po-template-dates__row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.po-template-dates__row input {
  flex: 1;
  min-width: 0;
}

.po-template-dates .po-template-dates__remove {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  min-height: 0;
  padding: 0;
  justify-content: center;
}

.po-template-dates__row:only-child .po-template-dates__remove {
  visibility: hidden;
}

.po-template-dates__add {
  margin: 0.6rem 0 0.4rem;
}

.po-template-created {
  margin: 0.75rem 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid #2f6b4f;
  background: #eef5ef;
}

.po-template-created p,
.po-template-created ul {
  margin: 0;
}

.po-template-created ul {
  padding-left: 1.1rem;
}

.incoming-materials-summary {
  margin: 0 0 1rem;
  color: #4f5a54;
}

.incoming-materials-summary__warn {
  color: #8f1f13;
  font-weight: 700;
}

.incoming-materials-day + .incoming-materials-day {
  margin-top: 1.5rem;
}

.incoming-materials-day__title {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.incoming-materials-overdue-title {
  margin: 2rem 0 0.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #e7ded3;
  color: #8f1f13;
  font-size: 1.1rem;
}

.incoming-materials-day--late .incoming-materials-day__title {
  color: #8f1f13;
}

.incoming-materials-table {
  table-layout: fixed;
}

.incoming-materials-table th:nth-child(1) { width: 30%; }
.incoming-materials-table th:nth-child(2) { width: 17%; }
.incoming-materials-table th:nth-child(3) { width: 18%; }

.incoming-materials-table td {
  vertical-align: top;
  overflow-wrap: anywhere;
}

.incoming-materials-table .form-note {
  display: block;
}

.incoming-materials-link {
  font-weight: 700;
  color: #234039;
}

.incoming-materials-row--uncounted {
  background: #fbf4f1;
}

.incoming-materials-status {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #e8efe9;
  color: #234039;
  font-size: 0.78rem;
  font-weight: 700;
}

.incoming-materials-status--draft {
  background: #f1ece4;
  color: #6f5f50;
}

.incoming-materials-status--partially-received {
  background: #e6eef6;
  color: #1f4b73;
}

.incoming-materials-note {
  display: block;
  margin-top: 0.25rem;
  color: #6f5f50;
  font-size: 0.8rem;
}

.incoming-materials-note--warn {
  color: #8f1f13;
  font-weight: 700;
}

@media (max-width: 720px) {
  .purchasing-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .incoming-materials-filter .form-grid .field:not(.material-planning-filter__actions) {
    grid-column: auto;
  }

  /* Each line as a two-row card: material and amount, then PO and status. */
  .incoming-materials-table {
    max-width: none;
    overflow-x: visible;
    background: none;
  }

  .incoming-materials-table thead {
    display: none;
  }

  .incoming-materials-table,
  .incoming-materials-table tbody {
    display: block;
  }

  .incoming-materials-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "material qty"
      "po po"
      "status status";
    gap: 0.25rem 0.75rem;
    padding: 0.6rem 0.2rem;
    border-bottom: 1px solid #eee5da;
  }

  .incoming-materials-table .incoming-materials-cell {
    display: block;
    padding: 0;
    border: 0;
    font-size: 0.86rem;
  }

  .incoming-materials-table .incoming-materials-cell::before {
    content: none;
  }

  .incoming-materials-cell--material { grid-area: material; }
  .incoming-materials-cell--qty { grid-area: qty; text-align: right; }
  .incoming-materials-cell--po { grid-area: po; }
  .incoming-materials-cell--status { grid-area: status; }

  .incoming-materials-table .incoming-materials-cell--po .form-note {
    display: inline;
    margin-left: 0.3rem;
  }

  .incoming-materials-table {
    table-layout: auto;
  }
}

@media (max-width: 720px) {
  .admin-header--material-planning {
    align-items: stretch;
    flex-direction: column;
  }

  .material-planning-page .admin-panel {
    padding: 0.85rem;
  }

  .material-planning-filter .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 0.75rem;
  }

  .material-planning-filter .field--wide,
  .material-planning-filter__actions {
    grid-column: 1 / -1;
  }

  .material-planning-filter__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .material-planning-filter__actions .button {
    justify-content: center;
    width: 100%;
  }

  .material-planning-filter__actions input[type="submit"] {
    grid-column: 1 / -1;
    width: 100%;
  }

  .material-planning-po__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .material-planning-po__grid .field--wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 430px) {
  .material-demand-cell {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

@media (max-width: 720px) {
  .orders-index-table {
    margin-inline: -1.8rem;
    width: calc(100% + 3.6rem);
    /* The generic mobile .admin-table rule clamps width to 100% for
       horizontal scrolling; card mode never overflows, and the clamp would
       strand the full-bleed width above at 100%, leaving a dead right gutter. */
    max-width: none;
    overflow-x: visible;
  }

  .orders-index-table .orders-index-row {
    margin-bottom: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .orders-index-table .orders-index-cell:not(.orders-index-cell--mobile-compact):not(.orders-index-cell--select) {
    display: none;
  }

  /* Pinned below the floating Menu button, and kept short: the line chart
     and its chips only. The key reads from the tooltip on a phone. */
  .material-plan-chart {
    top: 4.1rem;
    padding: 0.5rem 0.55rem;
  }

  .material-plan-chart__tools .button {
    min-height: 1.9rem;
    padding: 0.15rem 0.6rem;
  }

  .material-plan-chart__key {
    display: none;
  }

  .orders-index-table .orders-index-cell--mobile-compact {
    display: block;
    padding: 0;
    border-bottom: 1px solid #e7ded3;
  }

  /* Phone row: the same selection checkbox the desktop table uses, in its own
     44px column beside the compact card, so the print modal and quick route
     keep one set of inputs. The row carries the divider so both cells share
     it, and a checked row tints so the selection reads down the list. */
  .orders-index-table .orders-index-row {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: start;
    border-bottom: 1px solid #e7ded3;
  }

  .orders-index-table .orders-index-row:has(.orders-index-cell--select input:checked) {
    background: #eef5f0;
  }

  .orders-index-table .orders-index-cell--select {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 3.25rem;
    padding: 0;
    border-bottom: 0;
  }

  .orders-index-table .orders-index-cell--select input {
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
    accent-color: #234039;
  }

  .orders-index-table .orders-index-cell--select::before {
    content: none;
  }

  .orders-index-table .orders-index-cell--mobile-compact {
    border-bottom: 0;
  }

  .orders-index-cell--mobile-compact::before {
    content: none;
  }

  .orders-compact-row {
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .orders-compact-row__summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    min-height: 2rem;
    padding: 0.28rem 0.35rem;
    cursor: pointer;
  }

  .orders-compact-row__summary {
    list-style: none;
  }

  .orders-compact-row__summary::-webkit-details-marker {
    display: none;
  }

  .orders-compact-row__address {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    font-size: 0.82rem;
  }

  .orders-compact-row__time {
    color: #6f5f50;
    font-size: 0.76rem;
  }

  .orders-compact-row__time {
    font-weight: 700;
    white-space: nowrap;
  }

  /* Compact card: time code · order ref · city+zip on the first line, the
     three status badges beneath, everything else behind the disclosure. */
  .orders-compact-row__summary {
    grid-template-columns: auto auto minmax(0, 1fr);
    row-gap: 0.2rem;
  }

  .orders-compact-row__ref {
    font-weight: 700;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  .orders-compact-row__summary .orders-compact-row__address {
    text-align: right;
    font-weight: 600;
  }

  /* The pipeline badge stretches across the card's full width, so the
     summary's second line carries no dead space on the right. */
  .orders-compact-row__badges {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  .orders-compact-row__badges .order-status-badge {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }

  .orders-compact-row__badges .order-status-badge__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Expanded phone card, laid out like the routing board's order hover card:
     window, who, where, instructions, the arrangements with photos, then
     route / shop / value and the link into the order. */
  .orders-compact-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0 0.75rem 0.75rem 0;
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .orders-compact-card__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #eee5da;
  }

  .orders-compact-card__window {
    color: #8a5a12;
    font-weight: 700;
  }

  .orders-compact-card__window--flexible {
    color: #7a6858;
    font-weight: 600;
  }

  .orders-compact-card__ext {
    color: #7a6858;
    font-size: 0.74rem;
    white-space: nowrap;
  }

  .orders-compact-card__who,
  .orders-compact-card__address {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }

  .orders-compact-card__business {
    font-weight: 700;
    color: #234b8a;
  }

  .orders-compact-card__name {
    font-weight: 700;
  }

  .orders-compact-card__muted {
    color: #7a6858;
  }

  .orders-compact-card__instructions {
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    background: #fdf6e3;
    color: #8a5a12;
  }

  .orders-compact-card__items {
    list-style: none;
    margin: 0;
    padding: 0.6rem 0 0;
    border-top: 1px solid #eee5da;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .orders-compact-card__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .orders-compact-card__thumb {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    border: 1px solid #e2d7c9;
    object-fit: cover;
    background: #f3ece2;
  }

  .orders-compact-card__thumb.placeholder {
    background: linear-gradient(135deg, #e5d6c3 0%, #cdb9a0 100%);
  }

  .orders-compact-card__item-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
  }

  .orders-compact-card__item-name {
    font-weight: 600;
  }

  .orders-compact-card__qty {
    font-weight: 800;
    color: #8a5a12;
  }

  .orders-compact-card__designed {
    color: #1f6b3b;
    font-weight: 800;
  }

  .orders-compact-card__item-note {
    color: #4a3f33;
    font-size: 0.76rem;
    font-style: italic;
  }

  .orders-compact-card__foot {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-top: 0.6rem;
    border-top: 1px solid #eee5da;
    color: #4a3f33;
    font-size: 0.76rem;
  }

  .orders-compact-card__foot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .orders-compact-card__money {
    color: #1f1d1a;
    font-size: 0.86rem;
    font-weight: 800;
  }

  .orders-compact-card__open {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    gap: 0.25rem;
    min-height: 44px;
    padding: 0 0.25rem 0 0.75rem;
    color: #234039;
    font-weight: 700;
    text-decoration: none;
  }
}
.qc-segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.8rem 0;
}

.qc-segmented-control__option {
  position: relative;
  cursor: pointer;
}

/* The radio hides under its pill. Sized to nothing on purpose: the shared
 * input rule makes it 100% wide, and an absolute full-width input parked at
 * the Fail pill's left edge scrolled the phone sideways. */
.qc-segmented-control__option input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.qc-segmented-control__option span {
  align-items: center;
  border: 2px solid #cbd5e1;
  border-radius: 999px;
  color: #334155;
  display: flex;
  font-weight: 800;
  justify-content: center;
  min-height: 3rem;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.qc-segmented-control__option--pass input:checked + span {
  background: #dcfce7;
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
  color: #166534;
}

.qc-segmented-control__option--fail input:checked + span {
  background: #fee2e2;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
  color: #991b1b;
}

.qc-fail-notes {
  margin-top: 0.65rem;
}

.qc-line-item {
  padding: 0.75rem 0;
}

.qc-line-item + .qc-line-item {
  border-top: 1px solid #e5e7eb;
}

.qc-line-item__header h3 {
  margin-bottom: 0.15rem;
}

/* The QC check as a wizard: a compact header, a step bar, and one screen at
 * a time. Everything is sized to keep a screen inside a phone viewport. */
.qc-wizard {
  gap: 0.6rem;
}

.qc-wizard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.qc-wizard__title h1 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.2;
}

.qc-wizard__title p {
  margin: 0.1rem 0 0;
  font-size: 0.9rem;
  color: #4b5563;
}

.qc-wizard__exit {
  flex: 0 0 auto;
  min-height: 40px;
}

.qc-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qc-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
  padding: 0.4rem 0.2rem;
  border: 1px solid rgba(31, 29, 26, 0.12);
  border-radius: 12px;
  background: #fff;
  color: #6b7280;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.qc-tab:disabled {
  cursor: default;
  opacity: 0.6;
}

.qc-tab__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 0.85rem;
  font-weight: 800;
}

.qc-tab--done {
  color: #166534;
}

.qc-tab--done .qc-tab__number {
  background: #16a34a;
  color: #fff;
}

.qc-tab--current {
  border-color: #1f2937;
  color: #1f2937;
}

.qc-tab--current .qc-tab__number {
  background: #1f2937;
  color: #fff;
}

.qc-screen[hidden] {
  display: none;
}

.qc-screen__header {
  margin-bottom: 0.5rem;
}

.qc-screen__header h2 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.25;
}

.qc-screen__kicker {
  display: block;
  margin-bottom: 0.15rem;
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Step 1: every line on one screen. The product photo leads each line, wide
 * enough to read the design from, and opens full size on a tap. */
.qc-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.75rem 0;
  border-top: 1px solid rgba(31, 29, 26, 0.08);
}

.qc-line:first-of-type {
  border-top: 0;
  padding-top: 0.25rem;
}

.qc-line__body {
  min-width: 0;
}

.qc-line__body > h3 {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
  line-height: 1.25;
}

.qc-line__body .line-item-note {
  margin: 0.35rem 0 0;
}

.qc-line__body .qc-line-item__recipe {
  margin-top: 0.5rem;
}

.qc-line__photo-button {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  border-radius: 12px;
}

.qc-line__photo-button:focus-visible {
  outline: 2px solid #1f8a47;
  outline-offset: 2px;
}

.qc-line__photo-button img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 12px;
  background: rgba(31, 29, 26, 0.06);
}

.qc-line__no-photo {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 3;
  border-radius: 12px;
  background: rgba(31, 29, 26, 0.06);
  color: #6b7280;
  font-size: 0.85rem;
}

@media (min-width: 640px) {
  .qc-line {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
  }
}

/* The full-size product photo: the picture alone on a dark ground, gone on a
 * tap anywhere. */
.qc-lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  cursor: zoom-out;
}

.qc-lightbox::backdrop {
  background: rgba(12, 10, 8, 0.9);
}

.qc-lightbox__image {
  display: block;
  max-width: min(96vw, 1600px);
  max-height: 92vh;
  max-height: 92dvh;
  margin: 4vh auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}

.qc-lightbox__close {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 250, 244, 0.9);
  color: #1f1d1a;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* Failing the recipe on sight: folded under the way on, opens to a note and
 * the send-back. */
.qc-recipe-fail {
  margin-top: 0.75rem;
}

.qc-recipe-fail__summary {
  list-style: none;
  width: 100%;
  justify-content: center;
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.4);
}

.qc-recipe-fail__summary::-webkit-details-marker {
  display: none;
}

.qc-recipe-fail[open] .qc-recipe-fail__summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.qc-recipe-fail__form {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid rgba(185, 28, 28, 0.4);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: #fef2f2;
}

.qc-recipe-fail__form .form-note {
  margin: 0;
  color: #7f1d1d;
}

.qc-recipe-fail__submit {
  width: 100%;
  background: #b91c1c;
  border-color: #b91c1c;
}

.qc-recipe-fail__submit:hover {
  background: #991b1b;
  border-color: #991b1b;
}

.qc-line-item__recipe h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0.35rem;
  font-size: 0.95rem;
}

.qc-point .form-note {
  margin: 0.25rem 0;
}

.qc-point__issue-photo {
  display: block;
  max-width: 180px;
  margin: 0.5rem 0;
  border-radius: 10px;
}

.qc-nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.qc-nav .button {
  min-height: 48px;
}

.qc-nav__back {
  flex: 0 0 auto;
}

.qc-nav__back[hidden] {
  display: none;
}

.qc-nav__next {
  flex: 1 1 auto;
}

.qc-nav__next:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.qc-nav__next[hidden] {
  display: none;
}

.qc-result {
  margin: 0.25rem 0 0.9rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  background: #f3f4f6;
  color: #374151;
  font-weight: 600;
}

.qc-result--pass {
  background: #dcfce7;
  color: #166534;
}

.qc-result--fail {
  background: #fee2e2;
  color: #991b1b;
}

.qc-photo-step[hidden] {
  display: none;
}

.qc-photo-step__note {
  margin: 0 0 0.5rem;
}

.qc-history summary {
  cursor: pointer;
  color: #4b5563;
  font-size: 0.9rem;
  font-weight: 600;
}

.qc-history .admin-table {
  margin-top: 0.5rem;
}

.qc-line-item__photo {
  min-width: 0;
}

/* Design photo capture at QC: the slot, one big camera button, and on a desk
 * a webcam button that a phone (coarse pointer) never shows. */
.qc-photo-capture {
  display: grid;
  gap: 0.6rem;
}

.qc-photo-capture .designer-station-design-photo {
  max-width: 100%;
}

/* The preview is a check, not the photo screen: a square short enough that
 * the Take photo button and Submit stay on screen under it, phone or desk. */
.qc-photo-capture .designer-station-design-photo__image {
  width: auto;
  max-width: 100%;
  height: clamp(160px, 30vh, 280px);
}

.qc-photo-capture__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.qc-photo-capture__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 48px;
  cursor: pointer;
}

.qc-photo-capture__button:focus-within {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
}

.qc-photo-capture__status:empty {
  display: none;
}

@media (pointer: coarse) {
  .qc-photo-capture__webcam {
    display: none;
  }

  .qc-photo-capture__button {
    flex: 1 1 100%;
  }
}

/* Scan mode on the QC start page. */
.qc-scanner {
  display: grid;
  gap: 0.75rem;
}

.qc-scanner__viewport {
  position: relative;
}

/* The camera is a short landscape window, not the whole screen: the status
 * line and the typed fallback stay on screen under it, phone or desk. */
.qc-scanner__video {
  display: block;
  width: 100%;
  height: clamp(180px, 34vh, 300px);
  border-radius: 10px;
  background: #111827;
  object-fit: cover;
}

.qc-scanner__video[hidden] {
  display: none;
}

.qc-scanner__frame {
  position: absolute;
  inset: 18% 10%;
  border: 3px solid rgba(255, 255, 255, 0.85);
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 0 0 999px rgba(17, 24, 39, 0.25);
}

.qc-scanner__frame[hidden] {
  display: none;
}

.qc-scanner__start {
  min-height: 48px;
}

.qc-scanner__form {
  margin-top: 0.25rem;
}

/* A failed check: the send-back prompt. */
.qc-fail-modal__panel {
  display: grid;
  gap: 0.6rem;
}

.qc-fail-modal__panel h2 {
  margin: 0;
}

.qc-fail-modal__score,
.qc-fail-modal__designer {
  margin: 0;
}

.qc-fail-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.qc-fail-modal__actions form {
  flex: 1 1 auto;
}

.qc-fail-modal__actions .button {
  min-height: 48px;
  width: 100%;
}

.qc-fail-modal__actions a.button {
  width: auto;
}

/* The two photo boxes stay side by side on a phone: the product reference is
 * a thumbnail there, not a screen of its own, and the capture button sits
 * beside it above the fold. */
.qc-line-item__photo > img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
}

.qc-photo-capture .designer-station-design-photo__label {
  display: none;
}

.qc-line-item__photo-label {
  display: block;
  color: #6b7280;
  font-size: 0.7rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.qc-line-item__recipe {
  font-size: 0.76rem;
}

.qc-line-item__recipe summary {
  color: #374151;
  cursor: pointer;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.qc-line-item__recipe ul {
  list-style: disc;
  margin: 0 0 0 1.1rem;
  padding: 0;
}

.qc-line-item__recipe li {
  color: #475569;
  line-height: 1.4;
  margin-bottom: 0.15rem;
}

.qc-recipe-diff-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: 0.35rem;
  vertical-align: middle;
}

.qc-recipe-diff-badge--warn {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.qc-recipe-diff-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.65rem;
  font-size: 0.72rem;
}

.qc-recipe-diff-table th {
  color: #6b7280;
  font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.45rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.qc-recipe-diff-table th:last-child {
  text-align: right;
}

.qc-recipe-diff-table td {
  padding: 0.35rem 0.45rem;
  border-bottom: 1px solid #f3f4f6;
  color: #374151;
}

.qc-recipe-diff-table td:last-child {
  text-align: right;
}

.qc-recipe-diff-table tbody tr:last-child td {
  border-bottom: none;
}

.qc-recipe-diff-row--exact td {
  color: #374151;
}

.qc-recipe-diff-row--exact {
  background: #f9fafb;
}

.qc-recipe-diff-row--short td {
  color: #92400e;
}

.qc-recipe-diff-row--short {
  background: #fffbeb;
}

.qc-recipe-diff-row--excess td {
  color: #92400e;
}

.qc-recipe-diff-row--excess {
  background: #fffbeb;
}

.qc-recipe-diff-row--missing td {
  color: #991b1b;
}

.qc-recipe-diff-row--missing {
  background: #fef2f2;
}

.qc-recipe-diff-row--extra td {
  color: #065f46;
}

.qc-recipe-diff-row--extra {
  background: #ecfdf5;
}

.qc-recipe-diff-label {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.qc-recipe-diff-label--exact {
  background: #dcfce7;
  color: #166534;
}

.qc-recipe-diff-label--short {
  background: #fef3c7;
  color: #92400e;
}

.qc-recipe-diff-label--excess {
  background: #fef3c7;
  color: #92400e;
}

.qc-recipe-diff-label--missing {
  background: #fee2e2;
  color: #991b1b;
}

.qc-recipe-diff-label--extra {
  background: #d1fae5;
  color: #065f46;
}

/* ============================================
   QC Reports
   ============================================ */
.qc-report-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.qc-report-stat {
  text-align: center;
  padding: 1.1rem 0.75rem;
}

.qc-report-stat span {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.qc-report-stat strong {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  position: relative;
}

.qc-tooltip {
  align-items: center;
  background: rgba(107, 114, 128, 0.18);
  border-radius: 999px;
  color: #6b7280;
  cursor: help;
  display: inline-flex;
  font-size: 0.55rem;
  font-weight: 700;
  height: 1.05rem;
  justify-content: center;
  line-height: 1;
  margin-left: 0.25rem;
  vertical-align: super;
  width: 1.05rem;
  transition: background 0.12s ease, color 0.12s ease;
}

.qc-tooltip:hover,
.qc-tooltip:focus-visible {
  background: #374151;
  color: #fff;
}

.qc-tooltip::after {
  background: #111827;
  border-radius: 8px;
  color: #f9fafb;
  content: attr(aria-label);
  font-size: 0.68rem;
  font-weight: 500;
  left: 50%;
  letter-spacing: normal;
  line-height: 1.35;
  opacity: 0;
  padding: 0.45rem 0.55rem;
  pointer-events: none;
  position: absolute;
  text-align: left;
  top: calc(100% + 6px);
  transform: translateX(-50%) translateY(2px);
  transition: opacity 0.1s ease, transform 0.1s ease;
  white-space: nowrap;
  z-index: 50;
}

.qc-tooltip:hover::after,
.qc-tooltip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.qc-report-stat--green {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
}

.qc-report-stat--green span { color: #166534; }
.qc-report-stat--green strong { color: #15803d; }

.qc-report-stat--blue {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
}

.qc-report-stat--blue span { color: #1e40af; }
.qc-report-stat--blue strong { color: #2563eb; }

.qc-report-stat--red {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 12px;
}

.qc-report-stat--red span { color: #991b1b; }
.qc-report-stat--red strong { color: #dc2626; }

.qc-report-chart__row {
  margin-bottom: 0.35rem;
}

.qc-report-chart__value {
  min-width: 6rem;
  text-align: right;
  font-size: 0.78rem;
}

.qc-report-failure-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.5rem;
}

.qc-report-failure-grid h3 {
  font-size: 0.82rem;
  color: #374151;
  margin: 0 0 0.5rem;
}

.qc-report-table tbody tr:last-child {
  border-bottom: none;
}

.qc-score-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.qc-score-badge--pass {
  background: #dcfce7;
  color: #166534;
}

.qc-score-badge--warn {
  background: #fef3c7;
  color: #92400e;
}

.qc-score-badge--fail {
  background: #fee2e2;
  color: #991b1b;
}

.qc-result-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.qc-result-badge--pass {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.qc-result-badge--fail {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.qc-fail-count {
  display: inline-block;
  background: #fee2e2;
  border-radius: 999px;
  color: #dc2626;
  font-size: 0.7rem;
  font-weight: 800;
  min-width: 1.5rem;
  padding: 0.1rem 0.4rem;
  text-align: center;
}

@media (max-width: 800px) {
  .qc-report-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qc-report-failure-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Merged layout body --- */
.designer-station-product__body--merged {
  display: flex;
  gap: 0;
  align-items: stretch;
}

.designer-station-product__left {
  width: 33%;
  flex-shrink: 0;
  border-right: 1px solid rgba(31, 29, 26, 0.08);
  padding: 0.65rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.designer-station-product__details {
  min-width: 0;
  width: 100%;
}

.designer-station-product__left > .designer-station-product__image-trigger {
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  height: auto;
  overflow: hidden;
}

.designer-station-product__left .designer-station-product__media {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
}

.designer-station-product__left .designer-station-product__placeholder {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  font-size: 0.7rem;
}

.designer-station-product__left > .designer-station-design-photo {
  width: 100%;
}

.designer-station-picklist-qr-modal__panel {
  background: #fffdf8;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(35, 64, 57, 0.22);
  max-width: min(92vw, 360px);
  padding: 1.25rem;
  position: relative;
  text-align: center;
  width: 100%;
}

.designer-station-picklist-qr-modal__panel h3 {
  color: #234039;
  margin: 0 0 0.35rem;
}

.designer-station-picklist-qr-modal__qr {
  align-items: center;
  background: #f0faf0;
  border: 1px solid rgba(35, 64, 57, 0.15);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  margin-top: 0.9rem;
  padding: 0.75rem;
}

.designer-station-picklist-qr-modal__qr svg {
  display: block;
  height: auto;
  max-width: 100%;
}

.designer-station-product__right {
  flex: 1;
  min-width: 0;
  padding: 0.65rem 0.85rem;
}

.designer-station-product__title-line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.05rem;
  gap: 0.3rem;
  margin: 0 0 0.25rem;
}

.designer-station-product__title-line strong {
  color: #5f574e;
}

.designer-station-product__title-line .designer-station-product__sku {
  color: #a8a29e;
  font-size: 0.82rem;
}

.designer-station-product__right h2 {
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
}

.designer-station-product__right .designer-station-pick-list-header {
  margin: 0.5rem 0 0.25rem;
}

/* --- Material row thumbnails --- */
.designer-station-material-thumb-wrap {
  display: inline-block;
  position: relative;
}

.designer-station-material-row__thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  background: #f8f5ef;
}

.designer-station-material-row__thumb--placeholder {
  background: #f8f5ef;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #a8a29e;
}

.designer-station-substitution-badge {
  align-items: center;
  background: #234039;
  border: 2px solid #fffdf8;
  border-radius: 999px;
  color: #fffdf8;
  display: flex;
  font-size: 0.72rem;
  font-weight: 800;
  height: 20px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: -6px;
  top: -6px;
  width: 20px;
}

.designer-station-substitution-badge[hidden] {
  display: none;
}

.designer-station-qty-stepper {
  display: inline-flex;
  align-items: stretch;
  white-space: nowrap;
}

.designer-station-qty-stepper__btn {
  width: 28px;
  min-height: 34px;
  border: 1px solid rgba(35, 64, 57, 0.22);
  background: #f8fbf7;
  color: #234039;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.designer-station-qty-stepper__btn:first-child {
  border-radius: 0.45rem 0 0 0.45rem;
}

.designer-station-qty-stepper__btn:last-child {
  border-radius: 0 0.45rem 0.45rem 0;
}

.designer-station-qty-stepper__btn + .designer-station-qty-stepper__input,
.designer-station-qty-stepper__input + .designer-station-qty-stepper__btn {
  margin-left: -1px;
}

.designer-station-qty-stepper__input {
  border-radius: 0;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.designer-station-qty-stepper--compact .designer-station-qty-stepper__btn {
  width: 24px;
}

/* The autosave note on a recipe ingredient row. Quiet and out of the way — it
   reports, it does not ask for anything. */
.inline-save-status {
  display: inline-block;
  min-width: 4.5rem;
  margin-right: 0.4rem;
  font-size: 0.75rem;
  color: #6b6255;
  vertical-align: middle;
}

/* The row's form holds no controls now that the save button is gone; left in the
   flow it would still take a line of its own. */
.admin-actions form:empty {
  display: none;
}

/* The floating add-item button on the purchase order and template pages. Sits
   above the content but below the modal overlay (z 200) it opens. */
.purchase-order-fab {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 150;
  width: 3.4rem;
  height: 3.4rem;
  border: none;
  border-radius: 50%;
  background: #3d4b47;
  color: #f7f4ef;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(31, 29, 26, 0.35);
}

.purchase-order-fab:hover,
.purchase-order-fab:focus-visible {
  background: #2e3a37;
}

/* The add-item modal's quantity stepper stretches to the card's width, its
   input growing between the +/- ends. */
.purchase-order-modal-stepper {
  display: flex;
  width: 100%;
}

.purchase-order-modal-stepper .designer-station-qty-stepper__input {
  flex: 1;
  text-align: center;
}

/* Cancel and Add item share one line: a third for backing out, two thirds for
   the action the modal exists for. */
.purchase-order-modal-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.6rem;
}

.purchase-order-modal-actions .button,
.purchase-order-modal-actions input[type="submit"] {
  width: 100%;
}

/* Holds its line even while empty so the modal doesn't jump when the
   conversion appears. */
.purchase-order-conversion-note {
  min-height: 1.2em;
  margin-top: 0.35rem;
}

/* Sizing for the purchase order (and template) line widgets, in classes rather
   than inline styles so the phone layout below can reshape them. */
.purchase-order-qty-input {
  width: 72px;
  text-align: right;
}

.purchase-order-note-input {
  min-width: 10rem;
}

/* A purchase order line projected to overstock its material: a quiet flag under
   the item name, the arithmetic on hover. */
.purchase-order-overstock-flag {
  display: inline-block;
  margin-top: 0.2rem;
  color: #b7791f;
  font-size: 0.78rem;
  font-weight: 600;
}

.designer-station-material-row__actions {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
}

.designer-station-material-row__actions .text-link + .text-link {
  margin-left: 0.65rem;
}

.designer-station-material-row__actions .text-link {
  color: #234039;
  font-weight: 700;
}

.designer-station-material-row__actions .text-link:hover,
.designer-station-material-row__actions .text-link:focus-visible {
  color: #111f1b;
}

.designer-station-material-row__remove {
  font-size: 1rem;
  line-height: 1;
}

.designer-station-qty-stepper__btn:hover,
.designer-station-qty-stepper__btn:focus-visible {
  background: #eef7ec;
  border-color: rgba(35, 64, 57, 0.42);
  z-index: 2;
}

/* --- Details card (lower section) --- */
.designer-station-details-card {
  margin-top: 0.75rem;
}

.designer-station-details-card__body {
  display: flex;
  gap: 1rem;
  padding: 0.85rem;
  align-items: flex-start;
}

.designer-station-details-card__main {
  flex: 1;
  min-width: 0;
}

.designer-station-details-card__main h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}

.designer-station-details-card__design-photo h4 {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
}

.designer-station-details-card__photo-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(31, 29, 26, 0.12);
}

.designer-station-details-card__photo-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.designer-station-details-card__costs {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex-shrink: 0;
  width: 130px;
}

.designer-station-details-card__costs .designer-station-cost-card {
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
}

.designer-station-details-card__costs .designer-station-cost-card span {
  font-size: 0.68rem;
}

.designer-station-details-card__costs .designer-station-cost-card strong {
  font-size: 0.85rem;
}

/* --- Compact admin table for material rows --- */
.admin-table--compact th,
.admin-table--compact td {
  padding: 0.25rem 0.35rem;
  vertical-align: middle;
}

.admin-table--compact .inline-select {
  padding: 0.15rem 0.35rem;
  font-size: 0.82rem;
}

@media (max-width: 720px) {
  .designer-station-product__body--merged {
    flex-direction: column;
  }

  .designer-station-product__left {
    align-items: flex-start;
    border-right: 0;
    border-bottom: 1px solid rgba(31, 29, 26, 0.08);
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(0, 1fr) 112px;
    width: auto;
  }

  .designer-station-product__details {
    grid-column: 1;
    grid-row: 1;
  }

  .designer-station-product__left > .designer-station-product__image-trigger,
  .designer-station-product__left .designer-station-product__placeholder {
    grid-column: 2;
    grid-row: 1;
    height: 112px;
    width: 112px;
  }

  /* Keep the design photo directly under the variant photo in the side column. */
  .designer-station-product__left > .designer-station-design-photo {
    grid-column: 2;
    grid-row: 2;
    width: 112px;
  }

  .designer-station-picklist-qr--desktop-only {
    display: none;
  }
}

.designer-station-completion-row {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(31, 29, 26, 0.08);
}

.designer-station-completion-row__correction {
  align-items: center;
  color: #5f574e;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.88rem;
  gap: 0.35rem;
  white-space: nowrap;
}

.designer-station-completion-row__correction input[type="checkbox"] {
  margin: 0;
}

.designer-station-modal-backdrop[hidden] {
  display: none !important;
}

/* --- Designer station: phone tier --- */
@media (max-width: 640px) {
  .designer-station-page {
    padding: 0.85rem 0.6rem 2.5rem;
  }

  .designer-station-header,
  .designer-station-card {
    padding: 0.9rem 0.75rem;
  }

  .designer-station-header__actions {
    width: 100%;
  }

  .designer-station-claim-form {
    flex: 1 1 auto;
  }

  .designer-station-claim-form input[type="text"] {
    min-width: 0;
    flex: 1 1 auto;
  }

  .designer-station-claim-form input[type="submit"],
  .designer-station-claim-form .button {
    flex: 0 0 auto;
    width: auto;
  }

  .designer-station-active-actions .button,
  .designer-station-active-actions form,
  .designer-station-active-actions .button_to {
    width: 100%;
  }

  /* 16px form controls stop iOS focus zoom */
  .designer-station-page input,
  .designer-station-page select,
  .designer-station-page textarea,
  .designer-station-page .admin-table--compact .inline-select {
    font-size: 1rem;
  }

  .designer-station-line-choice {
    padding: 0.55rem 0.35rem;
  }

  .designer-station-line-choice__info strong {
    white-space: normal;
  }

  /* Stacked tables: hide the header row, turn each row into a labelled block */
  .admin-table--stacked {
    display: block;
    overflow-x: visible;
  }

  .admin-table--stacked thead {
    display: none;
  }

  .admin-table--stacked tbody {
    display: block;
  }

  .admin-table--stacked tr {
    display: block;
    padding: 0.65rem 0;
    border-bottom: 1px solid #eee8df;
  }

  .admin-table--stacked td {
    display: block;
    border: 0;
    padding: 0.18rem 0;
    text-align: left;
  }

  .admin-table--stacked td[data-label] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: right;
  }

  .admin-table--stacked td[data-label]::before {
    content: attr(data-label);
    color: #6b635a;
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
  }

  .admin-table--stacked td .button,
  .admin-table--stacked td form,
  .admin-table--stacked td .button_to {
    width: 100%;
  }

  /* Purchase order and template lines, phone width: just the material and its
     amount, "Bunches: 4" style — the amount's label is the line's own
     wholesale unit, carried in via data-label. Units, projections, cost and
     note stay desktop-only; the vendor group headings remain as section
     labels. */
  .purchase-order-lines-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "item item"
      "qty actions";
    align-items: center;
    gap: 0.3rem 0.6rem;
  }

  .purchase-order-lines-table .admin-table-group-header,
  .purchase-order-lines-table .purchase-order-group-heading {
    display: block;
    padding: 0.85rem 0 0.1rem;
    border-bottom: 0;
    text-align: left;
  }

  .purchase-order-lines-table td[data-label="Item"] {
    grid-area: item;
    display: block;
    text-align: left;
    font-weight: 600;
  }

  .purchase-order-lines-table td[data-label="Item"]::before {
    content: none;
  }

  .purchase-order-lines-table .purchase-order-qty-cell {
    grid-area: qty;
    justify-content: flex-start;
    gap: 0.4rem;
  }

  .purchase-order-lines-table .purchase-order-qty-cell[data-label]::before {
    content: attr(data-label) ":";
  }

  .purchase-order-lines-table .purchase-order-actions-cell {
    grid-area: actions;
  }

  .purchase-order-lines-table .purchase-order-line-detail,
  .purchase-order-lines-table td:empty {
    display: none;
  }

  .purchase-order-lines-table .admin-actions {
    justify-content: flex-end;
  }

  .purchase-order-lines-table .admin-actions form,
  .purchase-order-lines-table .admin-actions .button {
    width: auto;
  }

  /* Material usage rows become cards: thumb + name + cost, stepper + actions */
  .designer-station-usage-table {
    display: block;
    overflow-x: visible;
  }

  .designer-station-usage-table thead {
    display: none;
  }

  .designer-station-usage-table tbody {
    display: block;
  }

  .designer-station-usage-table tr[data-substitute-panel-owner] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
      "thumb name cost"
      "stepper stepper actions";
    gap: 0.4rem 0.6rem;
    align-items: center;
    padding: 0.65rem 0;
    border-top: 1px solid rgba(31, 29, 26, 0.08);
  }

  .designer-station-usage-table tr[data-substitute-panel-owner]:first-child {
    border-top: 0;
  }

  .designer-station-usage-table tr[hidden] {
    display: none !important;
  }

  .designer-station-usage-table tr[data-substitute-panel-owner] > td {
    display: block;
    border: 0;
    padding: 0;
  }

  .designer-station-usage-table tr[data-substitute-panel-owner] > td:nth-child(1) {
    grid-area: thumb;
  }

  .designer-station-usage-table tr[data-substitute-panel-owner] > td:nth-child(2) {
    grid-area: stepper;
  }

  .designer-station-usage-table tr[data-substitute-panel-owner] > td:nth-child(3) {
    grid-area: name;
    min-width: 0;
  }

  .designer-station-usage-table tr[data-substitute-panel-owner] > td:nth-child(4) {
    grid-area: cost;
    text-align: right;
  }

  .designer-station-usage-table tr[data-substitute-panel-owner] > td:nth-child(5) {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.9rem;
  }

  .designer-station-usage-table .designer-station-material-row__actions .text-link + .text-link {
    margin-left: 0;
  }

  .designer-station-usage-table .designer-station-substitute-row {
    display: block;
  }

  .designer-station-usage-table .designer-station-substitute-row > td {
    display: block;
    border: 0;
    padding: 0 0 0.65rem;
  }

  /* Thumb-sized qty steppers */
  .designer-station-usage-table .designer-station-qty-stepper__btn {
    min-height: 42px;
    width: 42px;
  }

  .designer-station-usage-table .designer-station-qty-stepper__input {
    min-height: 42px;
  }

  .designer-station-completion-row {
    align-items: stretch;
    flex-direction: column;
    gap: 0.6rem;
  }

  .designer-station-completion-row .button {
    width: 100%;
  }

  .designer-station-completion-row__correction {
    justify-content: center;
    white-space: normal;
  }

  .batch-line-card__recipe-correction-field {
    margin-top: 0;
  }

  .batch-line-card__recipe-correction-label {
    line-height: 1.3;
    white-space: normal;
  }

  .batch-timer-card__content h1 {
    font-size: 1.3rem;
  }

  .designer-station-modal-backdrop {
    padding: 0.6rem;
  }

  .designer-station-modal {
    max-height: calc(100dvh - 1.2rem);
    padding: 0.85rem;
  }
}

/* Org scorecard pressure gauge ------------------------------------------- */

/* Two cards, each pairing a measure's raw figures with its gauge. They drop to
   one column before the gauge arc gets too narrow to read. */
.scorecard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.scorecard-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.4rem;
  border: 1px solid #efe2d3;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #fffdfb 0%, #f7efe7 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.scorecard-card__title {
  margin: 0;
  align-self: flex-start;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #725d4c;
}

.scorecard-card__figures {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.6rem;
  width: 100%;
  margin: 0.9rem 0 0.2rem;
}

.scorecard-card__figures > div {
  text-align: center;
}

.scorecard-card__figures dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8b7768;
}

.scorecard-card__figures dd {
  margin: 0.15rem 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #2f241d;
}

.scorecard-gauge {
  margin-top: 0.55rem;
}

.scorecard-gauge svg {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
}

/* Solid fills, no opacity: the arc is the gauge face, and dimming would shift
   the rendered colours away from the ones the contrast check was run against. */
.scorecard-gauge__band {
  fill: none;
  stroke-linecap: butt;
}

.scorecard-gauge__tick {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: #8b7768;
  text-anchor: middle;
}

.scorecard-gauge__tick.is-current {
  fill: #2f241d;
}

.scorecard-gauge__needle {
  stroke: #2f241d;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.scorecard-gauge__hub {
  fill: #2f241d;
}

.scorecard-gauge__readout {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-top: 0.15rem;
}

.scorecard-gauge__grade {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.scorecard-gauge__caption {
  font-size: 0.78rem;
  color: #725d4c;
}

.scorecard-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.scorecard-pill--f {
  background: rgba(187, 20, 32, 0.14);
  color: #96101a;
}

.scorecard-pill--d {
  background: rgba(245, 124, 0, 0.16);
  color: #9a4d00;
}

.scorecard-pill--c {
  background: rgba(255, 204, 22, 0.26);
  color: #7a5b00;
}

.scorecard-pill--b {
  background: rgba(102, 180, 70, 0.18);
  color: #3d7a26;
}

.scorecard-pill--a {
  background: rgba(17, 110, 54, 0.14);
  color: #116e36;
}

.scorecard-pill--over {
  background: rgba(112, 20, 38, 0.16);
  color: #701426;
}

.scorecard-pill--none {
  background: rgba(31, 29, 26, 0.08);
  color: #6b6255;
}

/* Time Clock Report — payroll hours per employee and the exceptions holding a
   run up. Figures are read down a column against each other, so they are
   tabular and monospaced-by-figure rather than merely right aligned.

   The page is read line by line against a pay run, so it trades the admin
   theme's soft cards for square corners, a hairline border and dense rows:
   the radius tokens are re-set here so panels, buttons and selects follow. */
.tc-report {
  --radius-lg: 6px;
  --radius-md: 6px;
  --radius-sm: 4px;
  color: #1f1d1a;
}

.tc-report .admin-panel {
  margin-bottom: 0.75rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid #e4dbcf;
  box-shadow: 0 1px 2px rgba(31, 29, 26, 0.06);
}

.tc-report .button {
  padding: 0.55rem 1.1rem;
}

.tc-summary__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  color: #1f1d1a;
}

.tc-summary__period {
  color: #5f564b;
  font-size: 0.9rem;
  font-weight: 400;
}

.tc-summary__note {
  margin: 0.6rem 0 0;
  color: #5f564b;
  font-size: 0.88rem;
}

.tc-alert-summary.is-flagged {
  border-left: 4px solid #c2573d;
}

.tc-alert-summary__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tc-employee.is-flagged {
  border-left: 4px solid #c2573d;
}

.tc-employee__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid #e4dbcf;
}

.tc-employee__head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.tc-employee__meta {
  margin: 0.1rem 0 0;
  color: #5f564b;
  font-size: 0.88rem;
}

.tc-employee__figures {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.tc-figure {
  display: flex;
  flex-direction: column;
}

.tc-figure__label {
  color: #5f564b;
  font-size: 0.8rem;
  font-weight: 600;
}

.tc-figure strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.tc-figure__unit {
  color: #756b5f;
  font-size: 0.85rem;
  font-weight: 400;
}

.tc-figure.is-zero strong {
  color: #a39889;
  font-weight: 400;
}

.tc-employee__flags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.tc-badge {
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
}

.tc-badge--pending {
  background: #f8eeda;
  color: #8a6218;
}

.tc-badge--clear {
  background: #e8eddf;
  color: #4f5f3c;
}

/* Grouped alert counts carry the same two severities the per-line alerts do:
   a hole in the hours reads red, a number worth a second look reads amber. */
.tc-badge--critical {
  background: #f7e2dc;
  color: #8c3423;
}

.tc-badge--warning {
  background: #f8eeda;
  color: #8a6218;
}

.tc-figure--emphasis strong {
  color: #3f5d3a;
}

.tc-figure.is-overtime strong {
  color: #8a6218;
}

.admin-panel.tc-period-error {
  border-left: 4px solid #c2573d;
}

.tc-period-error p {
  margin: 0 0 0.3rem;
}

.tc-period-error p:last-child {
  margin-bottom: 0;
  color: #756b5f;
  font-size: 0.88rem;
}

/* The daily detail is a native disclosure -- no controller, no JavaScript. It
   starts closed so the page leads with the payroll figures rather than with
   every punch of the period. */
.tc-day-breakdown > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0.1rem;
  cursor: pointer;
  font-weight: 600;
  list-style-position: inside;
}

.tc-day-breakdown > summary:focus-visible {
  outline: 2px solid #6f5b45;
  outline-offset: 2px;
  border-radius: 3px;
}

.tc-day-breakdown > summary:hover {
  color: #6f5b45;
}

.tc-day-breakdown__count {
  color: #5f564b;
  font-size: 0.85rem;
  font-weight: 400;
}

.tc-table tr.is-paid-absence td {
  background: #f2f5ec;
}

@media (max-width: 640px) {
  .tc-employee__figures {
    gap: 0.75rem 1rem;
  }
}

/* The register is wider than the panel on a narrow window, so it scrolls in its
   own box rather than pushing the page sideways. */
.tc-table-scroll {
  overflow-x: auto;
}

/* .admin-main is a grid item, so by default it grows to its widest table and
   the boxes above never get to scroll; the page went sideways instead. Phones
   already set this; the report needs it at every width. */
.admin-main:has(> .tc-report) {
  min-width: 0;
}

/* The summary register: a row per employee, then everyone. Figures read down
   their columns, so they are tabular and right aligned; the totals row is set
   off by a rule rather than a second panel. */
.tc-summary-table th,
.tc-summary-table td {
  padding: 0.5rem 0.65rem;
  vertical-align: top;
  white-space: nowrap;
}
.tc-summary-table thead th {
  padding-top: 0.3rem;
  border-bottom: 2px solid #3f352c;
  color: #3f352c;
  font-size: 0.85rem;
  font-weight: 700;
}
/* Banded rows keep a long line of hours on its own employee across nine
   columns; the band sits under the flagged row's red edge, not instead of it. */
.tc-summary-table tbody tr:nth-child(even) {
  background: #faf7f2;
}
.tc-summary-table td.is-zero {
  color: #a39889;
}
/* Hour columns shrink to their figures so the width goes to Exceptions, which
   otherwise wraps a busy employee's badges three lines deep. */
.tc-summary-table .is-num {
  width: 1%;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tc-summary-table tbody th,
.tc-summary-table tfoot th {
  text-align: left;
  font-weight: 600;
}
.tc-summary-table__name {
  color: inherit;
  text-decoration: none;
}
.tc-summary-table__name:hover,
.tc-summary-table__name:focus-visible {
  text-decoration: underline;
}
.tc-summary-table__meta {
  display: block;
  color: #5f564b;
  font-size: 0.82rem;
  font-weight: 400;
}
.tc-summary-table tbody tr.is-flagged th {
  box-shadow: inset 3px 0 0 #c2573d;
}
.tc-summary-table td.is-overtime {
  color: #8a6218;
  font-weight: 700;
}
.tc-summary-table__paid {
  color: #3f5d3a;
  font-weight: 700;
}
.tc-payroll-summary {
  min-width: 0;
}
.tc-summary-table__flags {
  min-width: 20rem;
}
.tc-summary-table th.tc-summary-table__flags,
.tc-summary-table td.tc-summary-table__flags {
  white-space: normal;
}
.tc-summary-table__flags .tc-badge {
  display: inline-block;
  margin: 0 0.25rem 0.2rem 0;
  white-space: nowrap;
}
.tc-summary-table tfoot tr {
  border-top: 2px solid #3f352c;
  background: #f6f2ea;
}
.tc-summary-table tfoot th,
.tc-summary-table tfoot td {
  font-weight: 700;
}
.tc-section-title {
  margin: 1.25rem 0 0.5rem;
  font-size: 1.1rem;
  color: #1f1d1a;
}

/* Fixed columns so every employee's breakdown lines up with the next one's;
   left to size itself, each table put its columns somewhere different. Below
   the min-width the table scrolls inside .tc-table-scroll; the min-width keeps
   about ten rem for Alerts, the one column left to take the remainder. */
.tc-table {
  font-size: 0.92rem;
  table-layout: fixed;
  width: 100%;
  min-width: 64rem;
}

.tc-table .tc-col-date { width: 6.25rem; }
.tc-table .tc-col-scheduled { width: 9.5rem; }
.tc-table .tc-col-punched { width: 12rem; }
.tc-table .tc-col-hours { width: 6rem; }
.tc-table .tc-col-absence { width: 7rem; }
.tc-table .tc-col-actions { width: 7.5rem; }

/* Approve and Review stack when both are there, instead of running out of
   the fixed actions column. */
.tc-table td.admin-actions {
  white-space: normal;
}

.tc-table .admin-actions > * + * {
  margin-left: 0;
}

/* In the fixed columns the shop name sits under the window it belongs to
   rather than beside it, where it pushed the times into the next column. */
.tc-table .tc-shop {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0.1rem 0 0;
  white-space: normal;
}

.tc-table .tc-punch-pair {
  flex-wrap: wrap;
  column-gap: 0.4rem;
}

.tc-table .tc-punch-pair .tc-shop {
  order: 1;
}

.tc-table .is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Air between the right-aligned figures and the text column that follows. */
.tc-table td.is-num + td,
.tc-table th.is-num + th {
  padding-left: 1.25rem;
}

.tc-table th,
.tc-table td {
  padding: 0.5rem 0.6rem;
  vertical-align: top;
}

.tc-table thead th {
  border-bottom: 2px solid #3f352c;
  color: #3f352c;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Same trap `.event-list-table` documents: the base `.admin-actions` flex
   display turns the td into a block, so it leaves the row — the Fix button
   floats clear of its own flagged row's tint and reads as belonging to nothing.
   Restore table-cell and space the buttons by hand. */
.tc-table .admin-actions {
  display: table-cell;
  vertical-align: top;
  white-space: nowrap;
}

/* "Mon Mar 2" and "9:00 AM – 5:00 PM" both broke mid-value across two lines and
   dragged every row taller with them. The tolerance under the scheduled window
   is its own block, so it still sits on the line below. */
.tc-table td:first-child,
.tc-table td:nth-child(2) {
  white-space: nowrap;
}

/* The employee's period totals close the breakdown, set off like the summary's
   All employees row. */
.tc-table tfoot th,
.tc-table tfoot td {
  border-top: 2px solid #3f352c;
  font-weight: 700;
  text-align: left;
}

.tc-table tfoot .is-num {
  text-align: right;
}

.tc-table tr.is-flagged td {
  background: #fdf5f2;
}

.tc-tolerance {
  display: block;
  color: #5f564b;
  font-size: 0.82rem;
}

/* One punch pair per line, its hours set right of the window. A shift split by
   lunch is two punches, and reading them apart is the whole point of the row. */
.tc-punch-pair {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  white-space: nowrap;
}

.tc-punch-pair + .tc-punch-pair {
  margin-top: 0.15rem;
}

.tc-punch-pair__hours {
  color: #5f564b;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.tc-alert {
  display: block;
  font-size: 0.88rem;
}

.tc-alert--critical {
  color: #8c3423;
  font-weight: 600;
}

.tc-alert--warning {
  color: #8a6218;
}

.tc-alert--pending {
  color: #4a6076;
  font-weight: 600;
}

.tc-alert--ok {
  color: #6b6055;
}

.tc-stranded {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
}

.tc-report .admin-actions .tc-quick-approve {
  width: auto;
  margin: 0 0.5rem 0.25rem 0;
  padding: 0.25rem 0.75rem;
  font-size: 0.82rem;
}

/* Which shop a shift or punch belongs to, on a report across several. */
.tc-shop {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  font-size: 0.78rem;
  color: #4a6076;
  background: #eef2f6;
  border-radius: 999px;
}

/* The one line a payroll officer looks for before keying hours. */
.tc-payroll-status {
  margin: 0.7rem 0 0;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.92rem;
}

.tc-payroll-status.is-ready {
  color: #34502f;
  background: #eaf3e6;
  border: 1px solid #cfe0c8;
}

.tc-payroll-status.is-waiting {
  color: #6f4b12;
  background: #fbf3e2;
  border: 1px solid #ecdcb8;
}

/* Signed off by a manager: still on the row so payroll can see it was looked
   at, but quieter than anything still open. */
.tc-alert--reviewed {
  color: #4f6b4a;
}

.tc-alert--reviewed::before {
  content: "\2713  Reviewed: ";
  font-weight: 600;
}

.tc-empty {
  color: #6b6055;
  font-style: italic;
}

/* The requests behind the period's time off. Usually one or two lines, so it
   sits open under the day breakdown rather than behind another disclosure --
   a request nobody expands is a request nobody settles. */
.tc-timeoff {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e6ded1;
}

.tc-timeoff__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.tc-timeoff__count {
  color: #5f564b;
  font-size: 0.85rem;
  font-weight: 400;
}

.tc-timeoff__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tc-timeoff__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  padding: 0.3rem 0;
}

.tc-timeoff__item + .tc-timeoff__item {
  border-top: 1px dashed #ece4d8;
}

.tc-timeoff__number {
  font-weight: 700;
}

.tc-timeoff__window {
  font-weight: 600;
}

.tc-timeoff__reason,
.tc-timeoff__balance {
  color: #5f564b;
  font-size: 0.88rem;
}

/* Pushed to the end of the row on a wide panel, and folded back in line with
   everything else once the row wraps on a phone. */
.tc-timeoff__hours {
  margin-left: auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tc-timeoff__balance {
  margin: 0.35rem 0 0;
}

@media (max-width: 640px) {
  .tc-timeoff__hours {
    margin-left: 0;
    text-align: left;
  }
}

/* Repair modal */
.tc-modal {
  width: min(42rem, 94vw);
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #f7f4ef;
  color: #1f1d1a;
  box-shadow: 0 1.5rem 3rem rgba(31, 29, 26, 0.3);
}

.tc-modal::backdrop {
  background: rgba(31, 29, 26, 0.48);
}

.tc-modal__panel {
  padding: 1rem 1.25rem 1.25rem;
}

.tc-modal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid #ddd4c7;
}

.tc-modal__head h3 {
  margin: 0;
  font-size: 1.2rem;
}

.tc-modal__close {
  width: 2rem;
  height: 2rem;
  color: #51483e;
  background: #ece5db;
  border: 0;
  border-radius: 4px;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.tc-modal__loading,
.tc-modal__failure {
  margin: 0;
  color: #756b5f;
}

.tc-modal__failure {
  color: #8c3423;
}

.tc-repair__head h4 {
  margin: 0;
  font-size: 1.05rem;
}

.tc-repair__meta {
  margin: 0.15rem 0 0.8rem;
  color: #756b5f;
  font-size: 0.85rem;
}

.tc-repair__alerts {
  margin: 0 0 0.9rem;
  padding: 0.5rem 0.75rem;
  list-style: none;
  background: #fdf5f2;
  border: 1px solid #eddcd4;
  border-radius: 4px;
}

.tc-repair__exceptions,
.tc-repair__reviewed,
.tc-repair__correction {
  padding: 0.75rem 0.85rem;
  margin-bottom: 1rem;
  background: #fff;
  border: 1px solid #ddd4c7;
  border-radius: 4px;
}

.tc-repair__exceptions h5,
.tc-repair__reviewed h5,
.tc-repair__correction h5,
.tc-repair__punch h5 {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  color: #51483e;
}

.tc-repair__note {
  margin: 0 0 0.5rem;
  padding: 0.4rem 0.65rem;
  border-left: 3px solid #c9bcab;
  background: #f7f4ef;
  white-space: pre-wrap;
}

.tc-repair__proposal {
  margin: 0 0 0.7rem;
  font-size: 0.9rem;
}

.tc-repair__review-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* The global `input, select, textarea { width: 100% }` catches a submit too,
   which stacked Approve and Reject as two full-width slabs and made a pair of
   choices read as a sequence of steps. */
.tc-repair input[type="submit"] {
  width: auto;
  flex: 0 0 auto;
  padding: 0.55rem 1.2rem;
  font-size: 0.9rem;
}

.tc-repair__hint {
  display: block;
  color: #756b5f;
  font-size: 0.82rem;
}

.tc-repair__alerts li + li {
  margin-top: 0.35rem;
}

.tc-repair__check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
}

/* The global full-width input rule would stretch the box across the row. */
.tc-repair__check input[type="checkbox"] {
  width: auto;
  margin: 0.2rem 0 0;
}

.tc-repair__reviewed .tc-repair__alerts {
  background: #f3f7f1;
  border-color: #d5e2cf;
}

.tc-repair__reviewed-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
}

.tc-repair__reviewed-item .tc-repair__hint {
  flex: 1 1 12rem;
}

.tc-repair__reopen {
  margin: 0;
}

.tc-repair .tc-repair__reopen input[type="submit"] {
  padding: 0.3rem 0.8rem;
  font-size: 0.82rem;
}

.tc-repair__error,
.tc-repair__errors {
  margin: 0 0 0.8rem;
  padding: 0.5rem 0.75rem;
  color: #8c3423;
  background: #f7e2dc;
  border-radius: 4px;
}

.tc-repair__errors {
  padding-left: 1.6rem;
}

.tc-repair__punch {
  padding-top: 0.9rem;
  border-top: 1px solid #ddd4c7;
}

/* Pending corrections the date filter is hiding. Loud on purpose: an employee
   who files one and hears nothing has no other way to raise it. */
.admin-panel.tc-outside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-left: 4px solid #d8a33c;
}

.tc-outside p {
  margin: 0;
}

/* ============================================
   Mobile admin polish (issue #39)
   ============================================ */

/* Filters collapse behind a toggle on phones only; the button never renders
   on desktop, and without JS the filters simply stay expanded. */
.mobile-filters-toggle {
  display: none;
}

@media (max-width: 900px) {
  .mobile-filters-toggle {
    display: block;
    width: 100%;
    margin-bottom: 0.6rem;
  }

  .mobile-filters--collapsed .mobile-filters-body {
    display: none;
  }
}

/* The reason/type/submitted repeat inside the dates cell exists only for the
   phone card layout below. */
/* Request status, shared by the time-off list and request page, the employee
   page's request history, and the staff dashboard. One pill per status so a
   glance settles which rows still need someone. */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  background: #ece3d7;
  color: #4a3f33;
}

.status-badge--pending { background: #fdf0d5; color: #8a5a12; }
.status-badge--approved { background: #dcefe0; color: #1f6b3b; }
.status-badge--rejected { background: #fdf3f1; color: #9b2c1c; }
.status-badge--cancelled { background: #ece3d7; color: #7c705f; }

.time-off-card-meta {
  display: none;
}

@media (max-width: 900px) {
  /* Time-off rows become two-line cards: who and status on top, when and the
     action below. Managers decide these from a phone; nothing decision-relevant
     may hide behind a sideways scroll. */
  .time-off-table {
    background: none;
  }

  .time-off-table thead {
    display: none;
  }

  .time-off-table tbody {
    display: block;
  }

  .time-off-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "employee status"
      "dates view";
    gap: 0.2rem 0.75rem;
    align-items: center;
    padding: 0.75rem 0.2rem;
    border-bottom: 1px solid #eee8df;
  }

  .time-off-table td {
    display: block;
    padding: 0;
    border-bottom: none;
  }

  .time-off-detail {
    display: none !important;
  }

  .time-off-cell--employee {
    grid-area: employee;
    font-weight: 600;
  }

  .time-off-cell--dates {
    grid-area: dates;
  }

  .time-off-cell--status {
    grid-area: status;
    justify-self: end;
  }

  .time-off-cell--view {
    grid-area: view;
    justify-self: end;
  }

  .time-off-card-meta {
    display: block;
    font-size: 0.8rem;
    color: #6f6a61;
    margin-top: 0.1rem;
  }

  /* Four stat tiles at one per row is four viewports of scrolling for four
     numbers; two-up keeps them glanceable. */
  .admin-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Header actions drop below the title as a wrapping row of intact pills,
     instead of squeezing beside it until "New Purchase Order" breaks into a
     three-line pill. */
  .admin-header {
    flex-wrap: wrap;
  }

  .admin-header .admin-header-actions {
    width: 100%;
  }

  .admin-header .admin-header-actions .button {
    white-space: nowrap;
  }
}

/* The quote line-item editor carries more fields than the sibling event
   modals. Give only this dialog room for its two-column pairs, and keep the
   page-break control reading as one left-aligned checkbox row. */
.modal-card.event-line-item-details-modal-card {
  max-width: 820px;
}

.event-line-item-details-modal-card .field.field--checkbox {
  margin-bottom: 1rem;
  min-width: 0;
  text-align: left;
}

.event-line-item-details-modal-card .field.field--checkbox label {
  justify-self: start;
  min-width: 0;
  text-align: left;
}

.event-line-item-details-modal-card .field.field--checkbox .form-note {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: left;
}

/* Page builder (Admin > Marketing + Content > Pages): section rows on the
   page edit screen and the reorderable photo strip on a section's form. */
.page-section-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.page-section-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid #e8e0d6;
  background: #faf8f4;
}

.page-section-row-summary {
  flex: 1;
  color: rgba(44, 40, 35, 0.7);
  font-size: 0.92rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-section-row .admin-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.page-section-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.page-section-image-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* The pages list keeps its link column on one line; the mobile .admin-table
   rule scrolls the table sideways rather than breaking the path mid-word. */
.page-index-link {
  white-space: nowrap;
}

/* Menu and home-row lists: why an entry is not on the storefront right now. */
.menu-item-warning {
  display: block;
  color: #a53a2b;
}

/* On a phone the summary gets its own line under the tag and actions instead
   of being squeezed to a single letter between them. */
@media (max-width: 720px) {
  .page-section-row {
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
  }

  .page-section-row .admin-actions {
    margin-left: auto;
  }

  .page-section-row-summary {
    flex: 1 1 100%;
    white-space: normal;
  }
}

.page-section-image-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid #e8e0d6;
  background: #faf8f4;
}

.page-section-image-tile img {
  width: 80px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Google Places lookup box, mounted by the address-autocomplete and route-panel
   Stimulus controllers above the address fields it fills in. It is deliberately
   a separate control rather than a replacement for the street field: the widget
   has no settable value, so hiding the real input behind it left an existing
   address invisible and uneditable. */
.place-autocomplete-wrapper {
  display: block;
  margin-bottom: 0.6rem;
}

.place-autocomplete-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

/* The widget renders its suggestion list in its own stacking context; inside a
   modal card it needs to sit above the fields below it. */
.place-autocomplete-wrapper gmp-place-autocomplete {
  position: relative;
  z-index: 5;
  width: 100%;
}

/* ============================================
   Catalog on a phone: product list, variant list, product page, variant form
   ============================================ */

/* The Apply/Clear pair sits on the filter grid's baseline like a field. */
.catalog-filter-actions {
  align-self: end;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

/* The "Sort by" select stands in for the column headings only where the
   headings are gone (the card layout below). On wider screens it is hidden
   but still submits, which is how a filter change keeps the current order. */
.catalog-sort-field {
  display: none;
}

@media (max-width: 720px) {
  .catalog-page .admin-panel {
    padding: 1rem;
  }

  .catalog-page .admin-header-actions .button,
  .catalog-page .admin-variant-card__controls-column .button,
  .catalog-page .form-actions .button {
    min-height: 44px;
  }

  .catalog-page .admin-header-actions .button,
  .catalog-page .admin-header-actions .button_to {
    flex: 1 1 auto;
  }

  .catalog-page .admin-header-actions .button_to .button {
    width: 100%;
  }

  /* One link alone in the header row is a link, not a banner. */
  .catalog-page .admin-header-actions .button:only-child {
    flex: 0 1 auto;
  }

  .catalog-sort-field {
    display: flex;
    margin: 0.25rem 0 0.5rem;
  }

  /* Every readiness action is a full-width, thumb-sized row on a phone,
     including the one that is a plain form rather than a button_to. */
  .recipe-readiness-actions form {
    flex: 1 1 100%;
  }

  .recipe-readiness-actions .button,
  .recipe-readiness-actions .button_to {
    flex: 1 1 100%;
  }

  .recipe-readiness-actions form .button {
    width: 100%;
  }

  .recipe-readiness-progress {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .recipe-readiness-progress .admin-header-actions {
    flex: 1 1 100%;
  }

  .recipe-readiness-meta {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Both catalog lists become a stack of cards: the name across the top, the
     numbers two-up beneath it with their column heading as a small label, and
     the actions on the last line. Nothing is dropped, and nothing has to be
     found by scrolling sideways past the columns that matter most. */
  .catalog-table {
    display: block;
    max-width: none;
    overflow-x: visible;
    background: none;
  }

  .catalog-table thead {
    display: none;
  }

  .catalog-table tbody {
    display: block;
  }

  .catalog-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid #eee8df;
  }

  .catalog-table td,
  .catalog-table td.admin-table-number {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }

  .catalog-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7a6858;
  }

  .catalog-table .catalog-cell--title {
    grid-column: 1 / -1;
    font-size: 1.05rem;
    font-weight: 600;
  }

  .catalog-table .catalog-cell--title .form-note {
    font-weight: 400;
  }

  /* Status is the cell before the actions, so the two share the last line. */
  .catalog-table td.catalog-cell--actions {
    display: flex;
    grid-column: 2;
    align-items: center;
    align-self: center;
    justify-content: flex-end;
    gap: 1.25rem;
  }

  .catalog-table td.catalog-cell--actions > * + * {
    margin-left: 0;
  }

  /* The pencil is a 28px icon on desktop, where a mouse is precise. */
  .catalog-table .icon-button--table {
    width: 44px;
    height: 44px;
  }

  /* Recipe editor on a phone. Amounts and the price they move are what a
     phone visit is for, so the ingredients lead and the photo and notes wait
     underneath; the photo drops to a thumbnail rather than a banner. */
  .recipe-editor {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }

  .recipe-editor__side {
    order: 2;
    padding-top: 1.25rem;
    border-top: 1px solid #eee8df;
  }

  .recipe-editor__photo {
    width: 120px;
    height: 120px;
  }

  .recipe-editor__notes {
    margin-top: 1rem;
  }

  .recipe-editor .pricing-mode-switch {
    display: flex;
    width: 100%;
  }

  .recipe-editor .pricing-mode-switch__option {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-height: 40px;
  }

  /* The stepper is the control the page exists for: thumb-sized ends and a
     box that takes the rest of the cell. */
  .recipe-editor-stepper {
    display: flex;
    width: 100%;
  }

  .recipe-editor-stepper .designer-station-qty-stepper__btn {
    width: 44px;
    min-height: 44px;
    flex: 0 0 auto;
  }

  .recipe-editor-stepper .designer-station-qty-stepper__input {
    flex: 1 1 auto;
    width: auto;
    min-height: 44px;
  }

  /* The bin shares the material's line rather than trailing the numbers on a
     line of its own; the amounts and prices auto-place underneath. */
  .recipe-editor-table .catalog-cell--title {
    grid-column: 1;
    grid-row: 1;
  }

  .recipe-editor-table td.catalog-cell--actions {
    grid-row: 1;
  }

  .recipe-editor-table td.catalog-cell--actions .text-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .recipe-editor-table td.catalog-cell--actions svg {
    width: 20px;
    height: 20px;
  }

  /* Product page: the fact strip two-up, prose rows full width. */
  .catalog-page .admin-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1.25rem;
  }

  .catalog-page .admin-details .admin-details__wide {
    grid-column: 1 / -1;
  }

  /* A variant card on a phone: a thumbnail beside the name and numbers, rather
     than a tall photo per size pushing the next size off the screen, then the
     actions as a row of full-height pills; the edit form and the build log run
     the card's full width beneath. The first track holds the thumbnail and the
     column's left padding, or the thumbnail runs into the name. */
  .catalog-page .admin-variant-card {
    grid-template-columns: calc(104px + 1rem) minmax(0, 1fr);
    align-items: start;
  }

  .catalog-page .admin-variant-card__image-column,
  .catalog-page .admin-variant-card__image-column .variant-thumb {
    min-height: 0;
  }

  .catalog-page .admin-variant-card__image-column {
    padding: 1rem 0 0 1rem;
  }

  .catalog-page .admin-variant-card__image-column .variant-thumb {
    width: 104px;
    height: 104px;
    border-radius: var(--radius-sm);
  }

  .catalog-page .admin-variant-card__info-column {
    padding: 1rem;
  }

  .catalog-page .admin-variant-card__controls-column {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 1rem 1rem;
  }

  .catalog-page .admin-variant-card__controls-column .button,
  .catalog-page .admin-variant-card__controls-column form,
  .catalog-page .admin-variant-card__controls-column .button_to {
    flex: 1 1 auto;
    width: auto;
  }

  .catalog-page .admin-variant-card__controls-column form .button {
    width: 100%;
  }

  .catalog-page .admin-variant-card__form-column,
  .catalog-page .admin-variant-card__build-log {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Build log rows: when and for whom on the first line, the "Left out" mark
     on its right, the designer next, then the three numbers side by side. */
  .variant-build-log__table {
    max-width: none;
    overflow-x: visible;
    background: none;
  }

  .variant-build-log__table thead {
    display: none;
  }

  .variant-build-log__table tbody {
    display: block;
  }

  .variant-build-log__table tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #eee8df;
  }

  .variant-build-log__table td,
  .variant-build-log__table td.admin-table-number {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }

  .variant-build-log__table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7a6858;
  }

  .variant-build-log__built {
    grid-row: 1;
    grid-column: 1 / 3;
    font-weight: 600;
  }

  .variant-build-log__flag {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
  }

  .variant-build-log__table .variant-build-log__order .form-note {
    display: inline;
    margin-left: 0.35rem;
  }

  .variant-build-log__order,
  .variant-build-log__designer {
    grid-column: 1 / -1;
  }

  /* Variant form: short numbers stay side by side instead of one per row. */
  .form-grid--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .catalog-page .form-actions .button,
  .catalog-page .form-actions form,
  .catalog-page .form-actions .button_to {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------
   Phone pass over the older admin screens (September 2026).

   Most of these pages were laid out for a laptop and never looked at on a
   phone. Two things broke them: grid pages let one wide child (an eight
   column table, a nowrap tab row) set the width of everything, so the body
   scrolled sideways; and header actions sat beside the title in a column too
   narrow to read. The generic .admin-table block/scroll rule above already
   keeps wide tables swipeable; these rules stop the page itself from
   growing, and stack the common index tables as cards. */
@media (max-width: 900px) {
  /* A grid or flex item's automatic minimum is its content's min-content
     width, so a wide table inside a panel widened the whole page even though
     the table scrolls on its own. Zero it on the containers the older pages
     put in grids. A no-op outside grid/flex, so safe to apply broadly. */
  .admin-main .admin-panel,
  .admin-main .admin-header,
  .admin-main .admin-page-header,
  .admin-main .admin-stat-grid,
  .cash-till-layout,
  .cash-till-layout > *,
  .cash-till-card-grid,
  .cash-till-card-grid > *,
  .audit-log-list > *,
  .qc-report-failure-grid > * {
    min-width: 0;
  }

  .reports-tab-nav {
    display: flex;
    flex-wrap: wrap;
  }

  .admin-filter-form {
    flex-wrap: wrap;
  }

  .admin-filter-form select {
    min-width: 0;
    flex: 1 1 12rem;
  }

  .qc-report-failure-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .audit-log-row {
    overflow-wrap: anywhere;
  }

  .audit-log-row__header {
    flex-wrap: wrap;
  }

  .audit-log-row time {
    white-space: normal;
  }

  /* The tooltip bubble is positioned and nowrap, so even invisible it ran
     the document past the phone. Wrap it and keep it inside the viewport. */
  .qc-tooltip::after {
    left: auto;
    right: -0.5rem;
    width: max-content;
    max-width: min(16rem, calc(100vw - 2rem));
    white-space: normal;
    transform: translateY(2px);
  }

  .qc-tooltip:hover::after,
  .qc-tooltip:focus-visible::after {
    transform: translateY(0);
  }

  .material-adjustments-toast {
    left: 1rem;
    right: 1rem;
    max-width: none;
    width: auto;
  }

  .inventory-buttons--preset .inventory-button {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  /* Title on its own line, actions in a wrapping row beneath. The pages that
     already did this (Daily Ops, purchase orders) keep their own rules. */
  .admin-main .admin-header,
  .admin-main .admin-page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }

  .admin-main .admin-header > div:first-child {
    min-width: 0;
  }

  .admin-main .admin-header .form-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Stacked index tables: the first cell is the row's name and reads as a
     heading; the actions cell is a row of links, not a column of full-width
     buttons. */
  .admin-table--stacked td:first-child:not([data-label]) {
    font-size: 1.02rem;
    padding-bottom: 0.3rem;
  }

  .admin-table--stacked td.admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem 1.1rem;
    padding-top: 0.5rem;
    text-align: left;
  }

  .admin-table--stacked td.admin-actions form,
  .admin-table--stacked td.admin-actions .button_to,
  .admin-table--stacked td.admin-actions .button {
    width: auto;
  }

  .admin-table--stacked td.admin-actions .button {
    min-height: 2.5rem;
  }
}

/* Recurring schedule form: the dry-run preview under the fields. */
.rs-preview {
  margin: 0.5rem 0 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid #e8e0d6;
  border-radius: var(--radius-sm);
  background: #f8f5ef;
}

.rs-preview__hint {
  margin: 0.5rem 0 1rem;
}

.rs-preview__title {
  margin: 0 0 0.4rem;
  font-weight: 600;
  font-size: 0.92rem;
}

.rs-preview__errors {
  margin: 0;
  padding-left: 1.1rem;
  color: #7a2f1a;
  font-size: 0.9rem;
}

.rs-preview__list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: grid;
  gap: 0.2rem;
  font-size: 0.9rem;
}

.rs-preview__list li {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.rs-preview__list li.is-skipped {
  color: #7a2f1a;
}

.rs-preview__list li.is-open .rs-preview__who {
  color: #6b6259;
}

.rs-preview__date {
  flex: 0 0 6.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* Chore report: three tables, numbers right-aligned, slipping rows tinted. */
.chore-report__stats {
  margin: 1rem 0 0.5rem;
}

.chore-report__title {
  margin: 1.4rem 0 0.2rem;
  font-size: 1.05rem;
}

.chore-report__table th.num,
.chore-report__table td.num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.chore-report__rule {
  font-size: 0.82rem;
  color: #6b6259;
}

.chore-report__table tr.is-slipping td {
  background: #fff8f4;
}

.admin-table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

/* Event contacts editor (EVENTS-07): one fieldset per person; roles | fields | flags on a
   laptop, stacked on a phone; no max-height so a validation error is never hidden. */
.event-contacts__rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* The row answers to ITS OWN width, not the window's. The wizard sidebar and the
   client modal both take a few hundred pixels off the page, so a viewport media
   query is wrong by that much: at a 1024 window this row is 726px wide, and at a
   768 window it is 766px — wider. Container queries below key off the real space. */
.event-contact-row {
  container-type: inline-size;
  margin: 0;
  padding: 0;
  border: 1px solid #d9d4cc;
  border-radius: 8px;
}

/* A saved contact reads as one line and opens on click; the grid moved from the
   fieldset onto the body, so a collapsed row costs a line instead of a screen. */
/* A CLOSED row is a line in a list, not a card: tight padding and a small gap, so
   six contacts read as six lines. Font size is untouched — the admin body size is
   what a person reads. An OPEN row keeps the padding it had. */
.event-contact-row__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.55rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  border-radius: 8px;
}

/* `display: flex` on a <summary> removes the native disclosure marker, so the row
   would offer no sign it opens. This is that sign: a chevron, right when closed,
   down when open. */
.event-contact-row__summary::marker {
  content: "";
}

.event-contact-row__summary::-webkit-details-marker {
  display: none;
}

.event-contact-row__summary::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.15rem;
  border-right: 2px solid #8a8178;
  border-bottom: 2px solid #8a8178;
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.event-contact-row__disclosure[open] > .event-contact-row__summary::before {
  transform: rotate(45deg);
}

.event-contact-row__summary:hover {
  background: #f6f3ee;
}

.event-contact-row__summary:focus-visible {
  outline: 2px solid #2f5d50;
  outline-offset: -2px;
}

.event-contact-row__disclosure[open] > .event-contact-row__summary {
  border-bottom: 1px solid #e7e2da;
  border-radius: 8px 8px 0 0;
}

.event-contact-row__summary-name {
  font-weight: 600;
}

/* An OPEN row shows its roles twice — here and in the body's "Assigned roles"
   heading, forty pixels apart. The heading is the better of the two, so the
   summary drops its role chips while open and keeps what only it carries: the
   name, the flag badges and the number. */
.event-contact-row__disclosure[open] > .event-contact-row__summary > .event-contact-row__summary-chips--roles {
  display: none;
}

.event-contact-row__summary-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.event-contact-chip {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border: 1px solid #d9d4cc;
  border-radius: 999px;
  background: #f6f3ee;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #4a443c;
}

.event-contact-row__summary-phone {
  font-size: 0.82rem;
  color: #6b6259;
}

.event-contact-chip--badge {
  border-color: #b9cec6;
  background: #e8f1ed;
  color: #2f5d50;
}

.event-contact-row__body {
  padding: 0.75rem;
  display: grid;
  /* One column until the row can hold two. The third column went away with the
     flags; when it existed, sizing it `auto` let one sentence grow it to 691px
     and squeeze the fields into a single stack. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem 1rem;
  align-items: start;
}

/* 560px is where roles beside fields stops being cramped: the fields block needs
   two 150px columns plus the gap, and the roles column needs 190px for its widest
   chip ("Day-of coordinator"). Below that the two stack, which is the phone and
   narrow-modal case. */
@container (min-width: 560px) {
  .event-contact-row__body {
    grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  }
}

.event-contact-row.has-errors {
  border-color: #b3261e;
}

.event-contact-row__heading {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

/* The one heading of the roles block: what this person actually is. */
.event-contact-row__assigned {
  margin: 0 0 0.45rem;
  font-size: 0.85rem;
  color: #3d3831;
}

.event-contact-row__assigned-label {
  font-weight: 600;
}

.event-contact-row__tier-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a8178;
}

.event-contact-row__role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* The whole chip is the control: the checkbox is still the thing being toggled
   (keyboard, forms, assistive technology), it is just not the thing being drawn. */
.event-contact-chip-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border: 1px solid #d9d4cc;
  border-radius: 999px;
  background: #fff;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: normal;
  color: #4a443c;
  cursor: pointer;
}

.event-contact-chip-toggle:hover {
  border-color: #b9b2a8;
  background: #f6f3ee;
}

.event-contact-chip-toggle:has(input:checked) {
  border-color: #2f5d50;
  background: #e8f1ed;
  color: #21453b;
  font-weight: 600;
}

.event-contact-chip-toggle:has(input:focus-visible) {
  outline: 2px solid #2f5d50;
  outline-offset: 2px;
}

.event-contact-chip-toggle.is-atypical {
  border-style: dashed;
  color: #7a5a00;
}

.event-contact-chip-toggle small {
  margin-left: 0.25rem;
  font-size: 0.72rem;
  opacity: 0.8;
}

.event-contact-row__more-roles {
  margin-top: 0.4rem;
}

.event-contact-row__more-roles > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: #5c564e;
  cursor: pointer;
}

/* Same chevron as the contact summary, for the same reason: a flex <summary> has no
   native marker, so without this nothing says the panel opens. */
.event-contact-row__more-roles > summary::marker {
  content: "";
}

.event-contact-row__more-roles > summary::-webkit-details-marker {
  display: none;
}

.event-contact-row__more-roles > summary::before {
  content: "";
  flex: none;
  width: 0.35rem;
  height: 0.35rem;
  border-right: 2px solid #8a8178;
  border-bottom: 2px solid #8a8178;
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.event-contact-row__more-roles[open] > summary::before {
  transform: rotate(45deg);
}

/* One selection area: the remaining roles AND the custom-role controls. */
.event-contact-row__roles-source {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
}

.event-contact-row__more-panel {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.5rem;
  border: 1px solid #e7e2da;
  border-radius: 8px;
  background: #fcfaf7;
}

.event-contact-row__more-roles[open] > summary {
  margin-bottom: 0.35rem;
}

.event-contact-row__more-count {
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #ece7df;
  font-size: 0.72rem;
}

.event-contact-row__custom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.event-contact-row__custom-role {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.event-contact-row__custom-role input {
  width: 11rem;
}

/* Sentence case for the two controls that sit beside chips. The FIELD labels stay
   uppercase: that is the global `label` rule every other form in the app follows. */
.event-contact-row__add-custom {
  align-self: flex-start;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: normal;
}

.event-contact-row__note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.event-contact-row__note-toggle {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  border: 1px solid #d9d4cc;
  border-radius: 4px;
  background: #fff;
  color: #5c564e;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}

.event-contact-row__note-toggle:hover {
  background: #f6f3ee;
}

.event-contact-row__note textarea {
  min-height: 3.4rem;
  resize: vertical;
}

/* The note takes the WHOLE fields row at every size, collapsed as well as expanded.
   It is one of five auto-fit cells otherwise, which on a real screen is about 245px
   of width — a staff note is prose, and prose in a 245px column wraps a short
   paragraph over seven lines. Height is what the expander changes: a couple of lines
   while you are filling the other fields, a big box when you are writing. An earlier
   fix widened only the EXPANDED state, which left the common case narrow. */
.event-contact-row__note {
  grid-column: 1 / -1;
}

.event-contact-row__note.is-expanded textarea {
  min-height: 14rem;
}

.event-contact-row__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem 0.75rem;
}

/* Box and words are one unit, directly under the number, at every width. */
.event-contact-row__texting {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: normal;
  color: #5b5650;
  white-space: nowrap;
  cursor: pointer;
}

.event-contact-row__texting input[type="checkbox"] {
  margin: 0;
}

.event-contact-row__flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.9rem;
  margin-top: 0.6rem;
}

.event-contact-row__flags-label {
  font-size: 0.78rem;
  color: #6b6259;
}

/* Switches, deliberately NOT the chip shape: a flag is a job this event gives one
   person, not a description of who they are. */
.event-contact-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  text-transform: none;
  letter-spacing: normal;
  color: #4a443c;
  cursor: pointer;
}

.event-contact-switch__track {
  flex: none;
  position: relative;
  width: 2rem;
  height: 1.1rem;
  border-radius: 999px;
  background: #ddd8d0;
  transition: background 120ms ease;
}

.event-contact-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.1rem - 4px);
  height: calc(1.1rem - 4px);
  border-radius: 50%;
  background: #fff;
  transition: transform 120ms ease;
}

.event-contact-switch:has(input:checked) .event-contact-switch__track {
  background: #2f5d50;
}

.event-contact-switch:has(input:checked) .event-contact-switch__track::after {
  transform: translateX(0.9rem);
}

.event-contact-switch:has(input:focus-visible) .event-contact-switch__track {
  outline: 2px solid #2f5d50;
  outline-offset: 2px;
}

.event-contact-switch.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.event-contact-chip-toggle.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  border-style: dashed;
}

.event-contact-chip-toggle.is-disabled:hover {
  border-color: #d9d4cc;
  background: #fff;
}

.event-contact-row__flag-note {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
}

/* The one destructive control in the row is the quietest thing in it. */
.event-contact-row__remove {
  margin-left: auto;
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.82rem;
  color: #8a5148;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.event-contact-row__remove:hover {
  text-decoration: underline;
}

.event-contacts__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.event-contacts__errors ul {
  margin: 0.25rem 0 0 1rem;
}

.event-edit-modal-card--contacts {
  width: min(1040px, 96vw);
  max-width: 1040px;
}

/* The summary must stay ONE line: below this the number is one tap away instead. */
@container (max-width: 430px) {
  .event-contact-row__summary-phone {
    display: none;
  }
}

.amount-nowrap { white-space: nowrap; }

/* A placed PO's change record: one line per item, its net change, A to Z. */
.po-placed-changes__list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.po-placed-changes__item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  align-items: baseline;
  padding: 0.35rem 0 0.35rem 0.6rem;
  border-left: 3px solid #cfc7bb;
}

.po-placed-changes__item--up {
  border-left-color: #1f6f50;
}

.po-placed-changes__item--down {
  border-left-color: #a5671b;
}

.po-placed-changes__item--removed {
  border-left-color: #8f1f13;
}

.po-placed-changes__symbol {
  font-weight: 700;
  min-width: 1em;
}

.po-placed-changes__item--up .po-placed-changes__symbol { color: #1f6f50; }
.po-placed-changes__item--down .po-placed-changes__symbol { color: #a5671b; }
.po-placed-changes__item--removed .po-placed-changes__symbol { color: #8f1f13; }

.phone-order-tax-exempt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

.phone-order-tax-exempt input[type="text"] {
  flex: 1 1 14rem;
  min-width: 0;
}

.subscription-charge-review {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
}

.subscription-charge-review .form-note {
  flex-basis: 100%;
  margin: 0;
}

.subscription-charge-review__paid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.subscription-charge-review__paid input[type="text"] {
  min-width: 0;
  flex: 1 1 10rem;
}

/* Material Planning: a day clicked on a row's chart (Josh, 2026-10-28). */
.material-plan-chart--compact .material-plan-chart__canvas {
  cursor: pointer;
}

.material-plan-chart__hint {
  margin: 0.3rem 0 0;
  color: #6b6358;
}

.material-plan-chart__tooltip--picked {
  pointer-events: auto;
}

.material-plan-chart__order-day {
  margin-top: 0.4rem;
  width: 100%;
}

.plan-sheet__earlier summary {
  cursor: pointer;
  padding: 0.25rem 0;
}

.plan-sheet__order-more {
  justify-self: start;
  margin: 0 0 0.25rem 1.6rem;
}

/* Moving premades to another shop: one in-flow bar above the list; the
   checkboxes nest all → variant → unit (premade_move_controller). */
.premade-move-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.premade-move-all,
.premade-move-field {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

.premade-move-count {
  color: #4b5563;
}

.premade-move-check {
  width: 1.15rem;
  height: 1.15rem;
  vertical-align: middle;
}