/*
 * The app's own screens, drawn.
 *
 * These are the app, so they keep the app's palette and type inside the
 * bezel whatever the page around them wears: app/Ahonui/Theme.swift, light.
 * The rules below came from the old stylesheet as they were, and the tokens
 * they ask for are set here, on the phone, rather than on the page.
 */
.phone {
  --ground: #f6f1e7;
  --surface: #ece5d6;
  --ink: #17171a;
  --ink2: #46423c;
  --ink3: #6c6762;
  --ink4: #c4beb6;
  --green: #456b57;
  --red: #a2453a;
  --gold: #72612e;
  --rule: rgba(23, 23, 26, 0.22);
  --lava: #f26a1b;
  --on-lava: #17171a;
  --cream: #f6f1e7;
  --cream-ink: #17171a;
  --cream-ink2: #46423c;
  --cream-ink3: #6c6762;
  --cream-green: #456b57;
  --bezel: #15130f;
  --bezel-edge: transparent;
  /* The display face, as the app has it now; the name is the old one. */
  --serif: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", Helvetica, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ink);
  font-family: var(--sans);
}

/* ---------- The break, running ----------
 *
 * Drawn from app/Ahonui/BreakTakeover.swift. A running break takes the whole
 * app, and what is left on the screen is the clock, what it holds, and the
 * one way out it has. So this frame has nothing else on it either.
 *
 * The clock is mono, like every counting number in the app, and it is the
 * one big figure on this screen.
 */

.screen.is-break {
  background: var(--ground);
}

.takeover {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 0 8cqw;
  gap: 0;
}

.takeover .cap {
  font-family: var(--mono);
  font-size: 2.9cqw;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink3);
  margin: 0;
}

.takeover .clock {
  font-family: var(--mono);
  font-size: 15cqw;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 3cqw 0 0;
}

.takeover .holds {
  font-size: 3.4cqw;
  line-height: 1.45;
  color: var(--ink2);
  margin: 3.5cqw 0 0;
  max-width: 62cqw;
}

/* Held, not tapped: the gesture is the whole point of it, so the button
   says so. A bar fills across it in the app; here it is at rest. */
.takeover .hold {
  margin-top: 9cqw;
  width: 100%;
  padding: 4cqw 4cqw;
  border: 1px solid var(--ink3);
  border-radius: 1.6cqw;
  background: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 3.8cqw;
  font-weight: 600;
}

/* The quietest control on the screen, deliberately. */
.takeover .aside {
  margin: 5cqw 0 0;
  font-size: 3.4cqw;
  color: var(--ink3);
}

/* ---------- The block, lifted ----------
 *
 * The payoff for the frosted screen four moments earlier: no veil, no
 * shield, the app simply there and crisp, with the one line the app says
 * when a block comes off. The contrast between the two frames is the whole
 * product, so neither of them is allowed to look like the other.
 */

.screen.is-open .under {
  filter: none;
}

