/**
 * settings-destination.css — Tab[6] Indstillinger player-facing settings surface.
 *
 * Plan: docs/plans/2026-05-25-player-portal-fase2-pickup.md §"Feature 1".
 * Module: public/js/settings-destination.js (window.SettingsDestination).
 *
 * BEM: .hd-settings__* (destination root + sections + controls).
 *
 * Token-only — no hardcoded colors, font-sizes, or motion values.
 * Light-theme handled automatically via design-tokens.css [data-theme=light].
 *
 * @layer components — placed after base + tokens, before utilities + overrides.
 */

@layer components {

  :root {
    --hd-dice-skin-inspired: var(--hd-dasham-owner-blue-deep);
    --hd-dice-skin-fire: var(--hd-dasham-owner-red);
    --hd-dice-skin-ice: var(--hd-dasham-owner-blue);
    --hd-dice-skin-water: var(--hd-dasham-owner-blue);
    --hd-dice-skin-radiant: var(--hd-parchment-rule);
    --hd-dice-skin-necrotic: var(--hd-dasham-owner-blue-soft);
    --hd-dice-skin-dragon: var(--hd-dasham-owner-red);
    --hd-dice-skin-wood: var(--hd-ink);
    --hd-dice-skin-bloodmoon: var(--hd-dasham-owner-red-deep);
  }

  /* ===== Root container ===== */

  .hd-settings {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-4);
    padding: var(--hd-space-4);
    /* Transparent root: the .hd-settings__section cards carry the paper surface,
     * so let the mount parchment show behind them instead of a flat opaque slab
     * (mirrors .hd-butik / .hd-ruler). */
    background: transparent;
    color: var(--hd-text-primary);
    font-family: var(--hd-font-ui);
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    container-type: inline-size;
    container-name: hd-settings;
  }

  .hd-settings__header {
    display: flex;
    align-items: baseline;
    gap: var(--hd-space-2);
  }

  .hd-settings__title {
    margin: 0;
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h2);
    color: var(--hd-text-primary);
  }

  /* ===== Sections ===== */

  .hd-settings__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--hd-space-4);
    align-items: start;
    min-width: 0;
  }

  .hd-settings__section {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
    padding: var(--hd-space-3);
    background: var(--hd-surface-1);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-md);
    min-width: 0;
  }

  .hd-settings__section-title {
    margin: 0;
    font-size: var(--hd-text-ui);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hd-text-secondary);
  }

  .hd-settings__section-body {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
    min-width: 0;
  }

  @container hd-settings (min-width: 720px) {
    .hd-settings__content {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  /* ===== Theme option group (3 mutually-exclusive buttons) ===== */

  .hd-settings__option-group {
    display: flex;
    gap: var(--hd-space-2);
    flex-wrap: wrap;
  }

  .hd-settings__theme-option {
    flex: 1 1 0;
    min-width: 5rem;
    min-height: 44px; /* WCAG 2.5.5 touch target */
    padding: var(--hd-space-2) var(--hd-space-3);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body);
    color: var(--hd-text-primary);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
    cursor: pointer;
    transition: background var(--hd-transition-fast), border-color var(--hd-transition-fast);
  }

  .hd-settings__theme-option:hover {
    border-color: var(--hd-border-strong);
  }

  .hd-settings__theme-option--active {
    background: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
    border-color: var(--hd-accent-primary);
  }

  .hd-settings__theme-option:focus-visible {
    outline: var(--hd-focus-ring);
    outline-offset: 2px;
  }

  .hd-settings__segmented {
    width: 100%;
  }

  .hd-settings__segmented .hd-segmented__item {
    flex: 1 1 0;
  }

  /* ===== Boolean toggle rows ===== */

  .hd-settings__toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hd-space-3);
    min-height: 44px; /* WCAG 2.5.5 touch target */
  }

  .hd-settings__toggle-label {
    font-size: var(--hd-text-body);
    color: var(--hd-text-primary);
  }

  .hd-settings__toggle {
    min-width: 4rem;
    min-height: 44px;
    padding: var(--hd-space-1) var(--hd-space-3);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hd-text-secondary);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-full);
    cursor: pointer;
    transition: background var(--hd-transition-fast), color var(--hd-transition-fast), border-color var(--hd-transition-fast);
  }

  .hd-settings__toggle--on {
    background: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
    border-color: var(--hd-accent-primary);
  }

  .hd-settings__toggle:focus-visible {
    outline: var(--hd-focus-ring);
    outline-offset: 2px;
  }

  /* ===== Version indicator (loaded-code vs live-server commit) ===== */

  .hd-settings__version {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-1);
    font-size: var(--hd-text-caption);
  }

  .hd-settings__version-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hd-space-2);
  }

  .hd-settings__version-label {
    color: var(--hd-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .hd-settings__version-value {
    font-family: var(--hd-font-mono);
    color: var(--hd-text-secondary);
    word-break: break-all;
    text-align: right;
  }

  .hd-settings__version-status {
    margin-top: var(--hd-space-1);
    font-size: var(--hd-text-caption);
    color: var(--hd-text-tertiary);
  }

  .hd-settings__version-status--fresh {
    color: var(--hd-accent-success);
  }

  .hd-settings__version-status--stale {
    color: var(--hd-accent-warning);
  }

  .hd-settings__version-status--unknown {
    color: var(--hd-text-tertiary);
  }

  .hd-settings__changelog-entries {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
    margin-top: var(--hd-space-2);
  }

  .hd-settings__changelog-preview,
  .hd-settings__changelog-history {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-1);
  }

  .hd-settings__changelog-preview-entry,
  .hd-settings__changelog-history-entry {
    color: var(--hd-text-secondary);
    line-height: var(--hd-leading-tight);
    overflow-wrap: anywhere;
  }

  .hd-settings__changelog-history {
    max-height: min(42vh, 22rem);
    overflow-y: auto;
    padding: var(--hd-space-2);
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm);
    background: var(--hd-surface-2);
  }

  .hd-settings__changelog-toggle {
    align-self: flex-start;
  }

  .hd-settings__changelog-empty {
    margin: 0;
    color: var(--hd-text-tertiary);
  }

  /* ===== App cache actions ===== */

  .hd-settings__cache-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-2);
  }

  .hd-settings__action-btn {
    min-height: 44px;
    padding: var(--hd-space-2) var(--hd-space-3);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body);
    color: var(--hd-text-primary);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
    cursor: pointer;
    transition: background var(--hd-transition-fast), border-color var(--hd-transition-fast), color var(--hd-transition-fast), opacity var(--hd-transition-fast);
  }

  .hd-settings__action-btn:hover {
    border-color: var(--hd-border-strong);
  }

  .hd-settings__action-btn--warn {
    color: var(--hd-accent-warning);
    border-color: var(--hd-accent-warning);
  }

  .hd-settings__action-btn:disabled {
    cursor: default;
    opacity: 0.55;
  }

  .hd-settings__action-btn:focus-visible {
    outline: var(--hd-focus-ring);
    outline-offset: 2px;
  }

  .hd-settings__cache-status {
    margin: 0;
    font-size: var(--hd-text-caption);
    color: var(--hd-text-tertiary);
  }

  .hd-settings__cache-status--ok {
    color: var(--hd-accent-success);
  }

  .hd-settings__cache-status--error {
    color: var(--hd-accent-warning);
  }

  /* ===== Konto — account/identity (AccountSettings.renderInto) ===== */

  .hd-settings-account {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-3);
  }

  .hd-settings-account__block {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
  }

  .hd-settings-account__subtitle {
    margin: 0;
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hd-text-tertiary);
  }

  .hd-settings-account__block-body {
    display: flex;
    flex-direction: column;
    gap: var(--hd-space-2);
  }

  .hd-settings-account__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hd-space-3);
    min-height: 44px; /* WCAG 2.5.5 touch target */
  }

  .hd-settings-account__label {
    font-size: var(--hd-text-caption);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hd-text-tertiary);
  }

  .hd-settings-account__value {
    font-size: var(--hd-text-body);
    color: var(--hd-text-primary);
    word-break: break-word;
  }

  .hd-settings-account__char-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-2);
  }

  .hd-settings-account__char,
  .hd-settings-account__btn {
    min-height: 44px;
    padding: var(--hd-space-2) var(--hd-space-3);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body);
    color: var(--hd-text-primary);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
    cursor: pointer;
    transition: background var(--hd-transition-fast), border-color var(--hd-transition-fast), color var(--hd-transition-fast);
  }

  .hd-settings-account__char:hover,
  .hd-settings-account__btn:hover {
    border-color: var(--hd-border-strong);
  }

  .hd-settings-account__char--active {
    background: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
    border-color: var(--hd-accent-primary);
  }

  .hd-settings-account__btn--cta {
    background: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
    border-color: var(--hd-accent-primary);
  }

  .hd-settings-account__btn--warn {
    color: var(--hd-accent-warning);
    border-color: var(--hd-accent-warning);
  }

  .hd-settings-account__char:disabled,
  .hd-settings-account__btn:disabled {
    cursor: default;
    opacity: 0.55;
  }

  .hd-settings-account__char:focus-visible,
  .hd-settings-account__btn:focus-visible,
  .hd-settings-account__input:focus-visible {
    outline: var(--hd-focus-ring);
    outline-offset: 2px;
  }

  .hd-settings-account__input {
    min-height: 44px;
    padding: var(--hd-space-2) var(--hd-space-3);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-body);
    color: var(--hd-text-primary);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-sm);
  }

  .hd-settings-account__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hd-space-2);
  }

  .hd-settings-account__warning {
    margin: 0;
    font-size: var(--hd-text-caption);
    color: var(--hd-accent-warning);
  }

  .hd-settings-account__msg {
    margin: 0;
    font-size: var(--hd-text-caption);
  }

  .hd-settings-account__msg--ok {
    color: var(--hd-accent-success);
  }

  .hd-settings-account__msg--error {
    color: var(--hd-accent-warning);
  }
}

