/* =============================================================================
   AIToolsay — Tool-page ACTIVITY HISTORY
   -----------------------------------------------------------------------------
   The "Activity History" band that closes the generator on every tool page:
   header band → guest CTA / hint → the list of past generations → empty state.
   Loaded once by ai-tool-shell.blade.php (≈2,000 tools) and
   ai-writers-shell.blade.php (the long-form writers).

   ── SPECIFICITY: EVERY SELECTOR HERE CARRIES `.pg-hist-shell` ──────────────
   Both shells ship their own history CSS in inline <style> blocks that sit
   AFTER this file's <link>, so an equal-specificity rule there wins on source
   order. What has to be cleared:

     ai-tool-shell      .pg-hist-item / .pg-hi-title / …             (0,1,0)
                        .pg-hist-item-hdr:hover                      (0,1,1)
                        body.theme-dark .pg-hist-item-body           (0,2,1)
                        body.theme-dark .pg-root .pg-hist-count      (0,3,1)  ←
     ai-writers-shell   .pg-root .pg-hist-item                       (0,2,0)
                        .pg-root .pg-hist-item:hover                 (0,2,1)
                        body.theme-dark .pg-root .pg-hist-item       (0,3,1)  ←
     custom.ltr.css     body:not(.admin-shell):not(.theme-dark)
                          button:focus-visible                       (0,3,2)  ←
     floating-widgets   .card a:hover  (inline <style> before </body>) (0,2,1)

   `.pg-hist-shell` (a new wrapper element added to BOTH shells) puts every
   rule here one class ahead across the board:
       base (0,3,0) · dark (0,4,1) · focus (0,5,1)
   Drop the wrapper and the shells silently take the design back — exactly the
   failure ai-trust-strip.css documents, where dark mode never got its redesign.

   NOTE the wrapper is deliberately NOT called `.pg-hist-wrap`: ai-writers-shell
   already carries a stale `.pg-root .pg-hist-wrap{margin-top:28px}` block (plus
   a whole dead `.pg-hist-head-row` kit for markup that no longer exists). A
   fresh name means none of that dead CSS is resurrected by this redesign.

   ── LAYOUT KEYS OFF THE SECTION'S OWN WIDTH, NOT THE VIEWPORT ──────────────
   The history sits in `col-lg-9`, so with the sidebar up it gets ~55% of the
   viewport. `.pg-hist-shell` is the query container; a viewport media query
   would collapse the row to its phone layout on a full-width page and keep the
   desktop layout in a 600px column. Type scale and touch-target sizing DO stay
   on viewport queries — those track the physical screen and the pointer.

   ── COLOUR ────────────────────────────────────────────────────────────────
   `--ah-1/2/3` are INK tokens; `--ah-fill-1/2` are the only ones that ever go
   under white text or white glyphs. In dark mode the fills drop to the measured
   AA ramp (#2E6FD0 / #1B4E9E) — see ai-contrast-fix.css for why `#60A4F5` under
   white is 2.58:1 and must never be a fill.
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   0. TOKENS + QUERY CONTAINER
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-hist-shell {
  /* brand ink ramp (never under white text) */
  --ah-2: #3680ED;
  --ah-3: #2060C0;
  /* the only stops that sit under white glyphs */
  --ah-fill-1: #3680ED;
  --ah-fill-2: #2060C0;
  --ah-glow: 54, 128, 237;

  --ah-surface: #fff;
  --ah-surface-2: #fbfcfe;
  --ah-surface-3: #f6f8fc;
  --ah-line: #e6ebf3;
  --ah-line-soft: #eef2f7;

  --ah-ink: #16202c;
  --ah-ink-2: #5b6779;
  --ah-ink-3: #8a94a3;
  --ah-ink-hover: #2060C0;

  --ah-tint: rgba(54, 128, 237, .085);
  /* a white gloss over a white card is a no-op — the sheen is brand-tinted in
     light mode and only becomes white where the canvas is dark */
  --ah-sheen: rgba(54, 128, 237, .16);

  /* destructive is SEMANTIC, not brand: a delete that turns brand-blue on
     hover reads as "open", which is the action right next to it */
  --ah-danger-ink: #C1272D;
  --ah-danger-tint: rgba(229, 72, 77, .10);
  --ah-danger-line: rgba(229, 72, 77, .30);

  --ah-radius: 16px;
  --ah-ease: cubic-bezier(.34, 1.4, .64, 1);
  --ah-ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  container-type: inline-size;
  display: block;
  margin: 30px 0 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. HEADER BAND — icon chip · title + subtitle · count pill
   ═══════════════════════════════════════════════════════════════════════════
   Grid, not a wrapping flex. As a flex row the count pill wraps to its own line
   but keeps `margin-inline-start:auto` and strands itself against the right
   edge level with nothing — and *whether* it wraps depends on how long the
   translated title is, so no margin override can be conditioned on it. */
