/* =============================================================================
   AIToolsay — Tool-page CODE BLOCK  (.pg-codeblock.pg-cb)
   -----------------------------------------------------------------------------
   Fenced code in generated output. The markup is built in JS by the markdown
   renderer in both shells, so the `.pg-cb` hook is added there, not in a blade.
   Covers the open result AND the rendered history rows — same renderer.

   ── IT WAS RENDERING BROKEN, AND THIS IS WHY ──────────────────────────────
   The block is a DARK card, but the screenshotted bug showed a white rounded
   panel inside it with BLUE monospace text. Two site-wide rules in
   custom.ltr.css were beating the component:

     body:not(.admin-shell):not(.theme-dark) pre                    (0,3,2)
       { background:#F9FAFB; border:1px solid …; border-radius:12px;
         padding:16px 18px; color:var(--ez-ink) }
     body:not(.admin-shell):not(.theme-dark)
       code:not(.hljs):not([class*=" language-"])                   (0,4,2)
       { background:var(--ez-red-tint-2); color:var(--ez-red-dark) }

   against the shells' `.pg-codeblock pre` (0,2,0) and
   `.pg-codeblock pre code` (0,2,1). The `pre` rule is what painted the light
   plate, its own radius and its own padding *inside* the dark card; the `code`
   rule is what painted the text blue — `--ez-red-dark` resolves to
   `--aits-blue-dark`, because the whole Tabler palette is remapped to brand
   here. Note the second selector is NOT `code:not(pre code)`, so it hits
   fenced code as well as inline code.

   Everything here therefore carries `body:not(.admin-shell)` plus BOTH classes:
       block (0,4,1) · pre (0,4,2) · pre code (0,4,3) · hover/focus (0,5,x)
   Drop `.pg-cb`, or drop the `body` prefix, and the white plate comes back.

   ── DARK IN BOTH THEMES, ON PURPOSE ───────────────────────────────────────
   A code surface reads as code because it is dark; that is the convention and
   it is what makes one design work in both themes. What changes between themes
   is only the depth modelling — a dark block on a white card needs a real
   shadow, and on a near-black card it needs a rim instead.
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   1. THE BLOCK
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-codeblock.pg-cb {
  /* brand-adjacent navy, not pure black — pure #111 reads as a terminal
     dropped onto the page rather than part of this design system */
  --cb-surface: #0A111E;
  --cb-head: #101B2E;
  --cb-line: rgba(255, 255, 255, .10);
  --cb-line-2: rgba(255, 255, 255, .06);
  --cb-ink: #E4EAF4;
  --cb-ink-2: #9FB0C9;
  --cb-accent: #9CC6FB;
  --cb-glow: 54, 128, 237;
  /* the only stops that sit under white glyphs */
  --cb-fill-1: #2E6FD0;
  --cb-fill-2: #1B4E9E;
  /* success is a STATE, not a brand colour; #0CA678 under white is 2.9:1, so
     the copied pill uses the darker half of the site's own green ramp */
  --cb-ok-1: #0E9E72;
  --cb-ok-2: #087F5B;
  --cb-sel: rgba(54, 128, 237, .35);

  --cb-ease: cubic-bezier(.34, 1.4, .64, 1);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 22px 0;
  border: 1px solid var(--cb-line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--cb-head) 0%, var(--cb-surface) 62px);
  color: var(--cb-ink);
  box-shadow: 0 14px 30px -18px rgba(8, 16, 30, .55),
              0 2px 6px -3px rgba(8, 16, 30, .3);
  transition: transform .24s var(--cb-ease), border-color .22s ease, box-shadow .24s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. HEADER — language chip + copy
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-codeblock.pg-cb .pg-codeblock-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 12px 10px 14px;
  border: 0;
  background: transparent;
}
/* hairline that fades at both ends instead of butting into the rounded corners */
.pg-root .pg-codeblock.pg-cb .pg-codeblock-head::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent,
              rgba(var(--cb-glow), .45) 18%, rgba(var(--cb-glow), .45) 82%, transparent);
}

.pg-root .pg-codeblock.pg-cb .pg-codeblock-lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-inline-size: 0;
  padding: 4px 11px;
  border: 1px solid rgba(var(--cb-glow), .3);
  border-radius: 999px;
  background: rgba(var(--cb-glow), .16);
  color: var(--cb-accent);
  font-family: 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .1em;
  text-transform: uppercase;
  /* a long language name wraps rather than being cut */
  white-space: normal;
  overflow-wrap: anywhere;
}
/* the little chevron mark that makes the chip read as "code" — pure CSS, so
   the JS template needs no icon */
.pg-root .pg-codeblock.pg-cb .pg-codeblock-lang::before {
  content: "</>";
  flex: 0 0 auto;
  opacity: .75;
  letter-spacing: 0;
}

