/* =============================================================================
   AIToolsay — Tool-page RESULT HEADER
   (.pg-out-toolbar.pg-outbar  +  .pg-out-header.pg-outhead)
   -----------------------------------------------------------------------------
   The top of the result card: the sticky action bar (tool eyebrow + copy / play
   / edit / share / download) and the header beneath it (the prompt as a title,
   then the model / words / read-time pills). Loaded once by ai-tool-shell and
   ai-writers-shell.

   THE COFFEE PILL IN THIS ROW IS DELIBERATELY NOT TOUCHED. `.pg-coffee-btn` is
   owned end-to-end by assets/css/ai-coffee-btn.css; nothing here sets a single
   property on it. It already carries `margin-inline-start: auto`, so the meta
   row simply leaves it the trailing slot, and its own 576px rule takes it full
   width on phones. Do not add a `flex` or a `width` for it here — that IS
   restyling the button.

   ── SPECIFICITY ───────────────────────────────────────────────────────────
   `.pg-outbar` / `.pg-outhead` are the cascade hooks. Cleared, all of it
   declared AFTER this file's <link>:

     ai-tool-shell     .pg-out-toolbar .tb-tool                    (0,2,0)
                       .pg-icon-btn / :hover                       (0,1,0)/(0,1,1)
                       .pg-meta-pill                               (0,1,0)
                       body.theme-dark .pg-root .tb-tool           (0,3,1)
     ai-writers-shell  .pg-root .pg-icon-btn:hover                 (0,2,1)
                       .pg-root .pg-icon-btn.on:hover              (0,3,1)  <--
                       body.theme-dark .pg-root .pg-icon-btn:hover (0,4,1)  <--
                       .pg-root .pg-meta-pill:hover                (0,2,1)
                       body.theme-dark .pg-root .pg-meta-pill i    (0,3,1)
     floating-widgets  .card a:hover                               (0,2,1)
     custom.ltr.css    body:not(.admin-shell):not(.theme-dark)
                         button:focus-visible                      (0,3,2)  <--

   Ladder used here: chip/pill/button base (0,3,0) · `.on` state (0,4,0) ·
   hover (0,5,1) · dark hover (0,6,1) · focus (0,5,1).

   ── LAYOUT ────────────────────────────────────────────────────────────────
   The action bar has NO breakpoint. It is a wrapping flex with
   `justify-content: space-between`: while both fit, eyebrow left / actions
   right; when they do not, the actions drop to their own line and — because
   space-between does nothing to a lone item — sit flush left rather than
   stranded against the right edge. That is the failure mode a
   `margin-inline-start:auto` produces when it wraps, and it is why there is no
   auto margin in this file.

   The meta row's sizing DOES key off the card via `@container`, because the
   card sits in col-lg-9 and a viewport query would compress it on a full-width
   page while leaving it roomy in a 500px column.
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   0. TOKENS  (shared by the bar and the header)
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-outbar,
.pg-root .pg-outhead {
  --oh-1: #4C8DF2;
  --oh-2: #3680ED;
  --oh-3: #2060C0;
  /* the only stops that ever sit under white glyphs */
  --oh-fill-1: #2E6FD0;
  --oh-fill-2: #1B4E9E;
  --oh-glow: 54, 128, 237;

  --oh-surface: #fff;
  --oh-raise: #f6f8fc;
  --oh-line: #e6ebf3;
  --oh-ink: #16202c;
  --oh-ink-2: #5b6779;
  --oh-ink-3: #8a94a3;
  --oh-tint: rgba(54, 128, 237, .085);
  --oh-glass: rgba(255, 255, 255, .86);

  --oh-ease: cubic-bezier(.34, 1.4, .64, 1);
  --oh-ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. STICKY ACTION BAR
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-outbar {
  container-type: inline-size;
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 12px 20px;
  background: var(--oh-glass);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border: 0;
  border-block-end: 1px solid var(--oh-line);
}

/* Brand edge along the top of the result card. Fades at both ends so it
   reads as light catching the card, not as a rule butting into the
   corners. On ::after, not ::before, because the bar's backdrop-filter
   composites its own layer and a ::before would sit under the blur. */
.pg-root .pg-outbar::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 2px;
  background: linear-gradient(90deg, transparent,
              rgba(var(--oh-glow), .5) 22%, rgba(var(--oh-glow), .5) 78%, transparent);
  pointer-events: none;
}

