/* How You Decide: one loose sheet, one thin line weight, gold only on what can be tapped. */

:root {
  --hair: 1px;
  --rule-ink: color-mix(in srgb, var(--ak-accent) 26%, transparent);
  --margin-ink: color-mix(in srgb, var(--ak-accent) 50%, transparent);
  --tap-line: var(--ak-accent-2);
  --pad-x: max(16px, env(safe-area-inset-right));
  --margin-x: calc(max(12px, env(safe-area-inset-left)) + 44px);
  --rule: clamp(30px, 4.6dvh, 42px);
  --slow: 700ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --card-ratio: 1.4436;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--ak-bg);
  background-image: var(--ak-bg-art);
  background-size: var(--ak-bg-size);
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--ak-focus); outline-offset: 3px; }

.caps {
  margin: 0;
  font-family: var(--ak-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}

/* ---------- the page ---------- */

.play {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-areas: 'logo shelf' 'board board' 'foot foot';
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 6px;
  padding:
    calc(var(--ac-status-h, 60px) + 6px)
    var(--pad-x)
    max(10px, env(safe-area-inset-bottom))
    calc(var(--margin-x) + 16px);
  /* Ruled edge to edge, one line every --rule, set (by game.js) so a line falls on the board's top. */
  background-color: var(--ak-bg);
  background-image:
    linear-gradient(to bottom, transparent calc(var(--rule) - var(--hair)), var(--rule-ink) calc(var(--rule) - var(--hair))),
    var(--ak-backdrop-layer, var(--ak-bg-art));
  background-size: 100% var(--rule), cover;
  background-repeat: repeat-y, no-repeat;
  background-position: 0 var(--rule-y, 0px), center top;
  overflow: hidden;
  touch-action: manipulation;
}

/* The one margin hairline, full height. */
.play::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--margin-x);
  width: var(--hair);
  background: var(--margin-ink);
  pointer-events: none;
}

.logo {
  grid-area: logo;
  display: block;
  height: clamp(24px, 4.2dvh, 38px);
  width: auto;
  max-width: 100%;
  justify-self: start;
  align-self: center;
}

.shelf-open { grid-area: shelf; align-self: center; }

/* The board is ruled from its own top, so the question is written on the lines. */
.board {
  grid-area: board;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ask {
  position: relative;
  top: calc(var(--rule) * 0.1);
  flex: none;
}

.ask .caps { line-height: var(--rule); }

.prompt {
  margin: 0;
  max-width: 24ch;
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight);
  font-size: calc(var(--rule) * 0.72);
  line-height: var(--rule);
  color: var(--ak-ink);
  text-wrap: balance;
}

.nudge {
  margin: 0;
  max-width: 44ch;
  font-size: 16px;
  font-style: italic;
  line-height: var(--rule);
  color: var(--ak-ink-muted);
}

/* ---------- the two cards ---------- */

.cards {
  flex: 1 1 auto;
  min-height: 0;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 8px;
}

.card {
  --card-w: min(100cqw, calc((100cqh - 12px) / 2 * var(--card-ratio)), 440px);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--card-w);
  aspect-ratio: 384 / 266;
  min-height: 48px;
  margin: 0;
  padding: 8% 12%;
  border: 0;
  border-radius: 5% / 7%;
  background: none;
  isolation: isolate;
  color: var(--ak-choice-ink);
  font-size: clamp(16px, calc(var(--card-w) * 0.058), 21px);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Plain vellum under the words. */
.card-face {
  position: absolute;
  inset: 2.4% 1.8%;
  z-index: 0;
  border-radius: 5% / 7%;
  background: color-mix(in srgb, var(--ak-choice-bg) 70%, var(--ak-bg));
  pointer-events: none;
}

