/* ==========================================================================
   Preheat: rules that belong to one surface, not to a component
   Palette and component shapes come from the product demo at
   marketing/landing/public/demo.html. If a screen here and that demo
   disagree, the demo wins.
   ========================================================================== */

/* ---------- Layout ---------- */

/* The baker app is phone-shaped by default: one column, bottom bar. At 900px a
   sidebar appears beside it and the bar goes away. Inside a Hotwire Native
   shell the server renders neither, because the shell draws its own. */
.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
}

.app__frame {
  width: 100%;
  max-width: var(--app-width);
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border-inline: 1px solid var(--line);
}

@media (max-width: 500px) {
  .app__frame {
    border-inline: 0;
  }
}

/* ---------- Sidebar (wide screens only) ---------- */

.sidebar {
  display: none;
}


.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 10px 14px;
  font-family: var(--display);
  font-size: 21px;
  color: var(--ink);
}
.sidebar__brand:hover {
  color: var(--ink);
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-chip);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.sidebar__item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.sidebar__item:hover {
  background: var(--cream-deep);
  color: var(--ink);
}
.sidebar__item[aria-current='page'] {
  background: var(--raspberry-tint);
  color: var(--raspberry-deep);
}

.sidebar__shop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 10px;
  border-top: 1px solid var(--glass-line);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
  min-width: 0;
}
.sidebar__shop:hover {
  color: var(--ink);
}
.sidebar__shop-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--gutter) 8px;
}

.app-bar__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 20px;
  color: var(--ink);
}
.app-bar__brand:hover {
  color: var(--ink);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--avatar-from), var(--raspberry));
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.screen {
  flex: 1;
  padding: 4px var(--gutter) 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.screen__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stack--tight {
  gap: 6px;
}
.stack--loose {
  gap: 18px;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.row--between {
  justify-content: space-between;
}
.row--wrap {
  flex-wrap: wrap;
}

.spacer {
  margin-top: auto;
}

/* ---------- Tab bar ---------- */

.tab-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-line);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted-2);
}
.tab-bar__item:hover {
  color: var(--muted);
}
.tab-bar__item[aria-current='page'] {
  color: var(--raspberry);
}
.tab-bar__item svg {
  width: 21px;
  height: 21px;
}

/* ---------- Sign in ---------- */

/* The one baker screen with no navigation around it. Nothing above it to hang
   from, so it sits in the middle of the frame instead of at the top. Short
   enough that centring never pushes the submit button off a phone; the
   registration form next door is not, which is why it does not do this. */
/* Centres the screen rather than the block inside it, so an alert ("that reset
   link has expired") rides down with the form it is about. Give .auth the auto
   margin instead and the flash stays pinned to the top of the viewport, a
   sentence on its own with nothing near it. */
.screen:has(.auth) {
  justify-content: center;
}

.auth__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

/* Signed out there is no sidebar and no app bar, so nothing on the screen is
   left-aligned for these to hang off. Centred reads as deliberate; ragged
   left reads as unfinished. */
.auth__intro {
  text-align: center;
}

/* ---------- The form builder ---------- */

/* A question in the list: the whole row is a link to its editor, with the two
   reorder controls beside it. Reordering is buttons rather than dragging
   because this is a phone screen first, and a drag handle inside a scrolling
   column fights the scroll. */
.question {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 10px 8px 10px 14px;
}

.question__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  color: var(--ink);
}
.question__body:hover {
  color: var(--ink);
}

.question__moves {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.question__moves form {
  margin: 0;
}
.question__moves .btn {
  padding: 2px 10px;
  font-size: 15px;
  line-height: 1.2;
}

/* Label, note and price on one line at width, stacked on a narrow phone where
   three inputs side by side leave no room to read what you typed. */
.option-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 10px;
}

/* Above the phone-shaped column, not above some arbitrary phone width. The
   frame is --app-width until the sidebar appears, so a 430px handset would
   otherwise get three columns squeezed into 400px of gutter-to-gutter. */
@media (min-width: 520px) {
  .option-row {
    grid-template-columns: 2fr 2fr 1fr;
  }
}

/* ---------- The quote builder ---------- */

/* Description, quantity and unit price. Stacked on a phone, because a
   description squeezed into a third of 430px is unreadable while typing. */
.line-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 10px;
}

@media (min-width: 520px) {
  .line-row {
    grid-template-columns: 3fr 1fr 1.4fr;
  }
  .line-row--pair {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Customer pages ---------- */

/* A customer arrives once, cold, from a phone. Full-bleed white page, no app
   chrome, nothing to learn. */
.public {
  min-height: 100dvh;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.public__frame {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.public__head {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: 20px 26px;
}

.public__body {
  padding: 22px 26px 34px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}

.public__foot {
  padding: 18px 26px 26px;
  text-align: center;
  font-size: 12px;
  color: var(--faint);
}

.confirmation {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 44px 30px;
  text-align: center;
}

.tick {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--on-accent);
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reference {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
  padding: 12px 18px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.reference b {
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* ---------- Menu page ---------- */

.menu-item {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
}
.menu-item__thumb {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  object-fit: cover;
  background: linear-gradient(135deg, var(--photo-from), var(--photo-mid) 55%, var(--photo-to));
  flex-shrink: 0;
}
.menu-item__body {
  flex: 1;
  min-width: 0;
}
.menu-item__name {
  font-size: 15px;
  font-weight: 800;
}
.menu-item__desc {
  font-size: 13.5px;
  color: var(--muted);
}

/* ---------- Glass fallbacks ---------- */

/* Translucency is a finish, never the thing that makes text legible. Where the
   blur cannot run, or where someone has asked for less of it, both surfaces go
   opaque rather than sitting half-transparent over scrolling content. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tab-bar,
  .sidebar {
    background: var(--surface);
  }
  .tab-bar {
    border-top-color: var(--line);
  }
  .sidebar {
    border-right-color: var(--line);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .tab-bar,
  .sidebar {
    background: var(--surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---------- Wide screens ---------- */

/* Last in the file on purpose. These override .tab-bar and .app-bar, which are
   defined above at the same specificity, so source order is what decides. Put
   this block earlier and both navigations render at once. */
@media (min-width: 900px) {
  .app {
    flex-direction: row;
    align-items: stretch;
  }

  .sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100dvh;
    width: var(--sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 14px;
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--glass-line);
  }

  /* The sidebar carries the brand and the shop, so the in-column header that
     did that on a phone would only repeat itself. */
  .app-bar {
    display: none;
  }

  /* That header was also the screen's top margin. Without it the title sits
     against the viewport edge. */
  .screen {
    padding-top: 22px;
  }

  .app__frame {
    max-width: var(--app-width-wide);
    margin: 0;
    border-inline: 0;
  }

  /* Flush left is only right when the sidebar is what it is flush against.
     With no sidebar the column has the whole viewport, so it goes back to the
     middle. Must follow the rule above: same specificity on margin. */
  .app--solo .app__frame {
    margin-inline: auto;
  }

  /* The bottom bar and the sidebar are the same navigation. Only one shows. */
  .tab-bar {
    display: none;
  }
}