/* When Plans Change: an open notebook page with the question number painted huge across it. */

:root {
  --graphite: #4E4A45;
  --rule: color-mix(in srgb, var(--ak-accent-2) 42%, transparent);
  --edge: max(16px, env(safe-area-inset-right));
  /* The margin line sits where the status bar draws its own, so the page reads as one sheet. */
  --margin-x: calc(max(12px, env(safe-area-inset-left)) + 44px);
  --page-left: calc(var(--margin-x) + 14px);
  --gap: clamp(6px, 1.5dvh, 14px);
  --slow: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background-color: var(--ak-bg);
  background-image:
    var(--ak-bg-art),
    var(--ak-backdrop-layer, linear-gradient(color-mix(in srgb, var(--ak-bg) 96%, transparent), color-mix(in srgb, var(--ak-bg) 96%, transparent)), url("art/notebook-table.jpg"));
  background-size: var(--ak-bg-size), cover, cover;
  background-position: center;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  -webkit-text-size-adjust: 100%;
}

button { font: inherit; color: inherit; }

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

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

.play {
  position: fixed;
  inset: 0;
  padding: calc(var(--ac-status-h, 64px) + 6px) 0 max(10px, env(safe-area-inset-bottom));
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.page {
  position: relative;
  height: 100%;
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 0 var(--edge) 0 var(--page-left);
}

/* The one terracotta margin line, top to bottom. */
.page::before {
  content: '';
  position: absolute;
  top: calc(-6px - var(--ac-status-h, 64px));
  bottom: -40px;
  left: var(--margin-x);
  width: 1.5px;
  background: var(--ak-accent);
  pointer-events: none;
}

.logo {
  display: block;
  height: clamp(40px, 7dvh, 60px);
  width: auto;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  min-width: 48px;
  padding: 0 20px;
  border: 1.5px solid var(--ak-ink);
  border-radius: 999px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.1;
  cursor: pointer;
  touch-action: manipulation;
}

.pill:active { background: var(--ak-choice-border); }

.pill.primary {
  border-color: var(--ak-btn-fill);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
}

.pill.primary:active { background: var(--ak-btn-active); }

.pill.small { min-height: 48px; padding: 0 16px; font-size: 16px; }

.pill.quiet { border-color: var(--ak-outline); background: var(--ak-bg); }

@media (hover: hover) {
  .pill:hover { background: var(--ak-bg); }
  .pill.primary:hover { background: var(--ak-btn-hover); }
}

.note {
  margin: 0;
  color: var(--ak-ink-muted);
  font-size: 14px;
  font-style: italic;
  line-height: 1.3;
}

/* ---------- the question ---------- */

.quiz {
  display: grid;
  height: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "num logo"
    "prompt prompt"
    "cards cards"
    "marks marks"
    "foot foot"
    "note note";
  row-gap: var(--gap);
}

.numeral {
  grid-area: num;
  margin: 0;
  color: var(--ak-accent-2);
  font-family: var(--ak-font-display);
  /* It marks the place on the page; the situation and the cards are what the eye should land on. */
  align-self: end;
  font-size: min(22dvw, 10.5dvh, 120px);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.8;
  margin-left: -0.04em;
}

.quiz .logo { grid-area: logo; align-self: start; height: clamp(52px, 9dvh, 84px); }

.prompt {
  grid-area: prompt;
  margin: 0;
  /* Written on the ruled lines. */
  --lh: 1.5em;
  min-height: calc(var(--lh) * 2);
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: clamp(19px, min(6dvw, 3.2dvh), 28px);
  font-weight: 500;
  line-height: var(--lh);
  background-image: linear-gradient(transparent calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px));
  background-size: 100% var(--lh);
  text-wrap: pretty;
}

/* How much rides on this situation, written small on the ruled line above it. */
.prompt::before {
  content: attr(data-kind);
  display: block;
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-body);
  font-size: 0.66em;
  font-style: italic;
  font-weight: 600;
  line-height: calc(1.5em / 0.66);
}

.cards {
  grid-area: cards;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 0;
  /* The cards are laid on the page and cross the margin line. */
  margin-left: calc(16px - var(--page-left));
}

