/* ══════════════════════════════════════════════════════════════════════════
   /browser-extensions/{slug} — module-only components
   Scoped `.v2x.atd.atdx.cxd`, one class deeper than public-atd-detail.css, so
   these refine the shared kit and can never leak onto another detail page.
   Colours come from the ATD tokens and the §TONE6 ramp; every one is defined
   in the light block first and re-stated in the dark twin.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── §CXD-PERM) Permissions, ranked by risk ─────────────────────────────
   The risk word is the point of this list, so it gets its own column rather
   than a coloured border nobody can decode. Tints are the §TONE6 hues at list
   weight: emerald for low, amber for medium, rose for high. */
.v2x.atd.atdx.cxd .cxd-perms{ display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; }
.v2x.atd.atdx.cxd .cxd-perm{
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 15px; border-radius:13px;
  background-color:#F7F9FC; border:1px solid var(--line);
}
.v2x.atd.atdx.cxd .cxd-perm.is-low   { background-color:#EEF9F4; border-color:#CBEBDD; --perm:#08795A; }
.v2x.atd.atdx.cxd .cxd-perm.is-medium{ background-color:#FEF6E8; border-color:#F8E2BE; --perm:#A85B08; }
.v2x.atd.atdx.cxd .cxd-perm.is-high  { background-color:#FDEEF3; border-color:#F7D2E0; --perm:#BE185D; }
body.theme-dark .v2x.atd.atdx.cxd .cxd-perm{ background-color:rgba(255,255,255,.04); border-color:var(--dk-line-solid,#2C2C31); }
body.theme-dark .v2x.atd.atdx.cxd .cxd-perm.is-low   { background-color:rgba(16,185,129,.13); border-color:rgba(16,185,129,.28); --perm:#5FDD97; }
body.theme-dark .v2x.atd.atdx.cxd .cxd-perm.is-medium{ background-color:rgba(245,158,11,.13); border-color:rgba(245,158,11,.28); --perm:#F4BE60; }
body.theme-dark .v2x.atd.atdx.cxd .cxd-perm.is-high  { background-color:rgba(236,72,153,.13); border-color:rgba(236,72,153,.28); --perm:#F49AC8; }

.v2x.atd.atdx.cxd .cxd-perm-ic{
  flex:0 0 auto; width:28px; height:28px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  background-color:rgba(0,0,0,.05); color:var(--perm, var(--muted));
}
body.theme-dark .v2x.atd.atdx.cxd .cxd-perm-ic{ background-color:rgba(255,255,255,.07); }
.v2x.atd.atdx.cxd .cxd-perm-tx{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:2px; }
.v2x.atd.atdx.cxd .cxd-perm-h{ font-size:.92rem; font-weight:700; line-height:1.35; color:var(--ink); }
.v2x.atd.atdx.cxd .cxd-perm-p{ font-size:.83rem; line-height:1.5; color:var(--muted); }
.v2x.atd.atdx.cxd .cxd-perm-risk{
  flex:0 0 auto; align-self:center;
  font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--perm, var(--muted));
}
.v2x.atd.atdx.cxd .cxd-disclosure{
  display:flex; align-items:flex-start; gap:8px;
  margin:14px 0 0; font-size:.84rem; line-height:1.6; color:var(--muted);
}
.v2x.atd.atdx.cxd .cxd-disclosure svg{ flex:0 0 auto; margin-top:3px; opacity:.75; }

/* ── §CXD-SHOTS) Screenshots ────────────────────────────────────────────
   A plain responsive grid, not a slider: Swiper for three images is ~200KB of
   library to lay out three rectangles. */
.v2x.atd.atdx.cxd .cxd-shots{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap:14px; margin:0; padding:0; list-style:none;
}
.v2x.atd.atdx.cxd .cxd-shot{ margin:0; }
.v2x.atd.atdx.cxd .cxd-shot-fr{
  display:block; border-radius:14px; overflow:hidden;
  border:1px solid var(--line); background-color:var(--accent-soft2);
  box-shadow:0 1px 2px rgba(15,23,42,.05), 0 12px 26px -18px rgba(15,23,42,.30);
  transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .22s ease;
}
.v2x.atd.atdx.cxd .cxd-shot-fr img{ display:block; width:100%; height:auto; }
.v2x.atd.atdx.cxd .cxd-shot figcaption{ margin-top:8px; font-size:.79rem; line-height:1.45; color:var(--muted); }
body.theme-dark .v2x.atd.atdx.cxd .cxd-shot-fr{
  border-color:var(--dk-line-solid,#2C2C31); background-color:rgba(255,255,255,.05);
  box-shadow:0 1px 2px rgba(0,0,0,.45), 0 14px 30px -20px rgba(0,0,0,.75);
}
@media (hover:hover) and (pointer:fine){
  .v2x.atd.atdx.cxd a.cxd-shot-fr:hover{ transform:translateY(-3px); border-color:var(--accent); }
}

/* ── §CXD-VER) Version history ──────────────────────────────────────────
   Newest first, so the version number is the anchor and the date and notes
   hang off it. Tone cycles by position for the same reason the fact tiles do. */
.v2x.atd.atdx.cxd .cxd-vers{ display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; }
.v2x.atd.atdx.cxd .cxd-ver{
  display:flex; align-items:flex-start; gap:12px;
  padding:13px 15px; border-radius:13px;
  background-color:var(--t-bg); border:1px solid var(--t-line);
}
.v2x.atd.atdx.cxd .cxd-ver-n{
  flex:0 0 auto; min-width:62px; text-align:center;
  padding:4px 10px; border-radius:999px;
  background-color:var(--t-1p); color:#fff;
  font-family:var(--mono); font-size:.78rem; font-weight:700; line-height:1.5;
  box-shadow:0 2px 6px rgba(var(--t-rgb),.32);
}
.v2x.atd.atdx.cxd .cxd-ver-tx{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.v2x.atd.atdx.cxd .cxd-ver-d{
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--t-ink);
}
.v2x.atd.atdx.cxd .cxd-ver-p{ font-size:.86rem; line-height:1.55; color:var(--muted); }

@media (max-width:575.98px){
  .v2x.atd.atdx.cxd .cxd-shots{ grid-template-columns:1fr; }
  .v2x.atd.atdx.cxd .cxd-perm-risk{ display:none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   §CXD-WORKS) "Works in" — browser tiles
   ──────────────────────────────────────────────────────────────────────────
   Refines the shared .atd-plat kit for this page only. The tool page keeps the
   flat blue tiles; scoping four classes deep means nothing here can reach it.

   Each tile carries its browser's OWN brand hue through --bw, set from
   [data-browser] below. That is the whole idea: five identical blue chips told
   you nothing at a glance, whereas Firefox orange and Brave orange-red are
   recognised before the label is read. --bw-ink is a separate, darker value —
   the brand hue is the PLATE, never the text, because a mid-saturation brand
   colour on a white pill fails AA at this size.

   Tiles come in two states and they must not look alike: a linked tile is a
   real destination (the extension's listing in that browser's store) and lifts
   on hover, a plain tile is a statement of fact and only warms. Anything with
   no listing stays plain rather than becoming a dead link.
   ══════════════════════════════════════════════════════════════════════════ */

/* Even columns rather than ragged flex: the sidebar is ~360px, so this settles
   at two up on desktop AND on a phone, and the tiles stay the same width as
   each other instead of sizing to their labels.
   `min(100%,...)` is the guard that stops a 150px track overflowing a narrower
   container — auto-fill counts by the MAX of the track, so a bare 150px floor
   would spill on a 320px screen. */
.v2x.atd.atdx.cxd .atd-plats{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 150px), 1fr));
  gap:10px; align-items:stretch;
}

.v2x.atd.atdx.cxd .atd-plat{
  --bw:var(--tone-1, #8B5CF6);
  --bw-ink:var(--tone-2, #5B33C4);
  position:relative; isolation:isolate;
  display:flex; align-items:center; gap:11px;
  width:100%; padding:11px 13px;
  border:1px solid var(--line); border-radius:15px;
  background-color:#fff;
  font-size:.875rem; font-weight:650; color:var(--ink);
  text-decoration:none; overflow:hidden;
  transition:border-color 240ms ease, box-shadow 320ms ease,
             transform 340ms cubic-bezier(.16,1,.3,1), background-color 240ms ease;
}

/* The wash. A separate ::before rather than a background-image on the tile so
   the dark twin can restate background-color alone without wiping it — the
   `background` shorthand would reset the gradient every time. Sits at z-index 0
   under the content, and only fades in on hover. */
.v2x.atd.atdx.cxd .atd-plat::before{
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit;
  background-image:linear-gradient(135deg, color-mix(in srgb, var(--bw) 13%, transparent), transparent 62%);
  opacity:0; transition:opacity 300ms ease; pointer-events:none;
}
.v2x.atd.atdx.cxd .atd-plat > *{ position:relative; z-index:1; }

.v2x.atd.atdx.cxd .atd-plat .atd-plat-ic{
  flex:0 0 auto; width:34px; height:34px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  background-color:color-mix(in srgb, var(--bw) 14%, #fff);
  color:var(--bw-ink); font-size:1rem;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bw) 22%, transparent);
  transition:background-color 260ms ease, color 220ms ease, box-shadow 260ms ease,
             transform 380ms cubic-bezier(.16,1,.3,1);
}
/* `is-mono` in the shared kit paints the glyph flat black. These are brand
   marks and carry their own hue here, so that is overridden deliberately. */
.v2x.atd.atdx.cxd .atd-plat .atd-plat-ic.is-mono{ color:var(--bw-ink); }

/* Labels wrap onto a second line and are never clipped or ellipsised —
   "Vivaldi" and "Firefox" must both read in full at 320px. */
.v2x.atd.atdx.cxd .atd-plat .atd-plat-l{
  min-width:0; flex:1 1 auto; line-height:1.3;
  overflow-wrap:anywhere; text-overflow:clip; white-space:normal;
}

/* The go-arrow only exists on linked tiles. Held at low opacity so the tile
   reads calm at rest, then travels a couple of pixels on hover — movement the
   eye catches without the label shifting. */
.v2x.atd.atdx.cxd .atd-plat .cxd-bw-go{
  flex:0 0 auto; display:inline-flex; color:var(--bw-ink); opacity:.4;
  transition:opacity 220ms ease, transform 340ms cubic-bezier(.16,1,.3,1);
}

@media (hover:hover) and (pointer:fine){
  /* Linked: lifts, takes the brand hue, plate goes solid. */
  .v2x.atd.atdx.cxd .atd-plat.is-link:hover{
    border-color:color-mix(in srgb, var(--bw) 55%, transparent);
    box-shadow:0 10px 24px -8px color-mix(in srgb, var(--bw) 42%, transparent);
    transform:translateY(-3px); text-decoration:none; color:var(--ink);
  }
  .v2x.atd.atdx.cxd .atd-plat.is-link:hover::before{ opacity:1; }
  .v2x.atd.atdx.cxd .atd-plat.is-link:hover .atd-plat-ic{
    background-color:var(--bw); color:#fff; transform:scale(1.06) rotate(-3deg);
    box-shadow:0 4px 12px -2px color-mix(in srgb, var(--bw) 55%, transparent);
  }
  .v2x.atd.atdx.cxd .atd-plat.is-link:hover .atd-plat-ic.is-mono{ color:#fff; }
  .v2x.atd.atdx.cxd .atd-plat.is-link:hover .cxd-bw-go{ opacity:1; transform:translate(2px,-2px); }

  /* Plain: warms only. No lift, because there is nowhere to go. */
  .v2x.atd.atdx.cxd .atd-plat:not(.is-link):hover{
    border-color:color-mix(in srgb, var(--bw) 34%, transparent);
  }
  .v2x.atd.atdx.cxd .atd-plat:not(.is-link):hover::before{ opacity:.65; }
  .v2x.atd.atdx.cxd .atd-plat:not(.is-link):hover .atd-plat-ic{
    background-color:color-mix(in srgb, var(--bw) 22%, #fff);
  }
}

/* Its own ring in the tile's hue. Declared on the page's own scope so the
   site-wide :focus-visible rules cannot double it up. */
body:not(.admin-shell) .v2x.atd.atdx.cxd .atd-plat.is-link:focus-visible{
  outline:none; border-color:var(--bw);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--bw) 45%, transparent),
             0 10px 24px -8px color-mix(in srgb, var(--bw) 35%, transparent);
}
.v2x.atd.atdx.cxd .atd-plat.is-link:active{ transform:translateY(-1px); }

/* ── Brand hues. Plate colour first, then the darker ink the glyph and label
      arrow actually use. Sampled from each browser's own identity; Vivaldi and
      Arc have no Font Awesome brand glyph, so they take the card's tone and
      read as "another browser" rather than pretending to a mark we cannot
      draw. ── */
.v2x.atd.atdx.cxd .cxd-bw[data-browser="chrome"] { --bw:#4285F4; --bw-ink:#1558C0; }
.v2x.atd.atdx.cxd .cxd-bw[data-browser="edge"]   { --bw:#0E9DBE; --bw-ink:#0A6E88; }
.v2x.atd.atdx.cxd .cxd-bw[data-browser="brave"]  { --bw:#FB542B; --bw-ink:#B8360F; }
.v2x.atd.atdx.cxd .cxd-bw[data-browser="opera"]  { --bw:#FF1B2D; --bw-ink:#B3121F; }
.v2x.atd.atdx.cxd .cxd-bw[data-browser="firefox"]{ --bw:#FF7139; --bw-ink:#C2410C; }
.v2x.atd.atdx.cxd .cxd-bw[data-browser="vivaldi"]{ --bw:#EF3939; --bw-ink:#B01F1F; }
.v2x.atd.atdx.cxd .cxd-bw[data-browser="arc"]    { --bw:#8B5CF6; --bw-ink:#5B33C4; }

/* ── Dark twin. background-COLOR only: the wash lives on ::before and must
      survive. The brand hues are unchanged — a brand colour that shifts by
      theme stops being a brand colour — but the inks lighten, because the
      daylight --bw-ink is unreadable on a dark plate. ── */
body.theme-dark .v2x.atd.atdx.cxd .atd-plat{
  background-color:var(--dk-surface-2, #17171B);
  border-color:var(--dk-line-solid, #2C2C31);
  color:var(--dk-text, #F4F4F5);
}
body.theme-dark .v2x.atd.atdx.cxd .atd-plat .atd-plat-ic,
body.theme-dark .v2x.atd.atdx.cxd .atd-plat .atd-plat-ic.is-mono{
  background-color:color-mix(in srgb, var(--bw) 24%, transparent);
  color:color-mix(in srgb, var(--bw) 72%, #fff);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--bw) 34%, transparent);
}
body.theme-dark .v2x.atd.atdx.cxd .atd-plat .cxd-bw-go{ color:color-mix(in srgb, var(--bw) 66%, #fff); }
@media (hover:hover) and (pointer:fine){
  body.theme-dark .v2x.atd.atdx.cxd .atd-plat.is-link:hover{
    color:var(--dk-text, #F4F4F5);
    box-shadow:0 12px 26px -10px color-mix(in srgb, var(--bw) 55%, transparent);
  }
  body.theme-dark .v2x.atd.atdx.cxd .atd-plat.is-link:hover .atd-plat-ic,
  body.theme-dark .v2x.atd.atdx.cxd .atd-plat.is-link:hover .atd-plat-ic.is-mono{
    background-color:var(--bw); color:#fff;
  }
  body.theme-dark .v2x.atd.atdx.cxd .atd-plat:not(.is-link):hover .atd-plat-ic{
    background-color:color-mix(in srgb, var(--bw) 34%, transparent);
  }
}

/* No browser support for color-mix() — every tile still has to be legible, so
   the plate falls back to the flat brand hue with white ink. */
@supports not (color: color-mix(in srgb, red, blue)){
  .v2x.atd.atdx.cxd .atd-plat .atd-plat-ic{ background-color:var(--bw); color:#fff; box-shadow:none; }
  .v2x.atd.atdx.cxd .atd-plat .atd-plat-ic.is-mono{ color:#fff; }
  .v2x.atd.atdx.cxd .atd-plat::before{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .v2x.atd.atdx.cxd .atd-plat,
  .v2x.atd.atdx.cxd .atd-plat .atd-plat-ic,
  .v2x.atd.atdx.cxd .atd-plat .cxd-bw-go,
  .v2x.atd.atdx.cxd .atd-plat::before{ transition:none !important; }
  .v2x.atd.atdx.cxd .atd-plat.is-link:hover{ transform:none; }
  .v2x.atd.atdx.cxd .atd-plat.is-link:hover .atd-plat-ic{ transform:none; }
  .v2x.atd.atdx.cxd .atd-plat.is-link:hover .cxd-bw-go{ transform:none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   §CXD-LANG) Languages — flag pills
   ──────────────────────────────────────────────────────────────────────────
   Matched to the AI Directory's card (v2/public/tool/sidebar.blade.php): a
   BARE rectangular flag at 17px, no frame, no circular plate. An earlier pass
   here put the flag in a round emerald frame; it looked deliberate on its own
   but the two pages then disagreed about what a language pill is, and this
   card exists to read the same on both.

   THE BUG THIS STILL FIXES: public-atd-detail.css sets
   `.v2x.atd.atdx .atd-langpill{ padding:6px 13px; gap:0 }`. That was right
   while the ATDX modules stored languages as free text with no code to resolve
   a flag from — the pill was evened up because nothing sat in the left slot.
   This page HAS flags now, so that rule glued the flag to the first letter.
   Restated below, one class deeper, at the tool page's own geometry.
   ══════════════════════════════════════════════════════════════════════════ */
.v2x.atd.atdx.cxd .atd-langs{ display:flex; flex-wrap:wrap; gap:8px; }

.v2x.atd.atdx.cxd .atd-langpill{
  --lg:var(--tone-1, #10B981);
  --lg-ink:var(--tone-2, #08795A);
  display:inline-flex; align-items:center;
  gap:7px;                          /* the gap:0 fix — the tool page's value */
  padding:6px 13px 6px 8px;         /* tight left edge = room for the flag */
  border:1px solid var(--line); border-radius:var(--r-pill, 999px);
  background-color:#fff; color:var(--ink);
  font-size:.82rem; font-weight:600; line-height:1.35; cursor:default;
  transition:border-color 240ms ease, background-color 240ms ease,
             box-shadow 300ms ease, transform 340ms cubic-bezier(.16,1,.3,1);
}

/* The flag is the image itself. A hairline keeps the largely-white flags
   (Japan, Poland, Indonesia) from dissolving into a white pill — the frame
   that used to do this job is gone, so the rule sits on the image. */
.v2x.atd.atdx.cxd .atd-langpill img{
  flex:0 0 auto; border-radius:3px;
  box-shadow:0 0 0 1px rgba(0,0,0,.10);
}

/* No flag for this language (LanguageVocabulary::FLAGLESS, or a legacy
   hand-typed value): the blade emits no image, so the pill evens its padding
   rather than leaving a gap where a flag would have been. */
.v2x.atd.atdx.cxd .atd-langpill.is-noflag{ padding-inline-start:13px; }

.v2x.atd.atdx.cxd .atd-langpill-l{
  min-width:0; overflow-wrap:anywhere; white-space:normal; text-overflow:clip;
}

/* Static pills, so the response stays quiet: a 1px lift and the card's own
   emerald. No fill, nothing that suggests they can be clicked. */
@media (hover:hover) and (pointer:fine){
  .v2x.atd.atdx.cxd .atd-langpill:hover{
    border-color:color-mix(in srgb, var(--lg) 42%, transparent);
    background-color:color-mix(in srgb, var(--lg) 6%, #fff);
    box-shadow:0 4px 12px -6px color-mix(in srgb, var(--lg) 45%, transparent);
    transform:translateY(-1px);
  }
}

body.theme-dark .v2x.atd.atdx.cxd .atd-langpill{
  background-color:var(--dk-surface-2, #17171B);
  border-color:var(--dk-line-solid, #2C2C31);
  color:var(--dk-text, #F4F4F5);
}
/* By night the dark hairline disappears; a light one separates the flag from
   the surface instead. */
body.theme-dark .v2x.atd.atdx.cxd .atd-langpill img{ box-shadow:0 0 0 1px rgba(255,255,255,.16); }
@media (hover:hover) and (pointer:fine){
  body.theme-dark .v2x.atd.atdx.cxd .atd-langpill:hover{
    background-color:color-mix(in srgb, var(--lg) 14%, var(--dk-surface-2, #17171B));
    border-color:color-mix(in srgb, var(--lg) 46%, transparent);
  }
}

@supports not (color: color-mix(in srgb, red, blue)){
  .v2x.atd.atdx.cxd .atd-langpill:hover{ border-color:#8ED9BC; background-color:#F3FBF7; }
}

@media (prefers-reduced-motion:reduce){
  .v2x.atd.atdx.cxd .atd-langpill{ transition:none !important; }
  .v2x.atd.atdx.cxd .atd-langpill:hover{ transform:none; }
}

/* ── §CXD-WORKS-RESP) Narrow viewports. The grid already reflows; these only
      tighten the box so two tiles still fit side by side on a small phone
      without the label breaking mid-word. ── */
@media (max-width:399.98px){
  .v2x.atd.atdx.cxd .atd-plats{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 132px), 1fr)); gap:8px; }
  .v2x.atd.atdx.cxd .atd-plat{ padding:10px 11px; gap:9px; font-size:.83rem; }
  .v2x.atd.atdx.cxd .atd-plat .atd-plat-ic{ width:30px; height:30px; border-radius:10px; font-size:.92rem; }
  .v2x.atd.atdx.cxd .atd-langpill{ font-size:.82rem; }
}