.pg-root .pg-hist-shell .pg-hist-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "ic txt count";
  align-items: center;
  gap: 13px;
  margin: 0 0 15px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ah-ink);
  font-size: inherit;
  font-weight: inherit;
}

.pg-root .pg-hist-shell .pg-hh-ic {
  grid-area: ic;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 13px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, var(--ah-fill-1), var(--ah-fill-2));
  color: #fff;
  font-size: 15px;
  box-shadow: 0 10px 20px -10px rgba(var(--ah-glow), .85),
              inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .3s var(--ah-ease-pop), box-shadow .25s ease;
}
/* the shells paint `.pg-hist-header i { color: var(--pg-blue) }` — the glyph
   sits on a brand fill here, so it has to be forced back to inherit */
.pg-root .pg-hist-shell .pg-hh-ic i { color: inherit; font-size: inherit; }

.pg-root .pg-hist-shell .pg-hh-txt {
  grid-area: txt;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-inline-size: 0;
}
.pg-root .pg-hist-shell .pg-hh-title {
  font-size: 17.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.022em;
  color: var(--ah-ink);
  overflow-wrap: anywhere;
}
.pg-root .pg-hist-shell .pg-hh-sub {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ah-ink-2);
  overflow-wrap: anywhere;
}

.pg-root .pg-hist-shell .pg-hist-count {
  grid-area: count;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  flex-shrink: 0;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid rgba(var(--ah-glow), .22);
  background: var(--ah-tint);
  color: var(--ah-3);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  white-space: nowrap;
}
.pg-root .pg-hist-shell .pg-hist-count b { font-size: 14px; font-weight: 800; }
.pg-root .pg-hist-shell .pg-hist-count span { opacity: .62; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   2. HINT BANNER — "currently showing as the open result"
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-hist-shell .pg-hist-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid rgba(var(--ah-glow), .22);
  background: linear-gradient(135deg, rgba(var(--ah-glow), .11), rgba(var(--ah-glow), .04));
  color: var(--ah-3);
  font-size: 12.8px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 1px 2px rgba(var(--ah-glow), .06);
}
.pg-root .pg-hist-shell .pg-hist-hint i {
  flex-shrink: 0;
  font-size: 15px;
  color: var(--ah-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. GUEST CTA — "login for unlimited generations"
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-hist-shell .pg-cta-login {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "ic txt btn";
  align-items: center;
  gap: 15px;
  margin: 0 0 14px;
  padding: 16px 18px;
  border: 0;
  border-radius: 16px;
  /* deeper than the ink ramp: this whole panel carries white text */
  background: linear-gradient(118deg, #2E6FD0 0%, #3680ED 46%, #1B4E9E 100%);
  color: #fff;
  box-shadow: 0 18px 34px -20px rgba(var(--ah-glow), .9),
              inset 0 1px 0 rgba(255, 255, 255, .18);
}
.pg-root .pg-hist-shell .pg-cta-login::after {
  content: '';
  position: absolute;
  inset-block-start: -55%;
  inset-inline-end: -6%;
  inline-size: 220px;
  block-size: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 68%);
  pointer-events: none;
  z-index: -1;
}
.pg-root .pg-hist-shell .pg-cta-ic {
  grid-area: ic;
  flex-shrink: 0;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 13px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 255, 255, .17);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 18px;
}
.pg-root .pg-hist-shell .pg-cta-txt { grid-area: txt; min-inline-size: 0; }
.pg-root .pg-hist-shell .pg-cta-title {
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.012em;
  color: #fff;
  overflow-wrap: anywhere;
}
.pg-root .pg-hist-shell .pg-cta-sub {
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  /* the shells also dim this with `opacity:.92`; stacking that on top of the
     alpha below lands at .83 on a saturated blue, so opacity is reset here and
     the fade lives entirely in the colour */
  opacity: 1;
  color: rgba(255, 255, 255, .9);
  overflow-wrap: anywhere;
}
.pg-root .pg-hist-shell .pg-cta-btn {
  grid-area: btn;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* the shells force `width:100%` below 560px of VIEWPORT, which is the wrong
     axis here — the panel is a grid, so `auto` already stretches the button
     across both columns once it drops to its own row (and only then) */
  inline-size: auto;
  padding: 10px 18px;
  border-radius: 11px;
  background: #fff;
  color: #1B4E9E;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(8, 20, 40, .5);
  transition: transform .22s var(--ah-ease), box-shadow .22s ease, color .18s ease;
}
.pg-root .pg-hist-shell .pg-cta-btn i {
  font-size: 12px;
  transition: transform .25s var(--ah-ease-pop);
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. THE LIST
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-hist-shell .pg-hist-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pg-root .pg-hist-shell .pg-hist-item {
  position: relative;
  border: 1.5px solid var(--ah-line);
  border-radius: var(--ah-radius);
  background: linear-gradient(180deg, var(--ah-surface) 0%, var(--ah-surface-2) 100%);
  box-shadow: 0 1px 2px rgba(16, 26, 40, .04);
  overflow: hidden;
  transition: transform .24s var(--ah-ease),
              border-color .2s ease,
              box-shadow .24s ease;
}

/* ── Row header: number · title+meta · actions ──────────────────────────────
   Grid rather than flex so the phone layout can drop the meta row onto a full
   line of its own (see the container query in §8) without new markup. */
.pg-root .pg-hist-shell .pg-hist-item-hdr {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "num main act";
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  background: transparent;
  cursor: pointer;
}
/* the shells tint the header on hover; all hover painting moved to the card so
   the inset accent rail below is never covered up */
.pg-root .pg-hist-shell .pg-hist-item-hdr:hover { background: transparent; }

/* Hover sheen. Brand-tinted, because a white gloss on a white card is a no-op
   — it only ever showed in dark mode. `--ah-sheen` flips to white on dark. */
.pg-root .pg-hist-shell .pg-hist-item-hdr::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: -70%;
  inline-size: 42%;
  background: linear-gradient(100deg, transparent, var(--ah-sheen) 46%, transparent);
  transform: skewX(-14deg);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

/* Every child is lifted above the sheen EXPLICITLY — `> *` would miss
   .pg-hi-title / .pg-hi-meta-row once .pg-hi-main goes `display:contents` on
   phones, and they would then paint under the sweep. */
.pg-root .pg-hist-shell .pg-hi-num,
.pg-root .pg-hist-shell .pg-hi-main,
.pg-root .pg-hist-shell .pg-hi-title,
.pg-root .pg-hist-shell .pg-hi-meta-row,
.pg-root .pg-hist-shell .pg-hi-actions { position: relative; z-index: 1; }

/* ── Rank chip ── */
.pg-root .pg-hist-shell .pg-hi-num {
  grid-area: num;
  flex-shrink: 0;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  background: var(--ah-tint);
  color: var(--ah-3);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(var(--ah-glow), .14);
  transition: background .24s ease, color .24s ease,
              transform .3s var(--ah-ease-pop), box-shadow .24s ease;
}

/* ── Title + meta ── */
.pg-root .pg-hist-shell .pg-hi-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-inline-size: 0;
}
/* NOT truncated. The shells clip this with nowrap + ellipsis, which hides the
   end of every prompt-derived title; it wraps here instead. */
.pg-root .pg-hist-shell .pg-hi-title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ah-ink);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  transition: color .2s ease;
}

