:root {
  --action-accent: #9f3f2f;
  color-scheme: light;
  --ink: #2f2926;
  --muted: #716761;
  --cream: #f7f2e8;
  --paper: #fffdf8;
  --sage: #63715c;
  --sage-dark: #465240;
  --rose: #b78379;
  --line: #ded5c7;
  --warning: #8a5a22;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--cream); }
header { padding: 3.5rem max(1.5rem, calc((100vw - 1180px) / 2)); background: var(--sage-dark); color: white; }
.workspace-open .login-header, .workspace-open #auth-card { display: none; }
.workspace-open main { width: 100%; margin: 0; }
.workspace-open #workspace { min-height: 100vh; }
.workspace-open #mode-banner, .workspace-open #demo-guide { width: min(1180px, calc(100% - 2rem)); margin-right: auto; margin-left: auto; }
.admin-app-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; background: #f4f0e8; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; padding: 1.25rem 1rem; background: #354137; color: white; }
.admin-brand { display: flex; align-items: center; gap: .7rem; padding: .4rem .45rem 1.4rem; border-bottom: 1px solid rgb(255 255 255 / 14%); }
.admin-brand > span { display: flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px; background: #f1e7d9; color: var(--sage-dark); font-family: Georgia, serif; font-weight: 800; }
.admin-brand strong, .admin-brand small { display: block; }
.admin-brand small { margin-top: .15rem; opacity: .65; font-size: .7rem; }
.admin-sidebar nav { display: grid; gap: .22rem; margin-top: 1.2rem; }
.admin-sidebar a { padding: .72rem .8rem; border-radius: 8px; color: rgb(255 255 255 / 78%); text-decoration: none; font-size: .86rem; font-weight: 700; }
.admin-sidebar a:hover, .admin-sidebar a.active { background: rgb(255 255 255 / 13%); color: white; }
.admin-main { min-width: 0; height: 100vh; overflow-y: auto; }
.admin-topbar { position: sticky; z-index: 5; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem max(1.5rem, calc((100% - 1040px) / 2)); border-bottom: 1px solid var(--line); background: rgb(255 253 248 / 94%); backdrop-filter: blur(12px); }
.admin-topbar h2 { font-size: 1.7rem; }
.admin-topbar p { margin: .2rem 0 0; color: var(--muted); font-size: .8rem; }
.admin-topbar .eyebrow { margin-bottom: .55rem; font-size: .74rem; font-weight: 800; letter-spacing: .06em; }
#admin-page-content { width: min(1040px, calc(100% - 3rem)); margin: 0 auto; padding: 1.5rem 0 5rem; }
#admin-page-content:has(.admin-page[data-admin-page="calendar"]:not([hidden])) { width: min(1400px, calc(100% - 3rem)); }
#admin-page-content:has(.admin-page[data-admin-page="dashboard"]:not([hidden])) { width: min(1320px, calc(100% - 3rem)); }
.admin-page[hidden] { display: none; }
.dashboard-intro { margin: .5rem 0 1rem; }
.dashboard-intro h2 { font-size: 1.4rem; }
.dashboard-tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.dashboard-task { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .85rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: 0 5px 16px rgb(47 41 38 / 5%); }
.dashboard-task > strong { min-width: 38px; color: var(--sage-dark); font-family: Georgia, serif; font-size: 1.7rem; text-align: center; }
.dashboard-task h3, .dashboard-task p { margin: 0; }
.dashboard-task h3 { font-size: .9rem; }
.dashboard-task p { margin-top: .2rem; color: var(--muted); font-size: .74rem; }
.dashboard-task > span { color: var(--action-accent); font-size: .72rem; font-weight: 900; }
.dashboard-task.urgent { border-left: 4px solid #b55b26; }
.owner-welcome { display: grid; gap: 1rem; margin-bottom: 1.25rem; padding: 1.25rem 1.4rem; border: 1px solid #cbd3c6; border-radius: 14px; background: #e9eee6; }
.compact-guide { padding: .8rem 1rem; }
.compact-guide .demo-guide-heading { align-items: center; }
.compact-guide h2 { font-family: inherit; font-size: .9rem; font-weight: 800; }
.compact-guide .eyebrow { margin-bottom: .15rem; font-size: .58rem; }
.owner-welcome h2 { font-size: 1.15rem; }
.dashboard-page-title { margin: 0; font-family: Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 500; }
.owner-welcome-heading .eyebrow { margin-bottom: .25rem; }
.owner-welcome p { margin: .35rem 0 0; color: var(--muted); }
.quick-actions-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem; padding-top: .85rem; border-top: 1px solid rgb(99 113 92 / 22%); }
.quick-actions-panel h2 { margin: .1rem 0 .2rem; font-family: inherit; font-size: .96rem; font-weight: 850; }
.quick-actions-panel p { max-width: 560px; margin: 0; font-size: .78rem; line-height: 1.35; }
.manual-order-action { display: grid; justify-items: start; gap: .45rem; }
.manual-order-action a, .manual-order-action button, .dashboard-shortcuts a { padding: .65rem .8rem; border: 1px solid var(--sage); border-radius: 8px; background: var(--paper); color: var(--sage-dark); text-decoration: none; font-size: .78rem; font-weight: 800; }
.dashboard-shortcuts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.dashboard-money-note { margin-top:.65rem; padding:.7rem .85rem; border-radius:10px; background:var(--cream); color:var(--muted); font-size:.78rem; font-weight:700; }
.quick-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.quick-actions a { padding: .65rem .8rem; border: 1px solid var(--sage); border-radius: 8px; background: var(--paper); color: var(--sage-dark); text-decoration: none; font-size: .78rem; font-weight: 800; }
.dashboard-section { margin-bottom: 1.15rem; padding: 1.15rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 6px 18px rgb(47 41 38 / 5%); }
.dashboard-section-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dashboard-section-heading h2 { margin:0; color:#354137; font-size:clamp(1.05rem, 1.55vw, 1.32rem); font-weight:900; letter-spacing:.015em; line-height:1.15; text-transform:uppercase; }
.dashboard-section-heading p { margin:.35rem 0 0; max-width:680px; color:var(--muted); font-size:.78rem; line-height:1.35; }
.dashboard-section-heading > a, .dashboard-section-heading > span { color: var(--action-accent); font-size: .75rem; font-weight: 900; text-decoration: none; }
.section-heading-actions { display:flex; align-items:center; gap:.75rem; color:var(--sage-dark); font-size:.75rem; font-weight:800; }
#dashboard-date { color: var(--action-accent); font-weight: 900; }
.section-heading-actions a { color:var(--action-accent); font-weight:900; text-decoration:none; }
.dashboard-work-grid { display:grid; grid-template-columns:minmax(0, .95fr) minmax(0, 1.05fr); align-items:start; gap:1.25rem; margin-bottom:1.25rem; }
.dashboard-work-grid .dashboard-section { margin-bottom:0; }
.dashboard-action-section .attention-list { grid-template-columns:1fr; }
.dashboard-upcoming-section .dashboard-schedule { gap:.75rem; }
.dashboard-upcoming-section .dashboard-schedule-row { grid-template-columns:88px minmax(0, 1.65fr) minmax(0, 1fr) auto; gap:1rem; padding:1rem; border:1px solid var(--line); border-radius:12px; background:#fffaf2; }
.dashboard-upcoming-section .dashboard-schedule-row:first-child { border-top:1px solid var(--line); }
.dashboard-booked-row { align-items:start; }
.dashboard-booked-row .booked-order-main strong + span { margin-bottom:.45rem; }
.dashboard-booked-row .booked-order-main strong:nth-of-type(2) { margin-top:.35rem; }
.dashboard-booked-row .booked-order-status strong { color:var(--ink); }
.dashboard-today-section { margin-bottom:1.25rem; }
.dashboard-today-section { border-color: #d8b38f; box-shadow: 0 8px 22px rgb(181 91 38 / 8%); }
.dashboard-today-section .dashboard-section-heading { margin-bottom: .65rem; }
.dashboard-today-section .dashboard-schedule-row { padding:.7rem 0; }
.dashboard-today-section .dashboard-schedule-row strong { font-size:.8rem; }
.dashboard-today-section .dashboard-schedule-row span { margin-top:.12rem; }
.dashboard-price-warning { color:#a33a24 !important; font-weight:900 !important; text-transform:uppercase; }
.attention-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.attention-list .dashboard-task { box-shadow: none; }
.attention-list button.dashboard-task { width: 100%; color: var(--ink); text-align: left; }
.attention-mark { display: flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: #f1e7db; color: #8b4b25; font-weight: 900; }
.attention-count { display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: #f1e7db; color: #8b4b25; font-family: Georgia, serif; font-size: 1.15rem; font-weight: 800; }
.caught-up { display: grid; gap: .2rem; padding: 1rem; border-radius: 10px; background: var(--cream); color: var(--muted); }
.caught-up strong { color: var(--ink); }
.dashboard-schedule { display: grid; }
.dashboard-schedule-row { display: grid; grid-template-columns: 115px 1.15fr 1.4fr 1.1fr auto; align-items: center; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--line); }
.dashboard-schedule-row:first-child { border-top: 0; }
.dashboard-schedule-row div { min-width: 0; }
.dashboard-schedule-row strong, .dashboard-schedule-row span { display: block; }
.dashboard-schedule-row strong { overflow-wrap: anywhere; font-size: .82rem; }
.dashboard-schedule-row span { margin-top: .2rem; color: var(--muted); font-size: .72rem; }
.schedule-when strong { color: var(--sage-dark); }
.money-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.money-cards > div { min-height: 82px; padding: 1rem; border-right: 1px solid var(--line); }
.money-cards > div:last-child { border-right: 0; }
.money-cards span, .money-cards small { display: block; }
.money-cards span { color: var(--muted); font-size: .75rem; font-weight: 700; }
.money-cards strong { display: block; margin: .35rem 0; font-family: Georgia, serif; font-size: 1.55rem; }
.money-cards small { color: var(--muted); font-size: .68rem; line-height: 1.35; }
.accounting-note { margin-top: .8rem; padding: .75rem .9rem; border-radius: 8px; background: #f5eee3; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.accounting-note strong { color: var(--ink); }
.cost-breakdown { margin-top: .8rem; padding: .9rem; border: 1px solid var(--line); border-radius: 10px; }
.cost-breakdown > strong { display: block; margin-bottom: .65rem; font-size: .78rem; }
.cost-breakdown > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.cost-breakdown span { padding: .6rem; border-radius: 7px; background: var(--cream); color: var(--muted); font-size: .68rem; }
.cost-breakdown b { display: block; margin-top: .2rem; color: var(--ink); font-size: .85rem; }
.dashboard-lower-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1.25rem; }
.workload-list, .activity-list { display: grid; }
.workload-list a { display: flex; align-items: center; justify-content: space-between; padding: .7rem 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.workload-list a:first-child, .activity-row:first-child { border-top: 0; }
.workload-list strong { order: 2; color: var(--sage-dark); font-family: Georgia, serif; font-size: 1.15rem; }
.workload-list span { font-size: .8rem; font-weight: 700; }
.activity-row { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: .7rem; min-height: auto; padding: .65rem 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); text-align: left; }
.activity-row span strong, .activity-row span small { display: block; }
.activity-row span small, .activity-row time { margin-top: .15rem; color: var(--muted); font-size: .68rem; }
.activity-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.decision-card { max-width: 680px; margin: 2rem auto; padding: 2rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 12px 36px rgb(47 41 38 / 8%); }
.decision-card h2 { margin: .3rem 0 .75rem; font-size: 1.7rem; }
.decision-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.decision-card textarea { width: 100%; min-height: 120px; margin-top: .35rem; padding: .75rem; border: 1px solid #bdb3a5; border-radius: 8px; resize: vertical; font: inherit; }
.decision-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: 1.5rem; }
.text-button { min-height: auto; margin-bottom: 1.5rem; padding: 0; background: transparent; color: var(--sage-dark); }
.record-editor-page { max-width: 820px; margin: 0 auto; padding: 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 12px 36px rgb(47 41 38 / 7%); }
.record-editor-page.wide-page { max-width: 1040px; }
.record-editor-page .dialog-heading .text-button { margin: 0; }
.order-tabs { display: flex; gap: .35rem; overflow-x: auto; margin: 1.25rem 0; padding-bottom: .65rem; border-bottom: 1px solid var(--line); }
.order-tabs button { flex: 0 0 auto; min-height: 36px; padding: .45rem .7rem; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: .76rem; }
.order-tabs button:hover, .order-tabs button.active { border-color: var(--sage); background: #e8eee4; color: var(--sage-dark); }
.order-jump-nav { position: sticky; z-index: 12; top: 0; margin: 1rem -1.5rem 1.25rem; padding: .7rem 1.5rem; background: rgb(255 253 249 / 96%); box-shadow: 0 5px 14px rgb(47 41 38 / 6%); }
.order-at-a-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; margin-top: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); }
.order-at-a-glance div { min-width: 0; padding: .75rem 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.order-at-a-glance div:nth-child(3n) { border-right: 0; }
.order-at-a-glance div:nth-last-child(-n+3) { border-bottom: 0; }
.order-at-a-glance span, .order-at-a-glance strong { display: block; }
.order-at-a-glance > div > span { margin-bottom: .25rem; color: var(--muted); font-size: .68rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.order-workspace-section { scroll-margin-top: 80px; margin-top: 1rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: white; }
.order-workspace-section.quote-controls, .order-workspace-section.payment-controls { margin-top: 1rem; padding-top: 1.25rem; }
.order-workspace-heading h3 { margin: 0 0 1rem; font-family: Georgia, serif; }
.order-activity article { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: .75rem; align-items: start; padding: .75rem 0; border-top: 1px solid var(--line); }
.order-activity article:first-child { border-top: 0; }
.order-activity p { margin: .2rem 0 0; color: var(--muted); font-size: .78rem; }
.order-activity time { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.record-page-heading { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.record-page-heading h2 { margin: .2rem 0 .4rem; font-size: 1.8rem; }
.record-page-heading p { margin: 0; color: var(--muted); }
.input-help { display: block; margin-top: .3rem; color: var(--muted); font-size: .72rem; font-weight: 500; }
.choice-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin: 0; padding: 0; border: 0; }
.choice-cards legend { margin-bottom: .55rem; font-size: .82rem; font-weight: 750; }
.choice-cards label { position: relative; display: block; margin: 0; cursor: pointer; }
.choice-cards input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; }
.choice-cards span { display: block; height: 100%; padding: .9rem; border: 1px solid var(--line); border-radius: 10px; background: white; }
.choice-cards strong, .choice-cards small { display: block; }
.choice-cards small { margin-top: .3rem; color: var(--muted); font-weight: 500; line-height: 1.35; }
.choice-cards input:checked + span { border: 2px solid var(--sage); background: #edf3ea; }
.choice-cards input:focus-visible + span { outline: 3px solid rgb(99 113 92 / 28%); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .5rem; font-family: Georgia, serif; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 500; }
h2 { margin-bottom: 0; font-family: Georgia, serif; font-weight: 500; }
.eyebrow { margin-bottom: .55rem; font-size: .74rem; font-weight: 800; letter-spacing: .16em; }
main { width: min(1180px, calc(100% - 2rem)); margin: 2rem auto 5rem; }
.auth-card, .product-card, .summary, .table-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgb(47 41 38 / 7%); }
.auth-card { max-width: 650px; padding: 1.5rem; }
label { display: block; margin-bottom: .45rem; font-size: .82rem; font-weight: 750; }
textarea { display: block; width: 100%; min-height: 96px; margin-top: .35rem; padding: .65rem .75rem; border: 1px solid #bdb3a5; border-radius: 8px; background: white; color: var(--ink); resize: vertical; font: inherit; line-height: 1.4; }
.auth-row { display: flex; gap: .65rem; }
input, select, button { min-height: 42px; border-radius: 8px; font: inherit; }
input, select { width: 100%; padding: .65rem .75rem; border: 1px solid #bdb3a5; background: white; color: var(--ink); }
.check-label { display: flex; align-items: flex-start; gap: .7rem; margin: .25rem 0 .75rem; cursor: pointer; }
.check-label input[type="checkbox"] { flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin: .1rem 0 0; padding: 0; accent-color: var(--sage); }
.check-label span, .check-label strong, .check-label small { display: block; }
.check-label small { margin-top: .2rem; color: var(--muted); font-size: .74rem; font-weight: 500; line-height: 1.35; }
.app-select { position: relative; width: 100%; }
.app-date-fields { display: grid; grid-template-columns: minmax(6.5rem, 1.2fr) minmax(4.5rem, .8fr) minmax(5.5rem, 1fr); gap: .45rem; margin-top: .35rem; }
.app-date-fields:has(.app-date-hour) { grid-template-columns: repeat(3, minmax(4.75rem, 1fr)); }
.app-date-fields:has(.app-date-hour) .app-select:nth-of-type(n+4) { grid-row: 2; }
.app-select > select { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; pointer-events: none; }
.app-select-trigger { position: relative; width: 100%; padding: .65rem 2.4rem .65rem .75rem; border: 1px solid #bdb3a5; background: white; color: var(--ink); text-align: left; font-weight: 600; }
.app-select-trigger::after { position: absolute; top: 50%; right: .8rem; content: "⌄"; transform: translateY(-55%); color: var(--sage); font-size: 1.1rem; }
.app-select-choices { position: absolute; z-index: 30; top: calc(100% + .3rem); right: 0; left: 0; max-height: 260px; overflow-y: auto; padding: .35rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 14px 34px rgb(47 41 38 / 18%); }
.app-select-choice { display: block; width: 100%; min-height: 38px; padding: .55rem .65rem; border-radius: 7px; background: transparent; color: var(--ink); text-align: left; font-size: .82rem; font-weight: 600; }
.app-select-choice:hover, .app-select-choice.selected { background: #e8eee4; color: var(--sage-dark); }
/* An action you take. Solid, and the only thing on a page that looks like
   this, so the eye finds it without reading. */
button { padding: .65rem 1rem; border: 0; border-radius: 8px; background: var(--sage); color: white;
  cursor: pointer; font-weight: 750; box-shadow: 0 1px 2px rgb(47 41 38 / 16%); }

/* Hover darkens whatever a button already is, instead of repainting it.
   The old rule set its own colours and had to name every exception in the
   app - the select triggers, the tab rows, the text links, the list rows -
   and got it wrong the moment anything new was built as a button. A list row
   turned dark green behind its own dark text and became unreadable. A tint
   cannot do that to any button, present or future. */
button:hover:not(:disabled) { box-shadow: inset 0 0 0 999px rgb(0 0 0 / 7%); }
button:active:not(:disabled) { box-shadow: inset 0 0 0 999px rgb(0 0 0 / 12%); }
button:disabled { cursor: not-allowed; opacity: .5; }

/* A choice you can make, quietly. Paper, not green: it should not compete
   with the action button beside it. */
button.secondary { border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font-weight: 700; box-shadow: none; }
button.secondary:hover:not(:disabled) { border-color: var(--sage); box-shadow: inset 0 0 0 999px rgb(0 0 0 / 4%); }

.app-select-trigger:hover, .app-select-trigger:focus-visible {
  border-color: var(--sage);
  background: white;
  color: var(--ink);
}
.hint { margin: .65rem 0 0; color: var(--muted); font-size: .84rem; }
.field-error { color: #8a3333; }
.summary { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; margin-bottom: 2rem; }
.mode-banner { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: 1rem 1.2rem; border: 2px solid #b55b26; border-radius: 12px; background: #fff0df; color: #713514; }
.mode-banner[hidden] { display: none; }
.mode-banner strong { font-family: Georgia, serif; font-size: 1.25rem; white-space: nowrap; }
.demo-guide { margin-bottom: 1.5rem; padding: 1.25rem; border: 1px solid #d8b38f; border-radius: 14px; background: #fffaf3; box-shadow: 0 8px 24px rgb(47 41 38 / 7%); }
.demo-guide[hidden], .demo-guide-steps[hidden] { display: none; }
.demo-guide-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.demo-guide-heading h2 { margin: 0; }
.demo-guide > p { color: var(--muted); }
.demo-guide-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.demo-step { display: grid; grid-template-columns: 34px 1fr; gap: .7rem; padding: .9rem; border: 1px solid var(--line); border-radius: 10px; background: white; }
.demo-step-number { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 50%; background: #b55b26; color: white; font-weight: 800; }
.demo-step h3 { margin: 0 0 .3rem; font-family: Georgia, serif; font-size: 1.05rem; }
.demo-step p { min-height: 3.6em; margin: 0 0 .7rem; color: var(--muted); font-size: .78rem; }
.demo-step button { min-height: 34px; padding: .4rem .65rem; font-size: .75rem; }
.stat { padding: 1.25rem; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat strong { display: block; font-family: Georgia, serif; font-size: 2rem; }
.stat span { color: var(--muted); font-size: .8rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 2rem 0 1rem; }
.operations-summary { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; margin-bottom: 1rem; background: var(--sage-dark); color: white; border-radius: 12px; }
.operations-summary div { padding: .8rem 1rem; border-right: 1px solid rgb(255 255 255 / 18%); }
.operations-summary div:last-child { border: 0; }
.operations-summary strong, .operations-summary span { display: block; }
.operations-summary strong { font-family: Georgia, serif; font-size: 1.35rem; }
.operations-summary span { margin-top: .2rem; opacity: .75; font-size: .72rem; }
.procurement-summary { grid-template-columns: repeat(5, 1fr); margin-bottom: 0; }
.purchase-dates { display: flex; flex-direction: column; gap: .25rem; }
.purchase-dates-label { font-size: .78rem; }
.purchase-date-rows { display: grid; gap: .3rem; }
.purchase-date-row { display: flex; align-items: center; gap: .25rem; }
.purchase-date-row input { flex: 1; min-width: 0; }
.remove-use-by { padding: 0 .35rem; color: var(--muted); font-size: 1rem; line-height: 1; }
.purchase-date-rows .purchase-date-row:only-child .remove-use-by { visibility: hidden; }
.add-use-by { align-self: start; padding: 0; font-size: .74rem; }
/* Adding and removing shop rows moves everything below them, which put Cancel
   under a cursor aiming for Save. The actions stay put at the foot of the form
   instead. */
#ingredient-form .dialog-actions { position: sticky; bottom: 0; z-index: 5; margin-top: 1rem; padding: .85rem 0; border-top: 1px solid var(--line); background: var(--paper); }

.item-section { margin: 1.1rem 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.item-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: .75rem; }
.item-section-heading h3 { margin: 0; font-family: Georgia, serif; font-size: 1.1rem; }
.item-section-heading p { margin: .15rem 0 0; }
.supplier-price-rows { display: grid; gap: .6rem; }
.supplier-price-row { display: grid; grid-template-columns: 1.1fr .9fr .65fr .85fr .75fr .85fr auto; gap: .5rem; align-items: end; padding: .6rem 0; border-top: 1px solid var(--line); }
.supplier-price-rows .supplier-price-row:first-child { border-top: 0; padding-top: 0; }
.supplier-price-row label { display: flex; flex-direction: column; gap: .2rem; font-size: .74rem; }
.supplier-price-row input, .supplier-price-row select { min-width: 0; }
.remove-supplier-price { padding: 0 .3rem; color: var(--muted); font-size: .74rem; }
.supplier-price-rows .supplier-price-row:only-child .remove-supplier-price { visibility: hidden; }
.supplier-list-heading { margin: 1rem 0 .4rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.supplier-list { display: grid; }
.supplier-line { display: flex; align-items: center; gap: .75rem;
  padding: .5rem 0; border-top: 1px solid var(--line); font-size: .85rem; }
.supplier-list .supplier-line:first-child { border-top: 0; }
.supplier-line-text { flex: 1; }
.supplier-line-actions { display: flex; gap: .75rem; white-space: nowrap; }
.price-photo-controls { display: flex; align-items: center; gap: .4rem; white-space: nowrap; }
.price-photo-choose { padding: .3rem .6rem; font-size: .74rem; }
.price-photo-clear { font-size: .74rem; color: var(--muted); }
.supplier-line-photo { width: 34px; height: 34px; flex: none; border-radius: 6px;
  border: 1px solid var(--line); background: #fff; object-fit: cover; }
.supplier-line-photo-empty { display: inline-block;
  background: repeating-linear-gradient(135deg, #f4f0e8, #f4f0e8 5px, #ece6da 5px, #ece6da 10px); }
.price-history { margin-top: .85rem; font-size: .82rem; }
.price-history summary { cursor: pointer; color: var(--muted); font-weight: 700; }
.price-history li { padding: .3rem 0; }
.shopping-trip { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin: .75rem 0; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.shopping-trip label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; }
.trip-shops { margin: .75rem 0; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.trip-shops h3 { margin: 0 0 .15rem; font-size: .9rem; }
.trip-shop-choices { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center; margin-top: .6rem; }
.trip-shop-choices .check-label { display: flex; align-items: center; gap: .35rem; font-size: .84rem; }
.trip-orders { margin: .5rem 0; }
.trip-order-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: .35rem 0 0; padding: 0; }
.trip-order-list li { display: flex; flex-direction: column; gap: .1rem; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: .8rem; }
.expiry-warnings { display: grid; gap: .75rem; margin: .75rem 0; }
.expiry-group { padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.expiry-group h3 { margin: 0 0 .5rem; font-size: .85rem; }
.expiry-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.expiry-group li { display: flex; flex-direction: column; gap: .1rem; font-size: .82rem; }
.purchase-list { margin-top: 1rem; }
.purchase-run { padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.purchase-product-heading { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin: 1.1rem 0 .3rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--sage-dark); }
.purchase-product-heading .hint { text-transform: none; letter-spacing: 0; }
.order-product-costs { margin-top: 1rem; }
.order-product-costs h5 { margin: 0 0 .4rem; font-size: .76rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.order-product-costs th, .order-product-costs td { padding: .5rem .7rem; font-size: .82rem; }
.purchase-run-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.purchase-run-heading h3 { margin: 0; font-family: Georgia, serif; }
.purchase-line { display: grid; grid-template-columns: 28px 42px minmax(150px, 1.4fr) 1fr .7fr .9fr 1.1fr auto; gap: .6rem; align-items: end; padding: .65rem 0; border-bottom: 1px solid var(--line); }
.purchase-line-photo { width: 40px; height: 40px; border-radius: 7px; border: 1px solid var(--line);
  background: #fff; object-fit: cover; align-self: center; }
.purchase-line-photo-empty { display: block;
  background: repeating-linear-gradient(135deg, #f4f0e8, #f4f0e8 5px, #ece6da 5px, #ece6da 10px); }
.purchase-line-brand { font-size: .76rem; color: var(--muted); font-weight: 700; }
.shopping-days { display: grid; gap: .9rem; margin: .75rem 0 1.25rem; }
.shopping-day { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; }
.shopping-day-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); }
.shopping-day-heading h3 { margin: 0; font-family: Georgia, serif; font-size: 1.15rem; }
.shopping-day-heading p { margin: .1rem 0 0; }
.shopping-day-orders { display: grid; }
/* A row, not a button, even though it is one. Buttons default to white text
   on green here, so anything taking the background away has to take the text
   colour with it - otherwise half the row is white on cream and simply is not
   there. That is what happened to the order number and the amounts. */
.shopping-order-row { display: grid; grid-template-columns: minmax(200px, 3fr) .7fr .9fr auto; gap: 1rem; align-items: center; width: 100%; padding: .8rem 1.1rem; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.shopping-day-orders .shopping-order-row:first-child { border-top: 0; }
.shopping-order-row { box-shadow: none; }
.shopping-order-row:hover { background: #f3efe7; box-shadow: none; }
.shopping-order-who { display: flex; flex-direction: column; gap: .15rem; }
.shopping-order-progress, .shopping-order-money { display: flex; flex-direction: column; gap: .1rem; }
.shopping-order-progress strong, .shopping-order-money strong { font-family: Georgia, serif; font-size: 1.05rem; }
.shopping-order-products { font-size: .84rem; color: var(--ink); }
.shopping-order-go { color: var(--muted); font-size: .8rem; font-weight: 700; white-space: nowrap; }

.kitchen-work { margin: 1rem 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.kitchen-work-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.kitchen-work-head h3 { margin: .1rem 0 0; font-family: Georgia, serif; font-size: 1.05rem; }
.kitchen-phase { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.kitchen-phase-head { display: flex; align-items: center; gap: .6rem; }
.kitchen-phase-head h4 { margin: 0; font-size: .92rem; }
.kitchen-phase-actions { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; margin-top: .6rem; }
.kitchen-who { display: flex; flex-direction: column; gap: .2rem; font-size: .74rem; }
.order-cost { margin-top: 1.2rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.order-cost h4 { margin: 0 0 .6rem; font-family: Georgia, serif; font-size: 1rem; }
.order-cost-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.order-cost-figures div { display: flex; flex-direction: column; gap: .15rem; }
.order-cost-figures span { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.order-cost-figures strong { font-family: Georgia, serif; font-size: 1.3rem; }
.order-cost-detail { margin-top: .7rem; font-size: .82rem; }
.order-cost-detail summary { cursor: pointer; color: var(--muted); font-weight: 700; }
.purchase-shop-label { font-size: .74rem; }
.purchase-shop-label select { width: 100%; margin-top: .15rem; }
.purchase-line label { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; }
.purchase-line label .hint { font-size: .7rem; }
.purchase-line input[type="checkbox"] { width: 20px; min-height: 20px; align-self: center; }
.purchase-line p { margin: 0; font-size: .82rem; }
.purchase-run-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }
.rule-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.rule-card, .delivery-rules, .availability-rules { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.rule-card h3, .delivery-rules h3, .availability-rules h3 { margin: 0; font-family: Georgia, serif; }
.rule-current { margin: .65rem 0; font-family: Georgia, serif; font-size: 1.5rem; }
.rule-edit { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; align-items: end; }
.rule-edit .wide { grid-column: 1 / -1; }
.delivery-rules { margin-top: .75rem; }
.availability-rules { margin-top: .75rem; }
.availability-fields { grid-template-columns: repeat(4, 1fr); margin-bottom: .75rem; }
.availability-block-list { display: grid; gap: .5rem; margin-top: 1rem; }
.availability-block-row { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: .75rem; padding: .7rem; border-radius: 8px; background: var(--cream); font-size: .82rem; }
.availability-block-row p { margin: 0; }
.delivery-tier-list { display: grid; gap: .5rem; margin: 1rem 0 .65rem; }
.delivery-tier-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: .65rem; align-items: end; }
.delivery-tier-row button { min-height: 42px; }
.delivery-extension-fields { grid-template-columns: repeat(4, 1fr); }
.input-suffix { color: var(--muted); font-size: .75rem; }
td small { color: var(--muted); }
.operations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.operations-grid > section, .operations-assignments { padding: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.operations-grid h3, .operations-assignments h3 { margin: 0 0 .75rem; font-family: Georgia, serif; }
.operations-assignments { margin-top: 1rem; }
.operations-list { display: grid; gap: .5rem; }
.operation-row { display: grid; grid-template-columns: 1.25fr 1fr auto; align-items: center; gap: .65rem; padding: .7rem; background: var(--cream); border-radius: 8px; font-size: .78rem; }
.operation-row strong, .operation-row span { display: block; }
.operation-row span { margin-top: .16rem; color: var(--muted); }
.operation-row .badge { display: inline-block; }
.operation-row button { min-height: 34px; padding: .4rem .65rem; }
.schedule-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.schedule-table { width: 100%; min-width: 960px; border-collapse: collapse; table-layout: fixed; }
.schedule-table th { padding: .65rem .7rem; background: #e8eee4; color: var(--sage-dark); text-align: left; font-size: .68rem; letter-spacing: .035em; line-height: 1.25; text-transform: uppercase; white-space: normal; }
.schedule-table th:nth-child(1) { width: 19%; }
.schedule-table th:nth-child(2) { width: 18%; }
.schedule-table th:nth-child(3) { width: 19%; }
.schedule-table th:nth-child(4) { width: 7%; }
.schedule-table th:nth-child(5) { width: 17%; }
.schedule-table th:nth-child(6) { width: 10%; }
.schedule-table th:nth-child(7) { width: 10%; }
.schedule-table td { padding: .7rem; border-top: 1px solid var(--line); vertical-align: top; font-size: .78rem; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.schedule-table td strong, .schedule-table td span { display: block; }
.schedule-table td span { margin-top: .16rem; color: var(--muted); }
.schedule-table td .badge { display: inline-block; margin-top: 0; color: var(--ink); }
.schedule-table .schedule-customer { font-size: .86rem; }
.schedule-table button { min-height: 34px; padding: .4rem .6rem; white-space: nowrap; }
.team-schedule-list { display: grid; gap: 1rem; margin-top: 1rem; }
.team-schedule-day { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.team-schedule-day h4 { margin: 0; padding: .7rem .85rem; background: #e8eee4; font-family: Georgia, serif; font-size: 1rem; }
.team-schedule-table-wrap { overflow-x: auto; }
.team-schedule-table { width: 100%; min-width: 900px; table-layout: fixed; }
.team-schedule-table th, .team-schedule-table td { padding: .65rem .75rem; white-space: normal; vertical-align: top; }
.team-schedule-table th { color: var(--sage-dark); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }
.team-schedule-table td { font-size: .78rem; }
.team-schedule-table td strong, .team-schedule-table td span { display: block; }
.team-schedule-table td span { margin-top: .15rem; color: var(--muted); }
.team-schedule-table button { min-height: 34px; padding: .4rem .6rem; white-space: nowrap; }
.operations-empty { padding: .7rem; color: var(--muted); font-size: .8rem; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.product-card { min-width: 0; padding: 1.25rem; }
.product-card h3 { margin: 0; font-family: Georgia, serif; font-size: 1.35rem; }
.card-top { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.badge { padding: .3rem .55rem; border-radius: 999px; background: #eee7dc; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.badge.ready { background: #dfe9dc; color: #385033; }
.badge.type-pickup { background: #dceaf2; color: #28566c; }
.badge.type-delivery { background: #e8e0f1; color: #5b4272; }
.badge.type-event { background: #f4e7c8; color: #76591e; }
.badge.tone-success { background: #dcebdc; color: #315b37; }
.badge.tone-danger { background: #f3dddd; color: #8a3333; }
.badge.tone-warning { background: #f6e3cf; color: #894817; }
.badge.tone-info { background: #dce8ef; color: #315a70; }
.badge.tone-neutral { background: #ebe7df; color: #625c55; }
.money-paid, .money-paid strong { color: #2f6a3b !important; }
.money-remaining, .money-remaining strong { color: #a13d35 !important; }
#dashboard-money > div:nth-child(2) strong { color: #2f6a3b; }
#dashboard-money > div:nth-child(3) strong { color: #a13d35; }
.fields { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: .75rem; margin: 1rem 0; }
.facts { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--muted); font-size: .82rem; }
.customer-copy-fields { display: grid; gap: .65rem; margin: 1rem 0; }
.customer-copy-fields textarea { width: 100%; min-height: 78px; padding: .65rem .75rem; border: 1px solid #bdb3a5; border-radius: 8px; resize: vertical; font: inherit; }
.add-on-card textarea, #product-production-dialog textarea { width: 100%; min-height: 72px; padding: .65rem .75rem; border: 1px solid #bdb3a5; border-radius: 8px; resize: vertical; font: inherit; }
.add-on-recipe-lines { display: grid; gap: .65rem; margin: 1rem 0; }
.add-on-material-row, .product-material-row { display: grid; grid-template-columns: 1.5fr .7fr .8fr 1fr auto auto; gap: .6rem; align-items: end; padding: .75rem; border-radius: 9px; background: var(--cream); }
.material-optional { display: flex; align-items: center; gap: .4rem; min-height: 42px; margin: 0; }
.material-optional input { width: 18px; min-height: 18px; }
.public-preview { margin: 1rem 0; padding: 1rem; border-left: 4px solid var(--rose); border-radius: 0 10px 10px 0; background: #f4ece5; }
.public-preview h4 { margin: 0 0 .35rem; font-family: Georgia, serif; font-size: 1.2rem; }
.public-preview p { margin: .25rem 0; color: var(--muted); font-size: .82rem; }
.public-preview .eyebrow { color: var(--sage-dark); font-size: .66rem; }
.actions { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1rem; }
.actions div { display: flex; flex-wrap: wrap; gap: .5rem; }
.reason { margin: .65rem 0 0; color: var(--warning); font-size: .82rem; }
/* Global status/error toast. Fixed so it is visible from any screen, and it
   still paints above modals because showMessage() re-parents it into the open
   <dialog> (a fixed child of a top-layer element stays in the top layer). */
#message {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: min(42rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0.75rem 1.15rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--sage);
  border-radius: 0.5rem;
  background: var(--paper);
  color: var(--sage-dark);
  font-weight: 700;
  line-height: 1.4;
  box-shadow: 0 6px 24px rgba(47, 41, 38, 0.18);
}
#message:empty { display: none; }
#message[data-tone="error"] { border-left-color: var(--action-accent); }
.costs-heading { margin-top: 3rem; }
.safety-context { margin: 1rem 0; padding: 1rem; border-radius: 10px; background: var(--cream); }
.safety-context p { margin: .35rem 0; font-size: .84rem; }
.table-wrap { overflow-x: auto; margin-top: 1rem; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
/* What uses an item is a list, not a sentence. Held to a column width it
   wraps onto a second line instead of pushing the table off the screen. */
.usage-cell { min-width: 12rem; max-width: 15rem; white-space: normal; line-height: 1.4; }
.item-name-cell { max-width: 15rem; white-space: normal; line-height: 1.35; }
.item-supplier-cell { max-width: 9rem; white-space: normal; line-height: 1.35; }
.item-price-cell { max-width: 8rem; white-space: normal; line-height: 1.35; }
.item-price-cell small { display: block; }
/* The item's picture, first in the row: recognised faster than its name. */
.item-thumb-cell { width: 56px; padding-right: 0; }
.item-thumb { display: block; width: 44px; height: 44px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff; object-fit: cover; }
.item-thumb-empty { background: repeating-linear-gradient(135deg, #f4f0e8, #f4f0e8 6px, #ece6da 6px, #ece6da 12px); }
.item-more-cell { white-space: normal; min-width: 6rem; }
.item-detail-row td { background: var(--cream); border-bottom: 2px solid var(--line); padding: 1.1rem 1.5rem; }
.item-detail-panel { position: relative; max-width: 40rem; }
.item-more-list { margin: 0; font-size: .88rem; display: grid; grid-template-columns: 9rem 1fr; gap: .6rem 1rem; padding-right: 5.5rem; }
.item-more-list div { display: contents; }
.item-more-list dt { margin: 0; font-weight: 700; color: var(--muted); }
.item-more-list dd { margin: 0; }
.item-detail-panel .edit-ingredient { position: absolute; top: 0; right: 0; }

th { background: #eee7dc; font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; }
td { font-size: .86rem; }
tr:last-child td { border-bottom: 0; }
td button { min-height: 34px; padding: .4rem .7rem; font-size: .78rem; }
dialog { width: min(680px, calc(100% - 2rem)); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgb(47 41 38 / 30%); }
dialog::backdrop { background: rgb(47 41 38 / 55%); backdrop-filter: blur(2px); }
dialog.wide-dialog { width: min(900px, calc(100% - 2rem)); }
#cost-form, #new-product-form, #new-add-on-form, #customer-form { padding: 1.5rem; }
.customer-detail-list { display: grid; gap: .5rem; margin: .75rem 0 1.25rem; }
.customer-detail-row { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem; border-radius: 8px; background: var(--cream); font-size: .82rem; }
.customer-detail-row p { margin: 0; }
.dialog-heading, .dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.icon-button { min-height: 38px; width: 38px; padding: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 1.6rem; }
.dialog-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; margin: 1.5rem 0; }
.dialog-fields .wide { grid-column: 1 / -1; }
.dialog-actions { justify-content: flex-end; }
.check-grid { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; padding: 1rem 0 1.5rem; border-top: 1px solid var(--line); }
.check-grid label { display: flex; align-items: center; gap: .5rem; margin: 0; }
.check-grid input { width: 18px; min-height: 18px; }
.yes { color: #385033; font-weight: 750; }
.no { color: var(--muted); }
.selection-group { margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: white; }
.selection-group-head { display: grid; grid-template-columns: 1.5fr 1fr .65fr .65fr auto; gap: .65rem; align-items: end; }
.option-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; max-height: 280px; overflow: auto; margin-top: 1rem; padding: .75rem; background: var(--cream); border-radius: 8px; }
.option-row { display: grid; grid-template-columns: 22px 1fr 100px; align-items: center; gap: .45rem; font-size: .82rem; }
.option-row input[type="checkbox"] { width: 18px; min-height: 18px; }
.option-row input[type="number"] { min-height: 34px; }
.remove-group { background: transparent; color: #8a2d22; border: 1px solid #cda8a1; }
.inquiry-list { display: grid; gap: .75rem; margin-top: 1rem; }
.order-work-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:1rem 0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.order-work-summary div { padding:.85rem 1rem; border-right:1px solid var(--line); }.order-work-summary div:last-child { border:0; }.order-work-summary strong,.order-work-summary span { display:block; }.order-work-summary strong { font-family:Georgia,serif; font-size:1.45rem; }.order-work-summary span { color:var(--muted); font-size:.75rem; }
.order-tools { display:grid; grid-template-columns:minmax(260px,1fr) 210px 160px; gap:.75rem; align-items:end; padding:1rem; border:1px solid var(--line); border-radius:12px; background:var(--paper); }.order-tools label { margin:0; }.order-priority-note { margin:.7rem 0 1.2rem; color:var(--muted); font-size:.8rem; }
.priority-order-list { display:grid; gap:1.5rem; }.order-priority-group { overflow:hidden; border:1px solid var(--line); border-radius:13px; background:var(--paper); }.order-group-heading { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.15rem; border-bottom:1px solid var(--line); }.order-group-heading h3 { margin:0; font-family:Georgia,serif; font-size:1.3rem; }.order-group-heading p { margin:.2rem 0 0; color:var(--muted); font-size:.78rem; }.order-group-heading>span { display:grid; place-items:center; min-width:32px; height:32px; border-radius:50%; background:var(--cream); font-weight:800; }
.order-column-head,.priority-order-row { display:grid; grid-template-columns:minmax(150px,1fr) minmax(210px,1.35fr) minmax(145px,.9fr) minmax(150px,1fr) minmax(150px,.9fr) minmax(125px,.75fr); gap:1rem; align-items:center; }.order-column-head { padding:.6rem 1rem; background:#eee7dc; color:var(--muted); font-size:.68rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }.priority-order-row { padding:1rem; border-top:1px solid var(--line); }.order-column-head+.priority-order-row { border-top:0; }.priority-order-row h4 { margin:0; font-family:Georgia,serif; font-size:1.05rem; }.priority-order-row strong { display:block; }.priority-order-row p { margin:.25rem 0 0; color:var(--muted); font-size:.76rem; line-height:1.35; }.priority-order-row button { width:100%; min-height:38px; padding:.5rem .65rem; font-size:.78rem; }
.inquiry-card { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.25rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.inquiry-card h3 { margin: 0 0 .25rem; font-family: Georgia, serif; }
.inquiry-card p { margin: 0; color: var(--muted); font-size: .82rem; }
.portal-request-row { grid-template-columns: 1.15fr 1.35fr .8fr auto; }
.portal-request-row .badge + .badge { margin-left: .35rem; }
.history-order-card { display: grid; grid-template-columns: minmax(220px, 1.35fr) minmax(90px, .55fr) minmax(220px, 1.15fr) minmax(150px, .8fr) auto; gap: 1rem; align-items: center; padding: 1rem 1.25rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.history-order-card h3 { margin: 0 0 .25rem; font-family: Georgia, serif; }
.history-order-card p { margin: .2rem 0 0; color: var(--muted); font-size: .82rem; }
.history-order-card .history-label { display: block; margin-bottom: .25rem; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.calendar-workspace { margin-bottom:1.5rem; }.calendar-toolbar { display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; }.calendar-toolbar h2 { margin:0; text-align:center; font-family:Georgia,serif; font-weight:500; }.calendar-navigation,.calendar-views { display:flex; gap:.4rem; }.calendar-navigation button,.calendar-views button { min-height:38px; padding:.45rem .7rem; }.calendar-views button.active { background:var(--sage); color:white; }.calendar-filters { display:flex; justify-content:flex-end; gap:.75rem; margin:1rem 0 .6rem; }.calendar-filters label { min-width:190px; margin:0; }.calendar-legend { display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1rem; color:var(--muted); font-size:.76rem; }.calendar-legend span { display:flex; align-items:center; gap:.35rem; }.calendar-legend i { width:11px; height:11px; border-radius:3px; }.calendar-legend .pickup,.calendar-entry.pickup { background:#dceaf2; }.calendar-legend .delivery,.calendar-entry.delivery { background:#e8e0f1; }.calendar-legend .event,.calendar-entry.event { background:#f4e7c8; }.calendar-legend .production,.calendar-entry.production { background:#e1e8dc; }
.calendar-grid { display:grid; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--paper); }.calendar-grid.week,.calendar-grid.month { grid-template-columns:repeat(7,minmax(0,1fr)); }.calendar-grid.day { grid-template-columns:1fr; }.calendar-day { min-width:0; min-height:240px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.calendar-grid.month .calendar-day { min-height:145px; }.calendar-day:nth-child(7n) { border-right:0; }.calendar-day header { display:flex; justify-content:space-between; align-items:center; padding:.65rem .7rem; background:#eee7dc; color:var(--muted); font-size:.7rem; text-transform:uppercase; }.calendar-day header strong { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; color:var(--ink); font-size:.85rem; }.calendar-day.today header strong { background:var(--sage); color:white; }.calendar-day.outside { opacity:.48; }.calendar-day>div { display:grid; gap:.4rem; padding:.5rem; }.calendar-entry { display:block; width:100%; min-height:0; padding:.5rem; border:1px solid rgb(70 65 58 / 12%); border-radius:7px; color:var(--ink); text-align:left; box-shadow:none; }.calendar-entry:hover { filter:brightness(.97); }.calendar-entry strong,.calendar-entry span,.calendar-entry small { display:block; }.calendar-entry strong { margin:.1rem 0; font-size:.77rem; }.calendar-entry span,.calendar-entry small { font-size:.65rem; line-height:1.3; }.calendar-entry-time { font-weight:800; }.calendar-empty { color:#aaa198; font-size:.68rem; }.calendar-grid.day .calendar-day { min-height:420px; }.calendar-grid.day .calendar-entry { max-width:650px; padding:.75rem; }.calendar-grid.day .calendar-entry strong { font-size:1rem; }
.inquiry-actions { display: flex; align-items: end; gap: .5rem; }
.inquiry-actions label { min-width: 120px; margin: 0; }
.empty-state { padding: 1.25rem; color: var(--muted); background: rgb(255 253 248 / 60%); border: 1px dashed var(--line); border-radius: 12px; }
.roster-entry { display: grid; grid-template-columns: repeat(5, 1fr); gap: .65rem; margin: 1rem 0; }
.roster-entry .work-specialties { grid-column: 1 / -2; display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin: 0; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 10px; }
.work-specialties legend { padding: 0 .3rem; font-size: .78rem; font-weight: 700; }
.work-specialties label { display: flex; align-items: center; gap: .35rem; font-size: .78rem; }
.work-specialties input { width: auto; }
.specialty-list { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.dashboard-business-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.dashboard-panel, .team-role-settings { padding: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-top: .8rem; }
.metric-grid div { padding: .7rem; background: var(--cream); border-radius: 8px; }
.metric-grid strong { display: block; font-size: 1.25rem; }
.metric-grid span { color: var(--muted); font-size: .75rem; }
.view-switcher { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.view-switcher button.active { background: var(--ink); color: white; }
.role-create-row { display: grid; grid-template-columns: minmax(220px, .7fr) 2fr auto; gap: .75rem; align-items: end; margin: 1rem 0; }
.team-role-list { display: grid; gap: .65rem; }
.team-role-row { display: grid; grid-template-columns: minmax(180px, .7fr) 2fr auto auto; gap: .75rem; align-items: center; padding: .75rem; border: 1px solid var(--line); border-radius: 10px; }
.team-role-row.inactive { opacity: .6; }
.role-explanation { margin: 1rem 0; padding: .8rem; background: var(--cream); border-radius: 8px; }
.order-guidance { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin: .9rem 0 1.2rem; padding: .8rem 1rem; background: #f1f3ed; border-left: 4px solid var(--green); border-radius: 6px; }
.order-guidance p { margin: 0; }
.inline-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.roster-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.roster-row { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; padding: .8rem 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.roster-row div { min-width: 0; overflow-wrap: anywhere; }
.roster-row div span { display: block; margin-top: .2rem; color: var(--muted); font-size: .78rem; }
.roster-row.inactive { opacity: .62; }
.order-item { margin: 1rem 0; padding: 1rem; border-radius: 10px; background: var(--cream); }
.dietary-review { margin: 1rem 0; padding: 1rem; border: 1px solid #d8b38f; border-radius: 10px; background: #fffaf3; }
.dietary-review.reviewed { border-color: #a9bda3; background: #edf3ea; }
.dietary-review h3 { margin: 0 0 .5rem; font-family: Georgia, serif; }
.dietary-review p { margin: .35rem 0; }
.dietary-review-controls { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .65rem; margin-top: .75rem; }
.new-order-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.new-order-heading h3 { margin: 0; font-family: Georgia, serif; }
.new-order-item { margin: .75rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); }
.new-order-item-head { display: grid; grid-template-columns: 1fr 1.5fr .55fr auto; align-items: end; gap: .65rem; }
.new-order-item-detail { margin-top: .75rem; }
.new-choice-group { margin: .65rem 0; padding: .75rem; border-radius: 8px; background: white; }
.new-choice-group strong { display: block; margin-bottom: .5rem; }
.new-choice-options, .new-addon-options { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.new-choice-options label, .new-addon-options label { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 500; }
.new-choice-options input, .new-addon-options input { width: 18px; min-height: 18px; }
.new-addon-options input[type="number"] { width: 70px; min-height: 34px; }
.custom-order-fields { display: grid; grid-template-columns: 1fr 3fr; gap: .65rem; }
.order-item-head { display: grid; grid-template-columns: 1.5fr .7fr 1fr auto; gap: .75rem; align-items: end; }
.order-item h3, .quote-controls h3 { margin: 0 0 .75rem; font-family: Georgia, serif; }
.quote-controls { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.quote-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.profitability { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem 1rem; padding: .7rem; border-radius: 8px; background: #edf3ea; }
.profitability.incomplete { background: #fff0df; }
.profitability span, .profitability strong { display: block; }
.profitability small { grid-column: 1 / -1; color: var(--muted); }
.quote-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.quote-actions button { min-height: 32px; padding: .35rem .55rem; font-size: .72rem; }
.payment-controls { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.payment-heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.payment-heading h3 { margin: 0; font-family: Georgia, serif; }
.payment-balance { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem .9rem; color: var(--muted); font-size: .82rem; }
.payment-balance strong { display: block; color: var(--ink); font-size: 1rem; }
.payment-entry { margin-top: 1rem; padding: 1rem; border-radius: 10px; background: #eee7dc; }
.payment-entry[hidden] { display: none; }
.deposit-request-summary { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; color: var(--muted); }
.deposit-request-summary strong { color: var(--ink); }
.deposit-request-summary span { text-align: right; }
.payment-entry > label { width: 100%; }
.payment-entry > label + button { margin-top: .65rem; }
.compact-fields { grid-template-columns: 1fr 2fr; margin-top: 0; }
.payment-fields { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.payment-table-wrap { overflow-x: auto; margin-top: 1rem; border: 1px solid var(--line); border-radius: 10px; }
.payment-table th, .payment-table td { padding: .65rem .7rem; }
.voided-payment { opacity: .58; text-decoration: line-through; }
.production-controls { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.fulfillment-controls { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.fulfillment-controls h3 { margin: 0; font-family: Georgia, serif; }
.order-conversation h3 { margin: 0; font-family: Georgia, serif; }
.message-shell { overflow: hidden; margin-top: 1rem; border: 1px solid var(--line); border-radius: 16px; background: #eeeae3; }
.owner-conversation-messages { display: flex; height: min(48vh, 440px); min-height: 300px; flex-direction: column; gap: .45rem; overflow-y: auto; padding: 1rem; scroll-behavior: smooth; }
.owner-message { width: fit-content; max-width: 72%; padding: .6rem .8rem; border-radius: 17px 17px 17px 5px; background: white; box-shadow: 0 1px 2px rgb(47 41 38 / 8%); }
.owner-message.owner { align-self: flex-end; border-radius: 17px 17px 5px; background: var(--sage); color: white; }
.owner-message strong { display: block; margin-bottom: .2rem; font-size: .64rem; opacity: .72; }
.owner-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.owner-message time { display: block; margin-top: .22rem; color: var(--muted); font-size: .62rem; text-align: right; }
.owner-message.owner time { color: rgb(255 255 255 / 72%); }
.conversation-composer { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .55rem; padding: .7rem; border-top: 1px solid var(--line); background: var(--paper); }
.conversation-composer label { margin: 0; }
.conversation-composer textarea { min-height: 48px; max-height: 130px; margin: 0; border-radius: 16px; }
.conversation-composer button { min-height: 48px; margin: 0; border-radius: 16px; }
.message-day { align-self: center; margin: .4rem 0; color: var(--muted); font-size: .65rem; font-weight: 800; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.fulfillment-line { display: flex; justify-content: space-between; gap: 1rem; margin: .65rem 0 0; padding: .65rem .75rem; background: white; border: 1px solid var(--line); border-radius: 8px; font-size: .84rem; }
.production-controls h3 { margin: 0; font-family: Georgia, serif; }
.production-item { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: white; }
.production-item h4, .production-item h5 { margin: 0; }
.production-item h5 { margin-top: 1rem; }
.production-item ul { margin: .5rem 0 0; padding: 0; list-style: none; columns: 2; }
.production-item ul li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem .5rem; break-inside: avoid; border-bottom: 1px solid var(--line); font-size: .82rem; }
.build-map { margin-top: 1rem; padding: .75rem; background: var(--cream); border-radius: 8px; }
.build-map p, .build-map li { font-size: .84rem; }
.build-map small { display: block; color: var(--sage-dark); font-weight: 750; }
.production-actions { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .75rem; margin-top: 1rem; }
.assignment-controls { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.assignment-controls h3 { margin: 0; font-family: Georgia, serif; }
.assignment-row { display: grid; grid-template-columns: 1.2fr .8fr 1.3fr auto; align-items: center; gap: .75rem; margin: .65rem 0 0; padding: .7rem .8rem; background: white; border: 1px solid var(--line); border-radius: 8px; font-size: .8rem; }
.assignment-row span:first-child strong { display: block; }
.workflow-controls { display: grid; grid-template-columns: 1fr 2fr auto; align-items: end; gap: .75rem; margin-top: 1.5rem; padding: 1rem; background: #eee7dc; border-radius: 10px; }
.workflow-panel { padding:1.1rem; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.workflow-panel h3 { margin:.2rem 0; font-family:Georgia,serif; font-size:1.35rem; }
.workflow-panel > .workflow-controls { margin-top:1rem; }
.workflow-panel .workflow-controls:has(#next-status-field[hidden]) { grid-template-columns:1fr auto; }
.workflow-panel .workflow-controls:has(#next-status-field[hidden]) #status-note { min-width:320px; }
.workflow-panel .danger-button, .workflow-panel #cancel-order { margin-top:.8rem; color:#8b2f2f; }
.quote-order-items { margin:.9rem 0 1.2rem; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.quote-order-items > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem .9rem; background:var(--paper); border-bottom:1px solid var(--line); }
.quote-order-items > div:last-child { border-bottom:0; }
.quote-order-items span { display:grid; gap:.2rem; }
.quote-order-items small { color:var(--muted); }
.quote-actions { display:flex; gap:.65rem; margin-top:1rem; }
.owner-access-settings { margin-top:1rem; padding:1rem; border:1px solid var(--line); border-radius:12px; background:var(--paper); }
.settings-category-picker { max-width:360px; margin:1rem 0; }
.settings-category-picker label { font-weight:750; }
.settings-category-picker select { width:100%; margin-top:.35rem; }
.owner-access-create { display:grid; grid-template-columns:1fr 1.2fr .8fr 1.2fr auto; align-items:end; gap:.75rem; margin:1rem 0; }
.owner-access-create label, .owner-access-row label { font-weight:700; }
.owner-access-create input, .owner-access-create select, .owner-access-row select { width:100%; margin-top:.35rem; }
.owner-access-list { display:grid; gap:.65rem; }
.owner-access-row { display:grid; grid-template-columns:1.5fr .8fr auto auto auto; align-items:center; gap:.75rem; padding:.8rem; border:1px solid var(--line); border-radius:10px; }
.owner-access-row p { margin:.2rem 0 0; }
.auth-reset { display:grid; grid-template-columns:minmax(220px,1fr) auto; align-items:end; gap:.75rem; margin-top:.75rem; }
.auth-reset label { font-weight:750; }
.auth-reset input { width:100%; margin-top:.35rem; }
.quote-preview { margin-top:1rem; padding:1rem; border:1px solid #b9cbb8; border-radius:10px; background:#f0f5ed; }
.quote-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.quote-preview-heading h4 { margin:.2rem 0 0; font-family:Georgia,serif; font-size:1.25rem; }
.quote-preview-heading > strong { color:var(--sage-dark); font-family:Georgia,serif; font-size:1.65rem; }
.quote-preview dl { margin:.8rem 0; }
.quote-preview dl div { display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0; border-bottom:1px solid rgba(80,100,76,.16); }
.quote-preview dt, .quote-preview dd { margin:0; }
.quote-preview dd { font-weight:750; }
@media (max-width: 800px) {
  .owner-access-create, .owner-access-row { grid-template-columns:1fr; }
  .admin-app-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; height: auto; }
  .admin-sidebar nav { grid-template-columns: repeat(2, 1fr); }
  .admin-main { height: auto; overflow: visible; }
  .admin-topbar { position: static; }
  #admin-page-content { width: min(100% - 1.5rem, 1040px); }
  .dashboard-tasks { grid-template-columns: 1fr; }
  .dashboard-section-heading { align-items: start; flex-direction: column; }
  .quick-actions-panel { align-items: start; grid-template-columns: 1fr; }
  .quick-actions, .dashboard-shortcuts { justify-content: flex-start; }
  .attention-list, .dashboard-lower-grid, .money-cards, .dashboard-work-grid, .business-pulse-grid, .business-insight-grid { grid-template-columns: 1fr; }
  .dashboard-today-section { grid-column:auto; }
  .cost-breakdown > div { grid-template-columns: 1fr 1fr; }
  .money-cards > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .money-cards > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .money-cards > div:last-child { border-bottom: 0; }
  .dashboard-schedule-row { grid-template-columns: 1fr; gap: .45rem; }
  .choice-cards { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .demo-guide-steps { grid-template-columns: 1fr; }
  .operations-summary { grid-template-columns: repeat(2, 1fr); }
  .operations-grid { grid-template-columns: 1fr; }
  .operation-row { grid-template-columns: 1fr; }
  .purchase-line { grid-template-columns: 28px 42px 1fr; }
  .shopping-order-row { grid-template-columns: 1fr; gap: .4rem; }
  .supplier-price-row { grid-template-columns: 1fr 1fr; }
  .summary { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .fields { grid-template-columns: 1fr; }
  .auth-row { flex-direction: column; }
  .dialog-fields { grid-template-columns: 1fr; }
  .dialog-fields .wide { grid-column: auto; }
  .selection-group-head, .option-list { grid-template-columns: 1fr; }
  .inquiry-card { grid-template-columns: 1fr; }
  .history-order-card { grid-template-columns: 1fr; }
  .calendar-toolbar { grid-template-columns:1fr; }.calendar-toolbar h2 { grid-row:1; text-align:left; }.calendar-navigation { grid-row:2; }.calendar-views { overflow-x:auto; }.calendar-filters { align-items:stretch; flex-direction:column; }.calendar-filters label { min-width:0; }.calendar-grid.week,.calendar-grid.month { grid-template-columns:1fr; }.calendar-day { min-height:160px; border-right:0; }.calendar-day.outside { display:none; }
  .order-work-summary { grid-template-columns:repeat(2,1fr); }.order-work-summary div:nth-child(2) { border-right:0; }.order-work-summary div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .order-tools { grid-template-columns:1fr; }.order-column-head { display:none; }.priority-order-row { grid-template-columns:1fr; gap:.65rem; }.priority-order-row button { width:auto; }
  .order-item-head, .workflow-controls, .compact-fields, .payment-fields { grid-template-columns: 1fr; }
  .payment-heading { display: block; }
  .payment-balance { justify-content: flex-start; margin-top: .75rem; }
  .production-item ul { columns: 1; }
  .production-actions { grid-template-columns: 1fr; }
  .quote-row { grid-template-columns: 1fr; }
  .profitability { grid-template-columns: 1fr; }
  .profitability small { grid-column: auto; }
  .roster-entry, .roster-list, .assignment-row, .dashboard-business-grid, .role-create-row, .team-role-row { grid-template-columns: 1fr; }
  .rule-grid, .rule-edit, .delivery-tier-row, .delivery-extension-fields { grid-template-columns: 1fr; }
  .new-order-item-head, .custom-order-fields { grid-template-columns: 1fr; }
  .add-on-material-row, .product-material-row { grid-template-columns: 1fr; }
  .rule-edit .wide, .delivery-extension-fields .wide { grid-column: auto; }
  .actions { align-items: stretch; flex-direction: column; }
}
.order-context { display:grid; grid-template-columns:minmax(180px,1fr) minmax(280px,1.5fr); gap:.85rem 1.5rem; margin-bottom:1rem; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:12px; background:#f7f2e9; }
.order-context h3 { margin:.25rem 0; font-family:Georgia,serif; font-size:1.35rem; }
.order-context > p { grid-column:1 / -1; margin:0; padding-top:.75rem; border-top:1px solid var(--line); }
.order-request-facts { display:grid; grid-template-columns:1.2fr .8fr; gap:.65rem; margin:0; }
.order-request-facts div { padding:.65rem .75rem; background:var(--paper); border:1px solid var(--line); border-radius:9px; }
.order-request-facts dt { color:var(--muted); font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.order-request-facts dd { margin:.3rem 0 0; font-weight:750; }
.order-item-title { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.order-item-title h3 { margin:0; }
.customer-portal-status { padding:.8rem; border-radius:9px; background:#f7f2e9; }.customer-portal-status p { margin:.25rem 0 0; }
.record-page-footer { margin-top:2rem; padding-top:1.25rem; border-top:1px solid var(--line); }
.list-search { display:block; max-width:460px; margin:0 0 1rem; font-weight:700; }
.list-search input { width:100%; margin-top:.35rem; }
@media (max-width: 800px) {
  .portal-request-row, .order-context, .order-request-facts, .order-at-a-glance { grid-template-columns:1fr; }
  .order-at-a-glance div { border-right:0; border-bottom:1px solid var(--line); }
  .order-at-a-glance div:last-child { border-bottom:0; }
  .order-activity article { grid-template-columns:8px 1fr; }
  .order-activity time { grid-column:2; }
  .order-item-title { align-items:flex-start; flex-direction:column; }
}

/* Quote and invoice document */
.quote-document { margin-top:1rem; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fffdf8; box-shadow:0 8px 24px rgb(47 41 38 / 5%); }
.quote-document.compact { margin-top:.75rem; box-shadow:none; }
.quote-document-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem; padding:1.15rem 1.2rem; border-bottom:1px solid var(--line); background:var(--paper); }
.quote-document-heading h4 { margin:.15rem 0 .2rem; font-family:Georgia,serif; font-size:1.35rem; }
.quote-document-heading p { margin:.2rem 0 0; color:var(--muted); }
.quote-document-heading > strong { white-space:nowrap; color:var(--sage-dark); font-family:Georgia,serif; font-size:1.7rem; }
.quote-document-items,.quote-document-services { padding:.35rem 1.2rem; }
.quote-document-services { border-top:1px solid var(--line); background:#fbf8f2; }
.quote-document-line { display:flex; justify-content:space-between; gap:1.25rem; padding:.8rem 0; border-bottom:1px solid var(--line); }
.quote-document-line:last-child { border-bottom:0; }
.quote-document-line > div { min-width:0; }
.quote-document-line strong { flex:0 0 auto; }
.quote-document-line small,.quote-document-line span { display:block; }
.quote-document-line small { margin-top:.15rem; color:var(--muted); }
.quote-document-line.subline { padding-left:1.1rem; font-size:.9rem; }
.quote-document-selections { display:grid; gap:.18rem; margin-top:.45rem; color:var(--muted); font-size:.82rem; }
.quote-document-selections strong { display:inline; color:var(--ink); }
.quote-item-note { margin:.45rem 0 0; color:var(--muted); font-size:.84rem; }
.quote-document-total { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 1.2rem; border-top:2px solid var(--sage); background:#edf3e9; font-family:Georgia,serif; font-size:1.3rem; }
.quote-document-total strong { font-size:1.55rem; }
.deposit-preview { margin:0; padding:.75rem 1.2rem; border-top:1px solid var(--line); background:#f7f2e8; }
.quote-document-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 1.5rem; margin:0; padding:.5rem 1.2rem 1rem; border-top:1px solid var(--line); }
.quote-document-details div { padding:.65rem 0; border-bottom:1px solid var(--line); }
.quote-document-details dt { color:var(--muted); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.quote-document-details dd { margin:.2rem 0 0; white-space:pre-wrap; }
.quote-document .customer-note { margin:0 1.2rem 1.2rem; }
.quote-document-compact .quote-document-details { grid-template-columns:1fr; }
.form-help { display:block; margin:.3rem 0 0; color:var(--muted); font-size:.72rem; font-weight:500; }
@media (max-width:800px) { .quote-document-heading { flex-direction:column; gap:.5rem; }.quote-document-details { grid-template-columns:1fr; } }


.owner-alert-pill { display:inline-flex; align-items:center; justify-content:center; min-height:2.1rem; padding:.55rem .75rem; border:1px solid #d8b38f; border-radius:999px; background:#fff3e6; color:var(--action-accent); text-decoration:none; font-size:.75rem; font-weight:900; }
.owner-alert-pill.clear { border-color:var(--line); background:var(--paper); color:var(--sage-dark); }
.business-pulse-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; }
.business-pulse-card { padding:.85rem; border:1px solid var(--line); border-radius:12px; background:#fffaf2; }
.business-pulse-card strong { display:block; margin:.25rem 0; font-family:Georgia,serif; font-size:1.55rem; line-height:1; }
.business-pulse-card span { display:block; color:var(--muted); font-size:.72rem; font-weight:750; }
.business-pulse-card small { display:block; margin-top:.35rem; color:var(--muted); font-size:.68rem; line-height:1.25; }
.business-insight-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.85rem; }
.business-insight-card { padding:.85rem; border:1px solid var(--line); border-radius:12px; background:var(--cream); }
.mini-heading h3 { margin:.1rem 0 .45rem; font-family:Georgia,serif; font-size:1.1rem; }
.mini-list { display:grid; gap:.45rem; }
.mini-list article { display:flex; justify-content:space-between; gap:1rem; padding:.55rem .65rem; border:1px solid var(--line); border-radius:9px; background:var(--paper); }
.mini-list strong, .mini-list span { display:block; }
.mini-list span { color:var(--muted); font-size:.72rem; }
.admin-alert-list { display:grid; gap:.55rem; }
.admin-alert-item { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.8rem; width:100%; padding:.75rem .85rem; border:1px solid var(--line); border-left:4px solid #b55b26; border-radius:10px; background:#fffaf2; color:var(--ink); text-align:left; text-decoration:none; }
.admin-alert-item h3, .admin-alert-item p { margin:0; }
.admin-alert-item h3 { font-size:.86rem; }
.admin-alert-item p { margin-top:.15rem; color:var(--muted); font-size:.72rem; }
.admin-alert-item > span:last-child { color:var(--action-accent); font-size:.72rem; font-weight:900; white-space:nowrap; }
.admin-alert-item:hover, button.admin-alert-item:hover { background:#fff6ea; color:var(--ink); }
.admin-alert-item:hover h3, button.admin-alert-item:hover h3 { color:var(--ink); }
.admin-alert-item:hover p, button.admin-alert-item:hover p { color:var(--muted); }
.admin-alert-item:hover > span:last-child, button.admin-alert-item:hover > span:last-child { color:var(--action-accent); text-decoration:underline; }

.dashboard-section-heading > a:hover, .section-heading-actions a:hover, .dashboard-task:hover > span { text-decoration: underline; }


.topbar-actions { display:flex; align-items:center; gap:.65rem; position:relative; }
.owner-alert-menu { position:relative; }
.owner-alert-button { display:inline-flex; align-items:center; justify-content:center; min-height:2.1rem; padding:.55rem .85rem; border:1px solid #d8b38f; border-radius:999px; background:#fff3e6; color:var(--action-accent); font-size:.75rem; font-weight:900; cursor:pointer; }
.owner-alert-button.clear { border-color:var(--line); background:var(--paper); color:var(--sage-dark); }
.owner-alert-button:hover { box-shadow:0 8px 18px rgb(79 63 45 / 12%); }
.owner-alert-dropdown { position:absolute; right:0; top:calc(100% + .55rem); z-index:20; width:min(420px, calc(100vw - 2rem)); max-height:min(72vh, 620px); overflow:auto; padding:.85rem; border:1px solid var(--line); border-radius:16px; background:var(--paper); box-shadow:0 18px 45px rgb(79 63 45 / 18%); }
.owner-alert-dropdown-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:0 0 .65rem; border-bottom:1px solid var(--line); }
.owner-alert-dropdown-heading strong { font-family:Georgia,serif; font-size:1.1rem; }
.owner-alert-dropdown-heading span { color:var(--muted); font-size:.72rem; font-weight:800; text-align:right; }
.owner-alert-group { margin-top:.75rem; }
.owner-alert-group h3 { margin:0 0 .4rem; color:var(--sage-dark); font-size:.72rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.owner-alert-group .admin-alert-item { margin-bottom:.4rem; }
.owner-alert-empty, .owner-alert-overflow { margin:.75rem 0 0; color:var(--muted); font-size:.78rem; line-height:1.35; }
.owner-alert-overflow { padding-top:.65rem; border-top:1px solid var(--line); }
@media (max-width:800px) { .topbar-actions { flex-wrap:wrap; justify-content:flex-start; }.owner-alert-dropdown { left:0; right:auto; } }

/* Dashboard title + hover contrast cleanup */
.dashboard-section-heading .eyebrow {
  margin: 0 0 .35rem;
  color: var(--sage-dark);
  font-family: inherit;
  font-size: clamp(1rem, 1.15vw, 1.18rem);
  font-weight: 950;
  letter-spacing: .015em;
  line-height: 1.18;
  text-transform: uppercase;
}

.dashboard-section-heading .section-helper,
.dashboard-section-heading p:not(.eyebrow) {
  margin: .2rem 0 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.35;
}

.attention-list button.dashboard-task:hover,
button.dashboard-task:hover,
.owner-alert-menu button.admin-alert-item:hover,
button.admin-alert-item:hover {
  background: #fff8ee;
  color: var(--ink);
  border-color: #c96b35;
  box-shadow: 0 8px 18px rgb(79 63 45 / 10%);
}

.attention-list button.dashboard-task:hover h3,
.attention-list button.dashboard-task:hover p,
.attention-list button.dashboard-task:hover strong,
button.dashboard-task:hover h3,
button.dashboard-task:hover p,
button.dashboard-task:hover strong,
.owner-alert-menu button.admin-alert-item:hover h3,
.owner-alert-menu button.admin-alert-item:hover p,
button.admin-alert-item:hover h3,
button.admin-alert-item:hover p {
  color: var(--ink);
}

.attention-list button.dashboard-task:hover p,
button.dashboard-task:hover p,
.owner-alert-menu button.admin-alert-item:hover p,
button.admin-alert-item:hover p {
  color: var(--muted);
}

.attention-list button.dashboard-task:hover > span,
button.dashboard-task:hover > span,
.owner-alert-menu button.admin-alert-item:hover > span:last-child,
button.admin-alert-item:hover > span:last-child {
  color: var(--action-accent);
  text-decoration: underline;
}

.attention-list button.dashboard-task:hover .attention-mark,
button.dashboard-task:hover .attention-mark,
.owner-alert-menu button.admin-alert-item:hover .attention-mark,
button.admin-alert-item:hover .attention-mark {
  background: #f1e7db;
  color: #8b4b25;
}
/* End dashboard title + hover contrast cleanup */

/* Dashboard CTA / alert / auto-refresh repair */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  position: relative;
}

.owner-alert-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.1rem;
  padding: .55rem .85rem;
  border: 1px solid #d8b38f;
  border-radius: 8px;
  background: #fff3e6;
  color: var(--action-accent);
  font-size: .75rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: none;
}

.owner-alert-button.clear {
  border-color: var(--line);
  background: var(--paper);
  color: var(--sage-dark);
}

.owner-alert-button:hover,
.owner-alert-button:focus-visible {
  border-color: var(--sage);
  background: var(--paper);
  color: var(--sage-dark);
  box-shadow: 0 5px 14px rgb(47 41 38 / 10%);
}

.dashboard-section-heading > a,
.section-heading-actions a,
.dashboard-task > span,
.admin-alert-item > span:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 1.65rem;
  padding: .25rem .45rem;
  border-radius: 7px;
  color: var(--action-accent);
  text-decoration: none;
  font-weight: 900;
  white-space: nowrap;
}

.dashboard-section-heading > a:hover,
.section-heading-actions a:hover,
.dashboard-task:hover > span,
.admin-alert-item:hover > span:last-child,
.dashboard-section-heading > a:focus-visible,
.section-heading-actions a:focus-visible,
.dashboard-task:focus-visible > span,
.admin-alert-item:focus-visible > span:last-child {
  background: #f5eee3;
  color: #8f3328;
  text-decoration: none;
}

.attention-list button.dashboard-task:hover,
.attention-list button.dashboard-task:focus-visible,
.admin-alert-item:hover,
.admin-alert-item:focus-visible {
  border-color: #d8b38f;
  background: #fffaf2;
  color: var(--ink);
  box-shadow: 0 6px 16px rgb(79 63 45 / 8%);
}

.attention-list button.dashboard-task:hover h3,
.attention-list button.dashboard-task:hover p,
.attention-list button.dashboard-task:hover strong,
.attention-list button.dashboard-task:hover small,
.admin-alert-item:hover h3,
.admin-alert-item:hover p,
.admin-alert-item:hover strong,
.admin-alert-item:hover small {
  color: inherit;
}

.attention-list button.dashboard-task:hover p,
.attention-list button.dashboard-task:hover small,
.admin-alert-item:hover p,
.admin-alert-item:hover small {
  color: var(--muted);
}
/* End dashboard CTA / alert / auto-refresh repair */


/* Admin live notification repair */
.owner-live-toasts {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 80;
  display: grid;
  gap: .65rem;
  width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}

.owner-live-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .85rem;
  border: 1px solid #d8b38f;
  border-left: 5px solid var(--action-accent);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 18px 42px rgb(79 63 45 / 18%);
}

.owner-live-toast.info { border-left-color: var(--sage-dark); }
.owner-live-toast strong { display: block; color: var(--sage-dark); font-size: .9rem; }
.owner-live-toast p { margin: .18rem 0 0; color: var(--muted); font-size: .76rem; line-height: 1.35; }

.owner-live-toast-close,
.owner-live-toast-action {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffaf2;
  color: var(--action-accent);
  cursor: pointer;
  font-weight: 900;
}

.owner-live-toast-close {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  color: var(--muted);
}

.owner-live-toast-action {
  min-height: 2rem;
  padding: .45rem .6rem;
  white-space: nowrap;
}

.owner-live-toast-close:hover,
.owner-live-toast-action:hover,
.owner-live-toast-close:focus-visible,
.owner-live-toast-action:focus-visible {
  border-color: #d8b38f;
  background: #f5eee3;
  color: #8f3328;
  box-shadow: none;
}

.owner-alert-dropdown .admin-alert-item {
  cursor: pointer;
}

.owner-alert-dropdown .admin-alert-item:hover,
.owner-alert-dropdown .admin-alert-item:focus-visible {
  background: #fffaf2;
  color: var(--ink);
}

.owner-alert-dropdown .admin-alert-item:hover > span:last-child,
.owner-alert-dropdown .admin-alert-item:focus-visible > span:last-child {
  background: #f5eee3;
  color: #8f3328;
  text-decoration: none;
}

@media (max-width: 700px) {
  .owner-live-toasts { top: .75rem; right: .75rem; left: .75rem; width: auto; }
  .owner-live-toast { grid-template-columns: auto 1fr; }
  .owner-live-toast-action { grid-column: 2; justify-self: start; }
}
/* End admin live notification repair */

.customer-portal-status .portal-disabled-warning,
#customer-portal-status.portal-disabled-warning {
  margin-top: .5rem;
  padding: .75rem .9rem;
  border: 1px solid rgba(151, 66, 45, .38);
  border-radius: 12px;
  background: rgba(151, 66, 45, .09);
  color: #3f241c;
}
#customer-portal-status.portal-disabled-warning strong {
  display: block;
  color: #4f1714;
  font-size: .9rem;
  letter-spacing: .02em;
}


.product-list-card .product-list-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
  margin: 0.75rem 0;
}
.product-list-card .product-list-summary p {
  margin: 0;
  padding: 0.65rem;
  border: 1px solid var(--line, #ded4c5);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
}
.product-list-card .product-list-summary strong,
.product-list-card .product-list-summary span {
  display: block;
}
.product-editor-actions {
  flex-wrap: wrap;
}


/* Products & Services forward repair */
.products-services-table th,
.products-services-table td { vertical-align: middle; }
.products-services-table td strong { display:block; font-size:1rem; color:var(--ink); }
.products-services-table td span { display:block; margin-top:.18rem; color:var(--muted); font-size:.86rem; }
.record-editor-name { margin:.25rem 0 .2rem; font-family:Georgia, serif; font-size:clamp(1.45rem, 2vw, 2rem); color:var(--ink); }
.product-editor-actions .danger { color:#8a2d22; border-color:#d1a18d; }

/* Units of measure, grouped by what they measure */
.unit-dimension-group { margin-bottom: 1.5rem; }
.unit-dimension-group h4 { margin: 0 0 .5rem; font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.team-role-row.inactive { opacity: .6; }
.team-role-row input:disabled { background: var(--cream); color: var(--muted); cursor: not-allowed; }

/* Ingredients & Supplies: tabs, filters, item detail facets */
.supplies-filter-bar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end;
  margin: 1rem 0; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.supplies-filter-bar label { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; }
.item-facets { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.item-facet h4 { margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.item-facet p { margin: 0 0 .6rem; }
.plain-list { margin: 0; padding-left: 1.1rem; font-size: .82rem; }
.supplier-card summary { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; cursor: pointer; list-style: none; }
.supplier-card summary::-webkit-details-marker { display: none; }
.supplier-card summary::after { content: "▾"; color: var(--muted); }
.supplier-card[open] summary::after { content: "▴"; }
.supplier-card-body { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.supplier-purchases { width: 100%; font-size: .82rem; }

/* What slipped — a list to read, not a console to act in. */
.slipped-list { display: grid; gap: 1.5rem; }
.slipped-group { display: grid; gap: 0.5rem; }
.slipped-row {
  display: grid;
  grid-template-columns: minmax(10rem, 1.2fr) minmax(7rem, 0.6fr) minmax(12rem, 2fr) auto;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--action-accent);
  border-radius: 0.5rem;
  background: var(--paper);
}
.slipped-row p { margin: 0; }
.slipped-who, .slipped-when { display: grid; gap: 0.15rem; }
/* A narrow window should not turn every row into a tall block. Two columns
   keeps who-and-when beside what-happened; one column is for a phone. */
@media (max-width: 980px) {
  .slipped-row { grid-template-columns: minmax(9rem, 1fr) minmax(9rem, 1.4fr); row-gap: 0.6rem; }
  .slipped-row > :last-child { grid-column: 1 / -1; }
  .slipped-row > :last-child button { width: 100%; }
}
@media (max-width: 620px) {
  .slipped-row { grid-template-columns: 1fr; }
}

/* The trip: three small numbers a person types after they walk in the door. */
.shopped-lines { display: grid; }
.shopped-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .45rem 0; border-top: 1px solid var(--line); font-size: .86rem; }
.shopped-lines .shopped-line:first-child { border-top: 0; }
.shopped-line .hint { display: block; }
.purchase-receipts { margin-top: 1.1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.purchase-receipts h4 { margin: 0 0 .15rem; }
.receipt-row { display: grid; grid-template-columns: 2fr 1fr 1.3fr auto; gap: .75rem; align-items: end;
  padding: .6rem 0; border-top: 1px solid var(--line); }
.receipt-row p { margin: 0; }
.receipt-row label { display: flex; flex-direction: column; gap: .2rem; font-size: .74rem; }
.receipt-row-actions { display: flex; gap: .5rem; align-items: center; }
.receipt-new { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin-top: .85rem;
  padding-top: .85rem; border-top: 1px solid var(--line); }
.receipt-new label { display: flex; flex-direction: column; gap: .2rem; font-size: .74rem; }
.purchase-trip { margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); }
.purchase-trip h4 { margin: 0 0 .2rem; }
.purchase-trip-fields { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; margin: .75rem 0 .5rem; }
.purchase-trip-fields label { margin: 0; }
.purchase-trip-fields input { width: 9rem; }
.field-suffix { display: block; font-weight: 400; font-size: .72rem; color: var(--muted); }

/* The kitchen board: read at arm's length, with flour on your hands. */
.kitchen-board { display: grid; gap: 1.5rem; }
.kitchen-day { display: grid; gap: .85rem; }
.kitchen-shared { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); }
.kitchen-shared h3 { margin: 0 0 .15rem; }
.kitchen-shared ul { margin: .5rem 0 0; padding-left: 1.1rem; }
.kitchen-shared li { margin-bottom: .2rem; }
.kitchen-card { border: 1px solid var(--line); border-left: 4px solid var(--sage); border-radius: 12px; background: var(--paper); padding: 1rem 1.15rem; }
.kitchen-card.is-overdue { border-left-color: var(--action-accent); }
/* A bare <header> in this app is the site banner: dark green, white text, and
   a lot of padding. Inside a card that made the customer's name and the
   start-by time dark-on-dark, which is the one line a kitchen has to read at a
   glance. Said plainly here rather than inherited. */
.kitchen-card-head { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: start;
  padding: 0; background: none; color: var(--ink); }
.kitchen-card-head .hint { color: var(--muted); }
.kitchen-card-head h3 { margin: 0; }
.kitchen-clock { text-align: right; }
.kitchen-clock strong { display: block; font-size: 1.35rem; line-height: 1.1; }
.kitchen-allergy { display: grid; gap: .1rem; margin: .75rem 0; padding: .6rem .8rem; border-radius: 8px; background: #f6e2dc; border: 1px solid var(--rose); }
.kitchen-allergy strong { text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; }
.kitchen-warning { margin: .5rem 0; color: var(--warning); font-weight: 650; }
.kitchen-note { margin: .4rem 0; color: var(--muted); }
.kitchen-items { display: grid; gap: .85rem; margin-top: .85rem; }
.kitchen-item { border: 1px solid var(--line); border-radius: 10px; padding: .75rem .9rem; background: var(--cream); }
.kitchen-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.kitchen-item-head h4 { margin: 0; }
.kitchen-standard { margin: .3rem 0 0; color: var(--muted); font-style: italic; }
.kitchen-ingredients { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .2rem; }
.kitchen-ingredients li { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: baseline; padding: .3rem .4rem; border-radius: 6px; }
.kitchen-ingredients li:nth-child(odd) { background: rgb(255 255 255 / 60%); }
.kitchen-ingredients li.has-allergen { background: #f9ece8; }
.kitchen-ingredients strong { font-size: 1.05rem; }
.kitchen-allergen { margin-left: .4rem; font-size: .72rem; font-weight: 700; color: var(--action-accent); text-transform: uppercase; }
.kitchen-minutes { display: flex; align-items: center; gap: .4rem; margin: .6rem 0 0; font-weight: 650; }
.kitchen-minutes input { width: 5.5rem; }
.kitchen-minutes .field-suffix { display: inline; font-weight: 400; }
.kitchen-card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--line); }
@media (max-width: 780px) {
  .kitchen-card-head { grid-template-columns: 1fr; }
  .kitchen-clock { text-align: left; }
}
@media print {
  .admin-sidebar, .admin-topbar, .kitchen-card-foot, .kitchen-minutes, .operations-summary, .operations-grid { display: none !important; }
  .kitchen-card { break-inside: avoid; border-left-width: 2px; }
  .kitchen-ingredients strong { font-size: 1.1rem; }
}
.kitchen-allergy-clear { margin: .6rem 0; color: var(--muted); font-size: .9rem; }
/* A greyed suggestion, not a number someone already recorded - on this page
   the difference between the two is the difference between a guess and a fact. */
.kitchen-minutes input::placeholder { color: #a79c90; font-style: italic; }

/* An update that arrived while the owner was writing. It waits here rather than
   redrawing the page under their hands, and it is a button because the only
   person who decides when the page changes is the one typing into it. */
.held-update-note {
  border: 1px solid var(--line, #d8d2c8);
  background: var(--surface-raised, #fffaf2);
  color: inherit;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.held-update-note:hover { border-color: currentColor; }

/* The business mark. It replaces the initials that stood in for it, at the
   same size, so nothing shifts when a logo arrives. */
.admin-brand > span img,
.brand > span img { width: 100%; height: 100%; object-fit: contain; display: block; }

.business-logo-row { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1rem; }
.business-logo-preview {
  width: 120px; height: 120px; flex: none;
  border: 1px solid var(--line, #d8d2c8); border-radius: 12px;
  background: #fff; display: grid; place-items: center;
  font-size: 0.8rem; color: #8a8378; text-align: center; padding: 0.5rem; overflow: hidden;
}
.business-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.business-logo-actions { display: grid; gap: 0.5rem; align-content: start; max-width: 32rem; }
.secondary-file {
  display: inline-block; cursor: pointer; border: 1px solid var(--line, #d8d2c8);
  border-radius: 8px; padding: 0.45rem 0.9rem; background: var(--surface-raised, #fffaf2);
  font-size: 0.9rem; width: fit-content;
}
.secondary-file:hover { border-color: currentColor; }
.business-profile-form .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.75rem; }

/* The business on a quote: the mark, then who it is from. */
.quote-letterhead { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.quote-letterhead img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.quote-letterhead .quote-from strong { display: block; }
.quote-letterhead .quote-from small { display: block; color: #6f675c; }

/* A way in that sits with the other things you do from anywhere. */
.topbar-pill {
  border: 1px solid var(--line, #d8d2c8);
  background: var(--surface-raised, #fffaf2);
  color: inherit; border-radius: 999px;
  padding: 0.35rem 0.85rem; font-size: 0.85rem; cursor: pointer;
}
.topbar-pill:hover { border-color: currentColor; }

/* The order's story: what the customer was told, and who did it. */
.order-stage-block { margin-bottom: 1.5rem; }
.order-stages article { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: start; padding: 0.5rem 0; }
.shopping-start { display: flex; gap: 0.75rem; align-items: flex-end; flex-wrap: wrap; margin: 0.75rem 0 1rem; }
.shopping-start .hint { flex-basis: 100%; margin: 0; }
.shopping-underway { margin: 0.75rem 0 1rem; }
.purchase-line-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* What one person can be assigned to. Ticked, not chosen from a list of one. */
.work-type-picker { border: 1px solid var(--line, #d8d2c8); border-radius: 12px; padding: 1rem; margin: 1rem 0; }
.work-type-picker legend { padding: 0 0.4rem; font-weight: 600; }
.work-type-picker .hint { margin: 0 0 0.6rem; }
.role-work-types { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.role-work-types label { display: flex; align-items: center; gap: 0.4rem; }

/* Tick boxes the size of tick boxes. The browser default blows up when the
   label around it sets a big font size. */
/* Every input in this app is 42px tall so it is easy to hit. A tick box is not
   a field, and a 16px box stretched to 42 is the wrong shape. */
.role-work-types input[type="checkbox"],
.work-specialties input[type="checkbox"] {
  width: 1rem; height: 1rem; min-height: 0; flex: none; margin: 0;
  align-self: center; accent-color: #4a5d3a;
}
.role-work-types label { font-size: 0.95rem; white-space: nowrap; }

.terms-agreement { margin: 1rem 0; padding: .9rem 1rem; border: 1px solid var(--line);
  border-radius: 10px; background: var(--paper); }
.terms-agreement h3 { margin: 0 0 .25rem; font-size: 1rem; }
.terms-agreement .terms-text, .terms-rules .terms-text { margin: .5rem 0 0; white-space: pre-wrap; line-height: 1.5; }
.terms-field { display: block; margin: .75rem 0; }
.terms-field textarea { width: 100%; font: inherit; line-height: 1.5; padding: .65rem .8rem;
  border: 1px solid var(--line); border-radius: 8px; background: white; }
.terms-history { margin-top: 1rem; }

.purchase-swap { grid-column: 1 / -1; margin-top: .75rem; padding: .9rem 1rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.purchase-swap h5 { margin: 0 0 .6rem; font-size: .95rem; }
.purchase-swap > label { display: block; margin-bottom: .6rem; }
.purchase-swap > label input { width: 100%; }
.swap-asked { margin: 0 0 .75rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 8px; }
.swap-asked legend { padding: 0 .35rem; font-weight: 700; font-size: .85rem; }
.swap-asked label { display: block; padding: .2rem 0; font-weight: 500; }