/* PhoneShell: the customer app's frame, its theme and its two fixed regions (CP-10-25; UXU-04, UXU-38).
 *
 * THE FRAME, in three bands:
 *
 *   up to 480 px     the shell IS the viewport: full width, `100dvh` tall (the dynamic viewport, so a
 *                    mobile browser's collapsing toolbar does not leave the bar under the fold), and
 *                    every edge padded by the device's safe-area inset.
 *   481 to 767 px    still the viewport, capped at the phone's 480 px measure and centred.
 *   768 px and up    the device mock: a phone-sized frame centred on the page. A desktop is where the
 *                    mock belongs, because there it is the only way to see the app at its real size.
 *
 * THE THEME. The neutrals flip between light and dark; the tile colours do not. Mint is money, blue
 * is a plan with a date, coral is something wanted, amber is a reward or a countdown, lavender is
 * Ana offering, and the inverse tile is the one thing that needs the customer. A colour means the
 * same thing on every screen, so it can be read before any word is.
 *
 * Logical properties only (`inline`/`block`), never a physical edge: the shell mirrors under
 * `dir="rtl"` with no second stylesheet (CP-10-37).
 *
 * `--ana-safe-*` carry the insets so one place reads `env()`. They need
 * `<meta name="viewport" content="... viewport-fit=cover">` on the page to be non-zero.
 */

:root {
  --ana-safe-top: env(safe-area-inset-top, 0px);
  --ana-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ana-safe-left: env(safe-area-inset-left, 0px);
  --ana-safe-right: env(safe-area-inset-right, 0px);

  /* The type floor: nothing in the app is set below it, and the bar's labels are set at it. */
  --ana-font-xs: 11px;
  --ana-font-sm: 13px;
  --ana-font-md: 15px;
  --ana-font-lg: 17px;

  /* A tap target is at least 44 px in both directions (CP-10-38). */
  --ana-tap: 44px;
  --ana-bar-block: 56px;
  --ana-header-block: 52px;
  --ana-gutter: 20px;

  --display: "Sora", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --text: "Inter", "Noto Sans Arabic", "Segoe UI", system-ui, sans-serif;

  /* Neutrals: light. */
  --bg: #f1efea;
  --surface: #ffffff;
  --surface2: #e9e6df;
  --ink: #151515;
  --muted: #5f5e5a;
  --line: #dedbd3;
  --inv: #151515;
  --inv-ink: #ffffff;
  --nav: #151515;
  --nav-ink: #b4b3ae;
  --nav-on: #ffffff;
  --nav-on-ink: #151515;
  --backdrop: #dcdad3;
  --scrim: rgba(12, 12, 14, 0.5);
  --good: #12795a;
  --warn: #8a5a00;
  --bad: #b3261e;

  /* Meanings: the same in light and dark. */
  --mint: #a2e3ce;
  --mint-ink: #0f2f25;
  --amber: #f3bd55;
  --amber-ink: #3a2600;
  --blue: #3f5df2;
  --blue-deep: #2b3fa8;
  --blue-ink: #ffffff;
  --coral: #f47a5c;
  --coral-ink: #2e0e04;
  --lav: #d6cff5;
  --lav-ink: #1d1740;
  --green: #1f7a4d;
  --indigo: #2b2e63;
  --violet: #8a76e8;
  --sand: #fbe5b4;
  --sky: #cfe6fb;
  --sky-ink: #0e2a40;
}

:root[data-theme="dark"] {
  --bg: #0e0f11;
  --surface: #1b1c20;
  --surface2: #27282d;
  --ink: #f4f4f1;
  --muted: #a6a7ad;
  --line: #2e2f35;
  --inv: #f4f4f1;
  --inv-ink: #0e0f11;
  --nav: #27282d;
  --nav-ink: #a6a7ad;
  --nav-on: #f4f4f1;
  --nav-on-ink: #0e0f11;
  --backdrop: #050506;
  --scrim: rgba(0, 0, 0, 0.62);
  --good: #6fdcb4;
  --warn: #f3bd55;
  --bad: #ff8a73;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0f11;
    --surface: #1b1c20;
    --surface2: #27282d;
    --ink: #f4f4f1;
    --muted: #a6a7ad;
    --line: #2e2f35;
    --inv: #f4f4f1;
    --inv-ink: #0e0f11;
    --nav: #27282d;
    --nav-ink: #a6a7ad;
    --nav-on: #f4f4f1;
    --nav-on-ink: #0e0f11;
    --backdrop: #050506;
    --scrim: rgba(0, 0, 0, 0.62);
    --good: #6fdcb4;
    --warn: #f3bd55;
    --bad: #ff8a73;
  }
}

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

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

html,
body {
  margin: 0;
  block-size: 100%;
}

body {
  font-family: var(--text);
  font-size: var(--ana-font-md);
  line-height: 1.4;
  color: var(--ink);
  background: var(--bg);
  /* The shell never scrolls sideways, and neither may anything that escapes it. */
  overflow-x: clip;
}

/* --- the shell: the viewport, up to 767 px ----------------------------------------------------- */

.ana-phone-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  max-inline-size: 480px;
  margin-inline: auto;
  /* `vh` first for an engine without dynamic viewport units; `dvh` wins where it parses. */
  block-size: 100vh;
  block-size: 100dvh;
  background: var(--bg);
  color: var(--ink);
  overflow: clip;
}

.ana-phone-shell__content {
  flex: 1 1 auto;
  /* A flex child's automatic minimum is its content, which would push the bar off the screen. */
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding-block: 2px 28px;
  padding-inline: calc(var(--ana-gutter) + var(--ana-safe-left)) calc(var(--ana-gutter) + var(--ana-safe-right));
}