.pg-root .pg-hist-shell .pg-hi-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.pg-root .pg-hist-shell .pg-hi-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-inline-size: 100%;
  padding: 4px 11px;
  border: 1px solid var(--ah-line);
  border-radius: 999px;
  background: var(--ah-surface);
  color: var(--ah-ink-2);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.pg-root .pg-hist-shell .pg-hi-pill i {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--ah-2);
}
/* The TOOL pill is the row's primary identifier — this list is global across
   all 2,000 tools, so it is the field that actually tells two rows apart. It
   carries a filled icon plate where .model only gets a flat tint, which is the
   whole hierarchy: tool first, model second. Casing is left alone for the same
   reason as .model — "AI News Article Generator" uppercased wraps the row. */
.pg-root .pg-hist-shell .pg-hi-pill.tool {
  background: linear-gradient(135deg, rgba(var(--ah-glow), .15), rgba(var(--ah-glow), .08));
  border-color: rgba(var(--ah-glow), .34);
  color: var(--ah-3);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}
.pg-root .pg-hist-shell .pg-hi-pill.tool > span { overflow-wrap: anywhere; }
/* Solid plate, white glyph — the measured AA fill, not brand blue on tint. */
.pg-root .pg-hist-shell .pg-hi-pill.tool i {
  display: grid;
  place-items: center;
  inline-size: 17px;
  block-size: 17px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ah-fill-1), var(--ah-fill-2));
  color: #fff;
  font-size: 8.5px;
}

/* The model pill keeps its own casing: uppercasing a provider string as long as
   "NVIDIA: Nemotron 3 Ultra" pushes it past the row on its own, and the shells
   were already cutting it to 20 characters to compensate. */
