/* Copyright (c) 2026 PrepLocal. All rights reserved. */
/* The app's finishing layer: every page except the landing page and
   kitchens' own storefronts. Loaded last, after each page's own styles, so
   the shared type and form conventions win without rewriting thirty older
   per-page rules one by one.

   - One modern sans-serif (Plus Jakarta Sans, see theme.css) for text and
     headings alike; headings a touch tighter and heavier.
   - Form labels in sentence case at a readable size, instead of tiny
     spaced-out capitals. Small capitals stay where they label data (table
     headers, stat tiles), which is what they are good at.
   - Checkboxes and radios in the brand colour. */

html body {
  font-family: var(--pl-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html body :is(input, select, textarea, button) {
  font-family: inherit;
}

/* Drop-downs: one chevron in every browser, by day and night, in place of
   each browser's own arrow - the same on every page, whatever else a page
   sets on its selects. The list that opens follows the theme's
   color-scheme (static/theme.js). */
html body select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23677090' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 12px 12px;
}
html body select:not([multiple]):not([size]):disabled { opacity: 0.6; }

html body :is(h1, h2, h3, h4, .page-title) {
  font-family: var(--pl-font-display);
  letter-spacing: -0.02em;
}

html body :is(h1, .page-title) {
  font-weight: 800;
}

/* Form labels: sentence case, full-strength ink. */
html body :is(.settings-field > label, .settings-field > .field-label, .field > label,
              .field-label, .filter-bar label, .search-field > label) {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text, inherit);
}

html body :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--primary, currentColor);
}

/* Sign-in and sign-up headings: the brand gradient without the old blurred
   drop shadow, which smudged under a sans-serif. */
html body h1 {
  text-shadow: none;
}

/* Room at the end of every page for Chef's floating buttons (static/ask-chef.css: fixed, 18px from the
   bottom), so the last field or button scrolls clear of them - on the calendar, Discounts and Automations
   they sat under Chef on a phone (owner's QA, 2026-10-24). A console phone's tab bar adds its own height
   (--pl-bottom-bar, templates/console_base.html). */
html body:has([data-ask-chef]) {
  padding-bottom: calc(84px + var(--pl-bottom-bar, env(safe-area-inset-bottom, 0px)));
}

/* ---------- Phones ---------- */

@media (max-width: 820px) {
  /* Tab and section strips: one swipeable row, centred when it fits,
     instead of wrapping into a tall block of buttons. */
  html body .page-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 999px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  html body .page-tabs::-webkit-scrollbar { display: none; }
  html body .page-tabs a { flex: none; }
  html body .page-tabs.has-more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  html body .page-tabs.has-more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
  html body .page-tabs.has-more-left.has-more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }

  /* Vendor console: on a phone the side rail is More's panel above the tab
     bar, styled with the rail itself (templates/console_base.html). */
}

/* ---------- Touch screens ---------- */

/* No double-tap-to-zoom wait on links and buttons, and no grey flash over
   the whole row on tap - the pressed state below is the feedback. */
html { touch-action: manipulation; }
html body a,
html body button,
html body summary { -webkit-tap-highlight-color: transparent; }

@media (hover: none) {
  /* A phone "hovers" whatever was last tapped and never lets go, so the
     button you left stays lit next to the one you're on. Only the current
     page is highlighted here; a press shows while the finger is down. */
  html body .rail .nav-groups li:not(.is-current) > details:not([open]) > summary:hover,
  html body .rail .nav-groups li:not(.is-current) > .nav-direct:hover {
    background: transparent;
    color: var(--text);
  }
  html body .rail .nav-groups ul a:not(.active):hover {
    background: transparent;
    color: var(--muted);
  }
  html body .topnav a:not(.active):hover {
    background: transparent;
    color: var(--muted);
  }
  html body .page-tabs a:not([aria-current="page"]):not(.is-active):hover {
    background: transparent;
    color: var(--muted);
  }
  html body .rail .nav-groups summary:active,
  html body .rail .nav-groups .nav-direct:active,
  html body .rail .nav-groups ul a:active,
  html body .topnav a:active,
  html body .page-tabs a:active {
    background: var(--primary-soft);
    color: var(--primary);
  }
}

