/* Transformation 02 — panel components unique to the regional bank case study.
   Loaded after transformation.css; reuses its .pnl / .slab / .tf-card vocabulary
   and adds only the diagrams this story needs. No client brand colours anywhere. */

/* ---- panel 01: cover follows the ACVB structure (type, meta row, scroll cue) ---- */
.pillnav, .cred { display: none; }

/* ---- panel 03: a full library against an empty week ---- */
.mism { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1rem, 3.5vw, 2.4rem); width: 100%; align-items: start; }
.mm-side { display: grid; gap: 0.6rem; min-width: 0; }
.mm-lab { font-family: var(--font-body); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-55); padding-bottom: 0.45rem; border-bottom: 1px solid var(--color-border); }
.mm-stack { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.mm-stack span { font-family: var(--font-body); font-size: 0.7rem; line-height: 1.3; padding: 0.3rem 0.5rem; border-radius: 4px; background: color-mix(in srgb, var(--color-text) 10%, transparent); color: var(--color-text); }
.mm-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; }
.mm-week .wk-d { font-family: var(--font-body); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-55); text-align: center; padding-bottom: 0.15rem; }
.mm-week .wk-c { grid-row: 2; height: clamp(2.6rem, 7vh, 4.2rem); border: 1px dashed color-mix(in srgb, var(--color-text) 26%, transparent); border-radius: 4px; }
.mm-week .wk-q { grid-row: 2; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.1rem; color: color-mix(in srgb, var(--color-text) 34%, transparent); }
@media (max-width: 800px) { .mism { grid-template-columns: 1fr; gap: 1.1rem; } }

/* ---- panel 05: why the gap existed ---- */
.gaps { display: grid; width: 100%; }
.gp { display: grid; gap: 0.2rem; padding-block: 0.85rem; border-top: 1px solid var(--color-border); }
.gp:last-child { border-bottom: 1px solid var(--color-border); }
.gp-h { font-family: var(--font-display); font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem); line-height: 1.3; color: var(--color-text); }
.gp-p { font-family: var(--font-body); font-size: clamp(0.86rem, 0.83rem + 0.22vw, 0.96rem); line-height: 1.55; color: var(--ink-70); margin: 0; max-width: 58ch; text-wrap: pretty; }

/* ---- panel 07: the matrix, as the actual grid ---- */
.mtx { width: 100%; overflow: hidden; }
.mtx-grid { display: grid; grid-template-columns: minmax(6.5rem, 0.95fr) repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: 8px; }
.mtx-grid > * { background: var(--color-bg); padding: clamp(0.45rem, 1.4vw, 0.7rem) clamp(0.4rem, 1.2vw, 0.65rem); min-width: 0; }
.mx-col, .mx-row { font-family: var(--font-body); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-55); line-height: 1.35; display: flex; align-items: center; }
.mx-corner { background: color-mix(in srgb, var(--color-text) 5%, var(--color-bg)); }
.mx-cell { display: flex; flex-wrap: wrap; gap: 0.22rem; align-content: center; }
.mx-cell .tag { font-family: var(--font-body); font-size: 0.6rem; font-weight: 600; line-height: 1.25; padding: 0.16rem 0.36rem; border-radius: 3px; background: color-mix(in srgb, var(--color-text) 9%, transparent); color: var(--ink-70); white-space: nowrap; }
.mtx-grid .is-lead { background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg)); }
.mtx-grid .is-lead .tag { background: color-mix(in srgb, var(--color-accent) 15%, transparent); color: var(--color-text); }
.mtx-grid .is-lead.mx-row { color: var(--color-text); }
.mx-cell .none { font-family: var(--font-body); font-size: 0.7rem; color: color-mix(in srgb, var(--color-text) 30%, transparent); }
@media (max-width: 760px) { .mtx { overflow-x: auto; } .mtx-grid { min-width: 34rem; } }

/* ---- panel 08: three conditions, all three required ---- */
.cond { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.7rem, 2vw, 1.15rem); width: 100%; }
.cd { display: grid; gap: 0.3rem; align-content: start; padding: clamp(0.75rem, 2vw, 1.05rem); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.cd-t { font-family: var(--font-body); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dk-accent-run, var(--color-accent)); }
.cd-p { font-family: var(--font-body); font-size: clamp(0.84rem, 0.81rem + 0.2vw, 0.94rem); line-height: 1.5; color: var(--ink-70); margin: 0; text-wrap: pretty; }
.cond-note { font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-55); }
@media (max-width: 760px) { .cond { grid-template-columns: 1fr; } }

/* two prose blocks that fit side by side rather than stacked — the deck's
   panels are height-capped, so pairing costs the taller of the two, not both */
.pnl .side-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 1.9rem); align-items: start; width: 100%; }
@media (max-width: 800px) { .pnl .side-row { grid-template-columns: 1fr; gap: 0.8rem; } }