.card {
  --w: min(calc((100cqw - 14px) / 2), calc(100cqh * 0.92), 280px);
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--w);
  height: min(100cqh, calc(var(--w) * 1.6));
  margin: 0;
  border-style: solid;
  border-width: 0;
  background: none;
  color: var(--ak-choice-ink);
  font-size: clamp(16px, min(5.2cqw, 6.4cqh), 21px);
  font-weight: 600;
  line-height: 1.32;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  border-image-repeat: stretch;
}

/* Ticket stub: square corners, torn top edge. */
.card-stub {
  border-image-source: url("art/card-square.png");
  border-image-slice: 46 fill;
  border-image-width: 28px;
  padding: 30px 20px 18px;
}

/* Folded corner: round corners, top right turned down. */
.card-fold {
  border-image-source: url("art/card-round.png");
  border-image-slice: 72 72 40 40 fill;
  border-image-width: 44px 44px 24px 24px;
  padding: 26px 36px 18px 20px;
}

.card-text { display: block; text-wrap: pretty; }

.card-mine {
  display: none;
  align-self: flex-start;
  margin-top: auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ak-choice-selected-bg);
  color: var(--ak-choice-selected-ink);
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
}

.card.is-mine .card-mine { display: inline-block; }

.card.is-mine { outline: 3px solid var(--ak-accent); outline-offset: 4px; }

.card.is-dimmed { opacity: 0.35; }

.resume {
  grid-area: cards;
  align-self: center;
  display: grid;
  gap: 16px;
  max-height: 100%;
  overflow-y: auto;
}

.resume-text { margin: 0; font-size: 18px; line-height: 1.5; }

.resume-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Calling the dot: the square drawn as four tappable corners, its labels outside each edge as on the poster. */
.guess {
  grid-area: cards;
  container-type: size;
  display: grid;
  place-items: center;
  min-height: 0;
}

.guess-square {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    ". up ."
    "left grid right"
    ". down .";
  align-items: center;
  justify-items: center;
  gap: 6px;
  /* Sized from both the width and the height of its space, so the whole square always fits:
     square when upright, wider than tall when the phone is sideways. */
  width: min(100cqw, 440px);
  height: min(100cqh, 100cqw, 440px);
}

.guess-axis {
  color: var(--ak-ink-muted);
  font-size: 14px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.1;
}

.guess-up { grid-area: up; }
.guess-down { grid-area: down; }
.guess-left, .guess-right { writing-mode: vertical-rl; }
.guess-left { grid-area: left; rotate: 180deg; }
.guess-right { grid-area: right; }

.guess-grid {
  grid-area: grid;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100%;
  /* The lines between the spots are the sage showing through a 1px gap. */
  gap: 1px;
  border: 3px solid var(--ak-accent-2);
  background: var(--ak-accent-2);
}

.guess-grid.is-sharp { grid-template-columns: repeat(3, 1fr); }

.guess-corner {
  min-width: 48px;
  min-height: 48px;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font: inherit;
  font-size: clamp(14px, 3.6dvw, 17px);
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  touch-action: manipulation;
}

/* On the sharper square the middle band is shaded, and each other spot shows a small ring to tap. */
.guess-corner.is-band { background: var(--ak-bg); }
.guess-corner svg { width: 22px; height: 22px; fill: none; stroke: var(--ak-accent-2); stroke-width: 3; }
.guess-corner.is-mine svg { fill: var(--ak-btn-ink); stroke: var(--ak-btn-ink); }

.guess-corner:focus-visible { outline: 3px solid var(--ak-accent); outline-offset: -6px; }

.guess-corner.is-mine {
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
}

@media (hover: hover) {
  .guess-corner:hover { background: var(--ak-bg); }
  .guess-corner.is-mine:hover { background: var(--ak-btn-fill); }
}

.marks {
  grid-area: marks;
  display: block;
  width: 100%;
  max-width: 440px;
  height: 28px;
}

.mark-rule { stroke: var(--rule); stroke-width: 1.5; }
.mark-open { fill: var(--ak-bg); stroke: var(--ak-accent-2); stroke-width: 2.2; }
.mark-done { fill: var(--ak-accent-2); }
.mark-now { fill: var(--ak-accent); }

