/* The Pannal landing preview (BG-136; docs/proposals/pannal-landing.md). Only the preview page
   (/preview/pannal) loads this sheet; the landing page's own styles are untouched.
   Light is pale blue-white throughout (never green: CANON §15). Geometry comes from
   app/pannal/config.php via js/shell/pannal.js, which sets the custom properties used below. */

.pannal {
  --pl: 207, 226, 240;            /* the glass's light, as r, g, b */
  --pl-strong: #e6eef4;
  --pl-text: #dbe6ee;
  --pannal-edge: rgba(var(--pl), 0.42);
  --u: 1;
  position: relative;
  width: min(62rem, 100%);
  margin: 0 auto;
  font-family: var(--font-mono);
}

/* ---- preview tools (owners and development only) ------------------------------------------- */
.pannal-toolbar {
  margin: 0 0 1.4rem; padding: 0.7rem 0.9rem 0.8rem;
  border: 1px dashed rgba(199, 154, 91, 0.55); border-radius: var(--radius);
  background: rgba(20, 16, 10, 0.55); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted);
}
.pannal-toolbar-title { margin: 0; color: var(--warn); letter-spacing: 0.16em; text-transform: uppercase; }
.pannal-toolbar-note { margin: 0.2rem 0 0.5rem; }
.pannal-toolbar-sims { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; }
.pannal-toolbar-sims a {
  display: inline-block; padding: 0.2rem 0.5rem; border: 1px solid var(--line-strong); border-radius: 2px;
  color: var(--text); text-decoration: none;
}
.pannal-toolbar-sims a:hover { border-color: var(--warn); color: var(--text-strong); }
.pannal-toolbar-sims a[aria-current="page"] { border-color: var(--warn); color: var(--warn); }
.pannal-sim-banner {
  margin: -0.6rem 0 1.2rem; padding: 0.45rem 0.75rem; border-left: 2px solid var(--warn);
  background: rgba(199, 154, 91, 0.08); color: var(--text); font-size: 0.75rem; letter-spacing: 0.03em;
}

