/* Bangla.FYI alive tide instrument — inherits the homepage theme variables.
   Pro rollout 2026-10-27: ONLY the surrounding chip/control chrome is
   re-skinned to the site chip language. The scene's own drawing and
   animation styles (.ts-stage, #tsSea, #tsCurve, .ts-tele, .tv) are
   untouched — the sea-scene is a signature piece. */
#tideScene .ts-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
#tideScene .ts-head strong{font-family:var(--serif);font-size:1.15rem;letter-spacing:.01em}
#tideScene .chip{display:inline-flex;align-items:center;font-size:.75rem;font-weight:700;padding:5px 11px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);color:var(--dim);white-space:nowrap}
#tideScene .chip[hidden]{display:none}
#tideScene .chip.pred{border-color:transparent;background:var(--gold-soft);color:var(--gold-ink)}
#tideScene .chip.stale{border-color:color-mix(in srgb,var(--red) 35%,var(--border));background:var(--red-soft);color:var(--red-ink)}
#tideScene .ts-views{display:inline-flex;background:var(--bg2);border:1px solid var(--border);
  border-radius:999px;padding:3px;gap:2px;margin-bottom:10px}
#tideScene .ts-views button{border:0;background:transparent;color:var(--dim);
  border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit}
#tideScene .ts-views button.on{background:var(--text);color:var(--bg)}
#tideScene .ts-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
#tideScene .ts-pills .pill{border:1px solid var(--border);background:var(--surface);color:var(--ink2);
  border-radius:999px;padding:7px 14px;font-size:.88rem;font-weight:600;cursor:pointer;font-family:inherit}
#tideScene .ts-pills .pill:hover{border-color:var(--gold)}
#tideScene .ts-pills .pill[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
#tideScene .ts-days{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
#tideScene .ts-days .day{border:1px solid var(--border);background:var(--surface);color:var(--ink2);
  border-radius:999px;padding:7px 13px;font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit}
#tideScene .ts-days .day:hover{border-color:var(--gold)}
#tideScene .ts-days .day[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-soft);color:var(--text);font-weight:700}
#tideScene .ts-stage{margin-bottom:10px}
#tideScene #tsSea,#tideScene #tsCurve{width:100%;height:auto;display:block;
  border:1px solid var(--border);border-radius:12px;background:var(--soft)}
#tideScene #tsCurve{margin-top:8px}
#tideScene .ts-tele{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
#tideScene .tele{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--surface)}
#tideScene .tele .tk{font-size:.78rem;font-weight:700;color:var(--text);margin-bottom:4px}
#tideScene .tele .tv{font-size:1.25rem;font-weight:700;font-family:var(--mono)}
#tideScene .tele .tv .tu{font-size:.8rem;font-weight:400;color:var(--dim);font-family:inherit}
#tideScene .tele .tv.up{color:#2e9e97}
#tideScene .tele .tv.down{color:var(--red)}
#tideScene .tele .tv.phase.up{color:#2e9e97}
#tideScene .tele .tv.phase.down{color:#b07100}
#tideScene .ts-controls{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#tideScene #tsPlay{border:1px solid var(--border);background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm);
  border-radius:50%;width:40px;height:40px;font-size:1rem;cursor:pointer;flex:none;font-family:inherit}
#tideScene #tsPlay:hover{border-color:var(--gold)}
#tideScene #tsScrub{flex:1;accent-color:var(--gold);cursor:pointer}
#tideScene .ts-clock{font-weight:700;min-width:64px;text-align:right}
#tideScene #tsNow{border:1px solid var(--border);background:var(--surface);color:var(--ink2);
  border-radius:999px;padding:7px 14px;font-size:.85rem;font-weight:600;cursor:pointer;flex:none;font-family:inherit}
#tideScene #tsNow:hover{border-color:var(--gold)}
#tideScene .fineprint{font-size:.75rem;color:var(--dim);line-height:1.6}
@media (max-width:640px){
  #tideScene .ts-tele{grid-template-columns:repeat(2,1fr)}
}