/* Ways to watch: nudge tab + guide dialog. Colors come from theme tokens only. */

/* ── Nudge tab ─────────────────────────────────────────── */
.wtw-tab{position:fixed;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));z-index:30;display:flex;align-items:stretch;
  border:1px solid color-mix(in srgb,var(--acid) 60%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--panel) 94%,transparent);
  box-shadow:0 10px 32px color-mix(in srgb,var(--shadow) 50%,transparent),0 0 0 4px color-mix(in srgb,var(--acid) 9%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:wtw-arrive .5s cubic-bezier(.2,.8,.25,1.2) both,wtw-hop 7s ease-in-out .9s 5;transition:opacity .25s,transform .25s}
.wtw-tab.is-leaving{opacity:0;transform:translateY(12px)}
.wtw-tab-open{display:flex;align-items:center;gap:10px;padding:8px 6px 8px 12px;background:none;border:0;color:var(--ink);text-align:left;border-radius:999px 0 0 999px}
.wtw-tab-open:hover .wtw-tab-words b{color:var(--acid)}
.wtw-tab-icon{font-size:22px;line-height:1;display:inline-block;transform-origin:50% 90%;animation:wtw-wiggle 7s ease-in-out .9s 5}
.wtw-tab-words{display:flex;flex-direction:column;line-height:1.15}
.wtw-tab-words b{font:700 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:color .2s}
.wtw-tab-words small{font-size:11px;color:var(--muted)}
.wtw-tab-dismiss{align-self:center;margin:0 8px 0 2px;width:26px;height:26px;padding:0;display:grid;place-items:center;border-radius:50%;background:transparent;border:1px solid transparent;color:var(--muted);font-size:17px;line-height:1}
.wtw-tab-dismiss:hover,.wtw-tab-dismiss:focus-visible{color:var(--ink);border-color:var(--line)}
@keyframes wtw-arrive{from{opacity:0;transform:translateY(24px) scale(.92)}to{opacity:1;transform:none}}
/* A few polite hops, then a long rest. Runs 5 cycles and stops. */
@keyframes wtw-hop{0%,14%,100%{transform:none}3%{transform:translateY(-9px)}6%{transform:translateY(0)}8.5%{transform:translateY(-4px)}11%{transform:none}}
@keyframes wtw-wiggle{0%,14%,100%{transform:none}3%{transform:rotate(-12deg)}6%{transform:rotate(9deg)}9%{transform:rotate(-4deg)}}

/* ── Permanent links (footer, Coverage Desk) ───────────── */
.wtw-link{background:none;border:0;padding:0;color:var(--acid);font:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer;white-space:nowrap}
footer .wtw-link{font:11px var(--mono);letter-spacing:.06em;text-decoration:none;border:1px solid color-mix(in srgb,var(--acid) 40%,var(--line));border-radius:3px;padding:5px 9px}
footer .wtw-link:hover{background:color-mix(in srgb,var(--acid) 12%,transparent)}

/* ── Guide dialog ──────────────────────────────────────── */
.wtw-dialog{width:min(1040px,calc(100vw - 32px));max-height:min(88vh,980px);padding:0;border:1px solid color-mix(in srgb,var(--acid) 40%,var(--line));border-radius:8px;
  background:var(--panel);color:var(--ink);box-shadow:0 30px 90px color-mix(in srgb,var(--shadow) 70%,transparent);font-size:15px;overflow:auto;overscroll-behavior:contain}