/* ── the tool eyebrow ──────────────────────────────────────────────────────
   NEVER truncated. The shells clip this with `overflow:hidden` +
   `text-overflow:ellipsis`, which eats the end of any tool name past about 26
   characters at desktop — and this is the one label that tells you WHICH tool
   produced the result you are reading. It wraps instead. */
.pg-root .pg-outbar .tb-tool {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 1 auto;
  min-inline-size: 0;
  max-inline-size: 100%;
  margin: 0;
  padding: 5px 15px 5px 5px;
  border: 1.5px solid rgba(var(--oh-glow), .22);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--oh-glow), .12), rgba(var(--oh-glow), .05));
  color: var(--oh-3);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .085em;
  text-transform: uppercase;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  transition: border-color .2s ease, background .2s ease;
}
.pg-root .pg-outbar .tb-tool i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  font-size: 10.5px;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--oh-fill-1), var(--oh-fill-2));
  box-shadow: 0 5px 12px -6px rgba(var(--oh-glow), .9),
              inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .3s var(--oh-ease-pop);
}

/* ── action chips ─────────────────────────────────────────────────────────── */
.pg-root .pg-outbar .tb-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 7px;
  /* no auto margin — see the file header. `space-between` on the bar does the
     alignment while both fit, and leaves these flush left once they wrap. */
  margin: 0;
  inline-size: auto;
}

.pg-root .pg-outbar .pg-icon-btn {
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border: 1.5px solid var(--oh-line);
  border-radius: 11px;
  /* A vertical wash plus a specular top edge, so the chip reads as a
     pressable surface at rest instead of an outline. Hover/active/focus
     all override this, so it only ever shows in the resting state. */
  background: linear-gradient(180deg, var(--oh-surface), var(--oh-raise));
  box-shadow: 0 1px 2px rgba(16, 26, 40, .05),
              inset 0 1px 0 rgba(255, 255, 255, .8);
  color: var(--oh-ink-2);
  font-size: 13px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              transform .22s var(--oh-ease), box-shadow .22s ease;
}

/* Active states — playing TTS, or a just-copied confirmation. White glyph, so
   the fill is the measured AA ramp rather than brand blue. */
