/* ============================================================
   fit-tracker · app.css
   Design tokens + shared components.
   Strava-orange dark-first palette.
   ============================================================ */

/* --- 1. Tokens ------------------------------------------------ */
:root {
  color-scheme: dark light;

  /* Surfaces */
  --bg:          #0b0c0f;
  --panel:       #14161c;
  --panel-2:     #1a1d24;
  --border:      #262932;
  --border-hi:   #353945;
  --line:        #1f2229;

  /* Text */
  --text:        #ecedf0;
  --text-2:      #b6b9c2;
  --muted:       #8b8f99;
  --dim:         #5a5f6a;

  /* Brand & semantic */
  --accent:      #fc5200;
  --accent-2:    #ff7e2c;
  --accent-3:    #ffb020;
  --good:        #00d68f;
  --warn:        #ffb020;
  --bad:         #ff3b5c;
  --neutral:     #b0b4be;
  --info:        #6cb6ff;

  /* Sport colors */
  --sport-running:  #fc5200;
  --sport-cycling:  #00d68f;
  --sport-training: #7c5cff;
  --sport-other:    #8b8f99;

  /* Type */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Sizing */
  --radius-xs:  6px;
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-sm:   0 1px 2px rgba(0,0,0,.35);
  --shadow:      0 1px 2px rgba(0,0,0,.30), 0 6px 18px rgba(0,0,0,.25);
  --shadow-lg:   0 8px 32px rgba(0,0,0,.35);
  --shadow-glow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
                 0 8px 28px color-mix(in srgb, var(--accent) 25%, transparent);

  /* Layout */
  --container: 1240px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:        #f6f6f8;
    --panel:     #ffffff;
    --panel-2:   #f9f9fb;
    --border:    #e3e5ea;
    --border-hi: #d2d5dc;
    --line:      #ecedf0;
    --text:      #14161c;
    --text-2:    #404552;
    --muted:     #6b7280;
    --dim:       #9ba0ab;
    --shadow:    0 1px 2px rgba(15,15,20,.04), 0 6px 18px rgba(15,15,20,.06);
    --shadow-sm: 0 1px 2px rgba(15,15,20,.06);
    --shadow-lg: 0 8px 32px rgba(15,15,20,.10);
  }
}

/* --- 2. Reset & base ----------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  overflow-x: clip;
}
body {
  margin: 0;
  padding: 28px 24px 48px;
  font: 14px/1.55 var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  overscroll-behavior-y: none;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* warm radial accent in the bg for a sport-y feel */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: -1;
  background:
    radial-gradient(1100px 520px at 85% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    radial-gradient(700px 360px at -10% 110%, color-mix(in srgb, var(--accent-3) 5%, transparent), transparent 60%);
}

/* --- 3. Layout ------------------------------------------------ */
.page, main {
  max-width: var(--container);
  margin: 0 auto;
}

/* --- 4. Header / nav ----------------------------------------- */
header.app-header {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0 auto 26px;
  max-width: var(--container);
  flex-wrap: wrap;
  gap: 14px;
}
.app-brand { display: flex; flex-direction: column; gap: 2px; }
.app-brand h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.app-brand .today {
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.header-right {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

/* segmented pill nav */
.nav-pill {
  display: inline-flex; gap: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  box-shadow: var(--shadow-sm);
}
.nav-pill a {
  font-size: 13px; font-weight: 500;
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 999px;
  transition: color .15s, background .15s;
  line-height: 1;
}
.nav-pill a:hover { color: var(--text); }
.nav-pill a.active {
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent);
}

.range-pill {
  display: inline-flex; gap: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.range-pill a {
  font-size: 12px; font-weight: 500;
  color: var(--muted);
  padding: 5px 11px;
  border-radius: 999px;
}
.range-pill a:hover { color: var(--text); }
.range-pill a.active {
  color: var(--text);
  background: var(--panel-2);
}

/* PMC section header row: title + range pill on the same line. */
.pmc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.pmc-head h2 { margin: 0; }

/* --- 5. Buttons / pills -------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-2);
  transition: color .15s, border-color .15s, transform .15s, background .15s, filter .15s;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.btn:hover {
  color: var(--text);
  border-color: var(--border-hi);
  transform: translateY(-1px);
}
.btn:disabled {
  opacity: .55; cursor: wait; transform: none;
}

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1.2s linear infinite; display: inline-block; }

/* --- 6. Flash messages --------------------------------------- */
.flash {
  margin: 0 auto 18px;
  max-width: var(--container);
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
  border: 1px solid transparent;
}
.flash-ok   { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.flash-warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.flash-bad  { background: color-mix(in srgb, var(--bad)  14%, transparent); color: var(--bad);  border-color: color-mix(in srgb, var(--bad)  40%, transparent); }

/* --- 7. Panels ----------------------------------------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
  position: relative;
}
.panel h2 {
  margin: 0 0 14px 0;
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* "feature" panel — has subtle accent gradient on the top edge */
.panel-feature {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--panel)), var(--panel) 50%);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}
.panel-feature::before {
  content: "";
  position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .55;
}

