/**
 * player-tab-bar.css — Plan B C3
 *
 * 7-tab player-tab-bar: aspect-ratio-aware bottom-bar (tall viewport) /
 * right-edge-bar (wide viewport). BEM: .hd-player-tab-bar*.
 *
 * CSS-lag: @layer components
 *
 * Orientation logic (driven by min-aspect-ratio: 1/1 — deterministic across
 * iPadOS keyboard-attach, split-screen and PWA-mode where the `orientation`
 * media-feature is unreliable):
 *   aspect-ratio < 1   → position: fixed bottom; height: 56px; flex-row
 *   aspect-ratio ≥ 1   → position: fixed right;  width:  56px; flex-column
 *
 * Active-tab marker: light-brown rgba(201,169,110,0.22) full cell.
 * Disabled tab (permanent or mode-based): same icon typography; cursor/ARIA/click contract signal state.
 *   - Mode-disabled tabs (disabledFor: [mode]) show a toast on click via JS.
 *   - Permanently-disabled tabs (enabled: false) keep long-press tooltip behavior.
 * Tab[0] context:    same size; Plan B = theme-toggle; no active-marker.
 *
 * Token strategy:
 *   - Surface: var(--hd-surface-1) bg, var(--hd-border-subtle) border
 *   - Text:    var(--hd-text-primary) icon; var(--hd-text-tertiary) label
 *   - Gold active bg ONLY allowlisted: rgba(201,169,110,0.22)
 *   - Motion: var(--hd-motion-fast) / var(--hd-transition-fast)
 */