@layer components {
  .hd-settings-credits {
    gap: var(--hd-space-2);
  }
  .hd-settings-credits__intro {
    margin: 0;
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-caption);
    line-height: var(--hd-leading-relaxed, 1.5);
  }
  .hd-settings-credits__table-wrap {
    overflow-x: auto;
  }
  .hd-settings-credits__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--hd-text-caption);
    color: var(--hd-text-primary);
  }
  .hd-settings-credits__table th,
  .hd-settings-credits__table td {
    text-align: left;
    padding: var(--hd-space-1) var(--hd-space-2);
    border-bottom: 1px solid var(--hd-border-subtle);
  }
  .hd-settings-credits__table th {
    font-weight: var(--hd-weight-semibold);
    color: var(--hd-text-secondary);
  }

  .hd-settings__new-char-btn {
    align-self: flex-start;
  }
}

/* ===== Shake-to-reroll (Bevægelse-section) ===== */
@layer components {
  .hd-settings__desc {
    margin: var(--hd-space-1, 0.25rem) 0 var(--hd-space-2, 0.5rem);
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-ui);
    line-height: var(--hd-leading-relaxed, 1.5);
  }

  .hd-settings__radio-label {
    margin: var(--hd-space-2, 0.5rem) 0 var(--hd-space-1, 0.25rem);
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-ui);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .hd-settings__radio-group {
    display: flex;
    gap: var(--hd-space-2, 0.5rem);
    flex-wrap: wrap;
  }

  .hd-settings__radio {
    flex: 1 1 auto;
    min-width: 4rem;
    min-height: 44px; /* WCAG 2.5.5 touch-target */
    padding: var(--hd-space-1) var(--hd-space-3);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui);
    color: var(--hd-text-secondary);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-md, 0.5rem);
    cursor: pointer;
    transition: background var(--hd-transition-fast), color var(--hd-transition-fast), border-color var(--hd-transition-fast);
  }

  .hd-settings__radio.is-active {
    background: var(--hd-accent-primary);
    color: var(--hd-text-on-accent);
    border-color: var(--hd-accent-primary);
  }

  .hd-settings__radio:focus-visible {
    outline: 2px solid var(--hd-focus-ring);
    outline-offset: 2px;
  }

  /* F1 — dice-like display-mode buttons: the button wears the active dice skin's
   * base colour (--hd-dice-btn-color, set inline per the current skin) as its
   * background and border, with a bold label. The text-shadow keeps the label
   * legible across both light (e.g. radiant gold) and dark (e.g. dragon) skins.
   * Placed after the generic .is-active rule so the dice variant wins. */
  .hd-settings__radio--dice {
    background: var(--hd-dice-btn-color, var(--hd-surface-2));
    border: 2px solid var(--hd-dice-btn-color, var(--hd-border-medium));
    color: var(--hd-text-on-scrim);
    font-weight: var(--hd-weight-bold);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  }

  .hd-settings__radio--dice.is-active {
    background: var(--hd-dice-btn-color, var(--hd-surface-2));
    border-color: var(--hd-text-on-scrim);
    color: var(--hd-text-on-scrim);
    /* Chosen die gets a bright outer ring so the selection still reads clearly
     * regardless of the skin colour. */
    box-shadow: 0 0 0 2px var(--hd-accent-primary);
  }

  .hd-settings__error {
    margin: var(--hd-space-2, 0.5rem) 0 0;
    padding: var(--hd-space-2, 0.5rem) var(--hd-space-3, 0.75rem);
    color: var(--hd-text-on-error, var(--hd-text-primary));
    background: var(--hd-surface-error, rgba(204, 51, 51, 0.1));
    border-left: 3px solid var(--hd-accent-error);
    border-radius: var(--hd-radius-sm, 0.25rem);
    font-size: var(--hd-text-ui);
    line-height: var(--hd-leading-relaxed, 1.5);
  }

  /* ===== Terninger: 3D-dice appearance ===== */

  /* Live preview box — static glyph until tapped (.is-live hides the glyph).
   * --hd-dice-swatch is set inline per the selected skin (no hardcoded colour). */
  .hd-settings__dice-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 96px;
    margin-bottom: var(--hd-space-3);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-md, 0.5rem);
    background: var(--hd-dice-swatch, var(--hd-surface-2));
    color: var(--hd-text-on-scrim);
    cursor: pointer;
  }
  .hd-settings__dice-preview:focus-visible {
    outline: var(--hd-focus-ring);
    outline-offset: 2px;
  }
  .hd-settings__dice-preview-glyph {
    font-size: var(--hd-settings-dice-preview-glyph-size, 2.5rem);
    line-height: var(--hd-leading-icon);
  }
  .hd-settings__dice-preview-icon {
    --hd-player-icon-size: var(--hd-settings-dice-preview-glyph-size, 2.5rem);
  }
  .hd-settings__dice-preview.is-live .hd-settings__dice-preview-glyph {
    display: none;
  }

  /* Swatch grid — curated skins as touch-friendly chips. */
  .hd-settings__dice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: var(--hd-space-2);
  }
  .hd-settings__dice-swatch {
    min-height: 44px; /* WCAG 2.5.5 touch-target */
    padding: var(--hd-space-2) var(--hd-space-3);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui);
    color: var(--hd-text-primary);
    background: var(--hd-surface-2);
    border: 2px solid var(--hd-border-subtle);
    border-left: 8px solid var(--hd-dice-swatch, var(--hd-accent-primary));
    border-radius: var(--hd-radius-sm, 0.25rem);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--hd-transition-fast), background var(--hd-transition-fast);
  }
  .hd-settings__dice-swatch.is-active {
    border-color: var(--hd-accent-primary);
  }
  .hd-settings__dice-swatch:focus-visible {
    outline: var(--hd-focus-ring);
    outline-offset: 2px;
  }

  /* Advanced disclosure — colour pickers + reset. */
  .hd-settings__dice-advanced {
    margin-top: var(--hd-space-3);
  }
  .hd-settings__dice-advanced-summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-ui);
    cursor: pointer;
  }
  .hd-settings__dice-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    gap: var(--hd-space-2);
    color: var(--hd-text-body);
    font-size: var(--hd-text-ui);
  }
  .hd-settings__dice-color-input {
    width: 3.5rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--hd-border-subtle);
    border-radius: var(--hd-radius-sm, 0.25rem);
    background: none;
    cursor: pointer;
  }
  .hd-settings__dice-reset {
    min-height: 44px;
    margin-top: var(--hd-space-2);
    padding: var(--hd-space-1) var(--hd-space-3);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-ui);
    color: var(--hd-text-secondary);
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-border-medium);
    border-radius: var(--hd-radius-md, 0.5rem);
    cursor: pointer;
  }
  .hd-settings__dice-reset:focus-visible {
    outline: var(--hd-focus-ring);
    outline-offset: 2px;
  }
}