.opened {
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  top: 13cqw;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3cqw;
  padding: 3.4cqw 4cqw;
  border-radius: 3cqw;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.opened .ring {
  grid-row: 1 / 3;
  width: 9cqw;
  height: 9cqw;
}

.opened .ring circle {
  fill: none;
  stroke-width: 7;
}

.opened .ring .track {
  stroke: color-mix(in srgb, var(--cream-green) 25%, transparent);
}

.opened .ring .arc {
  stroke: var(--cream-green);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.opened .ring .tick {
  fill: none;
  stroke: var(--cream-green);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.opened .title {
  font-family: var(--sans);
  font-size: 4.2cqw;
  font-weight: 600;
  color: var(--cream-ink);
  margin: 0;
}

.opened .sub {
  font-family: var(--sans);
  font-size: 3.4cqw;
  color: var(--cream-ink3);
  margin: 0.4cqw 0 0;
}

.attempts {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink3);
  text-align: center;
  margin: 1.5rem 0 0;
  min-height: 1.2em;
}

.attempts.is-counting {
  color: var(--gold);
}

.cta {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.cta .badge img {
  height: 3rem;
}

/* ---------- The shield, at any scale ----------
 *
 * Drawn from app/AhonuiShieldConfig/ShieldConfigurationExtension.swift and
 * app/Shared/ShieldCopy.swift. Everything is sized from --u, the width of
 * one point on a 393pt iPhone, so the same markup renders at page scale in
 * the opening viewport and at phone scale inside a frame.
 */

.shield {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--sans);
  color: var(--cream-ink);
  padding: calc(var(--u) * 24);
}

.shield .ring {
  width: calc(var(--u) * 96);
  height: calc(var(--u) * 96);
  margin-bottom: calc(var(--u) * 22);
}

.shield .ring circle {
  fill: none;
  stroke-width: 6;
}

.shield .ring .track {
  stroke: rgba(108, 103, 98, 0.35);
}

.shield .ring .arc {
  stroke: var(--cream-green);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dasharray 0.4s ease;
}

.shield .ring .arc[stroke-dasharray="0 100"] {
  visibility: hidden;
}

.shield .ring .glyph {
  fill: none;
  stroke: var(--cream-ink);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shield .title {
  font-size: calc(var(--u) * 20);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: calc(var(--u) * 300);
}

.shield .sub {
  font-size: calc(var(--u) * 15);
  line-height: 1.4;
  color: var(--cream-ink2);
  margin-top: calc(var(--u) * 8);
  max-width: calc(var(--u) * 300);
  white-space: pre-line;
}

.shield .action {
  display: block;
  width: calc(var(--u) * 320);
  max-width: 100%;
  margin-top: calc(var(--u) * 48);
  padding: calc(var(--u) * 15) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 14);
  background: var(--cream-green);
  color: var(--cream);
  font-size: calc(var(--u) * 17);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.shield .action:hover {
  filter: brightness(1.06);
}

/* ---------- The line the block says about you ----------
 *
 * The lines the app says, on the web. The block answers "what is owed"
 * in .title and .sub; this answers "and this is the ninth time you have
 * asked". Silent until the second attempt, like the app, so the first look
 * is the plain honest shield and nothing here is on the screen somebody met
 * when they were simply going to open a thing.
 *
 * Both of these are added by site.js and are absent without it, which is
 * the correct no-script state: a first visit, with nothing to say yet.
 */

.shield .remark {
  font-size: calc(var(--u) * 14);
  line-height: 1.35;
  color: var(--cream-ink3);
  margin-top: calc(var(--u) * 10);
  max-width: calc(var(--u) * 300);
  min-height: calc(var(--u) * 19);
  font-style: italic;
  transition: opacity 0.2s ease;
}

.shield .remark.is-swapping {
  opacity: 0;
}

.shield .anyway {
  display: block;
  margin-top: calc(var(--u) * 12);
  padding: calc(var(--u) * 10) calc(var(--u) * 16);
  background: none;
  border: 0;
  color: var(--cream-ink2);
  font-family: inherit;
  font-size: calc(var(--u) * 16);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.shield .anyway:hover {
  color: var(--cream-ink);
}

/* The phone and the count under it are one object in the beat's grid, so
   the count tracks the phone rather than the column. */
.phone-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .shield .remark {
    transition: none;
  }

  .shield .remark.is-swapping {
    opacity: 1;
  }
}

/* ---------- The phone ---------- */

.phone {
  container-type: inline-size;
  width: min(100%, 22rem);
  margin: 0 auto;
}

.phone .device {
  position: relative;
  background: var(--bezel);
  border-radius: 14cqw;
  padding: 3cqw;
  box-shadow: 0 0 0 1px var(--bezel-edge);
}

.phone .screen {
  position: relative;
  aspect-ratio: 393 / 852;
  border-radius: 11.5cqw;
  overflow: hidden;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 4.3cqw;
  line-height: 1.3;
}

.phone .island {
  position: absolute;
  top: 3cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 31cqw;
  height: 9cqw;
  border-radius: 999px;
  background: #000;
  z-index: 2;
}

.phone .status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4.5cqw 8cqw 0;
  font-size: 4cqw;
  font-weight: 600;
  height: 15cqw;
}

.phone .status svg {
  width: 17cqw;
  height: 4cqw;
  fill: currentColor;
}

/* The shield inside a phone: the app underneath, the frost, the shield. */
.phone .screen.is-shield {
  background: var(--cream);
  color: var(--cream-ink);
}

.phone .screen.is-shield .shield {
  /* 100cqw is the phone's width, which stands for 393 points. */
  --u: 0.2545cqw;
  position: absolute;
  inset: 0;
  padding-top: 24cqw;
}

/* The feed behind the block: stories, a friend's post, likes and the tab
 * bar. Any social app and none by name, so it reads as the thing being
 * held back. Blurred under the block, crisp once it lifts (.is-open).
 * The App Store frames draw the same one (tools/appstore). Lengths are
 * cqw, the phone's width. */
.phone .screen.is-shield .under {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  filter: blur(5px);
  background: #fff;
  color: #17171a;
  font: 3.4cqw/1.3 var(--sans);
}

/* Lifted, it is the app again. As specific as the blur above, or the
   blur wins and the payoff stays frosted. */
.phone .screen.is-shield.is-open .under { filter: none; }

.under p { margin: 0; }
.under svg { width: 6.6cqw; height: 6.6cqw; flex: none; }
.under .status { color: #17171a; }

.under .f-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1cqw 4.5cqw 2.5cqw;
}

.under .f-bar b {
  font: italic 800 7cqw/1 var(--serif);
  letter-spacing: -0.03em;
}

.under .f-bar span { display: flex; gap: 4.5cqw; }

.under .f-stories {
  display: flex;
  gap: 3.2cqw;
  margin: 0;
  padding: 0 3.5cqw 3cqw;
  list-style: none;
  border-bottom: 1px solid rgba(23, 23, 26, 0.1);
}

.under .f-stories li {
  display: grid;
  justify-items: center;
  gap: 1.2cqw;
  width: 16.5cqw;
  font-size: 2.6cqw;
  white-space: nowrap;
}

.under i {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c);
  color: #f6f1e7;
  font: normal 700 5cqw/1 var(--sans);
}

.under .f-stories i {
  width: 15.5cqw;
  height: 15.5cqw;
  box-shadow: 0 0 0 0.8cqw #fff, 0 0 0 1.5cqw rgba(23, 23, 26, 0.15);
}

.under .f-stories li.new i {
  box-shadow: 0 0 0 0.8cqw #fff, 0 0 0 1.7cqw #f26a1b;
}

.under .f-head {
  display: flex;
  align-items: center;
  gap: 2.5cqw;
  padding: 3cqw 4cqw;
}

.under .f-head i { width: 8.5cqw; height: 8.5cqw; font-size: 3.6cqw; }
.under .f-head p { display: grid; flex: 1; font-size: 3.3cqw; }
.under .f-head span { font-size: 2.8cqw; color: #6c6762; }
.under .f-head em { font-style: normal; font-weight: 700; }

.under .f-photo {
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 1;
  object-fit: cover;
}

.under .f-actions {
  display: flex;
  gap: 4cqw;
  padding: 3cqw 4cqw 1.5cqw;
}

.under .f-actions .end { margin-left: auto; }
.under .f-likes { padding: 0 4cqw; font-weight: 700; }
.under .f-caption { padding: 0.8cqw 4cqw 0; }
.under .f-more { padding: 0.8cqw 4cqw 0; color: #6c6762; }

.under .f-tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 3cqw 4cqw 7cqw;
  background: #fff;
  border-top: 1px solid rgba(23, 23, 26, 0.1);
}

.under .f-tabs i { width: 7cqw; height: 7cqw; }

.phone .screen.is-shield .veil {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--cream) 70%, transparent);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
}

/* ---------- The Today screen ----------
 * Drawn from app/Ahonui/HomeView.swift.
 */

.today {
  padding: 0 5cqw;
}

.today .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 2cqw;
}

.today .head b {
  font-family: var(--serif);
  font-size: 8.6cqw;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.today .head span {
  color: var(--ink3);
  font-size: 3.4cqw;
  font-weight: 600;
}

.today .date {
  color: var(--ink3);
  font-size: 3.3cqw;
  padding-bottom: 3cqw;
  border-bottom: 0.5cqw solid var(--ink);
  margin-bottom: 4cqw;
}

.today .cap {
  font-size: 2.8cqw;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink3);
}

.today .cap.gold {
  color: var(--gold);
}

.today .timer {
  font-family: var(--mono);
  font-size: 15cqw;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gold);
  opacity: 0.9;
}

.today .past {
  font-size: 3.6cqw;
  color: var(--ink3);
}

.today .past b {
  color: var(--gold);
  font-weight: 500;
}

.today .bar {
  height: 1.5cqw;
  border-radius: 999px;
  background: var(--ink4);
  margin: 3cqw 0 2cqw;
  overflow: hidden;
}

.today .bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gold);
}

.today .meta {
  display: flex;
  justify-content: space-between;
  font-size: 3.1cqw;
  color: var(--ink3);
  padding-bottom: 4cqw;
  border-bottom: 1px solid var(--rule);
}

.today .meta b {
  color: var(--ink);
  font-weight: 600;
}

.today .rowhead {
  display: flex;
  gap: 2cqw;
  align-items: baseline;
  padding: 3.5cqw 0 1cqw;
}

.today .rowhead .count {
  font-family: var(--mono);
  font-size: 2.8cqw;
  font-weight: 600;
  color: var(--green);
}

.today ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.today li {
  display: grid;
  grid-template-columns: 5cqw 1fr auto;
  align-items: baseline;
  column-gap: 3cqw;
  padding: 2.4cqw 0;
  border-top: 1px solid var(--rule);
}