/* evidence line — follows the .wah convention already in transformation.css */
.evid { display: grid; gap: 0.3rem; width: 100%; max-width: 56ch; padding-left: clamp(0.8rem, 2vw, 1.15rem); border-left: 2px solid color-mix(in srgb, var(--color-accent) 55%, transparent); }
.evid .e-lab { font-family: var(--font-body); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-55); }
.evid p { font-family: var(--font-body); font-size: clamp(0.85rem, 0.82rem + 0.2vw, 0.95rem); line-height: 1.5; color: var(--color-text); margin: 0; text-wrap: pretty; }

/* ---- panel 09: Hero-Hub-Help against the four pillars ---- */
.hhh { width: 100%; display: grid; gap: 0.35rem; }
.hhh-row { display: grid; grid-template-columns: minmax(4.5rem, 7rem) repeat(4, minmax(0, 1fr)); gap: 0.35rem; align-items: stretch; }
.hh-lab { font-family: var(--font-body); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-55); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; line-height: 1.3; }
.hh-head .hh-c { font-family: var(--font-body); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-55); text-align: center; padding-bottom: 0.15rem; line-height: 1.3; }
.hh-c { display: grid; place-items: center; padding: clamp(0.5rem, 1.6vw, 0.8rem) 0.4rem; border-radius: 5px; font-family: var(--font-body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; text-align: center; }
.hh-c.on { background: color-mix(in srgb, var(--color-accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent); color: var(--color-text); }
.hh-c.gap { border: 1px dashed color-mix(in srgb, var(--color-text) 28%, transparent); color: var(--ink-55); }
.hhh-tier { font-family: var(--font-display); font-size: clamp(0.95rem, 0.9rem + 0.28vw, 1.1rem); color: var(--color-text); letter-spacing: 0; text-transform: none; }
.hhh-tier span { display: block; font-family: var(--font-body); font-size: 0.62rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-55); line-height: 1.35; }
@media (max-width: 700px) { .hhh-row { grid-template-columns: minmax(4rem, 5.5rem) repeat(4, minmax(0, 1fr)); gap: 0.25rem; } .hh-c { font-size: 0.58rem; padding: 0.5rem 0.2rem; } }

/* panel 09 carries a card and a disclaimer. The card holds the same measure as
   panel 06's rather than stretching the full content column. */
.pnl-tight .tf-cards { margin-block: 0; }
.pnl-tight a.tf-card { padding: clamp(0.85rem, 2vw, 1.15rem); }
.pnl-tight .tf-card h4 { margin-top: 0.6rem; font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.22rem); }
.pnl-tight .tf-card p { font-size: 0.84rem; line-height: 1.4; }
.pnl-tight .tf-cards { grid-template-columns: minmax(0, 30rem); justify-content: start; }
@media (max-width: 800px) { .pnl-tight .tf-cards { grid-template-columns: minmax(0, 1fr); } }
.pnl-tight .hh-c { padding: 0.4rem 0.3rem; }
.pnl-tight .hhh { gap: 0.28rem; }
.pnl-tight .hhh-tier span { font-size: 0.58rem; }
.pnl-tight > .in { gap: 0.6rem; }

/* ---- panel 07 background: an audiogram playing, drawn rather than filmed.
   Lives inside .pnl-bg (so it stays under .in) but ABOVE the scrim, in the
   lower-right quadrant the panel's own content does not reach. ---- */
.pnl-bg-audio { pointer-events: none; }
.agm { position: absolute; z-index: 2; right: clamp(1.25rem, 5vw, 4.5rem); bottom: clamp(0.4rem, 1.6vh, 0.9rem); width: min(20rem, 36%); }
.agm-card { display: grid; gap: 0.4rem; padding: 0.65rem 0.8rem; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent); background: color-mix(in srgb, var(--color-bg) 82%, transparent); box-shadow: 0 18px 44px rgb(0 0 0 / 0.22); }
.agm-top { display: flex; align-items: center; gap: 0.55rem; }
.agm-av { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--color-text) 12%, transparent); color: color-mix(in srgb, var(--color-text) 42%, transparent); }
.agm-av svg { width: 26px; height: 26px; display: block; }
.agm-who { flex: 1; min-width: 0; display: grid; }
.agm-who b { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; line-height: 1.3; color: var(--color-text); }
.agm-who i { font-family: var(--font-body); font-style: normal; font-size: 0.62rem; line-height: 1.3; color: var(--ink-55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agm-live { flex: 0 0 auto; font-family: var(--font-body); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dk-accent-run, var(--color-accent)); padding: 0.15rem 0.35rem; border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent); border-radius: 3px; }
.agm-wave { display: flex; align-items: flex-end; gap: 2px; height: 22px; }
.agm-wave i { flex: 1 1 0; min-width: 0; height: 30%; border-radius: 1px; background: var(--dk-accent-run, var(--color-accent)); animation: agm-bar 0.9s ease-in-out infinite alternate; }
.agm-wave i:nth-child(7n+1) { animation-duration: 0.72s; animation-delay: -0.05s; }
.agm-wave i:nth-child(7n+2) { animation-duration: 1.05s; animation-delay: -0.31s; }
.agm-wave i:nth-child(7n+3) { animation-duration: 0.84s; animation-delay: -0.62s; }
.agm-wave i:nth-child(7n+4) { animation-duration: 1.18s; animation-delay: -0.18s; }
.agm-wave i:nth-child(7n+5) { animation-duration: 0.66s; animation-delay: -0.47s; }
.agm-wave i:nth-child(7n+6) { animation-duration: 0.96s; animation-delay: -0.74s; }
.agm-wave i:nth-child(7n+7) { animation-duration: 1.32s; animation-delay: -0.24s; }
@keyframes agm-bar { from { height: 10%; opacity: 0.6; } to { height: 100%; opacity: 1; } }
.agm-cap { position: relative; min-height: 2.85em; font-family: var(--font-body); font-size: 0.68rem; line-height: 1.4; color: var(--color-text); }
.agm-cap span { position: absolute; inset: 0; opacity: 0; animation: agm-cap 13.5s linear infinite; }
.agm-cap span:nth-child(2) { animation-delay: 4.5s; }
.agm-cap span:nth-child(3) { animation-delay: 9s; }
@keyframes agm-cap { 0% { opacity: 0; } 3%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
.agm-bar { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--color-text) 16%, transparent); overflow: hidden; }
.agm-bar i { display: block; height: 100%; width: 8%; border-radius: 2px; background: var(--dk-accent-run, var(--color-accent)); animation: agm-prog 13.5s linear infinite; }
@keyframes agm-prog { from { width: 6%; } to { width: 97%; } }
@media (prefers-reduced-motion: reduce) {
  .agm-wave i, .agm-cap span, .agm-bar i { animation: none; }
  .agm-wave i:nth-child(3n) { height: 72%; }
  .agm-wave i:nth-child(3n+1) { height: 44%; }
  .agm-cap span:first-child { opacity: 1; }
  .agm-bar i { width: 42%; }
}
@media (max-width: 900px) { .agm { display: none; } }

