/* story.css - animated picture stories (common/story.js). Colours come from site.css tokens. */
.st {
  --st-sky: #eaf3ff; --st-wall: #f4efe4; --st-locker: #c9d6ea; --st-floor: #d9cbb2; --st-zone: rgba(250, 204, 21, .16);
  --st-line: #1f2937; --st-ink: #1f2937; --st-skin: #f5c9a3; --st-hair: #5b3a1e; --st-pants: #334155; --st-gray: #94a3b8; --st-metal: #cbd5e1;
  --st-door: #b7793f; --st-frame: #7c4a1e; --st-glass: #bfe3ff; --st-water: #38bdf8; --st-bag: #ef6f5e; --st-bag2: #f7b267;
  --st-wood: #a16207; --st-leaf: #4caf50; --st-bldg: #cbd5e1; --st-rockc: #a8a29e; --st-walk: #cbd5e1; --st-road: #6b7280;
  --st-grass: #9bd27a; --st-path: #6b7280; --st-bubble: #ffffff;
  display: block; margin: 12px 0 8px; border: 1px solid var(--line); border-radius: var(--radius, 12px);
  background: var(--panel); overflow: hidden; outline: none; max-width: 100%;
}
.st:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st {
    --st-sky: #111a2b; --st-wall: #1f2533; --st-locker: #2c3a52; --st-floor: #3a3226; --st-zone: rgba(250, 204, 21, .10);
    --st-line: #cbd5e1; --st-ink: #0b1020; --st-pants: #475569; --st-gray: #64748b; --st-metal: #64748b; --st-door: #9a6533; --st-frame: #5b3716;
    --st-glass: #7cc4f5; --st-bldg: #475569; --st-walk: #475569; --st-road: #374151; --st-grass: #3f6b2e; --st-path: #a9b4c6; --st-bubble: #f8fafc;
  }
}
:root[data-theme="dark"] .st {
  --st-sky: #111a2b; --st-wall: #1f2533; --st-locker: #2c3a52; --st-floor: #3a3226; --st-zone: rgba(250, 204, 21, .10);
  --st-line: #cbd5e1; --st-ink: #0b1020; --st-pants: #475569; --st-gray: #64748b; --st-metal: #64748b; --st-door: #9a6533; --st-frame: #5b3716;
  --st-glass: #7cc4f5; --st-bldg: #475569; --st-walk: #475569; --st-road: #374151; --st-grass: #3f6b2e; --st-path: #a9b4c6; --st-bubble: #f8fafc;
}
.st-title { font-weight: 700; padding: 10px 14px 0; }
.st-stage { width: 100%; line-height: 0; }
.st-svg { display: block; width: 100%; height: auto; font-family: var(--font, system-ui, sans-serif); }
.st-svg text { font-family: var(--font, system-ui, sans-serif); }
.st-zone { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; fill: var(--muted); }
.st-lbl rect { fill: var(--panel); stroke: var(--line); }
.st-lbl text { font-size: 13px; font-weight: 600; fill: var(--ink); }
.st-lbl-hl rect { stroke: var(--focus); stroke-width: 2; }
@media (min-width: 560px) { .st-lbl text { font-size: 15px; } }
.st-hl { fill: var(--focus); fill-opacity: .16; stroke: var(--focus); stroke-width: 2.5; stroke-dasharray: 6 5; }
.st-foot { fill: var(--x); opacity: .65; }
.st-foot-back { fill: var(--a); }
.st-dotp { fill: var(--muted); opacity: .6; }
.st-rule { stroke: var(--muted); stroke-width: 1.5; }
.st-tick { font-size: 12px; fill: var(--muted); }
.st-alabel { font-size: 15px; font-weight: 700; paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }
.st-fb { font-size: 18px; font-weight: 700; fill: var(--ink); }
.st-bubble path, .st-bubble rect, .st-bubble circle { fill: var(--st-bubble); stroke: #1f2937; stroke-width: 2; }
.st-bubble text { fill: #111827; font-weight: 700; }
.st-think rect { stroke-dasharray: 0; }

.st-caption { padding: 12px 16px 4px; min-height: 4.2em; }
.st-cap-text { margin: 0; font-size: 20px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.st-note { margin: 6px 0 0; font-size: 17px; color: var(--muted); }
.st-bar { display: flex; gap: 8px; padding: 8px 12px 4px; flex-wrap: wrap; }
.st button.st-btn {
  min-height: 46px; min-width: 46px; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--line);
  background: var(--panel2); color: var(--ink); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer;
}
.st button.st-btn:hover:not(:disabled) { border-color: var(--accent); }
.st-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.st-btn:disabled { opacity: .45; cursor: default; }
.st button.st-next, .st button.st-play { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.st-next { margin-left: auto; }
.st-bar2 { display: flex; align-items: center; gap: 10px; padding: 4px 12px 12px; flex-wrap: wrap; }
.st-dots { display: flex; flex-wrap: wrap; gap: 2px; }
.st-dot { width: 30px; height: 44px; border: 0; background: transparent; cursor: pointer; padding: 0; position: relative; }
.st-dot::after { content: ""; position: absolute; left: 8px; top: 15px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); box-sizing: border-box; }
.st-dot.done::after { background: var(--muted); }
.st-dot.on::after { background: var(--accent); border-color: var(--accent); transform: scale(1.25); }
.st-dot:focus-visible { outline: 3px solid var(--focus); outline-offset: -4px; border-radius: 8px; }
.st button.st-next:hover:not(:disabled), .st button.st-play:hover { background: var(--accent); color: var(--accent-ink); filter: brightness(1.08); }
.st button.st-dot, .st button.st-dot:hover { background: transparent; border: 0; min-height: 44px; min-width: 0; padding: 0; }
.st-tag rect { fill: var(--panel); stroke-width: 2; }
.st-tag text { font-size: 14px; font-weight: 700; }
.st-count { margin-left: auto; color: var(--muted); font-size: 16px; font-weight: 600; }
@media (max-width: 480px) {
  .st-bar { flex-wrap: nowrap; gap: 6px; padding: 8px 8px 4px; }
  .st-bar .st-btn { flex: 1 1 0; }
  .st button.st-btn { padding: 8px 6px; font-size: 16px; }
  .st-next { margin-left: 0; }
  .st-dot { width: 26px; }
  .st-dot::after { left: 6px; }
  .st-cap-text { font-size: 20px; }
  .st-caption { padding: 10px 12px 2px; }
}
details.story-text { margin-top: 8px; }
details.story-text summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--link); font-weight: 600; }