/* The app screen at iPhone 17 Pro logical size (402 x 874 pt), dark scheme.
   Sizes come from Sources/NaveDesign/NaveFont.swift and NaveDisplay.swift;
   colours from design/ios/theme.jsx THEMES.dark. */

.device {
  --s: 1;
  --app-bg: #000000;
  --app-card: #1A1A1D;
  --app-ink: #F2F1EE;
  --app-text: rgba(255, 255, 255, 0.94);
  --app-text2: rgba(255, 255, 255, 0.68);
  --app-text3: rgba(255, 255, 255, 0.34);
  --app-hair: rgba(255, 255, 255, 0.10);
  --app-hair2: rgba(255, 255, 255, 0.06);
  --app-fill: rgba(255, 255, 255, 0.08);
  --app-fill2: rgba(255, 255, 255, 0.12);
  --app-bar: rgba(24, 24, 27, 0.80);
  --app-ember: #AA2D00;
  --app-ember-lit: #FF5314;
  --app-sage: #8FA894;
  flex: none;
  width: calc(422px * var(--s));
  height: calc(894px * var(--s));
}

/* Just over half the window. It was 55svh, which together with the words, the
   bar and the footnote came to more than a laptop window holds once the hero
   also keeps clear of the masthead — the tour bar went off the bottom edge. */
.device--hero {
  --s: 0.78;
  height: clamp(300px, 50vh, 600px);
  height: clamp(300px, 50svh, 600px);
  overflow: hidden;
}

/* The hero screen gets what the words and the bar leave it, and on a phone that
   is the tighter constraint. It has to be said here rather than in styles.css:
   this file loads second, so a `.device--hero` height there loses to this one at
   the same specificity — the height rules in the page's own short-screen queries
   never reached a phone at all. */
@media (max-width: 560px) {
  .device--hero {
    --s: 0.68;
    height: clamp(280px, 44vh, 430px);
    height: clamp(280px, 44svh, 430px);
  }
}

/* A short phone cannot hold the screen, five lines of words, the bar and the
   footnote at that size, and the reel pins the hero to exactly one viewport —
   what does not fit is cut rather than scrolled to. So the screen gives way. */
@media (max-width: 560px) and (max-height: 740px) {
  .device--hero {
    --s: 0.60;
    height: clamp(190px, 33vh, 300px);
    height: clamp(190px, 33svh, 300px);
  }
}

@media (max-width: 560px) and (max-height: 620px) {
  .device--hero {
    --s: 0.52;
    height: clamp(150px, 26vh, 220px);
    height: clamp(150px, 26svh, 220px);
  }
}

/* Held sideways the hero turns and the screen stands beside the words, so it
   can take nearly the whole height — but narrower, to leave the words a column
   worth reading. Pairs with the landscape hero in styles.css. */
@media (orientation: landscape) and (max-height: 620px) and (min-width: 640px) {
  .device--hero {
    --s: 0.62;
    height: clamp(170px, 80vh, 300px);
    height: clamp(170px, 80svh, 300px);
  }
}

.device__body {
  width: 422px;
  height: 894px;
  padding: 10px;
  border-radius: 62px;
  background: #17161A;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(245, 243, 239, 0.14),
    inset 0 0 0 1px rgba(245, 243, 239, 0.08);
  transform: scale(var(--s));
  transform-origin: top left;
}

.screen {
  position: relative;
  width: 402px;
  height: 874px;
  border-radius: 52px;
  overflow: hidden;
  background: var(--app-bg);
  color: var(--app-text);
  text-align: left;
  font-size: 15px;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
}

.island {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 125px;
  height: 36px;
  border-radius: 18px;
  background: #000;
  z-index: 3;
}

.statusbar {
  flex: none;
  height: 56px;
  padding: 14px 30px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--app-ink);
  font-variant-numeric: tabular-nums;
}

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

.scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 20px;
}


.tabs {
  flex: none;
  position: relative;
  height: 90px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  padding-top: 9px;
  background: var(--app-bar);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--app-hair);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--app-text3);
}

.tab__label { font-size: 12px; font-weight: 500; letter-spacing: 0.1px; }

.tab--on { color: var(--app-ember-lit); }
.tab--on .tab__label { font-weight: 600; }

.tab__pip {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--app-ember-lit);
  margin-top: 1px;
  opacity: 0;
}
.tab--on .tab__pip { opacity: 1; }

.tab__icon { position: relative; }

.tab__badge {
  position: absolute;
  top: -5px;
  right: -9px;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  background: var(--app-ember);
  color: #FDF6F2;
  font-size: 10.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0 4px;
}

