/*
 * La feuille produit de Tibius Maps.
 *
 * Elle ne redéclare AUCUNE valeur de jeton : chaque couleur, chaque espace et
 * chaque rayon vient de --tds-*, servi par l'artefact canonique du Design
 * System. Un test de la suite vérifie qu'aucune couleur littérale ne s'y
 * glisse — sauf les deux qui sont des données de carte et non de l'interface,
 * et qui sont nommées ci-dessous.
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--tds-surface-canvas);
    color: var(--tds-text-primary);
    font-family: var(--tds-font-family-sans);
    font-size: var(--tds-font-size-body);
    line-height: var(--tds-line-height-body);
}

/* Hors carte, le pied commun reste au bas de la fenêtre d'une page courte. */
body:not([data-layout="app"]) {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

a { color: var(--tds-brand-link); }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/*
 * ── EN-TÊTE, ZONE COMPTE, PIED : LA STRUCTURE COMMUNE ──────────────────────
 *
 * Ils ne sont plus écrits ici. Les pages hors carte rendent `tds-header`,
 * `tds-account`, `tds-admin-bar` et `tds-footer` (feuille
 * `tibius-structure.css`, vendorisée depuis le Design System) ; la carte garde
 * son en-tête flottant, dans `app.css`, et y pose la même zone compte.
 */

/* ── Page ────────────────────────────────────────────────────────────── */

.page-header { margin-block: var(--tds-space-8) var(--tds-space-6); }

.page-header h1 {
    margin: 0 0 var(--tds-space-3);
    font-size: var(--tds-font-size-heading1);
    line-height: var(--tds-line-height-heading);
    letter-spacing: var(--tds-letter-spacing-tight);
}

.lede {
    margin: 0;
    max-width: var(--tds-content-width-reading);
    color: var(--tds-text-secondary);
    font-size: var(--tds-font-size-body-large);
}

.question {
    margin-block: var(--tds-space-4);
    color: var(--tds-text-secondary);
}

.note {
    color: var(--tds-text-muted);
    font-size: var(--tds-font-size-body-small);
    max-width: var(--tds-content-width-reading);
}

.mono { font-family: var(--tds-font-family-mono); font-size: var(--tds-font-size-body-small); }

/* ── Chips ───────────────────────────────────────────────────────────── */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tds-space-2);
    margin-block: var(--tds-space-4);
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--tds-touch-target-web);
    padding-inline: var(--tds-space-4);
    border: var(--tds-border-width-default) solid var(--tds-border-default);
    border-radius: var(--tds-radius-role-pill);
    background: var(--tds-surface-default);
    color: var(--tds-text-primary);
    text-decoration: none;
    font-size: var(--tds-font-size-body-small);
    font-weight: var(--tds-font-weight-medium);
}

.chip--on {
    background: var(--tds-brand-primary);
    border-color: var(--tds-brand-primary);
    color: var(--tds-brand-on-primary);
}

/* ── Carte ───────────────────────────────────────────────────────────── */

.map {
    margin: 0 0 var(--tds-space-6);
    border: var(--tds-border-width-default) solid var(--tds-border-default);
    border-radius: var(--tds-radius-role-surface);
    background: var(--tds-surface-sunken);
    overflow: hidden;
}

.map__canvas {
    /* Une carte a besoin d'une hauteur, et elle doit rester utilisable sur un
       téléphone tenu à la main : 60 vh sur mobile, une hauteur fixe ensuite. */
    height: 60vh;
    min-height: 20rem;
    width: 100%;
}

@media (min-width: 48rem) {
    .map__canvas { height: 30rem; }
}

.map__attribution {
    margin: 0;
    padding: var(--tds-space-1) var(--tds-space-3);
    border-top: var(--tds-border-width-default) solid var(--tds-border-default);
    background: var(--tds-surface-default);
    color: var(--tds-text-secondary);
    font-size: var(--tds-font-size-caption);
}

.map__attribution a { color: inherit; }

.map__caption {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tds-space-2) var(--tds-space-5);
    align-items: baseline;
    padding: var(--tds-space-3);
    border-top: var(--tds-border-width-default) solid var(--tds-border-default);
    background: var(--tds-surface-default);
    color: var(--tds-text-secondary);
    font-size: var(--tds-font-size-body-small);
}

.map__readout { display: flex; flex-wrap: wrap; gap: var(--tds-space-4); }
.map__readout b { font-weight: var(--tds-font-weight-semibold); }
.map__note { color: var(--tds-text-muted); }
.map__fallback { margin: var(--tds-space-3); }

/*
 * Le marqueur.
 *
 * C'est un <button> : il prend le focus clavier, il s'annonce, et sa cible
 * respecte le minimum tactile du thème. Sa couleur par défaut est un jeton ;
 * quand un produit en impose une, elle arrive par --tmaps-marker-colour et
 * c'est une DONNÉE de produit, pas une couleur d'interface.
 */
