/* =====================================================================
   ICE DAM CUTAWAY — widget chrome.
   Shares the site's tokens (loaded after /assets/senco.css). The widget is a
   dark instrument panel on the light page: ink frame, gold accents, Oswald caps.
   ===================================================================== */

.icw{
  border:1px solid var(--line-gold);
  background:var(--ink);
  padding:8px;                       /* same keyline-frame language as .gframe */
}
.icw-stage{
  position:relative;
  background:#8ba7bf;
  overflow:hidden;
}
.icw-canvas,.icw-canvas canvas{display:block;width:100%;height:100%}
.icw-canvas{position:absolute;inset:0}
/* height, never min-height: min-height + aspect-ratio makes the box derive its
   WIDTH from the forced height and overflow the container on narrow screens */
.icw-stage{aspect-ratio:16/9}
@media (max-width:700px){.icw-stage{aspect-ratio:auto;height:clamp(300px,96vw,420px)}}

.icw-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.icw-label{
  position:absolute;left:0;top:0;
  font-family:var(--oswald);font-weight:600;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;white-space:nowrap;
  background:rgba(19,19,19,.78);border:1px solid rgba(205,163,69,.55);
  padding:.28rem .55rem;
  opacity:0;transition:opacity .4s ease;
  transform:translate(-50%,-50%);
}
.icw-label.on{opacity:1}

.icw-hint{
  position:absolute;right:.7rem;bottom:.6rem;
  font-family:var(--oswald);font-weight:500;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(19,19,19,.55);
  border:1px solid rgba(19,19,19,.25);padding:.25rem .6rem;border-radius:2px;
  pointer-events:none;
}
.icw-loading{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-family:var(--oswald);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  font-size:.85rem;color:#2b3947;padding:1rem;
}

/* ---------------- control panel ---------------- */
.icw-panel{padding:1.1rem 1.1rem 1.2rem;background:var(--ink)}

.icw-mode{display:flex;gap:0;border:1px solid var(--line-gold);width:max-content;max-width:100%;margin-bottom:1rem}
.icw-mode-btn{
  font-family:var(--oswald);font-weight:600;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.6rem 1.1rem;cursor:pointer;
  background:transparent;border:0;color:var(--t-mut-dark);
  transition:background .18s ease,color .18s ease;
}
.icw-mode-btn[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
.icw-mode-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}

.icw-steps{
  list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem;
  margin:0 0 1rem;padding:0;
}
.icw-step{
  width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  background:var(--ink-2);border:1px solid #2c2a24;color:var(--t-mut-dark);
  padding:.5rem .55rem;cursor:pointer;text-align:left;
  transition:border-color .18s ease,color .18s ease;
}
.icw-step b{
  font-family:var(--oswald);font-weight:700;font-size:.95rem;color:var(--gold);
}
.icw-step span{
  font-family:var(--oswald);font-weight:500;font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;
}
.icw-step:hover{border-color:var(--line-gold);color:var(--t-dark)}
.icw-step.on{border-color:var(--gold);color:#fff;background:#211f1a}
.icw-step:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

.icw-caption{min-height:5.2rem;margin-bottom:.9rem}
.icw-cap-title{
  font-family:var(--oswald);font-weight:600;font-size:1.05rem;letter-spacing:.03em;
  text-transform:uppercase;color:#fff;margin:0 0 .3rem;max-width:none;
}
.icw-cap-body{color:var(--t-mut-dark);font-size:.97rem;line-height:1.6;margin:0;max-width:70ch}

.icw-ctl{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.icw-nav,.icw-play{
  font-family:var(--oswald);font-weight:600;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;padding:.6rem 1.05rem;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.icw-nav{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff}
.icw-nav:hover{border-color:var(--gold);color:var(--gold)}
.icw-nav:disabled{opacity:.35;cursor:default}
.icw-nav:disabled:hover{border-color:rgba(255,255,255,.35);color:#fff}
.icw-play{background:var(--gold);border:1px solid var(--gold);color:var(--ink)}
.icw-play:hover{background:#dcb356}
.icw-play.on{background:transparent;color:var(--gold)}
.icw-nav:focus-visible,.icw-play:focus-visible,.icw-mode-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (max-width:700px){
  .icw-steps{grid-template-columns:repeat(3,1fr)}
  .icw-caption{min-height:7.5rem}
  .icw-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .icw-label{transition:none}
}