.foot {
  grid-area: foot;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.quiz .notes {
  grid-area: note;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

/* The key: the square the answers are building, drawn small, with one plain sentence beside it. */
.key {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}

.key-text {
  margin: 0;
  color: var(--ak-ink);
  font-size: 15px;
  line-height: 1.35;
}

.key-text strong { color: var(--ak-link); font-weight: 700; }

/* The square the key talks about, drawn small with the same four labels as the call and the result. */
.key-square {
  flex: none;
  display: grid;
  grid-template-columns: auto 50px auto;
  grid-template-rows: auto 50px auto;
  grid-template-areas:
    ". up ."
    "left box right"
    ". down .";
  align-items: center;
  justify-items: center;
  gap: 2px;
  color: var(--ak-ink-muted);
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.1;
}

.ks-up { grid-area: up; }
.ks-down { grid-area: down; }
.ks-left, .ks-right { writing-mode: vertical-rl; }
.ks-left { grid-area: left; rotate: 180deg; }
.ks-right { grid-area: right; }

.ks-box {
  grid-area: box;
  position: relative;
  width: 100%;
  height: 100%;
  border: 2.5px solid var(--ak-accent-2);
  background:
    linear-gradient(var(--rule), var(--rule)) center / 1.5px 100% no-repeat,
    linear-gradient(var(--rule), var(--rule)) center / 100% 1.5px no-repeat,
    var(--ak-surface);
}

/* One dot, not yet placed: a ring at the centre. */
.ks-box i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border: 2.5px solid var(--ak-accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* The key is for answering; the halfway page, picking up and the call have their own words. */
.quiz:not([data-view="quiz"]) .key { display: none; }

/* Between takes: what is saved, what the streak means and what the next take holds, one to a line. */
.between-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.between-list li {
  padding-left: 12px;
  border-left: 3px solid var(--ak-accent-2);
  font-size: 16px;
  line-height: 1.4;
}

.between-list li:first-child { border-left-color: var(--ak-accent); font-weight: 600; }

/* On a small screen the lines scroll and the two buttons stay in reach beneath them. */
.between .resume-actions {
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  background: var(--ak-bg);
}

.quiz[data-view="between"] .marks { display: none; }
.quiz[data-view="between"] .between { grid-row: 3 / 5; }

/* On the call every question is answered, so the square takes the room the marks had. */
.quiz[data-view="guess"] .marks { display: none; }
.quiz[data-view="guess"] .guess { grid-row: 3 / 5; }

/* ---------- the poster ---------- */

.poster {
  display: grid;
  height: 100%;
  /* Upright the square sits beside its heading and key, so the written page below has the room
     to show every line, the strength and the watch-out included. */
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "head square"
    "legend square"
    "page page"
    "actions actions"
    "note note";
  column-gap: 12px;
  row-gap: var(--gap);
}

.poster-head {
  grid-area: head;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.poster-word {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: clamp(32px, min(10dvw, 6.4dvh), 76px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}

.square-wrap {
  grid-area: square;
  justify-self: center;
  width: min(calc(100vw - 32px), calc(46dvh * 323 / 261), 620px);
  margin-left: calc(16px - var(--page-left));
}

.square {
  position: relative;
  width: 100%;
  aspect-ratio: 323 / 261;
  overflow: hidden;
}

.square-art {
  position: absolute;
  top: 0;
  left: 0;
  width: 118.9%;
  height: 100%;
  /* Keep the square and the 'redraw it' label; leave out the sample markers painted beside them. */
  clip-path: polygon(0 0, 69.27% 0, 69.27% 40.23%, 100% 40.23%, 100% 61.3%, 69.27% 61.3%, 69.27% 100%, 0 100%);
  user-select: none;
  -webkit-user-drag: none;
}

.square-ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ink-line {
  fill: none;
  stroke: var(--graphite);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.disc {
  position: absolute;
  width: 11%;
  aspect-ratio: 1;
  border: 3px solid var(--ak-accent);
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.disc.is-filled { background: var(--ak-accent); }

.call-zone {
  position: absolute;
  border: 2px dashed var(--graphite);
  border-radius: 3px;
  background: color-mix(in srgb, var(--graphite) 7%, transparent);
  pointer-events: none;
}

.ring {
  position: absolute;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.ring svg { width: 22px; height: 22px; }
.ring circle { fill: var(--ak-bg); stroke: var(--ak-accent-2); stroke-width: 3; }

.ring-date {
  position: absolute;
  top: 50%;
  left: 38px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transform: translateY(-50%);
}

.ring-date.is-left { left: auto; right: 38px; }

.legend {
  grid-area: legend;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  color: var(--ak-ink-muted);
  font-size: 15px;
  list-style: none;
}

.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend svg { width: 20px; height: 20px; flex: none; }

.poster-page {
  grid-area: page;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  --lh: 1.65em;
  font-size: 17px;
  line-height: var(--lh);
  background-image: linear-gradient(transparent calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px));
  background-size: 100% var(--lh);
  background-attachment: local;
  user-select: text;
}

.page-line { margin: 0; }
.page-line strong { color: var(--ak-link); font-weight: 600; }

/* The strength and the watch-out each stand on their own, marked by a rule in the margin. */
.page-line.is-strength,
.page-line.is-watch { padding-left: 10px; border-left: 3px solid var(--ak-accent-2); }
.page-line.is-watch { border-left-color: var(--ak-accent); }

/* The overall tendency, both axes in one line, set apart from the detail below it. */
.page-head { color: var(--ak-ink); font-family: var(--ak-font-display); font-size: 17px; font-weight: 600; }

.poster-page.has-more::after {
  content: 'More below. Scroll to read on.';
  position: sticky;
  bottom: 0;
  display: block;
  margin-top: calc(-1 * var(--lh) - 1px);
  line-height: var(--lh);
  border-top: 1px solid var(--ak-outline);
  background: var(--ak-bg);
  color: var(--ak-ink-muted);
  font-size: 15px;
  font-style: italic;
}

.poster-actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.poster .note { grid-area: note; }

/* The poster is a whole result from its first frame: the square, then every written line, then
   the buttons. The square gives up some size so the strength and the watch-out are in view too. */
.poster { row-gap: clamp(4px, 1dvh, 10px); }
.poster .square-wrap { width: min(54vw, calc(21dvh * 323 / 261), 620px); margin-left: 0; margin-right: -6px; }
.poster .poster-page { --lh: 21px; font-size: 15px; }
.poster .poster-word { font-size: clamp(24px, min(7dvw, 3.6dvh), 44px); }
.poster .logo { display: none; }
.poster .poster-head { flex-direction: column; justify-content: flex-start; gap: 4px; }
.poster-call { margin: 0; color: var(--ak-ink); font-size: 14px; font-weight: 600; line-height: 1.3; }
.poster .legend { flex-direction: column; align-self: end; gap: 2px 12px; font-size: 13px; }
.poster .legend svg { width: 16px; height: 16px; }

/* ---------- the kept page (chrome.js draws it; this only makes it fit the window) ---------- */

/* The kept page is a whole page, not a card over the quiz: opaque, edge to edge, with nothing
   behind it to compete. Type is set a little tighter than the chrome's so the whole page fits on a
   phone either way up; on the very smallest screens only the written lines scroll, on their own
   ruling, with a plain cue while more is below. The verdict keeps clear of the round help button. */
html body #activity-chrome-ending.site-insightenes {
  --end-lh: 23px;
  /* On a wide screen the words keep a comfortable measure in the middle of the page. */
  --end-left: max(calc(46px + env(safe-area-inset-left)), calc((100vw - 1000px) / 2 + 46px));
  --end-right: max(calc(16px + env(safe-area-inset-right)), calc((100vw - 1000px) / 2 + 16px));
  justify-content: stretch;
  overflow: hidden;
  padding: 0;
  background: var(--ak-surface);
}

html body #activity-chrome-ending.site-insightenes .ac-card {
  display: grid;
  /* Upright: the written page takes the height, so the strength and the watch-out are in view on a
     phone; how the call went and what the next take brings sit under it, and the two buttons share
     the last row. The poster just before showed the square large, so a phone leaves it out here. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "verdict verdict"
    "lines lines"
    "called called"
    "next next"
    "replay history";
  column-gap: 12px;
  row-gap: 8px;
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: max(16px, env(safe-area-inset-top)) var(--end-right) max(14px, env(safe-area-inset-bottom)) var(--end-left);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-image: linear-gradient(90deg, transparent calc(var(--end-left) - 14px), var(--ak-accent) calc(var(--end-left) - 14px), var(--ak-accent) calc(var(--end-left) - 12.5px), transparent calc(var(--end-left) - 12.5px));
  font-size: 16px;
  line-height: var(--end-lh);
}

html body #activity-chrome-ending.site-insightenes .ac-verdict {
  grid-area: verdict;
  padding-right: 64px;
  font-family: var(--ak-font-display);
  font-size: 19px;
  line-height: 25px;
}

html body #activity-chrome-ending.site-insightenes .ac-work {
  grid-area: work;
  display: none;
  justify-self: end;
  align-self: start;
  margin: 0;
}

@media (orientation: portrait) and (min-width: 600px) {
  /* A tablet upright has the room for the square beside what the next take brings. */
  html body #activity-chrome-ending.site-insightenes .ac-card {
    grid-template-areas:
      "verdict verdict"
      "lines lines"
      "called called"
      "next work"
      "replay history";
  }
  html body #activity-chrome-ending.site-insightenes .ac-work { display: block; }
}

html body #activity-chrome-ending.site-insightenes .ac-work img {
  width: auto;
  max-width: 100%;
  max-height: min(14dvh, 200px);
}

html body #activity-chrome-ending.site-insightenes .ac-lines {
  grid-area: lines;
  position: relative;
  min-height: calc(var(--end-lh) * 3);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--ak-surface);
  background-image: repeating-linear-gradient(transparent 0 calc(var(--end-lh) - 1px), color-mix(in srgb, var(--ak-outline) 55%, transparent) calc(var(--end-lh) - 1px) var(--end-lh));
  background-attachment: local;
  scrollbar-width: thin;
  scrollbar-color: var(--ak-accent-2) transparent;
}

html body #activity-chrome-ending.site-insightenes .ac-line { line-height: var(--end-lh); }

/* The strength and the watch-out each stand on their own, marked by a rule in the margin. */
html body #activity-chrome-ending.site-insightenes .ac-line:nth-child(3),
html body #activity-chrome-ending.site-insightenes .ac-line:nth-child(4) {
  padding-left: 10px;
  border-left: 3px solid var(--ak-accent-2);
  font-weight: 600;
}