/* --- 8. Hero metric block (TSB-style) ------------------------ */
.hero {
  display: grid;
  grid-template-columns: minmax(220px, max-content) 1fr;
  gap: 36px;
  align-items: end;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.hero-main { display: flex; flex-direction: column; gap: 4px; }
.hero-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--muted);
}
.hero-num {
  font-size: clamp(54px, 8vw, 84px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.hero-num.tone-good {
  background: linear-gradient(135deg, var(--good), #00b8d4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-num.tone-warn {
  background: linear-gradient(135deg, var(--warn), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-num.tone-bad {
  background: linear-gradient(135deg, var(--bad), #ff7eb6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-num.tone-neutral {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-band {
  font-size: 13px; font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-top: 6px;
}
.hero-message {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 60ch;
}
.hero-trends {
  display: flex; gap: 22px; flex-wrap: wrap;
  margin-top: 16px;
}
.hero-trend {
  font-size: 12px;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.hero-trend strong {
  color: var(--text); font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hero-trend .arrow { font-size: 11px; }
.hero-trend .delta-up   { color: var(--good); }
.hero-trend .delta-down { color: var(--bad);  }
.hero-trend .delta-flat { color: var(--muted); }

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; gap: 14px; }
  .hero-message { font-size: 13.5px; }
}

/* --- 9. Verdict block (Garmin/Whoop "ready" callout) -------- */
.verdict {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--panel-2);
  margin-top: 18px;
}
.verdict-icon {
  font-size: 20px; line-height: 1.25;
  flex-shrink: 0;
}
.verdict-headline { font-weight: 700; font-size: 14px; line-height: 1.35; }
.verdict-detail   { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.5; }
.verdict-good {
  background: color-mix(in srgb, var(--good) 10%, var(--panel-2));
  border-color:  color-mix(in srgb, var(--good) 35%, var(--border));
}
.verdict-good .verdict-icon { color: var(--good); }
.verdict-warn {
  background: color-mix(in srgb, var(--warn) 10%, var(--panel-2));
  border-color:  color-mix(in srgb, var(--warn) 35%, var(--border));
}
.verdict-warn .verdict-icon { color: var(--warn); }
.verdict-bad {
  background: color-mix(in srgb, var(--bad) 10%, var(--panel-2));
  border-color:  color-mix(in srgb, var(--bad) 35%, var(--border));
}
.verdict-bad .verdict-icon { color: var(--bad); }

/* --- 10. Tile grid ------------------------------------------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.tile {
  position: relative;
  padding: 14px 14px 12px 18px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.tile:hover { border-color: var(--border-hi); }
.tile::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--neutral);
  opacity: 0.4;
}
.tile.tone-good::before   { background: var(--good);   opacity: 1; }
.tile.tone-warn::before   { background: var(--warn);   opacity: 1; }
.tile.tone-bad::before    { background: var(--bad);    opacity: 1; }
.tile.tone-accent::before { background: var(--accent); opacity: 1; }

.tile-label {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
}
.tile-value {
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 2px;
  color: var(--text);
  line-height: 1.1;
}
.tile-value.tone-good { color: var(--good); }
.tile-value.tone-warn { color: var(--warn); }
.tile-value.tone-bad  { color: var(--bad);  }
.tile-value .unit {
  font-size: 12px; font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
}
.tile-value .frac {
  font-size: 12px; font-weight: 500;
  color: var(--muted);
}
.tile-band {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
}
.tile-band br + * { display: inline; }

/* --- Mobilidade do dia (matinal/noturna) ---------------------- */
.mob-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.mob-card {
  text-align: left;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color .15s, transform .15s, background .15s;
  display: flex; flex-direction: column; gap: 6px;
}
.mob-card:hover  { border-color: var(--border-hi); transform: translateY(-1px); }
.mob-card.done   { background: color-mix(in srgb, var(--good) 8%, var(--panel-2)); border-color: color-mix(in srgb, var(--good) 35%, var(--border)); }
.mob-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.mob-when {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
}
.mob-badge {
  font-size: 10.5px; font-weight: 600;
  color: var(--good);
}
.mob-dur {
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--text);
}
.mob-dur .unit { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.mob-desc { font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* --- 11. Race card ------------------------------------------- */
.race-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 24px;
  align-items: end;
}
.race-stat .label {
  font-size: 10.5px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.race-stat .value {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  line-height: 1.1;
}
.race-stat .value.tone-good { color: var(--good); }
.race-stat .value.tone-warn { color: var(--warn); }
.race-stat .value.tone-bad  { color: var(--bad);  }
.race-stat .value.low-conf { opacity: 0.7; }
.race-stat .value.low-conf::after { content: " ?"; font-size: 14px; opacity: 0.6; }
.race-stat .band {
  font-size: 11.5px; color: var(--muted); margin-top: 3px;
}
.race-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted);
}
.race-days {
  display: inline-flex; align-items: baseline; gap: 4px;
}
.race-days .num {
  font-size: 32px; font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -0.03em;
  line-height: 1;
}
.race-days .lbl {
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* --- 12. CTA ------------------------------------------------- */
.cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background:
    linear-gradient(120deg,
      color-mix(in srgb, var(--accent) 16%, var(--panel)),
      color-mix(in srgb, var(--accent) 4%, var(--panel)) 60%);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
}
.cta-text { color: var(--text-2); font-size: 13.5px; }
.cta-link {
  font-weight: 600; font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding: 8px 18px;
  border-radius: 999px;
  white-space: nowrap;
  transition: filter .15s, transform .15s;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.cta-link:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* --- 13. Pill / chip / badge --------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--panel-2);
  color: var(--muted);
  border: 1px solid var(--border);
}
.pill-good { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, var(--border)); background: color-mix(in srgb, var(--good) 10%, var(--panel-2)); }
.pill-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); background: color-mix(in srgb, var(--warn) 10%, var(--panel-2)); }
.pill-bad  { color: var(--bad);  border-color: color-mix(in srgb, var(--bad)  40%, var(--border)); background: color-mix(in srgb, var(--bad)  10%, var(--panel-2)); }