/* ---- heading and views -------------------------------------------------------------------- */
.pannal-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.2rem; margin-bottom: 0.6rem; }
.pannal-name { margin: 0; font-size: 0.95rem; font-weight: 400; letter-spacing: 0.34em; text-transform: uppercase; color: var(--pl-text); }
.pannal-summary { margin: 0; flex: 1 1 14rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pannal-views { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 2px; }
.pannal-view {
  font: inherit; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  background: none; border: 0; padding: 0.45rem 0.8rem; min-height: 2.2rem; cursor: pointer;
}
.pannal-view[aria-pressed="true"] { color: var(--pl-strong); background: rgba(var(--pl), 0.08); }
.pannal-view:hover { color: var(--text-strong); }

/* ---- the stage: one panel, broken ------------------------------------------------------------ */
.pannal-stage { position: relative; width: 100%; aspect-ratio: var(--stage-ratio, 5 / 3); margin: 0.4rem 0 0.8rem; }
.pannal-back { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pannal-pieces { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.pannal-slot { display: contents; }

.pb-silhouette { fill: rgba(var(--pl), 0.012); stroke: rgba(var(--pl), 0.07); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; transition: opacity 0.8s; }
.pb-whole { fill: url(#pannal-whole); opacity: 0; transition: opacity 1.1s ease; }
.pb-whole-sheen { fill: url(#pannal-sheen); opacity: 0; transition: opacity 1.4s ease 0.3s; }
.pb-whole-edge { fill: none; stroke: rgba(var(--pl), 0.5); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 1.2s ease; }
.pb-rules line { stroke: rgba(var(--pl), 0.045); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pb-rules { opacity: 0; transition: opacity 1.2s ease; }
.pb-beyond { fill: rgba(var(--pl), 0.012); stroke: rgba(var(--pl), 0.08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pb-spare { transition: transform 1.6s cubic-bezier(0.3, 0.6, 0.2, 1), opacity 1s; }
.pb-spare .pg-body { fill: #07090b; }
.pb-spare .pg-rim { --rim: 0.22; }

.pannal-piece {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  clip-path: var(--clip);
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg));
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.35s ease;
}
.pannal-piece:focus-visible { outline: none; }
.pannal-glass { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1s ease; }

.pg-body { fill: url(#pannal-body); }
.pg-sheen { fill: url(#pannal-sheen); }
.pg-light { fill: url(#pannal-light); opacity: 0.1; transition: opacity 0.6s ease; }
.pg-rim { --rim: 0.5; transition: opacity 0.9s ease; }
.pg-rim line { stroke: rgba(var(--pl), calc(var(--edge, 0.5) * var(--rim))); transition: stroke 0.35s ease; }
.pg-gap { fill: none; stroke: var(--bg); transition: stroke-width 1s ease; }
.pg-focus { fill: none; stroke: rgba(var(--pl), 0.7); opacity: 0; transition: opacity 0.2s ease; }
.pg-glimmer { fill: url(#pannal-glimmer); opacity: 0.8; transform-box: fill-box; transform-origin: center; animation: pannal-glimmer 9s ease-in-out infinite; }

/* Coming forward: a little larger, a firmer edge, the label clearer. Hover only where it exists. */
@media (hover: hover) {
  .pannal-piece:hover { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)) scale(var(--lift, 1.03)); z-index: 3; }
  .pannal-piece:hover .pg-rim { --rim: 0.95; }
  .pannal-piece:hover .pg-light { opacity: calc(var(--light, 0.1) + 0.08); }
}
.pannal-piece:focus-visible { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--rot, 0deg)) scale(var(--lift, 1.03)); z-index: 3; }
.pannal-piece:focus-visible .pg-focus, .pannal-piece.is-selected .pg-focus { opacity: 1; }
.pannal-piece.is-selected { z-index: 4; }
.has-selection .pannal-piece:not(.is-selected) { filter: brightness(0.55) saturate(0.6); }

/* The label: real text, always shown. */
.pannal-label {
  position: absolute; left: var(--lx, 12%); top: var(--ly, 30%); width: var(--lw, 76%);
  display: flex; flex-direction: column; gap: calc(var(--u) * 4px); pointer-events: none;
}
.pannal-des { font-size: max(10px, calc(var(--u) * 11px)); letter-spacing: 0.3em; text-transform: uppercase; color: rgba(var(--pl), 0.6); }
.pannal-title { font-size: max(13px, calc(var(--u) * 19px)); line-height: 1.25; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pl-strong); text-wrap: balance; }
.is-shard .pannal-title { font-size: max(11px, calc(var(--u) * 12.5px)); letter-spacing: 0.06em; line-height: 1.3; }
.is-shard .pannal-des { letter-spacing: 0.22em; }
.is-shard .pannal-state { letter-spacing: 0.08em; }
.pannal-state { margin-top: calc(var(--u) * 3px); font-size: max(10px, calc(var(--u) * 10.5px)); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(var(--pl), 0.78); }
.pannal-piece:focus-visible .pannal-title, .pannal-piece.is-selected .pannal-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
[data-layout="tall"] .pannal-title { font-size: max(15px, calc(var(--u) * 21px)); }
[data-layout="tall"] .is-shard .pannal-title { font-size: max(12px, calc(var(--u) * 14px)); }
[data-layout="tall"] .pannal-des, [data-layout="tall"] .pannal-state { font-size: max(10.5px, calc(var(--u) * 12px)); }

/* States: one light, more or less of it, and the words. */
.pannal-piece.is-available { --light: 0.12; }
.pannal-piece.is-available .pg-light { opacity: 0.12; }
.pannal-piece.is-in-progress { --light: 0.2; }
.pannal-piece.is-in-progress .pg-light { opacity: 0.2; animation: pannal-breathe 7s ease-in-out infinite; }
.pannal-piece.is-complete { --light: 0.3; }
.pannal-piece.is-complete .pg-light { opacity: 0.3; }
.pannal-piece.is-complete .pg-rim { --rim: 0.7; }
.pannal-piece.is-complete .pannal-state::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.5em; border: 1px solid rgba(var(--pl), 0.85); background: rgba(var(--pl), 0.45); transform: rotate(45deg) translateY(-0.1em); }
.pannal-piece.is-locked { --light: 0.04; }
.pannal-piece.is-locked .pg-light { opacity: 0.04; }
.pannal-piece.is-locked .pannal-title { color: rgba(var(--pl), 0.62); }
.pannal-piece.is-development, .pannal-piece.is-concept { --light: 0; }
.pannal-piece.is-development .pg-light, .pannal-piece.is-concept .pg-light { opacity: 0; }
.pannal-piece.is-development .pg-rim, .pannal-piece.is-concept .pg-rim { --rim: 0.28; }
.pannal-piece.is-development .pannal-title, .pannal-piece.is-concept .pannal-title { color: rgba(var(--pl), 0.5); }
.pannal-piece.is-development .pannal-state, .pannal-piece.is-concept .pannal-state, .pannal-piece.is-locked .pannal-state { color: rgba(var(--pl), 0.5); }
.pannal-piece.is-concept .pannal-des { color: rgba(var(--pl), 0.45); }

@keyframes pannal-breathe { 0%, 100% { opacity: 0.16; } 50% { opacity: 0.26; } }
@keyframes pannal-glimmer {
  0%, 100% { opacity: 0.32; } 18% { opacity: 0.6; } 22% { opacity: 0.4; } 47% { opacity: 0.7; }
  52% { opacity: 0.45; } 74% { opacity: 0.58; } 80% { opacity: 0.3; }
}

/* ---- the detail view --------------------------------------------------------------------------- */
.pannal-detail {
  position: absolute; z-index: 6; top: var(--top, 0px); width: min(25rem, 46%); max-height: 100%; overflow: auto;
  padding: 1rem 1.2rem 1.1rem; border: 1px solid rgba(var(--pl), 0.3); border-radius: 3px;
  background: linear-gradient(160deg, rgba(16, 20, 25, 0.98), rgba(8, 10, 12, 0.98));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 22px 60px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(var(--pl), 0.1);
  animation: pannal-in 0.28s ease-out both;
}
.pannal-detail.at-right { right: 0; transform-origin: left center; }
.pannal-detail.at-left { left: 0; transform-origin: right center; }
.pannal-detail:focus { outline: none; }
.pannal-detail:focus-visible { outline: 1px solid rgba(var(--pl), 0.7); outline-offset: 2px; }
.pannal-close {
  float: right; margin: -0.3rem -0.4rem 0.4rem 0.8rem; min-height: 2.2rem; padding: 0.3rem 0.6rem;
  font: inherit; font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  background: none; border: 1px solid var(--line-strong); border-radius: 2px; cursor: pointer;
}
.pannal-close:hover { color: var(--text-strong); border-color: rgba(var(--pl), 0.5); }
@keyframes pannal-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

/* A work's entry: in the list, and copied into the detail view. */
.pannal-works { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pannal-work { padding: 1.2rem 0.25rem; border-bottom: 1px solid var(--line); }
.pannal-work-body > * { margin: 0; }
.pannal-work-des:empty { display: none; }
.pannal-work-des { font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(var(--pl), 0.6); }
.pannal-chip { display: inline-block; margin-left: 0.4rem; padding: 0 0.35rem; font-size: 0.6rem; letter-spacing: 0.12em; color: var(--warn); border: 1px solid rgba(199, 154, 91, 0.7); border-radius: 2px; }
.pannal-work-title { margin-top: 0.2rem; font-size: 1.15rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pl-strong); }
.pannal-work-state { margin-top: 0.3rem; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(var(--pl), 0.82); }
.pannal-work-progress { text-transform: none; letter-spacing: 0.04em; color: var(--muted); }
.pannal-mark { display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.55em; border: 1px solid rgba(var(--pl), 0.6); transform: rotate(45deg) translateY(-0.12em); }
.pannal-work.is-complete .pannal-mark { background: rgba(var(--pl), 0.55); }
.pannal-work.is-in-progress .pannal-mark { background: linear-gradient(135deg, rgba(var(--pl), 0.55) 50%, transparent 50%); }
.pannal-work.is-locked .pannal-mark, .pannal-work.is-development .pannal-mark, .pannal-work.is-concept .pannal-mark { border-color: rgba(var(--pl), 0.28); }
.pannal-work.is-development .pannal-work-state, .pannal-work.is-concept .pannal-work-state, .pannal-work.is-locked .pannal-work-state { color: var(--muted); }
.pannal-work-desc { margin-top: 0.7rem !important; font-family: var(--story-font, var(--font-serif)); font-size: 0.98rem; line-height: 1.55; color: var(--text); }
.pannal-work-note { margin-top: 0.6rem !important; font-family: var(--story-font, var(--font-serif)); font-size: 0.92rem; line-height: 1.5; color: var(--muted); font-style: italic; }
.pannal-journeys { list-style: none; margin: 0.8rem 0 0 !important; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.pannal-journey { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who actions" "line actions"; gap: 0 0.8rem; align-items: center; padding: 0.5rem 0.65rem; border: 1px solid var(--line); border-radius: 3px; }
.pannal-journey-who { grid-area: who; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-strong); }
.pannal-journey-line { grid-area: line; font-size: 0.78rem; color: var(--muted); }
.pannal-journey-actions { grid-area: actions; display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.pannal-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem !important; }
.pannal-actions:empty { display: none; }
.pannal .btn-primary { border-color: rgba(var(--pl), 0.7); color: var(--pl-strong); }
.pannal .btn-primary:hover { background: rgba(var(--pl), 0.08); border-color: var(--pl-strong); }
.pannal .btn:hover { border-color: rgba(var(--pl), 0.6); }
.pannal-inert { cursor: default; opacity: 0.55; border-style: dashed; }
.pannal-sim-note { margin-top: 0.4rem !important; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--warn); }

.pannal-future { margin: 0.4rem 0 0; text-align: right; font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); }
.pannal-replay-row { margin: 0.4rem 0 0; text-align: right; }
.pannal-whole-name { display: none; }

/* Drawn: the list is the list view only. */
.pannal .pannal-list[hidden], .pannal .pannal-stage[hidden], .pannal .pannal-detail[hidden] { display: none !important; }

/* ---- the joining ------------------------------------------------------------------------------ */
/* 1. the pieces come into line (completed or not); labels step back so the glass is the moment */
.pannal.join-align .pannal-piece { transform: none; transition: transform 1.6s cubic-bezier(0.3, 0.6, 0.2, 1), filter 0.4s; cursor: default; }
.pannal.join-align .pb-spare { transform: none !important; }
.pannal.is-joining .pannal-label { opacity: 0; transition: opacity 0.6s ease; }
/* 2. the gaps close */
.pannal.join-close .pg-gap { stroke-width: 0; }
/* the seams, once closed, are fine lines, not lit edges */
.pannal.join-close .pg-rim { --rim: 0.28; }
/* 3. the fracture lines fade */
.pannal.join-fade .pg-rim, .pannal.join-fade .pg-focus { opacity: 0; }
.pannal.join-fade .pb-silhouette { opacity: 0; }
/* 4. one surface */
.pannal.join-surface .pannal-glass, .pannal.join-surface .pb-spare { opacity: 0; }
.pannal.join-surface .pb-whole, .pannal.join-surface .pb-whole-edge { opacity: 1; }
.pannal.join-surface .pb-whole-sheen { opacity: 0.8; }
/* 5. its name */
.pannal.join-name .pannal-whole-name {
  display: block; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: 0; text-align: center; pointer-events: none;
  font-size: clamp(1.2rem, calc(var(--u) * 2.6rem), 2.6rem); letter-spacing: 0.5em; margin-right: -0.5em; text-transform: uppercase; color: var(--pl-strong);
  text-shadow: 0 0 18px rgba(var(--pl), 0.45), 0 0 46px rgba(var(--pl), 0.18);
  animation: pannal-name-in 1.2s ease-out both;
}
@keyframes pannal-name-in { from { opacity: 0; letter-spacing: 0.7em; } to { opacity: 1; } }
/* 6. the works, listed on the whole surface */
.pannal.join-reveal .pb-rules { opacity: 1; }
.pannal.join-quick *, .pannal.join-quick *::before { transition-duration: 0.01s !important; animation-duration: 0.01s !important; }
.pannal.join-quick .pannal-stage { animation: pannal-fade 0.4s ease both !important; }
@keyframes pannal-fade { from { opacity: 0.2; } to { opacity: 1; } }
.pannal.no-motion *, .pannal.no-motion *::before { transition: none !important; animation: none !important; }

/* ---- Pannal I, whole ------------------------------------------------------------------------------ */
.pannal.is-whole-ready .pannal-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pannal.is-whole-ready .pannal-stage {
  aspect-ratio: auto; display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(0, 1.25fr); grid-template-rows: auto 1fr;
  gap: 0 2.4rem; padding: clamp(2.2rem, 5.5%, 3.4rem) clamp(1.6rem, 7%, 4.4rem) clamp(2rem, 5%, 3rem) clamp(1.6rem, 7%, 4.4rem);
  min-height: 28rem;
}
.pannal.is-whole-ready .pannal-back .pb-whole, .pannal.is-whole-ready .pannal-back .pb-whole-edge, .pannal.is-whole-ready .pb-rules { opacity: 1; }
.pannal.is-whole-ready .pannal-back .pb-whole-sheen { opacity: 0.6; }
.pannal.is-whole-ready .pb-silhouette, .pannal.is-whole-ready .pb-spare { opacity: 0; }
.pannal.is-whole-ready .pannal-whole-name {
  display: block; position: relative; grid-column: 1 / -1; margin: 0 0 1.4rem; padding-bottom: 0.8rem;
  top: auto; transform: none; text-align: left; margin-right: 0;
  font-size: 1.05rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--pl-strong);
  text-shadow: 0 0 14px rgba(var(--pl), 0.4); border-bottom: 1px solid rgba(var(--pl), 0.22);
  animation: pannal-fade-in 0.9s ease both;
}
.pannal.is-whole-ready .pannal-whole-name::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 3.2rem; height: 1px; background: rgba(var(--pl), 0.8); box-shadow: 0 0 8px rgba(var(--pl), 0.7); }
.pannal.is-whole-ready .pannal-pieces { position: relative; inset: auto; display: flex; flex-direction: column; animation: pannal-fade-in 0.9s ease 0.15s both; }
.pannal.is-whole-ready .pannal-piece {
  position: relative; left: auto; top: auto; width: auto; height: auto; clip-path: none; transform: none; filter: none;
  display: block; padding: 0.75rem 0.6rem 0.75rem 0.9rem; border-bottom: 1px solid rgba(var(--pl), 0.13);
  transition: background 0.25s ease;
}
.pannal.is-whole-ready .pannal-piece::before { content: ""; position: absolute; left: 0; top: 0.8rem; bottom: 0.8rem; width: 2px; background: rgba(var(--pl), 0.18); transition: background 0.25s, box-shadow 0.25s; }
.pannal.is-whole-ready .pannal-piece:hover, .pannal.is-whole-ready .pannal-piece:focus-visible { background: rgba(var(--pl), 0.05); }
.pannal.is-whole-ready .pannal-piece.is-selected { background: rgba(var(--pl), 0.07); }
.pannal.is-whole-ready .pannal-piece.is-selected::before, .pannal.is-whole-ready .pannal-piece:focus-visible::before { background: var(--pl-strong); box-shadow: 0 0 10px rgba(var(--pl), 0.8); }
.pannal.is-whole-ready .pannal-piece:focus-visible { outline: 1px solid rgba(var(--pl), 0.6); outline-offset: -1px; }
.pannal.is-whole-ready .pannal-glass { display: none; }
.pannal.is-whole-ready .pannal-label { position: static; width: auto; display: grid; grid-template-columns: 7.2rem minmax(0, 1fr); grid-template-areas: "des title" "des state"; gap: 0.1rem 0.8rem; opacity: 1; }
.pannal.is-whole-ready .pannal-des { grid-area: des; padding-top: 0.15rem; font-size: 0.62rem; letter-spacing: 0.24em; color: rgba(var(--pl), 0.55); }
.pannal.is-whole-ready .pannal-title, .pannal.is-whole-ready .is-shard .pannal-title { grid-area: title; font-size: 0.86rem; letter-spacing: 0.14em; color: var(--pl-strong); text-shadow: 0 0 10px rgba(var(--pl), 0.3); }
.pannal.is-whole-ready .pannal-state { grid-area: state; margin: 0; font-size: 0.6rem; letter-spacing: 0.2em; color: rgba(var(--pl), 0.6); }
.pannal.is-whole-ready .pannal-piece.is-concept .pannal-state, .pannal.is-whole-ready .pannal-piece.is-development .pannal-state { color: rgba(var(--pl), 0.45); }
.pannal.is-whole-ready .has-selection .pannal-piece:not(.is-selected), .pannal.is-whole-ready.has-selection .pannal-piece:not(.is-selected) { filter: none; }
.pannal.is-whole-ready .pannal-detail {
  position: relative; top: auto; left: auto; right: auto; width: auto; max-height: none; overflow: visible;
  padding: 0.2rem 0 0 2.2rem; border: 0; border-left: 1px solid rgba(var(--pl), 0.16); border-radius: 0;
  background: none; box-shadow: none; animation: pannal-fade-in 0.5s ease both;
}
.pannal.is-whole-ready .pannal-detail .pannal-work-title { text-shadow: 0 0 12px rgba(var(--pl), 0.35); }
@keyframes pannal-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- phones ---------------------------------------------------------------------------------- */
@media (max-width: 40rem) {
  .pannal-head { gap: 0.4rem 0.8rem; }
  .pannal-views { margin-left: auto; }
  .pannal-detail, .pannal.is-whole-ready .pannal-detail {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30; width: auto; max-height: min(78dvh, 34rem); overflow: auto;
    padding: 1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom)); border: 1px solid rgba(var(--pl), 0.3); border-bottom: 0; border-radius: 10px 10px 0 0;
    background: linear-gradient(170deg, rgba(16, 20, 25, 0.99), rgba(8, 10, 12, 0.99));
    box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.7);
    animation: pannal-sheet 0.28s ease-out both;
  }
  .pannal-detail::before { content: ""; display: block; width: 2.6rem; height: 3px; margin: -0.3rem auto 0.7rem; border-radius: 2px; background: rgba(var(--pl), 0.3); }
  .pannal.is-whole-ready .pannal-stage { grid-template-columns: 1fr; padding: 1.8rem 1.2rem 1.6rem; min-height: 0; }
  .pannal.is-whole-ready .pannal-label { grid-template-columns: minmax(0, 1fr); grid-template-areas: "des" "title" "state"; }
  .pannal.is-whole-ready .pannal-des { padding-top: 0; }
  .pannal-journey { grid-template-columns: 1fr; grid-template-areas: "who" "line" "actions"; gap: 0.2rem; }
  .pannal-journey-actions { justify-content: flex-start; margin-top: 0.3rem; }
  .pannal-future, .pannal-replay-row { text-align: left; }
}
@keyframes pannal-sheet { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pannal-piece, .pannal-glass, .pg-light, .pg-gap, .pg-rim, .pb-spare, .pb-whole { transition-duration: 0.01s !important; }
  .pg-glimmer, .pannal-piece.is-in-progress .pg-light { animation: none; }
  .pannal-detail { animation: none; }
}

/* Forced colours: the glass is decoration; the words and the outlines of the buttons stay. */
@media (forced-colors: active) {
  .pannal-glass, .pannal-back { display: none; }
  .pannal-piece { border: 1px solid CanvasText; clip-path: none; transform: none; }
}