.tmaps-marker {
    --tmaps-marker-colour: var(--tds-brand-primary);
    display: grid;
    place-items: center;
    width: var(--tds-touch-target-web);
    height: var(--tds-touch-target-web);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.tmaps-marker__dot {
    width: var(--tds-icon-size-md);
    height: var(--tds-icon-size-md);
    border-radius: var(--tds-radius-role-pill);
    background: var(--tmaps-marker-colour);
    /* La gaine claire : une couleur de ligne presque blanche disparaîtrait
       sinon sur un fond clair. C'est le procédé des cartes imprimées. */
    box-shadow: 0 0 0 3px var(--tds-surface-default), var(--tds-elevation-low);
}

.tmaps-marker:focus-visible {
    outline: var(--tds-focus-width) solid var(--tds-border-focus);
    outline-offset: var(--tds-focus-offset);
    border-radius: var(--tds-radius-role-pill);
}

/* ── Panneaux, tableaux clé/valeur, diagnostic ───────────────────────── */

.panel {
    margin-block: var(--tds-space-6);
    padding: var(--tds-space-5);
    border: var(--tds-border-width-default) solid var(--tds-border-default);
    border-radius: var(--tds-radius-role-surface);
    background: var(--tds-surface-default);
}

.panel h2 {
    margin: 0 0 var(--tds-space-4);
    font-size: var(--tds-font-size-heading3);
    line-height: var(--tds-line-height-heading);
}

.panel h3 {
    margin: var(--tds-space-5) 0 var(--tds-space-2);
    font-size: var(--tds-font-size-heading4);
}

.code {
    margin: var(--tds-space-3) 0 0;
    padding: var(--tds-space-3);
    border-radius: var(--tds-radius-role-control);
    background: var(--tds-surface-sunken);
    color: var(--tds-text-secondary);
    font-family: var(--tds-font-family-mono);
    font-size: var(--tds-font-size-caption);
    line-height: var(--tds-line-height-relaxed);
    overflow-x: auto;
}

.verdict {
    margin-block: var(--tds-space-5);
    padding: var(--tds-space-4);
    border-left: var(--tds-border-width-accent) solid var(--tds-status-info);
    border-radius: var(--tds-radius-role-control);
    background: var(--tds-status-info-subtle);
    font-weight: var(--tds-font-weight-semibold);
}

.verdict--ok { border-left-color: var(--tds-status-success); background: var(--tds-status-success-subtle); }
.verdict--ko { border-left-color: var(--tds-status-danger); background: var(--tds-status-danger-subtle); }

.check { padding-block: var(--tds-space-3); border-top: var(--tds-border-width-default) solid var(--tds-border-default); }
.check:first-of-type { border-top: 0; }
.check h3 { margin-top: 0; display: flex; align-items: center; gap: var(--tds-space-3); }
.check p { margin: 0; color: var(--tds-text-secondary); }

details > summary {
    cursor: pointer;
    min-height: var(--tds-touch-target-web);
    display: flex;
    align-items: center;
    font-weight: var(--tds-font-weight-medium);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/*
| Le laboratoire 0.2.0 — les tableaux de qualification
|
| Trois besoins nouveaux : montrer une matrice de licences, marquer une
| position juridique d'un coup d'œil, et lister des refus. Les couleurs
| viennent toutes du Design System : aucune n'est écrite ici, pour que le
| mode sombre et le prochain jeu de jetons continuent de fonctionner.
*/

/*
| Une position juridique se lit sans lire.
|
| `unknown` est délibérément traité comme un avertissement, et non comme une
| valeur neutre : c'est tout l'objet du modèle. Une condition non établie doit
| se voir autant qu'une interdiction, parce qu'elle interdit autant.
*/
.stance {
    white-space: nowrap;
    font-weight: 600;
}

.stance--allowed { color: var(--tds-status-success); }
.stance--conditional { color: var(--tds-status-warning); }
.stance--unknown { color: var(--tds-status-warning); }
.stance--forbidden { color: var(--tds-status-danger); }

.refusals {
    margin-block: var(--tds-space-3);
    padding-inline-start: var(--tds-space-5);
    display: grid;
    gap: var(--tds-space-2);
}

.refusals .note {
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────────
   Couches vectorielles — 0.3.0

   Trois éléments, et aucun n'existait avant que le socle sache dessiner des
   objets : la légende qui dit ce qu'une couleur veut dire, le compteur qui
   dit ce qu'une couche a rapporté, et l'infobulle qui montre un objet.

   Aucune couleur littérale ici non plus. La pastille de légende lit une
   propriété personnalisée que le runtime écrit depuis le jeton nommé par le
   registre — le gabarit ne peut pas l'écrire lui-même, la CSP engendrée
   n'autorisant aucun style en ligne.
   ───────────────────────────────────────────────────────────────────────── */

.legend {
    list-style: none;
    margin: 0 0 var(--tds-space-4) 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--tds-space-2) var(--tds-space-4);
}

.legend li {
    display: flex;
    align-items: center;
    gap: var(--tds-space-2);
    font-size: var(--tds-font-size-body-small);
}

.legend__swatch {
    inline-size: 1.5rem;
    block-size: 0.4rem;
    border-radius: var(--tds-radius-full);
    /* `transparent` et non une couleur de secours plausible : un jeton que le
       runtime n'a pas résolu doit se voir, pas se déguiser. */
    background: var(--legend-colour, transparent);
    border: var(--tds-border-width-default) solid var(--tds-border-default);
    flex: none;
}

[data-tmaps-count] {
    font-variant-numeric: tabular-nums;
}

[data-tmaps-count][data-tmaps-count-state='failed'] {
    color: var(--tds-status-danger);
    font-weight: var(--tds-font-weight-semibold);
}

[data-tmaps-count][data-tmaps-count-state='partial'] {
    color: var(--tds-status-warning);
}

.tmaps-inspect {
    font-family: var(--tds-font-family-sans);
    font-size: var(--tds-font-size-body-small);
    color: var(--tds-text-primary);
}

.tmaps-inspect__title {
    margin: 0 0 var(--tds-space-2) 0;
    font-weight: var(--tds-font-weight-semibold);
}

.tmaps-inspect__list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--tds-space-1) var(--tds-space-3);
    margin: 0;
}

.tmaps-inspect__list dt {
    color: var(--tds-text-muted);
}

.tmaps-inspect__list dd {
    margin: 0;
}

.tmaps-inspect__id {
    font-family: var(--tds-font-family-mono);
    font-size: var(--tds-font-size-caption);
    overflow-wrap: anywhere;
}