.pg-root .pg-hist-shell .pg-hi-pill.model {
  background: var(--ah-tint);
  border-color: rgba(var(--ah-glow), .24);
  color: var(--ah-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}
.pg-root .pg-hist-shell .pg-hi-pill.model > span { overflow-wrap: anywhere; }

/* ── Actions ── */
.pg-root .pg-hist-shell .pg-hi-actions {
  grid-area: act;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.pg-root .pg-hist-shell .pg-hi-del,
.pg-root .pg-hist-shell .pg-hi-open {
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border-radius: 11px;
  display: inline-grid;
  place-items: center;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              transform .22s var(--ah-ease), box-shadow .22s ease;
}

.pg-root .pg-hist-shell .pg-hi-del {
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--ah-ink-3);
}
.pg-root .pg-hist-shell .pg-hi-open {
  border: 1.5px solid var(--ah-line);
  background: var(--ah-surface);
  color: var(--ah-ink-3);
}
.pg-root .pg-hist-shell .pg-hi-open i {
  transition: transform .25s var(--ah-ease-pop);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. HOVER — the "after" state, desktop pointers only
   ═══════════════════════════════════════════════════════════════════════════
   Gated behind (hover:hover) and (pointer:fine) so a tap never leaves a card
   stuck lifted with a filled chip. */
@media (hover: hover) and (pointer: fine) {
  .pg-root .pg-hist-shell .pg-hist-item:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--ah-glow), .42);
    /* the inset is the left accent rail — an inset shadow follows the corner
       radius, which a 3px ::before bar cannot (see the rejected top hairline
       on the trust strip and the prompt composer) */
    box-shadow: inset 3px 0 0 0 var(--ah-2),
                0 20px 38px -20px rgba(var(--ah-glow), .58),
                0 4px 12px -8px rgba(16, 26, 40, .12);
  }
  .pg-root .pg-hist-shell .pg-hist-item:hover .pg-hist-item-hdr::after {
    opacity: 1;
    inset-inline-start: 130%;
    transition: inset-inline-start .85s cubic-bezier(.22, .61, .36, 1), opacity .2s ease;
  }
  .pg-root .pg-hist-shell .pg-hist-item:hover .pg-hi-num {
    background: linear-gradient(135deg, var(--ah-fill-1), var(--ah-fill-2));
    color: #fff;
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 10px 18px -9px rgba(var(--ah-glow), .8),
                inset 0 1px 0 rgba(255, 255, 255, .3);
  }
  .pg-root .pg-hist-shell .pg-hist-item:hover .pg-hi-title { color: var(--ah-ink-hover); }
  .pg-root .pg-hist-shell .pg-hist-item:hover .pg-hi-pill {
    border-color: rgba(var(--ah-glow), .26);
  }
  .pg-root .pg-hist-shell .pg-hist-item:hover .pg-hi-pill.tool,
  .pg-root .pg-hist-shell .pg-hist-item:hover .pg-hi-pill.model {
    border-color: rgba(var(--ah-glow), .45);
    background: rgba(var(--ah-glow), .16);
  }
  .pg-root .pg-hist-shell .pg-hist-item:hover .pg-hi-open,
  .pg-root .pg-hist-shell .pg-hi-open:hover {
    background: linear-gradient(135deg, var(--ah-fill-1), var(--ah-fill-2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 18px -9px rgba(var(--ah-glow), .85),
                inset 0 1px 0 rgba(255, 255, 255, .28);
  }
  .pg-root .pg-hist-shell .pg-hist-item:hover .pg-hi-open i { transform: translateX(2px); }
  .pg-root .pg-hist-shell .pg-hi-open:hover { transform: translateY(-1px); }
  .pg-root .pg-hist-shell .pg-hi-open:hover i { transform: translateX(3px); }

  .pg-root .pg-hist-shell .pg-hi-del:hover {
    background: var(--ah-danger-tint);
    border-color: var(--ah-danger-line);
    color: var(--ah-danger-ink);
    transform: translateY(-1px);
  }

  .pg-root .pg-hist-shell .pg-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -10px rgba(8, 20, 40, .6);
    color: #1B4E9E;
  }
  .pg-root .pg-hist-shell .pg-cta-btn:hover i { transform: translateX(3px); }

  .pg-root .pg-hist-shell .pg-hist-empty:hover .empty-ico {
    transform: translateY(-2px) scale(1.04);
  }
}

/* An affordance that only exists on hover is unusable on touch: on a coarse
   pointer the open chip is filled at rest so the row reads as tappable. */