html body #activity-chrome-ending.site-insightenes .ac-line:nth-child(4) { border-left-color: var(--ak-accent); }

html body #activity-chrome-ending.site-insightenes .ac-lines.has-more::after {
  content: 'More below. Scroll to read on.';
  position: sticky;
  bottom: 0;
  display: block;
  /* Laid over the last visible line, never adding one, so the cue cannot cause the scroll it reports. */
  margin-top: calc(-1 * var(--end-lh) - 1px);
  line-height: var(--end-lh);
  border-top: 1px solid var(--ak-outline);
  background: var(--ak-surface);
  color: var(--ak-ink-muted);
  font-size: 15px;
  font-style: italic;
}

/* The buttons and the line about the call are placed on the card's own grid. */
html body #activity-chrome-ending.site-insightenes .ac-actions { display: contents; }
html body #activity-chrome-ending.site-insightenes .ac-actions .ac-replay { grid-area: replay; }
html body #activity-chrome-ending.site-insightenes .ac-actions .ac-history { grid-area: history; }
html body #activity-chrome-ending.site-insightenes .ac-actions button { width: 100%; margin: 0; padding: 6px 12px; line-height: 1.25; }

/* Taking it again is the main way on; the player's pages sit beside it. */
html body #activity-chrome-ending.site-insightenes .ac-actions .ac-replay {
  border-color: var(--ak-btn-fill);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-style: normal;
  font-weight: 600;
}