.pg-root .pg-codeblock.pg-cb .pg-codeblock-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  min-block-size: 32px;
  padding: 5px 14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cb-fill-1), var(--cb-fill-2));
  color: #fff;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 16px -9px rgba(var(--cb-glow), .95),
              inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: background .22s ease, transform .2s var(--cb-ease), box-shadow .22s ease;
}
.pg-root .pg-codeblock.pg-cb .pg-codeblock-copy i { font-size: 11px; }

/* Copied confirmation. The JS swaps the icon and label and adds `.on` for
   ~1.4s; green is the state signal, not a brand colour. */
.pg-root .pg-codeblock.pg-cb .pg-codeblock-copy.on {
  background: linear-gradient(135deg, var(--cb-ok-1), var(--cb-ok-2));
  color: #fff;
  box-shadow: 0 8px 16px -9px rgba(12, 166, 120, .9),
              inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. THE CODE ITSELF
   ═══════════════════════════════════════════════════════════════════════════
   `white-space: pre` is non-negotiable: generated output is full of ASCII
   tables and box art, and wrapping destroys it. Overflow is therefore
   HORIZONTAL, and the scroll shadows below are what stop that from silently
   hiding the right-hand side. There is deliberately NO max-block-size — long
   code scrolls with the page rather than inside a second scroller. */
body:not(.admin-shell) .pg-root .pg-codeblock.pg-cb pre {
  margin: 0;
  padding: 16px 18px 18px;
  border: 0;
  border-radius: 0;
  background-color: var(--cb-surface);
  color: var(--cb-ink);
  font-family: 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  font-variant-ligatures: none;
  tab-size: 4;
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;

  /* ── SCROLL SHADOWS ─────────────────────────────────────────────────────
     Four background layers. The two "cover" layers are painted in the surface
     colour and pinned to the CONTENT (`local`), so they slide away as you
     scroll; the two "shadow" layers are pinned to the ELEMENT (`scroll`) and
     are revealed underneath. Net effect: an edge shade appears only on the
     side that actually has content hidden, and disappears at each end — with
     no JS and no resize observer. */
  background-image:
    linear-gradient(to right,  var(--cb-surface), rgba(10, 17, 30, 0)),
    linear-gradient(to left,   var(--cb-surface), rgba(10, 17, 30, 0)),
    linear-gradient(to right,  rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)),
    linear-gradient(to left,   rgba(0, 0, 0, .55), rgba(0, 0, 0, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 18px 100%, 18px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* The inner <code> must contribute NOTHING — the shells set this too, but at
   (0,2,1) it loses to the site-wide `code:not(.hljs)…` rule at (0,4,2), which
   is what painted the text blue on a tinted plate. */
body:not(.admin-shell) .pg-root .pg-codeblock.pg-cb pre code {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  white-space: inherit;
}

/* Selection inside the block reads as brand rather than the OS default blue-on-
   blue, which is nearly invisible on this surface. */
.pg-root .pg-codeblock.pg-cb pre::selection,
.pg-root .pg-codeblock.pg-cb pre code::selection { background: var(--cb-sel); color: #fff; }
.pg-root .pg-codeblock.pg-cb pre::-moz-selection,
.pg-root .pg-codeblock.pg-cb pre code::-moz-selection { background: var(--cb-sel); color: #fff; }

/* Always-visible, styled scrollbar. On a horizontal scroller a hidden overlay
   scrollbar is the difference between "there is more to the right" and "the
   text is cut off". */
.pg-root .pg-codeblock.pg-cb pre { scrollbar-width: thin; scrollbar-color: rgba(var(--cb-glow), .55) transparent; }
.pg-root .pg-codeblock.pg-cb pre::-webkit-scrollbar { block-size: 10px; }
.pg-root .pg-codeblock.pg-cb pre::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .05);
  border-radius: 0 0 13px 13px;
}
.pg-root .pg-codeblock.pg-cb pre::-webkit-scrollbar-thumb {
  background: rgba(var(--cb-glow), .5);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. HOVER — the "after" state
   ═══════════════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  body:not(.admin-shell) .pg-root .pg-codeblock.pg-cb:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--cb-glow), .42);
    box-shadow: 0 22px 40px -20px rgba(var(--cb-glow), .5),
                0 3px 10px -5px rgba(8, 16, 30, .35);
  }
  body:not(.admin-shell) .pg-root .pg-codeblock.pg-cb .pg-codeblock-copy:hover {
    background: linear-gradient(135deg, #3A7CDC, var(--cb-fill-2));
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -10px rgba(var(--cb-glow), 1),
                inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  /* the confirmation must not revert to blue while it is still showing */
  body:not(.admin-shell) .pg-root .pg-codeblock.pg-cb .pg-codeblock-copy.on:hover {
    background: linear-gradient(135deg, #10AE7E, var(--cb-ok-2));
    box-shadow: 0 12px 22px -10px rgba(12, 166, 120, 1),
                inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  body:not(.admin-shell) .pg-root .pg-codeblock.pg-cb pre::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--cb-glow), .8);
    background-clip: content-box;
  }
}
body:not(.admin-shell) .pg-root .pg-codeblock.pg-cb .pg-codeblock-copy:active {
  transform: translateY(0) scale(.96);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. FOCUS
   ═══════════════════════════════════════════════════════════════════════════
   The site-wide reset kills the outline and forces `border-radius:6px`, so the
   pill radius is restated. The inner ring is the block's own header colour, so
   the halo reads as a gap rather than a second border. The <pre> is focusable
   by keyboard scrolling in several browsers — ring it too, or a keyboard user
   scrolling the code has no idea what has focus. */
body:not(.admin-shell) .pg-root .pg-codeblock.pg-cb .pg-codeblock-copy:focus-visible {
  outline: none;
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--cb-head),
              0 0 0 6px rgba(var(--cb-glow), .7);
}
body:not(.admin-shell) .pg-root .pg-codeblock.pg-cb pre:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(var(--cb-glow), .6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
  .pg-root .pg-codeblock.pg-cb { margin: 18px 0; border-radius: 13px; }
  .pg-root .pg-codeblock.pg-cb .pg-codeblock-head { padding: 9px 10px 9px 11px; gap: 8px; }
  .pg-root .pg-codeblock.pg-cb .pg-codeblock-lang { font-size: 10px; padding: 3px 9px; }
  /* 36px — the copy button is the only control here and it must stay tappable */
  .pg-root .pg-codeblock.pg-cb .pg-codeblock-copy { min-block-size: 36px; padding: 6px 15px; font-size: 12px; }
  body:not(.admin-shell) .pg-root .pg-codeblock.pg-cb pre {
    padding: 14px 14px 16px;
    font-size: 12.5px;
    line-height: 1.65;
    background-size: 26px 100%, 26px 100%, 14px 100%, 14px 100%;
  }
  .pg-root .pg-codeblock.pg-cb pre::-webkit-scrollbar { block-size: 12px; }
}

/* Very narrow: the header stacks so a long language name never squeezes the
   copy button down to an icon. `space-between` leaves the copy pill flush left
   on its own row rather than stranded right — same reasoning as the result
   header's action row. */
@media (max-width: 380px) {
  .pg-root .pg-codeblock.pg-cb .pg-codeblock-copy { inline-size: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. RTL — code stays LTR
   ═══════════════════════════════════════════════════════════════════════════
   Source code, ASCII tables and box art are inherently left-to-right; letting
   them inherit an RTL direction reverses the columns and destroys the art. The
   chrome around them still mirrors. */
[dir="rtl"] .pg-root .pg-codeblock.pg-cb pre { direction: ltr; text-align: start; }

/* ═══════════════════════════════════════════════════════════════════════════
   8. DARK MODE
   ═══════════════════════════════════════════════════════════════════════════
   The surface does NOT change — it is dark in both themes by design. What
   changes is separation: on a white card the block needs a cast shadow; on a
   near-black card that shadow is invisible, so it needs a rim instead. */
body.theme-dark .pg-root .pg-codeblock.pg-cb {
  border-color: rgba(255, 255, 255, .13);
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .9),
              0 0 0 1px rgba(var(--cb-glow), .1);
}
@media (hover: hover) and (pointer: fine) {
  body:not(.admin-shell).theme-dark .pg-root .pg-codeblock.pg-cb:hover {
    border-color: rgba(var(--cb-glow), .45);
    box-shadow: 0 22px 40px -20px rgba(0, 0, 0, .95),
                0 0 0 1px rgba(var(--cb-glow), .22);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. REDUCED MOTION + PRINT
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pg-root .pg-codeblock.pg-cb,
  .pg-root .pg-codeblock.pg-cb .pg-codeblock-copy { transition: none; }
  body:not(.admin-shell) .pg-root .pg-codeblock.pg-cb:hover,
  body:not(.admin-shell) .pg-root .pg-codeblock.pg-cb .pg-codeblock-copy:hover,
  body:not(.admin-shell) .pg-root .pg-codeblock.pg-cb .pg-codeblock-copy:active { transform: none; }
}

@media print {
  .pg-root .pg-codeblock.pg-cb {
    border-color: #c9d2e0;
    background: #fff;
    color: #10203a;
    box-shadow: none;
  }
  .pg-root .pg-codeblock.pg-cb .pg-codeblock-copy { display: none; }
  body:not(.admin-shell) .pg-root .pg-codeblock.pg-cb pre {
    background-color: #fff;
    background-image: none;
    color: #10203a;
    /* wrapping is the lesser evil on paper — there is no scrollbar */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}