/* Library Insights — the app's stage (SonosApp/LibraryInsightsStage.swift)
 * rebuilt in the browser at 1920 × 1080 tvOS points, scaled as one unit
 * (--ins-k). Data comes from the app's own model via
 * assets/demo/insights-sample.json; this file only styles it. */
.ins{ position:relative; width:100%; overflow:hidden; background:var(--ins-bg); color:var(--ink);
  border-radius:inherit; outline:none; --ins-k:.3; --ins-bg:#06070b; --ink:#f3f1ec; --ink2:rgba(243,241,236,.62); --ink3:rgba(243,241,236,.4);
  --ins-line:rgba(255,255,255,.1); --ins-pill:rgba(255,255,255,.07); --ins-pill-hover:rgba(255,255,255,.14); --ins-tag:#ffb35c;
  font-family:var(--ff, -apple-system, "SF Pro Display", system-ui, sans-serif); -webkit-font-smoothing:antialiased;
  user-select:none; -webkit-user-select:none; line-height:1.2; text-align:left; touch-action:pan-y; }
.ins[data-look="light"]{ --ins-bg:#f6f4ef; --ink:#181a22; --ink2:rgba(24,26,34,.66); --ink3:rgba(24,26,34,.46);
  --ins-line:rgba(0,0,0,.1); --ins-pill:rgba(0,0,0,.06); --ins-pill-hover:rgba(0,0,0,.12); --ins-tag:#b25d00; }
.ins-frame{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; }
.ins:focus-visible{ box-shadow:0 0 0 3px rgba(243,241,236,.55) inset; }
.ins :where(button){ font:inherit; color:inherit; border:0; background:none; padding:0; margin:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ins-stage{ position:absolute; left:50%; top:50%; width:1920px; height:1080px; margin:-540px 0 0 -960px; transform:scale(var(--ins-k)); }
.ins-stage canvas{ position:absolute; inset:0; width:1920px; height:1080px; }
.ins-fade{ transition:opacity .45s ease; }

.ins-head{ position:absolute; left:96px; top:64px; width:560px; }
.ins-eyebrow{ font-size:17px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); }
.ins-title{ font-size:50px; font-weight:700; letter-spacing:-1px; margin:10px 0 0; line-height:1.05; }
.ins-sub{ font-size:22px; line-height:1.4; color:var(--ink2); margin:10px 0 0; }

.ins-top{ position:absolute; right:96px; top:70px; display:flex; flex-direction:column; align-items:flex-end; gap:18px; transition:opacity .4s; }
.ins.exploring .ins-top{ opacity:.35; }
.ins-pills{ display:flex; gap:10px; }
.ins-pill{ font-size:17px !important; font-weight:600 !important; color:var(--ink2) !important; background:var(--ins-pill) !important;
  padding:10px 18px !important; border-radius:999px; transition:transform .3s, background .3s, color .3s; }
.ins-pill:hover{ background:var(--ins-pill-hover) !important; }
.ins-pill.on{ background:var(--ink) !important; color:var(--ins-bg) !important; transform:scale(1.06); }
.ins-tag{ font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ins-tag); }

.ins-caption{ position:absolute; left:96px; bottom:64px; width:600px; font-size:30px; font-weight:500; letter-spacing:-.3px; line-height:1.3; }
.ins-coverage{ position:absolute; right:96px; bottom:64px; font-size:17px; line-height:1.5; color:var(--ink3); text-align:right; white-space:pre-line; transition:opacity .4s; }
.ins.exploring .ins-coverage{ opacity:0; }
.ins-hint{ position:absolute; left:0; right:0; bottom:26px; text-align:center; font-size:15px; letter-spacing:.5px; color:var(--ink3); }
.ins-empty{ position:absolute; left:50%; top:50%; width:760px; transform:translate(-50%,-50%); padding:32px 44px; border-radius:28px;
  background:rgba(255,255,255,.06); font-size:28px; font-weight:500; line-height:1.35; text-align:center; color:rgba(243,241,236,.75); }