.today li:first-child {
  border-top: 0;
}

.today li .d-name {
  font-family: var(--sans);
  font-size: 4.3cqw;
  font-weight: 600;
}

.today li .val {
  font-family: var(--mono);
  font-size: 3cqw;
  color: var(--ink3);
}

.today li .blocking {
  grid-column: 2 / -1;
  font-size: 2.8cqw;
  font-weight: 500;
  color: var(--red);
  margin-top: 0.5cqw;
}

.today .mk {
  width: 3.8cqw;
  height: 3.8cqw;
  align-self: center;
}

.today .mk circle {
  fill: none;
  stroke-width: 2.2;
}

.today .mk .t {
  stroke: var(--ink4);
}

.today .mk .a {
  stroke: var(--green);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.today .mk.red .t {
  stroke: color-mix(in srgb, var(--red) 30%, transparent);
}

.today .mk.red .a {
  stroke: var(--red);
}

.today .mk.done .t {
  stroke: var(--green);
}

.today .mk path {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.today .streak {
  font-size: 3cqw;
  color: var(--ink3);
  padding: 1cqw 0 3cqw 8cqw;
}

.today .actions {
  display: flex;
  gap: 2.5cqw;
  padding-top: 2cqw;
}

.today .btn {
  flex: 1;
  text-align: center;
  padding: 3cqw;
  border-radius: 1.5cqw;
  font-size: 3.6cqw;
  font-weight: 700;
  border: 0.76cqw solid var(--ink);
  background: none;
}

.today .btn.fill {
  background: var(--lava);
  color: var(--on-lava);
}

/* The four keys, from app/Ahonui/TodayKeys.swift: water, meal, fast, break,
   one row, each a figure with its unit under it and the verb a tap performs.
   They replaced two buttons, and they stay where the thumb learned them. */
.today .keys {
  display: flex;
  gap: 2cqw;
  padding-top: 3cqw;
}

.today .keys li {
  flex: 1;
  text-align: center;
  padding: 2.4cqw 0.6cqw;
  border: 1px solid var(--rule);
  border-radius: 2.4cqw;
}

.today .keys b {
  display: block;
  font-size: 4cqw;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.today .keys .u {
  display: block;
  font-size: 2.2cqw;
  color: var(--ink3);
  letter-spacing: 0.06em;
}

.today .keys .v {
  display: block;
  margin-top: 1.4cqw;
  font-size: 2.6cqw;
  font-weight: 600;
  color: var(--green);
}

/* ---------- Milestones: the Hydrated page, on the phone ----------
   The app's own protocol page, drawn the way the Today screen beside it is:
   the goal, the milestones climbing to it with their apps, when. */

.protocol {
  padding: 0 7cqw 6cqw;
}

.protocol .nav {
  display: grid;
  grid-template-columns: 8cqw 1fr 8cqw;
  align-items: center;
  padding: 1cqw 0 5cqw;
}
.protocol .nav .back { color: var(--ink3); font-size: 6cqw; }
.protocol .nav b {
  text-align: center;
  font-family: var(--serif);
  font-size: 7.5cqw;
  font-weight: 700;
  letter-spacing: -0.035em;
}
.protocol .nav .toggle {
  width: 11cqw;
  height: 6.5cqw;
  border-radius: 999px;
  background: var(--lava);
  position: relative;
  justify-self: end;
}
.protocol .nav .toggle::after {
  content: "";
  position: absolute;
  top: 0.8cqw;
  right: 0.8cqw;
  width: 4.9cqw;
  height: 4.9cqw;
  border-radius: 50%;
  background: var(--ground);
}

.protocol .cap {
  font-size: 2.8cqw;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink3);
  margin: 6cqw 0 1.5cqw;
}
.protocol .cap:first-of-type { margin-top: 0; }

.protocol .big {
  font-family: var(--serif);
  font-size: 9cqw;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0;
}
.protocol .big span {
  font-family: var(--sans);
  font-size: 3.6cqw;
  font-weight: 400;
  color: var(--ink3);
  letter-spacing: 0;
}
.protocol .sub {
  font-size: 3.2cqw;
  color: var(--ink3);
  margin: 1.5cqw 0 0;
  line-height: 1.4;
}
.protocol .sub b { color: var(--ink2); font-weight: 500; }

.protocol .ladder {
  list-style: none;
  margin: 0;
  padding: 0 0 0 7cqw;
  position: relative;
}
.protocol .ladder::before {
  content: "";
  position: absolute;
  left: 1.7cqw;
  top: 2cqw;
  bottom: 4cqw;
  width: 0.6cqw;
  background: var(--ink4);
  border-radius: 1cqw;
}
.protocol .ladder > li { position: relative; padding: 0 0 4.5cqw; }
.protocol .ladder > li:last-child { padding-bottom: 0; }
.protocol .dot {
  position: absolute;
  left: -7cqw;
  top: 1.2cqw;
  width: 2.8cqw;
  height: 2.8cqw;
  border-radius: 50%;
  background: var(--ground);
  border: 0.6cqw solid var(--ink4);
  transform: translateX(0.6cqw);
}
.protocol .reached .dot { background: var(--green); border-color: var(--green); }
.protocol .next .dot { border-color: var(--gold); box-shadow: 0 0 0 1cqw color-mix(in srgb, var(--gold) 25%, transparent); }
.protocol li.goal .dot { background: var(--green); border-color: var(--green); width: 3.4cqw; height: 3.4cqw; transform: translateX(0.3cqw); top: 1cqw; }

.protocol .at {
  margin: 0;
  font-size: 4cqw;
  font-weight: 600;
  color: var(--ink);
}
.protocol li.goal .at { color: var(--green); }
.protocol .at span {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 2.4cqw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-left: 2cqw;
}
.protocol .apps {
  list-style: none;
  margin: 1.8cqw 0 0;
  padding: 0;
  display: flex;
  gap: 2cqw;
}
.protocol .app {
  display: block;
  width: 7.5cqw;
  height: 7.5cqw;
  border-radius: 2cqw;
  overflow: hidden;
}
.protocol .next .app, .protocol li.goal .app { opacity: 0.55; }

.protocol .add {
  margin: 3cqw 0 0;
  font-size: 3.3cqw;
  font-weight: 600;
  color: var(--green);
}
.protocol .row {
  display: flex;
  justify-content: space-between;
  font-size: 3.6cqw;
  margin: 0;
  padding: 2.5cqw 0;
  border-top: 1px solid var(--rule);
}
.protocol .row:first-of-type { border-top: 0; }
.protocol .row span { color: var(--ink3); }
.protocol .row .green { color: var(--green); font-weight: 600; }

.body .quote {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--serif);
  color: var(--ink);
}

/* ---------- The app's own mark, under the frost ----------
   Between the app's blurred layout and the veil, so it is frosted once, the
   way the real icon is through the real shield, and still reads as itself. */

.phone .screen.is-shield .u-mark {
  position: absolute;
  left: 50%;
  top: 13%;
  width: 40cqw;
  height: 40cqw;
  transform: translateX(-50%);
  border-radius: 9cqw;
  overflow: hidden;
  opacity: 0.9;
}

/* ---------- The milestones loop ---------- */

.protocol .fill {
  height: 1.4cqw;
  border-radius: 999px;
  background: var(--ink4);
  margin-top: 2.5cqw;
  overflow: hidden;
}
.protocol .fill i {
  display: block;
  height: 100%;
  width: 37.5%;
  background: var(--green);
  border-radius: 999px;
  transition: width 1.2s cubic-bezier(.2,.7,.2,1);
}
.protocol .dot, .protocol .app, .protocol .at span { transition: background 0.6s ease, border-color 0.6s ease, opacity 0.6s ease, box-shadow 0.6s ease; }
.protocol.is-before .fill i { width: 12.5%; }
.protocol.is-before .reached .dot { background: var(--ground); border-color: var(--gold); box-shadow: 0 0 0 1cqw color-mix(in srgb, var(--gold) 25%, transparent); }
.protocol.is-before .reached .app { opacity: 0.55; }
.protocol.is-before .next .dot { box-shadow: none; border-color: var(--ink4); }

/* The objections, answered at the price: rows on hairlines like every
   other list on the page, at body size rather than headline size, because
   these are assurances and not claims. */
/* ---------- The day you can put back ---------- */
/* A full-bleed moment, laid out like the shield: under the status bar and
   filling what is left, with the number and its lines optically centred and
   the two answers at the foot, which is where the real screen puts them. */
#repair .protocol {
  position: absolute;
  inset: 15cqw 0 0;
  padding: 0 8cqw 8cqw;
  display: flex;
  flex-direction: column;
}
#repair .act:not(.plain) { margin-top: auto; }
#repair .big { color: var(--gold); font-size: 17cqw; margin-top: auto; }
#repair .big span { display: block; margin-top: 1.5cqw; font-size: 3.8cqw; }
#repair .headline {
  font-family: var(--serif);
  font-size: 6.6cqw;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
  margin: 7cqw 0 0;
}
#repair .sub { margin-top: 2.6cqw; }
#repair .act {
  margin: 0;
  padding: 3.6cqw;
  text-align: center;
  border: 0.76cqw solid var(--ink);
  border-radius: 1.5cqw;
  background: var(--lava);
  color: var(--on-lava);
  font-size: 3.6cqw;
  font-weight: 700;
}
#repair .act.plain {
  margin-top: 2cqw;
  padding: 2cqw;
  border: 0;
  background: transparent;
  color: var(--ink3);
  font-weight: 500;
}