@media (hover: none) {
  .pg-root .pg-hist-shell .pg-hi-open {
    background: linear-gradient(135deg, var(--ah-fill-1), var(--ah-fill-2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 7px 14px -8px rgba(var(--ah-glow), .75);
  }
  .pg-root .pg-hist-shell .pg-hi-del { color: var(--ah-ink-2); }
}

/* Press feedback — works on touch, where :hover never resolves */
.pg-root .pg-hist-shell .pg-hist-item:active { transform: translateY(-1px); }
.pg-root .pg-hist-shell .pg-hi-open:active,
.pg-root .pg-hist-shell .pg-hi-del:active { transform: scale(.93); }
.pg-root .pg-hist-shell .pg-cta-btn:active { transform: translateY(0); }

/* Keyboard focus inside a card lights the card up the same way a pointer does */
.pg-root .pg-hist-shell .pg-hist-item:focus-within {
  border-color: rgba(var(--ah-glow), .42);
  box-shadow: inset 3px 0 0 0 var(--ah-2),
              0 16px 30px -20px rgba(var(--ah-glow), .5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. FOCUS RINGS
   ═══════════════════════════════════════════════════════════════════════════
   custom.ltr.css kills outlines site-wide and rings focus with a box-shadow at
   `body:not(.admin-shell):not(.theme-dark) button:focus-visible` — (0,3,2),
   which beats any plain component rule silently. Matching its `body` prefix
   puts these at (0,5,1). Ring with box-shadow, like the rest of the site. */
body:not(.admin-shell) .pg-root .pg-hist-shell .pg-hi-open:focus-visible,
body:not(.admin-shell) .pg-root .pg-hist-shell .pg-hi-del:focus-visible {
  outline: none;
  border-radius: 11px;
  box-shadow: 0 0 0 3px rgba(var(--ah-glow), .38);
}
body:not(.admin-shell) .pg-root .pg-hist-shell .pg-hi-open:focus-visible {
  background: linear-gradient(135deg, var(--ah-fill-1), var(--ah-fill-2));
  border-color: transparent;
  color: #fff;
}
body:not(.admin-shell) .pg-root .pg-hist-shell .pg-hi-del:focus-visible {
  background: var(--ah-danger-tint);
  border-color: var(--ah-danger-line);
  color: var(--ah-danger-ink);
}
body:not(.admin-shell) .pg-root .pg-hist-shell .pg-cta-btn:focus-visible {
  outline: none;
  border-radius: 11px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .55),
              0 8px 18px -9px rgba(8, 20, 40, .55);
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. EXPANDED BODY  (kept in step — the shells only reveal it via `.open`)
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-hist-shell .pg-hist-item-body {
  border-top: 1px solid var(--ah-line-soft);
  background: var(--ah-surface);
}
.pg-root .pg-hist-shell .pg-hist-body-acts {
  display: flex;
  align-items: center;
  gap: 7px;
  justify-content: flex-end;
  padding: 11px 16px;
  background: var(--ah-surface-3);
  border-bottom: 1px solid var(--ah-line-soft);
}
.pg-root .pg-hist-shell .pg-hist-body-acts .pg-openout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-end: auto;
  padding: 8px 15px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ah-fill-1), var(--ah-fill-2));
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 16px -9px rgba(var(--ah-glow), .8);
  transition: transform .2s var(--ah-ease), box-shadow .2s ease;
}
.pg-root .pg-hist-shell .pg-hist-body-acts .pg-icon-btn {
  inline-size: 34px;
  block-size: 34px;
  border-radius: 10px;
  border: 1.5px solid var(--ah-line);
  background: var(--ah-surface);
  color: var(--ah-ink-2);
  font-size: 12.5px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              transform .2s var(--ah-ease);
}
@media (hover: hover) and (pointer: fine) {
  .pg-root .pg-hist-shell .pg-hist-body-acts .pg-openout-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px -10px rgba(var(--ah-glow), .9);
  }
  .pg-root .pg-hist-shell .pg-hist-body-acts .pg-icon-btn:hover {
    background: var(--ah-tint);
    border-color: rgba(var(--ah-glow), .32);
    color: var(--ah-3);
    transform: translateY(-1px);
  }
}
.pg-root .pg-hist-shell .pg-hist-rendered { padding: 20px 22px; }

/* ═══════════════════════════════════════════════════════════════════════════
   8. EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════ */
.pg-root .pg-hist-shell .pg-hist-empty {
  position: relative;
  overflow: hidden;
  padding: 40px 26px;
  border: 1.5px dashed rgba(var(--ah-glow), .3);
  border-radius: 18px;
  background: radial-gradient(120% 92% at 50% -18%, rgba(var(--ah-glow), .11), transparent 62%),
              var(--ah-surface);
  text-align: center;
  color: var(--ah-ink-2);
}
.pg-root .pg-hist-shell .pg-hist-empty .empty-ico {
  inline-size: 62px;
  block-size: 62px;
  margin: 0 0 15px;
  border-radius: 19px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, var(--ah-fill-1), var(--ah-fill-2));
  color: #fff;
  font-size: 23px;
  box-shadow: 0 16px 28px -14px rgba(var(--ah-glow), .85),
              inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .3s var(--ah-ease-pop);
}
.pg-root .pg-hist-shell .pg-hist-empty h4 {
  margin: 0 0 8px;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.018em;
  color: var(--ah-ink);
}
.pg-root .pg-hist-shell .pg-hist-empty p {
  margin: 0 auto;
  max-inline-size: 46ch;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ah-ink-2);
}
.pg-root .pg-hist-shell .pg-hist-empty a {
  color: var(--ah-3);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--ah-glow), .35);
}
.pg-root .pg-hist-shell .pg-hist-empty a:hover { border-bottom-color: currentColor; }