@media (max-width: 820px) {
  /* Blurring the sky behind the bars costs a phone a repaint on every
     scroll frame; the bars are near-opaque anyway. */
  html body .topbar,
  html body .rail { -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* The stars still show at night, just without the twinkle, which kept a
     phone redrawing the whole screen several times a second. */
  html body .pl-stars span:first-child,
  html body .pl-stars span:last-child { animation: none; }
}

/* ---------- Colour and life ----------
   The main action and the current tab carry the brand as a red-to-coral
   gradient with a soft glow; cards sit on a soft shadow; anything you can
   open lifts a little under the pointer, and buttons press in when tapped.
   Colours come from the theme tokens, so day and night mode follow
   along. */
html body :is(.btn-primary, .btn.btn-primary, .page-tabs a[aria-current="page"], .page-tabs a.is-active,
              .tool-nav .bubble.is-active, .topnav a.active) {
  /* Solid brand colour first, the gradient painted over it: a browser too
     old for color-mix() drops only the gradient, never the colour. */
  background-color: var(--pl-primary);
  background-image: linear-gradient(135deg, var(--pl-primary) 0%, var(--pl-primary-hover) 100%);
  border-color: transparent;
  color: var(--pl-on-primary) !important;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--pl-primary) 75%, transparent);
}

html body :is(.btn, button, .bubble, .page-tabs a, .topnav a) {
  transition: transform 140ms ease, box-shadow 160ms ease, background 160ms ease,
              color 140ms ease, border-color 140ms ease;
}

html body .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--pl-primary) 80%, transparent);
}

html body :is(.btn, button):active { transform: translateY(0) scale(0.98); }

html body :is(.card, .detail-card, .fold-card, .chart-card, .summary-tile, .order-row, .tool-card,
              .plan-card, table.order-table) {
  box-shadow: var(--pl-shadow-card);
}

html body :is(a.order-row, a.tool-card, .kitchen-card, .plan-card) {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

html body :is(a.order-row, a.tool-card, .kitchen-card, .plan-card):hover {
  transform: translateY(-2px);
  box-shadow: var(--pl-shadow-card-hover);
}

@media (prefers-reduced-motion: reduce) {
  html body :is(.btn, button, a.order-row, a.tool-card, .kitchen-card, .plan-card) { transition: none; }
  html body :is(.btn-primary, a.order-row, a.tool-card, .kitchen-card, .plan-card):hover,
  html body :is(.btn, button):active { transform: none; }
}

/* ---------- A save keeps your place (static/pl-ui.js) ----------
   The box just saved is lit, the way Full Menu lights the saved row, until
   the next click; the "Saved" note follows you down the page. */
html body :is(details, form, .fold-card, .card).pl-saved {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent), var(--pl-shadow-card);
  scroll-margin-top: 90px;
}

.pl-toasts {
  position: fixed;
  left: 50%;
  bottom: calc(18px + var(--pl-bottom-bar, env(safe-area-inset-bottom, 0px)));
  z-index: 1000;
  display: grid;
  gap: 8px;
  width: min(100% - 32px, 460px);
  transform: translateX(-50%);
  pointer-events: none;
}
.pl-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px 11px 16px;
  border: 1px solid color-mix(in srgb, var(--pl-ok) 40%, transparent);
  border-left: 4px solid var(--pl-ok);
  border-radius: var(--pl-radius-md);
  background: var(--surface-solid);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: var(--pl-shadow-pop);
  pointer-events: auto;
  animation: pl-toast-in 220ms ease-out;
  transition: opacity 380ms ease, transform 380ms ease;
}
.pl-toast.is-error {
  border-color: color-mix(in srgb, var(--pl-danger) 45%, transparent);
  border-left-color: var(--pl-danger);
}
.pl-toast.is-leaving { opacity: 0; transform: translateY(8px); }
.pl-toast span { flex: 1; min-width: 0; }
.pl-toast button {
  flex: none;
  width: 26px;
  height: 26px;
  margin: -3px -2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.pl-toast button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
@keyframes pl-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pl-toast { animation: none; transition: none; } }