/* ---------- The ways to open a block ---------- */

.shield .action + .action {
  margin-top: calc(var(--u) * 10);
}
.shield .action.quiet {
  background: transparent;
  color: var(--cream-ink2);
  box-shadow: inset 0 0 0 calc(var(--u) * 1.5) var(--cream-ink3);
}
.shield .action.plain {
  background: transparent;
  color: var(--cream-ink3);
  padding-top: calc(var(--u) * 6);
  padding-bottom: 0;
  font-weight: 500;
}


/* ---------- The Home Screen, and the way in ----------
 *
 * A block is met by reaching for an app, so the phone beside the stage
 * starts where a person does: on the Home Screen. The app the habit holds
 * is dimmed, as iOS dims an app Screen Time is holding. Tapping it is the
 * attempt. The block comes up in its place, and its button goes back.
 *
 * Drawn, and not the visitor's own screen: four apps and a dock.
 */
.phone .screen.is-home {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(120% 70% at 20% 0%, #f2a66b 0%, transparent 60%),
    radial-gradient(120% 80% at 100% 100%, #3a3b3f 0%, transparent 65%),
    #8a5a43;
  color: #fff;
}

.phone .is-home .clock {
  margin: 0;
  padding: 4.2cqw 8cqw 0;
  font-size: 4.3cqw;
  font-weight: 600;
}

.phone .is-home .apps,
.phone .is-home .dock {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.phone .is-home .apps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 5cqw 0;
  padding: 12cqw 5cqw 0;
}

.phone .is-home .apps button {
  display: grid;
  justify-items: center;
  gap: 1.4cqw;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 3cqw;
  cursor: default;
}

.phone .is-home svg {
  display: block;
  width: 15.5cqw;
  height: 15.5cqw;
  border-radius: 3.6cqw;
}

/* Held: dimmed, and the only one that answers. */
.phone .is-home .apps button.is-held {
  position: relative;
  cursor: pointer;
}

.phone .is-home .apps button.is-held svg {
  filter: grayscale(0.7) brightness(0.62);
}

.phone .is-home .apps button.is-held span::before {
  content: "";
  display: inline-block;
  width: 2.4cqw;
  height: 2.8cqw;
  margin-right: 1cqw;
  vertical-align: -0.3cqw;
  background: currentColor;
  /* An hourglass, as iOS marks an app that is being held. */
  clip-path: polygon(0 0, 100% 0, 100% 12%, 62% 50%, 100% 88%, 100% 100%, 0 100%, 0 88%, 38% 50%, 0 12%);
}

/* The one to reach for. A ring goes out from it until it is tapped. */
.phone .is-home .apps button.is-held::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 15.5cqw;
  height: 15.5cqw;
  border-radius: 3.6cqw;
  transform: translateX(-50%);
  box-shadow: 0 0 0 0.5cqw #fff;
  animation: reach 1800ms ease-out infinite;
  pointer-events: none;
}

.phone.was-tapped .is-home .apps button.is-held::after {
  animation: none;
  opacity: 0;
}

@keyframes reach {
  0% { opacity: 0.9; transform: translateX(-50%) scale(1); }
  70%, 100% { opacity: 0; transform: translateX(-50%) scale(1.35); }
}

.phone .is-home .apps button:focus-visible {
  outline: 0.6cqw solid #fff;
  outline-offset: 1cqw;
  border-radius: 3.6cqw;
}

.phone .is-home .dock {
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  gap: 6cqw;
  margin: 0 4cqw 5cqw;
  padding: 3.5cqw;
  border-radius: 8cqw;
  background: rgba(255, 255, 255, 0.22);
}

/* An app opening: it grows out of the middle of the screen. */
.phone .screen[data-screen="block"],
.phone .screen[data-screen="met"] {
  animation: app-opens 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes app-opens {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: none; }
}

/* The bar iOS draws at the foot of an app, which goes home. */
.phone .homebar {
  position: absolute;
  left: 50%;
  bottom: 3cqw;
  z-index: 3;
  width: 36cqw;
  height: 8cqw;
  padding: 0;
  border: 0;
  background: none;
  transform: translateX(-50%);
  cursor: pointer;
}

.phone .homebar::before {
  content: "";
  display: block;
  width: 100%;
  height: 1.4cqw;
  margin-top: 4.6cqw;
  border-radius: 999px;
  background: rgba(23, 23, 26, 0.75);
}

/* Without the script nothing can be tapped, so the phone shows the block. */
html:not(.js) .phone .screen[data-screen="home"] {
  display: none;
}

html:not(.js) .phone .screen[data-screen="block"][hidden] {
  display: block !important;
}

@media (prefers-reduced-motion: reduce) {
  .phone .is-home .apps button.is-held::after,
  .phone .screen[data-screen="block"],
  .phone .screen[data-screen="met"] {
    animation: none;
  }
}

/* ---------- The app, as it is now ----------
 *
 * The screens redrawn from the app as it stands (AHO-505), each one drawn
 * beside a picture of the real view and in the app's own measures. A
 * length is the app's, in points of a screen 393 wide: `--pt` is one
 * point. He is in them wherever the app has him.
 *
 * Every class begins `n-`, so nothing here meets the older drawings or
 * the page around the phone.
 */
.phone .screen.now {
  --pt: 0.2545cqw;
  --app-ground: #f6f1e7;
  --app-well: #f1ebdf;
  --app-ink: #17171a;
  --app-ink2: #46423c;
  --app-ink3: #6c6762;
  --app-ink4: #c4beb6;
  --app-green: #456b57;
  --app-red: #a2453a;
  --app-gold: #72612e;
  --app-water: #35627f;
  --app-lava: #f26a1b;
  --app-rule: rgba(23, 23, 26, 0.22);
  /* The display face, as the app has it now; the name is the old one. */
  --app-serif: "Bricolage Grotesque", "Arial Black", "Helvetica Neue", Helvetica, sans-serif;
  --app-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --app-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  display: flex;
  flex-direction: column;
  background: var(--app-ground);
  color: var(--app-ink);
  font-size: calc(var(--pt) * 17);
  line-height: 1.3;
}

.now p,
.now ul,
.now ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.now .n-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 0 calc(var(--pt) * 28) calc(var(--pt) * 34);
}