html body #activity-chrome-ending.site-insightenes .ac-actions .ac-history { font-style: normal; font-weight: 600; }

html body #activity-chrome-ending.site-insightenes .ac-next {
  grid-area: next;
  align-self: start;
  margin: 0;
  color: var(--ak-ink-muted);
  font-size: 15px;
  font-style: italic;
  line-height: 1.4;
}

/* How the call came out: the one score on the page, said plainly ahead of what next time brings. */
/* The call and where the dot landed, said in the same words as the square. */
html body #activity-chrome-ending.site-insightenes .ac-called {
  grid-area: called;
  margin: 0;
  padding-left: 10px;
  border-left: 2px dashed var(--graphite);
  color: var(--ak-ink);
  font-size: 14px;
  line-height: 1.35;
}

/* How the call came out: the one score on the page, leading the line about what was called. */
html body #activity-chrome-ending.site-insightenes .ac-call {
  display: inline;
  color: var(--ak-ink);
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
}

@media (orientation: portrait) and (max-height: 720px) {
  /* A short phone upright: tighter type, so the written page keeps the room. */
  html body #activity-chrome-ending.site-insightenes { --end-lh: 21px; }
  html body #activity-chrome-ending.site-insightenes .ac-card { font-size: 15px; }
  html body #activity-chrome-ending.site-insightenes .ac-verdict { font-size: 18px; line-height: 23px; }
  html body #activity-chrome-ending.site-insightenes .ac-next { font-size: 14px; line-height: 1.3; }
  html body #activity-chrome-ending.site-insightenes .ac-call { font-size: 15px; }
}

@media (orientation: landscape) {
  /* Sideways: the verdict and the written lines down the left, and the square, how the call went
     and the two buttons down the right, starting below the round help button. */
  html body #activity-chrome-ending.site-insightenes { --end-lh: 21px; }

  html body #activity-chrome-ending.site-insightenes .ac-card {
    grid-template-columns: minmax(0, 1fr) min(30vw, 260px);
    /* Every row on the right but the square is sized to its content, and the square shrinks to the
       space left, so the buttons always sit inside the window. */
    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
    grid-template-areas:
      "verdict ."
      "lines work"
      "lines called"
      "lines next"
      "lines replay"
      "lines history";
    column-gap: 22px;
    row-gap: 6px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    font-size: 15px;
  }

  html body #activity-chrome-ending.site-insightenes .ac-verdict { padding-right: 0; font-size: 18px; line-height: 24px; }

  html body #activity-chrome-ending.site-insightenes .ac-work {
    display: flex;
    align-self: stretch;
    justify-self: stretch;
    justify-content: center;
    align-items: flex-start;
    min-height: 0;
  }

  html body #activity-chrome-ending.site-insightenes .ac-work img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  html body #activity-chrome-ending.site-insightenes .ac-next { font-size: 14px; line-height: 1.35; }
  html body #activity-chrome-ending.site-insightenes .ac-call { font-size: 16px; }
  html body #activity-chrome-ending.site-insightenes .ac-called { font-size: 14px; }
}

@media (orientation: landscape) and (max-height: 520px) {
  /* A phone sideways: the square was just shown on the poster, so the room goes to the words, and
     the heading runs the full width, clear of the round help button. */
  html body #activity-chrome-ending.site-insightenes .ac-work { display: none; }
  html body #activity-chrome-ending.site-insightenes .ac-card {
    grid-template-areas:
      "verdict verdict"
      "lines work"
      "lines called"
      "lines next"
      "lines replay"
      "lines history";
  }
  html body #activity-chrome-ending.site-insightenes .ac-verdict { padding-right: 64px; }
}

/* ---------- the opening page (start.js draws it; this only sets the words and keeps the buttons in view) ---------- */

/* The three lines sit one to a ruled line, not double spaced, with a pencilled note under them. */
html body #activity-start.site-insightenes .ak-scene { margin-top: 0; gap: 16px; }
html body #activity-start.site-insightenes .ak-scene .ak-logo { width: auto; max-height: min(110px, 14dvh); }
html body #activity-start.site-insightenes .ak-scene-lines { max-width: 40ch; }
html body #activity-start.site-insightenes .ak-scene-line { font-size: 20px; line-height: 32px; }

html body #activity-start.site-insightenes .ak-scene-lines::after {
  content: "Tuesday, 8.14am. The bus didn't come. Walked on to the next stop and texted Sam I'd be ten minutes late. Would I do that again? Not sure.";
  display: block;
  margin-top: 32px;
  padding-left: 12px;
  border-left: 2px solid var(--ak-accent);
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-display);
  font-size: 17px;
  font-style: italic;
  line-height: 32px;
}

