/* Dojo 12 — the day's painting (PLAN §15, 2026-09-25 and 2026-09-26). Loaded after
   screens.css. A painting is a sheet of paper edged like the game's cards, with the ink laid
   over it as a canvas (js/game/book.js); the date seal is the level stamp's stone. Home's row
   under Play, the painting beside the score at the end of a round, Training done, the book and
   For Dad's rounds a day. Colours are the paper's tokens only, and every image url is written
   out in the rule that uses it (screens.css says why). */

/* ================= a painting on its sheet ================= */
.pp-sheet {
  position: relative; flex: none; overflow: hidden;
  border: 1.5px solid var(--ink); border-radius: 4px; box-shadow: 2px 2px 0 var(--ink);
  background-color: var(--paper);
}
/* The paper: a cut of the page's own sheet, each day's from its own place in the tile, so
   no two paintings sit on the same fibres. A page of the book is Rice paper (data-theme). */
.pp-paper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;
  background-color: var(--paper); background-size: var(--tileSize, 420px 900px); }
:root .pp-paper { background-image: url(../img/paper-washi.webp); }
:root[data-theme="night"] .pp-paper:not([data-theme]) { background-image: url(../img/paper-night.webp); }
:root[data-theme="matcha"] .pp-paper:not([data-theme]) { background-image: url(../img/paper-matcha.webp); }
:root[data-theme="sakura"] .pp-paper:not([data-theme]) { background-image: url(../img/paper-sakura.webp); }
:root[data-theme="kraft"] .pp-paper:not([data-theme]) { background-image: url(../img/paper-kraft.webp); }
:root[data-theme="sumi"] .pp-paper:not([data-theme]) { background-image: url(../img/paper-sumi.webp); }
:root[data-theme="kinpaku"] .pp-paper:not([data-theme]) { background-image: url(../img/paper-kinpaku.webp); }
.pp-paper[data-theme="washi"] { background-image: url(../img/paper-washi.webp); }
.pp-paper > canvas, .pp-paper > img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block;
}
/* A kept picture is never stretched: one of another shape sits on the page's own paper. */
.pp-paper > img { object-fit: contain; }
/* A round's new part, fading in over the parts before it. */
.pp-new { animation: pp-fade 520ms ease-out both; }
@keyframes pp-fade { from { opacity: 0; } to { opacity: 1; } }

/* ================= the date seal =================
   The level stamp's stone (kit.css .hanko-level), turned -3deg as a hand leaves it, the
   month small over the day in the paper's colour; book.js sizes it from the painting. It
   comes down with ART.md's slam (home.css .stampin, app.css @keyframes slam). */
.pp-seal { position: absolute; display: grid; place-items: center; transform: rotate(-3deg); }
.pp-seal::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--shu);
  -webkit-mask: url(../img/seal-blank.webp) center / 100% 100% no-repeat;
  mask: url(../img/seal-blank.webp) center / 100% 100% no-repeat; }
.pp-seal > b {
  position: relative; display: grid; justify-items: center; color: var(--paper);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif; font-weight: 900;
  font-variant-numeric: tabular-nums; line-height: 1; text-align: center;
}
.pp-seal > b > i { display: block; font-style: normal; }

/* ================= Home: the row under Play =================
   The thumbnail and its one line; the whole row is the button, with the ink chevron the
   ruled rows use for "this goes somewhere". */
