/* ==========================================================================
   Tiny Beginnings — App UI previews
   --------------------------------------------------------------------------
   These are the app's real screens — Today, Remember this, Journey, Plan,
   Growth — rebuilt in live markup using the v3 design tokens.

   WHY NOT SCREENSHOTS: every capture in `Claude outputs/app-screenshots/`
   is the archived v2 brand (periwinkle/rose, Fredoka). Design system §0 and
   §18 record that the app reskin has not happened yet and that all store
   assets regenerate after it. Putting a v2 capture on a v3 page would break
   PROJECT-RULES §1, which shares the colour system across both surfaces
   without exception.

   WHEN REAL CAPTURES EXIST: `.device__screen` holds the app's true
   780 × 1688 aspect ratio, so a real screenshot drops straight in — replace
   the `.ui` block with <img> and nothing around it reflows. Keep
   `height: auto` on it (PROJECT-RULES §4).

   The UI is laid out at the app's own 390px design width and scaled by
   container query, so nothing here is "app geometry copied onto the web":
   it is a rendered object sitting inside the web composition, the same way
   a screenshot would be.
   ========================================================================== */

.device {
  position: relative;
  width: 100%;
  max-width: 320px;
  padding: 10px;
  border-radius: 46px;
  background: var(--color-ink);
  box-shadow: var(--shadow-xl);   /* a rendering, not an elevation (§6) */
}
.device::after {                   /* bezel highlight */
  content: ""; position: absolute; inset: 0;
  border-radius: 46px;
  border: 1px solid rgba(255, 249, 241, .14);
  pointer-events: none;
}

.device__screen {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 780 / 1688;        /* the app's real capture ratio */
  border-radius: 36px;
  overflow: hidden;
  background: var(--color-cream);
}
.device__screen > img { width: 100%; height: auto; display: block; }

/* The notch */
.device__notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 36%; height: 22px;
  background: var(--color-ink);
  border-radius: 0 0 14px 14px;
  z-index: 3;
}

/* Several screens are taller than their column. Rather than cropping or
   distorting, a `.device--clip` sits in a fixed-height window whose tail
   softens with a mask. The UI keeps its true geometry. (PROJECT-RULES §4) */
.device-win { overflow: hidden; }
@media (min-width: 1024px) {
  .device-win--tall {
    max-height: 620px;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }
}

/* A trio of devices composed as ONE object: the three frames overlap and the
   centre screen sits forward. Measured off the reference board — the frames
   there are about the same width as a standalone device (~300px); what makes
   the group read as larger is the overlap and the depth, not the scale.

   Below the tablet breakpoint only the first screen is shown, at a size a
   phone can actually read: three 100px-wide phones is an unread card by
   another name (§14). The prose beneath carries all three screens' content,
   so nothing is lost by hiding the other two. */
.device-trio { display: grid; grid-template-columns: 1fr; justify-items: center;
               gap: var(--space-sm); align-items: start; }
.device-trio > :nth-child(n + 2) { display: none; }
.device-trio > * { min-width: 0; }

@media (min-width: 761px) {
  .device-trio {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 0;
    /* the group is one object, so its own shadows may overlap the gutter
       without the page gaining a scrollbar */
    overflow-x: clip; padding-block: var(--space-sm);
  }
  .device-trio > * { flex: 0 0 auto; width: 34%; max-width: 300px; }
  .device-trio > :nth-child(n + 2) { display: block; }

  /* Depth comes from the outer two stepping BACK, not from the centre
     growing forward. Scaling the centre up pushes it further over its
     neighbours' left edges, and a screen title clipped mid-word reads as a
     typo rather than as depth.

     Measured at a 704px column: 34% columns, −4% margins on the centre and
     a 0.94 scale on the outer two give a 21px overlap, which leaves each
     outer screen's own title clear by about 4px. */
  .device-trio > :nth-child(1) { z-index: 1; transform: scale(.94); }
  .device-trio > :nth-child(2) { z-index: 3; margin-inline: -4%; }
  .device-trio > :nth-child(3) { z-index: 2; transform: scale(.94); }
}

.device-trio .device { padding: 7px; border-radius: 34px; }
.device-trio .device::after { border-radius: 34px; }
.device-trio .device__screen { border-radius: 27px; }
.device-trio .device__notch { height: 16px; border-radius: 0 0 10px 10px; }

/* ==========================================================================
   The UI itself. Everything below is expressed in the app's own design
   pixels via --px, so the whole screen scales with its container.
   ========================================================================== */

.ui {
  --px: calc(100cqw / 390);
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: calc(14 * var(--px));
  line-height: calc(20 * var(--px));
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}
.ui * { box-sizing: border-box; }

