/* ==========================================================================
   Screen "museum" (History), js/ui/museum.js: timeline, curiosities, chess school and the reading room.
   Every class starts with .museum-. Built on the shared components of css/system.css (.card, .btn,
   .chip, .tabs, .field, .input, .empty ...) and on the reader classes (.rd-*) for the reading room.

   Typography: this screen is for reading. Body text keeps a 60-70 character measure (max-width in ch),
   a line height of 1.65-1.75 and Inter; Cormorant (--font-display) is for titles and years only.
   ========================================================================== */

.museum { display: grid; gap: var(--space-6); min-width: 0; container: museum / inline-size; }

/* ── Header and tabs ── */
.museum-head { max-width: 46rem; }
.museum-head .t-eyebrow { margin-bottom: var(--space-2); letter-spacing: 0.18em; }
.museum-title { font-size: var(--text-display); line-height: 1; letter-spacing: -0.02em; }
.museum-title:focus { outline: none; }
.museum-sub { margin-top: var(--space-3); max-width: 58ch; line-height: 1.55; text-wrap: pretty; }

.museum-tabs { margin-top: var(--space-2); }
/* The tablist (`.tabs`) scrolls on its own axis, which clips a ring drawn outside the tab: the ring is drawn inside instead (the variable pattern of
   styles.css; the keyboard probe of scripts/e2e/shell.js found it clipped). */