/* --- Editorial chrome (refletido de /doctrine) ---------------- */

/* Page-level title — accent underline, oversized. Usar como
   <h1 class="section-title">Treino</h1> no topo de cada página. */
.section-title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 24px auto 24px;
  padding: 0 20px 12px;
  max-width: 1200px;
  border-bottom: 2px solid var(--accent);
}

/* Eyebrow heading — caps, smaller, muted. Substitui o h2-muted-14px
   inline que treino/plano hoje redefinem em head_extra. */
.eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}

/* (.hero-num + variantes tone-* já definidas acima na seção do hero
   da página Hoje, com clamp(54px, 8vw, 84px) e fundo gradiente. As
   classes são reutilizadas em /treino e /plano sem redefinir.) */

/* Panel chrome polido — adiciona shadow-sm e radius 10px sobre o
   .panel base. Opt-in: <section class="panel panel-soft">. */
.panel-soft {
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  border-color: var(--border);
}


/* ============================================================
   Mobile-first adaptations (≤ 768 px = phone, 769-1024 = tablet)
   ============================================================ */

/* Phones — ≤ 768 px */
@media (max-width: 768px) {
  /* Body claims more of the screen — desktop's 28×24px padding wastes
     ~12% of a 360px phone. */
  body { padding: 16px 12px 32px; }

  /* Header collapses; nav-pill scrolls horizontally if it overflows
     instead of wrapping to 2-3 lines. The buttons after nav stack
     below by virtue of flex-wrap on .header-right. */
  header.app-header {
    margin-bottom: 18px;
    gap: 10px;
  }
  .app-brand h1 { font-size: 17px; }
  .header-right {
    width: 100%;
    justify-content: space-between;
  }
  .nav-pill {
    overflow-x: auto;
    max-width: calc(100vw - 24px);
    scrollbar-width: none;       /* hide scrollbar (Firefox) */
  }
  .nav-pill::-webkit-scrollbar { display: none; }
  .nav-pill a {
    font-size: 12px;
    padding: 6px 10px;
    flex-shrink: 0;              /* keep readable, scroll instead */
  }
  .range-pill a { padding: 5px 8px; font-size: 11px; }

  /* Buttons get bigger touch target. */
  .btn { padding: 9px 14px; font-size: 13px; min-height: 40px; }

  /* Panels claim full width minus minimal gutter. */
  .panel { padding: 14px 14px !important; }
  .panel-soft { border-radius: 8px; }

  /* Section title stays prominent but loses its underline overflow. */
  .section-title {
    font-size: 1.5rem;
    padding: 0 4px 10px;
    margin: 12px auto 18px;
  }

  /* Hero number scales down — clamp already does most of the work but
     cap the upper end so a 5-digit score doesn't overflow. */
  .hero-num { font-size: clamp(38px, 12vw, 56px); }

  /* Default tile / KPI grids — narrower minmax so 2 columns fit on
     typical phone (360-414px). */
  .tile-grid,
  .ready-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
}

