/**
 * Overflow reveal — shared chrome for the sitewide clipped-text system.
 *
 * Loaded by BOTH the admin SPA bundle and the public Eleventy layouts, so every
 * custom property carries a LITERAL FALLBACK: the Cinematic, Lumina, and Premium
 * property-site shells load no `tokens.css` at all (only Classic and Showcase
 * list it in `listingCss`), and this file must render correctly there.
 *
 * The reveal itself needs no CSS — it animates `scrollLeft` on elements that
 * already clip. Nothing here changes idle appearance; adding this stylesheet to
 * a page is a visual no-op until a control actually appears.
 *
 * Single breakpoint: 768px (see admin-spa/src/lib/breakpoints.js MOBILE_BP).
 */

:root {
  /* Reserved slot in the app z-index ladder: above --z-action-sheet (1250),
     below --z-tour (1300). Declared HERE rather than only in the SPA's
     theme-tokens.css so token-less listing shells still stack correctly. */
  --z-overflow-fulltext: 1260;
}

/* Smooth-scrolling roots would fight the rAF loop, which writes scrollLeft
   directly. Scope the opt-out to elements actually being revealed. */
[data-overflow-revealing] {
  scroll-behavior: auto !important;
}

/* ── Multi-line clamp + measured More/Less ──────────────────────────────── */

/* Every clamp toggle ships hidden and is revealed only by hydrateClamps()
   MEASURING real overflow — a clamp that doesn't actually clip must not grow a
   pointless toggle. Keyed on the attribute rather than a class so the
   component-specific toggles (`.media-card-notes-more`, `.au-card-desc-more`,
   and any future one) need no per-file rule, and scoped tightly enough that it
   cannot collide with the other `.is-hidden` conventions already in
   review.css / vault.css / portal.css. Uses a class, not the `hidden`
   attribute, which loses to author `display:` rules.

   The clamp itself is deliberately NOT declared here: both render sites style
   their own `-webkit-line-clamp` alongside the rest of their component CSS, and
   a generic `.clamp-text` with no call site was only ever dead weight. */
[data-clamp-action].is-hidden {
  display: none;
}

/* ── Full-text surface (tap / reduced-motion focus) ─────────────────────── */

.overflow-fulltext {
  position: fixed;
  z-index: var(--z-overflow-fulltext, 1260);
  max-width: min(90vw, 28rem);
  max-height: 50vh;
  overflow-y: auto;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  border-radius: var(--ref-radius-md, 10px);
  background: var(--surface-card, #14171d);
  color: var(--text-body, #e6e8ec);
  font-size: var(--type-sm, 0.875rem);
  line-height: 1.45;
  box-shadow: var(--elev-lg, 0 12px 32px rgba(0, 0, 0, 0.45));

  /* Long URLs and email addresses are the common case here — they must wrap
     rather than force the panel wider than the viewport. */
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.overflow-fulltext[data-variant='tooltip'] {
  pointer-events: none;
}

.overflow-fulltext-close {
  float: right;
  margin: -0.2rem -0.25rem 0 0.5rem;
  padding: 0.1rem 0.3rem;
  border: 0;
  background: none;
  color: var(--text-muted, #9aa1ad);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 768px) {
  .overflow-fulltext {
    max-width: calc(100vw - 2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .overflow-fulltext {
    transition: none !important;
  }
}