/* Drawn things: the printed tag, photo slots, rails. (Device frames join
   this file as the chapters need them.) Tags are always black on white,
   whatever the stage. */

/* ── the tag ── */
.tag {
  position: relative; display: block;
  width: var(--tag-w, 150px); aspect-ratio: 3 / 5;
  padding: 0; border: 0; background: none;
  font-family: var(--font-sans);
  font-size: calc(var(--tag-w, 150px) / 9.4);
  line-height: 1.2;
  color: var(--tag-ink);
  text-align: left;
  perspective: 900px;
  -webkit-tap-highlight-color: transparent;
}
button.tag { cursor: pointer; }
button.tag:focus-visible { outline: none; }
button.tag:focus-visible .tag-face { outline: 2px solid var(--accent); outline-offset: 3px; }
.tag-card {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
}
.tag.is-turned .tag-card { transform: rotateY(180deg); }
html.reduced .tag-card { transition: none; }
.tag-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: 2.3em .85em .75em;
  border-radius: .8em;
  background: var(--tag-paper);
  box-shadow: 0 1px 1px rgba(0,0,0,.06), 0 14px 26px -16px rgba(20,29,35,.5);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.tag-back { transform: rotateY(180deg); gap: .5em; }
.tag-hole {
  position: absolute; top: .85em; left: 50%;
  width: .8em; height: .8em; margin-left: -.4em;
  border-radius: 50%;
  background: var(--ground, #F5F4F1);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.tag-brand { font-weight: 600; font-size: 1.02em; letter-spacing: -0.01em; }
.tag-meta {
  margin-top: .3em;
  font-family: var(--font-mono); font-size: .6em; letter-spacing: .08em;
}
.tag-price {
  margin-top: .55em;
  font-family: var(--font-mono); font-weight: 600; font-size: 1.05em;
  font-variant-numeric: tabular-nums;
}
.tag .barcode { display: block; width: 100%; height: 2.7em; margin-top: auto; }
.tag-no {
  margin-top: .3em; text-align: center;
  font-family: var(--font-mono); font-size: .66em; letter-spacing: .14em;
}
.tag-what { font-size: .68em; line-height: 1.35; color: #3B4248; }

/* Landscape: the 62 × 29 mm label preview. */
.tag-landscape { aspect-ratio: 62 / 29; }
.tag-landscape .tag-face { padding: .7em .9em; }
.tag-landscape .tag-hole { display: none; }

/* ── photo slots: a placeholder until photos.json names the file ── */
.photo {
  position: relative; display: block;
  aspect-ratio: 4 / 5; width: 100%;
  border-radius: .5em; overflow: hidden;
  background-color: var(--surface-2, #ECECE9);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23A9B0B4' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M38 18 30 22 14 34l8 14 9-6v42h38V42l9 6 8-14-16-12-8-4c-2 6-7 9-12 9s-10-3-12-9Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 46%;
}
.tag .photo { background-color: #ECECE9; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── the iPhone ──
   The screen is drawn at its real size, 393 × 852, in .inner, and scaled
   to the frame's width --pw (unitless px). A data-stage on .phone themes
   the app inside: morning for Opening hours, night for After hours. */
.phone {
  --pw: 330;
  position: relative; flex: none;
  width: calc(var(--pw) * 1px);
  height: calc(var(--pw) * 2.102px);
  border-radius: calc(var(--pw) * .16px);
  background: #10171B;
  box-shadow: var(--shadow-device), inset 0 0 0 1.5px #2C373D, inset 0 0 0 4px #10171B, inset 0 0 0 5px #222B30;
  color: var(--ink);
}
html:not(.motion) .phone[data-stage] { background-color: #10171B; }
.phone .inner {
  position: absolute; left: calc(var(--pw) * .028px); top: calc(var(--pw) * .028px);
  width: 393px; height: 852px;
  transform-origin: 0 0; transform: scale(calc(var(--pw) * .944 / 393));
  border-radius: 50px; overflow: hidden;
  background: var(--ground);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.35; text-align: left;
}
.phone .island {
  position: absolute; z-index: 20; top: 11px; left: 50%;
  width: 122px; height: 36px; margin-left: -61px;
  border-radius: 20px; background: #000;
}
.phone .statusbar {
  position: absolute; z-index: 19; top: 15px; left: 38px; right: 30px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
}
.phone .sb-icons { display: flex; gap: 5px; align-items: center; }
.phone .sb-icons i { display: block; width: 17px; height: 11px; border-radius: 3px; background: currentColor; }
.phone .sb-icons i:nth-child(1) { width: 16px; clip-path: polygon(0 100%, 100% 0, 100% 100%); border-radius: 1px; }
.phone .sb-icons i:nth-child(2) { width: 15px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.phone .sb-icons i:nth-child(3) { width: 25px; height: 12px; border-radius: 4px; background: none; box-shadow: inset 0 0 0 1.4px currentColor, inset 0 0 0 3px transparent; position: relative; }
.phone .sb-icons i:nth-child(3)::after { content: ""; position: absolute; inset: 2.5px 6px 2.5px 2.5px; border-radius: 2px; background: currentColor; }
.phone .layer { position: absolute; inset: 0; }

/* The app, in the phone. */
.phone .brandchip {
  display: inline-flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 14px 0 8px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line-soft);
  font-family: var(--font-word); font-weight: 700; font-size: 14px; letter-spacing: -0.02em;
}
.phone .brandchip .lockup-tile { width: 22px; height: 22px; border-radius: 5px; }
.phone .app-title { margin-top: 18px; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.phone .app-sub { margin-top: 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.phone .card { margin-top: 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-soft); }
.phone .q { color: var(--warn); font-weight: 700; display: inline-block; }
.app-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 22px; border-radius: 999px; font-size: 16px; font-weight: 600; white-space: nowrap;
}
.app-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-btn.primary { background: var(--accent); color: var(--on-accent); }
.app-btn.ghost { color: var(--accent); }
.phone .tabbar {
  position: absolute; z-index: 18; left: 16px; right: 16px; bottom: 22px;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: 66px; padding: 6px; border-radius: 33px;
  background: var(--glass); border: 1px solid var(--line-soft);
  box-shadow: 0 10px 30px -14px rgba(20,29,35,.4);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
}
.phone .tabbar span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border-radius: 27px; font-size: 10px; font-weight: 600; color: var(--muted);
}
.phone .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.phone .tabbar .on { color: var(--accent); background: var(--accent-tint); }

/* Status pills, as the app draws them. */
.pill { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 500; letter-spacing: .06em; white-space: nowrap; }
.pill.good { background: var(--good-tint); color: var(--good); }
.pill.warn { background: var(--warn-tint); color: var(--warn); }
.pill.teal { background: var(--accent-tint); color: var(--accent); }
.pill.grey { background: var(--surface-2); color: var(--muted); }

/* ── the browser window (the app on a laptop) ── */
.browser {
  position: relative; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--line);
  background: var(--ground); color: var(--ink);
  box-shadow: var(--shadow-device);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.35; text-align: left;
}
.br-bar {
  position: relative; display: flex; align-items: center; height: 40px; padding: 0 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--line-soft);
}
.br-dots { display: flex; gap: 7px; }
.br-dots i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; }
.br-dots i:nth-child(2) { background: #FEBC2E; }
.br-dots i:nth-child(3) { background: #28C840; }
.br-addr {
  position: absolute; left: 50%; transform: translateX(-50%);
  padding: 4px 40px; border-radius: 8px; background: var(--surface);
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
}
.br-body { padding: 20px; }

/* The app's desktop layout: a white sidebar and the screen beside it. */
.browser.desktop .br-app { position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); }
.browser .sidebar {
  display: flex; flex-direction: column; gap: 2px; padding: 16px 10px;
  background: var(--surface); border-right: 1px solid var(--line-soft);
}
.browser .sb-brand { display: flex; align-items: center; gap: 8px; padding: 0 6px 14px; font-family: var(--font-word); font-weight: 700; font-size: 14px; letter-spacing: -0.02em; }
.browser .sb-brand .lockup-tile { width: 20px; height: 20px; border-radius: 5px; }
.browser .sb-row { padding: 8px 10px; border-radius: 10px; font-size: 13px; color: var(--muted); }
.browser .sb-row.on { background: var(--accent-tint); color: var(--accent); font-weight: 600; }

/* ── rails: a bar, and tags hanging from it on strings ── */
.rail { position: relative; height: 100%; }
.rail-bar {
  position: absolute; left: 0; right: 0; top: 0; height: 6px;
  border-radius: 3px; background: var(--ink); opacity: .85;
}
.hang {
  position: absolute; top: 3px; left: var(--x);
  width: var(--tag-w, 150px); margin-left: calc(var(--tag-w, 150px) / -2);
  transform-origin: 50% 0;
}
.hang .tag { margin-top: var(--len); }
.hang .string {
  position: absolute; top: 0; left: 50%; z-index: 1;
  width: 1px; height: calc(var(--len) + var(--tag-w, 150px) * .135);
  background: var(--muted);
  pointer-events: none;
}
/* The shadow on the wall follows the sun (day.js sets --sun and
   --shadow-alpha): short and to the right in the morning, long and to the
   left by late afternoon, gone at dusk. */
.hang .shadow {
  position: absolute; left: 0; top: var(--len); z-index: -1;
  width: 100%; aspect-ratio: 3 / 5; border-radius: 12px;
  background: rgba(20,29,35,.32);
  filter: blur(calc(10px + 8px * var(--sun, 0)));
  transform: translate(calc(8px - 36px * var(--sun, 0)), calc(8px + 6px * var(--sun, 0)));
  opacity: calc(.55 * var(--shadow-alpha, 1));
  pointer-events: none;
}