.pp-row {
  display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 0; padding: 0;
  background: none; border: 0; color: var(--ink); text-align: left;
  font-size: 15px; font-weight: 700; line-height: 1.35;
}
.pp-row .pp-row-line { flex: 1 1 auto; min-width: 0; }
.pp-row .fr-glyph { flex: none; color: var(--ink2); }
.pp-row:active .pp-sheet { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.pp-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.home .pp-row + .rest { margin-top: 14px; }

/* ================= the end of a round =================
   The painting hangs at the top right, beside the score; the score, the lead line and the
   lines under it run down its left side and on under it. */
.pp-top { display: flow-root; }
.pp-top > .pp-fig { float: right; margin: 3px 0 10px 14px; }
.pp-top > :not(.pp-fig) + :not(.pp-fig) { margin-top: 14px; }
.pp-top .lines, .pp-top .start { display: block; }
.pp-top .lines > * + * { margin-top: 6px; }
.pp-top .start > * + * { margin-top: 5px; }
.pp-fig { margin: 0; display: flex; flex-direction: column; align-items: center; }
.pp-fig figcaption {
  margin-top: 7px; max-width: 100%; font-size: 13px; line-height: 1.3; color: var(--ink2);
  text-align: center; text-wrap: balance;
}

/* ================= Training done, and a painting opened big =================
   On a tall phone the painting and its words sit a little down the paper, with the rest of
   the room above the buttons; on a short one they start at the top. */
.pp-view, .scr-done { align-items: center; text-align: center; }
.pp-view > .grow.top, .scr-done > .grow.top { flex: 1 1 0px; max-height: 56px; }
.pp-view > .grow:not(.top), .scr-done > .grow:not(.top) { flex: 1.6 1 0px; }
.pp-view > .btn, .scr-done > .btn { align-self: stretch; }
.pp-words { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; max-width: 340px; }
.pp-words .pp-status { font-weight: 700; }
.pp-caption { font-size: 22px; line-height: 1.3; min-height: 1.3em; text-wrap: balance; }
.scr-done .pp-done { font-size: 30px; line-height: 1.2; }
.scr-done .pp-when { font-size: 15px; color: var(--ink2); }
/* Said once the seal is down. */
.pp-after { animation: drawin 180ms ease-out both; }
/* Send to Dad lies flat, its words in pencil, until the picture is ready to go. */
.btn.pp-send:disabled { background: transparent; color: var(--ink2); border-color: var(--ink2); box-shadow: none; }
.btn.pp-send:disabled:active { transform: none; }
/* After Send to Dad the share sheet rises over the lower part of the screen, so what to do in
   it is said at the top, where it can still be read. */
body:has(.scr-done) .toast, body:has(.pp-view) .toast { top: calc(24px + env(safe-area-inset-top)); bottom: auto; }

/* ================= the book ================= */
.pp-book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 14px; align-items: start; }
.pp-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; padding: 0;
  background: none; border: 0; color: var(--ink); text-align: left; }
.pp-tile-sheet { display: block; }
.pp-tile:active .pp-sheet { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.pp-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.pp-tile-date { margin-top: 9px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.pp-tile-cap { font: 600 15px/1.3 "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; min-height: 1.3em; margin-top: 2px; }
.pp-empty { line-height: 1.45; max-width: 330px; }

/* ================= For Dad: rounds a day =================
   Open, the number is the stepper's; the row's own copy of it steps aside. */
.fr-item > .fr-row[aria-expanded="true"] > .fr-value { visibility: hidden; }
.pp-stepper { display: flex; align-items: center; gap: 18px; padding-top: 2px; }
.pp-stepper .key { width: 58px; padding: 9px 0 10px; font-size: 22px; line-height: 1; }
.pp-stepper .key:disabled { box-shadow: none; transform: none; background: transparent; border-color: var(--rule); color: var(--ink2); }
.pp-stepper .pp-step-n { min-width: 2ch; font-size: 30px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }

/* A short phone (375 x 667): Home finds the row's 60 points in the paper above the belt, a
   little of the belt and of Play's height, and the gaps around Play, so the links stay on
   the screen. The end of a round takes back what the painting costs it (its narrower lines
   wrap sooner, about 30 points) from the gaps between its parts, so the buttons sit where
   they sat before the painting came. */
@media (max-height: 700px) {
  .home > .grow.top { min-height: 4px; }
  .home .beltplate > .belt { width: min(100%, 276px); }
  .home .beltplate + .btn.ink { margin-top: 12px; padding-top: 13px; padding-bottom: 13px; }
  .home .pp-row { margin-top: 9px; }
  .home .pp-row + .rest { margin-top: 9px; }
  .screen.sum { gap: 10px; }
  .pp-top > :not(.pp-fig) + :not(.pp-fig) { margin-top: 10px; }
  .pp-top > .pp-fig { margin-bottom: 6px; }
  .pp-fig figcaption { margin-top: 5px; }
}

/* Reduced motion keeps the seal and drops the fade and the draw-in (ART.md). */
@media (prefers-reduced-motion: reduce) {
  .pp-new, .pp-after { animation: none; }
}

/* The painting at the end of a round opens big when tapped (2026-09-26), over the round's end:
   a sheet of the child's paper laid over the whole screen, the painting at the size it has in
   the book. It presses like the Home row's thumbnail. */
.pp-open { display: block; padding: 0; border: 0; background: none; color: inherit; cursor: zoom-in;
  -webkit-tap-highlight-color: transparent; }
.pp-open:active .pp-sheet { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.pp-layer { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; overflow-y: auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  animation: pp-layer-in 140ms ease-out; }
.pp-layer > .screen { min-height: 100%; }
@keyframes pp-layer-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pp-layer { animation: none; } }

/* Training done's level (2026-09-26): the stamp beside what it opened, as at the end of a round,
   so the screen keeps its buttons on a 667-point phone. */
.scr-done .pp-level { display: flex; align-items: center; gap: 12px; margin-top: 6px; text-align: left; }
.scr-done .pp-level .hanko-level { width: 48px; height: 48px; flex: none; }
.scr-done .pp-level .hanko-level > b { font-size: 29px; }
.scr-done .pp-level .hanko-level.two > b { font-size: 22px; }