:root { --ink:#0f172a; --muted:#64748b; --accent:#4f46e5; --header-1:#3a0d1b; --header-2:#6b1d36; --header-3:#7c2742; --header-4:#8f3350; --footer-1:#3a0d1b; --footer-2:#6b1d36; --footer-3:#7c2742; --root-start:#7c2742; --root-mid:#8f3350; --root-end:#a23e5e; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#1e293b; background:#f8fafc; }
p { margin:0; }
button { font-family:inherit; cursor:pointer; }
.row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
header { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid #e2e8f0; }
.sub { font-size:13px; color:rgba(255,255,255,.85); margin-top:2px; }
.toolbar-row { padding:6px 20px 8px; }
.toolbar-main { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.toolbar-left, .toolbar-right { display:flex; align-items:center; gap:12px; min-width:0; }
/* search leads the toolbar; the tree-only buttons sit at the far right */
.toolbar-right { flex:0 1 620px; order:-1; }
.toolbar-left { margin-left:auto; }
.toolbar-hint { margin-left:4px; padding-left:12px; border-left:1px solid #cbd5e1; color:var(--muted); font-size:12px; white-space:nowrap; }
.toolbar-hint kbd { font:600 11px/1 inherit; font-family:inherit; padding:2px 6px; border:1px solid #cbd5e1; border-bottom-width:2px; border-radius:4px; background:#f8fafc; color:#475569; }
.search { position:relative; flex:0 1 400px; min-width:200px; max-width:400px; }
.search svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:#94a3b8; }
.search input { width:100%; height:34px; padding:0 34px; border:1px solid #cbd5e1; border-radius:8px; background:#f8fafc; font-size:14px; color:#1e293b; }
.search input::placeholder { font-size:12px; color:#64748b; }
.search input:hover { border-color:#94a3b8; background:#fff; }
.search input:focus { outline:0; border-color:#818cf8; background:#fff; box-shadow:0 0 0 3px #e0e7ff; }
#clear-search { position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:none; color:var(--muted); display:none; }
.search.has-text #clear-search { display:block; }
.search-kbd { position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:11px; font-weight:600; line-height:1; padding:3px 7px; border:1px solid #cbd5e1; border-bottom-width:2px; border-radius:4px; background:#fff; color:#64748b; pointer-events:none; }
.search input:focus ~ .search-kbd, .search.has-text .search-kbd { display:none; }
.toolbar-secondary { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:8px; }
.toolbar-secondary label,
.toolbar-secondary .filter-label { flex:none; font:700 13px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#334155; }
.toolbar-secondary #group-by { flex:none; }
.filters { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid #cbd5e1; border-radius:999px; background:#fff; font-size:13px; color:#334155; }
.chip img { width:16px; height:16px; }
.chip:hover { background:#f1f5f9; }
.chip[aria-pressed="true"] { background:#4338ca; border-color:#312e81; color:#fff; font-weight:700; box-shadow:0 0 0 3px rgba(99,102,241,.3), 0 2px 6px rgba(49,46,129,.35); }
.chip[aria-pressed="true"]:hover { background:#3730a3; }
.chip[aria-pressed="true"]::before { content:"\2713"; font-weight:800; margin-right:-2px; }
.chip[aria-pressed="true"] img { background:#fff; border-radius:50%; padding:1px; box-sizing:content-box; }
.chip.reset { padding:6px 10px; border:1px solid #e2e8f0; border-radius:6px; background:#f1f5f9; color:#475569; font-weight:600; box-shadow:none; }
.chip.reset:hover { background:#e2e8f0; color:#334155; }
#status { color:var(--muted); font-size:13px; margin-left:auto; white-space:nowrap; }
main { padding:20px; }
/* Cards view: "Starting with A" sections, sized like the formula reference's A-Z view. Collapsed sections sit
   side by side as letter tiles; an open section takes the full width with its cards below. */
/* Tile minimum fits badge + count + chevron, so narrow windows drop a column instead of pushing the chevron out. */
#grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px 16px; align-items:start; }
#grid .list-cat.open { grid-column:1 / -1; margin:12px 0 24px; }
#grid .list-cat.open:first-child { margin-top:0; }
#app #grid .list-cat > header { display:block; margin:0; position:static; border:0; background:none; }
#app #grid .list-cat.open > header { margin-bottom:20px; }
#grid .list-cat h3 { display:flex; align-items:center; gap:14px; margin:0; font-size:20px; font-weight:800; color:var(--ink); }
#grid .list-cat .badge { width:50px; height:50px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:22px; }
#grid .list-cat .d { font-size:14px; font-weight:700; color:var(--muted); }
#grid .list-toggle { display:flex; align-items:center; gap:12px; width:100%; min-width:0; padding:10px 12px 10px 10px; border:1px solid #e2e8f0; border-radius:12px; background:#fff; font:inherit; color:inherit; text-align:left; }
#grid .list-toggle:hover { border-color:#e6a3b8; }
#grid .list-toggle:focus-visible { outline:3px solid #818cf8; outline-offset:2px; }
#grid .list-toggle .chev { display:flex; flex:none; margin-left:auto; padding-left:4px; color:var(--muted); }
#grid .list-toggle[aria-expanded="true"] .chev svg { transform:rotate(180deg); }
/* An open section's heading spans the page, so its chevron sits right after the count instead of at the far edge. */
#grid .list-cat.open .list-toggle .chev { margin-left:0; padding:4px; border:1px solid #e2e8f0; border-radius:999px; background:#fff; color:#475569; }
#grid .list-cat.open .list-toggle:hover .chev { border-color:#e6a3b8; color:var(--ink); }
#grid .list-cat:not(.open) h3 { font-size:16px; }
#grid .list-cat:not(.open) .badge { width:48px; height:48px; border-radius:12px; font-size:24px; }
#grid .list-cat.open .list-toggle { padding:0; border-color:transparent; background:none; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
.card { display:flex; min-width:0; padding:14px; background:#fff; border:1px solid #e2e8f0; border-radius:12px; text-decoration:none; color:inherit; }
/* hover: a pink tint, a maroon border with a ring and a slight lift, so it is clear which connector the pointer is on */
.card { transition:border-color .2s, background-color .2s, box-shadow .2s, transform .2s; }
.card:hover { border-color:#a23e5e; background:#fdf2f5; box-shadow:0 0 0 1px #a23e5e, 0 6px 16px -4px rgba(124,39,66,.3); transform:translateY(-1px); }
.card:focus-visible { outline:3px solid #818cf8; outline-offset:2px; }
/* the connector whose details were opened last, so it is easy to find again after closing them */
.card.current { border-color:#a23e5e; background:#fdf2f5; box-shadow:0 0 0 2px #a23e5e; }
/* Off-screen grid cards skip layout and paint until scrolled near (the tree measures its nodes, so it is left out). */
#grid .card { content-visibility:auto; contain-intrinsic-size:auto 200px; }
.card .icon { width:48px; height:48px; flex:none; border-radius:9px; object-fit:contain; background:#0f172a0d; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; color:#475569; padding:4px; }
.card .name { color:#0067b8; font-weight:700; font-size:16px; line-height:1.25; overflow-wrap:anywhere; }
.card .badges { display:flex; gap:6px; min-height:16px; margin-top:4px; }
.card .badges img { width:16px; height:16px; }
.card .by { font-size:13px; color:#334155; margin-top:6px; }
.card-body { display:flex; flex-direction:column; align-items:stretch; width:100%; min-width:0; gap:10px; }
.card-heading { display:flex; align-items:center; gap:12px; min-width:0; }
/* Cards view: every icon sits at the top-left whatever the name's length, and "By:" is pinned to the bottom of the card
   on one line, so cards in a row line up. The full publisher is in the tooltip and the drawer. */
.card.big .card-heading { align-items:flex-start; }
.card.big .by { align-self:stretch; margin-top:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-title { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.card .description { font-size:14px; line-height:1.45; color:#334155; }
.card.mini .icon { width:40px; height:40px; border-radius:6px; padding:3px; }
.card.mini .by, .card.mini .description { display:none; }
.card.mini .card-body { gap:0; }
.card.mini .card-heading { gap:10px; }
#empty { text-align:center; color:var(--muted); padding:40px 0; }

#app { display:flex; flex-direction:column; height:100vh; height:100dvh; }
#app.cards-view { height:auto; min-height:100vh; }
header { position:static; }
#app.cards-view header { position:sticky; top:0; }
main { flex:1; min-height:0; padding:0; position:relative; display:flex; flex-direction:column; }
#app.cards-view main { padding:20px; display:block; }
[hidden] { display:none !important; }
.btns { display:flex; gap:8px; align-items:center; }
.btn, #group-by { padding:6px 12px; border:1px solid #cbd5e1; border-radius:7px; background:#fff; font-size:12px; font-weight:700; color:#475569; }
.btn-icon { vertical-align:-2px; margin-right:5px; }
.btn.primary { color:var(--accent); border-color:#c7d2fe; }
.btn.primary:hover { background:#eef2ff; }
.btn:hover { background:#f1f5f9; }
.seg { display:flex; flex:none; background:#e2e8f0; border:1px solid #cbd5e1; border-radius:10px; padding:3px; gap:2px; }
.seg button { border:0; background:none; padding:5px 14px; border-radius:6px; font-size:13px; font-weight:600; color:#475569; }
.seg button.active { background:#fff; color:var(--accent); font-weight:700; box-shadow:0 2px 4px rgba(0,0,0,.08); }
#tree-view { flex:1; min-height:0; overflow:auto; position:relative; cursor:grab; background-color:#f8fafc; background-image:radial-gradient(#cbd5e1 1px,transparent 1px); background-size:22px 22px; }
/* The canvas pans by dragging, scrolling and the zoom panel, so it hides its own scrollbars like the other explorers; only the page scrollbar shows. */
#tree-view { scrollbar-width:none; }
#tree-view::-webkit-scrollbar { display:none; }
#tree-view.dragging { cursor:grabbing; user-select:none; }
#sizer { position:relative; }
#canvas { position:absolute; left:0; top:0; transform-origin:0 0; padding:40px 120px 40px 40px; display:inline-block; width:max-content; }
#connections { position:absolute; left:0; top:0; pointer-events:none; }
#tree { position:relative; }
.branch { display:flex; align-items:center; gap:70px; }
.kids-col { display:flex; flex-direction:column; gap:12px; }
.root-node { display:flex; align-items:center; gap:14px; min-width:300px; padding:22px 24px; border-radius:14px; background:linear-gradient(135deg,var(--root-start),var(--root-mid) 55%,var(--root-end)); color:#fff; box-shadow:0 8px 20px rgba(96,43,23,.25); }
.root-logo { width:46px; height:46px; border-radius:10px; background:rgba(255,255,255,.2); border:1.5px solid rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center; font-size:22px; overflow:hidden; }
.root-logo img { width:28px; height:28px; display:block; object-fit:contain; }
.root-title { font-size:20px; font-weight:800; line-height:1.2; }
.root-sub { font-size:12px; opacity:.85; margin-top:4px; }
.cat-node { display:flex; align-items:center; gap:14px; width:350px; flex:none; padding:16px; background:#fff; border:2px solid; border-radius:14px; cursor:pointer; box-shadow:0 2px 8px rgba(15,23,42,.06); }
.cat-node:hover { box-shadow:0 4px 14px rgba(15,23,42,.14); }
.cat-badge { width:48px; height:48px; flex:none; border-radius:10px; color:#fff; font-weight:800; font-size:22px; display:flex; align-items:center; justify-content:center; }
.cat-text { flex:1; min-width:0; }
.cat-title { font-size:17px; font-weight:800; color:#0f172a; line-height:1.25; }
.cat-desc { font-size:12px; color:var(--muted); margin-top:4px; }
.cat-count { border:1px solid #e2e8f0; background:#f8fafc; border-radius:8px; padding:8px 10px; font-size:14px; font-weight:700; color:#1e293b; }
.card.mini { flex-direction:row; align-items:center; gap:10px; padding:8px 10px; }
.card.mini .icon { width:40px; height:40px; margin:0; flex:none; font-size:18px; }
.card.mini .name { font-size:13px; }
.card.mini .by { display:none; }
.card.mini .badges { margin-top:2px; gap:4px; }
.card.mini .badges img { width:14px; height:14px; }
.card-body { display:flex; flex-direction:column; min-width:0; }
.card.big .card-body { align-items:flex-start; }
#controls { position:absolute; top:16px; right:28px; z-index:10; display:flex; flex-direction:column; width:46px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.12); align-items:center; cursor:default; }
#controls button { border:0; background:none; width:100%; padding:10px 0; font-size:18px; color:#334155; }
#controls hr { width:70%; border:0; border-top:1px solid #e2e8f0; margin:0; }
#controls #zoom-level { font-size:11px; font-weight:700; padding:12px 0; color:#334155; }
#controls button { display:flex; align-items:center; justify-content:center; }
#controls button:hover { background:#f1f5f9; color:#0f172a; }
#controls button:focus-visible { outline:3px solid #818cf8; outline-offset:-3px; border-radius:8px; }
/* Vertical panel only; below 700px fme-site.css turns it into a horizontal bar. */
@media (min-width:701px) {
  #controls button:first-child { border-radius:9px 9px 0 0; }
  #controls button:last-child { border-radius:0 0 9px 9px; }
}

.cat-node.sub { width:300px; padding:10px 12px; border-radius:12px; }
.cat-node.sub .cat-badge { width:34px; height:34px; font-size:15px; }
.cat-node.sub .cat-title { font-size:14px; }
.cat-node.sub .cat-desc { font-size:11px; margin-top:2px; }
.card.mini { width:270px; }
.root-node { flex:none; }
.root-node.toggle { cursor:pointer; }
.root-node.toggle:focus-visible { outline:3px solid #818cf8; outline-offset:3px; }
.root-chev { display:flex; align-items:center; justify-content:center; flex:none; width:32px; height:32px; margin-left:auto; border-radius:8px; background:rgba(255,255,255,.18); color:#fff; }

/* The filter chips live in the Filters sheet (app.js moves the panel there) */
.filter-panel { display:contents; }
/* Grouping: a "Group: Licence" button with the native select laid invisibly over it, so the platform
   picker and keyboard behaviour are kept. */
.grouping:not([hidden]) { position:relative; display:inline-flex; flex:none; }
.grouping label { display:none; }
.grouping-btn { display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 10px 0 12px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; font-size:13px; font-weight:700; color:#334155; white-space:nowrap; }
.grouping-prefix { font-weight:600; color:#64748b; }
.grouping #group-by { position:absolute; inset:0; width:100%; height:100%; padding:0; opacity:0; cursor:pointer; }
.grouping:hover .grouping-btn { background:#f1f5f9; }
.grouping:focus-within .grouping-btn { border-color:#818cf8; box-shadow:0 0 0 3px #e0e7ff; }
.filters-btn { display:none; flex:none; align-items:center; gap:6px; height:36px; padding:0 12px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; font-size:13px; font-weight:700; color:#334155; }
.filters-btn:hover { background:#f1f5f9; }
/* Filters applied: tint the button so it reads as "on", not as another white toggle option */
.filters-btn.has-active { background:#eef2ff; border-color:#4338ca; color:#3730a3; }
.filters-btn.has-active:hover { background:#e0e7ff; }
.filter-count { min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:#4338ca; color:#fff; font-size:12px; line-height:20px; text-align:center; }
.active-filters { display:none; }
.active-pill { display:inline-flex; align-items:center; min-height:24px; padding:0 8px; border:1px solid #312e81; border-radius:999px; background:#4338ca; color:#fff; font-size:11px; font-weight:600; }
.filter-sheet { position:fixed; inset:auto 0 0 0; width:100%; max-width:none; max-height:85vh; margin:0; padding:0; border:0; border-radius:16px 16px 0 0; background:#fff; color:#1e293b; box-shadow:0 -8px 30px rgba(15,23,42,.25); overflow:auto; }
.filter-sheet[open] { animation:sheet-up .2s ease-out; }
.filter-sheet::backdrop { background:rgba(15,23,42,.45); }
@keyframes sheet-up { from { transform:translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .filter-sheet[open] { animation:none; } }
html:has(.filter-sheet[open]) { overflow:hidden; }
.sheet-inner { padding:12px 16px calc(16px + env(safe-area-inset-bottom)); }
.sheet-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.sheet-head h2 { outline:none; margin:0; font-size:18px; font-weight:800; color:var(--ink); }
.sheet-close { width:44px; height:44px; margin-right:-10px; border:0; background:none; font-size:18px; color:#475569; }
#sheet-body .filter-panel { display:flex; flex-direction:column; gap:8px; }
#sheet-body label, #sheet-body .filter-label { font-size:13px; font-weight:700; color:#334155; margin-top:6px; }
#sheet-body .filters { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
#sheet-body .chip { justify-content:flex-start; min-height:44px; font-size:13px; }
#sheet-body .chip.reset { grid-column:1 / -1; justify-content:center; }
/* Divider before the publisher chips (pick-one), so they read as their own set */
#sheet-body .chip-sep { grid-column:1 / -1; height:1px; margin:2px 0; background:#cbd5e1; }
.sheet-hint { margin:10px 0 0; font-size:12px; color:var(--muted); }
.sheet-done { width:100%; height:48px; margin-top:12px; border:0; border-radius:10px; background:#4338ca; color:#fff; font-size:15px; font-weight:700; }
.sheet-done:hover { background:#3730a3; }

/* about / faq */
  #app.cards-view .about-cue { position:fixed; }
  .about-cue.hidden { display:none; }
  .about-cue { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:25; padding:6px 14px; border:1px solid #f1c9d5; border-radius:999px; background:rgba(255,255,255,.92); color:#8f3350; font-size:12.5px; font-weight:700; text-decoration:none; box-shadow:0 4px 10px rgba(15,23,42,.12); }
  .about-cue:hover { background:#fdf2f5; }
  .about-cue:focus-visible { outline:3px solid #e6a3b8; outline-offset:2px; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .seo-content { padding:48px 24px; background:#fff; border-top:1px solid #e2e8f0; }
  .seo-inner { max-width:900px; margin:0 auto; }
  .seo-content h2 { margin-bottom:12px; color:var(--ink); font-size:26px; font-weight:800; }
  .seo-content h3 { margin:28px 0 10px; color:var(--ink); font-size:19px; font-weight:700; }
  .seo-content p { margin:0 0 12px; color:#475569; font-size:15px; line-height:1.7; }
  .seo-content code { color:#6b1d36; background:#fdf2f5; padding:2px 5px; border-radius:4px; }
  .seo-browse, .seo-faq details { border:1px solid #e2e8f0; border-radius:8px; margin:10px 0; }
  .seo-browse { border-color:#f1c9d5; background:#fdf2f5; }
  .seo-browse summary, .seo-faq summary { padding:12px 16px; color:var(--ink); font-weight:700; cursor:pointer; }
  .seo-browse[open] { padding:0; background:#fdf2f5; }
  /* Only the top heading is pink; the panels inside get their own shading below. */
  .seo-browse[open] > summary { border-bottom:1px solid #f1c9d5; background:#fdf2f5; }
  .seo-browse-content { padding:1px 16px 16px; border-radius:0 0 7px 7px; background:#fff; }
  .seo-browse h3 { margin:20px 0 6px; font-size:16px; }
  .seo-browse p { margin-bottom:8px; font-size:14px; }
  .seo-browse ul { padding-left:20px; list-style:disc; }
  .seo-browse li { margin:6px 0; color:#475569; font-size:14px; line-height:1.6; }
  .seo-browse a, .seo-more-tools a { color:#8f3350; text-decoration:underline; text-underline-offset:3px; }
  /* Microsoft and Partner connectors are collapsed panels; partners are split into one small panel per letter. */
  .seo-browse .seo-group { margin:12px 0; border:1px solid #f1c9d5; border-radius:8px; }
  /* Levels: pink top heading, white Microsoft / Partner panels outlined in pink (faint pink when hovered or open),
     plain white panels with a grey outline inside them. */
  .seo-browse .seo-group { background:#fff; }
  .seo-browse .seo-group > summary { padding:12px 16px; border-radius:7px; font-size:16px; color:#8f3350; background:#fff; }
  .seo-browse .seo-group > summary:hover, .seo-browse .seo-group[open] > summary { background:#fef8fa; }
  .seo-browse .seo-group[open] > summary { border-bottom:1px solid #f1c9d5; border-radius:7px 7px 0 0; }
  .seo-browse .seo-group-content { padding:4px 16px 12px; }
  .seo-browse .seo-sub, .seo-browse .seo-letter { margin:6px 0; border:1px solid #e2e8f0; border-radius:6px; }
  .seo-browse .seo-sub summary, .seo-browse .seo-letter summary { padding:8px 12px; border-radius:5px; font-size:14px; background:#fff; }
  .seo-browse .seo-sub summary:hover, .seo-browse .seo-letter summary:hover { background:#f8fafc; }
  .seo-browse .seo-sub[open] summary, .seo-browse .seo-letter[open] summary { border-bottom:1px solid #e2e8f0; border-radius:5px 5px 0 0; }
  .seo-browse .seo-sub p { margin:8px 12px 0; }
  .seo-browse .seo-sub ul, .seo-browse .seo-letter ul { margin:8px 12px 10px; }
  .seo-faq details { border-color:#f1c9d5; background:#fdf2f5; }
  .seo-faq summary { background:#fdf2f5; }
  .seo-faq details[open] { background:#fdf2f5; }
  .seo-faq details[open] summary { border-bottom:1px solid #f1c9d5; }
  .seo-faq-content { padding:1px 16px 14px; border-radius:0 0 7px 7px; background:#fff; }
  .seo-faq details p { margin:0; }
  .seo-more-tools { margin-top:28px !important; }
.about-cue { position:absolute; }
#app.cards-view .about-cue { position:fixed; }

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  width: 48px;
  height: 48px;
  border: 1px solid #8f3350;
  border-radius: 50%;
  background: #0f172a;
  color: #fff;
  box-shadow: 0 4px 14px rgba(15,23,42,.25);
  font-size: 25px;
  line-height: 1;
}
.back-to-top:hover { background: #8f3350; }
.back-to-top:focus-visible { outline: 3px solid #e6a3b8; outline-offset: 3px; }

@media (max-width: 600px) {
  .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}
@media (max-width: 1250px) {
  .toolbar-main { flex-wrap:wrap; }
  .toolbar-right { flex:1 1 560px; }
  /* drop the zoom hint so search, view toggle and tree buttons stay on one row */
  .toolbar-hint { display:none; }
}
@media (max-width: 1100px) {
  .toolbar-right { flex-basis:560px; }
  .toolbar-hint { font-size:13px; }
}
/* Above phone width: one toolbar row like the other explorers. The filter chips live in the Filters sheet and the
   grouping is the Group button (app.js); the count and active filters sit below. */
@media (min-width: 761px) {
  /* Row 1 holds every control at all widths above phones: labels shorten as the window narrows (below) instead of
     controls moving rows. Wrapping is only a fallback so nothing can overlap. */
  .toolbar-main { flex-wrap:wrap; gap:8px 12px; }
  .toolbar-right { flex:1 1 auto; gap:8px; }
  .search { flex:1 1 320px; min-width:200px; }
  .filters-btn { display:inline-flex; height:34px; }
  .toolbar-left .btns { gap:6px; }
  /* Labels stay on one line; the search box gives up the space instead. */
  .toolbar-left { flex-shrink:0; }
  .toolbar-left .btn { white-space:nowrap; }
  .toolbar-secondary { margin-top:4px; }
  .active-filters:not([hidden]) { display:flex; flex-wrap:wrap; gap:6px; }
  #status { font-size:12px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .search-kbd { display:none; }
  .seg button { padding:5px 10px; }
  .search { min-width:160px; }
  .grouping-prefix { display:none; }
}
/* Narrower windows: Expand all / Collapse all / Reset view become icon buttons (the label stays for screen readers
   and the tooltip), so they keep their place on the first row. */
@media (max-width: 1149px) {
  .toolbar-left .btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; }
  .toolbar-left .btn-icon { width:16px; height:16px; margin:0; }
  .btn-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}
/* Above phone width the sheet is a centred panel rather than a bottom sheet. */
@media (min-width: 761px) {
  .filter-sheet { inset:0; width:min(520px, calc(100% - 48px)); max-height:85vh; margin:auto; border-radius:16px; box-shadow:0 20px 50px rgba(15,23,42,.3); }
  .filter-sheet[open] { animation:none; }
}
@media (max-width: 760px) {
  .sub { font-size:14px; }
  .toolbar-row { padding:8px 14px; }
  .toolbar-main { flex-wrap:wrap; gap:8px; }
  .toolbar-right { order:-1; flex:1 0 100%; gap:8px; }
  .search { flex:1 1 180px; min-width:0; max-width:none; }
  .search-kbd { display:none; }
  .search input { height:36px; font-size:14px; }
  .seg button { padding:5px 10px; font-size:12px; }
  .toolbar-left { flex-wrap:wrap; gap:6px; }
  .toolbar-left .btn { padding:7px 10px; font-size:13px; }
  .toolbar-hint { display:none; }
  .toolbar-secondary { align-items:flex-start; }
  .filters { flex:1 0 100%; }
  .chip { font-size:12px; }
  #status { margin-left:auto; }

  /* A: only the search toolbar stays pinned; the title band scrolls away (--hero-h is set by app.js) */
  #app.cards-view header { top:calc(-1 * var(--hero-h, 0px)); }

  /* C: search + Filters button on one row; count and Tree/Cards toggle on the next */
  .search input::placeholder { font-size:14px; }
  .filters-btn { display:inline-flex; }
  .toolbar-secondary { align-items:center; margin-top:6px; }
  .active-filters:not([hidden]) { display:flex; flex:1 0 100%; flex-wrap:wrap; gap:6px; }
  #status { margin-left:0; margin-right:auto; }

  /* F: compact list rows instead of full-width cards */
  #app.cards-view main { padding:12px 14px; }
  .card-grid { grid-template-columns:1fr; gap:8px; }
  #grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:8px; }
  #grid .list-cat.open { margin:8px 0 16px; }
  #app #grid .list-cat.open > header { margin-bottom:14px; }
  #grid .list-cat h3, #grid .list-toggle { gap:10px; }
  #grid .list-toggle { padding:8px 10px 8px 8px; }
  #grid .list-cat .badge { width:32px; height:32px; border-radius:8px; font-size:15px; }
  #grid .list-cat:not(.open) .badge { width:40px; height:40px; border-radius:10px; font-size:20px; }
  #grid .list-cat h3, #grid .list-cat:not(.open) h3 { font-size:14px; }
  #grid .list-cat.open h3 { font-size:16px; }
  #grid .card { contain-intrinsic-size:auto 90px; }
  .card.big { padding:12px; }
  .card.big .icon { width:40px; height:40px; font-size:18px; }
  .card.big .name { font-size:14px; }
  .card.big .badges { margin-top:2px; gap:4px; }
  .card.big .badges img { width:14px; height:14px; }
  .card.big .by { margin-top:0; font-size:12px; color:var(--muted); }
  .card.big .description { font-size:13px; }

}
/* Phones, three rows: search + Filters; Tree/Cards, Group and the tree icon buttons; then the filter pills with
   the count to their right (or the count alone). */
@media (max-width: 760px) {
  .toolbar-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
  .toolbar-main, .toolbar-secondary { display:contents; }
  .toolbar-right { order:1; }
  .seg { order:2; }
  .grouping { order:3; }
  .toolbar-row { column-gap:6px; }
  .grouping-prefix { display:none; }
  .seg button { padding:5px 8px; }
  /* the chevron alone marks the dropdown, so row two fits a 360px phone even when grouped by Publisher */
  .grouping-btn { gap:4px; padding:0 8px 0 10px; }
  .grouping-btn > svg:first-child { display:none; }
  .toolbar-left { order:4; margin-left:auto; flex:none; }
  .toolbar-left .btns { gap:4px; }
  /* Line break: the pills and count always start their own row, even if the row above wraps on a very narrow phone. */
  .toolbar-row::after { content:""; order:5; flex:1 0 100%; margin-top:-8px; }
  .active-filters { order:6; }
  #status { order:7; flex:1 0 100%; margin:0; }
  .active-filters:not([hidden]) { flex:1 1 calc(100% - 170px); }
  .active-filters:not([hidden]) + #status { flex:0 0 auto; margin-left:auto; }
  /* The total is already in the header, the tree's root node and the search placeholder, so the count row only
     appears once a search or filter narrows the list; until then it stays in the page for screen readers. */
  #status:not(.narrowed) { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}
@media (max-width:700px){ .seo-content { padding:32px 16px; } }
.sub { font-size:14px; color:rgba(255,255,255,.85); }

  /* Title and What's New pill share a line; the pill sits outside the h1. */

/* Connector details drawer: same structure as the Functions Explorer drawer, in this tool's maroon (--header-3). */
#drawer { position:fixed; inset:0; z-index:100; display:none; }
html:has(#drawer.show) { overflow:hidden; }
#backdrop { position:absolute; inset:0; background:rgba(15,23,42,.55); opacity:0; transition:opacity .3s; }
#panel { position:absolute; top:0; bottom:0; right:0; width:100%; max-width:560px; background:#fff; box-shadow:-10px 0 25px -5px rgba(0,0,0,.15); transform:translateX(100%); transition:transform .3s cubic-bezier(.16,1,.3,1); display:flex; flex-direction:column; }
#drawer.show #backdrop { opacity:1; }
#drawer.show #panel { transform:none; }
@media (prefers-reduced-motion: reduce) { #backdrop, #panel { transition:none; } }
#panel .body { flex:1; overflow-y:auto; padding:40px; position:relative; }
#close { position:absolute; top:20px; right:20px; width:40px; height:40px; border:0; border-radius:50%; background:#f1f5f9; color:#64748b; font-size:20px; }
#close:hover { background:#e2e8f0; color:#334155; }
#share { position:absolute; top:20px; right:72px; width:40px; height:40px; border:0; border-radius:50%; background:transparent; color:#64748b; display:flex; align-items:center; justify-content:center; }
#share:hover { background:#f1f5f9; color:#334155; }
#share::after { content:attr(data-tip); position:absolute; top:46px; right:0; white-space:nowrap; background:#0f172a; color:#fff; font-size:12px; font-weight:600; padding:6px 10px; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .15s; z-index:5; }
#share:hover::after, #share:focus-visible::after { opacity:1; }
#share .ico-done { display:none; }
#share.done { background:#d1fae5; color:#047857; }
#share.done .ico-share { display:none; }
#share.done .ico-done { display:inline; }
#share.done::after { opacity:0; }
#link-toast { position:absolute; bottom:92px; right:calc(min(100vw, 560px) / 2); transform:translate(50%,12px); max-width:calc(100vw - 40px); font-size:14px; font-weight:700; color:#fff; background:#047857; border-radius:999px; padding:10px 18px; box-shadow:0 8px 20px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:10; }
#link-toast.show { opacity:1; transform:translate(50%,0); }
#link-toast.err { background:#b91c1c; }
#drawer .d-head { display:flex; gap:14px; align-items:flex-start; margin-bottom:28px; }
#drawer .d-ico { width:56px; height:56px; flex:none; border-radius:12px; background:#0f172a0d; display:flex; align-items:center; justify-content:center; }
#drawer .d-ico .icon { width:40px; height:40px; object-fit:contain; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; color:#475569; }
#drawer .d-title { flex:1; min-width:0; }
#drawer .d-chip { display:inline-block; max-width:calc(100% - 100px); background:#f1f5f9; border:1px solid #e2e8f0; border-radius:999px; padding:4px 12px; font-size:11px; font-weight:800; letter-spacing:.05em; color:#475569; text-transform:uppercase; }
#drawer h2 { margin:8px 0 0; font-size:26px; font-weight:800; line-height:1.2; color:var(--ink); overflow-wrap:anywhere; }
#drawer .d-head:has(+ .d-meta) { margin-bottom:16px; }
#drawer .d-meta { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:28px; }
#drawer .d-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 9px 3px 6px; border:1px solid #e2e8f0; border-radius:999px; font-size:12px; color:#334155; }
#drawer .d-badge img { width:14px; height:14px; }
#drawer .d-by { margin-top:6px; font-size:13px; color:#334155; }
#drawer .box { border-radius:12px; padding:18px 20px; margin-bottom:24px; border:1px solid #e2e8f0; border-left-width:5px; }
#drawer .box .lbl { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin-bottom:8px; }
#drawer .box p { font-size:15px; line-height:1.5; color:var(--ink); }
#drawer .box a { color:inherit; font-weight:700; text-decoration:underline; text-underline-offset:2px; }
#drawer .obj { background:color-mix(in srgb, var(--header-3) 7%, #fff); border-color:color-mix(in srgb, var(--header-3) 25%, #fff); border-left-color:var(--header-3); }
#drawer .obj .lbl { color:var(--header-3); }
#drawer .obj p { font-size:16px; font-weight:500; }
#drawer .noplatform { background:#f8fafc; border-left-color:#64748b; }
#drawer .noplatform .lbl { color:#475569; }
#drawer .preview {background:#fffbeb; border-color:#fde68a; border-left-color:#f59e0b; }
#drawer .preview .lbl { color:#92400e; }
#drawer .deprecated { background:#fef2f2; border-color:#fecaca; border-left-color:#dc2626; }
#drawer .deprecated .lbl { color:#991b1b; }
#drawer .d-learn { display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; border:1px solid #025a92; border-radius:8px; background:#e6f4fc; color:#025a92; font-size:14px; font-weight:700; text-decoration:none; }
#drawer .d-learn:hover { background:#cfe9f9; }
#drawer .foot { background:#f8fafc; border-top:1px solid #e2e8f0; display:flex; align-items:center; justify-content:flex-end; padding:12px 24px; font-size:14px; }
#drawer .foot-pager { display:flex; align-items:center; gap:10px; }
#drawer .foot-title { min-width:72px; color:#475569; font-size:13px; font-weight:600; text-align:center; white-space:nowrap; }
#drawer .drawer-nav { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:#334155; font:inherit; font-weight:700; }
#drawer .drawer-nav:hover:not(:disabled) { background:#f1f5f9; }
#drawer .drawer-nav:disabled { border-color:#e2e8f0; background:#f8fafc; color:#94a3b8; cursor:not-allowed; }
#drawer button:focus-visible, #drawer a:focus-visible { outline:3px solid #818cf8; outline-offset:2px; }
@media (max-width: 760px) {
  #panel .body { padding:28px 20px; }
  #drawer h2 { font-size:22px; }
  #drawer .foot { padding:10px 16px; }
  #drawer .foot-pager { flex:1; justify-content:space-between; gap:6px; }
  #drawer .foot-title { min-width:0; }
  #drawer .drawer-nav { padding:0 12px; }
}

/* Light/dark switch: same control as the home page. It sits last in the header actions. */
.theme-switch { position:relative; flex:none; width:52px; height:32px; padding:0; border:1px solid #cbd5e1; border-radius:999px; background:#f1f5f9; }
.theme-switch:hover { border-color:#94a3b8; }
.theme-switch:focus-visible { outline:2px solid var(--fme-accent, #7c2742); outline-offset:2px; }
.dark .theme-switch { border-color:#475569; background:#1e293b; }
.dark .theme-switch:hover { border-color:#64748b; }
.dark .theme-switch:focus-visible { outline-color:#f0a6bd; }
.theme-switch-knob { position:absolute; top:3px; left:3px; display:grid; width:24px; height:24px; place-items:center; border-radius:999px; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.25); color:#d97706; transition:transform .15s ease; }
.theme-switch-knob svg { width:14px; height:14px; }
.theme-moon { display:none; }
.dark .theme-switch-knob { transform:translateX(20px); background:#334155; color:#c7d2fe; }
.dark .theme-sun { display:none; }
.dark .theme-moon { display:block; }
/* Phones: a square icon button like Share and More tools, so the title keeps its room */
@media (max-width:700px) {
  .theme-switch { width:36px; height:36px; border-color:#e2e8f0; border-radius:8px; background:#fff; }
  .dark .theme-switch { border-color:#334155; background:#1e293b; }
  .theme-switch-knob, .dark .theme-switch-knob { top:5px; left:5px; transform:none; background:transparent; box-shadow:none; }
  .theme-switch-knob svg { width:16px; height:16px; }
}

/* Hover: groups lift like the other explorers' category cards; the root lifts too, so it reads as clickable */
.cat-node, .root-node.toggle { transition:box-shadow .2s, transform .2s, background-color .2s; }
.cat-node:hover { transform:translateY(-1px); background:color-mix(in srgb, var(--c) 7%, #fff); box-shadow:0 0 0 2px var(--c), 0 4px 14px rgba(15,23,42,.14); } /* tint and ring in the group colour (--c, set by app.js) */
.root-node.toggle:hover { box-shadow:0 8px 20px -6px rgba(124,39,66,.55); transform:translateY(-1px); }
.root-node.toggle:hover .root-chev { background:rgba(255,255,255,.28); }

/* Dark mode (html.dark, set by the switch). Light mode keeps the white shared header; dark mode moves it and the working
   areas to slate. Maroon stays this tool's colour (a soft pink where it is text); the indigo controls stay indigo. */
.dark { color-scheme:dark; --ink:#f1f5f9; --muted:#94a3b8; --accent:#a5b4fc; }
.dark .fme-hdr { background:#0f172a; border-bottom-color:#d6577f; color:#f8fafc; }
.dark .fme-hdr h1 { color:#fff; }
.dark .fme-hdr .fme-tagline, .dark .fme-hdr .fme-crumb, .dark .fme-hdr .fme-trust-text { color:#cbd5e1; }
.dark .fme-hdr .fme-crumb:has(+ .fme-crumb)::after { color:#64748b; }
.dark .fme-hdr .fme-crumb:hover { color:#fff; }
.dark .fme-hdr .fme-crumb-logo { padding:1px; background:#fff; }
.dark .fme-hdr .fme-trust { color:#34d399; }
.dark .fme-hdr .fme-trust:hover, .dark .fme-hdr .fme-trust[aria-expanded="true"] { background:#1e293b; }
.dark .fme-hdr .fme-action { border-color:#334155; background:#1e293b; color:#e2e8f0; }
.dark .fme-hdr .fme-action:hover { border-color:#475569; background:#334155; color:#fff; }
.dark .fme-hdr :is(.fme-crumb, .fme-pill, .fme-trust, .fme-action):focus-visible { outline-color:#f0a6bd; }
.dark body { background:#020617; color:#cbd5e1; }
.dark #app > header { background:#0f172a; border-bottom-color:#1e293b; }

/* Toolbar */
.dark .toolbar-hint { border-left-color:#334155; }
.dark .toolbar-hint kbd, .dark .search-kbd { border-color:#475569; background:#1e293b; color:#cbd5e1; }
.dark .search input { border-color:#334155; background:#020617; color:#f1f5f9; }
.dark .search input:hover { border-color:#475569; background:#020617; }
.dark .search input:focus { background:#020617; box-shadow:0 0 0 3px rgba(129,140,248,.3); }
.dark .btn, .dark #group-by, .dark .grouping-btn, .dark .filters-btn { border-color:#334155; background:#1e293b; color:#e2e8f0; }
.dark .btn:hover, .dark .grouping:hover .grouping-btn, .dark .filters-btn:hover { background:#334155; color:#fff; }
.dark .grouping:focus-within .grouping-btn { box-shadow:0 0 0 3px rgba(129,140,248,.3); }
.dark .grouping-prefix { color:#94a3b8; }
.dark #group-by option { background:#0f172a; color:#f1f5f9; }
.dark .filters-btn.has-active { border-color:#6366f1; background:rgba(67,56,202,.3); color:#c7d2fe; }
.dark .filters-btn.has-active:hover { background:rgba(67,56,202,.45); }
.dark .seg { border-color:#334155; background:#020617; }
.dark .seg button { color:#94a3b8; }
.dark .seg button.active { background:#334155; color:#c7d2fe; box-shadow:none; } /* a clear raised pill, as the white one is in light mode */
.dark .toolbar-secondary label, .dark .toolbar-secondary .filter-label { color:#cbd5e1; }
.dark .chip { border-color:#334155; background:#1e293b; color:#e2e8f0; }
.dark .chip:hover { background:#334155; }
.dark .chip[aria-pressed="true"] { border-color:#6366f1; background:#4338ca; color:#fff; }
.dark .chip[aria-pressed="true"]:hover { background:#3730a3; }
.dark .chip.reset { border-color:#334155; background:#0f172a; color:#cbd5e1; }
.dark .chip.reset:hover { background:#1e293b; color:#fff; }
.dark .active-pill { border-color:#6366f1; }

/* Filters sheet */
.dark .filter-sheet { border:1px solid #334155; background:#0f172a; color:#e2e8f0; box-shadow:0 20px 50px rgba(0,0,0,.6); }
.dark .filter-sheet::backdrop { background:rgba(2,6,23,.6); }
.dark .sheet-close { color:#cbd5e1; }
.dark #sheet-body label, .dark #sheet-body .filter-label { color:#cbd5e1; }
.dark #sheet-body .chip-sep { background:#334155; }

/* Tree */
.dark #tree-view { background-color:#020617; background-image:radial-gradient(#1e293b 1px,transparent 1px); }
.dark #connections path { stroke:#475569; }
.dark .root-node { box-shadow:inset 0 0 0 1.5px #c2577a, 0 8px 20px rgba(0,0,0,.4); } /* a lighter edge against the dark canvas */
.dark .root-node.toggle:hover { box-shadow:inset 0 0 0 1.5px #f0a6bd, 0 8px 24px -6px rgba(214,87,127,.55); }
.dark .cat-node { background:#1e293b; box-shadow:none; }
.dark .cat-node:hover { background:color-mix(in srgb, var(--c) 12%, #1e293b); box-shadow:0 0 0 2px var(--c), 0 8px 20px -6px rgba(0,0,0,.6); }
.dark .cat-title { color:#f1f5f9; }
.dark .cat-count { border-color:#334155; background:#0f172a; color:#e2e8f0; }
.dark #controls { border-color:#334155; background:#0f172a; box-shadow:0 10px 15px -3px rgba(0,0,0,.5); }
.dark #controls button, .dark #controls #zoom-level { color:#cbd5e1; }
.dark #controls button:hover { background:#1e293b; color:#fff; }
.dark #controls hr { border-color:#334155; }

/* Connector cards (tree leaves and Cards view) and the Cards view letter tiles */
.dark .card { border-color:#334155; background:#1e293b; }
.dark .card:hover { border-color:#d6577f; background:color-mix(in srgb, #7c2742 22%, #1e293b); box-shadow:0 0 0 1px #d6577f, 0 6px 16px -4px rgba(0,0,0,.6); }
.dark .card.current { border-color:#d6577f; background:color-mix(in srgb, #7c2742 22%, #1e293b); box-shadow:0 0 0 2px #d6577f; }
.dark .card .name { color:#6cb8f6; }
.dark .card .by, .dark .card .description { color:#cbd5e1; }
.dark .card.big .by { color:#94a3b8; }
/* a faint tile, like light mode's: most logos are full colour squares, so a bright tile would frame every card */
.dark .card .icon, .dark #drawer .d-ico { background:rgba(255,255,255,.08); }
.dark #grid .list-toggle { border-color:#334155; background:#1e293b; }
.dark #grid .list-toggle:hover, .dark #grid .list-cat.open .list-toggle:hover .chev { border-color:#c2577a; }
.dark #grid .list-cat.open .list-toggle { border-color:transparent; background:none; }
.dark #grid .list-cat.open .list-toggle .chev { border-color:#334155; background:#1e293b; color:#cbd5e1; }

/* About & FAQs */
.dark .about-cue { border-color:#5a2a45; background:rgba(15,23,42,.92); color:#f0a6bd; box-shadow:0 4px 10px rgba(0,0,0,.4); }
.dark .about-cue:hover { background:#251a2f; }
.dark .seo-content { border-top-color:#1e293b; background:#0f172a; }
.dark .seo-content p, .dark .seo-browse li { color:#cbd5e1; }
.dark .seo-content code { background:#251a2f; color:#f0a6bd; }
.dark .seo-browse, .dark .seo-faq details, .dark .seo-browse[open], .dark .seo-faq details[open],
.dark .seo-browse > summary, .dark .seo-faq summary, .dark .seo-browse[open] > summary { border-color:#401e35; background:#251a2f; }
.dark .seo-faq details[open] summary { border-bottom-color:#401e35; }
.dark .seo-browse-content, .dark .seo-faq-content { background:#0f172a; }
.dark .seo-browse a, .dark .seo-more-tools a { color:#f0a6bd; }
.dark .seo-browse .seo-group { border-color:#401e35; background:#0f172a; }
.dark .seo-browse .seo-group > summary { background:#0f172a; color:#f0a6bd; }
.dark .seo-browse .seo-group > summary:hover, .dark .seo-browse .seo-group[open] > summary { background:#1e293b; }
.dark .seo-browse .seo-group[open] > summary { border-bottom-color:#401e35; }
.dark .seo-browse .seo-sub, .dark .seo-browse .seo-letter { border-color:#334155; }
.dark .seo-browse .seo-sub summary, .dark .seo-browse .seo-letter summary { background:#0f172a; }
.dark .seo-browse .seo-sub summary:hover, .dark .seo-browse .seo-letter summary:hover { background:#1e293b; }
.dark .seo-browse .seo-sub[open] summary, .dark .seo-browse .seo-letter[open] summary { border-bottom-color:#334155; }
.dark support-card { --support-card-text:#f1f5f9; --support-card-bg:#0f172a; --support-card-border:#401e35; --support-card-muted:#94a3b8; }
.dark .back-to-top { border-color:#c2577a; background:#1e293b; }

/* Connector details drawer */
.dark #backdrop { background:rgba(2,6,23,.5); }
.dark #panel { border-left:1px solid #334155; background:#0f172a; box-shadow:-10px 0 25px -5px rgba(0,0,0,.6); }
.dark #close { background:#1e293b; color:#cbd5e1; }
.dark #close:hover { background:#334155; color:#fff; }
.dark #share { color:#cbd5e1; }
.dark #share:hover { background:#1e293b; color:#fff; }
.dark #share::after { background:#334155; }
.dark #share.done { background:#064e3b; color:#6ee7b7; }
.dark #drawer .d-chip { border-color:#334155; background:#1e293b; color:#cbd5e1; }
.dark #drawer .d-badge { border-color:#334155; color:#e2e8f0; }
.dark #drawer .d-by { color:#cbd5e1; }
.dark #drawer .box { border-color:#334155; }
.dark #drawer .obj { border-color:color-mix(in srgb, #c2577a 45%, #0f172a); border-left-color:#c2577a; background:color-mix(in srgb, #7c2742 25%, #0f172a); }
.dark #drawer .obj .lbl { color:#f0a6bd; }
.dark #drawer .noplatform { border-left-color:#64748b; background:#1e293b; }
.dark #drawer .noplatform .lbl { color:#94a3b8; }
.dark #drawer .preview { border-color:color-mix(in srgb, #f59e0b 35%, #0f172a); border-left-color:#f59e0b; background:color-mix(in srgb, #f59e0b 10%, #0f172a); }
.dark #drawer .preview .lbl { color:#fbbf24; }
.dark #drawer .deprecated { border-color:color-mix(in srgb, #dc2626 40%, #0f172a); border-left-color:#ef4444; background:color-mix(in srgb, #dc2626 14%, #0f172a); }
.dark #drawer .deprecated .lbl { color:#fca5a5; }
.dark #drawer .d-learn { border-color:#3b8fd0; background:rgba(56,152,236,.12); color:#8cc8f5; }
.dark #drawer .d-learn:hover { background:rgba(56,152,236,.22); }
.dark #drawer .foot { border-top-color:#1e293b; background:#0f172a; }
.dark #drawer .foot-title { color:#94a3b8; }
.dark #drawer .drawer-nav { border-color:#334155; background:#1e293b; color:#e2e8f0; }
.dark #drawer .drawer-nav:hover:not(:disabled) { background:#334155; }
.dark #drawer .drawer-nav:disabled { border-color:#1e293b; background:#0f172a; color:#475569; }

/* Shared chrome from fme-site.css (popover, phone tip, footer) */
.dark .fme-pop { border-color:#334155; background:#0f172a; color:#cbd5e1; box-shadow:0 10px 30px rgba(0,0,0,.5); }
.dark .fme-pop-title { color:#f1f5f9; }
.dark .fme-pop li::before { color:#34d399; }
.dark .fme-pop a { color:#f0a6bd; }
.dark .fme-hint { border-top-color:#1e293b; background:#082f49; color:#bae6fd; }
.dark .fme-hint-close { color:#bae6fd; }
.dark .fme-hint-close:hover { background:#0c4a6e; }
.dark .fme-toast { background:#1e293b; }
.dark .fme-foot { background:#0f172a; color:#94a3b8; }
.dark .fme-foot-logo, .dark .fme-foot-h { color:#f1f5f9; }
.dark .fme-foot-social a, .dark .fme-foot-legal { color:#94a3b8; }
.dark .fme-foot-col a, .dark .fme-foot-col button, .dark .fme-foot-legal a { color:#cbd5e1; }
.dark .fme-foot-social a:hover, .dark .fme-foot-col a:hover, .dark .fme-foot-col button:hover, .dark .fme-foot-legal a:hover { color:#f0a6bd; }
.dark .fme-foot a:focus-visible, .dark .fme-foot button:focus-visible { outline-color:#f0a6bd; }
.dark .fme-foot-legal-in { border-top-color:#1e293b; }