/* Pool (ex-Promo) — direction « Le disque » (choisie par François le 30/09). Une page de club : un grand vinyle dont
   l'étiquette est la pochette (il tourne pendant l'écoute), le nom de l'artiste en contour géant derrière.
   Noir en mode sombre, blanc avec vinyle noir en mode clair (règle Hosted : clair + sombre). Host Grotesk. */
:root { --ghost: color-mix(in srgb, var(--fg) 15%, transparent); --hair: color-mix(in srgb, var(--fg) 22%, transparent); --pad: clamp(16px, 3.3vw, 48px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.crumb { font-size: 15px; font-weight: 500; color: var(--muted); margin: 0; }
.crumb a { color: inherit; text-decoration: none; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.danger { color: var(--err); }
.fine { color: var(--muted); font-size: 13px; margin: 0; max-width: 62ch; }
.link { background: none; border: 0; padding: 4px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: inherit; font: inherit; font-size: 14px; }
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); margin: 0; max-width: calc(100% - 32px); background: var(--fg); color: var(--bg); border-radius: 999px; padding: 12px 20px; font-size: 15px; z-index: 50; }
.toast:empty { display: none; }
.pill.hero { height: 58px; padding: 0 30px; font-size: 17px; font-weight: 600; }
.pill.sm { min-height: 36px; height: 36px; padding: 0 14px; font-size: 14px; font-weight: 600; }
.back { display: none; }

/* ---------- Le club : page avec le nom en contour géant derrière ---------- */
.club { position: relative; overflow: hidden; isolation: isolate; }
.ghost-word {
  position: absolute; left: -0.04em; bottom: -0.1em; z-index: -1; margin: 0; pointer-events: none; white-space: nowrap;
  font-weight: 800; text-transform: uppercase; letter-spacing: -0.06em; line-height: 0.8; font-size: clamp(120px, 21vw, 340px);
  color: transparent; -webkit-text-stroke: 1px var(--ghost);
}
.stack { margin: 0; display: grid; gap: 6px; }
.stack .a { font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.86; font-size: clamp(48px, 6.2vw, 104px); margin-left: -0.04em; overflow-wrap: anywhere; }
.stack .t { font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; font-size: clamp(26px, 2.8vw, 42px); }
.meta { color: var(--muted); font-size: 16px; margin: 0; }

/* ---------- Le disque ---------- */
.disc { position: relative; width: 100%; aspect-ratio: 1; }
.rec {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle, #0c0c0c 0 2.6%, transparent 2.8%),
    radial-gradient(circle, transparent 0 32%, #0c0c0c 32.3%),
    repeating-radial-gradient(circle, #141414 0 1px, #262626 1.3px 2.4px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 70px -30px rgba(0, 0, 0, 0.55);
}
.spin { position: absolute; inset: 0; border-radius: 50%; }
.lbl { position: absolute; inset: 32.5%; border-radius: 50%; background: #1d1d1d center / cover no-repeat; overflow: hidden; }
.lbl::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7%; height: 7%; transform: translate(-50%, -50%); border-radius: 50%; background: #0c0c0c; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }
/* Sans pochette : les initiales au-dessus du trou central, pas dessous. */
.lbl.empty { display: grid; place-items: start center; padding-top: 4.5%; color: #fff; font-weight: 800; font-size: clamp(14px, 2vw, 30px); letter-spacing: -0.05em; text-transform: uppercase; }
/* Reflet fixe sur les sillons : le disque a l'air de tourner sans que la lumière tourne. */
.rec::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(from 30deg, transparent 0 12%, rgba(255, 255, 255, 0.07) 16%, transparent 22% 62%, rgba(255, 255, 255, 0.05) 66%, transparent 72%); }
@media (prefers-reduced-motion: no-preference) {
  .disc.playing .spin { animation: spin 1.8s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Étiquette à déposer (nouvelle promo). */
.lbl.drop-label { cursor: pointer; background: #1d1d1d; display: grid; place-items: center; text-align: center; color: #fff; font-size: 14px; font-weight: 600; padding: 12%; outline: 1.5px dashed rgba(255, 255, 255, 0.5); outline-offset: -6px; }
.lbl.drop-label:hover { outline-color: #fff; }
.lbl.drop-label span { font-weight: 400; opacity: 0.7; font-size: 12px; display: block; margin-top: 4px; }

/* ---------- Morceaux et courbe ---------- */
.tracks-list { border-top: 1px solid var(--line); }
.player-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.player-row .tr { min-width: 0; }
.player-row .t { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-row .d { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; align-self: start; padding-top: 2px; }
.play { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--fg); background: transparent; color: var(--fg); cursor: pointer; display: grid; place-items: center; flex: none; padding: 0; }
.play[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.wave { position: relative; display: block; height: 48px; margin-top: 8px; cursor: pointer; }
.wave svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wave .w-base { fill: var(--fg); opacity: 0.25; }
.wave .w-top { fill: var(--fg); clip-path: inset(0 100% 0 0); }
.wave.flat { height: 4px; background: var(--hair); border-radius: 2px; margin-top: 12px; }
.wave.flat .w-top { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--fg); border-radius: 2px; }

/* ---------- Page du DJ ---------- */
.dj { min-height: calc(100svh - var(--bar-h)); }
.dj-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); padding: clamp(28px, 4vw, 64px) var(--pad) clamp(120px, 14vw, 220px); align-items: start; max-width: 1400px; margin: 0 auto; }
.dj-disc { position: sticky; top: calc(var(--bar-h) + 32px); width: min(560px, 100%); justify-self: center; }
.dj-side { display: grid; gap: 26px; min-width: 0; }
.dj-side .msg { font-size: 19px; line-height: 1.5; max-width: 42ch; white-space: pre-line; margin: 0; }
.feedback-form h2, .downloads h2 { font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-size: clamp(30px, 3vw, 44px); margin: 0 0 8px; }
.feedback-form p { color: var(--muted); margin: 0 0 14px; }
.feedback-form textarea { width: 100%; min-height: 140px; padding: 16px; border: 1px solid var(--muted); border-radius: 14px; background: transparent; color: var(--fg); font: inherit; font-size: 17px; resize: vertical; }
.feedback-form textarea:focus-visible { outline-offset: 0; border-color: var(--fg); }
.feedback-form .pill { margin-top: 14px; }
.yours { border-left: 3px solid var(--fg); padding-left: 14px; font-size: 17px; margin: 0 0 18px; white-space: pre-line; }
.dls { display: grid; gap: 10px; }
.dls a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 0 22px; border: 1px solid var(--fg); border-radius: 999px; text-decoration: none; font-weight: 600; color: var(--fg); }
.dls a.all { background: var(--fg); color: var(--bg); font-size: 18px; min-height: 64px; }
.dls a span { font-weight: 500; font-size: 14px; opacity: 0.7; }
.foot { color: var(--muted); font-size: 13px; margin: 0; }
.foot a { color: inherit; }

/* ---------- Espace de l'artiste ---------- */
.shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: calc(100svh - var(--bar-h)); }
.side { border-right: 1px solid var(--line); padding: 22px 18px 40px; position: sticky; top: var(--bar-h); height: calc(100svh - var(--bar-h)); overflow-y: auto; background: var(--bg); }
.side > .pill { width: 100%; height: 52px; font-size: 16px; font-weight: 600; }
.group { font-size: 14px; font-weight: 500; color: var(--muted); margin: 28px 0 6px; }
.items { list-style: none; margin: 0; padding: 0; }
.items a { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: 12px; color: inherit; text-decoration: none; }
.items a:hover { background: var(--surface); }
.items a[aria-current="page"] { background: var(--fg); color: var(--bg); }
.items .mini { width: 44px; height: 44px; }
.items .mini .rec { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.items .lst { width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.items .t { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.items .s { display: block; font-size: 13px; opacity: 0.7; }
.items .none { color: var(--muted); font-size: 14px; padding: 4px 0; }
.inline { display: flex; gap: 8px; margin-top: 12px; }
.inline input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 1px solid var(--hair); border-radius: 999px; background: transparent; color: inherit; font: inherit; }
.inline button { height: 44px; padding: 0 16px; border: 1px solid var(--fg); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }

.detail { min-width: 0; }
.page { padding: clamp(28px, 4vw, 56px) var(--pad) clamp(140px, 16vw, 260px); display: grid; gap: 48px; max-width: 1180px; }
.top { display: grid; grid-template-columns: minmax(200px, 340px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.top-words { display: grid; gap: 14px; min-width: 0; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 8px; }
.stats div { display: grid; }
.stats b { font-size: clamp(32px, 3.2vw, 48px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stats span { font-size: 14px; color: var(--muted); }
.block { display: grid; gap: 16px; }
.block > h2 { font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-size: clamp(30px, 3vw, 44px); margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip > span { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 1px solid var(--hair); border-radius: 999px; font-weight: 500; }
.chip input:checked + span { border-color: var(--fg); background: var(--fg); color: var(--bg); }
.chip input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 3px; }
.chip small { opacity: 0.7; }
.row-actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.row-actions small { color: var(--muted); font-size: 14px; }

/* Ce que les DJ ont dit : les commentaires en grandes citations, puis tout le monde en liste compacte. */
.quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 36px 40px; }
.quote { margin: 0; display: grid; gap: 12px; align-content: start; }
.quote blockquote { margin: 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; white-space: pre-line; text-wrap: pretty; }
.quote blockquote::before { content: "“"; }
.quote blockquote::after { content: "”"; }
.quote figcaption { font-size: 14px; color: var(--muted); }
.quote figcaption b { color: var(--fg); font-weight: 600; }
.nobody { color: var(--muted); font-size: 17px; margin: 0; }
.people { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.people > li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(220px, 1fr) 110px; gap: 12px 24px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.people .who { min-width: 0; }
.people .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people .who span { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people .pnote { font-size: 13px; color: var(--muted); }
.people .pnote.bad { color: var(--err); }
/* Frise : envoyé → ouvert → écouté → téléchargé. */
.prog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.prog li { position: relative; display: grid; justify-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.prog li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--hair); background: var(--bg); position: relative; z-index: 1; }
.prog li + li::after { content: ""; position: absolute; top: 5px; right: 50%; width: 100%; height: 1.5px; background: var(--hair); }
.prog li.on { color: var(--fg); }
.prog li.on::before { background: var(--fg); border-color: var(--fg); }
.prog li.on + li.on::after { background: var(--fg); }
.wa-run { border: 1px solid var(--fg); border-radius: 18px; padding: 22px; display: grid; gap: 14px; justify-items: start; }
.wa-run p { margin: 0; max-width: 60ch; }
.wa-name { font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.9; font-size: clamp(36px, 4vw, 64px); }

/* Formulaires. */
.new-grid { display: grid; grid-template-columns: minmax(200px, 380px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.form { display: grid; gap: 18px; max-width: 720px; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.f { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.f .opt { color: var(--muted); font-weight: 400; }
.f input, .f textarea, textarea.paste { font: inherit; font-size: 16px; min-height: 48px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 12px; background: transparent; color: var(--fg); width: 100%; min-width: 0; }
.f textarea { min-height: 110px; resize: vertical; }
textarea.paste { min-height: 170px; resize: vertical; }
.f input:focus-visible, .f textarea:focus-visible, textarea.paste:focus-visible { outline-offset: 0; border-color: var(--fg); }
.dropzone { border: 1.5px dashed var(--muted); border-radius: 18px; padding: 26px; display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; cursor: pointer; }
.dropzone b { font-size: 18px; }
.dropzone span { color: var(--muted); font-size: 14px; }
.dropzone:hover, .dropzone.over { border-color: var(--fg); background: var(--surface); }
.up-tracks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.up-tracks:empty { display: none; }
.up-tracks li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.up-tracks .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.up-tracks input { font: inherit; width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 10px; background: transparent; color: var(--fg); }
.up-tracks .st { font-size: 14px; color: var(--muted); white-space: nowrap; display: flex; gap: 12px; align-items: center; }
.up-tracks .st.bad { color: var(--err); white-space: normal; }
.up-tracks .meter { width: 70px; height: 4px; background: var(--hair); border-radius: 2px; overflow: hidden; }
.up-tracks .meter span { display: block; height: 100%; background: var(--fg); }
.contacts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.contacts li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.contacts b { overflow-wrap: anywhere; }
.contacts .state { font-size: 13px; font-weight: 600; color: var(--err); }
.steps3 { list-style: none; margin: 0; padding: 0; counter-reset: s; border-top: 1px solid var(--line); max-width: 640px; }
.steps3 li { counter-increment: s; display: grid; grid-template-columns: 56px minmax(0, 1fr); padding: 16px 0; border-bottom: 1px solid var(--hair); font-size: 18px; }
.steps3 li::before { content: counter(s); font-weight: 800; font-size: 28px; letter-spacing: -0.04em; line-height: 1; }

/* ---------- Accueil déconnecté ---------- */
.welcome-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(32px, 5vw, 72px) var(--pad) clamp(140px, 16vw, 240px); max-width: 1400px; margin: 0 auto; }
.welcome-grid .disc { width: min(520px, 100%); justify-self: center; }
.welcome-words { display: grid; gap: 22px; }
.welcome-words h1 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; font-size: clamp(28px, 2.9vw, 44px); max-width: 16ch; margin: 0; }
.lead { color: var(--muted); font-size: 19px; line-height: 1.5; max-width: 40ch; margin: 0; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.cta-row small { font-size: 15px; color: var(--muted); }
.giant { font-weight: 800; text-transform: uppercase; letter-spacing: -0.05em; line-height: 0.86; font-size: clamp(64px, 9vw, 150px); margin: 0 0 0 -0.04em; }

@media (max-width: 1000px) {
  .top, .new-grid { grid-template-columns: minmax(0, 1fr); }
  .top .disc, .new-grid .disc { max-width: 300px; }
  .people > li { grid-template-columns: minmax(0, 1fr) auto; }
  .people .prog { grid-column: 1 / -1; max-width: 360px; }
}
@media (max-width: 900px) {
  .dj-grid, .welcome-grid { grid-template-columns: minmax(0, 1fr); }
  .dj-disc { position: relative; top: 0; width: min(340px, 86vw); }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: relative; top: 0; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .shell[data-view="detail"] .side { display: none; }
  .back { display: inline-block; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
}
.welcome { max-width: 760px; margin: 0 auto; padding: 64px 20px; display: grid; gap: 18px; }
.people > li > .pill { justify-self: end; }
.lbl.drop-label { font-size: clamp(28px, 3vw, 44px); font-weight: 300; padding: 0; }
.lbl.drop-label::after { display: none; }
.disc-cap { text-align: center; margin: 16px auto 0; }

/* ---------- Façon Inflyte (02/10), passé en noir, blanc et gris le 03/10 : plus de violet ni de citron ----------
   POUR POOL SEULEMENT (jamais dans style.css du kit, la barre Hosted ni les e-mails). --acc = aplat violet (boutons, tuiles),
   --lime = aplat citron, --mark = ce qui se lit sur le fond de la page (onde, jauges, frise, étoiles) : violet en clair,
   citron en sombre (le violet sur noir ne passe pas le contraste). Fond de page teinté, panneaux blancs, angles de 6 px. */
/* Noir, blanc et gris (demande de François, 03/10 : « enlève le violet et vert ») : les mêmes variables, sans couleur.
   --acc = gris foncé (boutons, tuiles), --lime = gris clair, --mark = noir en clair, blanc en sombre, --mid = gris moyen (camembert). */
:root { --acc: #444444; --on-acc: #FFFFFF; --lime: #DFDFDF; --on-lime: #0B0B0B; --mark: #0B0B0B; --mid: #8C8C8C; --ground: #F2F2F2; --panel: #FFFFFF; --ink: #0B0B0B; --on-ink: #FFFFFF; --r: 6px;
  --hair: #D9D9D9; --surface: #ECECEC; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --mark: #FFFFFF; --ground: #0A0A0A; --panel: #151515; --ink: #FFFFFF; --on-ink: #0B0B0B; --hair: #2E2E2E; --surface: #1E1E1E; } }
:root[data-theme="dark"] { --mark: #FFFFFF; --ground: #0A0A0A; --panel: #151515; --ink: #FFFFFF; --on-ink: #0B0B0B; --hair: #2E2E2E; --surface: #1E1E1E; }
body { background: var(--ground); }
.hbar, .side { background: var(--panel); border-color: var(--hair); }
.pill { border-radius: var(--r); }
.pill.hero, .side > .pill { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.pill.hero { height: 48px; padding: 0 22px; font-size: 16px; }
.pill:active, .play:active { transform: scale(0.97); }
.ghost-word { display: none; }
.stack .a { text-transform: none; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(28px, 4vw, 40px); margin-left: 0; }
.stack .t { font-size: clamp(22px, 2.4vw, 30px); }
.block > h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.page { gap: 28px; padding-bottom: 80px; }
.lbl.empty { background: var(--lime); color: var(--on-lime); }
.play { border-radius: var(--r); }
.play[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.wave .w-top, .wave.flat .w-top { fill: var(--mark); }
.wave.flat .w-top { background: var(--mark); }
.up-tracks .meter span { background: var(--mark); }
.prog li.on::before { background: var(--mark); border-color: var(--mark); }
.prog li.on + li.on::after { background: var(--mark); }
.yours { border-left-color: var(--mark); }
.tag { border-radius: 3px; letter-spacing: 0.06em; }
.tag.hot { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.items a, .card, .review, .wa-run, .addr-line, .dropzone, .chip > span, .fchip, .inline input, .inline button, .dj-search, .f input, .f textarea, textarea.paste { border-radius: var(--r); }
.card, .review, .wa-run, .addr-line { background: var(--panel); border-color: var(--hair); }
.giant, .wa-name { font-weight: 800; }

/* Tuiles pleines : le libellé au-dessus, le chiffre en grand. Violet, citron, puis encre pour la dernière. */
.band { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.band div { display: grid; gap: 2px; align-content: start; padding: 14px 16px 12px; min-width: 0; background: var(--acc); color: var(--on-acc); }
.band div:nth-child(even) { background: var(--lime); color: var(--on-lime); }
.band div:nth-child(n + 5):last-child { background: var(--ink); color: var(--on-ink); }
.band b { order: 2; font-size: clamp(40px, 5vw, 60px); font-weight: 400; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.band span { order: 1; font-size: 14px; font-weight: 500; }

/* Accueil : « Overview » dans la colonne, promos avec leurs chiffres, activité des DJ. */
.items.over { margin-top: 14px; }
.items .lst .dot { width: 14px; height: 14px; border-radius: 50%; background: currentColor; }
.ov-meter { display: block; height: 4px; border-radius: 2px; background: var(--hair); margin-top: 6px; overflow: hidden; }
.ov-meter i { display: block; height: 100%; background: var(--mark); border-radius: 2px; }
/* Accueil façon Inflyte : table des promos chiffrée, fil d'activité à pastilles, part d'activité. */
.panel { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--r); min-width: 0; }
.ov-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; }
.ov-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.ov-scroll { overflow-x: auto; }
.ov-table { border-collapse: collapse; width: 100%; min-width: 540px; font-variant-numeric: tabular-nums; }
.ov-table th { font-size: 12px; font-weight: 500; color: var(--muted); text-align: right; padding: 10px 10px 6px; white-space: nowrap; }
.ov-table td { padding: 12px 10px; border-top: 1px solid var(--hair); text-align: right; font-size: 16px; vertical-align: middle; }
.ov-table th:first-child, .ov-table td:first-child { text-align: left; }
.ov-table tbody tr { cursor: pointer; }
.ov-table tbody tr:hover td { background: var(--surface); }
.ov-rel { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.ov-rel .mini { width: 44px; height: 44px; }
.ov-rel b { display: block; font-weight: 600; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.ov-rel small { color: var(--muted); font-size: 12px; }
.ov-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.ov-two .block { min-width: 0; }
.sec-h { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.sec-h h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.sec-h .fchip { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 999px; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--hair); font-size: 14px; }
.feed li:first-child { border-top: 0; }
.feed li:hover { background: var(--surface); }
.feed p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.feed q { display: block; color: var(--muted); white-space: pre-line; quotes: "« " " »"; }
.feed time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.feed .ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: var(--on-acc); }
.feed .ico.opened, .feed .ico.commented { background: var(--lime); color: var(--on-lime); }
.feed .ico svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.share { padding: 16px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.donut { width: 150px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; position: relative; flex: none; }
.donut::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; background: var(--panel); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; min-width: 0; flex: 1 1 180px; }
.legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.legend i { width: 12px; height: 12px; border-radius: 50%; }
.share .nobody { font-size: 15px; }
@media (max-width: 900px) { .ov-two { grid-template-columns: minmax(0, 1fr); } }

/* Petits effets (demande de François, 02/10) : les blocs arrivent, les chiffres comptent, les tuiles se soulèvent. */
@media (prefers-reduced-motion: no-preference) {
  .page.in > * { animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .page.in > *:nth-child(2) { animation-delay: 0.06s; } .page.in > *:nth-child(3) { animation-delay: 0.12s; } .page.in > *:nth-child(4) { animation-delay: 0.18s; } .page.in > *:nth-child(n + 5) { animation-delay: 0.24s; }
  .band div, .card { transition: transform 0.18s ease-out; }
  .band div:hover, .card:hover { transform: translateY(-3px); }
  .page.in .donut { animation: turn 0.8s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes turn { from { transform: rotate(-120deg) scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }

/* Envoi en deux temps : le récapitulatif avant de confirmer. */
.review { border: 1px solid var(--fg); border-radius: 22px; padding: clamp(18px, 2.4vw, 28px); display: grid; gap: 14px; max-width: 720px; }
.review h3 { margin: 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.review ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 17px; }
.review ul b { font-variant-numeric: tabular-nums; }
.review .error { margin: 0; font-size: 15px; }

/* Liste de DJ : qui ouvre, qui commente, vu quand. */
.add-djs summary { list-style: none; cursor: pointer; display: inline-block; border-radius: 999px; }
.add-djs summary::-webkit-details-marker { display: none; }
.add-djs[open] summary { margin-bottom: 18px; }
.add-djs[open] summary .pill { background: transparent; color: var(--fg); border-color: var(--fg); }
.dj-search { width: 100%; max-width: 340px; height: 48px; padding: 0 18px; border: 1px solid var(--hair); border-radius: 999px; background: transparent; color: var(--fg); font: inherit; }
.dj-cols, .djs li { display: grid; grid-template-columns: minmax(0, 1.5fr) 150px 110px 90px 70px; gap: 10px 18px; align-items: center; }
.dj-cols { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 8px; }
.djs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.djs li { padding: 12px 0; border-bottom: 1px solid var(--hair); font-variant-numeric: tabular-nums; }
.djs .who { min-width: 0; }
.djs .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.djs .who > span { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.djs .state { color: var(--err); font-weight: 600; }
.djs .rate { font-size: 15px; }
.djs .rate b, .djs .com b { font-size: 17px; }
.djs .last { font-size: 14px; color: var(--muted); }
.djs .com em { display: none; font-style: normal; font-size: 13px; color: var(--muted); }
.djs .link { justify-self: end; }

/* Promos reçues. */
.addr-line { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; border: 1px solid var(--hair); border-radius: 18px; padding: 16px 20px; max-width: 820px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 18px; }
.card { border: 1px solid var(--hair); border-radius: 22px; padding: 20px; display: grid; gap: 14px; align-content: start; background: var(--bg); }
.card .cd { width: 120px; }
.card h2 { margin: 0; font-size: 24px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.95; overflow-wrap: anywhere; }
.card p { margin: 0; }
.card .by { font-weight: 600; margin-top: 4px; }
.card .from { font-size: 14px; color: var(--muted); }
.card div > .from { margin-bottom: 6px; }
.card-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.card .pill { min-height: 48px; }
.card .pill.hero { height: auto; font-size: 16px; }

@media (max-width: 900px) {
  .dj-cols { display: none; }
  .djs li { grid-template-columns: minmax(0, 1fr) auto; }
  .djs .rate { grid-column: 1; grid-row: 2; max-width: 220px; }
  .djs .last { grid-column: 2; grid-row: 2; justify-self: end; }
  .djs .com { grid-column: 1; grid-row: 3; }
  .djs .com em { display: inline; }
  .djs .link { grid-column: 2; grid-row: 1; }
  /* Accueil sur téléphone : le bouton, puis les chiffres et les promos, puis les listes. */
  .shell[data-view="side"] { display: flex; flex-direction: column; }
  .shell[data-view="side"] .side { display: contents; }
  .shell[data-view="side"] .side > * { order: 2; margin-left: var(--pad); margin-right: var(--pad); }
  .shell[data-view="side"] .side > .pill { order: 0; width: auto; margin-top: 18px; }
  .shell[data-view="side"] .side > .items.over { order: 0; margin-top: 8px; }
  .shell[data-view="side"] .side > .items.over li:first-child { display: none; }
  .shell[data-view="side"] .side > form { margin-bottom: 48px; }
  .shell[data-view="side"] .detail { order: 1; border-bottom: 1px solid var(--line); }
  .shell[data-view="side"] .detail .page { padding-bottom: 40px; }
  .shell[data-view="side"] .detail .ghost-word { display: none; }
}

/* Validité d'une promo et e-mails du mois. */
.valid { margin: 0; font-size: 16px; font-weight: 600; }
.valid.off { color: var(--muted); font-weight: 500; }
.review .quota { margin: 0; font-size: 15px; color: var(--muted); }

/* ---------- Un seul espace (01/10) : All DJs et Emails dans la colonne, Admin à part ----------
   Listes en lignes : une grille par ligne sur ordinateur, repliée en carte sur téléphone (plus de tableau qui déborde). */
.tag.bad { border-color: var(--err); color: var(--err); }
.tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tools .dj-search { flex: 1 1 220px; }
.tools-end { margin-left: auto; }
.fchip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--hair); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; }
.fchip[aria-pressed="true"], .fchip[aria-current="page"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.fchip small { opacity: 0.7; }
.thead { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 8px; }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows > li { border-bottom: 1px solid var(--hair); padding: 13px 0; font-variant-numeric: tabular-nums; }
.rows .who { min-width: 0; }
.rows .who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .who small { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .who .soft-b { font-weight: 500; }
.soft { font-size: 14px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.num { text-align: right; }
.num b { font-size: 17px; }
.dj-cols.all, .djs.all li { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 150px 110px 80px; }
.djs .lists { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.djs.all .com { text-align: right; }
.mail-cols, .mails li { display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) 90px 120px; gap: 10px 18px; align-items: center; }
.mail-cols { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 8px; }
.mails { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mails li { padding: 12px 0; border-bottom: 1px solid var(--hair); font-variant-numeric: tabular-nums; }
.mails .who { min-width: 0; }
.mails .who b, .mails .who span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mails .who span, .mails .last, .mails .kind, .mails .promo { font-size: 14px; color: var(--muted); }
.mails .promo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mails .tag { justify-self: start; }
@media (max-width: 900px) {
  .thead, .mail-cols { display: none; }
  .hide-s { display: none; }
  .num { text-align: left; }
  .wide-s { grid-column: 1 / -1; max-width: 260px; }
  .tools-end { margin-left: 0; }
  .djs.all li { grid-template-columns: minmax(0, 1fr) auto; }
  .djs.all .lists { grid-column: 1 / -1; grid-row: 2; }
  .djs.all .rate { grid-column: 1; grid-row: 3; }
  .djs.all .last { grid-column: 2; grid-row: 1; }
  .djs.all .com { grid-column: 2; grid-row: 3; text-align: right; }
  .mails li { grid-template-columns: minmax(0, 1fr) auto; }
  .mails .last { grid-column: 1; grid-row: 2; }
  .mails .who { grid-column: 1; grid-row: 1; }
  .mails .tag { grid-column: 2; grid-row: 1; justify-self: end; }
  .mails .promo { grid-column: 1 / -1; grid-row: 3; }
  .mails .kind { display: none; }
}
@media (max-width: 900px) { .band div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.fmt { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 3px; background: var(--lime); color: var(--on-lime); }
.st { color: var(--mark); letter-spacing: 1px; white-space: nowrap; }
.stars { display: flex; gap: 4px; margin: 0 0 12px; }
.stars button { background: none; border: 0; padding: 2px 4px; font-size: 38px; line-height: 1; color: var(--hair); cursor: pointer; transition: color 0.15s, transform 0.15s; }
.stars button.on { color: var(--mark); }
.stars button:hover { transform: scale(1.15); }
.stars button { color: color-mix(in srgb, var(--fg) 28%, transparent); }
.dls a, .feedback-form textarea { border-radius: var(--r); }
.dls a.all { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.feedback-form h2, .downloads h2 { font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.02em; }
.pill:disabled { opacity: 0.4; }
.edit { padding: clamp(16px, 2vw, 24px); display: grid; gap: 16px; max-width: 820px; }
.edit[hidden] { display: none; }
.feed .ico.passed { background: var(--ink); color: var(--on-ink); }
.djs .com em { display: inline; font-style: normal; font-size: 13px; color: var(--muted); }
.others { display: grid; gap: 14px; }
.others h2 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
.others .card { color: inherit; text-decoration: none; grid-template-columns: 84px minmax(0, 1fr); align-items: center; }
.others .card .cd { width: 84px; }
.others .card h3 { margin: 0; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.others .card .card-row { grid-column: 1 / -1; }
.dj-cols, .djs li { grid-template-columns: minmax(0, 1.5fr) 150px 110px 130px 70px; }
.dj-cols.all, .djs.all li { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 150px 110px 130px; }
@media (max-width: 900px) { .djs li, .djs.all li { grid-template-columns: minmax(0, 1fr) auto; } }
.card, .review, .wa-run, .addr-line { border-radius: var(--r); }

/* Envoi « on contact only » : ce que voit un compte que Hosted n'a pas encore ouvert. */
.contact-only { border: 1px solid var(--fg); border-radius: 22px; padding: clamp(20px, 2.6vw, 32px); display: grid; gap: 14px; max-width: 720px; }
.contact-only h2 { margin: 0; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-size: clamp(26px, 2.6vw, 38px); }
.contact-only p { margin: 0; max-width: 58ch; }

/* ---------- Trois onglets : Inbox, Library, Sent (maquette A validée par François, 02/10) ---------- */
.tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 8px; padding: 0 var(--pad); border-bottom: 2px solid var(--fg); background: var(--bg); }
.tabs[hidden] { display: none; }
.tabs > a:not(.pill) { flex: 1 1 200px; display: grid; gap: 4px; align-content: center; padding: 20px 16px 14px 0; border-bottom: 6px solid transparent; color: var(--muted); text-decoration: none; }
.tabs > a[aria-current="page"] { border-bottom-color: var(--mark); color: var(--fg); }
.tab-t { display: flex; align-items: center; gap: 10px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.02em; }
.tab-s { font-size: 14px; font-weight: 400; color: var(--muted); }
.tab-n { white-space: nowrap; font-size: 13px; font-weight: 700; letter-spacing: 0; background: var(--lime); color: var(--on-lime); padding: 3px 10px; border-radius: 999px; }
.tab-c { font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.tabs .tab-send { align-self: center; margin: 12px 0; height: 52px; padding: 0 28px; font-size: 16px; font-weight: 700; background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
/* Plus de colonne de gauche : sous Sent, trois pages (Overview, DJs, Credits) dans une petite barre. */
.shell { display: block; min-height: 0; }
.subtabs { display: none; flex-wrap: wrap; gap: 8px; padding: 14px var(--pad); border-bottom: 1px solid var(--hair); background: var(--bg); }
.shell[data-tab="sent"] .subtabs { display: flex; }
.subtabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--hair); border-radius: 999px; color: inherit; text-decoration: none; font-weight: 600; font-size: 15px; }
.subtabs a span { font-weight: 500; font-size: 13px; color: var(--muted); }
.subtabs a[aria-current="page"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.subtabs a[aria-current="page"] span { color: inherit; opacity: 0.75; }
.lists-row { display: flex; flex-wrap: wrap; gap: 10px; }
.lists-row .pill b { font-weight: 600; opacity: 0.65; margin-left: 6px; }
.block > .inline { max-width: 420px; }
.inpage { gap: 18px; padding-bottom: 80px; max-width: 1040px; }
.kicker { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.inrows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg); }
.inrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.inrow .cd { width: 56px; flex: none; }
.inrow-t { flex: 1 1 260px; min-width: 0; display: grid; gap: 3px; }
.inrow-t b { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.inrow-t span { font-size: 13px; color: var(--muted); }
.inrow .pill { min-height: 44px; }
.inrow .pill.hero { height: 44px; padding: 0 20px; font-size: 15px; }
.inrow .link { min-height: 44px; color: var(--muted); }
.inrow .st { color: var(--mark); letter-spacing: 1px; }
@media (max-width: 700px) {
  .tabs > a:not(.pill) { flex: 1 1 auto; padding: 14px 8px 10px 0; }
  .tab-t { font-size: 20px; gap: 6px; }
  .tab-n, .tab-c { font-size: 12px; padding-left: 7px; padding-right: 7px; }
  .tab-s { display: none; }
  .tabs .tab-send { flex: 1 1 100%; margin: 4px 0 12px; }
}
.list-chip { display: inline-flex; align-items: center; gap: 10px; }
.list-chip .link { min-height: 44px; }
.pill.danger { color: var(--err); border-color: var(--err); }

/* Téléphone : le disque tient en haut sans cacher le premier son (la page la plus vue de Pool). */
@media (max-width: 600px) {
  .dj-disc { width: min(190px, 48vw); }
  .dj-grid { gap: 20px; padding-top: 20px; }
  .dj-side { gap: 18px; }
  /* Accueil : une carte par promo au lieu d'un tableau coupé à droite. */
  .ov-scroll { overflow: visible; }
  .ov-table, .ov-table tbody { display: block; }
  .ov-table thead { display: none; }
  .ov-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; padding: 12px; border-top: 1px solid var(--hair); }
  .ov-table tbody tr:first-child { border-top: 0; }
  .ov-table td { display: block; border: 0; padding: 4px 0; text-align: left; }
  .ov-table td:first-child { grid-column: 1 / -1; }
  .ov-table td[data-l]::before { content: attr(data-l); display: block; font-size: 12px; color: var(--muted); }
  .ov-table td:last-child { grid-column: 1 / -1; }
  .ov-table { width: 100%; min-width: 0; }
  .ov-rel span, .ov-rel small { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
}

/* Petits disques (listes, lignes) : l'étiquette est trop petite pour des initiales lisibles, on la laisse unie. */
.disc.mini .lbl.empty, .others .card .cd .lbl.empty, .inrow .cd .lbl.empty { font-size: 0; padding-top: 0; }

/* Zones tactiles : 44 px au moins pour les filtres, les liens seuls et le retour (audit du 02/10). */
.sec-h .fchip { min-height: 44px; padding: 0 16px; }
.link.back, #admin-link, .foot a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Cadeau : promos offertes par un label (03/10) ---------- */
.gift-offer { margin: 0 0 clamp(20px, 3vw, 36px); }
.gift-form { display: grid; gap: 18px; max-width: 820px; }
.gifts { list-style: none; margin: 0; padding: 0; }
.gifts li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) auto auto; gap: 8px 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--hair); }
.gifts li:first-child { border-top: 0; }
.gifts .who { display: grid; gap: 2px; min-width: 0; }
.gifts .who b { font-weight: 600; overflow-wrap: anywhere; }
.gifts .who span, .gifts .nums { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.gifts .link { min-height: 44px; }
@media (max-width: 700px) {
  .gifts li { grid-template-columns: minmax(0, 1fr) auto; }
  .gifts .who, .gifts .nums { grid-column: 1 / -1; }
}

/* ---------- Piste B : Artists (label) et My promo (artiste), 03/10 ---------- */
.a-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: start; }
.a-grid.a-solo { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); }
.a-card { background: var(--panel); border: 1px solid var(--hair); border-radius: 16px; padding: 18px; display: grid; gap: 14px; min-width: 0; }
.a-card.a-big { gap: 16px; padding: clamp(18px, 2.4vw, 28px); }
.a-card.a-big > .tag { justify-self: start; }
.a-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.a-head .disc { width: 52px; flex: none; }
.a-head > div { min-width: 0; }
.a-head h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; overflow-wrap: anywhere; }
.a-head p { margin: 2px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.a-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.a-tiles div { background: var(--lime); color: var(--on-lime); border-radius: 10px; padding: 10px 12px; font-size: 12px; }
.a-tiles b { display: block; font-size: 26px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.a-wait { margin: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.a-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.a-foot .link { min-height: 44px; }
.a-add { border: 2px dashed var(--fg); background: transparent; }
.a-add.is-open { border-style: solid; background: var(--panel); }
.a-open { all: unset; cursor: pointer; display: grid; gap: 8px; min-height: 140px; align-content: center; }
.a-open:focus-visible { outline: 3px solid var(--fg); outline-offset: 6px; border-radius: 8px; }
.a-plus { font-size: clamp(26px, 2.8vw, 34px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.a-open span:last-child { color: var(--muted); font-size: 14px; }
.a-form { display: grid; gap: 14px; }
.a-form h3 { margin: 0; font-size: 22px; letter-spacing: -0.03em; }
.a-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 16px; }
.a-check li { display: flex; align-items: center; gap: 12px; }
.a-check i { width: 20px; height: 20px; flex: none; border: 2px solid var(--fg); border-radius: 50%; }
.a-check .ok { color: var(--muted); text-decoration: line-through; }
.a-check .ok i { background: var(--fg); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }