/* ============================================================================
   LEGAL & POLICIES — `tr-legal` (LEGAL-02)
   ----------------------------------------------------------------------------
   One trigger and one list of links, presented two ways from the same markup:

     ≥ 769px   popover anchored above the trigger
     ≤ 768px   bottom sheet with a backdrop

   768px is the theme's canonical mobile boundary, and the SAME literal is in
   `assets/js/unified/legal-policies.js` (`matchMedia('(max-width: 768px)')`) so
   the behaviour and the appearance switch together. CSS cannot resolve a custom
   property inside a media condition, so the two literals are the contract —
   change one and you must change the other.

   The trigger deliberately declares no font-size and no colour: like
   `.tr-consent-trigger`, it borrows the row it sits in, and the footer names it
   in its own selectors. See CLAUDE.md §9.20 for why `font: inherit` alone is
   not enough.

   All values are tokens. No new colour, radius, shadow or spacing value.
   ========================================================================== */

.tr-legal {
  position: relative;
  display: inline-flex;
}

/* ============================================================================
   1. TRIGGER
   ============================================================================ */

.tr-legal__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: inherit;
}

.tr-legal__trigger:focus-visible {
  outline: var(--tiorai-focus-ring-width) solid var(--tiorai-focus-ring-color);
  outline-offset: var(--tiorai-focus-ring-offset);
  border-radius: var(--radius-sm);
}

.tr-legal__chevron {
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.tr-legal.is-open .tr-legal__chevron {
  transform: rotate(180deg);
}

/* ============================================================================
   2. PANEL — POPOVER (desktop default)
   ----------------------------------------------------------------------------
   Anchored to the BOTTOM of the trigger (`bottom: 100%`) rather than the top,
   because this component's home is the last row of the footer: a panel opening
   downwards would land outside the document.
   ============================================================================ */

.tr-legal__panel {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 0;
  z-index: var(--z-dropdown);
  min-width: 15rem;
  max-width: min(20rem, calc(100vw - var(--space-8)));
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  padding: var(--space-2);
  /* Opaque in both themes. `--surface-card` is a translucent gradient in dark
     and would make the popover see-through over the page — the trap CC-01 hit
     and CC-02 documented. */
  background: var(--color-bg-secondary);
  border: 1px solid var(--border-default, var(--color-border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2xl);
}

.tr-legal__panel[hidden] {
  display: none;
}

/* Near the right edge of a narrow desktop window a left-aligned panel would
   overflow the document and mint a horizontal scrollbar. The runtime measures
   the panel once it is visible and adds this class. */
.tr-legal--flip .tr-legal__panel {
  left: auto;
  right: 0;
}

/* The sheet's title bar is noise directly under its own trigger. Hidden, not
   removed: `aria-labelledby` points at the title, and an accessible name may
   not disappear at a breakpoint. */
.tr-legal__head {
  display: none;
}

.tr-legal__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tr-legal__item {
  margin: 0;
}

.tr-legal__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.tr-legal__link:hover,
.tr-legal__link:focus {
  color: var(--color-text-primary);
  background: var(--surface-interactive, var(--color-bg-tertiary));
  text-decoration: none;
}

.tr-legal__link:focus-visible {
  outline: var(--tiorai-focus-ring-width) solid var(--tiorai-focus-ring-color);
  outline-offset: calc(var(--tiorai-focus-ring-offset) * -1);
}

.tr-legal__backdrop[hidden] {
  display: none;
}

/* Inert above the sheet breakpoint even if the runtime leaves it unhidden. */
.tr-legal__backdrop {
  display: none;
}

/* The `<noscript>` fallback is a plain inline row. It only ever renders when
   scripting is off, so it never competes with the panel. */
.tr-legal__list--noscript {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.tr-legal__list--noscript .tr-legal__link {
  padding: 0;
}

/* ============================================================================
   3. PANEL — BOTTOM SHEET (≤ 768px)
   ----------------------------------------------------------------------------
   Keep this boundary in step with SHEET_QUERY in legal-policies.js.
   ============================================================================ */

@media (max-width: 768px) {

  .tr-legal__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: var(--color-overlay, rgba(8, 15, 30, 0.7));
  }

  .tr-legal__panel {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: none;
    /* `dvh`, not `vh`: on mobile `vh` is the viewport WITHOUT the browser's
       collapsing chrome, so an 80vh sheet is taller than the space actually
       visible and its last links hide behind the URL bar. */
    max-height: 80vh;
    padding: 0;
    border: 0;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    overflow: hidden;
  }

  @supports (height: 100dvh) {

    .tr-legal__panel {
      max-height: 80dvh;
    }
  }

  .tr-legal--flip .tr-legal__panel {
    right: 0;
    left: 0;
  }

  .tr-legal__head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--border-default, var(--color-border));
  }

  .tr-legal__title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--color-text-primary);
  }

  .tr-legal__close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    /* The 44px minimum touch target, matching `.btn` and the consent dialog's
       close button. */
    width: 44px;
    height: 44px;
    margin-right: calc(var(--space-2) * -1);
    padding: 0;
    color: var(--color-text-secondary);
    background: none;
    border: 0;
    border-radius: var(--radius-default);
    cursor: pointer;
  }

  .tr-legal__close:hover {
    color: var(--color-text-primary);
    background: var(--surface-interactive, var(--color-bg-tertiary));
  }

  .tr-legal__close:focus-visible {
    outline: var(--tiorai-focus-ring-width) solid var(--tiorai-focus-ring-color);
    outline-offset: var(--tiorai-focus-ring-offset);
  }

  /* The one scrolling region. `min-height: 0` is what allows a flex child to
     shrink below its content height; without it `overflow` here does nothing
     and the sheet grows past its own max-height. */
  .tr-legal__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-2) var(--space-3);
    /* iPhone home indicator. */
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }

  .tr-legal__link {
    /* Comfortable touch target, and a font size that does not trigger iOS
       zoom-on-tap heuristics. */
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: var(--space-3);
    font-size: var(--font-size-base);
    border-radius: var(--radius-md);
  }
}

/* ============================================================================
   4. MOTION AND CONTRAST
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {

  .tr-legal__chevron,
  .tr-legal__link {
    transition: none;
  }
}

@media (forced-colors: active) {

  .tr-legal__panel {
    border: 1px solid CanvasText;
  }

  /* The theme's ring token is ignored in forced-colors, so the ring has to be
     repainted with a system colour or it disappears entirely. */
  .tr-legal__trigger:focus-visible,
  .tr-legal__close:focus-visible,
  .tr-legal__link:focus-visible {
    outline: 2px solid CanvasText;
  }
}

@media print {

  .tr-legal__panel,
  .tr-legal__backdrop {
    display: none !important;
  }
}