.pg-root .pg-outbar .pg-icon-btn.on,
.pg-root .pg-outbar .pg-icon-btn.tts.playing {
  background: linear-gradient(135deg, var(--oh-fill-1), var(--oh-fill-2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 16px -8px rgba(var(--oh-glow), .8),
              inset 0 1px 0 rgba(255, 255, 255, .28);
}

/* ── download menu ────────────────────────────────────────────────────────── */
.pg-root .pg-outbar .pg-dl-wrap { position: relative; display: inline-flex; }
.pg-root .pg-outbar .pg-dl-menu {
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  inset-inline-start: auto;
  z-index: 60;
  min-inline-size: 186px;
  padding: 7px;
  border: 1.5px solid var(--oh-line);
  border-radius: 14px;
  background: var(--oh-surface);
  box-shadow: 0 18px 38px -18px rgba(16, 26, 40, .3),
              0 3px 10px -6px rgba(16, 26, 40, .12);
}
.pg-root .pg-outbar .pg-dl-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--oh-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: start;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.pg-root .pg-outbar .pg-dl-item i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 7px;
  font-size: 11.5px;
  line-height: 1;
  color: var(--oh-3);
  background: var(--oh-tint);
  transition: background .18s ease, color .18s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. HEADER — the prompt as a title
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-outhead {
  container-type: inline-size;
  /* isolate + z-index:-1 on the bloom keeps it behind this block's own
     text without needing a z-index on every child, and stops it escaping
     into the article below. */
  position: relative;
  isolation: isolate;
  padding: 26px 28px 16px;
}

/* A single soft brand bloom off the top-inline-start corner — the same
   wash the detail-page cards use, so the result card belongs to the same
   family. Deliberately one light source: a second bloom on the far side
   makes the header look lit from nowhere. */
.pg-root .pg-outhead::before {
  content: '';
  position: absolute;
  inset-block-start: -46px;
  inset-inline-start: -70px;
  inline-size: 360px;
  block-size: 250px;
  background: radial-gradient(closest-side, rgba(var(--oh-glow), .11), transparent 72%);
  pointer-events: none;
  z-index: -1;
}

.pg-root .pg-outhead .pg-out-prompt {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.024em;
  color: var(--oh-ink);
  /* `anywhere`, not `break-word`: only `anywhere` shrinks min-content size,
     which is what lets a long unbroken prompt narrow inside a flex/grid parent
     instead of forcing the card to scroll. */
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* ── meta pills — same language as the output footer's stat badges, so the two
      ends of the card read as a pair ───────────────────────────────────────── */
.pg-root .pg-outhead .pg-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
}

.pg-root .pg-outhead .pg-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-inline-size: 100%;
  padding: 5px 13px 5px 6px;
  border: 1.5px solid var(--oh-line);
  border-radius: 999px;
  /* Same wash as the chrome buttons. The model pill is :first-child at
     (0,3,1) and keeps its brand tint, so this only lifts the two flat
     white read-outs into the same set rather than flattening all three. */
  background: linear-gradient(180deg, var(--oh-surface), var(--oh-raise));
  box-shadow: 0 1px 2px rgba(16, 26, 40, .04);
  color: var(--oh-ink-2);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* long provider strings WRAP inside the pill, never get cut */
  white-space: normal;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.pg-root .pg-outhead .pg-meta-pill i {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
  color: var(--oh-3);
  background: var(--oh-tint);
  box-shadow: inset 0 0 0 1px rgba(var(--oh-glow), .14);
  transition: background .2s ease, color .2s ease, transform .28s var(--oh-ease-pop);
}
/* The VALUE carries the ink; the trailing label ("Words", "Min read") keeps the
   muted micro-type set on the pill. That is the whole hierarchy. */
.pg-root .pg-outhead .pg-meta-pill span {
  min-inline-size: 0;
  color: var(--oh-ink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* the model is the primary stat */
.pg-root .pg-outhead .pg-meta-pill:first-child {
  border-color: rgba(var(--oh-glow), .24);
  background: var(--oh-tint);
  text-transform: none;
  letter-spacing: 0;
}
.pg-root .pg-outhead .pg-meta-pill:first-child span { color: var(--oh-3); }
.pg-root .pg-outhead .pg-meta-pill:first-child i { background: rgba(var(--oh-glow), .16); }

/* ── divider below the header ──────────────────────────────────────────────
   A hairline that fades at both ends instead of butting into the card edges. */
.pg-root .pg-outhead + .pg-out-divider {
  block-size: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--oh-line) 12%,
              var(--oh-line) 88%, transparent);
  margin: 18px 28px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. HOVER — the "after" state
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  body:not(.admin-shell) .pg-root .pg-outbar .pg-icon-btn:hover {
    background: var(--oh-tint);
    border-color: rgba(var(--oh-glow), .38);
    color: var(--oh-3);
    transform: translateY(-2px);
    box-shadow: 0 10px 18px -10px rgba(var(--oh-glow), .6);
  }
  /* Restated for the lit states: `.pg-root .pg-icon-btn.on:hover` in
     ai-writers-shell is (0,3,1) and would otherwise repaint an actively
     playing button back to the resting tint mid-playback. */
  body:not(.admin-shell) .pg-root .pg-outbar .pg-icon-btn.on:hover,
  body:not(.admin-shell) .pg-root .pg-outbar .pg-icon-btn.tts.playing:hover {
    background: linear-gradient(135deg, var(--oh-fill-1), var(--oh-fill-2));
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 22px -10px rgba(var(--oh-glow), .9),
                inset 0 1px 0 rgba(255, 255, 255, .28);
  }

  .pg-root .pg-outbar .tb-tool:hover {
    border-color: rgba(var(--oh-glow), .4);
    background: linear-gradient(135deg, rgba(var(--oh-glow), .18), rgba(var(--oh-glow), .08));
  }
  .pg-root .pg-outbar .tb-tool:hover i { transform: rotate(-8deg) scale(1.06); }

  body:not(.admin-shell) .pg-root .pg-outbar .pg-dl-item:hover {
    background: var(--oh-tint);
    color: var(--oh-3);
  }
  body:not(.admin-shell) .pg-root .pg-outbar .pg-dl-item:hover i {
    background: linear-gradient(135deg, var(--oh-fill-1), var(--oh-fill-2));
    color: #fff;
  }

  /* Read-outs, not controls: tint only, no lift and no pointer cursor. */
  .pg-root .pg-outhead .pg-meta-pill:hover {
    border-color: rgba(var(--oh-glow), .34);
    background: var(--oh-tint);
    color: var(--oh-ink-2);
  }
  .pg-root .pg-outhead .pg-meta-pill:hover i {
    background: rgba(var(--oh-glow), .18);
    transform: scale(1.06);
  }
}

body:not(.admin-shell) .pg-root .pg-outbar .pg-icon-btn:active { transform: translateY(0) scale(.94); }

/* ═══════════════════════════════════════════════════════════════════════════
   4. FOCUS
   ═══════════════════════════════════════════════════════════════════════════
   The site-wide reset kills the outline AND forces `border-radius:6px`, so the
   chip radius is restated or a focused button visibly squares off. */
body:not(.admin-shell) .pg-root .pg-outbar .pg-icon-btn:focus-visible {
  outline: none;
  border-radius: 11px;
  background: var(--oh-tint);
  border-color: rgba(var(--oh-glow), .38);
  color: var(--oh-3);
  box-shadow: 0 0 0 3px rgba(var(--oh-glow), .38);
}
body:not(.admin-shell) .pg-root .pg-outbar .pg-icon-btn.on:focus-visible,
body:not(.admin-shell) .pg-root .pg-outbar .pg-icon-btn.tts.playing:focus-visible {
  background: linear-gradient(135deg, var(--oh-fill-1), var(--oh-fill-2));
  border-color: transparent;
  color: #fff;
}
body:not(.admin-shell) .pg-root .pg-outbar .pg-dl-item:focus-visible {
  outline: none;
  border-radius: 9px;
  background: var(--oh-tint);
  color: var(--oh-3);
  box-shadow: inset 0 0 0 2px rgba(var(--oh-glow), .4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════
   The bar itself needs no breakpoint — it wraps. These only tune sizing, and
   they key off the CARD (container), not the viewport, because the card is in
   col-lg-9 and its width and the window's width are different questions. */
@container (max-width: 560px) {
  .pg-root .pg-outbar .tb-tool { font-size: 10.5px; letter-spacing: .07em; }
  .pg-root .pg-outhead .pg-out-prompt { font-size: 22px; }
  .pg-root .pg-outhead .pg-meta-row { gap: 8px; }
}
@container (max-width: 420px) {
  .pg-root .pg-outhead .pg-out-prompt { font-size: 20px; letter-spacing: -.018em; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 767.98px) {
    .pg-root .pg-outhead .pg-out-prompt { font-size: 22px; }
  }
}

/* Padding and touch targets key off the VIEWPORT — physical screen, real
   fingers. */
@media (max-width: 575.98px) {
  .pg-root .pg-outbar { padding: 11px 16px; gap: 10px; }
  .pg-root .pg-outhead { padding: 20px 16px 14px; }
  .pg-root .pg-outhead + .pg-out-divider { margin: 16px; }
  /* 40px — a 36px chip is under the comfortable tap target */
  .pg-root .pg-outbar .pg-icon-btn { inline-size: 40px; block-size: 40px; border-radius: 12px; }
  .pg-root .pg-outbar .pg-dl-menu { min-inline-size: 172px; }
  .pg-root .pg-outhead .pg-meta-pill { font-size: 10px; padding: 4px 11px 4px 5px; }
  .pg-root .pg-outhead .pg-meta-pill i { inline-size: 20px; block-size: 20px; font-size: 9.5px; }
  .pg-root .pg-outhead .pg-meta-pill span { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. RTL
   ═══════════════════════════════════════════════════════════════════════════ */
[dir="rtl"] .pg-root .pg-outbar .tb-tool { padding: 5px 5px 5px 15px; }
[dir="rtl"] .pg-root .pg-outhead .pg-meta-pill { padding: 5px 6px 5px 13px; }
@media (hover: hover) and (pointer: fine) {
  [dir="rtl"] .pg-root .pg-outbar .tb-tool:hover i { transform: rotate(8deg) scale(1.06); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. DARK MODE
   ═══════════════════════════════════════════════════════════════════════════
   Token swap plus the surfaces the shells hard-code. The lit-button FILL does
   not move: #2E6FD0 to #1B4E9E carries white at 4.88-7.98:1 whatever is behind
   it, and re-tinting a fill because the card went dark is the exact move
   ai-contrast-fix.css exists to undo. */
body.theme-dark .pg-root .pg-outbar,
body.theme-dark .pg-root .pg-outhead {
  --oh-surface: #17171A;
  --oh-raise: #1C1C1F;
  --oh-line: rgba(255, 255, 255, .09);
  --oh-ink: #F5F5F6;
  --oh-ink-2: #A0A0A6;
  --oh-ink-3: #7D838C;
  --oh-tint: rgba(54, 128, 237, .16);
  --oh-glass: rgba(15, 15, 17, .86);
  --oh-glow: 96, 164, 245;
  /* ink token, never a fill */
  --oh-3: #9CC6FB;
}
body.theme-dark .pg-root .pg-outbar { background: var(--oh-glass); }
body.theme-dark .pg-root .pg-outbar .tb-tool {
  background: linear-gradient(135deg, rgba(var(--oh-glow), .18), rgba(var(--oh-glow), .07));
  border-color: rgba(var(--oh-glow), .3);
  color: var(--oh-3);
}
body.theme-dark .pg-root .pg-outbar .pg-icon-btn {
  /* The white specular is dropped: on a near-black chip it reads as a seam,
     not a highlight. Depth on a dark surface comes from the cast shadow. */
  background: linear-gradient(180deg, #202024, #1A1A1D);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45),
              inset 0 1px 0 rgba(255, 255, 255, .06);
  border-color: var(--oh-line);
  color: #C9C9CE;
}
body.theme-dark .pg-root .pg-outbar .pg-dl-menu {
  background: #17171A;
  border-color: var(--oh-line);
  box-shadow: 0 18px 38px -18px rgba(0, 0, 0, .8);
}
body.theme-dark .pg-root .pg-outbar .pg-dl-item { color: var(--oh-ink); }
body.theme-dark .pg-root .pg-outbar .pg-dl-item i { background: var(--oh-tint); color: var(--oh-3); }
body.theme-dark .pg-root .pg-outhead::before {
  background: radial-gradient(closest-side, rgba(var(--oh-glow), .18), transparent 72%);
}
body.theme-dark .pg-root .pg-outbar::after {
  background: linear-gradient(90deg, transparent,
              rgba(var(--oh-glow), .62) 22%, rgba(var(--oh-glow), .62) 78%, transparent);
}
body.theme-dark .pg-root .pg-outhead .pg-out-prompt { color: var(--oh-ink); }
body.theme-dark .pg-root .pg-outhead .pg-meta-pill {
  background: linear-gradient(180deg, #202024, #1A1A1D);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .38);
  border-color: var(--oh-line);
  color: var(--oh-ink-2);
}
body.theme-dark .pg-root .pg-outhead .pg-meta-pill span { color: var(--oh-ink); }
body.theme-dark .pg-root .pg-outhead .pg-meta-pill:first-child {
  background: var(--oh-tint);
  border-color: rgba(var(--oh-glow), .3);
}
body.theme-dark .pg-root .pg-outhead .pg-meta-pill:first-child span { color: var(--oh-3); }
body.theme-dark .pg-root .pg-outhead .pg-meta-pill i {
  background: var(--oh-tint);
  color: var(--oh-3);
  box-shadow: inset 0 0 0 1px rgba(var(--oh-glow), .22);
}

@media (hover: hover) and (pointer: fine) {
  body:not(.admin-shell).theme-dark .pg-root .pg-outbar .pg-icon-btn:hover {
    background: var(--oh-tint);
    border-color: rgba(var(--oh-glow), .34);
    color: var(--oh-3);
  }
  body:not(.admin-shell).theme-dark .pg-root .pg-outbar .pg-icon-btn.on:hover,
  body:not(.admin-shell).theme-dark .pg-root .pg-outbar .pg-icon-btn.tts.playing:hover {
    background: linear-gradient(135deg, var(--oh-fill-1), var(--oh-fill-2));
    border-color: transparent;
    color: #fff;
  }
  body.theme-dark .pg-root .pg-outhead .pg-meta-pill:hover {
    border-color: rgba(var(--oh-glow), .34);
    background: var(--oh-tint);
    color: var(--oh-ink-2);
  }
  body.theme-dark .pg-root .pg-outbar .tb-tool:hover {
    border-color: rgba(var(--oh-glow), .45);
    background: linear-gradient(135deg, rgba(var(--oh-glow), .26), rgba(var(--oh-glow), .1));
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pg-root .pg-outbar .pg-icon-btn,
  .pg-root .pg-outbar .tb-tool,
  .pg-root .pg-outbar .tb-tool i,
  .pg-root .pg-outbar .pg-dl-item,
  .pg-root .pg-outhead .pg-meta-pill,
  .pg-root .pg-outhead .pg-meta-pill i { transition: none; }
  body:not(.admin-shell) .pg-root .pg-outbar .pg-icon-btn:hover,
  body:not(.admin-shell) .pg-root .pg-outbar .pg-icon-btn.on:hover,
  body:not(.admin-shell) .pg-root .pg-outbar .pg-icon-btn:active { transform: none; }
  .pg-root .pg-outbar .tb-tool:hover i,
  .pg-root .pg-outhead .pg-meta-pill:hover i { transform: none; }
}