/* Global resets */
* {
  @apply border-border;
}

/* Elevator scrollbar (ODS): thin grey draggable thumb on a transparent track.
   Standard properties only — no ::-webkit-scrollbar, so the platform keeps its
   native rendering mode (e.g. auto-hiding overlay scrollbars on macOS). */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ods-system-greys-grey) transparent;
}

body {
  @apply bg-background text-foreground font-body transition-colors duration-300;
}
h1 {
  @apply text-h1;
}
h2 {
  @apply text-h2;
}
h3 {
  @apply text-h3;
}
h4 {
  @apply text-h4;
}
h5 {
  @apply text-h5 ;
}
h6 {
  @apply text-h6;
}

img {
  @apply rounded-lg;
}

html {
  background-color: var(--color-bg);
  /* Defense-in-depth for programmatic smooth scrolls (see
     `utils/scroll-into-view.ts`). Browser SCROLL ANCHORING issues a synchronous
     scrollTop correction when content is inserted/removed (e.g. a ticket drawer
     expanding) to keep the anchored element stable — and per CSSOM-View that
     correction ABORTS any in-flight scroll. That cancelled our smooth
     scroll-to-card on every open after the first (anchoring is suppressed only
     at scrollY=0, so the first open looked smooth and every repeat jumped).
     Disabling anchoring on the document scroller removes the correction
     entirely. Put on html/body (the page scroller), NOT a descendant — a child
     can't re-enable it for an ancestor scroll container. The self-driven rAF
     tween in scroll-into-view.ts is the primary fix; this is belt-and-braces. */
  overflow-anchor: none;
  /* Reserve the scrollbar gutter permanently (classic scrollbars only — on
     macOS overlay scrollbars this is a no-op). When a Drawer/Dialog locks the
     page with `overflow: hidden`, the gutter stays reserved (per spec `stable`
     applies to hidden too), so the content never shifts when the scrollbar
     comes and goes. Pairs with the `data-scroll-locked` override below. */
  scrollbar-gutter: stable;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  overflow-anchor: none;
}

/* Radix Dialog/Drawer scroll-lock (react-remove-scroll-bar) compensates for
   the disappearing scrollbar by injecting
   `body[data-scroll-locked] { margin-right: <gap>px !important }`.
   With `scrollbar-gutter: stable` above, the scrollbar space never collapses,
   so that compensation is no longer needed — it becomes the layout shift
   itself (and it never fixed `position: fixed` chrome like the header anyway).
   The doubled attribute selector out-specifies the injected rule (0,2,1 vs
   0,1,1) so our `!important` wins. */
body[data-scroll-locked][data-scroll-locked] {
  margin-right: 0 !important;
}

/* Light mode specific styles (used in alternatives-list.tsx) */
:root:not(.dark) .light-mode-shadow {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

:root:not(.dark) .light-mode-border {
  border-color: rgba(0, 0, 0, 0.1);
}

:root:not(.dark) .light-mode-card {
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

:root:not(.dark) .light-mode-hover:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

/* Vendor logo styles (used in alternatives-list.tsx) */
.vendor-logo-thumbnail {
  @apply rounded-lg overflow-hidden;
}

/* Scrollbar hiding utility (used in breadcrumb.tsx) */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Theme transition (used in use-dynamic-theming.ts) */
.theme-transition {
  @apply transition-colors duration-300;
}

/* ──────────────────────────────────────────────────────────────────────────
   Markdown content — long-token wrapping (single source of truth)

   Both the rich AND simple markdown renderers wrap their output in
   `.simple-markdown-renderer`. `overflow-wrap` is an INHERITED property, so
   setting it here once cascades to every rendered text node — paragraphs, list
   items, links, inline `code`, headings, blockquotes, table cells — with no
   need to enumerate each element. This is what stops long unbreakable tokens
   (URLs, `kubectl apply -f https://…/recommended.yaml`, commit hashes) from
   overflowing the viewport on narrow/mobile screens. Fix lives at the shared
   root so any future markdown element inherits it for free.

   `anywhere` (not `break-word`) is deliberate: it counts the introduced break
   opportunities in min-content sizing, so the box can shrink below its longest
   word inside a flex/grid parent instead of forcing a horizontal blow-out of
   the column. Fenced code blocks are unaffected — `<pre>` uses
   `white-space: pre`, which ignores `overflow-wrap`, so they keep their own
   `overflow-x-auto` horizontal scroll. DO NOT set a weaker
   `overflow-wrap`/`break-words` on a descendant wrapper — it would override
   this for that subtree (see simple-markdown-renderer's content-wrapper). */
.simple-markdown-renderer {
  overflow-wrap: anywhere;
}

/* Prevent zoom on mobile focus/touch events */
@media screen and (max-width: 800px) {
  * {
    touch-action: manipulation;
  }

  input, textarea, select {
    font-size: 16px !important;
    transform-origin: left top;
    transform: scale(1);
  }
}

/* Shadcn/ui HSL CSS variables for Tailwind compatibility */
:root {
    --background: 0 0% 8.6%;
    --foreground: 0 0% 98%;
    --card: 0 0% 13.1%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 13.1%;
    --popover-foreground: 0 0% 98%;
    --primary: 180 100% 69%;
    --primary-foreground: 0 0% 10%;
    --secondary: 0 0% 22.7%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 22.7%;
    --muted-foreground: 0 0% 53.3%;
    --accent: 180 100% 69%;
    --accent-foreground: 0 0% 10%;
    --destructive: 0 71% 67%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 22.7%;
    --input: 0 0% 22.7%;
    --ring: 180 100% 69%;
    --radius: 0.5rem;
  }

/* ============================================================================
   Video center-control identity — ONE look across every video surface:
   a bare solid-white glyph, NO background disc (see
   components/features/video-center-badge.tsx for the React consumers).
   This strips media-chrome's default dark circle off MuxPlayer's big
   center pre-play button so full players match the strip/facade glyphs.
   ========================================================================== */
/* REAL players (any mounted MuxPlayer): icons are white at rest and turn
   the platform ACCENT color while the icon's control is hovered — every
   media-chrome control carries the `button` part token, so this covers
   center play, bar play/mute/fullscreen/etc. uniformly. */
mux-player::part(button):hover {
  --media-icon-color: var(--ods-accent, var(--color-accent-primary));
}
mux-player::part(center play button) {
  background: transparent;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}
mux-player::part(center play button):hover {
  background: transparent;
  opacity: 0.85;
}