/* 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;
}

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;
}

/* ---------- 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: the side rail becomes one fixed row of six buttons under
     the top bar - icon over a short label, nothing scrolling sideways. A group
     (Menu, Website, Reports) opens as a panel below the row; each page already
     has its own tabs for the pages inside a group. The row is deliberately
     not a scroll container: iPhone Safari hides a panel that hangs out of one,
     so a tap opened the group but showed nothing. */
  html body .rail,
  html body .rail:hover,
  html body .rail:focus-within {
    width: 100%;
    box-shadow: none;
    transition: none;
    position: relative;
    inset: auto;
    max-height: none;
    overflow: visible;
    padding: 6px 6px;
  }
  html body .rail .nav-groups {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
    overflow: visible;
  }
  html body .rail .nav-groups > li { margin: 0; min-width: 0; }
  html body .rail .nav-groups summary,
  html body .rail .nav-groups .nav-direct {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 54px;
    padding: 6px 2px;
    border-radius: 12px;
    font-size: 0.68rem;
    line-height: 1.1;
    text-align: center;
  }
  html body .rail .nav-groups summary svg,
  html body .rail .nav-groups .nav-direct svg { flex: none; width: 22px; height: 22px; }
  /* The full name stays for screen readers; the short one is what shows. */
  html body .rail .nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html body .rail .nav-short { display: block; white-space: nowrap; }
  html body .rail .nav-caret { display: none; }
  html body .rail .nav-groups details > ul { display: none; }
  html body .rail .nav-groups details[open] > summary {
    background: var(--primary-soft);
    color: var(--primary);
  }
  html body .rail .nav-groups details[open] > ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    z-index: 30;
    top: calc(100% + 2px);
    left: 8px;
    right: 8px;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-solid, #fff);
    box-shadow: 0 14px 30px rgba(27, 36, 52, 0.18);
  }
  html body .rail .nav-groups details[open] > ul .nav-soon { padding: 10px 12px; }
  html body .rail .nav-groups details[open] > ul a {
    padding: 11px 12px;
    font-size: 0.9rem;
    border-radius: 999px;
  }
}

/* ---------- 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; }
}