/* The painted card keeps only its deckled gold edge and one small corner drawing; the rest is masked
   away so the two choices, not the ornaments, are what the eye lands on. */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url('art/choice-card.png') center / 100% 100% no-repeat;
  -webkit-mask-image:
    linear-gradient(to right, #000 2.2%, transparent 3.4%, transparent 96.6%, #000 97.8%),
    linear-gradient(to bottom, #000 3%, transparent 4.6%, transparent 95.4%, #000 97%),
    radial-gradient(closest-side, #000 76%, transparent 100%);
  mask-image:
    linear-gradient(to right, #000 2.2%, transparent 3.4%, transparent 96.6%, #000 97.8%),
    linear-gradient(to bottom, #000 3%, transparent 4.6%, transparent 95.4%, #000 97%),
    radial-gradient(closest-side, #000 76%, transparent 100%);
  -webkit-mask-size: 100% 100%, 100% 100%, 30% 44%;
  mask-size: 100% 100%, 100% 100%, 30% 44%;
  -webkit-mask-position: 0 0, 0 0, 0 0;
  mask-position: 0 0, 0 0, 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

/* The second card is mirrored and keeps a different drawing (the fork, not the key), so the two never read as one. */
.card[data-side='1']::before {
  transform: scaleX(-1);
  -webkit-mask-position: 0 0, 0 0, 0 100%;
  mask-position: 0 0, 0 0, 0 100%;
}

.card::after {
  content: '';
  position: absolute;
  inset: 2%;
  border-radius: 5% / 7%;
  z-index: 3;
  box-shadow: inset 0 0 0 var(--hair) var(--tap-line);
  opacity: 0;
  pointer-events: none;
}

.card-text { position: relative; z-index: 2; text-wrap: balance; }

.card:active { transform: translateY(1px); }
.card.is-faded { opacity: 0.2; }
.card.is-chosen { transform: translateY(calc(var(--rule) * 0.14)); }

/* The pick shows at once: a gold ring and a pen tick on the chosen card, before anything moves. */
.card-mark {
  position: absolute;
  top: 3.5%;
  left: 50%;
  z-index: 1;
  width: 30px;
  height: 22px;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}

.card-mark svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card.is-chosen .card-mark { opacity: 1; }
.card.is-chosen::after { opacity: 1; box-shadow: inset 0 0 0 2px var(--tap-line); }
.card.is-outline::before,
.card.is-outline .card-face,
.card.is-outline .card-text,
.card.is-outline .card-mark { opacity: 0; }
.card.is-outline::after { opacity: 1; }
.card:disabled { cursor: default; }

/* ---------- the foot: twelve ticks, Back, and the quiet lines ---------- */

.foot {
  grid-area: foot;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Progress: twelve ink ticks on a line, with the count written beside them. */
.progress {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  border-bottom: var(--hair) solid var(--rule-ink);
}

.ticks {
  display: flex;
  align-items: flex-end;
  gap: clamp(9px, 2.6vw, 13px);
  height: 30px;
  margin: 0;
  padding: 0 0 4px;
  list-style: none;
}

.ticks li {
  width: var(--hair);
  height: 12px;
  background: color-mix(in srgb, var(--ak-ink) 32%, transparent);
}

.ticks li.is-done { height: 18px; background: var(--ak-ink); }
.ticks li.is-now { height: 26px; background: var(--ak-ink); }

.progress-words {
  margin: 0 0 4px;
  font-size: 15px;
  font-style: italic;
  line-height: 1.2;
  color: var(--ak-ink);
  white-space: nowrap;
}

.progress.is-soft .progress-words { color: var(--ak-ink-muted); }
.progress.is-soft .ticks li { opacity: 0.45; }

.nudge-side { display: none; }
.ask .caps { display: none; }

.foot-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 48px;
}

.back { flex: none; }
.quiet-stack { flex: 1 1 auto; min-width: 0; }

.line-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 48px;
  min-height: 48px;
  padding: 0 18px 0 12px;
  border: var(--hair) solid var(--tap-line);
  border-radius: 999px;
  background: transparent;
  color: var(--ak-ink);
  font-size: 16px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.line-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-btn:active { background: color-mix(in srgb, var(--ak-accent-2) 14%, transparent); }
.back.is-away { visibility: hidden; }

.quiet {
  margin: 0;
  font-size: 13px;
  font-style: italic;
  line-height: 1.4;
  color: var(--ak-ink-muted);
}

.quiet:empty { display: none; }
.quiet.is-trouble { color: var(--ak-ink); font-style: normal; }

/* ---------- the result square ---------- */

.result {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  container-type: size;
}

.result-reason { flex: none; line-height: var(--rule); font-size: 14px; letter-spacing: 0.04em; text-transform: none; }

.result .square-slot {
  --side: min(calc(100cqw - 48px), calc(100cqh - var(--rule) * 3 - 104px), 460px);
  flex: none;
  align-self: center;
}

.square-wrap {
  position: relative;
  padding: 22px;
}

.square {
  position: relative;
  width: var(--side, 300px);
  height: var(--side, 300px);
}

.square-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.axis {
  position: absolute;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ak-ink-muted);
  white-space: nowrap;
  line-height: 1;
}

.axis-top { top: 4px; left: 50%; transform: translateX(-50%); }
.axis-bottom { bottom: 4px; left: 50%; transform: translateX(-50%); }
.axis-left { left: 4px; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }
.axis-right { right: 4px; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%); }

/* Dots sit on the square's own cross: centre (49.7%, 49.5%), edges 46.5% out. */
.dot {
  position: absolute;
  left: calc(49.7% + var(--x) * 46.5%);
  top: calc(49.5% - var(--y) * 46.5%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  transform: translate(-50%, -50%);
}

.dot img { display: block; pointer-events: none; }

.dot-past img { width: 26px; height: 26px; opacity: 0.55; }
.dot-past.is-picked img { opacity: 0.9; }

.dot-today { z-index: 2; pointer-events: none; }
.dot-tap { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dot-tap.is-picked { box-shadow: inset 0 0 0 var(--hair) var(--tap-line); }
.dot-today img { width: 52px; height: 52px; }
.dot-today.is-waiting { opacity: 0; }

.trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.trail path {
  fill: none;
  stroke: var(--ak-accent);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.glint {
  position: absolute;
  left: 49.7%;
  top: 49.5%;
  z-index: 3;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  overflow: visible;
}

.glint .ray { fill: var(--ak-accent-2); stroke: var(--ak-ink); stroke-width: 0.6; stroke-linejoin: round; }
.glint .prism { fill: none; stroke: var(--ak-accent); stroke-width: 0.8; stroke-linecap: round; opacity: 0.7; }

.result-line {
  flex: none;
  max-width: 30ch;
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: calc(var(--rule) * 0.62);
  line-height: var(--rule);
  color: var(--ak-ink);
}

.dot-info {
  flex: none;
  margin: 0;
  min-height: 24px;
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ak-ink-muted);
}

/* ---------- earlier pages ---------- */

.shelf {
  position: fixed;
  inset: 0;
  z-index: 33;
  overflow-y: auto;
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer, var(--ak-bg-art));
  background-size: cover;
  background-position: center top;
  touch-action: manipulation;
}

.shelf::before {
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--margin-x);
  width: var(--hair);
  background: var(--margin-ink);
  pointer-events: none;
}

.shelf-inner {
  width: min(100%, 880px);
  margin: 0 auto;
  padding:
    max(12px, env(safe-area-inset-top))
    calc(var(--pad-x) + 60px)
    calc(max(16px, env(safe-area-inset-bottom)) + 120px)
    calc(var(--margin-x) + 16px);
}

.shelf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  min-height: 48px;
  margin-bottom: 8px;
}

.shelf-body { display: flex; flex-direction: column; gap: 16px; }

.shelf-map {
  --side: min(calc(100vw - var(--margin-x) - 140px), 44dvh, 340px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

.shelf-entry { padding: 12px 0 18px; border-bottom: var(--hair) solid var(--rule-ink); }

.entry-date {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: calc(var(--rule) * 0.6);
  font-weight: var(--ak-title-weight);
  line-height: var(--rule);
}

.entry-summary,
.entry-page p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.entry-page p + p { margin-top: 8px; }
.entry-page { margin-top: 8px; }

.entry-summary { color: var(--ak-ink-muted); font-style: italic; }
.entry-page { max-width: 60ch; }
.entry-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.confirm {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 36;
  padding: 20px calc(var(--pad-x) + 4px) max(20px, env(safe-area-inset-bottom)) calc(var(--margin-x) + 16px);
  border-top: var(--hair) solid var(--rule-ink);
  background: var(--ak-surface);
  color: var(--ak-ink);
}

.confirm p { margin: 0 0 12px; font-size: 18px; line-height: 1.45; }
.confirm-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- sideways: the page on the right, the ticks and controls on the left ---------- */

@media (orientation: landscape) {
  :root { --rule: clamp(28px, 9dvh, 42px); }

  .play {
    grid-template-areas: 'logo board' 'foot board' 'shelf board';
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-columns: clamp(150px, 20vw, 220px) minmax(0, 1fr);
    column-gap: clamp(18px, 3vw, 40px);
    row-gap: 12px;
    padding-left: calc(var(--margin-x) + 16px);
    padding-right: calc(var(--pad-x) + 8px);
  }

  .logo { max-width: 100%; height: clamp(24px, 7dvh, 40px); }

  .shelf-open { justify-self: start; }
  .foot { justify-content: flex-start; gap: 10px; }
  .foot-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .progress { flex-wrap: wrap; row-gap: 2px; }
  .quiet { font-size: 12px; }

  .prompt { max-width: 30ch; font-size: calc(var(--rule) * 0.74); }

  .cards { flex-direction: row; gap: 14px; }

  .card { --card-w: min(calc((100cqw - 16px) / 2), calc(100cqh * var(--card-ratio)), 440px); }

  .result {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 20px;
    align-content: start;
  }

  .result-reason { grid-column: 1 / -1; }
  .result .square-slot {
    --side: min(calc(100cqh - var(--rule) - 48px), calc(60cqw - 44px), 440px);
    grid-row: 2 / 4;
    align-self: start;
  }
  .result-line { grid-column: 2; align-self: end; }
  .dot-info { grid-column: 2; }

  .shelf-body { flex-direction: row; align-items: flex-start; gap: 32px; }
  .shelf-map { --side: min(calc(100dvh - 160px), 36vw, 340px); position: sticky; top: 12px; flex: none; }
  .shelf-pages { flex: 1 1 auto; min-width: 0; }
}

/* A wide desktop keeps the phone's shape, centred. */
@media (min-width: 1000px) and (orientation: landscape) {
  .play {
    padding-left: max(calc(var(--margin-x) + 16px), calc(50vw - 520px));
    padding-right: max(calc(var(--pad-x) + 8px), calc(50vw - 520px));
  }
  .play::before { left: calc(max(calc(var(--margin-x) + 16px), calc(50vw - 520px)) - 18px); }
}

/* ---------- motion: slow, small, and only when wanted ---------- */

@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .card {
    transition: opacity var(--slow) ease, transform 500ms var(--ease);
  }
  :root:not(.ac-still) .card::before,
  :root:not(.ac-still) .card::after,
  :root:not(.ac-still) .card-text { transition: opacity var(--slow) ease; }
  /* The pick itself never waits on a fade. */
  :root:not(.ac-still) .card.is-chosen::after { transition: none; }
  :root:not(.ac-still) .card.is-faded { transition: none; }
  :root:not(.ac-still) .card.is-chosen .card-mark { animation: hyd-tick 160ms ease-out backwards; }

  /* The next question is readable from its first frame: it inks in from half strength, never hidden or clipped. */
  :root:not(.ac-still) .ask.is-writing .prompt { animation: hyd-ink 700ms ease-out backwards; }
  :root:not(.ac-still) .ask.is-writing .caps,
  :root:not(.ac-still) .ask.is-writing .nudge { animation: hyd-ink 700ms ease-out backwards; }
  /* backwards, not both: once in, the card lets go of its opacity so a pick can dim the other one. */
  :root:not(.ac-still) .cards.is-arriving .card { animation: hyd-ink 500ms ease-out backwards; }

  :root:not(.ac-still) .ticks li { transition: height 400ms var(--ease), background-color 400ms ease, opacity var(--slow) ease; }

  :root:not(.ac-still) .result.is-arriving .square-slot { animation: hyd-fade 900ms ease-out both; }
  :root:not(.ac-still) .result-line.is-in { animation: hyd-fade 1200ms ease-out both; }
  :root:not(.ac-still) .dot-today.is-landed { animation: hyd-settle 900ms var(--ease) both; }
  :root:not(.ac-still) .dot-past { animation: hyd-fade 900ms ease-out both; }
  :root:not(.ac-still) .trail.is-in { animation: hyd-fade 1200ms ease-out backwards; }

  :root:not(.ac-still) .shelf,
  :root:not(.ac-still) .confirm { animation: hyd-fade 500ms ease-out both; }
}

@keyframes hyd-ink {
  from { opacity: 0.55; transform: translateY(3px); }
  to { opacity: 1; transform: none; }
}

@keyframes hyd-tick {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes hyd-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hyd-settle {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ---------- the kept page (the chrome's ending), fitted to the phone ---------- */
/* The page never runs off the screen: its verdict stays at the top and its buttons at the foot, and only the
   words between them scroll, inside the page. The strength and the watch-out sit high, so they show at once. */
html body #activity-chrome-ending.site-insightenes {
  justify-content: flex-start;
  padding: calc(72px + env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
}
html body #activity-chrome-ending.site-insightenes > .ac-card {
  margin: 0 auto;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 16px;
  line-height: 27px;
  background-image:
    linear-gradient(90deg, transparent 48px, var(--ak-accent) 48px, var(--ak-accent) 49px, transparent 49px),
    repeating-linear-gradient(transparent 0 26px, color-mix(in srgb, var(--ak-outline) 55%, transparent) 26px 27px);
  background-attachment: scroll, local;
}
html body #activity-chrome-ending.site-insightenes .ac-verdict {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-top: 20px;
  font-size: 20px;
  line-height: 27px;
  background: var(--ak-surface);
}
html body #activity-chrome-ending.site-insightenes .ac-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  align-items: center;
  margin-top: 12px;
  padding: 12px 0 16px;
  border-top: 1px solid var(--ak-outline);
  background: var(--ak-surface);
}
/* Upright, the square with today's dot sits small beside the verdict, so the dot is on the page at once. */
html body #activity-chrome-ending.site-insightenes > .ac-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  grid-template-rows: auto 1fr auto;
  column-gap: 10px;
}
html body #activity-chrome-ending.site-insightenes .ac-verdict { grid-column: 1; grid-row: 1; }
html body #activity-chrome-ending.site-insightenes .ac-lines { grid-column: 1 / -1; grid-row: 2; }
html body #activity-chrome-ending.site-insightenes .ac-actions { grid-column: 1 / -1; grid-row: 3; }
html body #activity-chrome-ending.site-insightenes .ac-work { grid-column: 2; grid-row: 1; align-self: start; margin: 14px 0 6px; padding: 2px; }

/* While more words sit below, the button row says so beside the button, with one drawn chevron. */
html body #activity-chrome-ending.site-insightenes.hyd-more .ac-actions::after {
  content: 'Scroll the page for more';
  margin-left: auto;
  padding-left: 24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M3 3 L12 11 L21 3' fill='none' stroke='%237B4B8F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left center / 16px 10px no-repeat;
  color: var(--ak-ink-muted);
  font-size: 14px;
  font-style: italic;
  line-height: 1.3;
}

/* Earlier pages, reachable from the kept page: it sits in the top-left corner the page leaves free. */
.ending-pages {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 33;
  background: var(--ak-surface);
}

/* Sideways: the square on the left with Earlier pages under it, the words on the right, a tighter line. */
@media (orientation: landscape) and (max-height: 600px) {
  html body #activity-chrome-ending.site-insightenes {
    padding: 12px calc(72px + env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left));
  }
  html body #activity-chrome-ending.site-insightenes > .ac-card {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 20px;
    width: 100%;
    max-width: 900px;
    margin: 0;
    font-size: 15px;
    line-height: 24px;
    background-image:
      linear-gradient(90deg, transparent 48px, var(--ak-accent) 48px, var(--ak-accent) 49px, transparent 49px),
      repeating-linear-gradient(transparent 0 23px, color-mix(in srgb, var(--ak-outline) 55%, transparent) 23px 24px);
  }
  html body #activity-chrome-ending.site-insightenes .ac-verdict { grid-column: 2; grid-row: 1; padding-top: 14px; font-size: 19px; line-height: 24px; }
  html body #activity-chrome-ending.site-insightenes .ac-lines { grid-column: 2; grid-row: 2; }
  html body #activity-chrome-ending.site-insightenes .ac-actions { grid-column: 2; grid-row: 3; margin-top: 8px; padding: 8px 0 10px; }
  html body #activity-chrome-ending.site-insightenes .ac-work {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
    position: sticky;
    top: 0;
    max-width: none;
    margin: 14px 0 0;
  }
  .ending-pages {
    top: calc(12px + 14px + 172px + 14px);
    left: calc(max(16px, env(safe-area-inset-left)) + 64px);
    max-width: 172px;
    padding-right: 12px;
    font-size: 15px;
  }
}