.ui__status {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(14 * var(--px)) calc(20 * var(--px)) calc(4 * var(--px));
  font-size: calc(12 * var(--px)); line-height: calc(16 * var(--px));
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.ui__status span:last-child { letter-spacing: calc(1 * var(--px)); }

.ui__body {
  flex: 1; min-height: 0; overflow: hidden;
  padding: calc(8 * var(--px)) calc(20 * var(--px)) 0;
}

.ui__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: calc(28 * var(--px)); line-height: calc(36 * var(--px));
  letter-spacing: -0.01em;
}
.ui__subtitle {
  color: var(--color-stone-aa);
  font-size: calc(13 * var(--px)); line-height: calc(18 * var(--px));
  margin-top: calc(2 * var(--px));
}
.ui__eyebrow {
  font-size: calc(11 * var(--px)); line-height: calc(14 * var(--px));
  letter-spacing: calc(.8 * var(--px));
  text-transform: uppercase; font-weight: var(--weight-semibold);
  color: var(--color-stone-aa);
  margin: calc(16 * var(--px)) 0 calc(8 * var(--px));
}

.ui-card {
  background: var(--color-shell);
  border: 1px solid var(--color-sand);
  border-radius: calc(20 * var(--px));
  padding: calc(16 * var(--px));
}
.ui-card + .ui-card { margin-top: calc(12 * var(--px)); }
.ui-card--featured {
  background: var(--color-wheat);
  border-color: transparent;
  border-radius: calc(24 * var(--px));
}
.ui-card--flat { background: var(--color-linen); border-color: transparent; }

/* Row with an icon chip, a title and a subtitle. */
.ui-row { display: flex; align-items: center; gap: calc(12 * var(--px)); }
.ui-row + .ui-row { margin-top: calc(14 * var(--px));
                    padding-top: calc(14 * var(--px));
                    border-top: 1px solid var(--color-linen); }
.ui-row__text { flex: 1; min-width: 0; }
.ui-row__title { font-weight: var(--weight-semibold);
                 font-size: calc(15 * var(--px)); line-height: calc(20 * var(--px)); }
.ui-row__sub { color: var(--color-stone-aa);
               font-size: calc(13 * var(--px)); line-height: calc(18 * var(--px)); }
.ui-row__meta { color: var(--color-stone-aa); flex: none;
                font-size: calc(12 * var(--px)); line-height: calc(16 * var(--px));
                font-variant-numeric: tabular-nums; }
/* A trailing UI glyph in a row — a chevron, say. */
.ui-row > img { flex: none; opacity: .55;
                width: calc(16 * var(--px)); height: calc(16 * var(--px));
                object-fit: contain; }

.ui-chip {
  flex: none; display: grid; place-items: center;
  width: calc(40 * var(--px)); height: calc(40 * var(--px));
  border-radius: 50%;
  background: var(--color-linen); color: var(--color-ink);
}
.ui-chip img { width: calc(22 * var(--px)); height: calc(22 * var(--px));
                object-fit: contain; }
.ui-chip--accent { background: var(--color-accent-tint); }
.ui-chip--lg { width: calc(52 * var(--px)); height: calc(52 * var(--px)); }
.ui-chip--lg img { width: calc(28 * var(--px)); height: calc(28 * var(--px)); }

/* Date strip */
.ui-dates { display: flex; justify-content: space-between;
            margin-top: calc(12 * var(--px)); }
.ui-dates div { text-align: center; width: calc(36 * var(--px));
                padding: calc(6 * var(--px)) 0;
                border-radius: calc(12 * var(--px));
                font-size: calc(11 * var(--px)); line-height: calc(15 * var(--px));
                color: var(--color-stone-aa); font-variant-numeric: tabular-nums; }
.ui-dates div b { display: block; font-size: calc(13 * var(--px));
                  line-height: calc(18 * var(--px)); color: var(--color-ink);
                  font-weight: var(--weight-semibold); }
.ui-dates div[data-today] { background: var(--color-linen); }
.ui-dates div[data-today] b { color: var(--color-ink); }

/* Featured age card */
.ui-age__value {
  font-weight: var(--weight-bold);
  font-size: calc(32 * var(--px)); line-height: calc(38 * var(--px));
  font-variant-numeric: tabular-nums;
}
.ui-tiles { display: grid; grid-template-columns: repeat(3, 1fr);
            gap: calc(8 * var(--px)); margin-top: calc(14 * var(--px)); }
.ui-tile { background: rgba(255, 249, 241, .7);
           border-radius: calc(16 * var(--px));
           padding: calc(10 * var(--px)) calc(8 * var(--px)); }
