/* ==========================================================================
   BASE — reset doux, typo, mise en page mobile-first. Thème "Noir".
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
:root {
  /* filigrane de marque "I ❤ Zena" : identité présente partout en fond (pas
     juste le logo du header), visible sans être criard (alpha baké dans le
     SVG, pas d'opacity sur l'élément — le texte au-dessus reste net). */
  --brand-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='130' viewBox='0 0 220 130'%3E%3Cg fill-opacity='.14'%3E%3Ctext x='10' y='28' font-family='Georgia,serif' font-style='italic' font-size='19' fill='%23fff'%3EI%3C/text%3E%3Cpath d='M28 22c-3-5-11-4-11 2c0 5 11 11 11 11c0 0 11-6 11-11c0-6-8-7-11-2Z' fill='%23ff2d35'/%3E%3Ctext x='47' y='28' font-family='Georgia,serif' font-style='italic' font-size='19' fill='%23fff'%3EZena%3C/text%3E%3Ctext x='118' y='93' font-family='Georgia,serif' font-style='italic' font-size='19' fill='%23fff'%3EI%3C/text%3E%3Cpath d='M136 87c-3-5-11-4-11 2c0 5 11 11 11 11c0 0 11-6 11-11c0-6-8-7-11-2Z' fill='%23ff2d35'/%3E%3Ctext x='155' y='93' font-family='Georgia,serif' font-style='italic' font-size='19' fill='%23fff'%3EZena%3C/text%3E%3C/g%3E%3C/svg%3E");
}
html {
  height: 100%;
  background-color: var(--bg);
  background-repeat: repeat;
}
/* filigrane "I ❤ Zena" : seulement une fois révélé (voir js/brand.js) — sinon
   le code neutre ("2026") laissait quand même le nom en fond partout. */
html[data-revealed="1"] { background-image: var(--brand-pattern); }
body {
  margin: 0;
  min-height: 100%;
  height: 100%;
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: -0.006em;
  /* espace bas = dock réel (onglets + mini-player s'il est affiché), mesuré
     en direct par boot.js -> --dock-h (safe-area déjà incluse dedans, les
     deux barres fixes la réservent elles-mêmes dans leur propre padding) */
  padding-bottom: calc(var(--dock-h, 158px) + 12px);
  overscroll-behavior-y: none;
  overflow-x: hidden; /* jamais de scroll horizontal (barre onglets toujours visible) */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
input, select, textarea { font-size: 16px; } /* iOS : pas de zoom au focus */

/* ---------- icônes SVG (js/icons.js) ---------- */
.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  line-height: 0;
}
.ico svg { display: block; width: 1em; height: 1em; }

/* ---------- accessibilité ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- typographie utilitaire ---------- */
h1, h2, h3 { line-height: var(--lh-tight); letter-spacing: -0.01em; }
/* titres en serif Fraunces : personnalité, écho au "I" du logo.
   font-optical-sizing:auto -> la police se durcit avec la taille (tranchante
   dans le greeting, calme dans les paroles), sans réglage manuel. */
.greet-title, .block-title, .rail-title, .sheet-title,
.np-title, .lyrics-title, .onboard-title, .sheet-head .sheet-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: 0;
}
.title {
  font-weight: var(--w-medium); font-size: var(--t-body);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sub {
  color: var(--ink-dim); font-size: var(--t-meta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.small { font-size: var(--t-meta); color: var(--ink-dim); }
.mini { font-size: var(--t-micro); color: var(--ink-dim); }
.block-title {
  font-size: var(--t-title); font-weight: var(--w-bold); letter-spacing: -0.02em;
  margin: var(--s5) 0 var(--s3);
}
.count-hint { font-size: var(--t-meta); color: var(--ink-dim); }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: var(--s3); }
.row.gap { gap: var(--s2); flex-wrap: wrap; }
.center { text-align: center; }

a { color: var(--ink); text-decoration-color: var(--ink-faint); }
.link-btn {
  background: none; border: none; padding: var(--s2);
  color: var(--ink-dim); font-size: var(--t-meta); font-weight: var(--w-medium);
  font-family: var(--font); cursor: pointer;
}
.link-btn:active { color: var(--ink); }

/* ---------- bandeau hors-ligne ---------- */
.offline-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--glass-2); color: var(--ink);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--glass-edge);
  font-size: var(--t-meta); font-weight: var(--w-medium);
  padding: 9px 12px;
}
.offline-banner[hidden] { display: none; }
.offline-banner .ico { font-size: 15px; color: var(--ink-dim); }

/* ---------- en-tête : sobre, pas de dégradé ---------- */
.brand {
  position: sticky; top: 0; z-index: 8;
  display: flex; align-items: center; gap: var(--s3);
  background: var(--glass-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  padding: calc(11px + env(safe-area-inset-top)) var(--s4) 11px;
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--glass-edge);
}
.brand-logo { height: 38px; width: auto; display: block; }
.brand-logo[hidden] { display: none; }
.brand-text {
  flex: 1; min-width: 0;
  font: var(--w-bold) var(--t-title)/1 var(--font-display);
  color: var(--ink);
}
.brand .icon-btn { background: none; color: var(--ink-dim); }
.brand .icon-btn:active { background: var(--surface-2); }

/* ---------- vues ---------- */
/* overflow-x:clip (pas hidden) : "hidden" sur un seul axe promeut l'autre
   axe en scroll "auto" implicite (règle CSS overflow), ce qui transformait
   #views en conteneur de scroll et cassait `position:sticky top:var(--header-h)`
   (calculé par rapport au haut de #views au lieu du haut de l'écran -> les
   barres sticky apparaissaient bien plus bas que prévu). "clip" est exclu de
   cette règle de promotion. */
#views { max-width: 640px; margin: 0 auto; overflow-x: clip; }
.view { padding: var(--s4) var(--s4) 0; min-width: 0; }
.view[hidden] { display: none; }
.view-spacer { height: var(--s5); }

/* ---------- salutation : la SEULE grande typo de l'accueil ---------- */
.greet-block { padding: var(--s4) 0 var(--s2); }
.greet-title {
  margin: 0; font-size: var(--t-display); font-weight: 560;
  line-height: 1.03; letter-spacing: -0.021em;
  text-wrap: balance;
}
.greet-sub { margin: 8px 0 0; color: var(--ink-dim); font-size: var(--t-meta); }

/* ---------- états ---------- */
.empty-state {
  text-align: center; color: var(--ink-dim);
  padding: var(--s6) var(--s4);
  border: 1px solid var(--hairline); border-radius: var(--r-2);
}
.empty-state .big { display: block; margin-bottom: var(--s2); color: var(--ink-faint); }
.empty-state .big.ico { font-size: 28px; margin: 0 auto var(--s2); }
.error-state {
  text-align: center; color: var(--ink);
  padding: var(--s5) var(--s4);
  border: 1px solid var(--red); border-radius: var(--r-2);
}

.kbd {
  font-family: ui-monospace, SFMono-Regular, monospace;
  background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 5px;
  padding: 1px 6px; font-size: var(--t-meta); white-space: nowrap;
}

@media (forced-colors: active) {
  .btn, .btn-primary, .chip { border: 1px solid ButtonText; }
}