/* ============================================================
   PLATE — RESET + BASE + APP SHELL
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video { display: block; max-width: 100%; }

/* Author `display` rules beat the UA sheet's [hidden] rule, so any
   component styled with display:flex/grid would ignore the hidden
   attribute entirely. Make hidden actually mean hidden. */
[hidden] { display: none !important; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--accent-soft); color: var(--ink); }

/* Scrollbars — thin, quiet, themed */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-full);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Typographic roles ----------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}

/* ============================================================
   ⭐ THE SECTION LABEL  (design system · phase 1)

   This was uppercase 10.5px mono at 0.09em tracking, and it was on every
   screen: NEEDS YOU · MY RESTAURANT · YOUR WEBSITE · RIGHT NOW ·
   PUBLISHING · COVERAGE · ANTI-REPETITION. Twenty-six of them across the
   app. It is the single strongest "internal tool" signal in the product --
   uppercase micro-type is what a monitoring dashboard uses to label a
   metric nobody chose to look at.

   It becomes a quiet sentence in the display serif. Same job, same
   position, same class name -- so nothing has to be rewired -- but it now
   reads as the start of a thought rather than the header of a column.

   ⛔ No uppercase. No letterspacing. No mono. Those three together are the
   look we are leaving behind.
   ============================================================ */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  font-weight: 500;
  line-height: var(--lh-snug);
}

/* Where a label really is a column header for data -- a table, a stat --
   it stays small and quiet, but still never shouts. */
.eyebrow--field {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: normal;
}

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.muted { color: var(--ink-3); }
.dim   { color: var(--ink-2); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   APP SHELL — sidebar on desktop, tab bar on phones
   ============================================================ */

#app { min-height: 100vh; }

.shell {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---- Sidebar --------------------------------------------- */
.side {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-sunk);
  border-right: 1px solid var(--line);
  z-index: var(--z-nav);
}

.side__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-4);
}
.side__mark {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--accent-ink);
  display: grid; place-items: center;
  font-size: 21px;
  box-shadow: var(--shadow-1);
}
/* ⭐ The Plate wordmark. Set in the display serif, not the UI sans: the
   product's voice is editorial and the wordmark should say so before a
   single word of content does. `b` in a wordmark still takes the accent --
   the CravEngine split mark is kept for the welcome screen. */
.side__name b, .welcome__h1 b { font-weight: inherit; color: var(--accent); }
.side__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}
/* "by CravEngine" is an attribution, not a tagline. It should read like a
   publisher's imprint under a title: present, small, sentence case. */
.side__tag {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink-quiet);
  margin-top: 2px;
}

.side__scroll { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--s-3) var(--s-4); }

.navgroup { margin-top: var(--s-5); }
/* Nav group labels are wayfinding, not content. They stay small and get
   quieter still -- the nav should recede, not announce its own structure. */
.navgroup > .eyebrow {
  padding: 0 var(--s-3) var(--s-2);
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-quiet);
  text-transform: none;
  letter-spacing: normal;
}