.ins-shelf{ position:absolute; top:0; right:0; bottom:0; width:560px; padding:170px 72px 80px 56px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--ins-bg) 86%, transparent) 18%, color-mix(in srgb, var(--ins-bg) 95%, transparent));
  transform:translateX(100%); opacity:0; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.ins-shelf.on{ transform:none; opacity:1; }
/* The panel's backdrop spans the stage (and the lens pills); only its
   content takes clicks, so the pills stay usable while exploring. */
.ins-shelf{ pointer-events:none; }
.ins-shelf > *{ pointer-events:auto; }
.ins-kicker{ font-size:15px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink3); }
.ins-shelf h3{ font-size:44px; font-weight:700; letter-spacing:-.8px; margin:8px 0 10px; }
.ins-stats{ font-size:19px; line-height:1.5; color:var(--ink2); white-space:pre-line; }
.ins-bars{ margin-top:22px; display:grid; gap:7px; }
.ins-bar{ display:grid; grid-template-columns:64px 1fr 44px; align-items:center; gap:12px; font-size:16px; color:var(--ink2); height:22px; }
.ins-bar i{ display:block; height:8px; border-radius:4px; }
.ins-bar span:last-child{ text-align:right; }
.ins-rows{ margin-top:26px; border-top:1px solid var(--ins-line); }
.ins-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:12px 0; border-bottom:1px solid var(--ins-line); font-size:19px; }
.ins-row b{ font-weight:400; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px; }
.ins-row small{ display:block; font-size:15px; color:var(--ink3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px; }
.ins-row em{ font-style:normal; color:var(--ink2); font-variant-numeric:tabular-nums; flex:none; }
.ins-play{ margin-top:26px; display:inline-flex !important; align-items:center; gap:10px; font-size:19px !important; font-weight:700 !important;
  color:#06070b !important; background:var(--ink) !important; padding:14px 24px !important; border-radius:14px; }
.ins-play-status{ margin-top:14px; font-size:17px; color:var(--ink2); min-height:1em; }

/* ---- phone: the stage draws; everything you read or tap lives in the dock ---- */
.ins-dock{ display:none; }
.ins-compact .ins-dock{ display:flex; flex-direction:column; gap:12px; padding:14px 16px 16px; }
.ins-compact .ins-dock > *{ position:static !important; width:auto !important; transform:none; }
.ins-compact .ins-top{ order:1; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; opacity:1 !important; }
.ins-compact .ins-pills{ flex-wrap:wrap; gap:6px; }
.ins-compact .ins-pill{ font-size:13px !important; padding:6px 11px !important; }
.ins-compact .ins-pill.on{ transform:none; }
.ins-compact .ins-tag{ font-size:10px; }
.ins-compact .ins-head{ order:2; }
.ins-compact .ins-eyebrow{ display:none; }
.ins-compact .ins-title{ font-size:20px; margin:0; }
.ins-compact .ins-sub{ font-size:13px; margin-top:4px; }
.ins-compact .ins-caption{ order:3; font-size:15px; font-weight:500; }
.ins-compact .ins-shelf{ order:4; padding:14px; border-radius:14px; background:var(--ins-pill); display:none; }
.ins-compact .ins-shelf.on{ display:block; }
.ins-compact .ins-kicker{ font-size:11px; }
.ins-compact .ins-shelf h3{ font-size:20px; margin:4px 0 6px; }
.ins-compact .ins-stats{ font-size:13px; }
.ins-compact .ins-bars{ margin-top:10px; gap:4px; }
.ins-compact .ins-bar{ grid-template-columns:44px 1fr 32px; font-size:12px; height:16px; }
.ins-compact .ins-bar i{ height:6px; }
.ins-compact .ins-rows{ margin-top:10px; }
.ins-compact .ins-row{ font-size:14px; padding:8px 0; }
.ins-compact .ins-row b, .ins-compact .ins-row small{ max-width:230px; }
.ins-compact .ins-row small{ font-size:12px; }
.ins-compact .ins-play-status{ font-size:12px; margin-top:8px; }
.ins-compact .ins-coverage{ order:5; font-size:11px; text-align:left; opacity:1 !important; }
.ins-compact .ins-hint{ order:6; font-size:12px; text-align:left; }