/* ═══════════════════════════════════════════════════════════════════════════
   9. RESPONSIVE — container queries, because the section lives in col-lg-9
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet / narrow column: tighten, but keep the three-column row. */
@container (max-width: 620px) {
  .pg-root .pg-hist-shell .pg-hist-item-hdr { gap: 12px; padding: 14px 15px; }
  .pg-root .pg-hist-shell .pg-hi-meta-row { gap: 6px; }
}

/* Phone-width column: the meta pills get a full line of their own.
   `display:contents` promotes the title and the pill row to grid items of the
   header, so the layout changes with no extra markup. */
@container (max-width: 480px) {
  .pg-root .pg-hist-shell .pg-hist-item-hdr {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "num title act"
      "meta meta meta";
    align-items: start;
    column-gap: 11px;
    row-gap: 11px;
    padding: 13px 13px;
  }
  .pg-root .pg-hist-shell .pg-hi-main { display: contents; }
  .pg-root .pg-hist-shell .pg-hi-title {
    grid-area: title;
    align-self: center;
    font-size: 14px;
  }
  .pg-root .pg-hist-shell .pg-hi-meta-row { grid-area: meta; }
  .pg-root .pg-hist-shell .pg-hi-num { align-self: start; margin-block-start: 1px; }
  .pg-root .pg-hist-shell .pg-hi-actions { align-self: start; }
}

/* Very narrow: header goes 2×2 so title/subtitle/count keep one left rail —
   a wrapping flex would strand the count against the right edge. */
@container (max-width: 430px) {
  .pg-root .pg-hist-shell .pg-hist-header {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "ic  txt"
      ".   count";
    row-gap: 10px;
  }
  .pg-root .pg-hist-shell .pg-hist-count { justify-self: start; }

  .pg-root .pg-hist-shell .pg-cta-login {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "ic  txt"
      "btn btn";
    row-gap: 13px;
  }
  .pg-root .pg-hist-shell .pg-cta-btn { justify-content: center; }

  .pg-root .pg-hist-shell .pg-hist-empty { padding: 32px 18px; }
}

/* Fallback where container queries are unavailable. Approximates the same
   intent from the viewport, assuming the sidebar case (the common one). */
@supports not (container-type: inline-size) {
  @media (max-width: 991.98px) {
    .pg-root .pg-hist-shell .pg-hist-item-hdr { gap: 12px; padding: 14px 15px; }
  }
  @media (max-width: 767.98px) {
    .pg-root .pg-hist-shell .pg-hist-item-hdr {
      grid-template-areas:
        "num title act"
        "meta meta meta";
      align-items: start;
      row-gap: 11px;
      column-gap: 11px;
      padding: 13px;
    }
    .pg-root .pg-hist-shell .pg-hi-main { display: contents; }
    .pg-root .pg-hist-shell .pg-hi-title { grid-area: title; align-self: center; }
    .pg-root .pg-hist-shell .pg-hi-meta-row { grid-area: meta; }
    .pg-root .pg-hist-shell .pg-hi-num { align-self: start; }
    .pg-root .pg-hist-shell .pg-hi-actions { align-self: start; }
  }
  @media (max-width: 575.98px) {
    .pg-root .pg-hist-shell .pg-hist-header {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "ic txt" ". count";
      row-gap: 10px;
    }
    .pg-root .pg-hist-shell .pg-hist-count { justify-self: start; }
    .pg-root .pg-hist-shell .pg-cta-login {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "ic txt" "btn btn";
      row-gap: 13px;
    }
    .pg-root .pg-hist-shell .pg-cta-btn { justify-content: center; }
  }
}

/* Type scale and touch targets DO key off the viewport — they track the
   physical screen and the pointer, not the column width. */