.navitem {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 9px var(--s-3);
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
  position: relative;
}
.navitem:hover { background: var(--surface-2); color: var(--ink); }
.navitem[aria-current="page"] {
  background: var(--surface-2);
  color: var(--ink);
}
.navitem[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: calc(var(--s-3) * -1 + 2px);
  top: 50%; transform: translateY(-50%);
  width: 3px; height: 17px;
  border-radius: var(--r-full);
  background: var(--accent);
}
.navitem__ico { width: 17px; height: 17px; flex: 0 0 auto; opacity: 0.85; }
.navitem__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-3);
  background: var(--surface-3);
  padding: 1px 6px;
  border-radius: var(--r-full);
}
.navitem__dot {
  margin-left: auto;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

.side__foot { padding: var(--s-3) var(--s-4) var(--s-4); border-top: 1px solid var(--line); }

/* ---- Restaurant switcher --------------------------------- */
.switcher { position: relative; padding: 0 var(--s-3) var(--s-2); }
.switcher__btn {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: left;
  transition: border-color var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);
}
.switcher__btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.switcher__avatar {
  width: 26px; height: 26px; flex: 0 0 auto;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  /* ⛔ The background here is the RESTAURANT'S OWN colour, so it can be any
     value at all — Chubbys' is a light blue, and white initials on it
     measured 2.53:1. The ink cannot be a fixed choice.

     `color-contrast()` is not available everywhere yet, so the ink is
     decided in JS from the colour's luminance and set inline. This
     declaration is the fallback for the case where no colour is set. */
  color: #fff;
  background: var(--fam-dish);
  overflow: hidden;
}
.switcher__avatar img { width: 100%; height: 100%; object-fit: cover; }
.switcher__meta { display: block; min-width: 0; flex: 1 1 auto; }
.switcher__nm {
  display: block;
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.switcher__sub {
  display: block;
  font-size: var(--fs-2xs); color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.switcher__chev { color: var(--ink-3); flex: 0 0 auto; }

.switcher__menu {
  position: absolute;
  left: var(--s-3); right: var(--s-3); top: calc(100% - var(--s-1));
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  padding: var(--s-2);
  z-index: var(--z-sticky);
  animation: pop var(--t-mid) var(--e-out);
}
.switcher__opt {
  display: flex; align-items: center; gap: var(--s-3);
  width: 100%; padding: var(--s-2); border-radius: var(--r-sm);
  text-align: left; font-size: var(--fs-sm);
}
.switcher__opt:hover { background: var(--surface-2); }
.switcher__opt[data-active="true"] { color: var(--accent); }
.switcher__sep { height: 1px; background: var(--line); margin: var(--s-2) 0; }

/* ---- Main column ------------------------------------------ */
.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0;
  z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-7);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
  min-height: 62px;
}
/* ⭐ TYPE CONTRAST · the page title carries the screen.

   It was 21px, barely above the 17px card titles under it, so no screen had
   a top. The scale did not need changing -- the DISTANCE between steps did.
   The title now sits two full steps above anything else on the page. */
.topbar__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
}
.topbar__sub {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin-top: 3px;
  max-width: var(--read-max);
}
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }

.page {
  flex: 1 1 auto;
  padding: var(--s-7);
  max-width: var(--shell-max);
  width: 100%;
  animation: rise var(--t-slow) var(--e-out);
}
.page--flush { padding: 0; max-width: none; }

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

/* ---- Mobile tab bar (hidden on desktop) ------------------- */
.tabbar { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  :root { --nav-w: 216px; }
  .page { padding: var(--s-6); }
  .topbar { padding: var(--s-4) var(--s-6); }
}

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side {
    position: fixed;
    inset: 0 auto 0 0;
    width: 272px;
    transform: translateX(-102%);
    transition: transform var(--t-mid) var(--e-out);
    box-shadow: var(--shadow-3);
  }
  .side[data-open="true"] { transform: none; }
  .side-scrim {
    position: fixed; inset: 0; background: var(--scrim);
    z-index: calc(var(--z-nav) - 1);
    animation: fade var(--t-fast) linear;
  }
  .topbar {
    padding: var(--s-3) var(--s-4);
    gap: var(--s-2) var(--s-3);
    min-height: 56px;
    flex-wrap: wrap;
  }
  .topbar > div:not(.topbar__actions) { flex: 1 1 auto; min-width: 0; }
  .topbar__title {
    font-size: var(--fs-lg);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* the explanatory subtitle is desktop-only — on a phone it eats
     a third of the screen before you see any content */
  .topbar__sub { display: none; }
  /* screen actions drop to their own full-width row and scroll
     sideways rather than getting clipped off the right edge */
  .topbar__actions {
    margin-left: 0;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 1px;
  }
  .topbar__actions::-webkit-scrollbar { display: none; }
  .topbar__actions .btn { flex: 0 0 auto; }
  .page { padding: var(--s-4) var(--s-4) calc(var(--tabbar-h) + var(--s-8)); }

  .tabbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--bg-sunk) 94%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    z-index: var(--z-nav);
  }
  /* ⛔ The uppercase mono label was retired from the desktop nav in v186 and
     missed here, so a phone still read TODAY MENU PHOTOS WEBSITE POSTS.
     9.5px uppercase mono is the most dashboard-looking type in the product,
     and it was on the surface an owner uses most. */
  .tabbar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    color: var(--ink-3);
    font-size: 10.5px;
    font-family: var(--font-ui);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    position: relative;
  }
  .tabbar__item[aria-current="page"] { color: var(--accent); }
  .tabbar__item svg { width: 19px; height: 19px; }
}

@media (min-width: 861px) {
  .burger { display: none !important; }
}