/* Shared visual contract for the website, Manager, Cuisine and Livreur.
   Load after page styles. Layout remains owned by each surface.
   Source and extension rules: docs/design-system.md. */
@font-face {
  font-family: OuchyText;
  src: url('/livreur/fonts/order-text-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: OuchyText;
  src: url('/livreur/fonts/order-text-medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: OuchyMove;
  src: url('/livreur/fonts/order-move.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Shrikhand;
  src: url('/assets/Shrikhand-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
:root {
  --ui-font: OuchyText, system-ui, 'Helvetica Neue', Arial, sans-serif;
  --ui-heading: OuchyMove, OuchyText, system-ui, sans-serif;
  --ui-ink: #000;
  --ui-muted: #6b6b6b;
  --ui-surface: #fff;
  --ui-soft: #f3f3f3;
  --ui-hover: #eee;
  --ui-line: #e8e8e8;
  --ui-danger: #b52c19;
  --ui-success: #08733f;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-6: 24px;
  --ui-space-8: 32px;
  --ui-radius-control: 8px;
  --ui-radius-card: 12px;
  --ui-radius-dialog: 16px;
  --ui-control-height: 48px;
  --ui-action: var(--app-brand, var(--accent, var(--brand, #bb101b)));
  --ui-action-text: var(--app-brand-text, var(--ui-action));
  --ui-action-soft: color-mix(in srgb, var(--ui-action) 8%, white);
  --ui-on-action: var(--app-on-brand, #fff);
}
html[data-ui] {
  font-family: var(--ui-font);
  color: var(--ui-ink);
  background: var(--ui-surface);
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}
[data-ui] body {
  font-family: var(--ui-font);
  font-size: 16px;
  color: var(--ui-ink);
  background: var(--ui-surface);
}
[data-ui] :is(button, input, select, textarea) { font-family: var(--ui-font); }
[data-ui] :is(h1, h2, h3) { text-wrap: balance; }
[data-ui] h1 {
  color: var(--ui-ink);
  font-family: var(--ui-heading);
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: normal;
}
[data-ui] h2 { font-family: var(--ui-heading); font-size: 24px; line-height: 32px; font-weight: 700; }
[data-ui] h3 { font-family: var(--ui-font); font-weight: 500; }
[data-ui] :is(.muted, .form-help, .fine, .help) { color: var(--ui-muted); }
[data-ui] :is(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--ui-action);
  outline-offset: 3px;
}
/* Action shape is consistent; compact utility controls keep their own size. */
[data-ui] :is(.primary, .black-button, .checkout-submit) {
  min-height: var(--ui-control-height);
  border-radius: var(--ui-radius-control);
  background: var(--ui-action);
  color: var(--ui-on-action);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  padding: 12px 22px;
  box-shadow: none;
}
[data-ui] :is(.primary, .black-button, .checkout-submit):hover:enabled {
  background: var(--ui-action);
  filter: brightness(.9);
}
[data-ui] .secondary {
  min-height: var(--ui-control-height);
  border-radius: var(--ui-radius-control);
  background: var(--ui-soft);
  color: var(--ui-ink);
  font-weight: 500;
  box-shadow: none;
}
[data-ui] .secondary:hover:enabled { background: var(--ui-hover); }
[data-ui] :is(.pill, .icon-btn, .icon-button) { box-shadow: none; }
[data-ui] :is(.pill, .icon-btn, .icon-button) { background: var(--ui-soft); color: var(--ui-ink); }
[data-ui] .pill.status { background: var(--ui-soft); }
[data-ui] :is(.tabs button.active, .catalog-tabs .selected) {
  color: var(--ui-action-text);
  border-bottom-color: var(--ui-action);
}
[data-ui] :is(.catalog-tabs .selected, .calendar-grid button.selected) { background: var(--ui-action); color: var(--ui-on-action); }
[data-ui] .view-toggle button.active { background: var(--ui-action); color: var(--ui-on-action); box-shadow: none; }
[data-ui] .view-toggle { background: var(--ui-soft); }
[data-ui] .view-toggle button { color: var(--ui-muted); }
[data-ui] .view-toggle button.active { color: var(--ui-on-action); }
[data-ui] .category-link.active { color: var(--ui-action-text); border-bottom-color: var(--ui-action); }
[data-ui] .mobile-cart { background: var(--ui-action); color: var(--ui-on-action); }
[data-ui] .choice input:checked { background: var(--ui-action); border-color: var(--ui-action); }
[data-ui] .checkout-option input:checked+span { border-color: var(--ui-action); }
[data-ui] :is(.payment-method>input, .checkout-cutlery input, .hours-enabled input) { accent-color: var(--ui-action); }
[data-ui] .team-role-options input:checked+span { background: var(--ui-action); color: var(--ui-on-action); }
[data-ui] .zone-toggle input:checked+.zone-toggle-track { background: var(--ui-action); }
[data-ui] .zone-map-key[aria-pressed=true] { background: var(--ui-action-soft); border-color: var(--ui-action); }
[data-ui] .zone-selected { border-color: var(--ui-action); box-shadow: 0 0 0 1px var(--ui-action); }
[data-ui] .delivery-tabs button[aria-selected=true] { color: var(--ui-action-text); border-bottom-color: var(--ui-action); }
/* Search bars, radios, switches and calendar cells retain their anatomy. */
[data-ui] :is(.field input, .field select, .field textarea,
  .checkout-contact input, .checkout-page select, .checkout-page textarea,
  .store-address-input, .dialog input:not([type=checkbox]):not([type=radio]),
  .dialog textarea, .dialog select, .fields input, .recovery-card input, .private-link input,
  [data-ui=profile] input) {
  background: var(--ui-soft);
  color: var(--ui-ink);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-control);
  min-height: var(--ui-control-height);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  padding: 11px 14px;
}
[data-ui] :is(.field input, .fields input, .store-address-input)::placeholder {
  color: var(--ui-muted);
}
[data-ui] :is(input, select, textarea)[aria-invalid=true] {
  border-color: var(--ui-danger);
}
[data-ui] :is(.dialog, .modal:not(.checkout-page)) {
  border-radius: var(--ui-radius-dialog);
}
[data-ui] :is(.dialog-head, .dialog-header) { border-bottom-color: var(--ui-line); }
/* Manager: restore the reference's whitespace and list-based hierarchy. */
[data-ui] :is(.admin-header, .admin-sidebar, .admin-main) { background: var(--ui-surface); }
[data-ui] .admin-main h1 { font-family: var(--ui-heading); }
[data-ui] .admin-main h1 { font-size: 32px; line-height: 40px; }
[data-ui] .admin-main h3 { font-family: var(--ui-heading); font-size: 20px; line-height: 28px; }
[data-ui] #group-form h3 { font-family: var(--ui-heading); font-size: 20px; line-height: 28px; }
[data-ui] .admin-main :is(.panel, .category-panel) {
  border-color: var(--ui-line);
  border-radius: var(--ui-radius-card);
  box-shadow: none;
}
[data-ui] .admin-main .panel h2 { font-size: 24px; line-height: 32px; }
[data-ui] .admin-nav { min-height: 44px; padding: 12px 16px; border-block: 0; font-size: 16px; line-height: 20px; }
[data-ui] .admin-nav { color: #545454; font-weight: 400; }
[data-ui] .admin-nav svg { width: 20px; height: 20px; }
[data-ui] .admin-nav.active {
  color: var(--ui-action-text);
  background: var(--ui-action-soft);
  border-left-color: var(--ui-action);
  font-weight: 500;
}
[data-ui] .admin-nav:hover { background: var(--ui-hover); }
[data-ui] .admin-main :is(th, td) { border-color: var(--ui-line); }
[data-ui] .admin-main th { background: var(--ui-surface); color: var(--ui-ink); font-weight: 500; }
[data-ui] .manager-save-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--ui-muted); }
[data-ui] .manager-save-status[hidden], [data-ui] .manager-save-status button[hidden] { display: none; }
[data-ui] .manager-save-status[data-state=error] { color: var(--ui-danger); }
[data-ui] .manager-save-status button { padding: 8px 12px; border-radius: var(--ui-radius-control); background: var(--ui-soft); font-size: 14px; }
[data-ui] .manager-save-status .autosave-dot { display: none; }
[data-ui] #manager-dialog-save-status { padding: 0 24px 16px; }
/* Operational apps keep their established density and card dimensions. */
[data-ui=kitchen] :is(.order-card, .empty, .choice, .store-card),
[data-ui=driver] :is(.course, .empty) { border-radius: var(--ui-radius-card); }
[data-ui=kitchen] :is(.settings-item, .catalog-item) { border-bottom-color: var(--ui-line); }
[data-ui=kitchen] :is(.settings-item:not(.logout), .hours-card, .order-card, .order-row):hover {
  background: var(--ui-soft);
}
[data-ui=kitchen] .order-card:hover { border-color: var(--ui-line); }
[data-ui=kitchen] .order-card-meta { font-variant-numeric: tabular-nums; }
[data-ui=kitchen] .section-heading { font-size: 20px; line-height: 28px; }
[data-ui=kitchen] :is(.zone-card-title, .zone-map-heading) h3 { font-size: 20px; line-height: 28px; }
[data-ui=kitchen] .rail-link.active { color: var(--ui-action-text); background: var(--ui-action-soft); border-color: var(--ui-action); }
[data-ui=kitchen] .drawer a.active { color: var(--ui-action-text); }
[data-ui=driver] .tabs button.active { color: var(--ui-action-text); border-bottom-color: var(--ui-action); }
[data-ui=driver] .course.selected { border-color: var(--ui-action); background: var(--ui-action-soft); }
[data-ui=driver] .course.selected:hover { background: var(--ui-action-soft); }
[data-ui=driver] .timeline .done { border-color: var(--ui-action); }
[data-ui=driver] .detail-section h3 { font-size: 20px; line-height: 28px; }
[data-ui=storefront] .header { background: var(--ui-surface); border-color: var(--ui-line); }
[data-ui=storefront] .client-account-entry { margin-left: auto; }
[data-ui=storefront] .navigation-account { display: none; }
[data-ui=storefront] :is(.menu-search, .segmented, .promo) { background: var(--ui-soft); }
[data-ui=storefront] .menu-search { border-radius: var(--ui-radius-control); }
[data-ui=storefront] .segmented .selected { color: var(--ui-ink); box-shadow: none; }
[data-ui=storefront] .promo { border-color: var(--ui-line); padding: 24px; }
[data-ui=storefront] .promo small { color: var(--ui-muted); }
[data-ui=storefront] .promo h3 { font-size: 20px; line-height: 28px; }
[data-ui=storefront] .empty { border-radius: var(--ui-radius-card); }
[data-ui=storefront] .empty :is(h2, h3) { color: var(--ui-ink); }
[data-ui=storefront] .empty h3 { font-size: 20px; line-height: 28px; }
[data-ui=storefront] .product:hover { border-color: var(--ui-action); }
[data-ui=storefront] .choice-title h3 { font-size: 20px; line-height: 28px; }
[data-ui=storefront] .checkout-panel { background: var(--ui-surface); border-bottom: 1px solid var(--ui-line); }
[data-ui=storefront] .checkout-page :is(small, .checkout-required-note, .checkout-notice),
[data-ui=storefront] .address-fields :is(small, .address-status) { color: var(--ui-muted); font-size: 14px; line-height: 20px; }
[data-ui=storefront] #address-help { color: var(--ui-muted); font-size: 14px; line-height: 20px; }
[data-ui=storefront] .product-footer-actions .primary { padding-inline: 8px; gap: 8px; white-space: nowrap; }
/* Client additions use the same components as the menu and operational apps. */
[data-ui=tracking] { --ink: var(--ui-ink); --muted: var(--ui-muted); --soft: var(--ui-soft); }
[data-ui=profile] .panel { border-color: var(--ui-line); border-radius: var(--ui-radius-card); }
[data-ui=profile] .profile-header { border-bottom-color: var(--ui-line); }
[data-ui=profile] :is(.intro, .hint, .eyebrow, .signout p) { color: var(--ui-muted); }
[data-ui=profile] :is(.hint, .signout p) { font-size: 14px; line-height: 20px; }
[data-ui=profile] input[readonly] { color: var(--ui-muted); }
[data-ui=profile] .signout { border-top-color: var(--ui-line); }
[data-ui=profile] .links a { font-size: 16px; line-height: 24px; font-weight: 500; }
[data-ui=profile] .brand>span, [data-ui=tracking] .brand>span {
  font-family: Shrikhand, Georgia, serif;
  font-weight: 400;
  color: var(--ui-action);
}
[data-ui=profile] .brand b, [data-ui=tracking] .brand b { font-weight: inherit; }
[data-ui=tracking] :is(.tracking-header, .order-details) { border-color: var(--ui-line); }
[data-ui=tracking] .map-card { border-color: var(--ui-line); border-radius: var(--ui-radius-card); }
[data-ui=tracking] .orders-list>p { line-height: 24px; margin: 16px 0; }
[data-ui=tracking] .orders-list>p a { text-decoration: underline; text-underline-offset: 3px; }
[data-ui=tracking] .customer-order { border: 0; border-bottom: 1px solid var(--ui-line); border-radius: 0; padding: 24px 0; margin: 0; }
[data-ui=tracking] .customer-order p { line-height: 24px; margin: 8px 0; }
[data-ui=tracking] .customer-order small { color: var(--ui-muted); font-size: 14px; line-height: 20px; }
[data-ui=tracking] :is(.recovery-card, .private-link) { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius-card); padding: 24px; }
[data-ui=tracking] :is(.recovery-card, .private-link) label { margin: 16px 0 8px; font-weight: 500; }
[data-ui=tracking] :is(.recovery-card, .private-link) p { line-height: 20px; }
[data-ui=tracking] .recovery-card h2:focus { outline: none; }
[data-ui=tracking] :is(.my-orders, .secure-note) { background: var(--ui-soft); color: var(--ui-muted); }
[data-ui=auth] .header { background: var(--ui-surface); border-color: var(--ui-line); }
[data-ui=auth] :is(.google, .auth-footer, .tabs) { border-color: var(--ui-line); }
[data-ui=auth] .google { min-height: 48px; padding: 12px 16px; font-size: 16px; line-height: 24px; }
[data-ui=auth] .google:hover { background: var(--ui-soft); }
[data-ui=auth] .intro { font-size: 16px; line-height: 24px; color: var(--ui-muted); }
[data-ui=auth] label { font-size: 14px; font-weight: 500; }
[data-ui=auth] :is(.fine, .help, .invitation-help, .auth-footer, .check) { font-size: 14px; line-height: 20px; color: var(--ui-muted); }
[data-ui=auth] :is(.notice, .account-summary, .demo-info, .success-icon) { background: var(--ui-soft); }
[data-ui=auth] :is(.notice, .account-summary) { padding: 16px; font-size: 14px; line-height: 20px; }
[data-ui=auth] .notice { color: var(--ui-muted); }
[data-ui=auth] .progress span { background: var(--ui-line); }
[data-ui=auth] .progress .done { background: var(--ui-action); }
[data-ui=auth] :is(input:not([type=checkbox]):not([type=radio]), select) {
  min-height: var(--ui-control-height);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-control);
  background: var(--ui-soft);
  color: var(--ui-ink);
  font-size: 16px;
}
[data-ui=auth] .separator:before, [data-ui=auth] .separator:after { background: var(--ui-line); }
[data-ui=auth] input.code:not([type=checkbox]):not([type=radio]) { font-size: 26px; line-height: 32px; padding: 7px 14px; font-variant-numeric: tabular-nums; }
[data-ui=auth] :is(.tabs button, .separator, .auth-footer) { color: var(--ui-muted); }
[data-ui=auth] .back { color: var(--ui-muted); }
[data-ui=auth] .tabs button.active { color: var(--ui-action); border-bottom-color: var(--ui-action); }
[data-ui=auth] .flow h2 { font-family: var(--ui-heading); font-size: 28px; line-height: 36px; }
@media (min-width: 761px) {
  [data-ui] .admin-header { height: 64px; }
  [data-ui] .admin-header .brand-logo { width: 44px; height: 40px; }
  [data-ui] .admin-header .brand-wordmark { font-size: 18px; }
  [data-ui] .admin-sidebar { top: 64px; width: 256px; padding: 16px 12px; }
  [data-ui] .admin-main { margin-left: 256px; padding: 96px 36px 48px; }
}
@media (max-width: 760px) {
  [data-ui] h1, [data-ui] .admin-main h1 { font-size: 28px; line-height: 36px; }
  [data-ui] h2, [data-ui] .admin-main .panel h2 { font-size: 20px; line-height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui] { scroll-behavior: auto; }
  [data-ui] *, [data-ui] *:before, [data-ui] *:after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
  }
}

/* The four surfaces share primitives, not a single page template. */
[data-ui=kitchen] h1, [data-ui=driver] h1 { font-size:44px; line-height:52px; }
[data-ui=kitchen] h2, [data-ui=driver] h2 { font-family:var(--ui-font); font-size:20px; line-height:28px; font-weight:500; }
[data-ui=storefront] .store-title h1 { font-size:36px; line-height:44px; }
[data-ui=storefront] .store-aside { background:var(--ui-surface); }
[data-ui=storefront] .category-link:hover { background:var(--ui-soft); }
[data-ui=storefront] :is(.service-bar>.delivery-address, .service-bar>#schedule) { background:var(--ui-soft); }
@media(max-width:760px) {
  [data-ui=driver] .dialog:has(#failure-reason) .dialog-actions { flex-direction: column-reverse; gap: 8px; }
  [data-ui=storefront] .header>#site-menu { display: inline-grid; width: 40px; height: 40px; }
  [data-ui=storefront] .header>.client-account-entry { display: none; }
  [data-ui=storefront] .header>.cart-button { margin-left: auto; }
  [data-ui=storefront] .navigation-account { display: flex; margin-bottom: 16px; }
  [data-ui=storefront] .navigation-account .view-toggle { margin: 0; }
  [data-ui=storefront] .service-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 8px; }
  [data-ui=storefront] .service-bar>.delivery-address { grid-column: 1 / -1; min-height: 48px; font-size: 14px; }
  [data-ui=storefront] .service-bar>.segmented { grid-column: 1; grid-row: 2; margin: 0; }
  [data-ui=storefront] .service-bar>#schedule { display: inline-flex; grid-column: 2; grid-row: 2; justify-self: end; margin: 0; padding: 12px; font-size: 14px; }
  [data-ui=storefront] .service-bar .delivery-pending { grid-column: 1 / -1; max-width: none; font-size: 14px; }
  [data-ui=storefront] .service-bar.pickup>.segmented { grid-row: 1; }
  [data-ui=storefront] .service-bar.pickup>#schedule { grid-row: 1; }
  [data-ui=kitchen] h1, [data-ui=driver] h1 { font-size:32px; line-height:40px; }
  [data-ui=storefront] .store-title h1 { font-size:32px; line-height:40px; }
  [data-ui=storefront] .modal h1,
  [data-ui=profile] h1, [data-ui=tracking] h1 { font-size:32px; line-height:40px; }
  [data-ui=storefront] .menu-content h2 { font-size:24px; line-height:32px; }
}
@media(max-width:380px) {
  [data-ui=storefront] .service-bar { grid-template-columns: minmax(0, 1fr); }
  [data-ui=storefront] .service-bar>#schedule { grid-column: 1; grid-row: 3; justify-self: stretch; }
  [data-ui=storefront] .service-bar.pickup>#schedule { grid-row: 2; }
  [data-ui=storefront] .product-footer-actions { flex-wrap: wrap; gap: 8px; }
  [data-ui=storefront] .product-footer-actions .primary { flex-basis: 100%; }
}