@media (prefers-reduced-motion: no-preference) {
  /* The lines arrive close together, so the page is never left blank for long. */
  html body #activity-start.site-insightenes .scene-fade .ak-scene-line { animation-delay: calc(150ms + var(--ak-line) * 450ms); }
  html body #activity-start.site-insightenes .ak-scene-lines::after { animation: ak-fade 900ms ease-out 1500ms both; }
}

@media (orientation: landscape) and (max-height: 600px) {
  /* Sideways on a phone: the lines run the full width, one to a ruled line, and the two buttons sit in a row at the foot. */
  html body #activity-start.site-insightenes .ak-scene {
    width: min(100%, 860px);
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  html body #activity-start.site-insightenes .ak-scene .ak-logo { max-height: min(60px, 15dvh); }
  html body #activity-start.site-insightenes .ak-scene-lines { max-width: none; }
  html body #activity-start.site-insightenes .ak-scene-line { font-size: 19px; line-height: 30px; }
  html body #activity-start.site-insightenes .ak-scene-lines::after { margin-top: 6px; font-size: 16px; line-height: 28px; }
  html body #activity-start.site-insightenes .ak-scene-actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
  }
}

@media (orientation: portrait) and (max-height: 700px) {
  /* A short phone upright: tighter lines, and the note steps aside so both buttons stay in view. */
  html body #activity-start.site-insightenes .ak-scene { gap: 12px; padding-top: 16px; padding-bottom: 16px; }
  html body #activity-start.site-insightenes .ak-scene .ak-logo { max-height: 80px; }
  html body #activity-start.site-insightenes .ak-scene-line { font-size: 18px; line-height: 28px; }
  html body #activity-start.site-insightenes .ak-scene-lines::after { display: none; }
}

/* ---------- sheets: history and delete ---------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 26;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--ac-status-h, 64px) + 8px) 12px max(12px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ak-bg) 82%, transparent);
}

.sheet-page {
  --lh: 48px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(100%, 520px);
  max-height: 100%;
  overflow-y: auto;
  padding: 12px 18px 18px 58px;
  border: 1px solid var(--ak-outline);
  border-radius: 16px;
  background-color: var(--ak-surface);
  background-image:
    linear-gradient(90deg, transparent 44px, var(--ak-accent) 44px, var(--ak-accent) 45.5px, transparent 45.5px),
    repeating-linear-gradient(transparent 0 47px, var(--rule) 47px 48px);
  background-attachment: local;
}

.sheet-title {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 48px;
}

.sheet-text { margin: 0; font-size: 17px; line-height: 1.5; }

.sheet-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.sheet-page > .pill { align-self: flex-start; }

.history-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: "mini words" "mini actions";
  gap: 6px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ak-outline);
}

.mini { grid-area: mini; width: 44px; height: 44px; }
.mini svg { width: 44px; height: 44px; }
.mini-box { fill: var(--ak-bg); stroke: var(--ak-accent-2); stroke-width: 2.5; }
.mini-cross { stroke: var(--rule); stroke-width: 1.2; }
.mini-dot { fill: var(--ak-accent); }

.history-words { grid-area: words; display: grid; gap: 2px; }
.history-date { font-size: 17px; font-weight: 600; }
.history-where { color: var(--ak-ink-muted); font-size: 15px; font-style: italic; }
.history-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- sideways: board on the right, the rest on the left ---------- */

