/* The Liquid Fleet, les Articles du navire (30/09).
   Tout ce qui est propre à /articles vit ici : style.css reste la feuille commune
   (jetons, en-tête, boutons, la carte « Crew only » du pont de /weather réutilisée
   telle quelle pour les deux portes). Une page de texte : une colonne de lecture,
   des titres, des tableaux qui défilent dans leur cadre sur mobile. */

.art-body { margin: 28px 0 0 }
.art-body [data-state][hidden] { display: none }

/* ---------------------------------------------------------------- attente */

/* Le squelette réserve la place du texte : rien ne saute quand il arrive. */
.art-skel {
  height: 14px; width: 92%; margin: 0 0 12px; border-radius: 7px;
  background: linear-gradient(110deg, var(--surface-2) 30%, var(--line) 50%, var(--surface-2) 70%);
  background-size: 300% 100%; animation: card-shimmer 1.4s linear infinite;
}
.art-skel-title { height: 26px; width: 46%; margin-bottom: 18px }
.art-skel-short { width: 58% }

/* ---------------------------------------------------------------- les portes */

/* La carte du pont, posée au centre de la colonne : la même que sur /weather, pour que
   « Crew only » se reconnaisse d'une page à l'autre. */
.art-gate { max-width: 520px; margin: 8px auto 0 }

/* ---------------------------------------------------------------- brouillon */

.art-draft {
  margin: 0 0 18px; padding: 12px 16px; border-radius: var(--r-sm);
  background: var(--gold-dim); border: 1px solid rgba(217,169,76,.18);
  color: var(--ink-mute); font-size: 13px; line-height: 1.6;
}
.art-draft strong { color: var(--gold); font-weight: 600 }
.art-draft[hidden] { display: none }

/* ---------------------------------------------------------------- sommaire */

.art-toc {
  margin: 0 0 26px; padding: 14px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
}
.art-toc[hidden] { display: none }
.art-toc-label {
  margin: 0 0 8px; font: 500 12px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint);
}
.art-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px }
.art-toc a { color: var(--ink-mute); text-decoration: none; font-size: 13.5px; border-bottom: 1px solid var(--line) }
.art-toc a:hover { color: var(--gold); border-color: rgba(217,169,76,.5) }

/* ---------------------------------------------------------------- le texte */

/* Pleine largeur, comme partout sur le site (règle du 24/09, f7f24fb : les « colonnes de
   lecture » en ch ont été retirées de style.css ; ne pas les réintroduire ici, 30/09). */
.art-content { color: var(--ink-mute); font-size: 15px; line-height: 1.7 }
.art-content h2 {
  margin: 44px 0 10px; padding-top: 26px; border-top: 1px solid var(--line);
  font-size: 20px; font-weight: 650; letter-spacing: -.02em; color: var(--ink);
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  scroll-margin-top: 20px;
}
.art-content h2:first-child { margin-top: 0; padding-top: 0; border-top: 0 }
.art-content h3 { margin: 24px 0 6px; font-size: 15.5px; font-weight: 600; color: var(--gold) }
.art-content p { margin: 0 0 14px }
.art-content strong { color: var(--ink); font-weight: 600 }
.art-content em { font-style: normal; color: var(--ink) }
.art-content a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line) }
.art-content a:hover { color: var(--gold); border-color: rgba(217,169,76,.5) }
.art-content ul, .art-content ol { margin: 0 0 16px; padding-left: 22px }
.art-content li { margin: 0 0 7px }
.art-content li strong { display: inline }
.art-content code { font-family: var(--mono); font-size: 13px; color: var(--ink) }

/* Les étiquettes Live / Planned reprennent .tag de style.css ; en titre elles restent
   alignées sur la ligne de base du texte, jamais plus hautes que lui. */
.art-content h2 .tag, .art-content h3 .tag { position: relative; top: -1px }
.art-content h3 .tag { margin-left: 8px }

/* Un encadré : ce qui existe aujourd'hui, avant tout le reste. */
.art-note {
  margin: 0 0 18px; padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
}
.art-note p:last-child { margin-bottom: 0 }
.art-note .tag { margin-right: 4px }

/* ---------------------------------------------------------------- tableaux */

/* Sur mobile, le tableau défile DANS son cadre, jamais la page (comme le calendrier de
   /weather). */
.art-scroll {
  margin: 4px 0 20px; overflow-x: auto; overscroll-behavior-x: contain;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.art-content table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.55 }
.art-content th {
  text-align: left; padding: 10px 14px; background: var(--bg-deep); color: var(--ink-mute);
  font: 500 11px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.art-content td { padding: 10px 14px; border-top: 1px solid var(--line-soft); vertical-align: top; color: var(--ink-mute); min-width: 12ch }
.art-content td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap }
.art-content td .tag { white-space: nowrap }
/* 30/09 : les médailles des rangs et des hauts faits (le sprite /fleet-icons.svg du menu), à
   24 px, la taille sous laquelle un haut fait ne se dessine jamais ; centrées sur la ligne
   du nom. Le fragment porte aussi width et height : sans cette feuille, jamais 300 x 150. */
.art-content .art-ic { display: inline-block; width: 24px; height: 24px; vertical-align: middle; margin: -3px 6px 0 0 }
.art-content tr.art-row-live td:first-child { color: var(--ink) }

/* ---------------------------------------------------------------- pied */

.art-meta { margin: 30px 0 0; color: var(--ink-faint); font-size: 12.5px }
.art-meta[hidden] { display: none }

@media (max-width: 620px) {
  .art-content { font-size: 14.5px }
  .art-content h2 { margin-top: 36px; padding-top: 22px; font-size: 18px }
  .art-content td:first-child { white-space: normal }
  /* Trois ou quatre colonnes sur un téléphone : le tableau garde des colonnes lisibles
     et défile dans son cadre, plutôt que d'écraser chaque cellule sur un mot par ligne. */
  .art-wide table { min-width: 600px }
  .art-toc ul { flex-direction: column; gap: 8px }
}
/* 30/09 : sur un téléphone, la première colonne passe à la ligne et la médaille restait
   seule sur la sienne (« [médaille] / Mustered »). Retrait suspendu : la médaille dans la
   marge gauche de la cellule, le nom s'enroule à côté. Seulement là où :has() existe ;
   ailleurs, la cellule garde la mise en page d'avant, jamais une médaille sur le texte. */
@supports selector(:has(*)) {
  @media (max-width: 620px) {
    .art-content td:has(> .art-ic:first-child) { position: relative; padding-left: 44px }
    .art-content td > .art-ic:first-child { position: absolute; left: 14px; top: 8px; margin: 0 }
  }
}

@media (prefers-reduced-motion: reduce) {
  .art-skel { animation: none }
}