.now .n-cap {
  font: calc(var(--pt) * 12) / 1.3 var(--app-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--app-ink3);
}

.now .n-cap.green { color: var(--app-green); }
.now .n-cap.red { color: var(--app-red); }
.now .n-cap.gold { color: var(--app-gold); }

.now .n-title {
  font: 700 calc(var(--pt) * 30) / 1.12 var(--app-serif);
  letter-spacing: -0.035em;
}

.now .n-say {
  color: var(--app-ink2);
  font-size: calc(var(--pt) * 16);
  line-height: 1.35;
}

.now .n-him {
  display: block;
  width: calc(var(--pt) * var(--tall, 96));
  height: calc(var(--pt) * var(--tall, 96));
  object-fit: contain;
}

/* The app's button: square at 6, lava with an ink label and a 3 point ink
   edge, or the same edge with nothing in it. Never a pill. */
.now .n-act {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--pt) * 56);
  border: calc(var(--pt) * 3) solid var(--app-ink);
  border-radius: calc(var(--pt) * 6);
  background: var(--app-lava);
  color: var(--app-ink);
  font-size: calc(var(--pt) * 16);
  font-weight: 700;
}

.now .n-act.line {
  background: none;
  color: var(--app-ink);
}

.now .n-act.line.red {
  border-color: var(--app-red);
  color: var(--app-red);
}

.now .n-under {
  margin-top: calc(var(--pt) * 18);
  color: var(--app-ink3);
  font-size: calc(var(--pt) * 14);
  text-align: center;
}

.now .n-foot {
  margin-top: auto;
}

/* ---------- A break, running ---------- */

.now .n-break {
  padding-top: calc(var(--pt) * 120);
}

.now .n-ring {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(var(--pt) * 6);
  width: calc(var(--pt) * 246);
  aspect-ratio: 1;
  margin: calc(var(--pt) * 22) auto 0;
  border: calc(var(--pt) * 13) solid var(--app-green);
  border-radius: 50%;
  background: var(--app-well);
}

.now .n-ring.red {
  border-color: var(--app-red);
}

.now .n-ring b {
  font: 700 calc(var(--pt) * 52) / 1 var(--app-serif);
  font-variant-numeric: tabular-nums;
}

.now .n-ring span {
  font: calc(var(--pt) * 12) / 1 var(--app-mono);
  color: var(--app-ink3);
}

.now .n-break .n-him {
  --tall: 96;
  margin: calc(var(--pt) * 12) auto 0;
}

/* ---------- The day put back ---------- */

.now .n-repair {
  padding-top: calc(var(--pt) * 70);
}

.now .n-repair .n-him {
  --tall: 164;
  margin-left: calc(var(--pt) * -14);
}

.now .n-count {
  margin-top: calc(var(--pt) * 14);
  color: var(--app-gold);
  font: 700 calc(var(--pt) * 96) / 0.9 var(--app-serif);
  letter-spacing: -0.035em;
}

.now .n-repair .n-what {
  margin-top: calc(var(--pt) * 8);
  color: var(--app-ink3);
  font-size: calc(var(--pt) * 17);
}

.now .n-repair .n-title {
  margin-top: calc(var(--pt) * 26);
}

.now .n-repair .n-say {
  margin-top: calc(var(--pt) * 10);
}

.now .n-repair .n-say + .n-say {
  margin-top: calc(var(--pt) * 6);
}

/* ---------- Widgets, on the Home Screen ----------
 *
 * The app's widgets as they are: dark cards, him in the habit's outfit,
 * the reading in the display face, and one thing to press. Drawn on a Home
 * Screen, which is where they live.
 */
.phone .screen.now.n-homescreen {
  --w-ground: #17171a;
  --w-ink: #f6f1e7;
  --w-ink2: #d9d2c3;
  --w-ink3: #a39c90;
  --w-ink4: #3d3830;
  --w-green: #7db497;
  --w-red: #e07f79;
  --w-gold: #c4a85a;
  --w-water: #8ab6d2;
  background:
    radial-gradient(120% 70% at 20% 0%, #f2a66b 0%, transparent 60%),
    radial-gradient(120% 80% at 100% 100%, #3a3b3f 0%, transparent 65%),
    #8a5a43;
  color: #fff;
}

.now .n-widgets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--pt) * 14);
  padding: calc(var(--pt) * 72) calc(var(--pt) * 24) 0;
}

.now .n-w {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1;
  padding: calc(var(--pt) * 15);
  border-radius: calc(var(--pt) * 24);
  background: var(--w-ground);
  color: var(--w-ink);
  overflow: hidden;
}

