/* One visual system for the shop workspace. Specialized structure lives in styles.css. */
:root {
  color-scheme:dark;
  --ui-ink:var(--shop-background);
  --ui-surface:color-mix(in srgb,var(--shop-panel) 97%,var(--shop-accent));
  --ui-raised:color-mix(in srgb,var(--shop-panel) 91%,white);
  --ui-field:color-mix(in srgb,var(--shop-background) 70%,var(--shop-panel));
  --ui-line:color-mix(in srgb,var(--shop-accent) 17%,#42454e);
  --ui-soft:color-mix(in srgb,var(--shop-accent) 13%,var(--ui-surface));
  --ui-glow:color-mix(in srgb,var(--shop-accent) 14%,transparent);
  --ui-local-surface:var(--ui-ink);
  --ui-highlight:var(--shop-background-ink,var(--shop-text,#f4f6fa));
  --ui-local-muted:var(--shop-background-muted,color-mix(in srgb,var(--ui-highlight) 72%,var(--ui-local-surface)));
  --ui-local-faint:var(--shop-background-faint,color-mix(in srgb,var(--ui-highlight) 64%,var(--ui-local-surface)));
  --ui-muted:var(--ui-local-muted);
  --ui-faint:var(--ui-local-faint);
  --ui-accent-text:color-mix(in srgb,var(--shop-accent) 38%,var(--ui-highlight));
  --ui-ease:cubic-bezier(.2,.8,.2,1);
  --ui-fast:140ms; --ui-motion:220ms; --motion-fast:var(--ui-fast); --motion-medium:var(--ui-motion);
  --ui-space:14px; --ui-control:36px; --ui-card-height:116px; --ui-item-font:13px; --ui-radius:11px;
  --bg:var(--ui-ink); --panel:var(--ui-surface); --panel-2:var(--ui-raised); --panel-3:var(--ui-raised);
  --line:var(--ui-line); --line-soft:var(--ui-line); --text:var(--ui-highlight); --muted:var(--ui-muted); --dim:var(--ui-faint);
  --violet:var(--shop-accent); --violet-bright:var(--ui-accent-text); --violet-soft:var(--ui-soft);
  --surface-line:var(--ui-line); --surface-raised:var(--ui-raised); --surface-soft:var(--ui-soft); --surface-glow:var(--ui-glow);
}
/* Ink belongs to the surface beneath it, even when a shop mixes light and dark colours. */
:where(.panel-card,.settings-card,.owner-shop-card,.catalog-panel,.cart-panel,.modal,.shop-popover,.clock-dropdown,.sidebar.app-header,.account-chip,.cart-submit-area,.modal-footer,.cart-footer,.mechanic-services,.public-state-card,.maintenance-card,#startup-error > div,.settings-account) {
  --ui-local-surface:var(--ui-surface);
  --ui-highlight:var(--shop-surface-ink,var(--shop-text,#f4f6fa));
  --ui-local-muted:var(--shop-surface-muted,color-mix(in srgb,var(--ui-highlight) 72%,var(--ui-local-surface)));
  --ui-local-faint:var(--shop-surface-faint,color-mix(in srgb,var(--ui-highlight) 64%,var(--ui-local-surface)));
  color:var(--ui-highlight);
}
:where(.staff-card,.overview-activity-row,.shift-protection-row,.duty-diagnostic-row,.application-group,.application-submission,.application-answer-list article,.admin-alert-row,.recent-order-row,.staff-metrics > div,.weekly-analysis-grid article,.cart-top,.shop-switcher,.menu-card,.owner-shop-meta span,.secondary-button,.row-action,.danger-button,.discount-picker,.stats-button,.icon-button,.daily-metric,.toast,.mechanic-service-card,.owner-summary article,.team-stats article,.overview-metrics article,.personal-stat,.stats-time-card,.login-card) {
  --ui-local-surface:var(--ui-raised);
  --ui-highlight:var(--shop-raised-ink,var(--shop-text,#f4f6fa));
  --ui-local-muted:var(--shop-raised-muted,color-mix(in srgb,var(--ui-highlight) 72%,var(--ui-local-surface)));
  --ui-local-faint:var(--shop-raised-faint,color-mix(in srgb,var(--ui-highlight) 64%,var(--ui-local-surface)));
  color:var(--ui-highlight);
}
:where(.discord-settings-grid fieldset,.weekly-analysis,.application-intro,.owner-discord-settings-grid > div,.profile-history-grid > section,.profile-summary article,.discord-health-grid article,.backup-status > span,.form-field input,.form-field select,.form-field textarea,.setting-row select,.setting-row input[type="number"],.discord-settings-grid input[type="text"],.discord-settings-grid select,.owner-discord-settings-grid select,.weekly-schedule-form select,.weekly-schedule-form input[type="time"],.announcement-form textarea,.mechanic-service-card input,.mechanic-settings-form input,.free-repairs-form input,.ingredient-calculator-controls select,.ingredient-calculator-controls input,.recipe-component-row input,.search-box,.quantity-control input,.staff-clock-status,.recent-orders-header,.empty-state,.owner-empty,.checkout-feedback,.public-state-status) {
  --ui-local-surface:var(--ui-field);
  --ui-highlight:var(--shop-field-ink,var(--shop-text,#f4f6fa));
  --ui-local-muted:var(--shop-field-muted,color-mix(in srgb,var(--ui-highlight) 72%,var(--ui-local-surface)));
  --ui-local-faint:var(--shop-field-faint,color-mix(in srgb,var(--ui-highlight) 64%,var(--ui-local-surface)));
  color:var(--ui-highlight);
}
/* Re-declare dependent tokens locally: inherited custom-property values are already resolved. */
:where(.panel-card,.settings-card,.owner-shop-card,.catalog-panel,.cart-panel,.modal,.shop-popover,.clock-dropdown,.sidebar.app-header,.account-chip,.cart-submit-area,.modal-footer,.cart-footer,.mechanic-services,.public-state-card,.maintenance-card,#startup-error > div,.settings-account,.staff-card,.overview-activity-row,.shift-protection-row,.duty-diagnostic-row,.application-group,.application-submission,.application-answer-list article,.admin-alert-row,.recent-order-row,.staff-metrics > div,.weekly-analysis-grid article,.cart-top,.shop-switcher,.menu-card,.owner-shop-meta span,.secondary-button,.row-action,.danger-button,.discount-picker,.stats-button,.icon-button,.daily-metric,.toast,.mechanic-service-card,.owner-summary article,.team-stats article,.overview-metrics article,.personal-stat,.stats-time-card,.login-card,.discord-settings-grid fieldset,.weekly-analysis,.application-intro,.owner-discord-settings-grid > div,.profile-history-grid > section,.profile-summary article,.discord-health-grid article,.backup-status > span,.form-field input,.form-field select,.form-field textarea,.setting-row select,.setting-row input[type="number"],.discord-settings-grid input[type="text"],.discord-settings-grid select,.owner-discord-settings-grid select,.weekly-schedule-form select,.weekly-schedule-form input[type="time"],.announcement-form textarea,.mechanic-service-card input,.mechanic-settings-form input,.free-repairs-form input,.ingredient-calculator-controls select,.ingredient-calculator-controls input,.recipe-component-row input,.search-box,.quantity-control input,.staff-clock-status,.recent-orders-header,.empty-state,.owner-empty,.checkout-feedback,.public-state-status) {
  --ui-muted:var(--ui-local-muted);
  --ui-faint:var(--ui-local-faint);
  --ui-accent-text:color-mix(in srgb,var(--shop-accent) 38%,var(--ui-highlight));
  --ui-error-text:color-mix(in srgb,#d52d3b 62%,var(--ui-highlight));
  --ui-success-text:color-mix(in srgb,#148046 62%,var(--ui-highlight));
  --text:var(--ui-highlight); --muted:var(--ui-muted); --dim:var(--ui-faint);
  --violet-bright:var(--ui-accent-text);
}
.calculation-item,.recipe-component-row,.report-checkboxes label,.schedule-switch,.weekly-history-row,.discord-failed-row,.saved-report-member,.setup-check,.decision-template-editor {
  --ui-local-surface:var(--ui-raised);
  --ui-highlight:var(--shop-raised-ink,var(--shop-text,#f4f6fa));
  --ui-muted:var(--shop-raised-muted,color-mix(in srgb,var(--ui-highlight) 72%,var(--ui-local-surface)));
  --ui-faint:var(--shop-raised-faint,color-mix(in srgb,var(--ui-highlight) 64%,var(--ui-local-surface)));
  --ui-accent-text:color-mix(in srgb,var(--shop-accent) 38%,var(--ui-highlight));
  --text:var(--ui-highlight); --muted:var(--ui-muted); --dim:var(--ui-faint); --violet-bright:var(--ui-accent-text);
  color:var(--ui-highlight);
}
html[data-density="comfortable"] { --ui-space:20px; --ui-control:42px; --ui-card-height:140px; --ui-item-font:14px; --ui-radius:12px; }
.shop-popover { border-color:var(--ui-line); background:var(--ui-surface); }
html,body,.app-shell { background:var(--ui-ink); color:var(--ui-highlight); }
body { font-size:13px; line-height:1.5; }
body.modal-open { overflow:hidden; }
button,input,textarea,select { accent-color:var(--shop-accent); }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--ui-accent-text); outline-offset:3px; }
input,textarea,select { color:var(--ui-highlight); }
input::placeholder,textarea::placeholder,.search-box input::placeholder,.mechanic-service-card input::placeholder { color:var(--ui-faint); opacity:1; }
.main-content { min-width:0; background:radial-gradient(ellipse at 82% -8%,var(--ui-glow),transparent 42%),var(--ui-ink); }
.portal-view.active { animation:ui-view-in var(--ui-motion) ease-out; }
/* Opacity-only page motion never creates a containing block for the fixed mobile cart. */
@keyframes ui-view-in { from { opacity:.5; } to { opacity:1; } }
.eyebrow { color:var(--ui-faint); font-size:10px; letter-spacing:.13em; }
.page-header { min-height:0; margin:0 0 var(--ui-space); padding:3px 0 16px; gap:12px; border:0; border-bottom:1px solid var(--ui-line); border-radius:0; background:transparent; box-shadow:none; }
.page-header h1,.catalog-heading h1 { font-size:clamp(23px,2.4vw,29px); line-height:1.2; letter-spacing:-.045em; }
.page-header .eyebrow,.catalog-heading .eyebrow { color:var(--ui-accent-text); font-size:10px; }
.page-header > div > p:last-child { margin-top:7px; color:var(--ui-muted); font-size:12px; line-height:1.55; }
.panel-card,.settings-card,.owner-shop-card,.catalog-panel,.cart-panel { border-color:var(--ui-line); border-radius:var(--ui-radius); background:var(--ui-surface); box-shadow:none; }
.panel-heading { gap:12px; padding:var(--ui-space) 16px; border-bottom-color:var(--ui-line); }
.panel-heading h2,.settings-card-head h2 { color:var(--ui-highlight); font-size:14px; line-height:1.35; letter-spacing:-.025em; }
.panel-subtitle,.settings-card-head p { color:var(--ui-muted); font-size:11px; line-height:1.5; }
#admin-view > .panel-card,#discord-view > .panel-card { margin:0 0 var(--ui-space); }
.settings-card { padding:0 18px; }
.settings-card-head { padding:18px 0 14px; }
.setting-row { min-height:70px; border-top-color:var(--ui-line); }
.setting-row strong { color:var(--ui-highlight); font-size:12px; }
.setting-row small,.form-hint { color:var(--ui-muted); font-size:11px; line-height:1.5; }
.music-volume-row { border-top-color:var(--ui-line); }
.music-volume-row label { color:var(--ui-highlight); }
.music-volume-row output { color:var(--ui-accent-text); }
#music-status { color:var(--ui-muted); }
.setting-row input[type="checkbox"]:checked,.appearance-toggle input:checked { background:var(--shop-accent); border-color:var(--shop-accent); }
.viewer-role,.rank-badge,.request-count,.application-count,.profile-section-head span { border:1px solid var(--ui-line); border-radius:6px; background:var(--ui-soft); color:var(--ui-accent-text); font-size:10px; }
.primary-button,.primary-small,.checkout-button,.mechanic-add-button { position:relative; min-height:var(--ui-control); overflow:hidden; border:1px solid color-mix(in srgb,var(--shop-button) 75%,white); border-radius:8px; background:var(--shop-button); color:var(--shop-button-ink,#fff); font-size:12px; font-weight:800; box-shadow:none; transition:background var(--ui-fast),box-shadow var(--ui-fast),transform var(--ui-fast) var(--ui-ease); }
.primary-button,.primary-small { padding:8px 13px; }
.primary-button:after,.primary-small:after,.checkout-button:after,.mechanic-add-button:after { display:none; }
.secondary-button,.row-action,.danger-button,.discount-picker,.stats-button { min-height:32px; border:1px solid var(--ui-line); border-radius:7px; background:var(--ui-raised); color:var(--ui-highlight); font-size:11px; transition:background var(--ui-fast),border-color var(--ui-fast); }
.danger-button,.row-action.danger { border-color:color-mix(in srgb,#f87171 35%,var(--ui-line)); background:color-mix(in srgb,#f87171 8%,var(--ui-raised)); color:var(--ui-error-text); }
.text-button { min-height:32px; padding:6px 8px; color:var(--ui-muted); }
.text-button:hover { color:var(--ui-highlight); }
.form-field { color:var(--ui-muted); font-size:11px; }
.form-field input,.form-field select,.form-field textarea,.setting-row select,.setting-row input[type="number"],.discord-settings-grid input[type="text"],.discord-settings-grid select,.owner-discord-settings-grid select,.weekly-schedule-form select,.weekly-schedule-form input[type="time"],.announcement-form textarea,.mechanic-service-card input,.mechanic-settings-form input,.free-repairs-form input,.ingredient-calculator-controls select,.ingredient-calculator-controls input,.recipe-component-row input { min-height:var(--ui-control); border-color:var(--ui-line); border-radius:8px; background:var(--ui-field); color:var(--ui-highlight); font-size:12px; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus,.setting-row select:focus,.setting-row input[type="number"]:focus { border-color:var(--shop-accent); }
.form-check input { accent-color:var(--shop-accent); }
.discord-settings-grid fieldset,.weekly-analysis,.application-intro,.owner-discord-settings-grid > div,.profile-history-grid > section,.profile-summary article,.discord-health-grid article,.backup-status > span { border-color:var(--ui-line); border-radius:9px; background:var(--ui-field); }
.staff-card,.overview-activity-row,.shift-protection-row,.duty-diagnostic-row,.application-group,.application-submission,.application-answer-list article,.admin-alert-row,.recent-order-row,.staff-metrics > div,.weekly-analysis-grid article { border-color:var(--ui-line); border-radius:8px; background:var(--ui-raised); }
.application-group[open] summary,.application-question,.profile-section-head,.profile-history-row,.admin-menu-row,.category-admin-row,.rank-admin-row,.discount-admin-row,.owner-safety-row,.recent-orders-header { border-color:var(--ui-line); }
.application-group-body,.application-answer-list p,.application-submission small,.profile-history-row small,.recent-order-items,.recent-order-row time,.admin-item-name small,.weekly-analysis-head span,.owner-shop-owner small,.owner-shop-owner code,.owner-shop-meta,.discord-settings-grid small,.owner-discord-settings-grid code,.discord-health-grid span,.music-status { color:var(--ui-muted); }
.application-title small,.weekly-analysis-grid small,.discord-health-grid small,.backup-status small,.staff-metrics small,.profile-summary small,.owner-summary small,.team-stats small { color:var(--ui-muted); font-size:10px; }
.application-icon,.application-intro-icon,.owner-summary-icon { background:var(--ui-soft); color:var(--ui-accent-text); }
.application-title strong,.application-submission strong,.profile-history-row strong,.profile-summary strong,.recent-order-user strong,.staff-metrics strong { color:var(--ui-highlight); }
.profile-history-row strong,.admin-menu-row strong,.time-row strong,.member-identity strong { font-size:12px; }
.profile-history-row small,.admin-menu-row span,.admin-item-name small,.time-row span,.time-row .discord-name,.recent-order-user small,.recent-order-row time,.member-identity small { color:var(--ui-muted); font-size:11px; }
.time-row,.member-row,.profile-section-head { border-color:var(--ui-line); }
.menu-table-header,.discord-settings-grid fieldset > label,.owner-discord-settings-grid label { color:var(--ui-muted); font-size:11px; }
.role-badge.admin,.role-badge.website_owner { color:var(--ui-accent-text); background:var(--ui-soft); }
.role-badge.employee,.stats-time-card,.personal-stat { background:var(--ui-raised); color:var(--ui-muted); border-color:var(--ui-line); }
.personal-stat.purple strong,.recent-sale strong,.overview-activity-row b { color:var(--ui-accent-text); }
.application-profile-link,.commission-value,.correction-status,.profile-history-row b,.recent-order-total,.admin-menu-row .price,.weekly-report-row b { color:var(--ui-accent-text); }
.application-actions .accept { color:var(--ui-success-text); }
.recent-orders-header { background:var(--ui-field); color:var(--ui-muted); font-size:10px; }
.owner-summary article,.team-stats article,.overview-metrics article { border:1px solid var(--ui-line); border-left:2px solid var(--shop-accent); border-radius:var(--ui-radius); background:linear-gradient(140deg,var(--ui-raised),var(--ui-surface)); box-shadow:none; }
.owner-summary article:before,.team-stats article:before { display:none; }
.owner-summary strong,.team-stats strong,.overview-metrics strong { color:var(--ui-highlight); font-variant-numeric:tabular-nums; }
.overview-content { padding:0 0 24px; }
.overview-metrics { gap:10px; }
.overview-metrics article { min-height:116px; padding:16px; }
.overview-metrics article small,.overview-metrics article span { color:var(--ui-muted); }
.overview-metrics article:first-child strong,.overview-metrics article:last-child strong { color:var(--ui-accent-text); }
.overview-lower { gap:var(--ui-space); }
.staff-card { padding:var(--ui-space); }
.staff-card.is-clocked-in { border-color:rgba(94,225,171,.42); box-shadow:inset 2px 0 rgba(94,225,171,.7); }
.staff-card.is-clocked-in .staff-avatar { box-shadow:0 0 0 2px rgba(94,225,171,.22); }
.staff-clock-status { border-color:var(--ui-line); background:var(--ui-field); }
.owner-shop-meta { flex-wrap:wrap; }
.owner-shop-meta span { background:var(--ui-raised); }
.shop-logo,.avatar { border-color:var(--ui-line); background:var(--ui-soft); color:var(--ui-accent-text); }
.mechanic-services,.mechanic-service-card { border-color:var(--ui-line); border-radius:var(--ui-radius); background:var(--ui-surface); }
.mechanic-service-card { background:var(--ui-raised); }
.mechanic-service-title { border-bottom-color:var(--ui-line); }
.mechanic-service-title.repair > span { background:var(--ui-soft); color:var(--ui-accent-text); }
.mechanic-service-card label,.mechanic-service-card small,.mechanic-services-head > small { color:var(--ui-muted); }
.free-repair-button { border-color:#327b54; background:color-mix(in srgb,#53b47b 11%,var(--ui-surface)); color:color-mix(in srgb,#148046 62%,var(--shop-surface-ink,var(--shop-text,#fff))); }
.modal { border-color:var(--ui-line); border-radius:14px; background:var(--ui-surface); box-shadow:0 24px 80px rgba(0,0,0,.5); animation:ui-dialog-in var(--ui-motion) var(--ui-ease); }
.modal-scrim { background:rgba(0,0,0,.72); backdrop-filter:blur(4px); }
.modal-footer { border-top-color:var(--ui-line); background:var(--ui-surface); }
.modal-head p,.close-modal { color:var(--ui-muted); }
.modal-feedback { padding:10px 12px; border:1px solid color-mix(in srgb,#f87171 40%,var(--ui-line)); border-radius:8px; background:color-mix(in srgb,#f87171 8%,var(--ui-surface)); color:color-mix(in srgb,#f87171 42%,var(--ui-highlight)); font-size:12px; line-height:1.5; }
.close-modal { min-width:36px; min-height:36px; }
.toast { border-color:var(--shop-accent); border-radius:10px; background:var(--ui-raised); color:var(--ui-highlight); font-size:12px; box-shadow:0 14px 36px rgba(0,0,0,.36); animation:ui-toast-in var(--ui-motion) var(--ui-ease); }
.toast.error { border-color:#f87171; }
.toast:not(.error):before { content:"✓"; display:inline-grid; place-items:center; width:20px; height:20px; margin-right:8px; border-radius:50%; background:var(--ui-soft); color:var(--ui-accent-text); }
.empty-state,.owner-empty { min-height:200px; border-color:var(--ui-line); border-radius:var(--ui-radius); background:var(--ui-field); }
.empty-state h2 { color:var(--ui-highlight); }
.empty-state p,.empty-list,.owner-empty { color:var(--ui-muted); font-size:12px; }
.empty-list { line-height:1.55; padding:24px 18px; }
.skeleton-card { min-height:var(--ui-card-height); border:1px solid var(--ui-line); border-radius:var(--ui-radius); background:linear-gradient(100deg,var(--ui-raised) 20%,var(--ui-soft) 40%,var(--ui-raised) 60%); background-size:200% 100%; animation:skeleton-shimmer 1.6s ease-in-out infinite; }
@keyframes skeleton-shimmer { to { background-position-x:-200%; } }
.checkout-feedback { margin:9px 0 0; padding:8px 10px; border:1px solid var(--ui-line); border-radius:7px; background:var(--ui-field); color:var(--ui-muted); font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
.checkout-feedback[data-kind="error"] { border-color:color-mix(in srgb,#f87171 45%,var(--ui-line)); color:var(--ui-error-text); }
.checkout-feedback[data-kind="success"] { border-color:#397854; color:var(--ui-success-text); }
.checkout-button[aria-busy="true"] { cursor:progress; }
.checkout-button[aria-busy="true"]:before { content:""; display:inline-block; width:13px; height:13px; margin-right:8px; vertical-align:-2px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:ui-spin 650ms linear infinite; }

/* Desktop: the menu and checkout remain together with a measured product grid. */
@media (min-width:981px) {
  .app-shell { width:100%; max-width:none; min-height:100dvh; padding:0; display:grid; grid-template-columns:206px minmax(0,1fr); }
  .sidebar.app-header { position:sticky; top:0; left:0; width:206px; height:100dvh; min-height:0; max-height:100dvh; padding:18px 12px 12px; display:flex; flex-direction:column; align-items:stretch; gap:0; border:0; border-right:1px solid var(--ui-line); border-radius:0; background:linear-gradient(165deg,var(--ui-raised),var(--ui-surface) 78%); box-shadow:none; backdrop-filter:none; }
  .sidebar.app-header:before { content:""; position:absolute; inset:0 auto 0 0; width:2px; background:linear-gradient(180deg,var(--shop-accent),transparent 46%); opacity:.8; }
  .sidebar-brand { min-width:0; min-height:48px; margin:0 3px 16px; padding:0; gap:10px; }
  .brand-logo { width:38px; height:38px; border:1px solid var(--ui-line); border-radius:10px; box-shadow:none; }
  .brand-lockup { display:grid; gap:2px; }
  .brand-lockup strong { font-size:13px; letter-spacing:-.035em; }
  .brand-lockup small { color:var(--ui-muted); font-size:10px; }
  .shop-switcher { flex:0 0 auto; min-height:54px; padding:8px; border:1px solid var(--ui-line); border-radius:9px; background:var(--ui-raised); }
  .shop-switcher-label small { color:var(--ui-muted); font-size:9px; }
  .shop-switcher strong { font-size:12px; }
  .shop-popover { top:138px; left:12px; right:12px; width:auto; border-color:var(--ui-line); border-radius:10px; background:var(--ui-surface); }
  .side-nav { min-width:0; min-height:0; margin:17px 0 0; padding:13px 0 6px; display:flex; flex:1 1 auto; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--ui-line) transparent; border-top:1px solid var(--ui-line); }
  .side-nav:before { content:"WORKSPACE"; padding:0 11px 7px; color:var(--ui-faint); font-size:9px; font-weight:800; letter-spacing:.14em; }
  .nav-link { position:relative; flex:0 0 auto; min-height:var(--ui-control); width:100%; padding:8px 10px; justify-content:flex-start; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--ui-muted); font-size:12px; }
  .nav-link:before { content:""; width:5px; height:5px; margin-right:5px; flex:0 0 auto; border:1px solid currentColor; border-radius:2px; transform:rotate(45deg); opacity:.7; }
  .nav-link.active { border-color:var(--ui-line); background:var(--ui-soft); color:var(--ui-highlight); box-shadow:inset 2px 0 var(--shop-accent); }
  .nav-link.active:before { background:var(--shop-accent); border-color:var(--shop-accent); opacity:1; }
  .sidebar-bottom { min-width:0; margin:0; padding:10px 0 0; display:grid; grid-template-columns:1fr; justify-content:stretch; gap:6px; border-top:1px solid var(--ui-line); }
  .sidebar-bottom > * { min-width:0; }
  .sidebar-bottom .quiet-button { display:flex; align-items:center; }
  .sidebar-bottom .clock-menu { position:relative; }
  .sidebar-bottom .quiet-button,.sidebar-bottom .stats-button,.sidebar-bottom .clock-button { width:100%; min-height:34px; padding:6px 9px; justify-content:center; text-align:center; border:1px solid var(--ui-line); border-radius:7px; background:var(--ui-surface); color:var(--ui-highlight); font-size:11px; }
  .sidebar-bottom .clock-button { border-color:color-mix(in srgb,var(--shop-accent) 40%,var(--ui-line)); background:var(--ui-soft); }
  .sidebar-bottom .clock-button.clocked-in { color:#a4e6be; border-color:#397854; background:color-mix(in srgb,#5ee1ab 9%,var(--ui-surface)); }
  .clock-dropdown { top:auto; bottom:calc(100% + 5px); left:0; right:0; z-index:35; width:100%; border-color:var(--ui-line); background:var(--ui-surface); }
  .clock-dropdown::before { top:auto; bottom:-8px; }
  .clock-dropdown button { min-height:36px; color:var(--ui-highlight); }
  .account-chip { min-height:43px; margin-top:2px; border:1px solid var(--ui-line); border-radius:8px; background:var(--ui-surface); }
  .account-chip .profile-link { min-width:0; flex:1; }
  .account-chip .top-avatar { width:30px; height:30px; }
  .icon-button { display:none; }
  .main-content { padding:16px 18px 28px; }
  html[data-density="comfortable"] .main-content { padding:20px 24px 32px; }
  .portal-view { min-height:calc(100dvh - 44px); }
  .pos-layout { min-height:calc(100dvh - 32px); grid-template-columns:minmax(0,1fr) clamp(300px,25vw,348px); gap:var(--ui-space); }
  .catalog-panel { padding:var(--ui-space) 16px 22px; }
  .cart-panel { position:sticky; top:16px; height:calc(100dvh - 32px); min-height:0; max-height:none; overflow:hidden; }
  html[data-density="comfortable"] .cart-panel { top:20px; height:calc(100dvh - 40px); }
  .menu-grid,.category-item-grid { grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:9px; }
  html[data-density="comfortable"] .menu-grid,html[data-density="comfortable"] .category-item-grid { grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:12px; }
}
@media (min-width:761px) and (max-width:980px) {
  .pos-layout { grid-template-columns:minmax(0,1fr) 300px; gap:12px; min-height:calc(100dvh - 95px); }
  .catalog-panel { padding:14px; }
  .cart-panel { position:sticky; top:80px; height:calc(100dvh - 94px); min-height:0; max-height:none; }
  .menu-grid,.category-item-grid { grid-template-columns:repeat(auto-fill,minmax(154px,1fr)); gap:8px; }
}
.catalog-tools { gap:8px; margin-bottom:11px; }
.search-box { height:calc(var(--ui-control) + 4px); border-color:var(--ui-line); border-radius:8px; background:var(--ui-field); color:var(--ui-muted); transition:border-color var(--ui-fast),box-shadow var(--ui-fast); }
.search-box input { color:var(--ui-highlight); font-size:12px; }
.search-box:focus-within { border-color:var(--shop-accent); box-shadow:0 0 0 3px var(--ui-glow); }
.category-tabs { margin:0 0 12px; padding:0 0 10px; display:flex; flex-wrap:nowrap; gap:5px; border:0; border-bottom:1px solid var(--ui-line); border-radius:0; background:transparent; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--ui-line) transparent; }
.category-tab { min-height:var(--ui-control); padding:7px 10px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--ui-muted); font-size:11px; box-shadow:none; }
.category-tab.active { border-color:var(--ui-line); background:var(--ui-soft); color:var(--ui-highlight); box-shadow:inset 0 -2px var(--shop-accent); }
.category-tab small { background:var(--ui-raised); color:var(--ui-muted); }
.catalog-heading { padding:2px 1px 14px; gap:12px; align-items:center; }
.catalog-heading h1 { font-size:24px; }
.daily-metric { min-width:105px; padding:6px 10px; border:0; border-left:2px solid var(--shop-accent); border-radius:0; background:var(--ui-raised); }
.daily-metric small,.daily-metric span { color:var(--ui-muted); font-size:10px; }
.daily-metric strong { color:var(--ui-highlight); font-size:16px; font-variant-numeric:tabular-nums; }
.menu-card { position:relative; min-height:var(--ui-card-height); padding:12px; border:1px solid var(--ui-line); border-radius:9px; background:linear-gradient(145deg,var(--ui-raised),var(--ui-surface)); box-shadow:none; transition:background var(--ui-fast),border-color var(--ui-fast),transform var(--ui-fast) var(--ui-ease); }
.menu-card:before { content:""; position:absolute; top:0; left:12px; right:auto; bottom:auto; width:30px; height:2px; transform:none; background:var(--shop-accent); opacity:.7; transition:width var(--ui-motion) var(--ui-ease); }
.menu-card strong { max-width:none; color:var(--ui-highlight); font-size:var(--ui-item-font); line-height:1.35; }
.menu-card-category { color:var(--ui-accent-text); font-size:10px; }
.menu-description { margin-top:5px; color:var(--ui-muted); font-size:11px; line-height:1.45; }
.menu-card-footer { padding-top:8px; border-top-color:var(--ui-line); }
.menu-card-footer > small { color:var(--ui-faint); font-size:10px; }
.menu-card .menu-price { min-width:0; padding:3px 0; border:0; border-radius:0; background:transparent; color:var(--ui-highlight); font-size:17px; font-weight:800; text-align:right; font-variant-numeric:tabular-nums; }
.menu-category-section + .menu-category-section { margin-top:20px; }
.menu-category-heading { border-bottom-color:var(--ui-line); }
.menu-category-heading h2 { font-size:16px; }
.menu-category-heading span { color:var(--ui-muted); font-size:11px; }
.cart-top { flex:0 0 auto; padding:14px; background:var(--ui-raised); border-bottom-color:var(--ui-line); }
.cart-top h2 { font-size:16px; }
.cart-top h2 span { color:var(--ui-muted); font-size:11px; }
.cart-items { flex:1 1 auto; min-height:0; padding:10px 14px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.empty-cart { min-height:100px; color:var(--ui-muted); }
.empty-cart:before { content:"+"; width:34px; height:34px; display:grid; place-items:center; border:1px dashed var(--ui-line); border-radius:9px; background:var(--ui-soft); color:var(--ui-accent-text); font-size:22px; }
.empty-cart p { color:var(--ui-highlight); font-size:13px; }
.empty-cart small { max-width:25ch; color:var(--ui-muted); font-size:11px; line-height:1.5; }
.cart-line { padding:11px 0; border-bottom-color:var(--ui-line); }
.cart-line strong { font-size:12px; }
.cart-line > span { color:var(--ui-highlight); font-size:12px; font-variant-numeric:tabular-nums; }
.quantity-control { gap:6px; }
.quantity-control button { width:30px; height:30px; border:1px solid var(--ui-line); border-radius:6px; background:var(--ui-raised); color:var(--ui-highlight); font-size:17px; }
.quantity-control input { width:56px; height:32px; border-color:var(--ui-line); background:var(--ui-field); color:var(--ui-highlight); font-size:12px; }
.quantity-control .remove-line { color:#ffb2b2 !important; }
.cart-footer { flex:0 1 auto; min-height:0; max-height:62%; padding:0; display:flex; flex-direction:column; overflow:hidden; border-top:1px solid var(--ui-line); background:var(--ui-surface); }
.cart-summary { flex:0 1 auto; min-height:0; overflow-y:auto; padding:9px 14px 10px; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.cart-submit-area { flex:0 0 auto; padding:9px 14px 14px; border-top:1px solid var(--ui-line); background:var(--ui-surface); }
.invoice-copy-row { gap:10px; padding:9px 0 11px; border-bottom-color:var(--ui-line); }
.invoice-copy-row strong { color:var(--ui-highlight); font-size:12px; }
.invoice-copy-row small { color:var(--ui-muted); font-size:11px; }
.invoice-copy-row button { min-height:34px; border-color:var(--ui-line); border-radius:7px; background:var(--ui-soft); color:var(--ui-accent-text); font-size:10px; }
.discount-row { min-height:48px; padding:8px 0; border-bottom-color:var(--ui-line); color:var(--ui-muted); font-size:12px; }
.total-row { padding:9px 0 0; color:var(--ui-muted); font-size:12px; }
.total-row strong { color:var(--ui-highlight); font-variant-numeric:tabular-nums; }
.grand-total { margin:0; padding:0; border:0; color:var(--ui-highlight); font-size:16px; }
.grand-total strong { color:var(--ui-highlight); font-size:22px; }
.checkout-button { margin-top:10px; min-height:44px; padding:11px; }

/* Tablet frame and phone controls retain generous touch targets. */
@media (max-width:980px) {
  .app-shell { display:block; max-width:none; padding:0 12px 16px; }
  .sidebar.app-header,.sidebar.app-header.open { position:sticky; top:0; width:auto; height:auto; margin:0 -12px; padding:8px 12px; display:grid; grid-template-columns:40px minmax(0,1fr) 44px; gap:9px; border:0; border-bottom:1px solid var(--ui-line); border-radius:0; background:var(--ui-surface); box-shadow:0 6px 20px rgba(0,0,0,.14); transform:none; }
  .sidebar-brand { min-width:0; padding:0; }
  .brand-logo { width:38px; height:38px; border:1px solid var(--ui-line); border-radius:10px; }
  .brand-lockup { display:none; }
  .shop-switcher { min-width:0; min-height:44px; border-color:var(--ui-line); border-radius:9px; background:var(--ui-raised); }
  .shop-switcher strong { font-size:12px; }
  .shop-switcher-label small { color:var(--ui-muted); }
  .shop-popover { top:62px; left:12px; right:12px; width:auto; border-color:var(--ui-line); background:var(--ui-surface); }
  .icon-button { display:block; width:44px; height:44px; grid-column:3; grid-row:1; border:1px solid var(--ui-line); border-radius:8px; background:var(--ui-raised); }
  .side-nav { display:none; grid-column:1/-1; padding:10px 0 2px; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
  .sidebar.open .side-nav { display:grid; }
  .nav-link { min-width:0; min-height:44px; padding:8px; justify-content:center; border:1px solid transparent; border-radius:8px; background:var(--ui-raised); color:var(--ui-muted); font-size:11px; text-align:center; white-space:normal; }
  .nav-link.active { border-color:var(--ui-line); background:var(--ui-soft); color:var(--ui-highlight); box-shadow:inset 0 -2px var(--shop-accent); }
  .sidebar-bottom { grid-column:1/-1; display:none; flex-wrap:wrap; justify-content:center; margin-top:0; }
  .sidebar.open .sidebar-bottom { display:flex; }
  .sidebar-bottom .quiet-button,.sidebar-bottom .stats-button,.sidebar-bottom .clock-button { min-height:44px; border-color:var(--ui-line); background:var(--ui-raised); color:var(--ui-highlight); font-size:11px; }
  .sidebar-bottom .clock-button.clocked-in { color:#a4e6be; background:color-mix(in srgb,#5ee1ab 9%,var(--ui-surface)); }
  .clock-dropdown { background:var(--ui-surface); border-color:var(--ui-line); }
  .clock-dropdown button { min-height:44px; color:var(--ui-highlight); }
  .account-chip { border-color:var(--ui-line); background:var(--ui-surface); }
  .main-content { padding:14px 0 20px; }
}
@media (max-width:760px) {
  html { scroll-padding-top:76px; }
  .app-shell { padding:0 10px calc(94px + env(safe-area-inset-bottom)); }
  .sidebar.app-header,.sidebar.app-header.open { margin:0 -10px; padding:calc(7px + env(safe-area-inset-top)) 10px 7px; }
  .sidebar.app-header.open { max-height:calc(var(--visual-viewport-height,100dvh) - 8px); overflow-y:auto; }
  .side-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sidebar.open .sidebar-bottom { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .sidebar-bottom .account-chip { grid-column:1/-1; }
  .shop-popover { position:fixed; top:calc(62px + env(safe-area-inset-top)); max-height:55dvh; overflow-y:auto; }
  .main-content { padding:10px 0 20px; }
  .page-header { padding:10px 3px 16px; align-items:stretch; flex-direction:column; gap:12px; }
  .page-header h1 { font-size:25px; }
  .page-header > div > p:last-child { font-size:12px; }
  .panel-heading { padding:14px; }
  .page-actions button,.page-header > .primary-button,.secondary-button,.danger-button,.row-action,.application-actions .row-action { min-height:44px; }
  .panel-subtitle { font-size:11px; }
  .catalog-panel { padding:13px 12px 110px; border:1px solid var(--ui-line); border-radius:var(--ui-radius); }
  .search-box { height:46px; }
  .search-box input { font-size:16px; }
  .catalog-tools .primary-small { min-height:46px; }
  .category-tabs { margin:0 0 12px; padding:0 0 10px; gap:6px; }
  .category-tab { min-height:44px; padding:8px 11px; font-size:11px; }
  .catalog-heading { padding:3px 1px 14px; }
  .catalog-heading h1 { font-size:23px; }
  .daily-metric { min-width:90px; padding:5px 8px; }
  .daily-metric strong { font-size:15px; }
  .menu-grid,.category-item-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .menu-card { min-height:128px; padding:12px; }
  .menu-card strong { font-size:13px; }
  .menu-description { font-size:11px; line-height:1.45; }
  .menu-card .menu-price { font-size:16px; }
  .menu-card-footer { gap:6px; flex-wrap:wrap; }
  .menu-card-footer > small { font-size:10px; }
  .mechanic-services { padding:12px; }
  .mechanic-service-card { padding:13px; }
  .mechanic-add-button,.free-repair-button { min-height:46px; }
  .mobile-quick-nav { z-index:39; left:10px; right:10px; bottom:calc(6px + env(safe-area-inset-bottom)); min-height:64px; border-color:var(--ui-line); border-radius:12px; background:var(--ui-surface); backdrop-filter:none; box-shadow:0 7px 24px rgba(0,0,0,.28); }
  .mobile-quick-nav button { min-height:52px; border-radius:8px; color:var(--ui-muted); font-size:11px; }
  .mobile-quick-nav button.active { background:var(--ui-soft); color:var(--ui-highlight); box-shadow:inset 0 2px var(--shop-accent); }
  .mobile-cart-toggle { z-index:40; left:12px; right:12px; bottom:calc(82px + env(safe-area-inset-bottom)); min-height:56px; border-color:color-mix(in srgb,var(--shop-accent) 55%,var(--ui-line)); border-radius:11px; background:var(--shop-button); color:var(--shop-button-ink,#fff); box-shadow:0 8px 26px rgba(0,0,0,.25); }
  .mobile-cart-toggle small { color:inherit; opacity:.85; font-size:9px; }
  .mobile-cart-backdrop { z-index:60; }
  .cart-panel { z-index:61; left:6px; right:6px; bottom:var(--visual-viewport-bottom,0px); height:min(88dvh,calc(var(--visual-viewport-height,100dvh) - 8px),760px); min-height:0; max-height:calc(var(--visual-viewport-height,100dvh) - 8px); border:1px solid var(--ui-line); border-radius:17px 17px 0 0; background:var(--ui-surface); box-shadow:0 -18px 60px rgba(0,0,0,.42); }
  .cart-top { padding:10px 14px; gap:10px; }
  .cart-top h2 { font-size:17px; }
  .cart-top .eyebrow { margin-bottom:4px; }
  .cart-top .text-button { min-width:44px; min-height:44px; }
  .mobile-cart-close { width:44px; height:44px; border-color:var(--ui-line); border-radius:9px; background:var(--ui-surface); color:var(--ui-highlight); }
  .cart-items { min-height:0; padding:6px 14px; flex:1 1 auto; overflow-y:auto; }
  .empty-cart { min-height:80px; }
  .cart-line { padding:10px 0; }
  .cart-line strong { font-size:13px; }
  .quantity-control { gap:8px; }
  .quantity-control button { width:44px; height:44px; }
  .quantity-control input { width:64px; height:44px; font-size:16px; }
  .cart-footer { flex:0 0 auto; max-height:none; padding:0; overflow:hidden; }
  .cart-summary { max-height:min(27dvh,calc(var(--visual-viewport-height,100dvh) * .26)); padding:4px 14px 10px; }
  .cart-submit-area { padding:10px 14px calc(12px + env(safe-area-inset-bottom)); }
  .invoice-copy-row { padding:7px 0 9px; }
  .invoice-copy-row button { min-height:44px; font-size:11px; }
  .discount-row { min-height:52px; }
  .discount-picker { min-height:44px; font-size:12px; }
  .grand-total { font-size:17px; }
  .grand-total strong { font-size:23px; }
  .checkout-button { min-height:48px; font-size:13px; }
  .checkout-feedback { margin-top:7px; padding:6px 9px; font-size:11px; }
  body.mobile-cart-open .mobile-quick-nav,body.mobile-cart-open .mobile-cart-toggle { display:none; }
  body.mobile-cart-open .portal-view.active { animation:none; transform:none; }
  body.mobile-keyboard-open .cart-top { padding-top:6px; padding-bottom:6px; }
  body.mobile-keyboard-open .cart-top .eyebrow,body.mobile-keyboard-open .invoice-copy-row small { display:none; }
  body.mobile-keyboard-open .cart-submit-area { padding-bottom:8px; }
  .setting-row { min-height:76px; }
  .form-field input,.form-field select,.form-field textarea,.mechanic-service-card input,.mechanic-settings-form input,.free-repairs-form input,.ingredient-calculator-controls select,.ingredient-calculator-controls input,.discord-settings-grid select,.owner-discord-settings-grid select,.weekly-schedule-form select,.weekly-schedule-form input[type="time"],.setting-row select,.setting-row input[type="number"],.recipe-component-row input { min-height:44px; font-size:16px; }
  .modal { max-height:calc(var(--visual-viewport-height,100dvh) - 12px); border-radius:17px 17px 0 0; padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  .close-modal { width:44px; height:44px; border-color:var(--ui-line); background:var(--ui-raised); }
  .toast-root { z-index:75; bottom:calc(150px + env(safe-area-inset-bottom)); }
  body.mobile-cart-open .toast-root { bottom:calc(128px + var(--visual-viewport-bottom,0px) + env(safe-area-inset-bottom)); }
  .overview-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .overview-metrics article { min-height:112px; padding:13px; }
  .overview-metrics strong { font-size:21px; }
  .theme-presets { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:359px) {
  .menu-grid,.category-item-grid { grid-template-columns:1fr; }
  .menu-card { min-height:116px; }
  .invoice-copy-row { flex-wrap:wrap; }
  .invoice-copy-row button { width:100%; }
}

/* Authentication and availability screens share the brand and readable state language. */
.login-body,.login-shell { background:var(--ui-ink); }
.login-shell { grid-template-columns:minmax(0,1.08fr) minmax(390px,.92fr); }
.login-body .brand-panel { min-height:100dvh; padding:clamp(28px,4vw,56px) clamp(32px,5.5vw,88px); border-right:1px solid var(--ui-line); background:radial-gradient(circle at 18% 52%,var(--ui-glow),transparent 48%),linear-gradient(150deg,var(--ui-surface),var(--ui-ink) 74%); }
.login-body .brand-panel:after { display:none; }
.login-body .wordmark { position:relative; z-index:1; align-items:center; gap:14px; font-size:17px; letter-spacing:-.035em; }
.login-body .wordmark small { color:var(--ui-muted); font-size:10px; font-weight:800; letter-spacing:.14em; }
.login-body .login-logo { width:50px; height:50px; border:1px solid var(--ui-line); border-radius:13px; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.login-brand-main { width:100%; margin:auto 0; padding:34px 0; }
.login-hero-mark { position:relative; z-index:1; width:180px; height:180px; display:grid; place-items:center; margin:0 0 36px; }
.login-hero-mark:before { content:""; position:absolute; inset:-45px; border-radius:50%; background:radial-gradient(circle,var(--ui-glow),transparent 68%); pointer-events:none; }
.login-hero-mark img { position:relative; display:block; width:168px; height:168px; object-fit:cover; border:1px solid var(--ui-line); border-radius:33px; box-shadow:0 26px 75px rgba(0,0,0,.36); }
.login-body .brand-copy { max-width:590px; margin:0; padding:0; }
.login-overline { margin:0 0 14px !important; color:var(--ui-accent-text) !important; font-size:10px !important; font-weight:800; letter-spacing:.16em; line-height:1.4 !important; }
.login-body .brand-copy h1 { max-width:570px; margin:0 0 17px; font-size:clamp(38px,3.6vw,58px); line-height:1.08; letter-spacing:-.055em; }
.login-body .brand-copy h1 em { color:var(--ui-accent-text); background:none; animation:none; }
.login-body .brand-copy > p:last-of-type { max-width:480px; margin:0; color:var(--ui-muted); font-size:14px; line-height:1.75; }
.login-body .brand-footnote { margin-top:0; color:var(--ui-faint); font-size:10px; font-weight:800; letter-spacing:.16em; }
.login-body .brand-footnote span { padding:0 9px; color:var(--ui-accent-text); }
.login-body .login-card-wrap { min-height:100dvh; padding:38px; background:radial-gradient(circle at 55% 44%,var(--ui-glow),transparent 43%),var(--ui-ink); }
.login-body .login-card { width:min(100%,440px); padding:clamp(28px,3vw,38px); border:1px solid var(--ui-line); border-radius:20px; background:linear-gradient(155deg,var(--ui-raised),var(--ui-surface)); box-shadow:0 35px 90px rgba(0,0,0,.28); animation:ui-dialog-in 300ms var(--ui-ease); }
.login-body .login-card:before { left:38px; width:66px; height:3px; background:var(--shop-accent); box-shadow:none; }
.login-body .login-kicker { margin-bottom:15px; color:var(--ui-accent-text); font-size:10px; letter-spacing:.16em; }
.login-body .login-card h2 { margin:0 0 12px; color:var(--ui-highlight); font-size:clamp(29px,3vw,36px); letter-spacing:-.05em; }
.login-body .login-card .muted { max-width:350px; margin:0 0 29px; color:var(--ui-muted); font-size:14px; line-height:1.7; }
.login-body .discord-button { min-height:54px; border:1px solid rgba(255,255,255,.13); border-radius:11px; background:#5865f2; color:#fff; box-shadow:none; font-size:14px; }
.login-body .login-assurance { display:grid; justify-content:start; gap:10px; margin-top:24px; color:var(--ui-muted); font-size:12px; font-weight:650; }
.login-body .login-assurance span { display:flex; align-items:center; gap:9px; }
.login-body .login-assurance span:before,.login-body .login-assurance span + span:before { position:static; content:"✓"; display:grid; place-items:center; width:18px; height:18px; flex:0 0 auto; border:1px solid var(--ui-line); border-radius:50%; background:var(--ui-soft); color:var(--ui-accent-text); font-size:11px; line-height:1; }
.login-body .fine-print { margin:22px 0 0; padding-top:17px; border-top:1px solid var(--ui-line); color:var(--ui-faint); text-align:left; font-size:11px; }
.public-state-page { min-height:100dvh; padding:24px; background:radial-gradient(ellipse at 50% 0,var(--ui-glow),transparent 55%),var(--ui-ink); color:var(--ui-highlight); }
.public-state-card,.maintenance-card,#startup-error > div { border:1px solid var(--ui-line); border-radius:18px; background:var(--ui-surface); color:var(--ui-highlight); box-shadow:0 24px 70px rgba(0,0,0,.24); }
.public-state-status { border-color:var(--ui-line); background:var(--ui-field); color:var(--ui-muted); font-size:12px; }
.public-state-description { color:var(--ui-muted); font-size:14px; line-height:1.65; }
#startup-error img { display:block; width:72px; height:72px; object-fit:cover; margin:0 auto 20px; border:1px solid var(--ui-line); border-radius:17px; }
#startup-error p { color:var(--ui-muted); }
#startup-error .primary-button { min-height:44px; margin-top:22px; padding:10px 18px; }
@media (max-width:920px) {
  .login-shell { display:block; }
  .login-body .brand-panel { display:none; }
  .login-body .login-card-wrap { padding:32px 20px; }
  .login-body .mobile-wordmark { display:flex; align-items:center; margin-bottom:38px; font-size:18px; }
}
@media (max-width:480px) {
  .login-body .login-card-wrap { padding:calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom)); }
  .login-body .login-card { padding:27px 22px; border-radius:17px; }
  .login-body .mobile-wordmark { margin-bottom:32px; }
  .login-body .login-card h2 { font-size:31px; }
  .public-state-page { padding:16px; }
}

/* Brief action feedback; hover movement only applies to a pointing device. */
@media (hover:hover) and (pointer:fine) {
  .nav-link:hover,.shop-switcher:hover,.clock-dropdown button:hover,.category-tab:hover,.secondary-button:hover,.row-action:hover:not(:disabled),.discount-picker:hover { border-color:color-mix(in srgb,var(--shop-accent) 42%,var(--ui-line)); background:var(--ui-soft); color:var(--ui-highlight); transform:none; }
  .menu-card:hover { transform:translateY(-1px); border-color:var(--shop-accent); background:var(--ui-raised); box-shadow:0 6px 16px rgba(0,0,0,.12); }
  .menu-card:hover:before { width:calc(100% - 24px); }
  .primary-button:not(:disabled):hover,.primary-small:not(:disabled):hover,.checkout-button:not(:disabled):hover,.mechanic-add-button:not(:disabled):hover { transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 5px 16px color-mix(in srgb,var(--shop-button) 20%,transparent); }
  .staff-card:hover,.owner-shop-card:hover,.settings-card:hover { border-color:color-mix(in srgb,var(--shop-accent) 42%,var(--ui-line)); background:var(--ui-surface); transform:none; box-shadow:none; }
}
.menu-card:active,.primary-button:not(:disabled):active,.primary-small:not(:disabled):active,.checkout-button:not(:disabled):active,.mechanic-add-button:not(:disabled):active { transform:scale(.987); }
.menu-card.item-just-added { animation:ui-item-added 300ms var(--ui-ease); }
.menu-card.item-just-added:after { content:"+" attr(data-added-count); position:absolute; top:8px; right:8px; min-width:24px; height:24px; padding:0 5px; display:grid; place-items:center; border:1px solid var(--ui-line); border-radius:6px; background:var(--shop-button); color:var(--shop-button-ink,#fff); font-size:11px; font-weight:800; pointer-events:none; animation:ui-add-badge 560ms var(--ui-ease) both; }
.cart-panel.cart-just-updated { animation:ui-cart-update 420ms ease-out; }
#cart-total.total-just-updated { display:inline-block; animation:ui-total-update 280ms var(--ui-ease); }
.mobile-cart-toggle.cart-just-updated { animation:ui-cart-update 420ms ease-out; }
.cart-panel.sale-complete { animation:ui-sale-success 500ms ease-out; }
.clock-button.clock-updated,.clock-dropdown button.clock-updated { animation:ui-clock-success 420ms ease-out; }
.shop-popover:not(.is-hidden) { animation:ui-dialog-in 160ms var(--ui-ease); }
@keyframes ui-dialog-in { from { opacity:0; transform:translateY(5px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes ui-toast-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes ui-item-added { 45% { transform:scale(.985); border-color:var(--shop-accent); } }
@keyframes ui-add-badge { 0% { opacity:0; transform:translateY(3px); } 20%,75% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(-5px); } }
@keyframes ui-cart-update { 35% { border-color:var(--shop-accent); box-shadow:0 0 0 2px var(--ui-glow); } }
@keyframes ui-total-update { 45% { color:var(--ui-accent-text); transform:scale(1.06); } }
@keyframes ui-sale-success { 35% { border-color:#70dda7; box-shadow:0 0 0 3px rgba(70,206,142,.12); } }
@keyframes ui-clock-success { 35% { box-shadow:0 0 0 3px var(--ui-glow); } }
@keyframes ui-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
html.reduce-motion *,html.reduce-motion *:before,html.reduce-motion *:after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }

/* Optional menu sizes retain the original card styling. Medium follows page spacing. */
html[data-menu-size="small"] { --menu-card-min:154px; --menu-card-height:104px; --menu-title-size:12px; }
html[data-menu-size="large"] { --menu-card-min:228px; --menu-card-height:170px; --menu-title-size:16px; }
html:is([data-menu-size="small"],[data-menu-size="large"]) .menu-card { min-height:var(--menu-card-height); }
html:is([data-menu-size="small"],[data-menu-size="large"]) .menu-card strong { font-size:var(--menu-title-size); }
.application-page-actions { display:flex; align-items:center; justify-content:flex-end; flex:0 0 auto; gap:8px; margin-left:auto; }
.application-page-actions > button { white-space:nowrap; }
.employee-preview-banner { position:sticky; top:12px; z-index:15; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; padding:12px 14px; border:1px solid var(--ui-line); border-radius:9px; background:var(--ui-surface); box-shadow:0 4px 16px rgba(0,0,0,.2); }
.employee-preview-banner strong { color:var(--ui-highlight); font-size:13px; }
.employee-preview-banner small { display:block; margin-top:4px; color:var(--ui-muted); font-size:11px; line-height:1.5; }
.employee-preview-banner button { flex:0 0 auto; white-space:nowrap; }
@media (max-width:980px) { .employee-preview-banner { top:72px; } }
@media (max-width:760px) { .employee-preview-banner { padding:10px; gap:8px; } .employee-preview-banner button { min-height:44px; padding:10px; } }
.category-icon { display:inline-block; margin-right:7px; font-size:14px; vertical-align:middle; }
.category-tab > span { display:inline-flex; align-items:center; }
.connection-status { display:inline-flex; align-items:center; gap:6px; color:var(--ui-muted); font-size:10px; white-space:nowrap; }
.connection-status:before { content:""; width:6px; height:6px; border-radius:50%; background:#dba34f; flex:0 0 auto; }
.connection-status[data-status="connected"]:before { background:#56bd84; }
.connection-status[data-status="offline"]:before { background:#ec7272; }
.setup-results > p { color:var(--ui-muted); font-size:12px; line-height:1.6; margin:0; }
.theme-preview-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.theme-preview-actions { margin:14px 0; }
.setup-results { padding:16px; display:grid; gap:10px; }
.setup-check { display:flex; align-items:flex-start; gap:12px; padding:13px; border:1px solid var(--ui-line); border-radius:10px; background:var(--ui-raised); }
.setup-check > span { display:grid; place-items:center; width:24px; height:24px; flex:0 0 auto; border-radius:50%; background:var(--ui-soft); color:var(--ui-accent-text); font-weight:800; }
.setup-check.issue > span { color:#b35a24; background:#ffdfbf; }
.setup-check strong { font-size:12px; color:var(--ui-highlight); }
.setup-check p,.setup-results > small { color:var(--ui-muted); font-size:11px; line-height:1.6; margin:5px 0 0; }
.decision-template-editor { display:grid; gap:12px; margin-bottom:14px; padding:15px; border:1px solid var(--ui-line); border-radius:12px; background:var(--ui-raised); }
.decision-template-editor .row-action { justify-self:end; }
.decision-templates-modal { width:min(100%,960px); max-height:min(620px,calc(100dvh - 40px)); display:flex; flex-direction:column; overflow:hidden; }
.decision-templates-modal .modal-head { flex-shrink:0; margin-bottom:16px; }
.decision-templates-body { min-height:0; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-gutter:stable; padding-right:6px; }
#decision-template-editors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.decision-templates-modal .decision-template-editor { grid-template-columns:minmax(0,1fr) 120px; gap:10px 12px; margin:0; padding:14px; }
.decision-templates-modal .form-field { min-width:0; margin:0; }
.decision-templates-modal .form-field:has(.template-reason),.decision-templates-modal .decision-template-editor > .row-action { grid-column:1 / -1; }
.decision-templates-modal .template-reason { min-height:84px; max-height:180px; resize:vertical; overflow-y:auto; }
.decision-templates-modal #add-decision-template { margin-top:14px; }
.decision-templates-modal .modal-feedback { flex-shrink:0; }
.decision-templates-modal .modal-footer { flex-shrink:0; position:static; margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--ui-line); flex-direction:row; }
@media (max-width:760px) {
  .decision-templates-modal { max-height:calc(var(--visual-viewport-height,100dvh) - 12px); }
  #decision-template-editors { grid-template-columns:minmax(0,1fr); }
  .decision-templates-modal .modal-head { margin-bottom:12px; }
  .decision-templates-modal .modal-head h2 { font-size:20px; }
  .decision-templates-modal .modal-head p { font-size:11px; }
  .decision-templates-modal .decision-template-editor { grid-template-columns:minmax(0,1fr) 100px; padding:12px; }
  .decision-templates-modal .modal-footer { margin-top:12px; padding-top:12px; }
}
.application-expiry.closed { color:var(--ui-error-text); }
.shop-switch-arriving { animation:shop-arrive-subtle 280ms ease both; }
html[data-motion="full"] body,html[data-motion="full"] .app-shell { transition:background-color 320ms ease,color 320ms ease; }
html[data-motion="full"] .shop-switch-arriving { animation:shop-arrive-full 430ms var(--ui-ease) both; }
html[data-motion="subtle"] .menu-card:hover { transform:none; }
html[data-motion="subtle"] .menu-card.item-just-added { animation:none; }
html[data-motion="subtle"] #cart-total.total-just-updated { animation:none; }
@keyframes shop-arrive-subtle { from { opacity:.45; } to { opacity:1; } }
@keyframes shop-arrive-full { from { opacity:.2; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (min-width:761px) {
  html:is([data-menu-size="small"],[data-menu-size="large"]) .menu-grid,html:is([data-menu-size="small"],[data-menu-size="large"]) .category-item-grid { grid-template-columns:repeat(auto-fill,minmax(var(--menu-card-min),1fr)); }
  html:is([data-menu-size="small"],[data-menu-size="large"]) .menu-grid.is-grouped { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px) {
  .connection-status { position:absolute; top:11px; right:68px; font-size:0; }
  html[data-menu-size="small"] .menu-grid:not(.is-grouped),html[data-menu-size="small"] .category-item-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-menu-size="large"] .menu-grid:not(.is-grouped),html[data-menu-size="large"] .category-item-grid { grid-template-columns:minmax(0,1fr); }
  .application-page-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; margin-left:0; }
  .application-page-actions > button { min-width:0; padding:10px 8px; white-space:normal; }
}
@media (prefers-reduced-motion:reduce) { .shop-switch-arriving { animation:none !important; } }