.museum-tab { --focus-ring-offset: -3px; display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.museum-tab .ui-icon { color: var(--color-text-muted); }
.museum-tab[aria-selected="true"] .ui-icon { color: var(--color-gold); }
@media (max-width: 599px) {
  /* Four equal tabs, icon over label, so none of them hides behind a scroll. */
  /* minmax(min-content, 1fr): a column is never narrower than its longest word ("Curiosidades"), it only shares out what is left. */
  .museum-tabs { display: grid; grid-template-columns: repeat(4, minmax(min-content, 1fr)); overflow: visible; }
  /* `.museum-tabs.tabs > .museum-tab` (three classes) on purpose: the shared `.tabs [role="tab"]` rule keeps 16px of side padding at equal
     specificity, which left 57px for "Escuela de ajedrez" (three lines touching the underline, QA VIS-021). */
  .museum-tabs.tabs > .museum-tab {
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    min-height: 64px;
    padding: var(--space-2) 2px var(--space-3);
    white-space: normal;
  }
  .museum-tab-label { font-size: var(--text-xs); line-height: 1.15; text-align: center; text-wrap: balance; }
  .museum-tabs [role="tab"]::after { inset: auto var(--space-2) -1px; }
}
/* Too narrow for four columns (a 320px phone with the text at 130%: "Curiosidades" ran into its neighbours): two rows of two.
   The query is in rem, so it follows the text size. */
@container museum (max-width: 18.5rem) {
  .museum-tabs.tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.museum-panel { display: grid; gap: var(--space-5); padding-top: var(--space-4); min-width: 0; }
.museum-panel:focus-visible { outline-offset: 4px; border-radius: var(--radius-lg); }
.museum-panel-head { display: grid; gap: var(--space-2); }
.museum-h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.museum-lead { max-width: 64ch; margin: 0; color: var(--color-text-muted); font-size: var(--text-md); line-height: 1.65; text-wrap: pretty; }
.museum-unavailable {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-4);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
}
.museum-unavailable .ui-icon { flex: none; color: var(--color-gold); }

/* ── Shared: search, pills, counts ── */
.museum-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); }
.museum-field-search { flex: 1 1 18rem; min-width: 0; }
.museum-search { position: relative; display: flex; align-items: center; }
.museum-search > .ui-icon-search { position: absolute; left: 14px; color: var(--color-text-muted); pointer-events: none; }
.museum-search-input { padding-left: 42px; padding-right: 46px; }
.museum-search-input::-webkit-search-cancel-button { display: none; }
.museum-search-clear {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: var(--hit);
  height: var(--hit);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.museum-search-clear:hover { color: var(--color-text); }
.museum-surprise-btn { flex: 0 0 auto; }

.museum-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.museum-pill { min-height: 36px; padding: 0 var(--space-3); }
.museum-pill-count { color: var(--color-text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.museum-pill[aria-pressed="true"] .museum-pill-count { color: var(--color-gold); }
.museum-count { margin: 0; color: var(--color-text-muted); font-size: var(--text-base); font-variant-numeric: lining-nums; }
.museum-empty { display: grid; }

.museum-source { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.55; overflow-wrap: anywhere; }
.museum-source-label { color: var(--color-gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

/* ── Timeline ── */
.museum-timeline-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); min-width: 0; }
.museum-timeline-side { display: grid; gap: var(--space-4); min-width: 0; align-content: start; }
.museum-side-title { margin: 0; color: var(--color-gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

/* Eras: a row of chips you can scroll on a phone, a list down the side on a wide screen. */
.museum-era-nav {
  display: flex;
  gap: var(--space-2);
  margin-inline: calc(var(--page-gutter) * -1);
  padding: 2px var(--page-gutter) var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--page-gutter);
}
.museum-era-nav::-webkit-scrollbar { display: none; }
.museum-era-link {
  --focus-ring-offset: -3px;
  display: grid;
  flex: none;
  gap: 1px;
  min-height: var(--hit);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
}
.museum-era-link:hover { background: var(--color-surface-2); color: var(--color-text); }
.museum-era-link-name { font-size: var(--text-sm); font-weight: 650; line-height: 1.25; }
.museum-era-link-range { font-size: var(--text-xs); font-variant-numeric: lining-nums; }
.museum-era-link[aria-current="location"] {
  border-color: var(--color-gold-dim);
  background: var(--color-gold-bg);
  color: var(--color-gold);
}

.museum-year-form { display: grid; gap: var(--space-2); }
.museum-year-row { display: flex; gap: var(--space-2); }
.museum-year-input { --focus-ring-offset: -3px; flex: 1 1 auto; min-width: 0; max-width: 9rem; font-variant-numeric: tabular-nums lining-nums; }
.museum-year-status { min-height: 1.4em; margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.4; }
.museum-year-status.is-error { color: var(--color-blunder); font-weight: 600; }
.museum-year-status:empty { display: none; }

.museum-timeline {
  --year-w: 0px;
  --rail-w: 1.75rem;
  position: relative;
  display: grid;
  gap: var(--space-8);
  min-width: 0;
}
/* The rail: one line through every era and milestone; nodes and era marks sit on it. */
.museum-timeline::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 0;
  left: calc(var(--year-w) + var(--rail-w) / 2 - 1px);
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--color-gold-dim), var(--color-hairline-strong) 14%, var(--color-hairline-strong));
}
.museum-era { display: grid; gap: var(--space-4); min-width: 0; scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.museum-era-head {
  position: relative;
  display: grid;
  gap: 2px;
  padding-left: calc(var(--year-w) + var(--rail-w));
}
.museum-era-mark {
  position: absolute;
  top: 7px;
  left: calc(var(--year-w) + var(--rail-w) / 2 - 8px);
  width: 16px;
  height: 16px;
  border: 2px solid var(--gold-500);
  border-radius: 4px;
  background: var(--color-gold);
  box-shadow: 0 0 0 5px var(--color-bg);
  transform: rotate(45deg);
}
.museum-era-range { margin: 0; color: var(--color-gold); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-variant-numeric: lining-nums; }
.museum-era-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.museum-era-title:focus { outline: none; }
.museum-era-count { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.museum-events { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.museum-event {
  position: relative;
  display: grid;
  gap: var(--space-2);
  padding-left: calc(var(--year-w) + var(--rail-w));
  min-width: 0;
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}
.museum-node {
  position: absolute;
  top: 9px;
  left: calc(var(--year-w) + var(--rail-w) / 2 - 6px);
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-gold);
  border-radius: 50%;
  background: var(--color-bg);
  box-shadow: 0 0 0 4px var(--color-bg);
}
.museum-year {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 650;
  line-height: 1;
  color: var(--color-gold);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.museum-event-card { --card-pad: var(--space-5); display: grid; gap: var(--space-2); }
.museum-event-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 650;
  line-height: 1.12;
  text-wrap: balance;
}
.museum-event-title:focus { outline: none; }
.museum-event-text { max-width: 62ch; margin: 0; font-size: var(--text-md); line-height: 1.7; text-wrap: pretty; }
.museum-more { justify-self: start; margin-left: calc(var(--space-3) * -1); color: var(--color-gold); }
.museum-more .ui-icon { transition: transform var(--dur-2) var(--ease-out); }
.museum-more[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }
.museum-more-panel { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-hairline); }
.museum-related-title { margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.museum-related-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.museum-related-list li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-3); align-items: baseline; }
.museum-related-year { color: var(--color-gold); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 650; font-variant-numeric: lining-nums; }
.museum-related-text { max-width: 60ch; font-size: var(--text-base); line-height: 1.65; text-wrap: pretty; }
.museum-event.is-target .museum-event-card { animation: museum-target 1.8s var(--ease-out) both; }
@keyframes museum-target {
  0% { border-color: var(--color-gold); box-shadow: var(--shadow-1), 0 0 0 4px rgba(221, 167, 52, 0.35); }
  100% { border-color: var(--color-hairline); box-shadow: var(--shadow-1), 0 0 0 0 rgba(221, 167, 52, 0); }
}

@media (min-width: 720px) {
  .museum-timeline { --year-w: 7.5rem; --rail-w: 2.75rem; }
  .museum-event > .museum-event-year {
    position: absolute;
    top: var(--space-4);
    left: 0;
    width: calc(var(--year-w) - var(--space-2));
    text-align: right;
  }
  .museum-node { top: calc(var(--space-4) + 9px); }
}
@media (min-width: 960px) {
  .museum-timeline-layout { grid-template-columns: 15.5rem minmax(0, 1fr); gap: var(--space-9); }
  /* The side column scrolls (overflow-y: auto), which clips an outside ring on both axes: everything focusable in it draws its ring inside. */
  .museum-timeline-side :is(a, button, input) { --focus-ring-offset: -3px; }
  .museum-timeline-side { position: sticky; top: calc(var(--header-h) + var(--space-4)); max-height: calc(100vh - var(--header-h) - var(--space-7)); max-height: calc(100svh - var(--header-h) - var(--space-7)); overflow-y: auto; }
  .museum-era-nav { flex-direction: column; gap: 2px; margin-inline: 0; padding: 0; overflow: visible; }
  .museum-era-link { width: 100%; border-color: transparent; background: transparent; }
  .museum-era-link:hover { background: var(--color-surface-2); }
  .museum-era-link[aria-current="location"] { border-color: var(--color-gold-dim); background: var(--color-gold-bg); }
}

/* ── Curiosities ── */
.museum-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.museum-fact-item { display: flex; min-width: 0; }
.museum-fact-item > .card { flex: 1 1 auto; }
.museum-fact { --card-pad: var(--space-5); display: grid; gap: var(--space-3); align-content: start; }
.museum-fact-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.museum-fact-year { color: var(--color-text-muted); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 650; font-variant-numeric: lining-nums; }
.museum-fact-text { max-width: 62ch; margin: 0; font-size: var(--text-md); line-height: 1.7; text-wrap: pretty; }
.museum-fact-text:focus { outline: none; }
.museum-more-row { display: flex; justify-content: center; }

.museum-surprise-inner { --card-pad: clamp(20px, 3vw, 32px); display: grid; gap: var(--space-4); animation: ui-rise var(--dur-3) var(--ease-out) both; }
.museum-surprise-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.museum-surprise-head .t-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); }
/* The eyebrow gives way (it may take two lines), the Close button never breaks inside its word ("Cerra / r" at 390px). */
.museum-surprise-head .btn { flex: 0 0 auto; white-space: nowrap; }
.museum-fact.is-featured { display: grid; gap: var(--space-3); }
.museum-fact.is-featured .museum-fact-text {
  max-width: 58ch;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  font-weight: 550;
  line-height: 1.5;
}