.now .n-w.wide {
  grid-column: 1 / -1;
  aspect-ratio: 329 / 155;
  flex-direction: row;
  align-items: center;
  gap: calc(var(--pt) * 12);
}

.now .n-w .n-cap {
  font-size: calc(var(--pt) * 9.5);
  letter-spacing: 0.12em;
  color: var(--w-ink3);
}

.now .n-w .n-cap b {
  font-weight: 400;
  color: var(--w-red);
}

.now .n-w .n-big {
  margin-top: calc(var(--pt) * 3);
  font: 700 calc(var(--pt) * 32) / 1 var(--app-serif);
  font-variant-numeric: tabular-nums;
}

.now .n-w .n-big.clock {
  font-size: calc(var(--pt) * 27);
}

.now .n-w .n-big.word {
  font-size: calc(var(--pt) * 23);
  font-weight: 600;
}

.now .n-w .n-of {
  margin-top: calc(var(--pt) * 6);
  color: var(--w-ink3);
  font-size: calc(var(--pt) * 11);
  line-height: 1.25;
}

.now .n-w .n-him {
  --tall: 54;
  position: absolute;
  right: calc(var(--pt) * 10);
  bottom: calc(var(--pt) * 46);
}

.now .n-w .n-him.low {
  bottom: calc(var(--pt) * 12);
}

.now .n-w .n-press {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--pt) * 27);
  margin-top: auto;
  /* Square, as the widget's own buttons are, and its tint at a fifth, as
     GlanceViews' Pill lays it. */
  border-radius: calc(var(--pt) * 6);
  background: color-mix(in srgb, var(--w-green) 20%, var(--w-ground));
  color: var(--w-green);
  font-size: calc(var(--pt) * 12.5);
  font-weight: 600;
}

.now .n-w .n-press.gold {
  background: color-mix(in srgb, var(--w-gold) 20%, var(--w-ground));
  color: var(--w-gold);
}

.now .n-w .n-line {
  height: calc(var(--pt) * 4);
  margin-top: calc(var(--pt) * 8);
  border-radius: 999px;
  background: var(--w-ink4);
}

.now .n-w .n-line i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--w-green);
}

.now .n-w .n-line.gold i {
  background: var(--w-gold);
}

.now .n-w .n-line.foot {
  margin-top: auto;
}

/* Five habits, five dashes: the ones met are lit. */
.now .n-w .n-dashes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(var(--pt) * 4);
  margin-top: calc(var(--pt) * 8);
}

.now .n-w .n-dashes i {
  height: calc(var(--pt) * 4);
  border-radius: 999px;
  background: var(--w-ink4);
}

.now .n-w .n-dashes i.met {
  background: var(--w-green);
}

.now .n-w .n-drop {
  position: absolute;
  top: calc(var(--pt) * 30);
  right: calc(var(--pt) * 16);
  width: calc(var(--pt) * 22);
  height: calc(var(--pt) * 30);
  fill: var(--w-water);
}

.now .n-w.wide .n-him {
  --tall: 84;
  position: static;
  flex: none;
}

.now .n-w.wide .n-rows {
  display: grid;
  flex: 1;
  gap: calc(var(--pt) * 9);
}

.now .n-w.wide .n-head {
  display: flex;
  align-items: baseline;
  gap: calc(var(--pt) * 6);
}

.now .n-w.wide .n-head b {
  font: 600 calc(var(--pt) * 15) / 1 var(--app-sans);
}

.now .n-w.wide li {
  display: grid;
  grid-template-columns: calc(var(--pt) * 14) 1fr auto;
  align-items: center;
  gap: calc(var(--pt) * 8);
  font-size: calc(var(--pt) * 13);
}

.now .n-w.wide li i {
  width: calc(var(--pt) * 9);
  height: calc(var(--pt) * 9);
  border-radius: 50%;
  background: var(--w-red);
}

.now .n-w.wide li span {
  color: var(--w-red);
  font-size: calc(var(--pt) * 11);
}

.now .n-dockbar {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: calc(var(--pt) * 22);
  margin: auto calc(var(--pt) * 14) calc(var(--pt) * 18);
  padding: calc(var(--pt) * 13);
  border-radius: calc(var(--pt) * 30);
  background: rgba(255, 255, 255, 0.22);
}

.now .n-dockbar svg {
  display: block;
  width: calc(var(--pt) * 56);
  height: calc(var(--pt) * 56);
  border-radius: calc(var(--pt) * 13);
}

/* ---------- Today ---------- */

.now .n-today {
  padding: calc(var(--pt) * 76) calc(var(--pt) * 22) 0;
}

.now .n-mast {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--pt) * 4);
}

.now .n-mast b {
  font: 700 calc(var(--pt) * 34) / 1 var(--app-serif);
  letter-spacing: -0.035em;
}

.now .n-mast .n-him {
  --tall: 58;
  margin-bottom: calc(var(--pt) * -6);
}

.now .n-mast .n-turn {
  margin-left: auto;
  color: var(--app-ink2);
  font-size: calc(var(--pt) * 20);
  letter-spacing: 0.5em;
}

.now .n-dateline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: calc(var(--pt) * 8);
  color: var(--app-ink3);
  font-size: calc(var(--pt) * 13);
}

/* Four keys in one frame: the things done most, a tap each. */
.now .n-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: calc(var(--pt) * 18);
  border: calc(var(--pt) * 1) solid var(--app-ink);
  border-top-width: calc(var(--pt) * 2.5);
}

.now .n-keys li {
  display: grid;
  align-content: start;
  gap: calc(var(--pt) * 3);
  min-height: calc(var(--pt) * 124);
  padding: calc(var(--pt) * 12) calc(var(--pt) * 9) calc(var(--pt) * 10);
  border-left: calc(var(--pt) * 1) solid var(--app-rule);
}

.now .n-keys li:first-child {
  border-left: 0;
}

