/* Odd Pairings Pad: a notebook page. Thin ink lines, pen marks, notes in the margin, no filled panels. */

:root {
  --ink-line: color-mix(in srgb, var(--ak-accent-2) 20%, transparent);
  --ink-line-strong: color-mix(in srgb, var(--ak-accent-2) 34%, transparent);
  --tape: color-mix(in srgb, var(--ak-accent) 32%, var(--ak-surface));
  --wobble-a: 255px 12px 225px 12px / 12px 225px 12px 255px;
  --wobble-b: 12px 225px 12px 255px / 255px 12px 225px 12px;
  --wobble-sheet: 6px 14px 5px 12px / 12px 5px 14px 6px;
  --pad-x: max(8px, env(safe-area-inset-left), env(safe-area-inset-right));
  --chip-h: 46px;
  --status: var(--ac-status-h, 64px);
  /* Cards share one height so the three sit on one strip of tape. */
  --card-h: min(clamp(60px, 11dvh, 112px), calc((100dvw - 2 * var(--pad-x) - 24px) / 4.5));
}

* { box-sizing: border-box; }

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

body {
  overflow: hidden;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer, none), var(--ak-bg-art);
  background-size: cover, var(--ak-bg-size);
  background-position: center;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }

[hidden] { display: none !important; }

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

/* ---------- The page ---------- */

.pad {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "head" "strip" "prompt" "sheet" "tools" "kept";
  row-gap: 6px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: calc(var(--status) + 4px) var(--pad-x) max(6px, env(safe-area-inset-bottom));
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.head {
  grid-area: head;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 48px;
}

.logo {
  display: block;
  height: 40px;
  width: auto;
  rotate: -3deg;
}

.head-tools {
  display: flex;
  gap: 6px;
}

/* ---------- Paper chips: outline only, a wobbly pen border, a slight tilt ---------- */

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}