.ana-phone-shell__content::-webkit-scrollbar {
  display: none;
}

/* Read by a screen reader, not drawn: a screen's one heading where the design shows a greeting. */
.ana-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- the header: back by history, the title, the actions' slot ---------------------------------- */

.ana-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: calc(var(--ana-header-block) + var(--ana-safe-top));
  padding-block-start: var(--ana-safe-top);
  padding-inline: calc(10px + var(--ana-safe-left)) calc(10px + var(--ana-safe-right));
  background: var(--bg);
}

.ana-header__back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--ana-tap);
  block-size: var(--ana-tap);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.ana-header__back[hidden] {
  display: none;
}

.ana-header__back svg {
  inline-size: 22px;
  block-size: 22px;
}

/* The chevron points against the reading direction: back is towards the start edge. */
[dir="rtl"] .ana-header__back svg {
  transform: scaleX(-1);
}

.ana-header__lead {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.ana-header__title {
  flex: 1 1 auto;
  min-inline-size: 0;
  margin: 0;
  font-family: var(--display);
  font-size: var(--ana-font-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ana-header__actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: var(--ana-tap);
}

/* A tab's own screen: no Back, and the tab's name set large. */
.ana-header--root {
  padding-inline: calc(var(--ana-gutter) + var(--ana-safe-left)) calc(14px + var(--ana-safe-right));
  min-block-size: calc(60px + var(--ana-safe-top));
}

.ana-header--root .ana-header__title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* Home greets instead of naming itself; its heading is still there for a screen reader. */
.ana-header--home {
  padding-inline: calc(var(--ana-gutter) + var(--ana-safe-left)) calc(14px + var(--ana-safe-right));
  min-block-size: calc(62px + var(--ana-safe-top));
  gap: 10px;
}

.ana-header__spacer {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* --- the bar: four tabs in a pill, the orb in the centre slot ------------------------------------ */

.ana-tabbar {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* The home indicator's strip is the bar's own padding: the bar's ground runs to the edge of the
     screen, and its tabs end above the inset. */
  padding-block-start: 0;
  padding-block-end: var(--ana-safe-bottom);
  padding-inline: calc(20px + var(--ana-safe-left)) calc(20px + var(--ana-safe-right));
  background: var(--bg);
}

/* The pill the tabs sit in, drawn behind them and above the inset. */
.ana-tabbar::before {
  content: "";
  position: absolute;
  inset-block: 0 calc(var(--ana-safe-bottom) + 12px);
  inset-inline: calc(14px + var(--ana-safe-left)) calc(14px + var(--ana-safe-right));
  border-radius: 34px;
  background: var(--nav);
}

/* What scrolls behind the bar fades out before it reaches the pill. */
.ana-tabbar::after {
  content: "";
  position: absolute;
  inset-block-end: 100%;
  inset-inline: 0;
  block-size: 28px;
  background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
}

.ana-tabbar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-inline-size: 0;
  min-block-size: var(--ana-bar-block);
  margin-block: 6px 18px;
  padding: 4px 2px;
  border-radius: 28px;
  color: var(--nav-ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.ana-tabbar__item[aria-current="page"] {
  background: var(--nav-on);
  color: var(--nav-on-ink);
}

.ana-tabbar__item:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.ana-tabbar__icon {
  inline-size: 22px;
  block-size: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ana-tabbar__label {
  max-inline-size: 100%;
  font-size: var(--ana-font-xs);
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ana-tabbar__badge {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: calc(50% - 20px);
  min-inline-size: 16px;
  block-size: 16px;
  padding-inline: 4px;
  border-radius: 8px;
  background: var(--coral);
  color: var(--coral-ink);
  font-size: var(--ana-font-xs);
  font-weight: 700;
  line-height: 16px;
  display: grid;
  place-items: center;
}

/* The orb keeps its slot and its label (T10 D3): a lit disc, not a sixth kind of control. */
.ana-tabbar__item--orb .ana-tabbar__icon {
  inline-size: 32px;
  block-size: 32px;
  border-radius: 50%;
  background: var(--lav);
  color: var(--lav-ink);
  padding: 6px;
}

.ana-tabbar__item--orb {
  color: var(--nav-on);
}

.ana-tabbar__item--orb[aria-current="page"] {
  background: transparent;
  color: var(--nav-on);
}

.ana-tabbar__item--orb[aria-current="page"] .ana-tabbar__icon {
  background: var(--violet);
  color: #ffffff;
}

/* --- what a destination shows before its screen is built ---------------------------------------- */

.ana-pending {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ana-pending__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-block-size: var(--ana-tap);
  padding: 14px 16px;
  margin-block-end: 10px;
  background: var(--surface);
  border-radius: 20px;
}

.ana-pending__name {
  font-weight: 700;
}

.ana-pending__note {
  font-size: var(--ana-font-sm);
  color: var(--muted);
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* --- the device mock: 768 px and up -------------------------------------------------------------- */

@media (min-width: 768px) {
  body {
    display: grid;
    place-items: center;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    padding: 20px;
    background: var(--backdrop);
  }

  .ana-phone-shell {
    inline-size: 390px;
    max-inline-size: none;
    block-size: 844px;
    /* A window shorter than the mock scales nothing and clips nothing: the frame is as tall as the
       window allows and its content scrolls, as it does on a phone. */
    max-block-size: calc(100vh - 40px);
    max-block-size: calc(100dvh - 40px);
    margin: 0;
    border-radius: 44px;
    box-shadow:
      0 30px 60px -30px rgba(0, 0, 0, 0.45),
      0 0 0 10px #0b0b0c,
      0 0 0 11px #2a2b30;
  }
}