/* Smaller phones — ≤ 480 px */
@media (max-width: 480px) {
  /* Single-column tiles when even 2 don't fit comfortably. */
  .tile-grid,
  .ready-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   Calendar scroller — used by /treino .cal-week and /plano .plan-week.
   On desktop the wrapper is invisible (no overflow). On phones the
   children get a min-width so the 7-day grid stays legible, and the
   wrapper scrolls horizontally with snap on each week boundary.
   ============================================================ */
.cal-scroller {
  overflow-x: visible;
}


/* ============================================================
   Mobile: tables, popovers, dialogs
   ============================================================ */
@media (max-width: 768px) {
  /* Any table inside a panel becomes horizontally scrollable rather
     than overflowing the page. Wrap natural <table> in this when it
     gets dense (diff-table, marker tables, etc.). */
  .panel table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
}


/* ============================================================
   Bottom-sheet dialogs — universal (desktop + mobile)
   Edge-to-edge em qualquer largura. Conteúdo do dialog é quem
   limita a largura útil (ex: dlg-body com max-width interno).
   ============================================================ */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
/* Trava o scroll de fundo enquanto qualquer dialog estiver aberto. */
html:has(dialog[open]) { overflow: hidden; touch-action: none; }
html:has(dialog[open]) body { overflow: hidden; }
dialog[open] {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  width: auto;
  max-width: none;
  max-height: min(90vh, 720px);
  padding: 0;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: bottom-sheet-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bottom-sheet-in {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Drag handle (visual cue de bottom sheet) */
.dlg-head {
  position: relative;
  padding: 20px 56px 16px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.dlg-head::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  background: var(--border-hi);
  border-radius: 2px;
}
.dlg-title h3 {
  margin: 0 0 6px 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dlg-title .sub {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--muted);
  font-size: 13px;
}
.dlg-title .sub b { color: var(--text-2); font-weight: 600; }
.dlg-close {
  position: absolute;
  top: 14px;
  right: 12px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--muted);
  border: 0;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}
.dlg-close:hover { background: var(--panel-2); color: var(--text); }
.dlg-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
}


/* (As regras móveis para .chart / .chart-tall / .chart-sm / .chart-legend
    moveram para os templates individuais — treino.html, saude.html,
    activity.html — porque cada página define sua própria altura de chart
    no <style> block local. Source-order da cascade fazia o style block
    do template vencer essas regras globais em todas as larguras, mesmo
    em mobile. Manter mobile-tweaks junto da definição base evita o
    descompasso.) */