/* ── Chess school ── */
.museum-concepts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.museum-concept-item { display: flex; min-width: 0; }
.museum-concept-item > .card { flex: 1 1 auto; }
.museum-concept { --card-pad: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.museum-concept-board {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-hairline);
  background:
    radial-gradient(260px 150px at 50% 0, rgba(221, 167, 52, 0.09), transparent 70%),
    var(--color-surface-2);
}
.museum-concept-board .mini-board { width: min(100%, 280px); height: auto; box-shadow: var(--shadow-2); }
.museum-concept-move {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 650;
  font-variant-numeric: lining-nums;
}
.museum-concept-move .ui-icon { color: var(--color-perfect); }
.museum-concept-body { display: grid; flex: 1 1 auto; gap: var(--space-3); align-content: start; padding: var(--space-5); }
.museum-concept-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 650;
  line-height: 1.05;
  text-wrap: balance;
}
.museum-concept-text { max-width: 62ch; margin: 0; font-size: var(--text-md); line-height: 1.7; text-wrap: pretty; }
.museum-concept-tags { display: grid; gap: var(--space-2); margin-top: var(--space-1); }
.museum-concept-tags-label { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.museum-pill-tag { min-height: 32px; font-size: var(--text-sm); }

/* ── Reading room ── */
.museum-room { display: grid; gap: var(--space-5); width: 100%; max-width: 52rem; margin-inline: auto; }
.museum-room-head { display: grid; gap: var(--space-2); justify-items: center; text-align: center; }
.museum-room .museum-pills { justify-content: center; }
.museum-room-stage {
  --card-pad: clamp(24px, 6vw, 56px);
  display: grid;
  gap: var(--space-4);
  align-content: center;
  min-height: 22rem;
  border-radius: var(--radius-3xl);
  background-color: var(--color-surface);
  background-image:
    radial-gradient(640px 280px at 50% 0, rgba(221, 167, 52, 0.11), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0) 46%);
  box-shadow: var(--shadow-2);
}
.museum-room .rd-carousel { gap: var(--space-5); }
.museum-room .rd-card { min-height: 12rem; gap: var(--space-4); align-content: center; }
.museum-room .rd-meta { gap: var(--space-3); }
.museum-room .rd-year { font-size: var(--text-2xl); }
.museum-room .rd-text {
  max-width: 60ch;
  font-size: clamp(1.2rem, 1.02rem + 0.7vw, 1.5rem);
  line-height: 1.75;
  text-wrap: pretty;
}
.museum-room .rd-controls { justify-content: center; gap: var(--space-3); }
.museum-room .rd-btn { width: 52px; min-width: 52px; height: 52px; min-height: 52px; }
.museum-room-counter { min-height: 1.4em; margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; font-variant-numeric: tabular-nums lining-nums; }
.museum-room-hint { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; }
.museum-room-hint .ui-icon { flex: none; color: var(--color-gold); }
.museum-room-host { min-width: 0; }

@media (max-width: 719px) {
  .museum { gap: var(--space-5); }
  .museum-room-stage { min-height: 20rem; }
  .museum-timeline { gap: var(--space-7); }
  .museum-event-card { --card-pad: var(--space-4); }
  .museum-related-list li { grid-template-columns: 3.75rem minmax(0, 1fr); gap: var(--space-2); }
}

/* ── Reduced motion (the system rule stops animations and transitions) and contrast ── */
html[data-motion="reduce"] .museum-event.is-target .museum-event-card,
html[data-motion="reduce"] .museum-surprise-inner { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #screen-museum:not(.hidden),
  .museum-event.is-target .museum-event-card,
  .museum-surprise-inner { animation: none; }
}
:root[data-contrast="high"] .museum-era-link { border-color: var(--color-hairline-strong); }