/* ═══════════════════════════════════════════════════════════════════
   PlateDiary — the still phone. Loaded after css/pages.css by every page
   that draws one (a <figure class="mini">): /ai, /restaurant-journal,
   /whats-new, and generated topics with heroPhone (scripts/site-pages).

   The screens are the homepage's old live phone set to their final state:
   the read, Ask, Served, a place and a companion. These rules were cut from
   the retired css/home.css on 2026-10-19 by matching every home.css selector
   against the drawn phones (light and dark) and keeping only what matched,
   each one scoped under .mini so nothing here can touch the page around
   it. Tokens (--surface, --ink-muted, --shadow-float…) come from pages.css,
   which declares them on .screen as well as :root.

   Adding a new screen: draw it in a .mini figure, then add only the rules
   it needs here, scoped under .mini. See docs/platediary/website.md.
   ═══════════════════════════════════════════════════════════════════ */

/* ── the phone, parked at a scale ── */

.mini {
  --m: 0.7;
  --pad: 24px;
  position: relative;
  flex: none;
  width: calc(414px * var(--m));
  height: calc(868px * var(--m));
  margin: 0 auto;
  justify-self: center;
}

.mini .device {
  position: absolute;
  top: 0;
  left: 0;
  width: 414px;
  height: 868px;
  margin: 0;
  transform: scale(var(--m));
  transform-origin: 0 0;
  contain: layout style;
}

.mini .device__frame {
  position: absolute;
  inset: 0;
  border-radius: 64px;
  padding: 12px;
  background: #0A0D17;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--ink) 18%, #0A0D17), var(--shadow-lift),
    0 50px 120px -40px var(--glow);
}

.mini .screen {
  position: relative;
  width: 390px;
  height: 844px;
  border-radius: 52px;
  overflow: hidden;
  background: var(--surface);
  color: var(--ink);
  font: 400 15px/1.4 var(--font-ui);
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
}

.mini img {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none;
}

.mini h3,
.mini p {
  margin: 0;
}

.mini .hand {
  font-family: var(--font-hand);
  font-weight: 400;
}

.mini .caps {
  font: 600 12px/1.3 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.mini .i {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

.mini .i--sm {
  width: 16px;
  height: 16px;
}

/* ── status bar and home bar ── */

.mini .status {
  position: absolute;
  inset: 0 0 auto;
  z-index: 40;
  height: 54px;
  padding: 0 30px 0 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 600 16px/1 var(--font-ui);
  color: var(--ink);
}

.mini .island {
  position: absolute;
  left: 50%;
  top: 11px;
  width: 122px;
  height: 35px;
  margin-left: -61px;
  border-radius: 20px;
  background: #000;
}

.mini .status__icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mini .status__icons svg {
  fill: currentColor;
}

.mini .status__signal {
  width: 18px;
  height: 12px;
}

.mini .status__wifi {
  width: 16px;
  height: 12px;
}

.mini .status__plane {
  display: none;
}

.mini .status__battery {
  width: 27px;
  height: 13px;
}

.mini .homebar {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 45;
  width: 138px;
  height: 5px;
  margin-left: -69px;
  border-radius: 3px;
  background: var(--ink);
  opacity: 0.8;
}

/* Served paints the whole screen: the status bar and home bar follow it */
.mini .screen[data-ground="accent"] .status {
  color: var(--on-accent);
}

.mini .screen[data-ground="accent"] .homebar {
  background: var(--on-accent);
}

/* ── the app's own parts ── */

.mini .scr {
  position: absolute;
  inset: 0;
  padding-top: 54px;
  background: var(--surface);
  overflow: hidden;
  contain: strict;
}

.mini .scroll {
  height: 100%;
  overflow: hidden;
  padding: 8px var(--pad) 130px;
}

.mini .t-title {
  font: 500 26px/1.12 var(--font-display);
  letter-spacing: -0.01em;
}

.mini .t-heading {
  font: 500 17px/1.25 var(--font-display);
}

.mini .meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-muted);
}

.mini .eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 12px/1.2 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.mini .card {
  border-radius: 20px;
  background: var(--sheet);
  padding: 16px;
  box-shadow: var(--shadow-float);
}

.mini .btn {
  height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 15px/1 var(--font-ui);
  background: var(--raised);
}

.mini .btn--accent {
  background: var(--accent);
  color: var(--on-accent);
}

.mini .btn--lg {
  height: 52px;
  width: 100%;
  font-size: 17px;
}

.mini .btn--sm {
  height: 32px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 14px;
}

.mini .btn--quiet {
  width: 100%;
  background: var(--sunken);
  margin-top: 12px;
}

.mini .round {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--sunken);
  color: var(--ink);
}

.mini .round--raised {
  background: var(--raised);
  box-shadow: var(--shadow-float);
}

.mini .bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px 8px;
}

.mini .bar__title {
  flex: 1;
  text-align: center;
  font: 500 17px/1 var(--font-display);
}

.mini .bar--over {
  position: absolute;
  top: 54px;
  left: 0;
  right: 0;
}

.mini .field {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--sunken);
  color: var(--ink-muted);
  font-size: 15px;
}

.mini .avatar {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-text);
  font: 600 21px/1 var(--font-display);
  box-shadow: 0 0 0 3px var(--sheet);
}

.mini .avatar--xl {
  width: 104px;
  height: 104px;
  font-size: 46px;
  box-shadow: 0 0 0 5px var(--sheet), var(--shadow-float);
}

/* ── a place ── */

.mini .scr--place {
  padding-top: 0;
}

.mini .placemap {
  position: relative;
  height: 272px;
  background: color-mix(in oklab, var(--accent) 7%, var(--sunken));
  overflow: hidden;
}

.mini .placemap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mini .road {
  fill: none;
  stroke: var(--sheet);
  stroke-width: 12;
  stroke-linecap: round;
}

.mini .road--thin {
  stroke-width: 6;
}

.mini .map-water {
  fill: color-mix(in oklab, var(--accent) 22%, var(--sunken));
}

.mini .savepin {
  position: absolute;
  left: 50%;
  top: 150px;
  width: 78px;
  height: 78px;
  margin: -78px 0 0 -39px;
  border-radius: 50% 50% 50% 8px;
  transform: rotate(-45deg);
  background: var(--paper);
  box-shadow: var(--shadow-lift);
  display: grid;
  place-items: center;
  animation: pinDrop var(--t-peel) var(--peel) both;
}

.mini .savepin img {
  width: 62px;
  transform: rotate(45deg);
}

.mini .place-body {
  position: relative;
  margin-top: -26px;
  padding: 22px var(--pad) 40px;
  border-radius: 28px 28px 0 0;
  background: var(--surface);
}

.mini .place-body > .meta {
  margin: 4px 0 14px;
}

.mini .usual {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.mini .usual img {
  width: 76px;
  height: 66px;
  object-fit: contain;
}

.mini .usual p {
  display: grid;
  gap: 2px;
}

.mini .usual b {
  font-size: 23px;
  line-height: 1.15;
}

.mini .menu .t-heading {
  margin-bottom: 8px;
}

.mini .menu__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
}

.mini .menu__line span {
  font-size: 19px;
}

/* the dotted leader, as the app draws it */
.mini .menu__line i {
  flex: 1;
  height: 1px;
  border-bottom: 2px dotted var(--ink-faint);
  transform: translateY(-4px);
}

.mini .menu__line b {
  font: 600 14px/1 var(--font-ui);
  color: var(--accent-text);
}

/* Here again shows only while the place is the Ask chapter's (never, still) */
.mini .hereagain {
  display: none;
}

/* ── a companion ── */

.mini .friend {
  padding: 8px var(--pad) 40px;
  display: grid;
  justify-items: center;
  text-align: center;
}

.mini .friend .t-title {
  margin-top: 16px;
  font-size: 30px;
}