.capture {
  position: absolute;
  left: 50%;
  top: -3px;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #121214;
  border: 2px solid var(--app-ember-lit);
  color: var(--app-ember-lit);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 22px rgba(170, 45, 0, 0.5);
}

.home {
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  width: 140px;
  height: 5px;
  border-radius: 3px;
  background: var(--app-ink);
  opacity: 0.35;
}

.device__body {
  background:
    linear-gradient(150deg, rgba(255, 83, 20, 0.4), rgba(23, 22, 26, 0) 38%),
    #17161A;
}

.back {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 17px;
  letter-spacing: -0.4px;
  color: var(--app-ember-lit);
  padding: 4px 0 14px;
}

.state {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding-bottom: 10px;
}

.state__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--app-ember-lit);
}

.state__word {
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--app-text2);
}

.state__when { color: var(--app-text3); }

.thread__title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--app-ink);
  line-height: 1.2;
  padding-bottom: 14px;
}

.stance {
  background: var(--app-card);
  border-radius: 18px;
  padding: 16px 18px 18px;
}

.stance__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--app-ember-lit);
  padding-bottom: 8px;
}

.stance__body { font-size: 16.5px; line-height: 1.4; color: var(--app-text); }

.sec {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--app-text3);
  padding: 18px 0 10px;
}

.moved { padding-left: 0; }

.step {
  position: relative;
  padding: 0 0 12px 30px;
}

.step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6B6B6B;
}

.step::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 16px;
  bottom: 2px;
  width: 1px;
  background: var(--app-hair);
}

.step:last-child { padding-bottom: 4px; }
.step:last-child::after { display: none; }

.step--now::before { background: var(--app-ember-lit); }

.step time {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--app-text3);
  margin-bottom: 2px;
}

.step p { font-size: 16px; line-height: 1.35; color: var(--app-text); }

.note {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  padding: 4px 0 14px;
}

.note__when {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--app-text3);
  padding-top: 4px;
}

.note__kind { display: block; margin-top: 5px; }

.note__title {
  font-family: var(--serif);
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--app-ink);
  line-height: 1.25;
}

.note__summary {
  font-size: 15px;
  color: var(--app-text2);
  margin-top: 3px;
  line-height: 1.35;
}

.note__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 83, 20, 0.16);
  border: 1px solid rgba(255, 83, 20, 0.32);
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: #F0D8CE;
}

.note__chip-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--app-ember-lit);
}

/* ── One frame, every section ─────────────────────────── */

/* Every section shows the same object: same width, cut at the same line, with
   the page's own dark closing over the bottom edge. The phone keeps its full
   height inside the stage and the stage does the cutting — which is also what
   gives it somewhere to rise from. */
.stage {
  --s: 0.6;
  position: relative;
  width: calc(422px * var(--s));
  height: 404px;
  overflow: hidden;
}

/* The stage is the only place the scale is written down. */
.device--side { --s: inherit; }

.stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 170px;
  background: linear-gradient(to top,
    var(--bg) 14%, rgba(8, 7, 10, 0.72) 52%, rgba(8, 7, 10, 0));
  pointer-events: none;
}

@media (max-width: 560px) {
  .stage { --s: 0.52; height: 350px; }
}

/* ── Notes list ───────────────────────────────────────── */

/* NaveHeader: the space chip, the title, the count. Sizes are NaveFont's —
   headerTitle 26, spaceChip 13, headerCount 15. */
.hd { padding: 4px 0 12px; }

.hd__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--app-text2);
  padding-bottom: 3px;
}

.hd__dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--app-ember-lit);
}

.hd__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.4px;
  line-height: 1.16;
  color: var(--app-text);
}

/* HeaderNote speaks in the app's voice, so it is set in the serif. */
.hd__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--app-text2);
  margin-top: 3px;
}

.hd__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hd__count { font-size: 15px; color: var(--app-text2); margin-top: 2px; }
.hd__tools { display: flex; gap: 8px; }

.hd__tool {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--app-fill);
  color: var(--app-text2);
  display: grid;
  place-items: center;
}

.hd__dot--grey { background: #8A8A8E; }

.daily {
  margin: 14px 0 4px;
  padding: 14px 16px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 83, 20, 0.16), rgba(26, 26, 29, 0.9) 62%);
  border: 1px solid rgba(255, 83, 20, 0.18);
}

.daily__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--app-ember-lit);
  padding-bottom: 8px;
}

.daily__body {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.3;
  color: var(--app-ink);
}

.day-head {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--app-ember-lit);
  padding: 18px 0 6px;
}

