/* ============================================================
   cultural-library — frontend/ranking (classement par duels)
   Adopte design system v0 (assistant-conventions/design-system/).
   Coquille sidebar identique aux surfaces library ; accent or/podium.
   ============================================================ */

:root {
  --surface-color-text:        #1a1a1a;
  --surface-color-bg:          #f7f6f2;
  --surface-color-card-bg:     #ffffff;
  --surface-color-muted:       #555;
  --surface-color-rule:        #d8d3c4;
  --surface-color-link:        #8a6a12;
  --surface-color-link-hover:  #6b520d;
  --surface-color-focus:       #8a6a12;
  --surface-color-primary:     #8a6a12;

  --fg: var(--surface-color-text);
  --fg-soft: var(--surface-color-muted);
  --fg-muted: #888;
  --bg: var(--surface-color-bg);
  --surface: var(--surface-color-card-bg);
  --accent: var(--surface-color-primary);
  --accent-soft: #f5edd6;
  --border: var(--surface-color-rule);
  --border-soft: #ebe6d8;
  --up: #1f7a3d;
  --down: #b03030;
}

/* `hidden` doit gagner sur les display: flex/grid ci-dessous. */
[hidden] { display: none !important; }

html, body { font-size: 14px; }
body { background: var(--bg); color: var(--fg); }

