@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&display=swap');

/*
 * Tip 015: UI continuity, shown in Margins, a small reading app with its
 * own quiet visual language:
 *
 *   page    #eff2ef  a lightly green-grey page behind everything
 *   cards   #ffffff  white, without shadows; only the floating menu lifts
 *   ink     #18181b  type, icons, filled controls and the dock
 *   green   #3f7a57  the one accent: progress, the chart, the search ring
 *   type    Inter only: 32/40 titles, 20/28 sections, 17/24 body,
 *           15/20 detail, 13/16 for axis letters and dock labels
 *
 * Every corner, capsules and circles included, is continuous (the
 * superellipse from _base). Nested rounded shapes keep equal padding on
 * every side and concentric corners: the inner radius is the outer radius
 * less the padding.
 */

.tip-stage {
  --sans: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --scene-h: 1060px;
  --page: #eff2ef;
  --card: #ffffff;
  --fill: #e4e9e5;
  --ink: #18181b;
  --ink-2: #63666b;
  --ink-3: #a3a7ab;
  --accent: #3f7a57;
  --accent-soft: #dbe8df;
  --red: #c8473c;
  padding: 0;
  background: #141416;
  font-family: var(--sans);
}

.tip-stage:has(> .tip-credit) { padding: 0; }

/* ---------- Scene and phone ---------- */

.scene {
  position: absolute;
  inset: 0 0 auto;
  height: var(--scene-h);
  overflow: hidden;
  background: url('./media/backdrop.webp') center / cover no-repeat;
}

/* demo.js scales the phone from its top-left corner to push in. */
.phone {
  position: absolute;
  transform-origin: 0 0;
  left: 313px;
  top: 52px;
  width: 454px;
  height: 956px;
  padding: 12px;
  border-radius: 67px;
  background: #0c0c0d;
  box-shadow: 0 0 0 2px #2b2b2e, 0 40px 90px -30px rgba(20, 20, 24, 0.55);
}

.screen {
  position: relative;
  width: 430px;
  height: 932px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 55px;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* An iPhone screen corner on Apple's continuous curve; see 014. */
@supports (corner-shape: superellipse(1.7)) {
  .phone { --lumno-corner-shape: superellipse(1.7); border-radius: 103px; }
  .screen { --lumno-corner-shape: superellipse(1.7); border-radius: 84px; }
}

.status {
  position: absolute;
  z-index: 25;
  inset: 0 0 auto;
  height: 54px;
  color: var(--ink);
  pointer-events: none;
}

.status-time { position: absolute; left: 50px; top: 18px; font: 600 16px/20px var(--sans); letter-spacing: -0.2px; }

.status-right {
  position: absolute;
  right: 32px;
  top: 21px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-right svg { width: 18px; height: 12px; fill: currentColor; }
.status-right svg + svg { width: 16px; }

.battery {
  position: relative;
  display: block;
  width: 27px;
  height: 13px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px currentColor;
  opacity: 0.9;
}

.battery i { position: absolute; inset: 2px 5px 2px 2px; border-radius: 2px; background: currentColor; }

.island {
  position: absolute;
  z-index: 30;
  left: 152px;
  top: 11px;
  width: 126px;
  height: 37px;
  border-radius: 18.5px;
  background: #000;
  --lumno-corner-shape: round;
}

.home-bar {
  position: absolute;
  z-index: 25;
  left: 143px;
  bottom: 8px;
  width: 144px;
  height: 5px;
  border-radius: 3px;
  background: var(--ink);
  --lumno-corner-shape: round;
}

.screen[data-tone="light"] .status { color: #fff; }
.screen[data-tone="light"] .home-bar { background: #fff; }

.touch {
  position: absolute;
  z-index: 40;
  left: -27px;
  top: -27px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(24, 24, 27, 0.14);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 2px 10px rgba(0, 0, 0, 0.16);
  opacity: 0;
  pointer-events: none;
  --lumno-corner-shape: round;
}

/* ---------- Views and type ---------- */

.views, .view { position: absolute; inset: 0; }

/* Each screen is its own stack, so a raised card in one never shows above
   the next screen while they cross-fade. */
.view { overflow: hidden; isolation: isolate; opacity: 0; background: var(--page); }

.view > *, .layer > *, .page > *, .group > *, .player > *, .sheet-inner > *,
.tile > *, .menu-inner > * { position: absolute; margin: 0; }

.page { inset: 0; overflow: hidden; background: var(--page); transform-origin: 50% 50%; }
.page.is-pushed { box-shadow: -1px 0 0 rgba(0, 0, 0, 0.05); }

.title, .section, .body, .sub, .count, .label, .value, .card-title, .player-title, .link, .axis {
  white-space: nowrap;
  transform-origin: 0 0;
}

.title { font: 600 32px/40px var(--sans); letter-spacing: -0.025em; }
.section { font: 600 20px/28px var(--sans); letter-spacing: -0.015em; }
/* Titles, sections and list titles share one weight, so a row's name can grow into a page title. */
.body { font: 600 17px/24px var(--sans); letter-spacing: -0.015em; }
.note-text { font: 500 17px/24px var(--sans); letter-spacing: -0.015em; }
.sub { color: var(--ink-2); font: 400 15px/20px var(--sans); letter-spacing: -0.01em; }
.count { color: var(--ink-3); font: 500 17px/24px var(--sans); font-variant-numeric: tabular-nums; }
.link { color: var(--ink); font: 500 15px/20px var(--sans); letter-spacing: -0.01em; }
.axis { width: 40px; color: var(--ink-3); font: 500 13px/16px var(--sans); text-align: center; }

.ic {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chev { display: block; line-height: 0; color: var(--ink-3); }
.rule { height: 0.5px; background: rgba(0, 0, 0, 0.1); }
.cover { background: #dfe3e0 center / cover no-repeat; }

/* White on the tinted page, without shadows. */
.group { border-radius: 20px; background: var(--card); }

.bar { height: 4px; overflow: hidden; border-radius: 2px; background: var(--fill); }
.bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.bar.is-deep i { background: var(--ink); }

.avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font: 600 16px/1 var(--sans);
}

/* ---------- Controls: everything on the control row is 40 tall ---------- */

.topbar {
  left: 0;
  top: 0;
  width: 430px;
  background: var(--page);
  box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.1);
  opacity: 0;
}

/* The dock: one for every page, 60 tall with 8 of padding. demo.js places
   the items and the white capsule under the open one. */
.dock {
  position: absolute;
  z-index: 20;
  left: 20px;
  top: 836px;
  width: 390px;
  height: 60px;
  border-radius: 30px;
  background: var(--ink);
}

.dock-cap { position: absolute; background: #fff; }

/* 11 + a 22 icon + 11 is a square 44; the label shows once it widens. */
.dock-item {
  position: absolute;
  top: 8px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 11px;
  overflow: hidden;
  white-space: nowrap;
}

.dock-item svg { flex: none; }
/* A label only shows on the white capsule, so it is always ink. */
.dock-item b { color: var(--ink); font: 600 15px/20px var(--sans); }

.pill {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 16px 0 10px;
  border-radius: 20px;
  background: var(--card);
  color: var(--ink);
}

.pill.is-fill { background: var(--page); }
.pill b { font: 500 15px/20px var(--sans); letter-spacing: -0.01em; }

.round {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
}

/* ---------- Card ---------- */

.group.is-story { z-index: 3; overflow: hidden; }
.shade { background: linear-gradient(rgba(0, 0, 0, 0.36), transparent); }
.card-title { width: 358px; font: 600 22px/28px var(--sans); letter-spacing: -0.02em; white-space: normal; }
.essay { width: 390px; color: var(--ink); font: 400 17px/28px var(--sans); letter-spacing: -0.01em; }
.essay p { margin: 0 0 16px; }

/* ---------- Player ---------- */

.dim { z-index: 2; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.player { z-index: 3; overflow: hidden; background: var(--card); }
/* Centred on the control row, clear of the camera cutout. */
.grabber { left: 195px; top: 74px; width: 40px; height: 4px; border-radius: 2px; background: rgba(0, 0, 0, 0.16); }
.player-title { font: 600 24px/32px var(--sans); letter-spacing: -0.02em; }
.play-btn { display: grid; place-items: center; background: var(--ink); color: #fff; }

/* ---------- Search ---------- */

.quote { width: 358px; color: var(--ink); font: 500 16px/24px var(--sans); letter-spacing: -0.01em; }

mark {
  border-radius: 4px;
  background: rgba(63, 122, 87, calc(var(--hit, 0) * 0.2));
  color: inherit;
}

.field {
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  overflow: hidden;
  background: var(--card);
  color: var(--ink-3);
}

.field-text { flex: 1; color: var(--ink); font: 400 15px/20px var(--sans); white-space: nowrap; }
.field-text b { font-weight: 400; }
.field-text .ph { color: var(--ink-3); }
.caret { display: inline-block; width: 2px; height: 20px; margin-right: 2px; vertical-align: -4px; border-radius: 1px; background: var(--accent); }

/* ---------- Chart ---------- */

.group.is-sheet { z-index: 3; overflow: hidden; }
.sheet-inner { width: 430px; height: 932px; }

.label { color: var(--ink-2); font: 500 15px/20px var(--sans); letter-spacing: -0.01em; }
.value { font: 600 32px/40px var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

.chart { left: 0; top: 0; width: 430px; height: 932px; overflow: visible; pointer-events: none; }
.chart-bar { position: absolute; z-index: 1; background: var(--accent); }
.chart-avg { stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 4 4; }

/* 40 tall with 4 of padding: each 32 segment sits 4 from every edge. */
.segment {
  display: flex;
  width: 390px;
  height: 40px;
  padding: 4px;
  border-radius: 20px;
  background: var(--page);
}

.segment span {
  flex: 1;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--ink-2);
  font: 600 15px/20px var(--sans);
}

.segment span.is-on { background: var(--ink); color: #fff; }

.note { border-radius: 20px; background: var(--page); }

.bubble {
  width: 104px;
  height: 32px;
  border-radius: 16px;
  background: var(--ink);
  color: #fff;
  font: 600 13px/32px var(--sans);
  text-align: center;
  white-space: nowrap;
}

/* ---------- Menu ---------- */

.tile { width: 122px; height: 188px; transform-origin: 50% 40%; }
.tile-name { left: 0; top: 168px; width: 122px; overflow: hidden; color: var(--ink); font: 500 15px/20px var(--sans); white-space: nowrap; }

.blank {
  left: 0;
  top: 0;
  width: 122px;
  height: 160px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--card);
  color: var(--ink-3);
}

.menu { z-index: 4; overflow: hidden; background: var(--card); }
.menu-dots { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); }
.menu-inner { position: absolute; top: 0; right: 0; }

/* Rows inset 8 from the menu's edge; the highlight's radius is the menu's
   20 less that 8. */
.menu-hl { left: 8px; right: 8px; height: 44px; border-radius: 12px; background: var(--page); opacity: 0; }

.menu-item {
  left: 8px;
  right: 8px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  color: var(--ink);
  font: 500 15px/20px var(--sans);
  white-space: nowrap;
}

.menu-item svg { color: var(--ink-2); }
.menu-item.is-red, .menu-item.is-red svg { color: var(--red); }

/* ---------- The board ---------- */

.board {
  position: absolute;
  inset: var(--scene-h) 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: 44px;
  row-gap: 28px;
  padding: 40px 60px 0;
  background: #141416;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06);
  color: #e4e4e7;
}

.kinds {
  grid-column: 1 / -1;
  position: relative;
  justify-self: start;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
}

/* Placed on the current tab by demo.js. */
.kinds-pill {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
}

.kind {
  position: relative;
  padding: 10px 16px;
  color: rgba(255, 255, 255, 0.5);
  font: 600 18px/1 var(--sans);
  letter-spacing: -0.01em;
  cursor: pointer;
}

.kind.is-on { color: #ffffff; }

.about { min-width: 0; }


.about-use {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font: 500 24px/1.4 var(--sans);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.code {
  margin: 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #d4d4d8;
  font: 500 15px/1.8 var(--tip-font-mono);
  font-variant-ligatures: none;
  white-space: pre;
}

.code i { font-style: normal; }
.code .num { color: #f6c177; }
.code .cmt { color: rgba(255, 255, 255, 0.4); }

.tip-credit { bottom: 26px; color: rgba(255, 255, 255, 0.42); }
.tip-credit img { opacity: 0.42; }