.day-head--quiet { color: var(--app-text3); }

/* ── Actions ──────────────────────────────────────────── */

.task {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 11px 0 13px;
  border-bottom: 1px solid var(--app-hair);
}

.task__box {
  width: 23px;
  height: 23px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1.8px solid var(--app-text3);
}

.task--done .task__box {
  border-color: #2F7A4A;
  background: #2F7A4A;
  color: #FFFFFF;
  display: grid;
  place-items: center;
}

.task__text { font-size: 16px; line-height: 1.35; color: var(--app-text); }
.task--done .task__text { color: var(--app-text3); text-decoration: line-through; }

.task__from {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--app-text3);
  margin-top: 3px;
}

/* ── Spaces ───────────────────────────────────────────── */

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.tile {
  border-radius: 18px;
  background: var(--app-card);
  border: 1px solid transparent;
  padding: 14px;
}

.tile--current { border-color: rgba(255, 255, 255, 0.22); }

.tile__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.tile__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--app-fill);
  color: var(--app-text2);
  flex: none;
}

.tile__icon--ember { background: rgba(255, 83, 20, 0.16); color: var(--app-ember-lit); }
.tile__icon--sage { background: rgba(143, 168, 148, 0.16); color: var(--app-sage); }

.tile__name { display: block; font-size: 17px; font-weight: 700; color: var(--app-ink); }
.tile__now { display: block; font-size: 13px; font-weight: 600; color: var(--app-text2); }

.tile__chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--app-hair);
  margin-bottom: 10px;
}

.tile__chart i { flex: 1; border-radius: 2px; background: #8A8A8E; }
.tile__chart--ember i { background: #C2724F; }
.tile__chart--sage i { background: #8FA894; }

.tile__chart .b1 { height: 12%; }
.tile__chart .b2 { height: 26%; }
.tile__chart .b3 { height: 40%; }
.tile__chart .b4 { height: 54%; }
.tile__chart .b5 { height: 72%; }
.tile__chart .b6 { height: 92%; }
.tile__chart .b7 { height: 62%; }

.tile__stats { display: flex; gap: 12px; font-size: 12.5px; color: var(--app-text2); }
.tile__stats b { font-size: 16px; color: var(--app-ink); margin-right: 3px; }

.tile-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 16px;
  border: 1px dashed var(--app-hair);
  border-radius: 18px;
  font-size: 16px;
  color: var(--app-text2);
}

/* ── Calendar ─────────────────────────────────────────── */

.cal__bar { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 12px; }
.back--flush { padding: 0; }
.cal__arrows { display: flex; gap: 16px; color: var(--app-ember-lit); }

.cal__week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--app-text3);
  text-align: center;
}

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.day {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  background: #141416;
  color: var(--app-text2);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.day i {
  position: absolute;
  bottom: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.day--void { background: none; }
.day--has { background: #2A2A2E; color: var(--app-ink); }
.day--future { color: var(--app-text3); background: #101012; }

.day--today {
  background: var(--app-ember);
  color: #FFFFFF;
  font-weight: 700;
}

/* ── Threads list ─────────────────────────────────────── */

/* ThreadListRow: a status dot, the thread's sentence, its count and when it
   last moved. The dot is the whole status vocabulary — filled and haloed for
   active, a ring for stalled, a thin outline for dormant. */
.trow {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) 17px;
  align-items: start;
  gap: 12px;
  padding: 11px 6px;
  border-bottom: 1px solid var(--app-hair);
}

.tdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 7px;
  background: var(--app-ember-lit);
  box-shadow: 0 0 0 3px rgba(255, 83, 20, 0.18);
}

.tdot--stalled {
  background: none;
  border: 2px solid var(--app-text2);
  box-shadow: none;
}

.tdot--dormant {
  background: none;
  border: 1px solid var(--app-text3);
  box-shadow: none;
}

.trow__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--app-ink);
}

.trow--dormant .trow__name { color: var(--app-text2); }

.trow__meta {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--app-text2);
  margin-top: 3px;
}

.trow__go { color: var(--app-text3); margin-top: 5px; }

/* ── Pages inside one screen ──────────────────────────── */

/* The reel keeps a single phone and changes what is on it. The page fills the
   screen between the status bar and the tab bar exactly as one `.scroll` used
   to, so nothing about the frame knows there is more than one. */
.pages {
  position: relative;
  flex: 1;
  min-height: 0;
}

.page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Without the script the phone can only show one thing, so it shows the first
   and the five descriptions read down the page underneath it. */
.page ~ .page { display: none; }