.now .n-keys svg {
  width: calc(var(--pt) * 15);
  height: calc(var(--pt) * 17);
  fill: none;
  stroke: var(--app-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.now .n-keys b {
  margin-top: calc(var(--pt) * 10);
  font: 700 calc(var(--pt) * 23) / 1 var(--app-serif);
  font-variant-numeric: tabular-nums;
}

.now .n-keys .n-cap {
  font-size: calc(var(--pt) * 9.5);
  letter-spacing: 0.12em;
}

.now .n-keys em {
  align-self: end;
  justify-self: start;
  margin-top: calc(var(--pt) * 12);
  font-size: calc(var(--pt) * 13);
  font-style: normal;
  font-weight: 600;
}

.now .n-keys em.fill {
  padding: calc(var(--pt) * 4) calc(var(--pt) * 7);
  background: var(--app-ink);
  color: var(--app-ground);
}

.now .n-keys .n-rest {
  justify-items: center;
  align-content: center;
  background: #efe6dc;
  color: #8a5a22;
}

.now .n-keys .n-rest svg {
  width: calc(var(--pt) * 40);
  height: calc(var(--pt) * 34);
  fill: #8a5a22;
  stroke: none;
}

.now .n-keys .n-rest em {
  justify-self: center;
  font-size: calc(var(--pt) * 11.5);
}

.now .n-rowhead {
  display: flex;
  align-items: baseline;
  gap: calc(var(--pt) * 8);
  margin-top: calc(var(--pt) * 30);
}

.now .n-rowhead .n-cap b {
  font-weight: 400;
  color: var(--app-green);
}

.now .n-habits {
  margin-top: calc(var(--pt) * 12);
}

.now .n-habits li {
  display: grid;
  grid-template-columns: calc(var(--pt) * 18) 1fr auto;
  align-items: center;
  gap: calc(var(--pt) * 13);
  min-height: calc(var(--pt) * 37);
  border-bottom: calc(var(--pt) * 1) solid var(--app-rule);
}

.now .n-habits .n-name {
  font: 600 calc(var(--pt) * 18) / 1 var(--app-sans);
}

.now .n-habits .n-val {
  font: calc(var(--pt) * 12) / 1 var(--app-mono);
  color: var(--app-ink3);
}

/* A habit's mark: a ring that fills as the day does, a tick once met. */
.now .n-mark {
  width: calc(var(--pt) * 18);
  height: calc(var(--pt) * 18);
}

.now .n-mark circle {
  fill: none;
  stroke-width: 2;
}

.now .n-mark .t {
  stroke: var(--app-ink4);
}

.now .n-mark .a {
  stroke: var(--app-green);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.now .n-mark.met .t {
  stroke: var(--app-green);
}

.now .n-mark path {
  fill: none;
  stroke: var(--app-green);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.now .n-faces {
  display: flex;
  gap: calc(var(--pt) * 14);
  margin-top: calc(var(--pt) * 12);
}

.now .n-faces li {
  display: grid;
  justify-items: center;
  gap: calc(var(--pt) * 6);
  font: calc(var(--pt) * 9.5) / 1 var(--app-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-ink3);
}

.now .n-faces i {
  display: grid;
  place-content: center;
  width: calc(var(--pt) * 38);
  height: calc(var(--pt) * 38);
  border: calc(var(--pt) * 2.5) solid var(--app-ink4);
  border-radius: 50%;
  background: var(--app-well);
  color: var(--app-ink2);
  font: 600 calc(var(--pt) * 14) / 1 var(--app-sans);
  font-style: normal;
}

.now .n-faces i.met {
  border-color: var(--app-green);
}

.now .n-faces i.part {
  border-color: var(--app-green) var(--app-green) var(--app-ink4) var(--app-ink4);
}

/* ---------- A habit's own page ---------- */

.now .n-habit {
  padding: calc(var(--pt) * 62) calc(var(--pt) * 22) 0;
  overflow: hidden;
}

.now .n-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.now .n-nav .n-back {
  color: var(--app-ink2);
  font-size: calc(var(--pt) * 26);
  line-height: 1;
}

.now .n-nav b {
  font: 700 calc(var(--pt) * 27) / 1 var(--app-serif);
}

.now .n-nav .n-on {
  justify-self: end;
  width: calc(var(--pt) * 51);
  height: calc(var(--pt) * 31);
  border-radius: 999px;
  background: var(--app-lava);
}

.now .n-nav .n-on::after {
  content: "";
  display: block;
  width: calc(var(--pt) * 27);
  height: calc(var(--pt) * 27);
  margin: calc(var(--pt) * 2) calc(var(--pt) * 2) 0 auto;
  border-radius: 50%;
  background: #fff;
}

.now .n-band {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--pt) * 24);
}

.now .n-reading {
  display: flex;
  align-items: center;
  gap: calc(var(--pt) * 8);
  margin-top: calc(var(--pt) * 6);
}

.now .n-reading b {
  font: 700 calc(var(--pt) * 35) / 1 var(--app-serif);
  white-space: nowrap;
}

.now .n-reading .n-him {
  --tall: 66;
}

.now .n-reading .n-log {
  margin-left: auto;
  padding: calc(var(--pt) * 9) calc(var(--pt) * 13);
  border: calc(var(--pt) * 3) solid var(--app-ink);
  border-radius: calc(var(--pt) * 6);
  background: var(--app-lava);
  color: var(--on-lava);
  font-size: calc(var(--pt) * 15);
  font-weight: 700;
  white-space: nowrap;
}

.now .n-togo {
  color: var(--app-ink2);
  font-size: calc(var(--pt) * 15);
}

/* The last two weeks, a dash a day: met, short, or stepped over. */
.now .n-fortnight {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: calc(var(--pt) * 4);
  margin-top: calc(var(--pt) * 16);
}

.now .n-fortnight i {
  height: calc(var(--pt) * 6);
  border-radius: 999px;
  background: var(--app-green);
}

.now .n-fortnight i.short {
  background: var(--app-ink4);
}

.now .n-fortnight i.over {
  border: calc(var(--pt) * 1) dashed var(--app-ink4);
  background: none;
}

.now .n-part {
  margin-top: calc(var(--pt) * 34);
}

.now .n-goal {
  display: flex;
  align-items: baseline;
  gap: calc(var(--pt) * 8);
  margin-top: calc(var(--pt) * 10);
}

.now .n-goal b {
  font: 700 calc(var(--pt) * 35) / 1 var(--app-serif);
}

.now .n-goal span {
  color: var(--app-ink3);
  font-size: calc(var(--pt) * 15);
}

.now .n-note {
  margin-top: calc(var(--pt) * 12);
  color: var(--app-ink2);
  font-size: calc(var(--pt) * 14);
}

/* The way to the goal: a rung, a time, and the apps that open there. */
.now .n-ladder {
  position: relative;
  display: grid;
  gap: calc(var(--pt) * 18);
  margin-top: calc(var(--pt) * 16);
}

.now .n-ladder::before {
  content: "";
  position: absolute;
  left: calc(var(--pt) * 7.5);
  top: calc(var(--pt) * 12);
  bottom: calc(var(--pt) * 34);
  width: calc(var(--pt) * 1.5);
  background: var(--app-green);
}

.now .n-ladder li {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--pt) * 16) 1fr;
  gap: calc(var(--pt) * 4) calc(var(--pt) * 12);
  align-items: center;
}

.now .n-ladder .n-dot {
  display: grid;
  place-content: center;
  width: calc(var(--pt) * 16);
  height: calc(var(--pt) * 16);
  border-radius: 50%;
  background: var(--app-gold);
  color: var(--app-ground);
  font-size: calc(var(--pt) * 10);
  font-weight: 700;
  line-height: 1;
}

.now .n-ladder .n-dot.ahead {
  border: calc(var(--pt) * 1.5) solid var(--app-ink4);
  background: var(--app-ground);
}