@layer components {

  /* ------------------------------------------------------------------ */
  /* Component-scoped design tokens                                        */
  /* ------------------------------------------------------------------ */
  :root {
    /* Tab icon: 32px (space-6). Component-specific prop for precision. */
    --hd-tab-icon-size: 2rem;
    /* The centre mask reserves one stable zone between two scroll wings. */
    --hd-tab-scan-mask-size: 60px;
    --hd-tab-scan-seal-size: 56px;
    /* Slightly oversized crop keeps both bitmap textures legible in the seal. */
    --hd-tab-scan-texture-size: 82px;
    --hd-tab-rail-border-width: 1px;
  }

  /* ------------------------------------------------------------------ */
  /* Root: portrait bottom-bar (default)                                  */
  /* ------------------------------------------------------------------ */
  .hd-player-tab-bar {
    --hd-tab-icon-size-effective: clamp(
      0px,
      calc((var(--hd-visual-viewport-width, 100vw) - var(--hd-tab-scan-mask-size)) / 8 - 4px),
      var(--hd-tab-icon-size)
    );
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Border-box height MUST equal the mount's bottom reservation
     * (--player-tab-bar-size = base + safe-area-inset-bottom). With a plain
     * `height: 56px` the safe-area padding below is swallowed by the 56px box,
     * so on notched iPhones the bar stayed 56px tall while the content-mount
     * reserved 56px + inset — opening a ~34px body-background (parchment) band
     * above the bar that covered scrolled content. Sizing the bar to the same
     * token keeps its bottom edge flush with the content. Falls back to the
     * 56px base if the token is ever undefined (non-portal context). */
    height: var(--player-tab-bar-size, 56px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--hd-tab-scan-mask-size) minmax(0, 1fr);
    align-items: stretch;
    background-color: var(--hd-surface-1);
    border-top: var(--hd-tab-rail-border-width) solid var(--hd-border-accent);
    z-index: 1000;
    /* Safe-area inset for devices with home-indicator (now extends the bar
     * rather than eating into its 56px content area). Tracks the SAME
     * --hd-tab-bar-bottom-inset that builds --player-tab-bar-size (see
     * player-content-zoom.css) so the bar's border-box height always equals the
     * mount's reservation. In standalone PWA that variable is capped so the
     * icons are not pushed up by the full home-indicator inset; the env()
     * fallback keeps the full inset in any context that has not defined it. */
    padding-bottom: var(--hd-tab-bar-bottom-inset, env(safe-area-inset-bottom, 0px));
  }

  /* Each fixed wing always exposes all four ordinary destinations. Zero-minimum
   * grid tracks let compact viewports shrink cells instead of hiding tabs. */
  .hd-player-tab-bar__wing {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .hd-player-tab-bar__center-mask {
    grid-column: 2;
    min-width: var(--hd-tab-scan-mask-size);
    pointer-events: none;
  }

  .hd-player-tab-bar__tab.hd-player-tab-bar__scan-seal {
    --hd-tab-icon-size-effective: var(--hd-tab-icon-size);
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 0;
    width: var(--hd-tab-scan-seal-size);
    height: var(--hd-tab-scan-seal-size);
    min-width: var(--hd-tab-scan-seal-size);
    min-height: var(--hd-tab-scan-seal-size);
    transform: translateX(-50%);
    flex: none;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-radius: 50%;
    background-color: var(--hd-accent-primary);
    background-image:
      linear-gradient(145deg, rgba(54, 37, 22, 0.14) 0%, rgba(37, 25, 15, 0.30) 42%, rgba(16, 11, 7, 0.62) 100%),
      var(--hd-texture-gold-seam),
      linear-gradient(rgba(70, 10, 6, 0.28), rgba(29, 3, 2, 0.50)),
      var(--hd-texture-leather-red);
    background-position: center;
    background-size:
      cover,
      var(--hd-tab-scan-texture-size) var(--hd-tab-scan-texture-size),
      cover,
      var(--hd-tab-scan-texture-size) var(--hd-tab-scan-texture-size);
    background-origin: border-box;
    background-clip: padding-box, padding-box, border-box, border-box;
    color: var(--hd-text-tertiary);
    box-shadow:
      inset 0 5px 7px rgba(255, 232, 165, 0.13),
      inset 0 -8px 10px rgba(0, 0, 0, 0.54);
  }

  [data-theme="light"] .hd-player-tab-bar__tab.hd-player-tab-bar__scan-seal {
    background-image:
      linear-gradient(145deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 34%, rgba(66, 35, 9, 0.34) 100%),
      var(--hd-texture-gold-seam),
      linear-gradient(rgba(95, 18, 8, 0.18), rgba(52, 6, 4, 0.34)),
      var(--hd-texture-leather-red);
    box-shadow:
      inset 0 5px 7px rgba(255, 249, 216, 0.38),
      inset 0 -7px 9px rgba(84, 45, 10, 0.34);
  }

  /* ------------------------------------------------------------------ */
  /* Landscape override: right-edge vertical bar                          */
  /* ------------------------------------------------------------------ */
  @media (min-aspect-ratio: 1/1) {
    .hd-player-tab-bar {
      --hd-tab-icon-size-effective: clamp(
        0px,
        calc(
          (var(--hd-visual-viewport-height, 100vh) - var(--player-top-bar-height, 48px) - var(--hd-tab-scan-mask-size)) / 8 - 2px
        ),
        var(--hd-tab-icon-size)
      );
      /* Start below the top-bar so the two bars never overlap */
      top: var(--player-top-bar-height, 48px);
      bottom: 0;
      left: auto;
      right: 0;
      /* The rail reservation includes the physical right inset. Keeping the
       * inset inside this border box means its 50% line is the geometric rail
      * centre, which is also the shared reference line for the mask and Scan
      * seal below. */
      --hd-player-tab-bar-landscape-safe-right: env(safe-area-inset-right, 0px);
      width: calc(56px + var(--hd-player-tab-bar-landscape-safe-right));
      height: auto;
      box-sizing: border-box;
      grid-template-columns: 1fr;
      grid-template-rows: minmax(0, 1fr) var(--hd-tab-scan-mask-size) minmax(0, 1fr);
      border-top: none;
      border-left: var(--hd-tab-rail-border-width) solid var(--hd-border-accent);
      padding-bottom: 0;
      padding-right: var(--hd-player-tab-bar-landscape-safe-right);
    }

    .hd-player-tab-bar__wing {
      min-height: 0;
      overflow-x: hidden;
      overflow-y: hidden;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(4, minmax(0, 1fr));
    }

    .hd-player-tab-bar__tab.hd-player-tab-bar__scan-seal {
      /* Absolute positioning starts inside the 1px divider. Offset by that
       * named width so the 56px seal spans the 56px rail without clipping. */
      left: calc(-1 * var(--hd-tab-rail-border-width));
      right: auto;
      top: 50%;
      bottom: auto;
      transform: translateY(-50%);
    }

    .hd-player-tab-bar__center-mask {
      grid-column: 1;
      grid-row: 2;
      min-width: 0;
      min-height: var(--hd-tab-scan-mask-size);
    }
  }

  /* ------------------------------------------------------------------ */
  /* Tab button                                                           */
  /* ------------------------------------------------------------------ */
  .hd-player-tab-bar__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    color: var(--hd-text-tertiary);
    transition: background-color var(--hd-motion-fast) var(--hd-ease-page-turn),
                color var(--hd-motion-fast) var(--hd-ease-page-turn);
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  .hd-player-tab-bar__tab:not(.hd-player-tab-bar__scan-seal) {
    min-width: 0;
    min-height: 0;
  }

  /* The Scan button is also a tab. Keep its fixed-seal positioning stronger
   * than the generic tab's relative positioning so it stays outside the track. */
  .hd-player-tab-bar__tab.hd-player-tab-bar__scan-seal {
    position: absolute;
  }

  .hd-player-tab-bar__tab:focus-visible {
    outline: 2px solid var(--hd-accent-primary);
    outline-offset: -2px;
  }

  /* Active tab: light-brown full-cell background */
  /* rgba(201,169,110,0.22) = allowlisted gold-mid-rgba per design spec §4 */
  .hd-player-tab-bar__tab--active {
    background-color: rgba(201, 169, 110, 0.22);
    color: var(--hd-text-primary);
  }

  /* Disabled tab: keep the same icon typography/colour as logged-in tabs.
   * pointer-events stays enabled so anonymous mode-locked tabs can open the
   * inline login through the shared onLocked flow. */
  .hd-player-tab-bar__tab--disabled {
    cursor: not-allowed;
  }

  .hd-player-tab-bar__tab--mode-locked {
    cursor: not-allowed;
  }

  .hd-player-tab-bar__tab--unavailable {
    cursor: not-allowed;
  }

  .hd-player-tab-bar__tab--disabled:hover,
  .hd-player-tab-bar__tab--disabled:focus {
    background-color: transparent;
  }

  /* Hover (non-disabled, non-active) */
  .hd-player-tab-bar__tab:not(.hd-player-tab-bar__tab--disabled):not(.hd-player-tab-bar__tab--active):hover {
    background-color: rgba(201, 169, 110, 0.10);
    color: var(--hd-text-secondary);
  }

  /* ------------------------------------------------------------------ */
  /* Tab icon (32px registry icon) — icon-only tabs, no word-label         */
  /* ------------------------------------------------------------------ */
  .hd-player-tab-bar__icon {
    font-size: var(--hd-tab-icon-size-effective);
    line-height: var(--hd-leading-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--hd-tab-icon-size-effective);
    width: var(--hd-tab-icon-size-effective);
    overflow: hidden;
    flex-shrink: 0;
    color: var(--hd-tab-icon-color, currentColor);
  }

  .hd-player-tab-bar__icon-glyph {
    --hd-player-icon-size: var(--hd-tab-icon-size-effective);
  }

  .hd-player-tab-bar__tab[data-tab-key="karakterark"] {
    --hd-tab-icon-color: var(--hd-activity-save);
  }

  .hd-player-tab-bar__tab[data-tab-key="hold"] {
    --hd-tab-icon-color: var(--hd-activity-assist);
  }

  .hd-player-tab-bar__tab[data-tab-key="faerd"] {
    --hd-tab-icon-color: var(--hd-quest-narrative);
  }

  .hd-player-tab-bar__tab[data-tab-key="regler"] {
    --hd-tab-icon-color: var(--hd-activity-utility);
  }

  .hd-player-tab-bar__tab[data-tab-key="spil"] {
    --hd-tab-icon-color: var(--hd-activity-dice);
  }

  .hd-player-tab-bar__tab[data-tab-key="butik"] {
    --hd-tab-icon-color: var(--hd-accent-warning);
  }

  .hd-player-tab-bar__tab[data-tab-key="indstillinger"] {
    --hd-tab-icon-color: var(--hd-activity-check);
  }

  .hd-player-tab-bar__scan-seal .hd-player-tab-bar__icon {
    color: currentColor;
  }

  /* Tab labels are intentionally icon-only — the visible word-label node is no
   * longer rendered (see player-tab-bar.js). Tab names remain available to
   * assistive tech via `aria-label`, and disabled tabs surface their name via
   * the long-press tooltip below. */

  /* ------------------------------------------------------------------ */
  /* Unread badge (Fase 2 — per-player unread count from quest read-markers) */
  /* ------------------------------------------------------------------ */
  .hd-player-tab-bar__badge {
    position: absolute;
    top: var(--hd-space-1);
    right: var(--hd-space-1);
    box-sizing: border-box;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 var(--hd-space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--hd-accent-danger);
    color: var(--hd-text-on-accent);
    font-family: var(--hd-font-ui);
    font-size: var(--hd-text-micro);
    font-weight: var(--hd-weight-bold);
    line-height: var(--hd-leading-icon);
    border-radius: var(--hd-radius-full);
    pointer-events: none;
    z-index: 1002;
  }

  /* ------------------------------------------------------------------ */
  /* Tooltip (long-press / pointerdown > 500ms on disabled tabs)          */
  /* ------------------------------------------------------------------ */
  .hd-player-tab-bar__tooltip {
    position: absolute;
    /* Portrait: tooltip appears above the tab */
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--hd-surface-3);
    color: var(--hd-text-primary);
    font-size: var(--hd-text-micro);
    font-family: var(--hd-font-ui);
    padding: var(--hd-space-1) var(--hd-space-2);
    border-radius: 4px;
    border: 1px solid var(--hd-border-accent);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1001;
    opacity: 1;
    animation: hd-tab-tooltip-in var(--hd-motion-fast) var(--hd-ease-page-turn);
  }

  /* Landscape: tooltip appears to the left of the right-edge bar */
  @media (min-aspect-ratio: 1/1) {
    .hd-player-tab-bar__tooltip {
      bottom: auto;
      top: 50%;
      left: auto;
      right: calc(100% + 8px);
      transform: translateY(-50%);
    }
  }

  @keyframes hd-tab-tooltip-in {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }

  @media (min-aspect-ratio: 1/1) {
    @keyframes hd-tab-tooltip-in {
      from { opacity: 0; transform: translateY(-50%) translateX(4px); }
      to   { opacity: 1; transform: translateY(-50%) translateX(0); }
    }
  }

  /* Respect prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .hd-player-tab-bar__tab {
      transition: none;
    }
    .hd-player-tab-bar__tooltip {
      animation: none;
    }
  }

  /* Tab[0] has no label; the empty placeholder must not offset the icon.
   * Without this, icon+gap+label(18px) = 48px group is not vertically centered
   * in the 56px button — the icon sits 10px above true center. */
  .hd-player-tab-bar__tab[data-tab-id="0"] .hd-player-tab-bar__label {
    display: none;
  }

  /* ============================================================
   * Plan C C6 — Tab[0] kontekstuel state variants (spec §4.1)
   * ============================================================ */

  /* pip-visible: theme-toggle dimmed while PiP is open */
  .hd-player-tab-bar__tab--ctx-dim {
    opacity: 0.55;
  }

  /* pip-minimized:<MODE>: prominent mode-icon with circle background */
  .hd-player-tab-bar__tab--ctx-mode-icon {
    position: relative;
  }

  .hd-player-tab-bar__tab--ctx-mode-icon .hd-player-tab-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--hd-tab-icon-size-effective);
    height: var(--hd-tab-icon-size-effective);
    border-radius: 50%;
    background: var(--hd-surface-2);
    border: 1.5px solid var(--hd-border-medium);
    box-shadow: var(--hd-shadow-sm);
    font-size: var(--hd-text-body-large);
  }

  /* N5 — pip-fullscreen:<MODE>: same mode-icon circle as minimized, but an
   * accent border + focus-ring halo so a screen-filling projection reads as an
   * active "expanded" takeover (tap shrinks it back to a small PiP). */
  .hd-player-tab-bar__tab--ctx-fullscreen .hd-player-tab-bar__icon {
    border-color: var(--hd-border-accent);
    box-shadow: 0 0 0 3px var(--hd-focus-ring);
  }

  /* kamp-companion: ⚔ with red 2px border + radial pulse-glow */
  .hd-player-tab-bar__tab--ctx-kamp-companion {
    position: relative;
  }

  .hd-player-tab-bar__tab--ctx-kamp-companion .hd-player-tab-bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--hd-tab-icon-size-effective);
    height: var(--hd-tab-icon-size-effective);
    border-radius: 50%;
    background: var(--hd-surface-2);
    border: 2px solid var(--hd-border-error);
    animation: hd-pip-kamp-pulse var(--hd-motion-slower, 480ms) ease-out infinite;
    font-size: var(--hd-text-body-large);
  }

  @keyframes hd-pip-kamp-pulse {
    0% {
      box-shadow: 0 0 0 0 var(--hd-border-error);
    }
    100% {
      box-shadow: 0 0 0 8px transparent;
    }
  }

  /* prefers-reduced-motion: replace pulse with static red border */
  @media (prefers-reduced-motion: reduce) {
    .hd-player-tab-bar__tab--ctx-kamp-companion .hd-player-tab-bar__icon {
      animation: none;
    }
  }

} /* end @layer components */