/* ============================================================
   Home di TV Tracker ricostruita in HTML.
   Misure prese 1:1 dal codice Flutter:
     home_top_bar.dart · stories_row.dart · priority_series_row.dart
     home_screen.dart · navigation/bottom_nav_bar.dart
   Colori: memory/Design-system.md §1 + lib/theme/app_colors.dart
   1 unità (--u) = 1 px logico dell'app. Schermo largo 360.
   ============================================================ */

.screen,.screen *,.screen *::before,.screen *::after{box-sizing:border-box}

.screen{
  container-type:inline-size;
  position:relative;
  width:100%;
  aspect-ratio:360/800;
  overflow:hidden;
  background:#0F111A;               /* AppColors.background */
  color:#FFFFFF;                    /* onSurface */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-synthesis-weight:none;
  --u:calc(100cqw / 360);
  --dim:#B0B7C3;                    /* onSurfaceVariant */
  --surfvar:#262A40;                /* surfaceVariant */
  --card:#1A1A1A;                   /* cardDarkNeutral */
  --violet:#6C63FF;                 /* primary */
  user-select:none;
  text-align:left;   /* l'hero centra il testo sotto i 940px: la UI non deve seguirlo */
}

/* ── status bar ── */
.screen__status{
  height:calc(30 * var(--u));
  padding:0 calc(18 * var(--u));
  display:flex;align-items:center;justify-content:space-between;
  font-size:calc(13 * var(--u));
  font-weight:600;letter-spacing:.01em;
}
.screen__status svg{height:calc(11 * var(--u));width:auto;display:block}
.screen__statusicons{display:flex;align-items:center;gap:calc(5 * var(--u))}