@media (max-width: 575.98px) {
  .pg-root .pg-hist-shell { margin: 24px 0 4px; }
  .pg-root .pg-hist-shell .pg-hh-ic { inline-size: 38px; block-size: 38px; border-radius: 12px; font-size: 14px; }
  .pg-root .pg-hist-shell .pg-hh-title { font-size: 16px; }
  .pg-root .pg-hist-shell .pg-hh-sub { font-size: 12px; }
  .pg-root .pg-hist-shell .pg-hi-num { inline-size: 34px; block-size: 34px; border-radius: 11px; font-size: 12.5px; }
  /* 40px chips — a 36px control is under the comfortable tap target */
  .pg-root .pg-hist-shell .pg-hi-del,
  .pg-root .pg-hist-shell .pg-hi-open { inline-size: 40px; block-size: 40px; border-radius: 12px; font-size: 13px; }
  .pg-root .pg-hist-shell .pg-hi-pill { padding: 4px 10px; font-size: 10px; }
  .pg-root .pg-hist-shell .pg-hi-pill.tool,
  .pg-root .pg-hist-shell .pg-hi-pill.model { font-size: 10.5px; }
  .pg-root .pg-hist-shell .pg-hist-rendered { padding: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. RTL — the rail, the sheen sweep and the arrow all have a direction
   ═══════════════════════════════════════════════════════════════════════════ */
[dir="rtl"] .pg-root .pg-hist-shell .pg-hist-item-hdr::after { transform: skewX(14deg); }
@media (hover: hover) and (pointer: fine) {
  [dir="rtl"] .pg-root .pg-hist-shell .pg-hist-item:hover {
    box-shadow: inset -3px 0 0 0 var(--ah-2),
                0 20px 38px -20px rgba(var(--ah-glow), .58),
                0 4px 12px -8px rgba(16, 26, 40, .12);
  }
  [dir="rtl"] .pg-root .pg-hist-shell .pg-hist-item:hover .pg-hi-open i { transform: translateX(-2px); }
  [dir="rtl"] .pg-root .pg-hist-shell .pg-hi-open:hover i { transform: translateX(-3px); }
  [dir="rtl"] .pg-root .pg-hist-shell .pg-cta-btn:hover i { transform: translateX(-3px); }
}
[dir="rtl"] .pg-root .pg-hist-shell .pg-hist-item:focus-within {
  box-shadow: inset -3px 0 0 0 var(--ah-2),
              0 16px 30px -20px rgba(var(--ah-glow), .5);
}
[dir="rtl"] .pg-root .pg-hist-shell .pg-hi-open i,
[dir="rtl"] .pg-root .pg-hist-shell .pg-cta-btn i { transform: scaleX(-1); }

/* ═══════════════════════════════════════════════════════════════════════════
   11. DARK MODE — a token swap plus the handful of hard-coded surfaces
   ═══════════════════════════════════════════════════════════════════════════
   Every selector still carries `.pg-hist-shell`, so these land at (0,4,1) and
   clear the shells' own `body.theme-dark .pg-root .pg-hist-*` rules at (0,3,1).
   `--ah-1/2/3` become LIGHT inks (they only ever colour text, glyphs, borders);
   `--ah-fill-*` drop to the measured AA ramp because they carry white. */
body.theme-dark .pg-root .pg-hist-shell {
  --ah-2: #6FA8F7;
  --ah-3: #9CC6FB;
  --ah-fill-1: #2E6FD0;
  --ah-fill-2: #1B4E9E;
  --ah-glow: 96, 164, 245;

  --ah-surface: #17171A;
  --ah-surface-2: #1A1A1E;
  --ah-surface-3: #1C1C1F;
  --ah-line: rgba(255, 255, 255, .09);
  --ah-line-soft: rgba(255, 255, 255, .07);

  --ah-ink: #F5F5F6;
  --ah-ink-2: #A0A0A6;
  --ah-ink-3: #7D838C;
  --ah-ink-hover: #A9CFFC;

  --ah-tint: rgba(54, 128, 237, .16);
  /* white on a dark canvas — the brand-tinted sheen disappears here */
  --ah-sheen: rgba(255, 255, 255, .07);

  --ah-danger-ink: #FF8085;
  --ah-danger-tint: rgba(255, 99, 105, .14);
  --ah-danger-line: rgba(255, 99, 105, .34);
}

body.theme-dark .pg-root .pg-hist-shell .pg-hist-item {
  background: linear-gradient(180deg, #17171A 0%, #1A1A1E 100%);
  border-color: var(--ah-line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
body.theme-dark .pg-root .pg-hist-shell .pg-hi-pill {
  background: var(--ah-surface-3);
  border-color: var(--ah-line);
  color: #C9C9CE;
}
body.theme-dark .pg-root .pg-hist-shell .pg-hi-pill.tool {
  background: linear-gradient(135deg, rgba(var(--ah-glow), .2), rgba(var(--ah-glow), .1));
  border-color: rgba(var(--ah-glow), .4);
  color: var(--ah-3);
}
body.theme-dark .pg-root .pg-hist-shell .pg-hi-pill.model {
  background: var(--ah-tint);
  border-color: rgba(var(--ah-glow), .3);
  color: var(--ah-3);
}
body.theme-dark .pg-root .pg-hist-shell .pg-hi-num {
  background: var(--ah-tint);
  color: var(--ah-3);
  box-shadow: inset 0 0 0 1px rgba(var(--ah-glow), .2);
}
body.theme-dark .pg-root .pg-hist-shell .pg-hist-count {
  background: var(--ah-tint);
  border-color: rgba(var(--ah-glow), .3);
  color: var(--ah-3);
}
body.theme-dark .pg-root .pg-hist-shell .pg-hi-open {
  background: var(--ah-surface-3);
  border-color: var(--ah-line);
  color: #B8BEC8;
}
body.theme-dark .pg-root .pg-hist-shell .pg-hist-hint {
  background: linear-gradient(135deg, rgba(var(--ah-glow), .16), rgba(var(--ah-glow), .07));
  border-color: rgba(var(--ah-glow), .3);
  color: var(--ah-3);
}
body.theme-dark .pg-root .pg-hist-shell .pg-hist-hint i { color: var(--ah-2); }
body.theme-dark .pg-root .pg-hist-shell .pg-hist-empty {
  background: radial-gradient(120% 92% at 50% -18%, rgba(var(--ah-glow), .13), transparent 62%),
              var(--ah-surface);
  border-color: rgba(var(--ah-glow), .3);
  color: var(--ah-ink-2);
}
body.theme-dark .pg-root .pg-hist-shell .pg-hist-empty h4 { color: var(--ah-ink); }
body.theme-dark .pg-root .pg-hist-shell .pg-hist-empty p { color: var(--ah-ink-2); }
body.theme-dark .pg-root .pg-hist-shell .pg-hist-empty a { color: var(--ah-3); }
body.theme-dark .pg-root .pg-hist-shell .pg-hist-item-body { background: var(--ah-surface); border-top-color: var(--ah-line-soft); }
body.theme-dark .pg-root .pg-hist-shell .pg-hist-body-acts {
  background: var(--ah-surface-3);
  border-bottom-color: var(--ah-line-soft);
}
body.theme-dark .pg-root .pg-hist-shell .pg-hist-body-acts .pg-icon-btn {
  background: #202024;
  border-color: var(--ah-line);
  color: #C9C9CE;
}
/* The CTA panel stays a brand gradient in both themes — it is the one surface
   that is supposed to be loud — but it drops its glow so it doesn't bloom on
   the dark canvas. */
body.theme-dark .pg-root .pg-hist-shell .pg-cta-login {
  box-shadow: 0 18px 34px -22px rgba(0, 0, 0, .9),
              inset 0 1px 0 rgba(255, 255, 255, .14);
}
body.theme-dark .pg-root .pg-hist-shell .pg-cta-btn { color: #14406E; }

/* Dark-mode hover restated: the light block's `:hover` rules are (0,4,x) and
   would otherwise beat these token-driven ones on source order for any
   property they both set. */
@media (hover: hover) and (pointer: fine) {
  body.theme-dark .pg-root .pg-hist-shell .pg-hist-item:hover {
    border-color: rgba(var(--ah-glow), .4);
    box-shadow: inset 3px 0 0 0 var(--ah-2),
                0 22px 40px -22px rgba(0, 0, 0, .85),
                0 0 0 1px rgba(var(--ah-glow), .1);
  }
  body.theme-dark .pg-root .pg-hist-shell .pg-hist-item:hover .pg-hi-pill {
    border-color: rgba(var(--ah-glow), .26);
  }
  body.theme-dark .pg-root .pg-hist-shell .pg-hist-item:hover .pg-hi-pill.model {
    background: rgba(var(--ah-glow), .22);
    border-color: rgba(var(--ah-glow), .45);
  }
  body.theme-dark .pg-root .pg-hist-shell .pg-hi-del:hover {
    background: var(--ah-danger-tint);
    border-color: var(--ah-danger-line);
    color: var(--ah-danger-ink);
  }
  body.theme-dark .pg-root .pg-hist-shell .pg-cta-btn:hover { color: #14406E; }
  [dir="rtl"] body.theme-dark .pg-root .pg-hist-shell .pg-hist-item:hover {
    box-shadow: inset -3px 0 0 0 var(--ah-2),
                0 22px 40px -22px rgba(0, 0, 0, .85),
                0 0 0 1px rgba(var(--ah-glow), .1);
  }
}
body.theme-dark .pg-root .pg-hist-shell .pg-hist-item:focus-within {
  border-color: rgba(var(--ah-glow), .4);
  box-shadow: inset 3px 0 0 0 var(--ah-2),
              0 18px 32px -22px rgba(0, 0, 0, .85);
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .pg-root .pg-hist-shell *,
  .pg-root .pg-hist-shell *::before,
  .pg-root .pg-hist-shell *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .pg-root .pg-hist-shell .pg-hist-item:hover,
  .pg-root .pg-hist-shell .pg-hist-item:active,
  .pg-root .pg-hist-shell .pg-hist-item:hover .pg-hi-num,
  .pg-root .pg-hist-shell .pg-hi-open:hover,
  .pg-root .pg-hist-shell .pg-hi-del:hover,
  .pg-root .pg-hist-shell .pg-cta-btn:hover { transform: none; }
  .pg-root .pg-hist-shell .pg-hist-item-hdr::after { display: none; }
}