/* ---------- the opening page (start.js), fitted to the phone ---------- */
/* The painted title stays inside the paper, each opening line is written on one ruled line rather than
   every other one, and the button to turn the page stays on screen either way up. */
html body #activity-start.site-insightenes .ak-head,
html body #activity-start.site-insightenes .ak-title { max-width: 100%; }
html body #activity-start.site-insightenes .ak-logo { max-width: 100%; height: auto; }
html body #activity-start.site-insightenes .ak-scene { margin-top: 0; gap: 16px; }
html body #activity-start.site-insightenes .ak-scene-line { font-size: 21px; line-height: 32px; }
html body #activity-start.site-insightenes .ak-scene-line + .ak-scene-line { margin-top: 32px; }

@media (orientation: landscape) and (max-height: 600px) {
  /* Sideways the words take the left of the page and the button sits at its foot on the right. */
  html body #activity-start.site-insightenes .ak-scene {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    row-gap: 8px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  html body #activity-start.site-insightenes .ak-head { grid-column: 1; grid-row: 1; }
  html body #activity-start.site-insightenes .ak-scene-lines { grid-column: 1; grid-row: 2; }
  html body #activity-start.site-insightenes .ak-scene-actions { grid-column: 2; grid-row: 1 / 3; align-self: end; }
  html body #activity-start.site-insightenes .ak-logo { max-height: 56px; }
  html body #activity-start.site-insightenes .ak-scene-line { font-size: 19px; }
  html body #activity-start.site-insightenes .ak-scene-line + .ak-scene-line { margin-top: 0; }
}