@media (orientation: landscape) {
  .page { width: min(100%, 1080px); }

  /* The numeral and the logo share the top left, the key and notes have the left column to
     themselves at full size, and the progress marks run under the cards they count. */
  .quiz {
    grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "num prompt"
      "note cards"
      "foot marks";
    column-gap: clamp(16px, 3vw, 40px);
  }

  .quiz .logo { grid-area: num; justify-self: end; height: clamp(52px, 17dvh, 100px); }

  .key-text { font-size: 14px; }

  .numeral {
    align-self: start;
    justify-self: start;
    font-size: min(10dvw, 17dvh, 128px);
  }

  .prompt { font-size: clamp(16px, min(2.6dvw, 4.8dvh), 26px); }

  .quiz .notes {
    align-content: start;
    min-height: 0;
    overflow-y: auto;
  }

  .marks { align-self: center; justify-self: center; }

  .cards { margin-left: 0; }

  /* Sideways the cards may be wider than tall, so a short window never squeezes the words out. */
  .card {
    --w: min(calc((100cqw - 14px) / 2), max(calc(100cqh * 0.95), 200px), 300px);
    font-size: clamp(15px, min(4.8cqw, 6.4cqh), 21px);
    line-height: 1.26;
  }

  .resume { align-self: center; }

  .quiz[data-view="guess"] .guess { grid-row: 2 / 4; }

  .quiz[data-view="between"] .between { grid-row: 2 / 4; }

  /* Sideways the four lines sit two by two, so the buttons stay in view under them. */
  .between-list { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .between-list li { font-size: 15px; line-height: 1.35; }

  .foot { justify-content: flex-start; align-self: end; }

  /* Sideways: the square, its key and its buttons on the left, the written page down the right.
     The status bar already says whose page it is, so the heading steps aside for the words. */
  .poster {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "square page"
      "head page"
      "legend page"
      "actions page"
      "actions note";
    column-gap: clamp(16px, 3vw, 40px);
    row-gap: 6px;
  }

  .poster-word { font-size: clamp(26px, min(4.4dvw, 9dvh), 76px); }

  .poster-page { --lh: 22px; font-size: 15px; }

  .poster-actions { align-self: end; }

  .square-wrap {
    align-self: start;
    width: min(calc((100dvh - var(--ac-status-h, 64px) - 92px) * 323 / 261), 36vw, 640px);
    margin-left: 0;
  }

  .poster { grid-template-columns: clamp(200px, 26vw, 340px) minmax(0, 1fr); }

  .poster .square-wrap { width: min(calc((100dvh - var(--ac-status-h, 64px) - 172px) * 323 / 261), 100%); margin-right: 0; }

  .poster .poster-page { --lh: 21px; }

  .poster .poster-actions { flex-direction: column; align-items: stretch; gap: 8px; }

  .poster .poster-word { font-size: clamp(24px, 4dvh, 44px); }

  .poster .legend { flex-direction: row; align-self: start; }
}

@media (orientation: landscape) and (max-height: 520px) {
  /* A phone sideways: the page needs every line, and the kept page that follows says the score. */
  .poster .poster-head { display: none; }
}

/* ---------- slow motion, only when wanted ---------- */

@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .card { transition: opacity 320ms ease, outline-color 320ms ease; }

  :root:not(.ac-still) .card.is-chosen { animation: settle 420ms var(--slow) both; }

  :root:not(.ac-still) .cards.is-inviting .card { animation: invite 1800ms ease-in-out 2 alternate; }
  :root:not(.ac-still) .cards.is-inviting .card-fold { animation-delay: 300ms; }

  :root:not(.ac-still) .quiz.enter-right .prompt,
  :root:not(.ac-still) .quiz.enter-right .cards { animation: in-right 480ms var(--slow) both; }

  :root:not(.ac-still) .quiz.enter-left .prompt,
  :root:not(.ac-still) .quiz.enter-left .cards { animation: in-left 480ms var(--slow) both; }

  :root:not(.ac-still) .quiz.enter-right .numeral,
  :root:not(.ac-still) .quiz.enter-left .numeral { animation: fade-in 560ms ease-out both; }

  :root:not(.ac-still) .ink-line.is-drawing { animation: draw 2000ms ease-in-out both; }

  :root:not(.ac-still) .disc { transition: background-color 600ms ease; }
  :root:not(.ac-still) .disc.is-landing { animation: land 600ms var(--slow) both; }

  :root:not(.ac-still) .sheet:not([hidden]) .sheet-page { animation: rise 420ms var(--slow) both; }

  @keyframes settle {
    0% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
    100% { transform: translateY(4px); }
  }

  @keyframes invite {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
  }

  @keyframes in-right {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes in-left {
    from { opacity: 0; transform: translateX(-28px); }
    to { opacity: 1; transform: none; }
  }

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

  @keyframes draw {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
  }

  @keyframes land {
    from { transform: translate(-50%, -50%) scale(0.6); }
    to { transform: translate(-50%, -50%) scale(1); }
  }

  @keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
}