.chip-word {
  font-family: var(--ak-font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.chip-word::before {
  content: '';
  position: absolute;
  inset: 5px 0;
  border: 2px solid var(--ak-ink);
  border-radius: var(--wobble-a);
  pointer-events: none;
}

.chip-word:nth-of-type(even)::before { border-radius: var(--wobble-b); rotate: 1.5deg; }
.chip-word:nth-of-type(odd)::before { rotate: -1.5deg; }

.chip-word:active::before { border-width: 3px; }

.chip[aria-disabled='true'] { color: var(--ak-ink-muted); }

/* After a pin, a cadmium highlighter swipe across New sheet: the next page is waiting. */
.chip-word.is-next span,
.chip-word.is-next { background-image: linear-gradient(transparent 56%, var(--ak-accent) 56%, var(--ak-accent) 80%, transparent 80%); background-size: calc(100% - 20px) 100%; background-position: center; background-repeat: no-repeat; }
.chip[aria-disabled='true']::before { border-style: dashed; border-color: var(--ak-ink-muted); }

.chip .torn {
  position: absolute;
  inset: 3px 1px;
  width: calc(100% - 2px);
  height: calc(100% - 6px);
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 1.4;
  stroke-linejoin: round;
  overflow: visible;
  pointer-events: none;
}

.chip .torn path { vector-effect: non-scaling-stroke; }

/* The pen circle round whatever is picked. */
.chip .picked {
  position: absolute;
  inset: -1px -2px;
  width: calc(100% + 4px);
  height: calc(100% + 2px);
  fill: none;
  stroke: var(--ak-accent-2);
  stroke-width: 3;
  stroke-linecap: round;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
}

.chip .picked path { vector-effect: non-scaling-stroke; }

.chip[aria-pressed='true'] .picked { opacity: 1; }

/* ---------- The taped strip of cards ---------- */

.strip {
  grid-area: strip;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  padding: 6px 0 2px;
}

.tape {
  position: absolute;
  top: 0;
  left: -2px;
  right: -2px;
  height: 18px;
  background: var(--tape);
  clip-path: polygon(0 18%, 3% 0, 7% 22%, 11% 4%, 100% 10%, 98% 40%, 100% 78%, 96% 100%, 60% 88%, 5% 100%, 1% 74%, 2% 46%);
  opacity: 0.85;
}

.card {
  --tilt: 0deg;
  position: relative;
  display: block;
  height: var(--card-h);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  rotate: var(--tilt);
  touch-action: manipulation;
}

.card-feeling { --tilt: -2.5deg; aspect-ratio: 384 / 273; }
.card-pairing { --tilt: 1.5deg; aspect-ratio: 384 / 207; }
.card-rule { --tilt: -1deg; aspect-ratio: 384 / 313; }

.card-art {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.card-word {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 0.98;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Each word sits in its card's blank middle, clear of the doodles. */
.card-feeling .card-word { inset: 30% 15% 20% 15%; }
.card-pairing .card-word { inset: 16% 27% 36% 8%; justify-content: flex-start; text-align: left; }
.card-rule .card-word { inset: 26% 10% 30% 10%; }

/* What each card is, written on its tape (or under the pairing), with a small swap mark. */
.card-kind {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-weight: 700;
  font-size: max(12px, calc(var(--card-h) * 0.16));
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.card-feeling .card-kind { top: 2%; left: 27%; right: 28%; height: 17%; }
.card-rule .card-kind { top: 2%; left: 29%; right: 28%; height: 15%; }
.card-pairing .card-kind { bottom: 10%; left: 22%; right: 18%; height: 18%; }

.kind-swap {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The old sketch, faint in the pairing card's dashed corner. */
.old-sketch {
  position: absolute;
  top: 12%;
  right: 6%;
  width: 21%;
  aspect-ratio: 1;
  height: auto;
  border: 1px dashed var(--ak-ink-muted);
  background: var(--ak-surface);
  opacity: 0.7;
  pointer-events: none;
}

/* ---------- The prompt as one line, with the margin note ---------- */

.prompt-row {
  grid-area: prompt;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
}

.prompt-words {
  flex: 1 1 auto;
  min-width: 0;
}

.prompt-line {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: clamp(20px, 5.4vw, 26px);
  font-weight: 700;
  line-height: 1.02;
}

.prompt-line::before { content: '\201C'; color: var(--ak-ink-muted); }
.prompt-line::after { content: '\201D'; color: var(--ak-ink-muted); }

.margin-note {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  margin: 2px 0 0;
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-display);
  font-size: 19px;
  line-height: 1.05;
  rotate: -0.6deg;
}

.note-arrow {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.note-star {
  display: none;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  fill: var(--ak-accent);
  stroke: var(--ak-ink);
  stroke-width: 2;
  stroke-linejoin: round;
}

.margin-note.is-count { color: var(--ak-ink); }
.margin-note.is-count .note-arrow { display: none; }
.margin-note.is-count .note-star { display: block; }
.margin-note.is-error { color: var(--ak-ink); text-decoration: underline wavy var(--ak-accent-2) 1px; text-underline-offset: 3px; }

/* ---------- The sheet: graph paper, a margin line, the player's ink on top ---------- */

.sheet-well {
  grid-area: sheet;
  container-type: size;
  display: grid;
  place-items: center;
  min-height: 0;
  min-width: 0;
}

.sheet {
  position: relative;
  width: min(100cqw, 100cqh);
  aspect-ratio: 1;
  border: 2px solid var(--ak-ink);
  border-radius: var(--wobble-sheet);
  background-color: var(--ak-surface);
  background-image:
    linear-gradient(var(--ink-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
  background-size: 4% 4%;
  background-position: -1px -1px;
}

/* The page underneath, one more sheet in the pad. */
.sheet-under {
  position: absolute;
  inset: -2px;
  z-index: -1;
  border: 1.5px solid var(--ak-ink-muted);
  border-radius: var(--wobble-sheet);
  background: var(--ak-surface);
  rotate: 1.6deg;
  translate: 3px 4px;
}

.sheet-margin {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9%;
  width: 0;
  border-left: 1.5px solid var(--ak-ink);
  opacity: 0.55;
  pointer-events: none;
}

/* The plan's tip, written at the head of a blank sheet like a note to self; gone at the first stroke. */
.sheet-tip {
  position: absolute;
  top: 3%;
  left: 12%;
  right: 5%;
  margin: 0;
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-display);
  font-size: clamp(17px, 4.6cqmin, 22px);
  font-weight: 700;
  line-height: 1.12;
  rotate: -0.8deg;
  pointer-events: none;
}

.sheet-tip::before {
  content: 'Studio note: ';
  color: var(--ak-ink);
}

.ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  touch-action: none;
  cursor: crosshair;
}

/* ---------- The tool row along the bottom edge ---------- */

.tools {
  grid-area: tools;
  display: grid;
  gap: 2px;
}

.tool-now {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  margin: 0;
  padding: 0 4px;
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.now-mark {
  flex: 0 0 auto;
  width: 46px;
  height: 16px;
  overflow: visible;
}

.now-mark path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-line {
  display: flex;
  justify-content: space-between;
}

.tool {
  flex: 1 1 0;
  min-width: 44px;
  max-width: 64px;
  height: var(--chip-h);
  min-height: 44px;
  padding: 0;
}

.tool svg.icon {
  position: relative;
  width: 30px;
  height: 30px;
  overflow: visible;
  pointer-events: none;
}

.icon .line {
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon .dot { fill: var(--ak-ink); }

.icon .daub-num {
  font-family: var(--ak-font-body);
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

.icon .daub {
  stroke: var(--ak-ink);
  stroke-width: 2;
  stroke-linejoin: round;
}

.tool-word {
  flex: 1.5 1 0;
  max-width: 96px;
  gap: 2px;
  font-family: var(--ak-font-display);
  font-size: 21px;
  font-weight: 700;
}

.tool-word svg.icon { width: 18px; height: 18px; flex: 0 0 auto; }

.tool-done { color: var(--ak-ink); }
.tool-done .torn { stroke-width: 2.4; }

.tool-done .icon .line { stroke: var(--ak-accent-2); stroke-width: 3.4; }

.kept-line {
  grid-area: kept;
  margin: 0;
  min-height: 18px;
  color: var(--ak-ink-muted);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

.kept-line.is-error { color: var(--ak-ink); font-weight: 700; }

/* ---------- Sideways: the sheet on one side, everything else on the other ---------- */

@media (orientation: landscape) {
  /* The status bar only crosses the sheet's column, so the other column starts in the same band. */
  .pad {
    --pad-w: min(100dvw, 1180px);
    --top: max(12px, env(safe-area-inset-top));
    --sheet: min(calc(100dvh - var(--status) - 12px - env(safe-area-inset-bottom)), calc(var(--pad-w) * 0.58));
    --card-h: max(52px, min(calc((var(--pad-w) - var(--sheet) - 2 * var(--pad-x) - 48px) / 4.6), calc(100dvh - 272px), 150px));
    padding-top: var(--top);
    grid-template-columns: var(--sheet) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "sheet head"
      "sheet strip"
      "sheet prompt"
      "sheet ."
      "sheet tools"
      "sheet kept";
    column-gap: 18px;
    max-width: 1180px;
  }

  .sheet-well { padding-top: max(0px, calc(var(--status) - var(--top))); }

  /* Clear of the ? button in the corner. */
  .head { padding-right: 64px; }

  .tool { max-width: 58px; }
  .tool-word { max-width: 92px; }
}

/* ---------- Teaching: a ring, an arrow and a caption, waiting for the move ---------- */

.coach {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

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

.coach-arrow path {
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.coach-ring {
  position: absolute;
  border: 3px dashed var(--ak-accent-2);
  border-radius: 50%;
}

.coach-ring::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--ak-accent-2);
}

.coach.is-chip .coach-ring::after { display: none; }
.coach.is-band .coach-ring { border-radius: 18px; }
.coach.is-band .coach-ring::after { display: none; }

.coach-text {
  position: absolute;
  width: max-content;
  margin: 0;
  padding: 6px 12px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--wobble-a);
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

/* ---------- The wall of saved sketches ---------- */

.gallery {
  position: fixed;
  inset: 0;
  z-index: 26;
  overflow-y: auto;
  padding: calc(var(--status) + 4px) var(--pad-x) max(16px, env(safe-area-inset-bottom));
  background-color: var(--ak-bg);
  background-image:
    linear-gradient(var(--ink-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-line) 1px, transparent 1px);
  background-size: 24px 24px;
  overscroll-behavior: contain;
}

.gallery-page {
  max-width: 980px;
  margin: 0 auto;
}

.gallery-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 10px;
  border-bottom: 1.5px solid var(--ak-ink);
}

.gallery-title {
  margin: 0;
  font-family: var(--ak-font-display);
  font-size: 34px;
  font-weight: 700;
  rotate: -1.5deg;
}

.gallery-empty {
  margin: 28px 4px;
  font-family: var(--ak-font-display);
  font-size: 24px;
  color: var(--ak-ink-muted);
}

.gallery-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 44vw), 1fr));
  gap: 26px 16px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.print {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  rotate: var(--tilt, 0deg);
}

.print-paper {
  position: relative;
  border: 1.5px solid var(--ak-ink);
  background: var(--ak-surface);
  padding: 6px 6px 4px;
}

.print-paper::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  width: 54px;
  height: 18px;
  translate: -50% 0;
  background: var(--tape);
  rotate: -3deg;
  opacity: 0.9;
}

.print-then {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32% !important;
  border: 1.5px dashed var(--ak-ink-muted);
  opacity: 0.8;
}

.print canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
}

.print-line {
  margin: 2px 0 0;
  font-family: var(--ak-font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.05;
}

.print-date {
  margin: 0;
  color: var(--ak-ink-muted);
  font-size: 13px;
}

.print-actions {
  display: flex;
  gap: 6px;
}

.print-actions .chip { padding: 0 14px; font-size: 20px; }

/* ---------- Asking once, in the page ---------- */

.ask {
  position: fixed;
  inset: 0;
  z-index: 36;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--ak-bg) 82%, transparent);
}

.ask-page {
  width: min(100%, 380px);
  padding: 20px 20px 14px 44px;
  border: 2px solid var(--ak-ink);
  border-radius: var(--wobble-sheet);
  background-color: var(--ak-surface);
  background-image: linear-gradient(var(--ink-line-strong) 1px, transparent 1px);
  background-size: 100% 30px;
  background-position: 0 13px;
  rotate: -1deg;
  position: relative;
}

.ask-page::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  border-left: 1.5px solid var(--ak-ink);
  opacity: 0.55;
}

.ask-title {
  margin: 0 0 6px;
  font-family: var(--ak-font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

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

.ask-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.ask-yes { text-decoration: underline 3px var(--ak-accent); text-underline-offset: 5px; }
.ask-yes::before { border-width: 3px; }

/* ---------- Motion: slow and papery, and only when asked for ---------- */

@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .card.is-flipping { animation: card-flip 420ms ease-in-out; }
  :root:not(.ac-still) .card.is-settling { animation: tape-settle 520ms ease-out; }
  :root:not(.ac-still) .old-sketch.is-fading { animation: soft-in 900ms ease-out both; }
  :root:not(.ac-still) .sheet-under { transition: translate 520ms ease-out, rotate 520ms ease-out; }
  :root:not(.ac-still) .margin-note.is-count .note-star { animation: stamp 420ms ease-out both; }
  :root:not(.ac-still) .coach-ring { animation: ring-pulse 1800ms ease-in-out infinite; }
  :root:not(.ac-still) .print.is-new { animation: soft-in 700ms ease-out both; }
  :root:not(.ac-still) .chip .picked { transition: opacity 220ms ease-out; }
}

/* The page beneath drops away, so the sheet itself reads as lifted, with its grid kept crisp. */
.sheet.is-pinning .sheet-under { translate: 7px 12px; rotate: 2.6deg; }

@keyframes card-flip {
  0% { scale: 1 1; }
  45% { scale: 0 1; }
  55% { scale: 0 1; }
  100% { scale: 1 1; }
}

@keyframes tape-settle {
  0% { rotate: calc(var(--tilt) + 2deg); }
  50% { rotate: calc(var(--tilt) - 1deg); }
  100% { rotate: var(--tilt); }
}

@keyframes soft-in {
  from { opacity: 0; }
}

@keyframes stamp {
  from { opacity: 0; scale: 1.6; rotate: -20deg; }
  to { opacity: 1; scale: 1; rotate: 0deg; }
}

@keyframes ring-pulse {
  0%, 100% { scale: 1; opacity: 1; }
  50% { scale: 1.12; opacity: 0.65; }
}

/* A short landscape phone: tighter rows so every control stays on screen. */
@media (orientation: landscape) and (max-height: 420px) {
  .pad { row-gap: 4px; }
  .head { min-height: 48px; }
  .logo { height: 34px; }
  .tool { height: 44px; }
  .prompt-line { font-size: 21px; }
  .margin-note { font-size: 17px; }
}

/* A short upright phone: tighter rows, so the sheet keeps the most room. */
@media (orientation: portrait) and (max-height: 700px) {
  .pad { row-gap: 4px; }
  .tool { height: 44px; }
  .tools { gap: 1px; }
  .prompt-line { font-size: 20px; }
  .margin-note { font-size: 17px; }
  .tool-now { min-height: 20px; font-size: 17px; }
}

/* ---------- The ending: the shared pinned print, only sized so the whole card fits ---------- */

html body #activity-chrome-ending { overflow-x: hidden; overflow-y: auto; }

/* The print hangs on a solid wall, so nothing of the pad shows through round the card. */
html body #activity-chrome-ending.site-inspicacity {
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer, none), var(--ak-bg-art);
  background-size: cover, var(--ak-bg-size);
  background-position: center;
}

@media (orientation: portrait) {
  /* Below the ? corner, with the print as large as the screen allows. */
  html body #activity-chrome-ending.site-inspicacity { padding-top: calc(max(12px, env(safe-area-inset-top)) + 64px); }
  html body #activity-chrome-ending.site-inspicacity .ac-work img { max-height: min(54vh, calc(100dvh - 372px)); }
}

@media (orientation: landscape) and (max-height: 640px) {
  html body #activity-chrome-ending.site-inspicacity { padding: 8px max(72px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); }
  html body #activity-chrome-ending.site-inspicacity .ac-card { gap: 4px; padding: 24px 16px 10px; }
  html body #activity-chrome-ending.site-inspicacity .ac-verdict { font-size: 24px; }
  html body #activity-chrome-ending.site-inspicacity .ac-work img { max-height: calc(100dvh - 222px); }
}