/* ───── Layout sidebar + main (identique aux surfaces) ───── */
body.lib-layout {
  margin: 0;
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}
.lib-sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1em 0.9em;
  display: flex; flex-direction: column;
  gap: 0.9em;
  position: sticky; top: 0;
  max-height: 100vh; overflow-y: auto;
  font-size: 0.92em;
}
.lib-brand {
  font-size: 1.3em; font-weight: 700;
  text-decoration: none; color: var(--fg);
  padding: 0.2em 0.4em; border-radius: 5px; display: block;
}
.lib-brand:hover { background: var(--accent-soft); color: var(--accent); text-decoration: none; }
.lib-nav { display: flex; flex-direction: column; gap: 0.15em; }
.lib-nav a {
  padding: 0.45em 0.6em; text-decoration: none;
  color: var(--fg-soft); border-radius: 5px; font-size: 0.95em;
}
.lib-nav a:hover { background: #f4f4f4; color: var(--fg); text-decoration: none; }
.lib-nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

.lib-section { display: flex; flex-direction: column; gap: 0.4em; }
.lib-section-title {
  margin: 0.5em 0 0.1em;
  font-size: 0.72em; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.lib-actions { gap: 0.5em; }
.lib-auth-section { margin-top: auto; padding-top: 1em; }
.signin-status { font-size: 0.82em; color: var(--fg-soft); padding: 0.3em 0.5em; }

.lib-link-btn, .lib-action-btn {
  padding: 0.5em 0.9em; font-size: 0.92em;
  border-radius: 5px; cursor: pointer;
  text-decoration: none; text-align: center;
  display: inline-block; font-family: inherit;
}
.lib-link-btn { border: 1px solid var(--border); background: white; color: var(--fg); }
.lib-link-btn:hover { background: #f0f0f0; text-decoration: none; }
.lib-link-btn.danger { color: var(--down); }
.lib-action-btn { background: var(--accent); color: white; border: 1px solid var(--accent); }
.lib-action-btn:hover { filter: brightness(0.92); }
button:disabled { opacity: 0.5; cursor: default; }
body.is-busy { cursor: progress; }

kbd {
  display: inline-block; padding: 0.05em 0.4em;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px;
  font-family: var(--ds-font-family-mono); font-size: 0.8em;
  background: #fbfaf6; color: var(--fg-soft);
}

/* Liste des univers */
.medium-list { display: flex; flex-direction: column; gap: 0.15em; }
.medium-btn {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5em;
  padding: 0.45em 0.6em; font-size: 0.95em; font-family: inherit;
  border: none; background: none; border-radius: 5px; cursor: pointer;
  color: var(--fg-soft); text-align: left;
}
.medium-btn:hover { background: #f4f4f4; color: var(--fg); }
.medium-btn.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.medium-count { font-variant-numeric: tabular-nums; font-size: 0.9em; color: var(--fg-muted); }
.paused-dot { color: var(--accent); font-size: 0.8em; }

/* Main */
.lib-main { min-width: 0; padding: 1.3em 1.5em 2em; }
.lib-main-header {
  padding-bottom: 1em; margin-bottom: 0.8em;
  border-bottom: 1px solid var(--border);
}
.lib-main-header h1 {
  margin: 0 0 0.3em; font-size: 1.6em; font-weight: 600;
  font-family: Georgia, "Times New Roman", serif;
}
.lib-main-header p { margin: 0 0 0.7em; color: var(--fg-soft); font-size: 0.95em; }
.lib-search {
  width: 100%; max-width: 480px; box-sizing: border-box;
  padding: 0.55em 0.85em; font-size: 1em;
  border: 1px solid var(--border); border-radius: 5px;
}
.list-switch { margin: 0.2em 0 0.7em; }
.list-switch .seg-btn .list-count { opacity: 0.75; font-variant-numeric: tabular-nums; }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.5em; align-items: center; margin-bottom: 0.8em; }
.cta-row:empty { display: none; }
.rk-warn { font-size: 0.88em; color: var(--down); }
.empty-state { text-align: center; color: var(--fg-muted); padding: 3em 1em; list-style: none; }

/* ───── Liste classement ───── */
.rk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3em; }
.rk-row {
  display: grid;
  grid-template-columns: 2.6em 44px minmax(0, 1fr) auto auto;
  align-items: center; gap: 0.7em;
  padding: 0.45em 0.7em;
  background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: 7px;
  cursor: pointer;
}
.rk-row:hover { border-color: var(--border); }
.rk-row.open { border-color: var(--accent); }
.rk-row.touched { border-left: 3px solid var(--accent); }
#review-list .rk-row { cursor: default; }
.rk-rank {
  font-size: 1.25em; font-weight: 700; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--fg-soft);
}
.rk-row.podium-1 .rk-rank { color: #b8860b; }
.rk-row.podium-2 .rk-rank { color: #8a8a8a; }
.rk-row.podium-3 .rk-rank { color: #a0522d; }
.rk-thumb {
  width: 44px; height: 44px; object-fit: cover; border-radius: 4px;
  background: #eee; display: flex; align-items: center; justify-content: center;
  font-size: 1.3em;
}
.rk-thumb.small { width: 32px; height: 32px; font-size: 1em; }
.rk-main { display: flex; flex-direction: column; min-width: 0; }
.rk-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-sub { font-size: 0.86em; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-trend {
  font-size: 0.82em; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 0.1em 0.45em; border-radius: 10px; white-space: nowrap;
}
.rk-trend.up { color: var(--up); background: #e3f3e7; }
.rk-trend.down { color: var(--down); background: #f8e3e3; }
.rk-trend.new { color: var(--accent); background: var(--accent-soft); }
.rk-trend.same { color: var(--fg-muted); }
.rk-rerank {
  border: 1px solid var(--border); background: white; color: var(--fg-soft);
  border-radius: 50%; width: 2em; height: 2em; cursor: pointer; font-size: 0.95em;
}
.rk-rerank:hover { color: var(--accent); border-color: var(--accent); }

/* Historique déplié */
.rk-history {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 1em 1.5em; align-items: flex-start;
  padding: 0.6em 0 0.3em 3.3em; cursor: default;
}
.rk-spark { width: 260px; max-width: 100%; height: 64px; background: #fbfaf6; border-radius: 4px; }
.rk-spark text { font-size: 9px; fill: var(--fg-muted); }
.rk-spark-line polyline { fill: none; stroke: var(--accent); stroke-width: 1.8; }
.rk-spark-dot circle { fill: var(--accent); }
.rk-history-facts { display: flex; flex-direction: column; gap: 0.2em; font-size: 0.9em; color: var(--fg-soft); }
.rk-history-list {
  list-style: none; margin: 0; padding: 0; font-size: 0.88em;
  max-height: 9em; overflow-y: auto; min-width: 12em;
}
.rk-history-list li { display: flex; justify-content: space-between; gap: 1em; padding: 0.1em 0; }

/* Non classés / écartés */
.rk-extra { margin-top: 1.2em; }
.rk-extra summary { cursor: pointer; color: var(--fg-soft); font-weight: 600; }
.rk-extra-list { list-style: none; margin: 0.6em 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25em; }
.rk-extra-list li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 0.6em;
  padding: 0.3em 0.5em; background: var(--surface); border-radius: 5px;
}
.rk-extra-list .lib-link-btn { padding: 0.3em 0.7em; }

/* ───── Setup ───── */
.mode-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.6em; margin-bottom: 1.2em;
}
.mode-card {
  display: flex; flex-direction: column; gap: 0.3em;
  padding: 0.8em 0.9em; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.mode-card input { position: absolute; opacity: 0; pointer-events: none; }
.mode-card span { font-size: 0.88em; color: var(--fg-soft); }
.mode-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.mode-card.disabled { opacity: 0.45; cursor: not-allowed; }
.mode-card:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.setup-toolbar, .setup-quick { display: flex; flex-wrap: wrap; gap: 0.6em; align-items: center; margin-bottom: 0.6em; }
.setup-toolbar .lib-search { max-width: 280px; }
.setup-check { display: inline-flex; gap: 0.4em; align-items: center; font-size: 0.92em; color: var(--fg-soft); }
.setup-range { display: inline-flex; gap: 0.4em; align-items: center; font-size: 0.92em; color: var(--fg-soft); }
.setup-range input { width: 4em; padding: 0.35em; border: 1px solid var(--border); border-radius: 4px; }
.setup-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.2em;
  max-height: 55vh; overflow-y: auto;
  border: 1px solid var(--border-soft); border-radius: 7px; background: var(--surface);
}
.setup-list label {
  display: grid; grid-template-columns: auto 3em 32px minmax(0, 1fr) auto auto;
  align-items: center; gap: 0.6em; padding: 0.35em 0.7em; cursor: pointer;
}
.setup-list label:hover { background: #faf8f1; }
.setup-rank { font-variant-numeric: tabular-nums; color: var(--fg-muted); text-align: right; font-size: 0.9em; }
.tag {
  font-size: 0.75em; padding: 0.1em 0.5em; border-radius: 10px;
  background: #eee; color: var(--fg-soft); white-space: nowrap;
}
.setup-footer {
  position: sticky; bottom: 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6em;
  margin-top: 1em; padding: 0.8em 0;
  background: var(--bg); border-top: 1px solid var(--border);
}
.setup-footer-actions { display: flex; flex-wrap: wrap; gap: 0.5em; }
#setup-summary { color: var(--fg-soft); }

/* Segmented (copie surfaces) */
.segmented {
  display: inline-flex; border: 1px solid var(--border);
  border-radius: 5px; overflow: hidden;
}
.seg-btn {
  padding: 0.5em 0.9em; background: white; border: none; cursor: pointer;
  font-size: 0.92em; color: var(--fg-soft); font-family: inherit;
}
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn:hover { background: #f4efe0; }
.seg-btn.active { background: var(--accent); color: white; }

/* ───── Duel ───── */
#view-duel { max-width: 880px; margin: 0 auto; }
.duel-header { margin-bottom: 1em; }
.duel-progress-text { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5em; font-size: 0.92em; color: var(--fg-soft); }
.duel-progress-text strong { color: var(--fg); }
.duel-progress { height: 6px; background: var(--border-soft); border-radius: 3px; margin-top: 0.4em; overflow: hidden; }
#duel-bar { height: 100%; background: var(--accent); width: 0; transition: width 0.2s ease; }
.duel-question {
  text-align: center; margin: 0.4em 0 0.8em;
  font-family: Georgia, "Times New Roman", serif; font-weight: 600; font-size: 1.5em;
}
.duel-arena {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch; gap: 1em;
}
.duel-vs { align-self: center; color: var(--fg-muted); font-style: italic; }
.duel-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0.4em;
  padding: 1em; background: var(--surface);
  border: 2px solid var(--border-soft); border-radius: 12px;
  cursor: pointer; font-family: inherit; color: var(--fg);
  transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.duel-card:hover, .duel-card:focus-visible {
  border-color: var(--accent); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); outline: none;
}
.duel-card:active { transform: translateY(0); }
.duel-img {
  width: 100%; max-width: 240px; aspect-ratio: 3 / 4; object-fit: contain;
  border-radius: 6px; background: #f3f1ea;
  display: flex; align-items: center; justify-content: center; font-size: 3em;
}
.duel-card-title { font-size: 1.15em; font-weight: 700; text-align: center; line-height: 1.25; }
.duel-card-sub { font-size: 0.88em; color: var(--fg-muted); text-align: center; }
.duel-card-tag {
  position: absolute; top: 0.6em; left: 0.6em;
  font-size: 0.72em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.2em 0.55em; border-radius: 10px;
  background: var(--accent); color: white;
}
.duel-card-key { position: absolute; top: 0.6em; right: 0.6em; }
.duel-actions, .duel-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em; margin-top: 1em; }
.duel-footer { margin-top: 1.4em; padding-top: 1em; border-top: 1px solid var(--border-soft); }
.duel-hint { text-align: center; color: var(--fg-muted); font-size: 0.85em; margin-top: 1em; }

/* ───── Mobile ───── */
@media (max-width: 768px) {
  body.lib-layout { grid-template-columns: 1fr; }
  .lib-sidebar {
    position: static; max-height: none;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .lib-main { padding: 1em; }
  body[data-view="setup"] .lib-sidebar,
  body[data-view="duel"] .lib-sidebar,
  body[data-view="review"] .lib-sidebar { display: none; }
  .rk-row { grid-template-columns: 2.2em 36px minmax(0, 1fr) auto; gap: 0.5em; }
  .rk-row .rk-rerank { display: none; }
  .rk-thumb { width: 36px; height: 36px; }
  .rk-history { padding-left: 0; }
  .duel-arena { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5em; }
  .duel-vs { display: none; }
  .duel-card { padding: 0.6em; }
  .duel-card-title { font-size: 1em; }
  .duel-card-key, .duel-hint { display: none; }
  .setup-list label { grid-template-columns: auto 2.6em 32px minmax(0, 1fr); }
  .setup-list .tag { display: none; }
}