.mini .friend > .meta {
  margin: 4px 0 18px;
}

.mini .friend .card {
  width: 100%;
  text-align: left;
  margin-bottom: 12px;
}

.mini .friend > .caps {
  justify-self: start;
  margin: 6px 0 8px;
}

.mini .started__row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.mini .started__row img {
  width: 64px;
  height: 58px;
  object-fit: contain;
}

.mini .started__row p {
  display: grid;
}

.mini .started__row b {
  font-size: 21px;
}

.mini .spots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-self: start;
}

.mini .spots span {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--sheet);
  box-shadow: var(--shadow-float);
  font: 500 14px/1 var(--font-display);
}

/* ── the read, done ("Nice table.") ── */

.mini .scr--read .scroll {
  padding-top: 14px;
}

.mini .read__sub {
  margin: 4px 0 14px;
}

.mini .aibar {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 18px;
  border-radius: 20px;
  background: var(--accent-soft);
  overflow: hidden;
}

.mini .aibar__lens,
.mini .aibar__check {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sheet);
  color: var(--accent-text);
}

.mini .aibar__check {
  grid-column: 3;
  grid-row: 1;
  background: var(--accent);
  color: var(--on-accent);
}

.mini .aibar__words {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mini .aibar__line {
  font: 500 16px/1.2 var(--font-display);
  color: var(--ink);
}

.mini .aibar__sub {
  font-size: 13px;
  color: var(--ink-muted);
}

.mini .aibar__line--reading,
.mini .aibar__line--done,
.mini .aibar__sub--done,
.mini .aibar[data-state="done"] .aibar__line--idle,
.mini .aibar[data-state="done"] .aibar__sub--idle,
.mini .aibar[data-state="done"] .aibar__go,
.mini .aibar__track {
  display: none;
}

.mini .aibar[data-state="done"] .aibar__line--done,
.mini .aibar[data-state="done"] .aibar__sub--done {
  display: block;
}

.mini .aibar__go {
  grid-column: 3;
  grid-row: 1;
}

.mini .rgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.mini .rcell {
  margin: 0;
  padding: 10px 10px 12px;
  border-radius: 18px;
  background: var(--sheet);
  box-shadow: var(--shadow-float);
}

.mini .rcell:last-child {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 112px 1fr;
  align-items: center;
  gap: 12px;
}

.mini .rcell__art {
  position: relative;
  display: grid;
  place-items: center;
  height: 92px;
  border-radius: 12px;
  overflow: hidden;
}

.mini .rcell img {
  max-width: 82%;
  max-height: 88px;
  width: auto;
}

.mini .rcell__beam {
  display: none;
}

.mini .rcell.is-named {
  animation: cellFlash 900ms var(--soft) both;
}

.mini .rcell figcaption {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.mini .rcell__name {
  font-size: 18px;
  line-height: 1.15;
  color: var(--ink-faint);
}

.mini .rcell--typed .rcell__name,
.mini .rcell.is-named .rcell__name {
  color: var(--ink);
}

.mini .rcell__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font: 600 12px/1.2 var(--font-ui);
  color: var(--ink-muted);
}

.mini .rcell__cap em {
  font-style: normal;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--sunken);
}

.mini .rcell__cap em::before {
  content: '#';
  opacity: 0.6;
}

.mini .rcell__cap .rcell__suggest {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.mini .rcell__cap .rcell__suggest::before {
  content: none;
}

.mini .read__keep {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 30px;
  z-index: 2;
}

/* ── Ask PlateDiary, answered ── */

.mini .ask__left {
  font-size: 13px;
  color: var(--ink-muted);
}

.mini .ask {
  padding: 10px var(--pad) 0;
}

.mini .ask__q {
  min-height: 2.4em;
  font-size: 30px;
  line-height: 1.2;
  color: var(--ink);
}

/* "Looking through…" has finished: it keeps its room, the answer rides up */
.mini .ask__looking {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
  opacity: 0;
}

.mini .ask__answer {
  margin-top: -18px;
}

.mini .ask__a {
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
}

.mini .ask__cards {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.mini .acard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--sheet);
  box-shadow: var(--shadow-float);
}

.mini .acard img {
  width: 48px;
  height: 42px;
  object-fit: contain;
}

.mini .acard__pin {
  width: 48px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-text);
}

.mini .acard p {
  display: grid;
  gap: 1px;
}

.mini .acard b {
  font: 500 16px/1.2 var(--font-display);
}

.mini .acard b.hand {
  font: 400 19px/1.15 var(--font-hand);
}

.mini .acard span {
  font-size: 13px;
  color: var(--ink-muted);
}

.mini .ask__foot {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 30px;
}

.mini .ask__ideas {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

.mini .ask__ideas span {
  flex: none;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--sunken);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Served: the cover ── */

.mini .scr--served {
  padding-top: 0;
  background: var(--accent);
  color: var(--on-accent);
}

.mini .served__segs {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 58px;
  z-index: 3;
  display: flex;
  gap: 5px;
}

.mini .served__segs span {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: color-mix(in oklab, currentColor 28%, transparent);
}

.mini .served__segs i {
  display: block;
  height: 100%;
  background: currentColor;
  transform: translateX(-100%);
}

.mini .served__page {
  position: absolute;
  inset: 0;
  padding: 100px 30px 40px;
  display: flex;
  flex-direction: column;
  background: var(--accent);
  color: var(--on-accent);
  opacity: 0;
}

.mini .served__page.is-on {
  opacity: 1;
}

.mini .served__page--ink {
  background: var(--ink);
  color: var(--surface);
}

.mini .served__page--paper {
  background: var(--paper);
  color: #131A2E;
}

.mini .served__kicker {
  font: 600 12px/1.2 var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.78;
}

.mini .served__big {
  margin-top: 16px;
  font: 600 52px/0.98 var(--font-display);
  letter-spacing: -0.02em;
}

.mini .served__hand {
  font-size: 56px;
  line-height: 1;
}

.mini .served__pile {
  position: relative;
  flex: 1;
  margin-top: 18px;
}

/* each save's spot is inline: --l, --t, --w and --r */
.mini .served__pile img {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  transform: rotate(var(--r));
}

.mini .served__seal {
  position: relative;
  width: 168px;
  height: 168px;
  margin: 44px auto 6px;
  color: var(--accent);
}

.mini .served__seal .i {
  width: 168px;
  height: 168px;
}

.mini .served__seal .served__cloche {
  position: absolute;
  left: 44px;
  top: 40px;
  width: 80px;
  height: 80px;
  color: var(--on-accent);
}

.mini .served__page--ink .served__big {
  font-size: 40px;
  text-align: center;
}

.mini .served__line {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.45;
  text-align: center;
  opacity: 0.86;
}

.mini .served__letter {
  margin-top: 30px;
  font-size: 27px;
  line-height: 1.32;
}

.mini .served__sign {
  margin-top: 22px;
  font-size: 24px;
  color: #2F4FA0;
}

/* ── the one-time arrivals: the pin drops, the named dishes flash ── */

@keyframes pinDrop {
  from { translate: 0 -40px; opacity: 0; }
}

@keyframes cellFlash {
  from { background-color: var(--accent-soft); }
}

/* ── a course with a phone beside it (hand-written topic pages) ── */

.pd-sec--phone {
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
}

.pd-sec--phone .pd-sec__no {
  align-self: start;
}

.pd-sec--phone .mini {
  margin: 0 0 0 clamp(16px, 4vw, 56px);
}

@media (max-width: 899px) {
  .mini {
    --m: 0.56;
  }

  .pd-sec--phone {
    grid-template-columns: minmax(0, 1fr);
  }

  .pd-sec--phone .mini {
    margin: 32px auto 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mini .savepin,
  .mini .rcell.is-named {
    animation: none;
  }
}