.now .n-ladder .n-at {
  font-size: calc(var(--pt) * 15);
  color: var(--app-ink3);
}

.now .n-ladder .n-at b {
  margin-right: calc(var(--pt) * 6);
  color: var(--app-gold);
  font-weight: 500;
}

.now .n-ladder .n-at b.ink {
  color: var(--app-ink);
}

.now .n-ladder .n-apps {
  grid-column: 2;
  display: flex;
  gap: calc(var(--pt) * 6);
}

.now .n-ladder .n-apps svg {
  width: calc(var(--pt) * 26);
  height: calc(var(--pt) * 26);
  border-radius: calc(var(--pt) * 6);
}

.now .n-add {
  margin-top: calc(var(--pt) * 18);
  color: var(--app-green);
  font-size: calc(var(--pt) * 14.5);
  font-weight: 600;
}

.now .n-set {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(var(--pt) * 44);
  border-bottom: calc(var(--pt) * 1) solid var(--app-rule);
  font-size: calc(var(--pt) * 16);
}

.now .n-set span {
  color: var(--app-green);
  font-size: calc(var(--pt) * 14);
  font-weight: 500;
}

.now .n-set span.quiet {
  color: var(--app-ink3);
}

/* ---------- Logging a meal ---------- */

.now .n-meal {
  padding: calc(var(--pt) * 64) calc(var(--pt) * 20) calc(var(--pt) * 26);
}

.now .n-sheet {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: var(--app-ink2);
  font-size: calc(var(--pt) * 22);
}

.now .n-sheet b {
  color: var(--app-ink);
  font: 600 calc(var(--pt) * 18) / 1 var(--app-sans);
}

.now .n-kinds {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--pt) * 8);
  margin-top: calc(var(--pt) * 22);
}

.now .n-kinds li {
  display: grid;
  justify-items: center;
  gap: calc(var(--pt) * 5);
  padding: calc(var(--pt) * 9) 0;
  /* The app's option: no fill, a hairline, and the chosen one edged in
     ink (Theme/Fields.swift). */
  border: calc(var(--pt) * 1) solid var(--app-rule);
  border-radius: calc(var(--pt) * 8);
  color: var(--app-ink2);
  font-size: calc(var(--pt) * 11.5);
}

.now .n-kinds li.on {
  border: calc(var(--pt) * 2) solid var(--app-ink);
  padding: calc(var(--pt) * 8) 0;
  color: var(--app-ink);
}

.now .n-kinds svg {
  width: calc(var(--pt) * 20);
  height: calc(var(--pt) * 18);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.now .n-meal .n-cap {
  margin-top: calc(var(--pt) * 22);
}

.now .n-photo {
  display: block;
  width: 100%;
  height: calc(var(--pt) * 120);
  margin-top: calc(var(--pt) * 10);
  border-radius: calc(var(--pt) * 12);
  background:
    radial-gradient(40% 60% at 30% 45%, #e88a6b 0 38%, transparent 40%),
    radial-gradient(34% 52% at 66% 56%, #7aa86a 0 40%, transparent 42%),
    radial-gradient(26% 40% at 52% 30%, #f3e6c8 0 44%, transparent 46%),
    radial-gradient(70% 90% at 50% 50%, #f7f3ea 0 62%, #d9cdb8 64% 70%, transparent 72%),
    #b9a88c;
}

/* Rows on rules, as the app's meal sheet has them: a rule above and below
   the food, one between its rows, and no card. */
.now .n-food {
  margin-top: calc(var(--pt) * 10);
  padding-top: calc(var(--pt) * 12);
  border-top: calc(var(--pt) * 1) solid var(--app-rule);
  border-bottom: calc(var(--pt) * 1) solid var(--app-rule);
}

.now .n-food b {
  display: block;
  font-size: calc(var(--pt) * 16);
  font-weight: 500;
}

.now .n-food small {
  display: block;
  margin-top: calc(var(--pt) * 3);
  color: var(--app-ink3);
  font-size: calc(var(--pt) * 12);
}

.now .n-food li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: calc(var(--pt) * 33);
  border-top: calc(var(--pt) * 1) solid var(--app-rule);
  color: var(--app-ink2);
  font-size: calc(var(--pt) * 13.5);
}

.now .n-food ul {
  margin-top: calc(var(--pt) * 10);
}

.now .n-food li span {
  color: var(--app-ink);
  font: calc(var(--pt) * 13) / 1 var(--app-mono);
}

/* ---------- A break that runs, and a break over ---------- */

/* The ring runs down with the clock: what is left is lit. */
.now .n-ring.live {
  --left: 100;
  --ring: var(--app-green);
  border: 0;
  background:
    radial-gradient(closest-side, var(--app-well) 89%, transparent 90%),
    conic-gradient(var(--ring) calc(var(--left) * 1%), var(--app-ink4) 0);
}

.is-strict .now .n-ring.live {
  --ring: var(--app-red);
}

.is-strict .now .n-break .n-cap {
  color: var(--app-red);
}

.now .n-break .n-say {
  margin-bottom: calc(var(--pt) * 10);
  font-size: calc(var(--pt) * 14);
}

/* The app's held button: it fills from the left under the finger, and
   acts when it is full. The words are drawn twice, so they turn with the
   fill as it passes under them. */
.now .n-hold {
  position: relative;
  width: 100%;
  overflow: hidden;
  font: inherit;
  font-size: calc(var(--pt) * 16);
  font-weight: 600;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.now .n-hold i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--app-ink);
  transition: width 120ms ease-out;
}

.now .n-hold.is-held i {
  width: 100%;
  transition: width var(--hold, 1100ms) linear;
}

.now .n-hold span {
  position: relative;
  mix-blend-mode: difference;
  color: #e3e5e8;
}

.is-strict .now .n-hold {
  border-color: var(--app-red);
}

.is-strict .now .n-hold i {
  background: var(--app-red);
}

.is-strict .now .n-hold span {
  mix-blend-mode: normal;
  color: var(--app-red);
}

.is-strict .now .n-hold.is-held span {
  color: var(--app-ground);
  transition: color var(--hold, 1100ms) linear;
}

.now .n-over {
  padding-top: calc(var(--pt) * 232);
}

.now .n-over .n-him {
  --tall: 120;
  margin: calc(var(--pt) * 10) 0 0 calc(var(--pt) * -8);
}

.now .n-over .n-away {
  margin-top: calc(var(--pt) * 22);
  font: calc(var(--pt) * 40) / 1 var(--app-mono);
  letter-spacing: -0.02em;
}

.now .n-over .n-back {
  margin-top: calc(var(--pt) * 14);
  font: calc(var(--pt) * 12) / 1 var(--app-mono);
  color: var(--app-ink2);
}

.now button.n-under {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: calc(var(--pt) * 14);
  cursor: pointer;
}