.wtw-dialog[open]{animation:wtw-arrive .35s cubic-bezier(.2,.8,.25,1) both}
.wtw-dialog::backdrop{background:color-mix(in srgb,var(--bg) 62%,transparent);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.wtw-head{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:start;gap:16px;padding:1.3em 1.5em 1em;
  background:linear-gradient(var(--panel) 82%,color-mix(in srgb,var(--panel) 0%,transparent));}
.wtw-head .micro{display:block}
.wtw-head h2{margin:.15em 0 .2em;font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.3vw,44px);letter-spacing:-.04em;line-height:1.02}
.wtw-lead{margin:0;color:var(--muted);font-size:.85em}
.wtw-close{flex:none;padding:6px 12px;font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;border-radius:4px;background:transparent;color:var(--acid);border:1px solid color-mix(in srgb,var(--acid) 55%,var(--line))}
.wtw-close:hover{background:color-mix(in srgb,var(--acid) 14%,transparent)}
.wtw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 1.5em}
.wtw-card{position:relative;padding:1em 1.1em 1.05em;border:1px solid var(--line);border-radius:6px;background:color-mix(in srgb,var(--tint) 4%,var(--bg))}
/* An odd card out stretches across the row instead of leaving a hole. */
.wtw-grid>.wtw-card:last-child:nth-child(odd){grid-column:1/-1}
.wtw-card.is-lead{border-color:color-mix(in srgb,var(--acid) 45%,var(--line));background:color-mix(in srgb,var(--acid) 7%,var(--bg))}
.wtw-card-top{display:flex;align-items:baseline;gap:10px}
.wtw-num{font:700 .7em var(--mono);color:var(--acid);letter-spacing:.1em}
.wtw-card h3{margin:0;font-family:var(--serif);font-weight:400;font-size:1.32em;letter-spacing:-.02em;line-height:1.15}
.wtw-badge{margin-left:auto;flex:none;font:700 .62em var(--mono);letter-spacing:.14em;color:var(--bg);background:var(--acid);padding:3px 7px;border-radius:3px}
.wtw-quip{margin:.3em 0 .65em;color:var(--muted);font-size:.86em;font-style:italic}
.wtw-steps{margin:0;padding-left:1.35em;display:grid;gap:.4em;font-size:.9em;line-height:1.45}
.wtw-steps li::marker{color:var(--acid);font-family:var(--mono);font-size:.85em}
.wtw-steps b{font-weight:650;color:var(--ink)}
.wtw-dialog kbd{font:600 .8em var(--mono);padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:color-mix(in srgb,var(--bg) 70%,var(--panel));white-space:nowrap}
.wtw-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:.85em}
.wtw-action{min-height:36px;padding:7px 12px;font-size:.84em;border-radius:4px;background:color-mix(in srgb,var(--tint) 9%,var(--bg));color:var(--ink);border:1px solid color-mix(in srgb,var(--tint) 30%,var(--bg))}
.wtw-action:hover{border-color:var(--acid)}
.wtw-action.is-primary{background:var(--acid);color:var(--bg);border-color:var(--acid);font-weight:650}
.wtw-action.is-primary:hover{filter:brightness(1.08)}
.wtw-action:disabled{opacity:.55;cursor:not-allowed;filter:none}
.wtw-action[hidden],.wtw-qr[hidden]{display:none}
.wtw-qr{width:112px;height:112px;padding:6px;background:#fff;border-radius:6px;box-shadow:0 0 0 1px var(--line)}
.wtw-qr svg{display:block;width:100%;height:100%}
.wtw-foot{margin:0;padding:1em 1.5em 1.3em;color:var(--muted);font-size:.78em}

/* ── TV mode: bigger everything, readable from the couch ── */
@media(min-width:760px){
  .tv-mode .wtw-dialog{font-size:var(--tv-small,15px);width:min(1500px,calc(100vw - 64px))}
  .tv-mode .wtw-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tv-mode .wtw-grid>.wtw-card:last-child:nth-child(odd){grid-column:auto}
  .tv-mode .wtw-grid>.wtw-card:last-child:nth-child(3n+1){grid-column:1/-1}
  .tv-mode .wtw-grid>.wtw-card:last-child:nth-child(3n+2){grid-column:span 2}
  .tv-mode .wtw-tab-words b{font-size:var(--tv-small,12px)}
  .tv-mode .wtw-tab-words small{font-size:calc(var(--tv-small,12px) * .8)}
  .tv-mode .wtw-tab-icon{font-size:calc(var(--tv-small,12px) * 1.7)}
}
@media(min-width:760px) and (max-height:820px){.tv-mode .wtw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tv-mode .wtw-grid>.wtw-card:last-child{grid-column:auto}.tv-mode .wtw-grid>.wtw-card:last-child:nth-child(odd){grid-column:1/-1}}

/* ── Phones: bottom sheet ──────────────────────────────── */
@media(max-width:740px){
  .wtw-tab{left:10px;bottom:max(10px,env(safe-area-inset-bottom))}
  .wtw-tab-open{padding:7px 4px 7px 10px;gap:8px}
  .wtw-tab-icon{font-size:19px}
  .wtw-tab-words b{font-size:11px}.wtw-tab-words small{font-size:11px}
  .wtw-dialog{width:100vw;max-width:100vw;max-height:88dvh;margin:auto 0 0;border-radius:14px 14px 0 0;border-bottom:0;font-size:14px}
  .wtw-dialog[open]{animation:wtw-sheet .32s cubic-bezier(.2,.8,.25,1) both}
  .wtw-head{padding:1.1em 16px .8em}
  .wtw-grid{grid-template-columns:1fr;padding:0 16px}
  .wtw-foot{padding:1em 16px max(1.2em,env(safe-area-inset-bottom))}
}
@keyframes wtw-sheet{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}

/* ── Theme flourishes ──────────────────────────────────── */
[data-theme=couch] .wtw-tab{border-width:2px;border-style:dashed}
[data-theme=couch] .wtw-card{border-style:dashed}
[data-theme=broadsheet] .wtw-tab{border-radius:3px;box-shadow:3px 3px 0 var(--ink)}
[data-theme=broadsheet] .wtw-tab-open{border-radius:3px 0 0 3px}
[data-theme=broadsheet] .wtw-dialog{border:1px solid var(--ink);box-shadow:8px 8px 0 color-mix(in srgb,var(--ink) 85%,transparent)}
[data-theme=broadsheet] .wtw-head{border-bottom:3px double var(--ink);margin-bottom:1em}
[data-theme=phosphor] .wtw-tab,[data-theme=phosphor] .wtw-dialog{box-shadow:0 0 24px color-mix(in srgb,var(--acid) 25%,transparent)}
[data-theme=fever] .wtw-badge{background:linear-gradient(90deg,var(--acid),var(--dem))}

/* ── Mirror mode: layout viewport is 1920px wide, so size chrome in vw ── */
.mirror-chrome[hidden]{display:none}
.mirror-rotate{display:none}
@media(orientation:portrait){
  .mirror-mode .mirror-rotate{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5vw;padding:8vw;text-align:center;
    background:color-mix(in srgb,var(--bg) 94%,transparent);color:var(--ink)}
  .mirror-rotate-icon{font-size:22vw;line-height:1;color:var(--acid);animation:mirror-turn 2.4s ease-in-out infinite}
  .mirror-rotate strong{font-family:var(--serif);font-weight:400;font-size:9vw;letter-spacing:-.03em;line-height:1.05}
  .mirror-rotate small{font-size:4.2vw;color:var(--muted);max-width:80vw;line-height:1.35}
}
.mirror-chip{position:fixed;z-index:61;left:1vw;top:1vw;display:flex;align-items:center;gap:1vw;padding:.5vw .6vw .5vw 1vw;border-radius:999px;
  background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid color-mix(in srgb,var(--acid) 50%,var(--line));font-size:1.4vw;transition:opacity .6s}
.mirror-chip .micro{font-size:1vw}
.mirror-chip.is-faded{opacity:.12}
.mirror-exit{font:600 1.1vw var(--mono);padding:.45vw 1vw;border-radius:999px;background:var(--acid);color:var(--bg);border:0}
@keyframes mirror-turn{0%,20%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}

@media(prefers-reduced-motion:reduce){.wtw-tab,.wtw-tab-icon,.wtw-dialog[open]{animation:none!important}}
@media print{.wtw-tab{display:none}}