.ui-tile span { display: block; color: var(--color-stone-aa);
                font-size: calc(11 * var(--px)); line-height: calc(14 * var(--px)); }
.ui-tile b { display: block; margin-top: calc(2 * var(--px));
             font-size: calc(13 * var(--px)); line-height: calc(18 * var(--px));
             font-weight: var(--weight-semibold);
             font-variant-numeric: tabular-nums; }

/* Search + filter pills */
.ui-search {
  display: flex; align-items: center; gap: calc(8 * var(--px));
  height: calc(40 * var(--px)); padding-inline: calc(14 * var(--px));
  background: var(--color-linen); border-radius: calc(16 * var(--px));
  color: var(--color-stone-aa);
  font-size: calc(14 * var(--px)); line-height: calc(20 * var(--px));
  margin-top: calc(14 * var(--px));
}
.ui-search img { width: calc(15 * var(--px)); height: calc(15 * var(--px));
                  object-fit: contain; opacity: .6; }

.ui-pills { display: flex; gap: calc(8 * var(--px));
            margin-top: calc(10 * var(--px)); }
.ui-pills span {
  padding: calc(6 * var(--px)) calc(14 * var(--px));
  border-radius: 999px;
  background: var(--color-shell); border: 1px solid var(--color-sand);
  font-size: calc(13 * var(--px)); line-height: calc(18 * var(--px));
  font-weight: var(--weight-semibold); color: var(--color-stone-aa);
  white-space: nowrap;
}
/* A selected chip loses its border rather than gaining a darker one (§12). */
.ui-pills span[data-selected] { background: var(--color-wheat);
                                border-color: transparent; color: var(--color-ink); }

/* Action grid — the "Remember this" sheet */
.ui-actions { display: grid; grid-template-columns: repeat(4, 1fr);
              gap: calc(16 * var(--px)) calc(8 * var(--px));
              margin-top: calc(18 * var(--px)); }
.ui-action { text-align: center; }
.ui-action .ui-chip { margin-inline: auto; }
.ui-action span { display: block; margin-top: calc(6 * var(--px));
                  font-size: calc(11 * var(--px)); line-height: calc(14 * var(--px));
                  font-weight: var(--weight-medium); color: var(--color-ink); }

/* Growth chart */
.ui-chart { margin-top: calc(10 * var(--px)); }
.ui-chart svg { width: 100%; height: auto; display: block; }

/* Primary action inside the UI */
.ui-btn {
  display: grid; place-items: center;
  height: calc(52 * var(--px));
  border-radius: 999px;
  background: var(--color-action-aa); color: var(--color-shell);
  font-weight: var(--weight-semibold);
  font-size: calc(15 * var(--px)); line-height: calc(20 * var(--px));
  margin-top: calc(16 * var(--px));
}

/* Bottom tab bar — the app owns this geometry; it is reproduced here only
   as part of the rendered screen. */
.ui-tabs {
  flex: none;
  display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: end;
  padding: calc(10 * var(--px)) calc(8 * var(--px)) calc(22 * var(--px));
  background: var(--color-shell);
  border-top: 1px solid var(--color-linen);
}
.ui-tab { display: grid; justify-items: center; gap: calc(4 * var(--px));
          color: var(--color-stone-aa); }
/* The artwork cannot recolour per state, so an inactive tab is dimmed and
   the active one sits at full strength — plus the accent mark below it. */
.ui-tab img { width: calc(19 * var(--px)); height: calc(19 * var(--px));
              object-fit: contain; opacity: .45; }
.ui-tab[data-active] img { opacity: 1; }
.ui-tab span { font-size: calc(10 * var(--px)); line-height: calc(13 * var(--px));
               font-weight: var(--weight-medium); }
/* Every tracker icon carries a visible text label — load-bearing under §2.6. */
.ui-tab[data-active] { color: var(--color-ink); }
.ui-tab[data-active]::after {
  content: ""; width: calc(16 * var(--px)); height: calc(2 * var(--px));
  border-radius: 2px; background: var(--color-accent);
}
.ui-tab__fab {
  width: calc(48 * var(--px)); height: calc(48 * var(--px));
  border-radius: 50%; display: grid; place-items: center;
  background: var(--color-action-aa); color: var(--color-shell);
  margin-top: calc(-14 * var(--px));
}
.ui-tab__fab img { width: calc(20 * var(--px)); height: calc(20 * var(--px));
                    object-fit: contain; }

/* Same correction inside the app previews: the featured card's ground is
   Wheat, where Stone AA measures 4.07:1. See components.css §18. */
.ui-card--featured { --color-stone-aa: var(--color-bark); }