/* ---- panel 10: outcome slots, centred like the ACVB deck's closing panel ---- */
.pnl .out-slot { justify-items: center; text-align: center; }
.dk-cred .cr-plain { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.4; color: var(--color-text); }

/* ---- panel 07: a financial blog behind the argument, blurred past reading.
   Scaled up slightly so the blur's soft edge never reaches the panel border. ---- */
.pnl-bg-blur .bg-fill { filter: blur(6px) saturate(0.88); transform: scale(1.06); opacity: 0.5; }
@media (max-width: 760px) { .pnl-bg-blur .bg-fill { filter: blur(4px) saturate(0.88); } }

/* short viewports: the two diagram-heavy panels give up padding first */
@media (max-height: 720px) {
  .mm-week .wk-c { height: 2.4rem; }
  .mm-stack span { font-size: 0.66rem; padding: 0.24rem 0.42rem; }
  .gp { padding-block: 0.6rem; }
  .cd { padding: 0.65rem 0.75rem; }
  .hh-c { padding: 0.45rem 0.3rem; }
  .cmp { padding: 0.6rem 0.7rem; }
  .cmp-field { min-height: 2.4rem; }
  .plan-vid { aspect-ratio: 32 / 9; }
}

/* ---- panel 02: four composers with nothing in them. The emptiness is the
   argument, so the fields carry no placeholder copy at all. ---- */
.cmps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.5rem, 1.4vw, 0.9rem); width: 100%; padding-top: clamp(0.6rem, 2vh, 1.2rem); }
.cmp { display: grid; gap: 0.55rem; padding: 0.75rem 0.85rem; border: 1px solid var(--color-border); border-radius: 10px; background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.cmp-av { width: 1.35rem; height: 1.35rem; border-radius: 50%; background: color-mix(in srgb, var(--color-text) 12%, transparent); }
.cmp-field { display: grid; gap: 0.4rem; align-content: start; min-height: 3.1rem; }
.cmp-line { height: 1px; background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.cmp-line.s { width: 62%; }
.cmp-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--color-border); }
.cmp-tools { display: flex; gap: 0.3rem; }
.cmp-tools i { width: 0.6rem; height: 0.6rem; border-radius: 2px; background: color-mix(in srgb, var(--color-text) 16%, transparent); }
.cmp-btn { font-family: var(--font-body); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-40, color-mix(in srgb, var(--color-text) 34%, transparent)); padding: 0.22rem 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--color-text) 8%, transparent); }
@media (max-width: 860px) { .cmps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cmps { grid-template-columns: 1fr; } .cmp-field { min-height: 2rem; } }

/* ---- panel 03: the planning that has to happen anyway, as a letterbox strip ---- */
.plan-vid { position: relative; margin: 0; width: 100%; aspect-ratio: 21 / 9; max-height: 34vh; overflow: hidden; border: 1px solid var(--color-border); border-radius: 10px; background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.plan-vid video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.82; filter: saturate(0.9); }
@media (max-width: 760px) { .plan-vid { aspect-ratio: 16 / 9; } }

/* Reduced motion: hold the first frame rather than loop. */
@media (prefers-reduced-motion: reduce) { .plan-vid video, .pnl-bg-vid video { animation: none; } }