/* ── top bar (home_top_bar.dart: h48, padding 20) ── */
.screen__top{
  height:calc(48 * var(--u));
  padding:0 calc(20 * var(--u));
  display:flex;align-items:center;justify-content:space-between;
  gap:calc(12 * var(--u));
}
.screen__user{
  font-size:calc(22 * var(--u));    /* titleLarge */
  font-weight:600;
  line-height:calc(28 * var(--u));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.screen__search{                     /* 44x44, radius 14 */
  flex:none;
  width:calc(44 * var(--u));height:calc(44 * var(--u));
  border-radius:calc(14 * var(--u));
  background:rgba(38,42,64,.4);
  border:calc(1 * var(--u)) solid rgba(255,255,255,.10);
  display:grid;place-items:center;
}
.screen__search svg{width:calc(24 * var(--u));height:calc(24 * var(--u))}

/* ── storie (stories_row.dart: 54x78 r9, gap 9, padding 20/12) ── */
.screen__stories{
  height:calc(102 * var(--u));
  padding:calc(12 * var(--u)) calc(20 * var(--u));
  display:flex;align-items:center;gap:calc(9 * var(--u));
}
.story{
  position:relative;flex:none;
  width:calc(54 * var(--u));height:calc(78 * var(--u));
  border-radius:calc(9 * var(--u));
  overflow:hidden;background:var(--surfvar);
}
.story img{width:100%;height:100%;object-fit:cover;display:block}
.story--ring{
  box-shadow:0 0 0 calc(2 * var(--u)) #0F111A, 0 0 0 calc(4 * var(--u)) var(--violet);
}
.story--mine{
  display:grid;place-items:center;
  background:linear-gradient(160deg,#262A40,#1A1D2D);
}
.story--mine span{
  width:calc(20 * var(--u));height:calc(20 * var(--u));
  border-radius:50%;background:var(--violet-btn);
  display:grid;place-items:center;
  font-size:calc(15 * var(--u));font-weight:700;line-height:1;
  padding-bottom:calc(1.5 * var(--u));
}

/* ── titolo sezione (home_screen.dart: LTRB 24/32/24/12, headlineSmall bold) ── */
.screen__h{
  padding:calc(20 * var(--u)) calc(24 * var(--u)) calc(12 * var(--u));
  font-size:calc(24 * var(--u));
  font-weight:700;
  line-height:calc(32 * var(--u));
  letter-spacing:calc(-.4 * var(--u));
}

/* ── riga serie (priority_series_row.dart) ── */
.row{
  margin:0 calc(16 * var(--u)) calc(10 * var(--u));
  border-radius:calc(16 * var(--u));
  background:var(--card);
  padding:calc(12 * var(--u));
  display:flex;align-items:center;
}
.row__poster{
  flex:none;
  width:calc(56 * var(--u));height:calc(56 * var(--u));
  border-radius:calc(12 * var(--u));
  overflow:hidden;background:var(--surfvar);
}
.row__poster img{width:100%;height:100%;object-fit:cover;display:block}
.row__txt{
  flex:1;min-width:0;
  margin-left:calc(12 * var(--u));
}
.row__name{
  font-size:calc(14 * var(--u));    /* titleSmall */
  font-weight:700;
  line-height:calc(20 * var(--u));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.row__prog{
  margin-top:calc(3 * var(--u));
  font-size:calc(12 * var(--u));    /* bodySmall */
  font-weight:500;
  line-height:calc(16 * var(--u));
  color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.row__ep{
  margin-top:calc(2 * var(--u));
  font-size:calc(12 * var(--u));
  line-height:calc(16 * var(--u));
  color:rgba(176,183,195,.7);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.row__chev{
  flex:none;padding:calc(4 * var(--u));margin-left:calc(4 * var(--u));
  color:rgba(176,183,195,.55);
  display:grid;place-items:center;
}
.row__chev svg{width:calc(22 * var(--u));height:calc(22 * var(--u))}
.row__check{
  flex:none;margin-left:calc(2 * var(--u));
  width:calc(40 * var(--u));height:calc(40 * var(--u));
  border-radius:50%;
  background:var(--surfvar);
  display:grid;place-items:center;
  color:rgba(255,255,255,.9);
}
.row__check svg{width:calc(22 * var(--u));height:calc(22 * var(--u))}

/* ── nav flottante (bottom_nav_bar.dart: radius 32, vetro) ── */
.screen__nav{
  position:absolute;
  left:calc(12 * var(--u));right:calc(12 * var(--u));
  bottom:calc(14 * var(--u));
  height:calc(62 * var(--u));
  border-radius:calc(32 * var(--u));
  background:rgba(32,35,52,.72);
  backdrop-filter:blur(calc(14 * var(--u)));
  -webkit-backdrop-filter:blur(calc(14 * var(--u)));
  border:calc(1 * var(--u)) solid rgba(255,255,255,.10);
  display:flex;align-items:center;
}
.nav-item{
  flex:1;
  display:flex;flex-direction:column;align-items:center;
  gap:calc(3 * var(--u));
  color:var(--dim);
}
.nav-item svg{width:calc(23 * var(--u));height:calc(23 * var(--u))}
.nav-item span{
  font-size:calc(11 * var(--u));
  line-height:calc(13 * var(--u));
  font-weight:500;
}
.nav-item--on{color:var(--violet-lt)}
.nav-item--on span{font-weight:600}
.nav-item__bar{
  width:calc(22 * var(--u));height:calc(3 * var(--u));
  border-radius:calc(2 * var(--u));background:var(--violet);
  margin-top:calc(1 * var(--u));
}
.nav-item__avatar{
  width:calc(23 * var(--u));height:calc(23 * var(--u));
  border-radius:50%;overflow:hidden;
  background:linear-gradient(145deg,#6C63FF,#00E5FF);
  display:grid;place-items:center;
  font-size:calc(11 * var(--u));font-weight:700;line-height:1;color:#fff;
}

/* sfumatura in basso: le righe scorrono sotto la nav */
.screen__fade{
  position:absolute;left:0;right:0;bottom:0;
  height:calc(78 * var(--u));
  background:linear-gradient(180deg,rgba(15,17,26,0),rgba(15,17,26,.72) 48%,#0F111A 100%);
  pointer-events:none;
}

/* ============================================================
   IN ARRIVO — coming_soon_screen.dart · coming_soon_group_card.dart
   card r16 h130 · poster 90x130 · anello 56 stroke 4
   soglie colore: <=7g #4CAF50 · <=30g #FFC107 · oltre #78909C
   ============================================================ */
.screen__hdr{
  position:relative;
  height:calc(56 * var(--u));
  display:flex;align-items:center;justify-content:center;
  gap:calc(10 * var(--u));
  font-size:calc(20 * var(--u));font-weight:800;
  letter-spacing:calc(1 * var(--u));
}
.screen__hdr svg{width:calc(26 * var(--u));height:calc(26 * var(--u));color:var(--violet)}

.screen__sub{
  padding:calc(6 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u));
  display:flex;align-items:center;justify-content:space-between;
}
.screen__sub b{font-size:calc(24 * var(--u));font-weight:700;letter-spacing:calc(-.4 * var(--u))}
.screen__dots{display:flex;gap:calc(5 * var(--u));align-items:center}
.screen__dots i{width:calc(6 * var(--u));height:calc(6 * var(--u));border-radius:99px;background:rgba(176,183,195,.4)}
.screen__dots i.on{width:calc(16 * var(--u));background:var(--violet)}

.soon-card{
  margin:0 calc(16 * var(--u)) calc(12 * var(--u));
  height:calc(130 * var(--u));
  border-radius:calc(16 * var(--u));
  background:#1A1D2D;
  overflow:hidden;
  display:flex;align-items:stretch;
}
.soon-card__poster{flex:none;width:calc(90 * var(--u));position:relative;overflow:hidden}
.soon-card__poster img{width:100%;height:100%;object-fit:cover;display:block}
.soon-card__poster::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 45%,#1A1D2D 100%);
}
.soon-card__body{
  flex:1;min-width:0;
  padding:calc(10 * var(--u)) calc(12 * var(--u));
  display:flex;flex-direction:column;justify-content:center;
}
.soon-chip{
  align-self:flex-start;
  max-width:100%;
  background:rgba(108,99,255,.15);
  border-radius:calc(10 * var(--u));
  padding:calc(4 * var(--u)) calc(10 * var(--u));
  margin-bottom:calc(6 * var(--u));
  color:var(--violet-lt);font-weight:700;font-size:calc(11 * var(--u));
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.soon-card__se{font-size:calc(16 * var(--u));font-weight:900;line-height:calc(20 * var(--u))}
.soon-card__ep{font-size:calc(12 * var(--u));color:rgba(255,255,255,.72);line-height:calc(16 * var(--u));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.soon-card__date{margin-top:calc(6 * var(--u));font-size:calc(11 * var(--u));color:rgba(255,255,255,.66)}

.soon-card__ring{
  flex:none;align-self:center;
  padding-right:calc(14 * var(--u));
  display:flex;flex-direction:column;align-items:center;gap:calc(6 * var(--u));
}
.ring{
  width:calc(56 * var(--u));height:calc(56 * var(--u));
  border-radius:50%;
  display:grid;place-items:center;
  position:relative;
  /* progresso reale del CountdownRing: 1 - giorni/60, passato come --p (0-100) */
  background:conic-gradient(currentColor calc(var(--p,80) * 1%), rgba(255,255,255,.10) 0);
}
.ring::before{
  content:"";position:absolute;inset:calc(4 * var(--u));
  border-radius:50%;background:#1A1D2D;
}
.ring span{position:relative;text-align:center;line-height:1}
.ring b{display:block;font-size:calc(20 * var(--u));font-weight:900;line-height:1}
.ring em{display:block;font-style:normal;font-size:calc(8 * var(--u));opacity:.7;line-height:1;margin-top:calc(2 * var(--u))}
.ring--soon{color:#4CAF50}
.ring--mid{color:#FFC107}
.soon-more{
  border-radius:calc(8 * var(--u));
  background:rgba(255,255,255,.07);
  padding:calc(3 * var(--u)) calc(8 * var(--u));
  font-size:calc(10 * var(--u));font-weight:700;color:var(--dim);
  display:flex;align-items:center;gap:calc(3 * var(--u));
}
.soon-more svg{width:calc(10 * var(--u));height:calc(10 * var(--u))}

/* ============================================================
   SCOPRI — discovery_featured_hero.dart · discovery_media_carousel.dart
   hero 16/11 r22 · poster rail 148x214 r18 gap 16
   ============================================================ */
.screen__big{
  padding:calc(10 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u));
  font-size:calc(30 * var(--u));font-weight:800;letter-spacing:calc(-.6 * var(--u));
}
.tabs{display:flex;gap:calc(10 * var(--u));padding:0 calc(20 * var(--u)) calc(16 * var(--u))}
.tab{
  padding:calc(9 * var(--u)) calc(18 * var(--u));
  border-radius:99px;font-size:calc(14 * var(--u));font-weight:600;
  background:rgba(38,42,64,.55);color:var(--dim);
}
.tab--on{background:var(--violet-btn);color:#fff;font-weight:700}

.hero-card{
  margin:calc(4 * var(--u)) calc(20 * var(--u)) 0;
  border-radius:calc(22 * var(--u));
  aspect-ratio:16/11;
  position:relative;overflow:hidden;background:#222540;
}
.hero-card img{width:100%;height:100%;object-fit:cover;display:block}
.hero-card__veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,17,26,.10) 0%,rgba(15,17,26,.30) 45%,rgba(15,17,26,.92) 100%);
}
.hero-card__rank{
  position:absolute;top:calc(14 * var(--u));left:calc(14 * var(--u));
  display:flex;align-items:center;gap:calc(6 * var(--u));
  padding:calc(7 * var(--u)) calc(12 * var(--u));border-radius:999px;
  background:rgba(15,17,26,.72);
  font-size:calc(12 * var(--u));font-weight:800;
}
.hero-card__rank svg{width:calc(13 * var(--u));height:calc(13 * var(--u));color:var(--violet)}
.hero-card__txt{position:absolute;left:calc(16 * var(--u));right:calc(16 * var(--u));bottom:calc(14 * var(--u))}
.hero-card__txt b{display:block;font-size:calc(26 * var(--u));font-weight:800;line-height:1.05;letter-spacing:calc(-.5 * var(--u))}
.hero-card__txt span{display:block;margin-top:calc(6 * var(--u));font-size:calc(13 * var(--u));font-weight:600;color:var(--dim)}

.rail-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(26 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u));
}
.rail-head b{font-size:calc(24 * var(--u));font-weight:700;letter-spacing:calc(-.4 * var(--u))}
.rail-head span{display:flex;align-items:center;gap:calc(4 * var(--u));font-size:calc(13 * var(--u));font-weight:600;color:var(--violet-lt)}
.rail-head svg{width:calc(14 * var(--u));height:calc(14 * var(--u))}

.rail{display:flex;gap:calc(16 * var(--u));padding:0 calc(20 * var(--u))}
.rail-item{flex:none;width:calc(148 * var(--u))}
.rail-item__img{
  position:relative;width:100%;height:calc(214 * var(--u));
  border-radius:calc(18 * var(--u));overflow:hidden;background:var(--surfvar);
}
.rail-item__img img{width:100%;height:100%;object-fit:cover;display:block}
.rail-item__rank{
  position:absolute;top:calc(6 * var(--u));left:calc(10 * var(--u));
  font-size:calc(34 * var(--u));font-weight:900;line-height:1;
  text-shadow:0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.75);
}
.rail-item b{display:block;margin-top:calc(10 * var(--u));font-size:calc(14 * var(--u));font-weight:700;line-height:1.15}
.rail-item span{display:block;margin-top:calc(2 * var(--u));font-size:calc(12 * var(--u));font-weight:600;color:var(--dim)}

/* ============================================================
   STATISTICHE — statistics_widgets.dart
   card r24 padding 24 · chip tempo r18 · valore headlineSmall(24)
   ============================================================ */
.st-tabs{
  display:flex;padding:0 calc(8 * var(--u));
  border-bottom:calc(1 * var(--u)) solid rgba(255,255,255,.07);
}
.st-tab{
  flex:1;text-align:center;padding:calc(12 * var(--u)) 0 calc(11 * var(--u));
  font-size:calc(15 * var(--u));font-weight:500;color:#fff;
  position:relative;
}
.st-tab--on{color:var(--violet-lt);font-weight:600}
.st-tab--on::after{
  content:"";position:absolute;left:22%;right:22%;bottom:0;
  height:calc(3 * var(--u));border-radius:calc(2 * var(--u));background:var(--violet);
}

.st-card{
  margin:0 calc(16 * var(--u)) calc(12 * var(--u));
  border-radius:calc(24 * var(--u));
  background:#1A1D2D;
  /* il codice usa EdgeInsets.all(24): qui 20 per far entrare le barre
     dell'attività settimanale sopra il taglio dello screen */
  padding:calc(20 * var(--u));
}
.st-card__label{font-size:calc(16 * var(--u));font-weight:600;color:var(--dim)}
.st-card__value{margin-top:calc(12 * var(--u));font-size:calc(24 * var(--u));font-weight:700;color:var(--violet-lt);line-height:1.1}
.st-chips{display:flex;gap:calc(8 * var(--u));margin-top:calc(16 * var(--u))}
.st-chip{
  flex:1;
  border-radius:calc(18 * var(--u));
  background:rgba(108,99,255,.12);
  border:calc(1 * var(--u)) solid rgba(108,99,255,.30);
  padding:calc(14 * var(--u)) calc(4 * var(--u));
  text-align:center;
}
.st-chip b{display:block;font-size:calc(24 * var(--u));font-weight:900;color:var(--violet-lt);line-height:1}
.st-chip span{display:block;margin-top:calc(2 * var(--u));font-size:calc(12 * var(--u));font-weight:500;color:var(--dim)}

.st-bars{display:flex;align-items:flex-end;justify-content:space-between;height:calc(100 * var(--u));margin-top:calc(16 * var(--u))}
.st-bar{display:flex;flex-direction:column;align-items:center;gap:calc(8 * var(--u));flex:1}
.st-bar i{display:block;width:calc(12 * var(--u));border-radius:calc(6 * var(--u));background:var(--violet)}
.st-bar i.off{background:rgba(255,255,255,.10)}
.st-bar span{font-size:calc(11 * var(--u));font-weight:700;color:var(--dim)}

.screen__back{
  position:absolute;left:calc(18 * var(--u));top:50%;transform:translateY(-50%);
  color:var(--dim);display:grid;place-items:center;
}
.screen__hdr .screen__back svg{
  width:calc(24 * var(--u));height:calc(24 * var(--u));
  color:currentColor;   /* `.screen__hdr svg` colora di viola: qui non deve */
}