/* Boostili — download dialogs (language chooser + gated sample form).
 *
 * Its own file rather than an addition to boostili-cobalt.css: that stylesheet
 * is served `immutable` for a year, and a new filename is the only way to be
 * sure a returning visitor gets these rules.
 *
 * Logical properties throughout — the Arabic mirror is dir="rtl" and must not
 * need a second stylesheet.
 */

/* Column specification list ("Ce qu'il y a dans le fichier").
   Its own class rather than borrowing .segments: that list is name | bar |
   figure, and its last cell is sized for a number. Feeding it a sentence pushed
   the cell wider than the viewport on a 320 px screen. */
.colspec {
  display: grid;
  gap: 0;
  margin: var(--space-md) 0 0;
  padding: 0;
  border-block-start: var(--rule-thin) solid var(--c-rule);
  list-style: none;
}

.colspec li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xs);
  padding-block: var(--space-2xs);
  border-block-end: var(--rule-thin) solid var(--c-rule);
}

.colspec dfn,
.colspec .colspec-name {
  color: var(--c-ink);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-style: normal;
  letter-spacing: var(--track-mono);
}

.colspec .colspec-note {
  min-inline-size: 0;
  color: var(--c-ink-2);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

@media (min-width: 40rem) {
  .colspec li {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: baseline;
  }
}

.bdl {
  inline-size: min(30rem, calc(100vw - 2 * var(--space-sm)));
  max-block-size: calc(100dvh - 2 * var(--space-sm));
  padding: var(--space-lg);
  border: var(--rule-thin) solid var(--c-rule-2);
  border-radius: 0;
  background: var(--c-paper);
  color: var(--c-ink-2);
  overflow-wrap: anywhere;
}

.bdl::backdrop {
  background: color-mix(in oklab, var(--c-graphite) 62%, transparent);
}

.bdl h2 {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.2;
  text-wrap: balance;
}

.bdl p {
  margin: var(--space-2xs) 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.bdl-note {
  margin-top: var(--space-sm);
  padding-inline-start: var(--space-xs);
  border-inline-start: 2px solid var(--c-rule-2);
  color: var(--c-ink-3);
}

/* Close control — a native method="dialog" form, floated to the inline end. */
.bdl-x {
  float: inline-end;
  margin-inline-start: var(--space-sm);
}

.bdl-x button {
  min-inline-size: 2.25rem;
  min-block-size: 2.25rem;
  padding: 0;
  border: var(--rule-thin) solid transparent;
  background: none;
  color: var(--c-ink-3);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
}

.bdl-x button:hover {
  border-color: var(--c-rule-2);
  color: var(--c-ink);
}

/* Language choice. Column layout so a long label never wraps to two lines
   inside a button — a two-line clickable target reads as broken. */
.bdl-langs {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}

.bdl-langs .btn {
  justify-content: center;
  inline-size: 100%;
  white-space: nowrap;
}

.bdl-form {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

.bdl-form label {
  display: grid;
  gap: var(--space-3xs);
  color: var(--c-ink);
  font-size: var(--text-sm);
  font-weight: 500;
}

.bdl-form input {
  min-block-size: 2.75rem;
  padding: var(--space-2xs) var(--space-xs);
  border: var(--rule-thin) solid var(--c-rule-2);
  background: var(--c-paper);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--text-md); /* 16px+ stops iOS zooming the viewport on focus */
}

.bdl-form input:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 1px;
}

.bdl-form button[type='submit'] {
  justify-content: center;
  inline-size: 100%;
}

.bdl-status {
  min-block-size: 1.25rem;
  margin: 0;
  color: var(--c-ink-3);
  font-size: var(--text-sm);
}

.bdl-status[data-state='ok'] {
  color: var(--c-accent);
}

.bdl-status[data-state='error'] {
  color: var(--c-warn);
}

@media (min-width: 30rem) {
  .bdl-langs {
    grid-template-columns: 1fr 1fr;
  }
}

/* The dialog is information, not spectacle: one short fade, and nothing at all
   for anyone who has asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .bdl[open] {
    animation: bdl-in var(--dur-short, 220ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  }

  @keyframes bdl-in {
    from {
      opacity: 0;
      transform: translateY(0.5rem);
    }
  }
}