/* frame.css — shared scaffolding for the four Concierge directions.
   Deliberately carries no visual language: reset, device frame, and the
   day/night switch only. Every colour, type and layout decision belongs to
   the direction's own stylesheet. */

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

html { -webkit-text-size-adjust: 100%; }

/* The desk the phone sits on. Deliberately one value for every colourway —
   a backdrop that changes with the palette shifts how the palette reads, so
   the three could not be compared fairly against each other. */
:root { --shell-bg: #F3F3F4; }

body {
  margin: 0;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--shell-bg);
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

/* The bezel still follows the colourway; only the desk behind it is fixed. */

/* ── The phone ─────────────────────────────────────────────────────────────
   Full-bleed on a real handset. On anything desktop-sized it becomes a
   390x844 device so four directions can be judged side by side at true size. */

/* height, not min-height: the shell must be exactly the viewport or the flex
   column grows with its content and pushes the tab bar off the screen. */
.phone {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

/* The one scrolling region. Directions put their header outside it.
   min-height: 0 lets it shrink inside the column instead of stretching it. */
.phone-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.phone-scroll::-webkit-scrollbar { display: none; }

@media (min-width: 760px) {
  body { display: grid; place-items: center; padding: 40px 24px; }

  .phone {
    width: 390px;
    height: 844px;
    min-height: 0;
    flex: 0 0 auto;
    border-radius: 46px;
    box-shadow:
      0 0 0 10px var(--shell-bezel, #1B1B1E),
      0 0 0 11px var(--shell-bezel-edge, rgba(255,255,255,.10)),
      0 40px 90px -20px rgba(0,0,0,.55);
  }
}

/* ── Layout and theme switcher ─────────────────────────────────────────────
   Review chrome, deliberately neutral — it is not part of the design. Two
   two-sided toggles rather than a row of swatches, because the app now has
   two axes and each of them is binary: naming both sides is what says they
   are two choices and not four presets.

   The layout side navigates (a screen is built one way, see concepts.js), so
   the side that has nowhere to go is disabled rather than hidden — "not drawn
   yet" is worth knowing while eight screens are still on their way. */

.pal-switch {
  position: fixed;
  z-index: 90;
  left: 14px;
  bottom: 78px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(0, 0, 0, .09);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

[data-mode="night"] .pal-switch {
  background: rgba(30, 30, 34, .82);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.pal-seg {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, .07);
}
[data-mode="night"] .pal-seg { background: rgba(255, 255, 255, .1); }

.pal-opt {
  padding: 5px 11px 6px;
  border-radius: 999px;
  font: 500 11px/1 "Inter", system-ui, sans-serif;
  color: rgba(0, 0, 0, .55);
  transition: background 160ms ease, color 160ms ease;
}
[data-mode="night"] .pal-opt { color: rgba(255, 255, 255, .6); }

/* The chosen side is the solid one — a toggle whose two halves differ only in
   opacity is a toggle nobody can read at a glance. */
.pal-opt[aria-pressed="true"] {
  font-weight: 700;
  color: #FFFFFF;
  background: #16181C;
}
[data-mode="night"] .pal-opt[aria-pressed="true"] {
  color: #16181C;
  background: #FFFFFF;
}

.pal-opt[disabled] { opacity: .38; cursor: not-allowed; }

/* A second pill, stacked above the first, for a screen that is read by more
   than one kind of person — the dashboard is the week of whoever is looking at
   it, so it carries a Rep | Manager toggle here (ROLE-01: in the product there
   is nothing to switch, the account decides). It is the same object as the
   pill below it and not a third look: a review control that wrote its own
   colours would be the one thing on the surface ignoring the theme. */
.role-switch { bottom: 122px; }

@media (min-width: 760px) {
  .pal-switch { left: 20px; bottom: 20px; }
  .role-switch { bottom: 64px; }
}

/* Embedded in the picker: each frame is pinned to one colourway by its URL. */
[data-embed="1"] .pal-switch { display: none; }

/* Screen-reader-only text, used for state labels the design carries visually. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

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