/* HLP — Hospital Launch Pad. Dark "launch pad" language, ported from the
   hlp-v4-squircle reference: aurora light layer, white-glass tiles,
   42px squircles, restrained resting glow, tight grid.
   Shared by the public page and the admin live preview. */

:root {
  --bg1: #0D1524;
  --bg2: #0D1524;
  --txt: #F2F6FC;
  --txt2: #A8B4C8;
  --glass: rgba(255, 255, 255, 0.055);
  --glass-solid: rgba(20, 30, 52, 0.92);
  --edge: rgba(255, 255, 255, 0.10);
  --edge-hi: rgba(255, 255, 255, 0.28);
  --stat: #FF5A47;
  --header-bg: rgba(13, 21, 36, .94);
  --field-bg: rgba(0, 0, 0, .25);
  --control-bg: rgba(12,19,33,.68);
  --row-bg: rgba(12,19,33,.52);
  --modal-bg: linear-gradient(180deg, #131d30, #0e1626);
  /* resting cards sit on their border, not a shadow; the deeper pool is
     saved for hover so lift reads as a response rather than a default */
  --card-edge: rgba(255,255,255,.14);
  --card-shadow: 0 2px 10px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.08);
  --card-shadow-hover: 0 12px 30px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.13);

  --radius: 16px;
  --disp: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* default squircle accent (each section overrides via .acc-*) */
  --c: #2BD4B4; --c-line: rgba(43,212,180,.45); --c-glow: rgba(43,212,180,.18); --c-glow-hi: rgba(43,212,180,.40);

  /* aliases so the admin editor chrome (admin.html inline styles) stays legible
     — these want opaque panels, not the public page's frosted glass */
  --surface: #131d30; --border: rgba(255,255,255,.12); --text: var(--txt);
  --muted: var(--txt2); --accent: #2BD4B4; --accent-soft: rgba(43,212,180,.14);
  --bg: #0b1220; --info-text: #9ecdf2; --outage-text: #FF5A47;
}

[data-theme="light"] {
  color-scheme: light;
  --bg1: #F1F4F8;
  --bg2: #F1F4F8;
  --txt: #172033;
  --txt2: #5F6B7D;
  --glass: rgba(255,255,255,.92);
  --glass-solid: #FFFFFF;
  --edge: rgba(28,43,68,.14);
  --edge-hi: rgba(28,43,68,.30);
  --header-bg: rgba(241,244,248,.94);
  --field-bg: #FFFFFF;
  --control-bg: #F7F9FC;
  --row-bg: #F7F9FC;
  --modal-bg: #FFFFFF;
  --surface: #FFFFFF;
  --border: rgba(28,43,68,.16);
  --text: var(--txt);
  --muted: var(--txt2);
  --accent: #087F70;
  --accent-soft: rgba(8,127,112,.11);
  --bg: #F1F4F8;
  --info-text: #225F91;
  --outage-text: #C83D30;
  --stat: #C83D30;
  --card-edge: rgba(28,43,68,.20);
  --card-shadow: 0 2px 8px rgba(39,55,82,.06), inset 0 1px 0 rgba(255,255,255,.9);
  --card-shadow-hover: 0 9px 24px rgba(39,55,82,.14), inset 0 1px 0 rgba(255,255,255,1);
}

/* per-section accent — line = ~45% of hue, resting glow ~18%, hover ~40% */
.acc-teal   { --c:#2BD4B4; --c-line:rgba(43,212,180,.45);  --c-glow:rgba(43,212,180,.18);  --c-glow-hi:rgba(43,212,180,.40); }
.acc-blue   { --c:#5B9BFF; --c-line:rgba(91,155,255,.45);  --c-glow:rgba(91,155,255,.18);  --c-glow-hi:rgba(91,155,255,.40); }
.acc-orange { --c:#FFB25C; --c-line:rgba(255,178,92,.45);  --c-glow:rgba(255,178,92,.18);  --c-glow-hi:rgba(255,178,92,.40); }
.acc-purple { --c:#B08CFF; --c-line:rgba(176,140,255,.45); --c-glow:rgba(176,140,255,.18); --c-glow-hi:rgba(176,140,255,.40); }
.acc-green  { --c:#4ADE80; --c-line:rgba(74,222,128,.45);  --c-glow:rgba(74,222,128,.18);  --c-glow-hi:rgba(74,222,128,.40); }
.acc-pink   { --c:#FF7A9C; --c-line:rgba(255,122,156,.45); --c-glow:rgba(255,122,156,.18); --c-glow-hi:rgba(255,122,156,.40); }

[data-theme="light"] .acc-teal   { --c:#087F70; --c-line:rgba(8,127,112,.38);   --c-glow:rgba(8,127,112,.10);   --c-glow-hi:rgba(8,127,112,.20); }
[data-theme="light"] .acc-blue   { --c:#356FB8; --c-line:rgba(53,111,184,.38);  --c-glow:rgba(53,111,184,.10);  --c-glow-hi:rgba(53,111,184,.20); }
[data-theme="light"] .acc-orange { --c:#A65F12; --c-line:rgba(166,95,18,.38);   --c-glow:rgba(166,95,18,.10);   --c-glow-hi:rgba(166,95,18,.20); }
[data-theme="light"] .acc-purple { --c:#7250B5; --c-line:rgba(114,80,181,.38);  --c-glow:rgba(114,80,181,.10);  --c-glow-hi:rgba(114,80,181,.20); }
[data-theme="light"] .acc-green  { --c:#287D49; --c-line:rgba(40,125,73,.38);   --c-glow:rgba(40,125,73,.10);   --c-glow-hi:rgba(40,125,73,.20); }
[data-theme="light"] .acc-pink   { --c:#AD4565; --c-line:rgba(173,69,101,.38);  --c-glow:rgba(173,69,101,.10);  --c-glow-hi:rgba(173,69,101,.20); }

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* gradient on <html> (not body) so the z-index:-1 aurora shows through in
   Safari — a negative-z fixed child hides behind the body's own background */
html {
  -webkit-text-size-adjust: 100%;
  min-height: 100%;
  background: var(--bg1);
}
body {
  min-height: 100vh;
  color: var(--txt);
  font: 400 15px/1.5 var(--font);
  background: transparent;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; border-radius: 8px; }

/* ---------- aurora light layer (the atmosphere the glass sits on) ---------- */

.aurora { display: none; }
.aurora i { position: absolute; border-radius: 50%; display: block; }
.aurora .a { width: 44vw; height: 44vw; left: -10vw; top: -12vw; background: radial-gradient(circle, #0FA98E, transparent 65%); animation: drift 26s ease-in-out infinite alternate; }
.aurora .b { width: 38vw; height: 38vw; right: -8vw; top: 10vh; background: radial-gradient(circle, #3B6FE0, transparent 65%); animation: drift 32s ease-in-out infinite alternate-reverse; }
.aurora .c { width: 34vw; height: 34vw; left: 30vw; bottom: -14vw; background: radial-gradient(circle, #7A4FD8, transparent 65%); animation: drift 38s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(6vw, 4vh) scale(1.12); } }

/* glass surface (tiles, STAT, search) — frosted where supported, solid dark otherwise */
.glass {
  background: var(--glass); border: 1px solid var(--edge); border-radius: var(--radius);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--card-shadow);
}
@supports not (backdrop-filter: blur(1px)) { .glass, .card, #search { background: var(--glass-solid) !important; } }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 30;
  background: var(--c); color: #06121b; padding: 8px 14px; border-radius: 0 0 10px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 10; padding: 14px 0;
  background: var(--header-bg);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.site-header__inner { max-width: 1180px; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.brand__mark {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  color: #2BD4B4; font: 800 12px var(--mono);
  background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  /* one quiet border — the old teal glow ring made the logo the loudest
     element in the header */
  border: 1px solid rgba(43,212,180,.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  cursor: pointer; appearance: none; -webkit-appearance: none;
}
.brand__mark:hover { color: #8ef4df; border-color: var(--accent); background: rgba(43,212,180,.13); }
.brand__mark:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site-title { font: 800 19px/1.1 var(--disp); }
.site-sub { font: 500 .8rem var(--font); color: var(--txt2); margin-top: 2px; }

.search-wrap { flex: 1; max-width: 480px; margin-left: auto; position: relative; display: flex; }
.search-wrap__icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--txt2); pointer-events: none; }
#search {
  width: 100%; padding: 11px 44px 11px 40px; color: var(--txt);
  background: var(--glass); border: 1px solid var(--edge); border-radius: 999px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font: 500 14px var(--font); transition: border-color .15s, box-shadow .15s;
}
#search::placeholder { color: var(--txt2); }
#search:focus { outline: none; border-color: var(--edge-hi); box-shadow: 0 0 0 4px rgba(43,212,180,.12); }
.search-wrap__key { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font: 600 10px var(--mono); color: var(--txt2); border: 1px solid var(--edge); border-radius: 6px; padding: 2px 7px; pointer-events: none; }

/* ---------- layout ---------- */

.app { max-width: 1180px; margin: 0 auto; padding: 6px 22px 48px; }
.search-status { margin: 12px 2px 0; min-height: 1em; font: 500 12px var(--mono); color: var(--txt2); }
/* When idle the status line is empty — collapsing it closes most of the gap
   between the header and the first thing on the page. Still in the DOM and
   still a live region; it only takes space once it has something to say. */
.search-status:empty { margin-top: 0; min-height: 0; }
.loading, .empty-state, .load-error { margin-top: 34px; text-align: center; font: 500 13px var(--mono); color: var(--txt2); }
.load-error { color: var(--stat); }
.master-search {
  margin: 10px 0 18px; padding: 14px; border: 1px solid var(--edge-hi); border-radius: var(--radius);
  background: var(--glass-solid); box-shadow: 0 14px 38px rgba(0,0,0,.15);
}
.master-search[hidden] { display: none; }
.master-search__top, .master-search__group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.master-search__top { margin-bottom: 11px; }
.master-search__top h2 { margin: 0; font: 800 .92rem var(--disp); }
.master-search__providers { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.master-search__provider, .master-search__all, .master-search__external {
  color: var(--c); font: 700 .7rem var(--font); text-decoration: none; white-space: nowrap;
}
.master-search__provider { padding: 6px 9px; border: 1px solid var(--c-line); border-radius: 999px; }
.master-search__provider:hover { background: rgba(43,212,180,.09); }
.master-search__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 9px; }
.master-search__group { min-width: 0; padding: 9px; border: 1px solid var(--edge); border-radius: 11px; background: var(--row-bg); }
.master-search__group-head { padding: 0 2px 7px; }
.master-search__group-head h3 { margin: 0; color: var(--txt2); font: 800 .69rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.master-search__all { padding: 0; border: 0; background: none; cursor: pointer; }
.master-search__all:hover, .master-search__external:hover { text-decoration: underline; }
.master-search__item { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--edge); }
.master-search__open { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 2px; border: 0; background: none; color: var(--txt); text-align: left; cursor: pointer; }
.master-search__copy { min-width: 0; display: grid; gap: 2px; }
.master-search__copy strong, .master-search__copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.master-search__copy strong { font-size: .76rem; }
.master-search__copy span { color: var(--txt2); font-size: .66rem; }
.master-search__arrow { flex: 0 0 auto; color: var(--c); font-size: .64rem; font-weight: 700; }
.master-search__external { flex: 0 0 auto; }
@media (max-width: 900px) { .master-search__groups { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .master-search__top { align-items: flex-start; flex-direction: column; }
  .master-search__providers { justify-content: flex-start; }
  .master-search__arrow { font-size: 0; }
  .master-search__arrow::after { content: 'Open'; font-size: .64rem; }
}

/* ---------- banner ---------- */

.banner { padding: 12px 16px; border-radius: var(--radius); margin: 16px 0 0; font-weight: 600; border: 1px solid var(--edge); }
.banner--info    { background: rgba(91,155,255,.10);  color: #cfe0ff; border-color: rgba(91,155,255,.32); }
.banner--warning { background: rgba(255,178,92,.10);  color: #ffdca8; border-color: rgba(255,178,92,.34); }
.banner--outage  { background: rgba(255,90,71,.10);   color: #ffb4aa; border-color: rgba(255,90,71,.38); }

/* ---------- STAT strip ---------- */

.stat-strip {
  display: flex; align-items: stretch; gap: 9px; flex-wrap: wrap; margin: 10px 0 0; padding: 10px 12px;
  border: 1px solid rgba(255,90,71,.45); border-radius: var(--radius);
  background: var(--glass); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 8px 32px rgba(255,90,71,.10), inset 0 1px 0 rgba(255,255,255,.10);
}
.is-searching .stat-strip { display: none; }
.stat-strip__label { align-self: center; display: flex; align-items: center; gap: 8px; font: 800 11px var(--disp); letter-spacing: .2em; color: var(--stat); padding: 0 8px; }
.stat-strip__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--stat); box-shadow: 0 0 12px var(--stat); animation: pp 2s infinite; }
@keyframes pp { 50% { opacity: .3; } }
.stat-strip__item {
  flex: 1; min-width: 180px; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  transition: transform .15s, border-color .15s;
}
.stat-strip__item:hover { transform: translateY(-2px); border-color: rgba(255,90,71,.6); }
.stat-strip__name { font: 700 13.5px var(--font); }
.stat-strip__phone { font: 600 13px var(--mono); color: #FFB4AA; white-space: nowrap; }

/* ---------- sections ---------- */

.link-section { margin-top: 18px; }
.link-section__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.link-section__icon {
  width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--c-line); border-radius: 8px; background: var(--glass); color: var(--c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12); appearance: none; -webkit-appearance: none;
}
button.link-section__icon { cursor: pointer; }
button.link-section__icon:hover { background: var(--accent-soft); border-color: var(--c); }
.link-section__icon .icon { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.link-section__icon img { width: 24px; height: 24px; object-fit: contain; border-radius: 4px; }
.link-section__icon .card__glyph { font-size: 10px; }
.link-section__title { font: 700 12px var(--disp); letter-spacing: .12em; text-transform: uppercase; color: var(--txt); }
.link-section__thread { flex: 1; height: 1px; background: linear-gradient(90deg, var(--edge), transparent); }

.subsection-rows {
  display: grid;
  grid-template-columns: repeat(var(--subsection-columns, 1), minmax(0, 1fr));
  align-items: start;
  gap: 18px 10px;
}
.link-subsection {
  grid-column: span var(--subsection-span, 1);
  min-width: 0;
}
.link-subsection > .card-grid { grid-template-columns: repeat(var(--subsection-span, 1), minmax(0, 1fr)); }
.link-subsection__head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px 2px; }
.link-subsection__icon {
  width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--c-line); border-radius: 6px; background: var(--glass); color: var(--c);
  appearance: none; -webkit-appearance: none;
}
button.link-subsection__icon { cursor: pointer; }
button.link-subsection__icon:hover { background: var(--accent-soft); border-color: var(--c); }
.link-subsection__icon .icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.link-subsection__icon img { width: 19px; height: 19px; object-fit: contain; border-radius: 3px; }
.link-subsection__icon .card__glyph { font-size: 9px; }
/* Subsection labels stay quiet: the SECTION heading is the strong line, and
   these are sub-labels within it — smaller tracking, no full-width rule, so
   they don't compete with it. */
.link-subsection__title { font: 600 11px var(--disp); letter-spacing: .05em; text-transform: uppercase; color: var(--txt2); }
.link-subsection__thread { display: none; }

.card-grid {
  --card-min: 210px; --grid-gap: 10px; --cols: var(--max-cols, 4);
  display: grid; gap: var(--grid-gap); perspective: 900px;
  /* fallback for browsers without CSS max() (legacy Edge): uncapped auto-fill */
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  /* capped: each column is at least a 1/cols share, so auto-fill never exceeds
     --max-cols columns, but still drops to fewer when the row is narrow */
  grid-template-columns: repeat(auto-fill, minmax(max(var(--card-min), (100% - (var(--cols) - 1) * var(--grid-gap)) / var(--cols)), 1fr));
}

/* ---------- tiles ---------- */

.card {
  position: relative; display: flex; gap: 14px; align-items: center; overflow: hidden;
  padding: 12px 14px; height: 96px; min-height: 96px;
  background: var(--glass); border: 1px solid var(--card-edge, var(--edge)); border-radius: var(--radius);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--card-shadow);
  color: var(--txt); font: inherit; text-align: left; width: 100%;
  /* pointer-anchored glass: light follows --mx/--my; press dents + micro-tilts.
     Centered defaults keep keyboard focus glow working with no JS. */
  --mx: 50%; --my: 50%; --r: 220px; --rim: 180px;
  /* A tile is a control, not prose. Without this, a long press on iOS starts a
     text selection and raises the Copy / Look Up bar before edit mode can
     engage — the callout must be suppressed BEFORE the gesture, so it lives on
     .card itself rather than on .is-editable. */
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  transform-style: preserve-3d; will-change: transform;
  transform: rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1));
  transition: transform .14s ease, border-color .25s ease, box-shadow .18s ease;
}
button.card { cursor: pointer; -webkit-appearance: none; appearance: none; }
.card:hover { border-color: var(--edge-hi); box-shadow: var(--card-shadow-hover); }

/* hover specular pool — radial light anchored to the pointer */
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(var(--r) circle at var(--mx) var(--my),
    rgba(255,255,255,.13), rgba(255,255,255,.045) 40%, transparent 70%);
  opacity: 0; transition: opacity .3s ease;
}
.card:hover::before, .card:focus-visible::before { opacity: 1; }

/* pointer-anchored border-ring glow */
.card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: radial-gradient(var(--rim) circle at var(--mx) var(--my), rgba(255,255,255,.5), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .3s ease;
}
.card:hover::after, .card:focus-visible::after { opacity: 1; }

/* contact dent on press — shadow pool at the press point, faint rim opposite */
.dent {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(calc(var(--r) * .55) circle at var(--mx) var(--my),
      rgba(0,0,0,.30), rgba(0,0,0,.10) 45%, transparent 70%),
    radial-gradient(var(--r) circle at calc(100% - var(--mx)) calc(100% - var(--my)),
      rgba(255,255,255,.09), transparent 60%);
  opacity: 0; transition: opacity .12s ease;
}
.card.pressed .dent { opacity: 1; }
.card.pressed { --sc: .985; }

.card--pending { border-style: dashed; opacity: .82; }

.card__icon-wrap { position: relative; flex: 0 0 auto; }
.card__icon {
  width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
  color: var(--c);
  background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border: 1px solid var(--c-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 14px var(--c-glow);
  transition: transform .18s cubic-bezier(.2,.8,.3,1.35), box-shadow .18s;
}
.card:hover .card__icon { transform: scale(1.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 20px var(--c-glow-hi); }
.card__icon .icon { width: 54px; height: 54px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Logos get uniform breathing room inside the 64px tile. Full-bleed images
   read much heavier than the stroke icons beside them — the inset is what
   makes a solid logo and a line glyph feel like the same family. */
.card__icon img { width: 46px; height: 46px; object-fit: contain; border-radius: 9px; display: block; }
.card__glyph { font: 700 18px var(--mono); letter-spacing: .2px; }

/* per-user icon import affordance */
.card__icon-edit {
  position: absolute; z-index: 3; top: -7px; right: -7px; width: 19px; height: 19px; border-radius: 50%;
  display: none; align-items: center; justify-content: center; font-size: 10px;
  background: #0d1626; border: 1px solid var(--edge-hi); color: var(--txt2); cursor: pointer; padding: 0;
}
.card:hover .card__icon-edit, .card__icon-edit:focus-visible { display: flex; }
.card__icon-edit:hover { color: var(--c); border-color: var(--c-line); }

.card__body { min-width: 0; max-height: 72px; overflow: hidden; }
/* Clearance for the fixed top-right VPN status. Quiet states (dot/spinner)
   need almost none; the "VPN required" pill needs the full width — the state
   classes set --net-clear so the calc/nethelp combinations stay additive. */
.card[data-network] .card__body { padding-right: var(--net-clear, 34px); }
.card--nethelp[data-network] .card__body { padding-right: calc(var(--net-clear, 34px) + 26px); }
.card--calc .card__body { padding-right: 22px; }
.card--calc[data-network] .card__body { padding-right: calc(var(--net-clear, 34px) + 24px); }
.card--calc.card--nethelp[data-network] .card__body { padding-right: calc(var(--net-clear, 34px) + 50px); }
.card.is-net-down, .card.is-net-unknown, .card.is-net-uncheckable { --net-clear: 100px; }
.card__title-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.card__title { min-width: 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 600 14px/1.25 var(--font); }
.card__subtitle { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 400 12px/1.35 var(--font); color: var(--txt2); margin-top: 2px; }
.card__badge { font: 600 9px var(--mono); text-transform: uppercase; color: var(--stat); border: 1px solid rgba(255,90,71,.5); border-radius: 4px; padding: 1px 5px; }
.card__badge--fill { color: #72d8d3; border-color: rgba(41,160,160,.52); background: rgba(41,160,160,.13); }
/* "supported browser" badge; the --launch variant (Edge on Windows) reads as an action */
.card__browserbadge { font: 600 9px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--txt2); border: 1px solid var(--edge, rgba(255,255,255,.18)); border-radius: 4px; padding: 1px 5px; white-space: nowrap; }
.card__browserbadge--launch { color: #4a90ff; border-color: rgba(74,144,255,.5); background: rgba(74,144,255,.1); }
.card__inline-badge {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  width: 22px; height: 22px; display: grid; place-items: center;
  color: var(--c); background: rgba(43,212,180,.10);
  border: 1px solid var(--c-line); border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  pointer-events: none;
}
.card__inline-badge svg { width: 14px; height: 14px; }
.card[aria-expanded="true"] .card__inline-badge {
  background: var(--c); border-color: var(--c); color: #06121b;
}

/* access requirement chips (e.g. "SBGHC VPN") — colour-selectable per link */
.card__reqs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; min-width: 0; max-width: 100%; }
.card__req {
  font: 600 10px var(--mono); letter-spacing: .02em; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--rq-line, rgba(255,255,255,.2));
  background: var(--rq-bg, rgba(255,255,255,.06));
  color: var(--rq-fg, #c3cdda); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.req-gray   { --rq-fg:#c3cdda; --rq-line:rgba(255,255,255,.2);  --rq-bg:rgba(255,255,255,.06); }
.req-blue   { --rq-fg:#8fbaff; --rq-line:rgba(91,155,255,.45);  --rq-bg:rgba(91,155,255,.12); }
.req-teal   { --rq-fg:#5fe0c6; --rq-line:rgba(43,212,180,.45);  --rq-bg:rgba(43,212,180,.12); }
.req-green  { --rq-fg:#7ee6a2; --rq-line:rgba(74,222,128,.45);  --rq-bg:rgba(74,222,128,.12); }
.req-amber  { --rq-fg:#ffc987; --rq-line:rgba(255,178,92,.5);   --rq-bg:rgba(255,178,92,.13); }
.req-purple { --rq-fg:#c4a9ff; --rq-line:rgba(176,140,255,.45); --rq-bg:rgba(176,140,255,.12); }
.req-pink   { --rq-fg:#ff9ab4; --rq-line:rgba(255,122,156,.45); --rq-bg:rgba(255,122,156,.12); }
.req-red    { --rq-fg:#ff8f81; --rq-line:rgba(255,90,71,.5);    --rq-bg:rgba(255,90,71,.13); }

/* live VPN status (netwatch.js) — compact and fixed-position so long
   network names do not resize or reorder the card grid. */
.card__netstatus {
  position: absolute; z-index: 3; top: 8px; right: 8px;
  display: inline-flex; align-items: center;
}
.card__netchip, .card__nethelp {
  height: 22px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  border: 1px solid var(--net-line, rgba(255,255,255,.22));
  background: var(--net-bg, rgba(255,255,255,.06));
  color: var(--net-fg, #c3cdda);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
/* Compact dot by default — connected/checking/pre-paint are the quiet states.
   Only a verdict that needs action or explanation grows into the text pill. */
.card__netchip {
  min-width: 22px; width: 22px; padding: 0; border-radius: 999px;
  font: 700 9.5px var(--mono); letter-spacing: .08em;
}
.card.is-net-down .card__netchip,
.card.is-net-unknown .card__netchip,
.card.is-net-uncheckable .card__netchip {
  width: auto; min-width: 0; padding: 0 8px;
}
.card__netchip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--net-dot, #9aa6ba);
  box-shadow: 0 0 9px var(--net-dot-glow, rgba(154,166,186,.35));
}
.card__nethelp {
  position: absolute; top: 0; right: calc(100% + 4px);
  width: 22px; padding: 0; border-radius: 999px; font: 800 11px var(--font);
  opacity: 0; pointer-events: none; transform: translateX(3px);
  transition: opacity .15s ease, transform .15s ease, filter .15s ease;
}
.card:hover .card__nethelp, .card:focus-within .card__nethelp, .card.is-net-down .card__nethelp {
  opacity: 1; pointer-events: auto; transform: none;
}
/* checking is neutral, not orange — orange is a verdict ("not detected") and
   a probe in flight has none yet; the dot becomes a mini spinner instead */
.card.is-net-checking {
  --net-fg:#c3cdda; --net-line:rgba(255,255,255,.24); --net-bg:rgba(255,255,255,.07);
}
.card.is-net-checking .card__netchip::before {
  width: 7px; height: 7px; background: none; box-shadow: none;
  border: 1.5px solid rgba(154,166,186,.35); border-top-color: #c3cdda;
  animation: netspin .7s linear infinite;
}
@keyframes netspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .card.is-net-checking .card__netchip::before { animation: none; }
}
.card.is-net-up {
  --net-fg:#7ee6a2; --net-line:rgba(74,222,128,.22); --net-bg:rgba(74,222,128,.05);
  --net-dot:#5fbf87; --net-dot-glow:rgba(74,222,128,.2);
}
.card.is-net-down {
  --net-fg:#ffc987; --net-line:rgba(255,178,92,.55); --net-bg:rgba(255,178,92,.14);
  --net-dot:#ffb25c; --net-dot-glow:rgba(255,178,92,.65);
}
.card.is-net-uncheckable {
  --net-fg:#c3cdda; --net-line:rgba(255,255,255,.24); --net-bg:rgba(255,255,255,.07);
  --net-dot:#9aa6ba; --net-dot-glow:rgba(154,166,186,.36);
}
.card__netchip:hover, .card__nethelp:hover { filter: brightness(1.18); }

.link-section__attribution { margin-top: 10px; font: 500 12px var(--mono); color: var(--txt2); }
.link-section__attribution a { color: #2BD4B4; border-bottom: 1px dotted rgba(43,212,180,.5); }

/* ---------- footer ---------- */

.site-footer {
  max-width: 1180px; margin: 0 auto; padding: 18px 22px 40px; border-top: 1px solid var(--edge);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font: 500 11px var(--mono); color: var(--txt2);
}
.site-footer a { color: #2BD4B4; }
.noscript { max-width: 1180px; margin: 16px auto; padding: 0 22px; color: var(--txt2); }

/* ---------- small screens ---------- */

@media (max-width: 640px) {
  .site-header__inner { flex-wrap: wrap; }
  .search-wrap { max-width: none; order: 3; flex-basis: 100%; }
  .card-grid { --card-min: 165px; }
  /* The always-visible ✎ that used to sit on every tile here is gone: with no
     hover on touch it was permanent clutter on every card, and icon editing now
     lives behind the ⚙ badge in edit mode. */
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .card { transform: none !important; }   /* no press tilt/scale */
  .stat-strip__item:hover { transform: none; }
  .aurora i { animation: none; }
}

/* touch / coarse pointers: no follow layers, plain press feedback instead */
@media (hover: none) {
  .card::before, .card::after, .dent { display: none; }
  .card:active { background: rgba(255,255,255,.10); }
}

/* ---------- local draft notice (admin preview) ---------- */

.draft-notice {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; margin: 16px 0 0;
  background: rgba(255,178,92,.08); color: #ffdca8; border: 1px solid rgba(255,178,92,.32); border-radius: var(--radius); font-size: .85rem;
}
.draft-notice button { font: inherit; padding: 4px 10px; border-radius: 7px; cursor: pointer; border: 1px solid currentColor; background: transparent; color: inherit; }

/* ---------- icon-import modal ---------- */

/* Above every piece of floating chrome — the edit bar (71), toasts (74) and a
   lifted tile (80). At its old z-index of 60 the edit bar drew over the top of
   dialogs, covering the buttons of the very confirm prompt that guards a
   delete. A modal is the frontmost thing on the page by definition. */
.iconmodal-overlay { position: fixed; inset: 0; z-index: 90; padding: 16px; background: rgba(4,8,15,.72); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.iconmodal { width: 600px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; background: var(--modal-bg); border: 1px solid var(--edge-hi); border-radius: var(--radius); padding: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.iconmodal h2 { margin: 0 0 4px; font: 700 1.05rem var(--disp); }
.iconmodal p { margin: 0 0 16px; color: var(--txt2); font-size: .85rem; }
.iconmodal__preview { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.iconmodal__tile { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: var(--c); background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid var(--c-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 4px 14px var(--c-glow); }
.iconmodal__tile .icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.iconmodal__tile img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; }
.iconmodal__tile .card__glyph { font-size: .95rem; }
.iconmodal__library { margin: 0 0 15px; padding: 11px; border: 1px solid var(--edge); border-radius: 11px; background: var(--row-bg); }
.iconmodal__library-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.iconmodal__library-head strong { font-size: .78rem; }
.iconmodal__library-head span { color: var(--txt2); font: 600 .64rem var(--mono); }
.iconmodal__library input[type=search] { width: 100%; padding: 8px 10px; border: 1px solid var(--edge-hi); border-radius: 8px; background: var(--control-bg); color: var(--txt); font: inherit; }
.iconmodal__library-status { margin: 7px 1px 5px !important; font-size: .67rem !important; }
.iconmodal__library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 5px; max-height: 205px; overflow: auto; }
.iconmodal__library-icon { min-width: 0; aspect-ratio: 1; display: grid; place-items: center; padding: 6px; border: 1px solid var(--edge); border-radius: 8px; background: rgba(255,255,255,.025); color: var(--txt2); cursor: pointer; }
.iconmodal__library-icon:hover, .iconmodal__library-icon:focus-visible { color: var(--c); border-color: var(--c-line); outline: none; }
.iconmodal__library-icon.is-selected { color: var(--c); border-color: var(--c); background: rgba(43,212,180,.10); }
.iconmodal__library-icon .icon { width: 22px; height: 22px; }
.iconmodal__row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.iconmodal__field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; }
.iconmodal__field span { font-size: .72rem; color: var(--txt2); }
.iconmodal input[type=text], .iconmodal input[type=url] { font: inherit; padding: 8px 10px; border-radius: 9px; background: var(--control-bg); border: 1px solid var(--edge-hi); color: var(--txt); }
.iconmodal__favicon { display: flex; align-items: end; gap: 8px; margin: 0 0 12px; }
.iconmodal__favicon .iconmodal__field { min-width: 0; }
.iconmodal__favicon .iconmodal__btn { flex: 0 0 auto; }
.iconmodal__btn { font: inherit; font-weight: 600; padding: 9px 14px; border-radius: 10px; cursor: pointer; background: rgba(255,255,255,.05); border: 1px solid var(--edge-hi); color: var(--txt); }
.iconmodal__btn--primary { background: var(--c); border-color: var(--c); color: #06121b; }
.iconmodal__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.iconmodal__hint { font-size: .74rem; color: var(--txt2); margin: 10px 0 0; }

/* ---------- move setup between devices ---------- */

.transfer-modal { width: 480px; padding: 0; overflow: hidden; }
.transfer-modal__head { display: flex; align-items: center; gap: 11px; padding: 18px 18px 14px; border-bottom: 1px solid var(--edge); }
.transfer-modal__mark { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 1px solid var(--c-line); border-radius: 10px; background: rgba(43,212,180,.09); color: var(--c); font: 800 10px var(--mono); cursor: pointer; appearance: none; -webkit-appearance: none; }
.transfer-modal__mark:hover, .transfer-modal__mark:focus-visible { background: rgba(43,212,180,.16); outline: none; }
.transfer-modal__heading { min-width: 0; flex: 1 1 auto; }
.transfer-modal__heading h2 { margin: 0; }
.transfer-modal__close { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--txt2); font: 400 1.25rem/1 var(--font); cursor: pointer; }
.transfer-modal__close:hover, .transfer-modal__close:focus-visible { color: var(--txt); background: rgba(255,255,255,.07); outline: none; }
.transfer-modal__body { padding: 16px 18px 18px; }
.transfer-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.transfer-choice { min-width: 0; min-height: 118px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 13px; padding: 15px; border: 1px solid var(--edge-hi); border-radius: 12px; background: rgba(255,255,255,.035); color: var(--txt); text-align: center; cursor: pointer; }
.transfer-choice:hover, .transfer-choice:focus-visible { border-color: var(--c-line); background: rgba(43,212,180,.08); outline: none; }
.transfer-choice__flow { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; color: var(--c); }
.transfer-choice__arrow { font: 700 1.1rem/1 var(--mono); text-shadow: 0 0 10px rgba(43,212,180,.35); }
.transfer-device { position: relative; display: block; flex: 0 0 auto; color: var(--c); }
.transfer-device--computer { width: 31px; height: 23px; border: 2px solid currentColor; border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(43,212,180,.08); }
.transfer-device--computer::before { content: ''; position: absolute; left: 12px; bottom: -7px; width: 7px; height: 5px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.transfer-device--computer::after { content: ''; position: absolute; left: 7px; bottom: -8px; width: 17px; border-bottom: 2px solid currentColor; border-radius: 2px; }
.transfer-device--phone { width: 17px; height: 31px; border: 2px solid currentColor; border-radius: 5px; box-shadow: inset 0 0 0 2px rgba(43,212,180,.08); }
.transfer-device--phone::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; transform: translateX(-50%); }
.transfer-choice strong { font-size: .86rem; }
.transfer-choice small { font-size: .72rem; color: var(--txt2); line-height: 1.35; }
.transfer-stage__summary { font-size: .78rem; color: var(--txt2); margin: 0 0 10px; line-height: 1.4; }
.transfer-choice--code { grid-column: 1 / -1; min-height: 74px; flex-direction: row; }
.transfer-choice__code { padding: 7px 10px; border: 1px solid var(--c-line); border-radius: 8px; color: var(--c); font: 800 .78rem var(--mono); letter-spacing: .08em; }
.transfer-stage { text-align: center; }
.transfer-qr { width: 220px; min-height: 220px; display: grid; place-items: center; margin: 0 auto 16px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.28); }
.transfer-qr svg { display: block; width: 100%; height: auto; }
.transfer-qr.is-loading { background: rgba(255,255,255,.04); color: var(--txt2); box-shadow: none; font-size: .78rem; }
.transfer-steps { max-width: 360px; display: grid; gap: 10px; margin: 0 auto; padding: 0; list-style: none; counter-reset: transfer-step; text-align: left; }
.transfer-steps li { counter-increment: transfer-step; display: flex; align-items: center; gap: 10px; color: var(--txt); font-size: .82rem; }
.transfer-steps li::before { content: counter(transfer-step); width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: rgba(43,212,180,.14); color: var(--c); font: 700 .72rem var(--mono); }
.transfer-stage__status { min-height: 1.3em; margin: 11px 0 0 !important; color: var(--c) !important; font: 600 .7rem var(--mono) !important; }
.transfer-code-share { max-width: 360px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 12px; margin: 14px auto 0; padding: 10px 12px; border: 1px solid var(--edge-hi); border-radius: 10px; text-align: left; }
.transfer-code-share span { color: var(--txt2); font-size: .72rem; }
.transfer-code-share strong { grid-row: 1 / span 2; grid-column: 2; color: var(--c); font: 800 1rem var(--mono); letter-spacing: .1em; }
.transfer-code-share small { color: var(--txt); font-size: .72rem; }
.transfer-code-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.transfer-code-input { min-width: 0; text-transform: uppercase; letter-spacing: .16em; font: 800 1.05rem var(--mono) !important; }
.transfer-code-form__status { grid-column: 1 / -1; min-height: 1.3em; margin: 0 !important; color: var(--txt2) !important; font-size: .72rem !important; }

@media (max-width: 520px) {
  .transfer-choices { grid-template-columns: 1fr; }
  .transfer-modal__head { padding: 15px 15px 12px; }
  .transfer-modal__body { padding: 14px 15px 16px; }
  .transfer-code-form { grid-template-columns: 1fr; }
}

/* ---------- in-page tools (calculators, fee lookup) ---------- */

.card--calc[aria-expanded="true"] { border-color: var(--edge-hi); }
.calc-inline { grid-column: 1 / -1; background: var(--glass); border: 1px solid var(--edge-hi); border-radius: var(--radius); padding: 16px 18px 18px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.calc-inline__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.calc-inline__head h3 { margin: 0; font: 700 .98rem var(--disp); }
.calc-inline__close { font: inherit; background: none; border: none; color: var(--txt2); cursor: pointer; padding: 4px 8px; border-radius: 7px; }
.calc-inline__close:hover { color: var(--txt); background: rgba(255,255,255,.06); }
.calc-inline__body .calc__row { max-width: 470px; }
.folder-tree { display: grid; gap: 10px; }
.folder-tree__tabs { display: flex; align-items: flex-end; gap: 3px; overflow-x: auto; padding: 0 2px; border-bottom: 1px solid var(--edge-hi); scrollbar-width: thin; }
.folder-tree__tab { flex: 0 0 auto; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: -1px; padding: 7px 11px 8px; border: 1px solid transparent; border-bottom-color: var(--edge-hi); border-radius: 8px 8px 0 0; background: transparent; color: var(--txt2); font: 700 .74rem var(--font); cursor: pointer; }
.folder-tree__tab:hover { color: var(--txt); background: rgba(255,255,255,.04); }
.folder-tree__tab[aria-selected="true"] { color: var(--c); border-color: var(--edge-hi); border-bottom-color: var(--glass); background: var(--glass); }
.folder-tree__tab:focus-visible { outline: 2px solid var(--c); outline-offset: -2px; }
.folder-tree__tabopen { width: fit-content; display: inline-flex; align-items: center; gap: 7px; margin: 0 0 7px; padding: 5px 8px; border: 1px solid var(--c-line); border-radius: 8px; background: rgba(43,212,180,.06); color: var(--c); text-decoration: none; font-size: .76rem; font-weight: 700; }
.folder-tree__tabopen:hover { background: rgba(43,212,180,.12); }
.folder-tree__empty { margin: 3px 0; padding: 11px; border: 1px dashed var(--edge-hi); border-radius: 8px; color: var(--txt2); font-size: .76rem; }
.folder-tree__topbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.folder-tree__home {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; color: var(--c);
  font-size: .78rem; font-weight: 700; text-decoration: none; padding: 5px 8px;
  border: 1px solid var(--c-line); border-radius: 8px; background: rgba(43,212,180,.06);
}
.folder-tree__home:hover { background: rgba(43,212,180,.12); }
.folder-tree__shortcut { max-width: 230px; min-height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid var(--edge-hi); border-radius: 8px; background: rgba(255,255,255,.04); color: var(--txt); text-decoration: none; font-size: .76rem; font-weight: 700; }
.folder-tree__shortcut:hover { color: var(--c); border-color: var(--c-line); background: rgba(43,212,180,.08); }
.folder-tree__shortcut-star { flex: 0 0 auto; color: #ffcf67; font-size: .72rem; }
.folder-tree__shortcut .folder-tree__icon { transform: scale(.82); transform-origin: center; margin-right: -1px; }
.folder-tree__shortcut-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-tree__list { list-style: none; margin: 0; padding: 0; }
.folder-tree__list--nested { margin-left: 13px; padding-left: 18px; border-left: 1px solid var(--edge-hi); }
.folder-tree__row { min-height: 38px; display: flex; align-items: center; gap: 5px; border-radius: 8px; }
.folder-tree__row:hover { background: rgba(255,255,255,.035); }
.folder-tree__row--hit { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.folder-tree__row--hit:hover { background: var(--accent-soft); }
.folder-tree__toggle, .folder-tree__label {
  font: inherit; border: 0; background: transparent; color: var(--txt); cursor: pointer;
}
.folder-tree__toggle { flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 7px; color: var(--txt2); }
.folder-tree__toggle:hover, .folder-tree__toggle:focus-visible { color: var(--c); background: rgba(43,212,180,.09); }
.folder-tree__chevron { font-size: 1.35rem; line-height: 1; transform: rotate(0deg); transition: transform .15s ease; }
.folder-tree__toggle[aria-expanded="true"] .folder-tree__chevron { transform: rotate(90deg); }
.folder-tree__label { flex: 1 1 auto; min-width: 0; padding: 8px 5px; text-align: left; font-weight: 600; }
.folder-tree__label--pending { color: var(--txt2); font-style: italic; cursor: default; }
.folder-tree__spacer { flex: 0 0 28px; width: 28px; position: relative; }
.folder-tree__spacer::before { content: ''; position: absolute; left: 12px; top: -10px; width: 8px; height: 18px; border-left: 1px solid var(--edge-hi); border-bottom: 1px solid var(--edge-hi); border-radius: 0 0 0 4px; }
.folder-tree__icon { position: relative; flex: 0 0 auto; display: inline-block; margin-right: 2px; }
.folder-tree__icon--folder { width: 18px; height: 13px; margin-top: 2px; border-radius: 2px; background: #e2ad4d; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.folder-tree__icon--folder::before { content: ''; position: absolute; left: 1px; top: -3px; width: 9px; height: 4px; border-radius: 2px 2px 0 0; background: #e2ad4d; }
.folder-tree__icon--file { width: 14px; height: 17px; border: 1px solid #8eb8e8; border-radius: 2px; background: rgba(142,184,232,.1); }
.folder-tree__icon--file::after { content: ''; position: absolute; left: 3px; top: 4px; width: 7px; height: 1px; background: #8eb8e8; box-shadow: 0 3px 0 #8eb8e8, 0 6px 0 #8eb8e8; opacity: .7; }
.folder-tree__link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 9px 8px 5px; color: var(--txt); text-decoration: none; font-weight: 600; }
.folder-tree__link:hover { color: var(--c); }
.folder-tree__external { flex: 0 0 auto; color: var(--txt2); font-size: .78rem; }
.folder-tree__link:hover .folder-tree__external { color: var(--c); }
.calc__units { display: inline-flex; border: 1px solid var(--edge-hi); border-radius: 10px; overflow: hidden; margin: 0 0 14px; }
.calc__units button { font: inherit; padding: 7px 16px; border: none; background: transparent; color: var(--txt2); cursor: pointer; }
.calc__units button[aria-pressed="true"] { background: var(--c); color: #06121b; font-weight: 600; }
.calc__row { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 12px; }
.calc__field { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.calc__label { font-size: .78rem; color: var(--txt2); min-height: 1em; }
.calc__inputwrap { display: flex; align-items: center; gap: 6px; border: 1px solid var(--edge-hi); border-radius: 10px; background: var(--control-bg); padding: 0 12px; }
.calc__inputwrap:focus-within { border-color: var(--c-line); }
.calc__inputwrap input { font: inherit; font-size: 1.05rem; border: none; outline: none; background: transparent; color: var(--txt); width: 100%; padding: 10px 0; }
.calc__suffix { color: var(--txt2); font-size: .82rem; }
.calc__result { margin: 14px 0 2px; font: 800 1.9rem var(--disp); font-variant-numeric: tabular-nums; }
.calc__result-unit { font: 400 .95rem var(--font); color: var(--txt2); }
.calc__cat { margin: 0; font-weight: 700; color: var(--c); min-height: 1.3em; }
.calc__note { margin: 12px 0 0; font-size: .78rem; color: var(--txt2); }
.calc__checks { display: grid; gap: 8px; margin-top: 12px; }
.calc__check { display: flex; align-items: center; gap: 9px; font: 500 .92rem var(--font); color: var(--txt); cursor: pointer; }
.calc__check input { width: 17px; height: 17px; accent-color: var(--c, var(--accent)); cursor: pointer; }
/* ------- calculator picker (one card, all calculators) ------- */
.calc-picker__search {
  width: 100%; font: 500 .95rem var(--font); color: var(--txt);
  background: var(--control-bg); border: 1px solid var(--edge-hi); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px;
}
.calc-picker__search:focus { outline: none; border-color: var(--c-line); box-shadow: 0 0 0 4px rgba(43,212,180,.10); }
.calc-picker__list { display: grid; gap: 7px; max-height: min(520px, 62vh); overflow: auto; }
.calc-picker__row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
  min-height: 48px; padding: 6px 11px; border: 1px solid var(--edge);
  border-radius: 11px; background: var(--row-bg);
}
.calc-picker__row:hover { border-color: var(--c-line); background: rgba(43,212,180,.07); }
.calc-picker__star {
  font: 700 1.05rem var(--font); background: none; border: none; cursor: pointer;
  color: var(--txt2); padding: 6px; border-radius: 8px;
}
.calc-picker__star:hover { color: var(--c); background: var(--accent-soft); }
.calc-picker__star--on { color: var(--c); }
.calc-picker__open {
  font: 600 .95rem var(--font); color: var(--txt); background: none; border: none;
  cursor: pointer; text-align: left; padding: 10px 0; min-width: 0;
}
.calc-picker__place { font: 600 .76rem var(--font); color: var(--c); text-decoration: none; white-space: nowrap; }
.calc-picker__place:hover { text-decoration: underline; }
.calc-picker__back {
  font: 700 .82rem var(--font); color: var(--txt2); background: none; border: none;
  cursor: pointer; padding: 2px 0 10px; display: block;
}
.calc-picker__back:hover { color: var(--c); }
.calc-picker__detail-title { margin: 0 0 10px; font: 800 1.05rem var(--disp); color: var(--txt); }
.calc-picker__empty { color: var(--txt2); font-size: .85rem; padding: 10px 2px; }

.tool-fees { display: grid; gap: 10px; }
.tool-fees__bar { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto; gap: 8px; align-items: center; }
.tool-fees__search {
  width: 100%; font: 500 .95rem var(--font); color: var(--txt);
  background: var(--control-bg); border: 1px solid var(--edge-hi); border-radius: 10px;
  padding: 10px 12px;
}
.tool-fees__search:focus { outline: none; border-color: var(--c-line); box-shadow: 0 0 0 4px rgba(43,212,180,.10); }
.tool-fees__chip, .tool-fees__full, .tool-fees__action {
  font: 700 .78rem var(--font); border-radius: 9px; border: 1px solid var(--edge-hi);
  background: rgba(255,255,255,.05); color: var(--txt2); padding: 9px 11px; cursor: pointer;
}
.tool-fees__chip[aria-pressed="true"], .tool-fees__action:hover, .tool-fees__full:hover {
  background: var(--c); border-color: var(--c); color: #06121b;
}
.tool-fees__status, .tool-fees__more, .tool-fees__empty, .tool-fees__detail-meta { color: var(--txt2); font-size: .78rem; }
.tool-fees__empty { padding: 14px 2px; }
.tool-fees__results { display: grid; gap: 7px; max-height: min(520px, 62vh); overflow: auto; padding-right: 3px; }
.tool-fees__item { display: grid; gap: 0; }
.tool-fees .fee-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  width: 100%; min-height: 54px; padding: 10px 11px; border: 1px solid var(--edge);
  border-radius: 11px; background: var(--row-bg); color: var(--txt); text-align: left;
  font: inherit; cursor: pointer;
}
.tool-fees .fee-row:hover, .tool-fees .fee-row[aria-expanded="true"] { border-color: var(--c-line); background: rgba(43,212,180,.07); }
.tool-fees .fee-row__code { font: 800 1.08rem/1 var(--mono); color: var(--txt); min-width: 48px; }
.tool-fees .fee-row__body { min-width: 0; }
.tool-fees .fee-row__desc { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.tool-fees .fee-row__desc--none { color: var(--txt2); font-style: italic; }
.tool-fees .fee-row__meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.tool-fees .fee-addon-list { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.tool-fees .fee-addon {
  display: flex; gap: 8px; align-items: baseline; min-width: 0;
  font-size: .76rem; line-height: 1.35;
}
.tool-fees .fee-addon__code {
  flex: 0 0 42px; color: var(--c); font: 800 .78rem var(--mono);
}
.tool-fees .fee-addon__desc {
  flex: 1 1 auto; min-width: 0; color: var(--txt); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.tool-fees .fee-addon__amt {
  flex: 0 0 auto; color: var(--c); font-weight: 800; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tool-fees .fee-addon__more { color: var(--txt2); font-size: .74rem; font-style: italic; }
.tool-fees .fee-section, .tool-fees__section {
  display: inline-flex; border: 1px solid var(--edge); border-radius: 999px; padding: 1px 7px;
  color: var(--txt2); font: 700 .68rem var(--font);
}
.tool-fees .fee-row__fee { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; color: var(--c); }
.tool-fees .fee-row__star {
  width: 30px; height: 30px; border: 1px solid var(--edge); border-radius: 8px;
  background: rgba(255,255,255,.04); color: var(--txt2); cursor: pointer; font-size: 1rem;
}
.tool-fees .fee-row__star[aria-pressed="true"] { color: #ffcf67; border-color: rgba(255,207,103,.45); background: rgba(255,207,103,.10); }
.tool-fees__detail {
  margin: -1px 0 8px; padding: 11px 12px 12px 70px; border: 1px solid var(--c-line);
  border-top: 0; border-radius: 0 0 11px 11px; background: rgba(43,212,180,.05);
}
.tool-fees__sections { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 7px; }
.tool-fees__detail-desc { margin: 0 0 5px; color: var(--txt); }
.tool-fees__addons { margin: 12px 0 0; }
.tool-fees__addons-title {
  margin: 0 0 6px; color: var(--txt2); font: 800 .72rem var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
}
.tool-fees__addons .fee-addon { font-size: .86rem; padding: 4px 0; border-top: 1px solid var(--edge); }
.tool-fees__addons .fee-addon:first-child { border-top: 0; }
.tool-fees__addons .fee-addon__desc { white-space: normal; }
.tool-fees__actions { display: flex; justify-content: flex-end; margin-top: 9px; }
.tool-query { display: grid; gap: 11px; max-width: 720px; }
.tool-query__field { display: grid; gap: 5px; }
.tool-query__label { color: var(--txt2); font: 700 .76rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.tool-query__input {
  width: 100%; font: 500 1rem var(--font); color: var(--txt);
  background: var(--control-bg); border: 1px solid var(--edge-hi); border-radius: 11px;
  padding: 12px 13px;
}
.tool-query__input:focus { outline: none; border-color: var(--c-line); box-shadow: 0 0 0 4px rgba(43,212,180,.10); }
.tool-query__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tool-query__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 38px;
  font: 800 .86rem var(--font); border-radius: 10px; border: 1px solid var(--edge-hi);
  background: rgba(255,255,255,.05); color: var(--txt); padding: 8px 13px; cursor: pointer;
}
.tool-query__btn--primary, .tool-query__btn:hover {
  background: var(--c); border-color: var(--c); color: #06121b;
}
.tool-query__hint { color: var(--txt2); font-size: .8rem; }
.tool-odb { display: grid; gap: 9px; }
.tool-odb__top { display: flex; align-items: center; justify-content: flex-end; }
.tool-odb__official { color: var(--c); font-size: .76rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.tool-odb__official:hover { text-decoration: underline; }
.tool-odb__search {
  width: 100%; padding: 11px 12px; border: 1px solid var(--edge-hi); border-radius: 10px;
  background: var(--control-bg); color: var(--txt); font: 500 .95rem var(--font);
}
.tool-odb__search:focus { outline: none; border-color: var(--c-line); box-shadow: 0 0 0 4px rgba(43,212,180,.10); }
.tool-odb__status, .tool-odb__empty, .tool-odb__more { margin: 0; color: var(--txt2); font-size: .76rem; }
.tool-odb__results { display: grid; gap: 8px; max-height: min(560px, 64vh); overflow: auto; padding-right: 3px; }
.tool-odb__empty { padding: 12px 2px; }
.odb-record, .odb-lu { border: 1px solid var(--edge); border-radius: 11px; background: var(--row-bg); }
.odb-record { padding: 11px; }
.odb-record__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.odb-record__names h4 { margin: 0; font: 800 .94rem var(--font); }
.odb-record__names p, .odb-record__note { margin: 3px 0 0; color: var(--txt2); font-size: .76rem; }
.odb-record__badges { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.tool-odb__badge { display: inline-flex; padding: 2px 7px; border: 1px solid; border-radius: 999px; font: 800 .65rem var(--font); white-space: nowrap; }
.tool-odb__badge--benefit { color: #58d7a0; border-color: rgba(88,215,160,.4); background: rgba(88,215,160,.08); }
.tool-odb__badge--lu { color: #ffcf67; border-color: rgba(255,207,103,.42); background: rgba(255,207,103,.08); }
.tool-odb__badge--muted { color: var(--txt2); border-color: var(--edge-hi); background: rgba(255,255,255,.03); }
.odb-products { display: grid; gap: 5px; margin-top: 9px; }
.odb-product { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(140px, 1.2fr) auto auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; background: rgba(255,255,255,.035); font-size: .76rem; }
.odb-product__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.odb-product__details { display: flex; gap: 8px; min-width: 0; color: var(--txt2); overflow: hidden; }
.odb-product__details span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odb-product__din { color: var(--txt); font-family: var(--mono); }
.odb-product__amount { color: var(--c); font-weight: 800; font-variant-numeric: tabular-nums; }
.odb-lu { overflow: hidden; }
.odb-record > .odb-lu { margin-top: 8px; background: rgba(255,207,103,.04); border-color: rgba(255,207,103,.2); }
.odb-lu__summary {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  width: 100%; min-height: 48px; padding: 9px 11px; border: 0; background: transparent;
  color: var(--txt); text-align: left; font: inherit; cursor: pointer;
}
.odb-lu__summary:hover { background: rgba(255,207,103,.06); }
.odb-lu__code { color: #ffcf67; font: 800 .84rem var(--mono); }
.odb-lu__count { color: var(--txt2); font-size: .7rem; }
.odb-lu__preview {
  min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  color: var(--txt); font-size: .79rem; line-height: 1.35;
}
.odb-lu__chevron { color: var(--txt2); font-size: 1.25rem; line-height: 1; transition: transform .15s ease; }
.odb-lu__summary[aria-expanded="true"] .odb-lu__chevron { transform: rotate(90deg); }
.odb-lu__detail { padding: 10px 12px 12px; border-top: 1px solid var(--edge); }
.odb-lu__detail[hidden] { display: none; }
.odb-lu__criteria { margin: 6px 0 0; font-size: .82rem; line-height: 1.45; white-space: pre-line; }
.odb-lu__note { margin: 6px 0 0; color: var(--txt2); font-size: .75rem; line-height: 1.4; white-space: pre-line; }
.odb-lu__drugs { display: grid; gap: 5px; margin-top: 9px; }
.odb-lu__drug { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 5px 7px; border: 1px solid var(--edge); border-radius: 8px; color: var(--txt2); font-size: .72rem; }
.clinical-lookups { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 12px 9px; }
.clinical-lookups__label { color: var(--txt2); font-size: .68rem; }
.clinical-lookups__link { padding: 3px 7px; border: 1px solid var(--c-line); border-radius: 999px; color: var(--c); font-size: .68rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.clinical-lookups__link:hover { background: rgba(43,212,180,.09); }
.clinical-lookups--compact { display: inline-flex; margin: 0; }
.clinical-lookups--compact .clinical-lookups__label { display: none; }
.tool-dpd { display: grid; gap: 9px; }
.tool-dpd__top { display: flex; justify-content: flex-end; }
.tool-dpd__official { color: var(--c); font-size: .76rem; font-weight: 700; text-decoration: none; }
.tool-dpd__official:hover { text-decoration: underline; }
.tool-dpd__search {
  width: 100%; padding: 11px 12px; border: 1px solid var(--edge-hi); border-radius: 10px;
  background: var(--control-bg); color: var(--txt); font: 500 .95rem var(--font);
}
.tool-dpd__search:focus { outline: none; border-color: var(--c-line); box-shadow: 0 0 0 4px rgba(43,212,180,.10); }
.tool-dpd__status, .tool-dpd__empty, .tool-dpd__more { margin: 0; color: var(--txt2); font-size: .76rem; }
.tool-dpd__empty { padding: 12px 2px; }
.tool-dpd__results { display: grid; gap: 7px; max-height: min(560px, 64vh); overflow: auto; padding-right: 3px; }
.dpd-product {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  min-height: 62px; padding: 10px 11px; border: 1px solid var(--edge); border-radius: 11px;
  background: var(--row-bg); color: var(--txt); text-decoration: none;
}
.dpd-product:hover { border-color: var(--c-line); background: rgba(43,212,180,.06); }
.dpd-product__record { min-width: 0; color: inherit; text-decoration: none; }
.dpd-product__body { display: grid; gap: 2px; min-width: 0; }
.dpd-product__brand { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; font-size: .88rem; }
.dpd-product__descriptor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt2); font-size: .72rem; }
.dpd-product__ingredients { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.dpd-product__meta { display: flex; flex-wrap: wrap; gap: 5px 9px; color: var(--txt2); font-size: .69rem; }
.dpd-product__din { color: var(--c); font-family: var(--mono); font-weight: 800; }
.dpd-product__open { color: var(--c); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.dpd-product__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
@media (max-width: 620px) {
  .tool-fees__bar { grid-template-columns: 1fr; }
  .tool-fees .fee-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tool-fees .fee-row__star { grid-column: 3; }
  .tool-fees__detail { padding-left: 12px; }
  .odb-product { grid-template-columns: minmax(0, 1fr) auto; }
  .odb-product__details { grid-column: 1 / -1; grid-row: 2; }
  .odb-lu__summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .odb-lu__count { display: none; }
  .dpd-product { grid-template-columns: minmax(0, 1fr); }
  .dpd-product__actions { justify-content: flex-start; }
}

/* ---------- header "Customize" action (link to settings) ---------- */

.header-action {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  padding: 8px 12px; border-radius: 999px; color: var(--txt2);
  background: var(--glass); border: 1px solid var(--edge);
}
.header-action:hover { color: var(--txt); border-color: var(--edge-hi); }
.header-action svg { width: 15px; height: 15px; }
.header-action__text { font: 600 12px var(--mono); letter-spacing: .02em; }
@supports not (backdrop-filter: blur(1px)) { .header-action { background: var(--glass-solid); } }
@media (max-width: 620px) { .header-action__text { display: none; } }

/* ---------- header grid/list view toggle ---------- */

.view-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 999px; background: var(--glass); border: 1px solid var(--edge);
}
@supports not (backdrop-filter: blur(1px)) { .view-toggle { background: var(--glass-solid); } }
.view-toggle__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--txt2); cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: color .15s, background .15s;
}
.view-toggle__btn svg { width: 16px; height: 16px; }
.view-toggle__btn:hover { color: var(--txt); }
.view-toggle__btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--c); }
.view-toggle__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- unsent-changes banner (top of page) ---------- */
.unsent-banner {
  position: relative; z-index: 21;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 44px 8px 14px;
  background: var(--accent-soft); border-bottom: 1px solid var(--c-line);
  color: var(--txt); font: 500 .88rem var(--font);
}
.unsent-banner__send {
  font: 600 .84rem var(--font); cursor: pointer; padding: 5px 12px; border-radius: 8px;
  background: var(--accent); border: none; color: #04120e; white-space: nowrap;
}
[data-theme="light"] .unsent-banner__send { color: #fff; }
.unsent-banner__send:focus-visible { outline: 2px solid var(--txt); outline-offset: 2px; }
.unsent-banner__dismiss {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 8px; border: none; background: none;
  color: var(--txt2); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.unsent-banner__dismiss:hover { color: var(--txt); background: var(--glass); }
@media (max-width: 640px) {
  .unsent-banner { flex-wrap: wrap; text-align: center; }
}

/* ---------- toast (undo affordance) ---------- */

.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 70;
  display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-radius: 12px;
  background: linear-gradient(180deg, #17233a, #0f1727); border: 1px solid var(--edge-hi);
  color: var(--txt); font-size: .88rem; box-shadow: 0 18px 44px rgba(0,0,0,.5);
  transform: translate(-50%, 140%); opacity: 0; transition: transform .3s ease, opacity .3s ease;
}
.toast--in { transform: translate(-50%, 0); opacity: 1; }
.toast button { font: 600 .84rem var(--font); cursor: pointer; padding: 5px 12px; border-radius: 8px; background: var(--accent); border: none; color: #04120e; }
/* The edit bar occupies the same corner at a higher layer, so in edit mode the
   toast has to sit ABOVE it — a delete's undo was rendering completely behind
   the bar, which meant the only safety net for a removal was invisible at
   exactly the moment it was needed. */
.is-editmode .toast { bottom: calc(var(--editbar-h, 64px) + 34px); z-index: 74; }
@media (max-width: 640px) {
  .is-editmode .toast { bottom: calc(var(--editbar-h, 64px) + 26px); left: 12px; right: 12px; transform: translate(0, 140%); }
  .is-editmode .toast.toast--in { transform: translate(0, 0); }
}

/* ---------- right-click menu ----------
   Sits above the edit bar (71), the toast (74) and a lifted tile (80), and
   below a modal (90) — a menu is transient chrome, a dialog is not. No
   entrance transition: `prefers-reduced-motion` disables animation globally in
   this file, and a menu that only appears when animation is allowed is a menu
   that sometimes does not appear. */
.ctxmenu {
  position: fixed; z-index: 85; min-width: 208px; max-width: 280px;
  max-height: calc(100vh - 12px); overflow-y: auto;
  padding: 5px; border-radius: 12px;
  background: var(--modal-bg); border: 1px solid var(--edge-hi);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
}
.ctxmenu__item {
  display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; text-align: left;
  padding: 8px 11px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--txt); font: 500 .85rem var(--font);
  white-space: nowrap;
}
.ctxmenu__label { overflow: hidden; text-overflow: ellipsis; }
/* one neutral colour for every icon; the danger row's red flows in via inherit */
.ctxmenu__icon { flex: 0 0 16px; width: 16px; height: 16px; color: var(--txt2); }
.ctxmenu__icon svg { display: block; width: 16px; height: 16px; }
.ctxmenu__item--danger .ctxmenu__icon { color: inherit; }
.ctxmenu__item:hover:not(:disabled), .ctxmenu__item:focus {
  background: var(--accent-soft); color: var(--txt); outline: none;
}
.ctxmenu__item:disabled { color: var(--txt2); opacity: .5; cursor: default; }
.ctxmenu__item--danger { color: #FF9AA0; }
.ctxmenu__item--danger:hover:not(:disabled), .ctxmenu__item--danger:focus { background: rgba(229,72,77,.16); color: #FF9AA0; }
.ctxmenu__sep { height: 1px; margin: 5px 7px; background: var(--edge); }
[data-theme="light"] .ctxmenu { box-shadow: 0 14px 36px rgba(39,55,82,.20); }
[data-theme="light"] .ctxmenu__item--danger { color: #C4292E; }
[data-theme="light"] .ctxmenu__item--danger:hover:not(:disabled),
[data-theme="light"] .ctxmenu__item--danger:focus { color: #C4292E; }

/* ---------- edit mode (rearrange / remove tiles in place) ----------
   Being IN edit mode has to be unmistakable and the way out obvious, so it
   changes three things at once: every tile wobbles and outlines, the page
   chrome that would fight with it is disabled, and a bar sits at the bottom
   naming the mode with a single Done button. */

.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;
}

/* The wobble animates the INDEPENDENT `rotate` property, not `transform`.
   CSS animations outrank inline styles in the cascade, so a transform-based
   wobble silently overrode the reorder animation's inline transform — tiles
   snapped to their new slots and visibly warped instead of gliding. Keeping
   rotate (wobble), translate (the lifted tile following a finger) and
   transform (the reorder glide) on three separate properties lets all three
   compose instead of fight. */
@keyframes tile-wobble {
  0%   { rotate: -.7deg; }
  50%  { rotate: .7deg; }
  100% { rotate: -.7deg; }
}
/* Browsers without independent transform properties (legacy Edge) fall back to
   the old transform wobble; they lose the glide, not the feature. */
@supports not (rotate: 1deg) {
  @keyframes tile-wobble {
    0%   { transform: rotate(-.7deg); }
    50%  { transform: rotate(.7deg); }
    100% { transform: rotate(-.7deg); }
  }
}

.is-editmode .card.is-editable {
  animation: tile-wobble .28s ease-in-out infinite alternate;
  animation-delay: var(--wobble-delay, 0s);
  /* drop the glass press tilt so `transform` is free for the reorder glide */
  transform: none;
  border-color: var(--edge-hi);
  cursor: grab;
  -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none;
  touch-action: none;   /* the drag owns the gesture, not the scroller */
}
.is-editmode .card.is-editable:hover { transform: none; }
/* The lifted tile is out of flow and follows the finger; editmode.js owns its
   transform, so nothing here may set one. It reads as picked up: bigger
   shadow, no wobble, slightly transparent so the slot beneath stays visible. */
.card.is-dragging {
  animation: none !important; cursor: grabbing; opacity: .95;
  box-shadow: 0 26px 60px rgba(0,0,0,.6);
  rotate: 0deg;
  /* `translate` tracks the finger and must never lag, so only the pick-up
     scale and the shadow are transitioned. */
  transition: scale .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s ease;
}
/* The slot the tile will drop into. It is a real grid item, so the layout
   keeps its shape instead of collapsing while a tile is in the air. */
.card-placeholder {
  border: 2px dashed var(--edge-hi); border-radius: var(--radius);
  background: rgba(255,255,255,.03);
}
/* the glass follow layers and press dent are noise while editing */
.is-editmode .card::before, .is-editmode .card::after, .is-editmode .dent { display: none; }
/* stop the tile's own affordances competing with the edit badges */
.is-editmode .card__icon-edit, .is-editmode .card__netstatus,
.is-editmode .card__notemark, .is-editmode .card__inline-badge { display: none !important; }
/* The ✎ and ⚙ share the right edge, so the copy has to clear them. The ✕
   deliberately overlaps the icon square instead of claiming its own column —
   an icon can take a badge on its corner, a title can't. */
.is-editmode .card.is-editable .card__body { padding-right: 62px !important; }


/* Badges sit INSIDE the tile corners, not proud of them. The grid gap is 10px,
   so overhanging badges put one tile's ⚙ within a few pixels of the next
   tile's ✕ — two controls that do very different things to different tiles,
   reading as one cluster. Inset also means the tile keeps its own clipping. */
.cardbadge {
  position: absolute; top: 6px; z-index: 6;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 12px/1 var(--font); cursor: pointer;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
  animation: none;   /* badges ride the tile; they don't wobble on their own */
}
.cardbadge--remove { left: 6px; background: #E5484D; color: #fff; }
.cardbadge--settings { right: 6px; background: #26344F; color: var(--txt); }
.cardbadge--note { right: 36px; background: #26344F; color: var(--txt); }
.cardbadge--note.has-note { background: var(--accent); color: #04120e; }

/* A phone tile is only ~160px wide. Two badges side by side down the top edge
   left single digits of room for the title and erased it, so stack them on the
   right edge instead and reserve only one badge-width. Must come AFTER the base
   rules above — an earlier media query loses to them on equal specificity. */
@media (max-width: 640px) {
  .cardbadge { width: 22px; height: 22px; font-size: 11px; }
  .cardbadge--settings { top: 5px; right: 5px; }
  .cardbadge--note { top: auto; bottom: 5px; right: 5px; }
  .is-editmode .card.is-editable .card__body { padding-right: 30px !important; }
}

/* ---------- per-link notes ---------- */

/* Marker on a tile that carries a note, outside edit mode. Bottom-right so it
   never collides with the VPN chip (top-right) or the inline-tool badge. */
.card__notemark {
  position: absolute; right: 7px; bottom: 7px; z-index: 4;
  width: 20px; height: 20px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font: 600 11px/1 var(--font);
  background: rgba(94,234,212,.16); color: var(--accent);
  border: 1px solid rgba(94,234,212,.34);
}
.card__notemark:hover { background: rgba(94,234,212,.28); }
.card__notemark:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Space is reserved whether or not the marker is currently showing, so
   revealing it on hover never reflows the tile's text. */
.card--noted .card__body { padding-right: 26px; }

/* With a real pointer the marker stays hidden until the tile is hovered (or
   the marker itself is focused) — a page where many tiles carry notes was a
   wall of identical icons that read as noise rather than information. Touch
   devices have no hover, so there it remains visible: it is the only way in
   to a note outside edit mode. */
@media (hover: hover) and (pointer: fine) {
  .card__notemark { opacity: 0; transition: opacity .14s ease; }
  .card:hover .card__notemark,
  .card:focus-within .card__notemark,
  .card__notemark:focus-visible { opacity: 1; }
}

.notepanel__body { white-space: pre-wrap; margin: 0 0 12px; font-size: .9rem; line-height: 1.5; color: var(--txt); }
.notepanel__edit {
  font: 600 .82rem var(--font); cursor: pointer; padding: 7px 14px; border-radius: 9px;
  background: rgba(255,255,255,.08); border: 1px solid var(--edge); color: var(--txt);
}
.notepanel__edit:hover { background: rgba(255,255,255,.14); }

.confirmmodal { max-width: 420px; width: min(420px, calc(100vw - 32px)); }
.confirmmodal__body { font-size: .86rem; line-height: 1.5; color: var(--txt2); margin: 0 0 4px; }
.iconmodal__btn--danger { background: #E5484D; border-color: #E5484D; color: #fff; }
.iconmodal__btn--danger:hover { filter: brightness(1.08); }

/* The note editor follows the app theme like every other modal. The surface
   and text come from .iconmodal's --modal-bg/--edge-hi; only layout and the
   credential warning live here. */
.notemodal {
  max-width: 560px; width: min(560px, calc(100vw - 32px));
  padding: 0; overflow: hidden;
}
.notemodal > h2 {
  margin: 0; padding: 14px 18px;
  color: var(--txt); font: 700 1rem var(--font);
  border-bottom: 1px solid var(--edge);
}
.notemodal__warn {
  display: flex; flex-direction: column; gap: 3px; margin: 14px 18px 12px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(229,72,77,.08); border: 1px solid rgba(229,72,77,.30);
}
.notemodal__warn strong { font: 700 .84rem var(--font); color: var(--stat); }
.notemodal__warn span { font-size: .78rem; color: var(--txt2); line-height: 1.45; }
.notemodal__box {
  display: block; width: calc(100% - 36px); margin: 0 18px; resize: vertical;
  padding: 10px 12px; border-radius: 8px;
  background: var(--field-bg); border: 1px solid var(--edge-hi);
  color: var(--txt); font: 400 .92rem/1.55 var(--font);
}
.notemodal__box::placeholder { color: var(--txt2); }
.notemodal__box:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.notemodal__foot { display: flex; align-items: center; gap: 12px; margin: 8px 18px 0; min-height: 20px; }
.notemodal__count { font-size: .74rem; color: var(--txt2); flex: 0 0 auto; }
.notemodal__count.is-full { color: var(--stat); }
.notemodal__flag { font-size: .74rem; color: var(--stat); }
.notemodal__flag.is-on { font-weight: 600; }
.notemodal .iconmodal__actions { padding: 14px 18px 16px; margin: 0; }
.notemodal .iconmodal__btn--primary { background: var(--accent); border-color: var(--accent); color: #06121b; }
[data-theme="light"] .notemodal .iconmodal__btn--primary { color: #fff; }

[data-theme="light"] .card__notemark { background: rgba(13,120,105,.10); border-color: rgba(13,120,105,.28); }
.cardbadge:hover { filter: brightness(1.12); }
.cardbadge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- the inspector sheet (⚙ on a tile, in edit mode) ----------
   Hosts inspector.js — the same editor Customize renders in its left pane.
   A side drawer on a wide screen, a bottom sheet on a phone, because a tall
   form reachable by thumb beats a centred dialog there. */
.edsheet {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(4,8,15,.55); backdrop-filter: blur(3px);
  display: flex; justify-content: flex-end;
  opacity: 0; transition: opacity .2s ease;
}
.edsheet.is-in { opacity: 1; }
.edsheet__panel {
  display: flex; flex-direction: column;
  /* explicit height rather than relying on align-items:stretch — Safari can
     leave a percentage max-height unresolved against an indefinite height,
     and min-height:0 is what lets the body below actually shrink and scroll */
  width: min(520px, 100%); height: 100%; max-height: 100%; min-height: 0;
  background: var(--bg); border-left: 1px solid var(--edge-hi);
  box-shadow: -18px 0 48px rgba(0,0,0,.45);
  transform: translateX(100%); transition: transform .24s cubic-bezier(.22,.68,.24,1);
}
.edsheet.is-in .edsheet__panel { transform: translateX(0); }
.edsheet__head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--edge);
}
.edsheet__title { margin: 0; font: 700 1rem var(--font); color: var(--txt); flex: 1 1 auto; min-width: 0; }
.edsheet__more { flex: 0 0 auto; color: var(--accent); font: 600 .8rem var(--font); text-decoration: none; }
.edsheet__more:hover { text-decoration: underline; }
.edsheet__close {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid var(--edge); color: var(--txt); font-size: 15px;
}
.edsheet__close:hover { background: rgba(255,255,255,.12); }
.edsheet__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
/* Children must NOT shrink. As a column flex container this body gave every
   child flex-shrink:1, so a tall inspector panel was compressed to fit the
   sheet instead of overflowing it — its content was clipped, and because
   nothing overflowed there was nothing to scroll. The panel reported wanting
   1338px while being squeezed into 396px. */
.edsheet__body > * { flex: 0 0 auto; }

@media (max-width: 640px) {
  .edsheet { align-items: flex-end; justify-content: center; }
  .edsheet__panel {
    width: 100%; height: 92%; max-height: 92%;
    border-left: 0; border-top: 1px solid var(--edge-hi);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -18px 48px rgba(0,0,0,.5);
  }
  .edsheet.is-in .edsheet__panel { transform: translateY(0); }
}

.editbar__page {
  flex: 0 0 auto; font: 600 .82rem var(--font); cursor: pointer; pointer-events: auto;
  padding: 8px 14px; border-radius: 9px;
  background: rgba(255,255,255,.08); border: 1px solid var(--edge-hi); color: var(--txt);
}
.editbar__page:hover { background: rgba(255,255,255,.15); }
@media (max-width: 640px) { .editbar__page { padding: 8px 10px; font-size: .78rem; } }

[data-theme="light"] .edsheet { background: rgba(23,32,51,.34); }
[data-theme="light"] .edsheet__close { background: #EEF2F8; }

/* ＋ ghost tiles: add a link to a grid, or a whole new section. Only ever
   present in edit mode — decorate() builds them, undecorate() removes them. */
.card--add {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 96px; min-height: 96px; padding: 12px 14px;
  border: 1.5px dashed var(--edge-hi); border-radius: var(--radius);
  background: transparent; color: var(--txt2); cursor: pointer;
  font: 600 .84rem var(--font); width: 100%;
  animation: none !important;   /* the adder does not wobble; it isn't a tile */
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.card--add:hover { color: var(--accent); border-color: var(--accent); background: rgba(94,234,212,.06); }
.card--add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[data-density="compact"] .card--add { height: 76px; min-height: 76px; }
[data-view="list"] .card--add { height: auto; min-height: 44px; }
.canvas-addsection { margin-top: 18px; }
.canvas-addsection .card--add { min-height: 52px; height: 52px; }

.sectionmove { display: inline-flex; gap: 4px; margin-left: 10px; flex: 0 0 auto; }
.sectionmove__btn {
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--font); color: var(--txt);
  background: rgba(255,255,255,.07); border: 1px solid var(--edge);
}
.sectionmove__btn:hover:not(:disabled) { background: rgba(255,255,255,.14); border-color: var(--edge-hi); }
.sectionmove__btn:disabled { opacity: .3; cursor: default; }
.sectionmove__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the header search and view toggle would fight with edit mode — searching
   hides tiles, which is exactly what a reorder must not see */
.is-editmode .search-wrap, .is-editmode .view-toggle { opacity: .4; pointer-events: none; }
#editmode-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #04120e; }

.editbar {
  position: fixed; left: 50%; bottom: 22px; z-index: 71;
  display: flex; align-items: center; gap: 18px; padding: 12px 16px 12px 20px;
  border-radius: 14px; max-width: min(560px, calc(100vw - 28px));
  background: linear-gradient(180deg, #17233a, #0f1727); border: 1px solid var(--edge-hi);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  transform: translate(-50%, 140%); opacity: 0; transition: transform .3s ease, opacity .3s ease;
  /* The bar is fixed over the tiles. On a phone that means it sits on top of
     the very cards a drop is aimed at, so it must not swallow the hit test —
     only its button is interactive. editmode.js also skips it explicitly when
     walking elementsFromPoint, belt and braces. */
  pointer-events: none;
}
.editbar--in { transform: translate(-50%, 0); opacity: 1; }
.editbar__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.editbar__text strong { font: 700 .9rem var(--font); color: var(--txt); }
.editbar__text span { font-size: .78rem; color: var(--txt2); }

/* On a phone the bar has to BE a bar. Shrink-to-fit around a centred anchor
   collapsed it into a tall narrow box sitting over the tiles, so pin it to both
   edges and keep the hint on one line. */
@media (max-width: 640px) {
  .editbar {
    left: 12px; right: 12px; bottom: 14px; transform: translateY(140%);
    max-width: none; padding: 10px 12px 10px 16px; gap: 12px;
  }
  .editbar--in { transform: translateY(0); }
  .editbar__text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .editbar__done { padding: 9px 18px; }
}
.editbar__done {
  flex: 0 0 auto; font: 700 .88rem var(--font); cursor: pointer;
  padding: 9px 22px; border-radius: 10px; background: var(--accent); border: none; color: #04120e;
  pointer-events: auto;   /* the one part of the bar that is clickable */
}
.editbar__done:focus-visible { outline: 2px solid var(--txt); outline-offset: 2px; }

[data-theme="light"] .editbar { background: #FFFFFF; box-shadow: 0 12px 32px rgba(39,55,82,.18); }
/* Both neutral badges need the light treatment — the ✎ was left on the dark
   navy fill, so in light mode it read as a black blob next to a white ⚙. */
[data-theme="light"] .cardbadge--settings,
[data-theme="light"] .cardbadge--note { background: #E8EDF5; color: #27364F; border-color: rgba(39,55,82,.16); }
[data-theme="light"] .cardbadge--note.has-note { background: var(--accent); color: #04120e; border-color: transparent; }

/* Reduced motion kills the wobble globally (the * rule below), which would
   leave no signal at all that edit mode is on — so give it a static one. */
@media (prefers-reduced-motion: reduce) {
  .is-editmode .card.is-editable {
    outline: 2px dashed var(--accent); outline-offset: 2px;
  }
}

[data-theme="light"] .card__icon,
[data-theme="light"] .brand__mark { background: #F7F9FC; box-shadow: inset 0 1px 0 #fff, 0 3px 10px rgba(39,55,82,.08); }
[data-theme="light"] .card__icon-edit { background: #FFFFFF; }
[data-theme="light"] .stat-strip__phone { color: #A9352A; }
[data-theme="light"] .toast { background: #FFFFFF; box-shadow: 0 12px 32px rgba(39,55,82,.18); }
[data-theme="light"] .calc-inline { background: #FFFFFF; }
[data-theme="light"] .iconmodal { box-shadow: 0 24px 60px rgba(39,55,82,.22); }
[data-theme="light"] .iconmodal-overlay { background: rgba(23,32,51,.34); }
[data-theme="light"] .transfer-modal { background: #FFFFFF; color: var(--txt); }
[data-theme="light"] .transfer-modal__head { background: #FFFFFF; }
[data-theme="light"] .transfer-modal__heading h2 { color: var(--txt); }
[data-theme="light"] .transfer-modal__close { color: var(--txt2); }
[data-theme="light"] .transfer-modal__close:hover,
[data-theme="light"] .transfer-modal__close:focus-visible { color: var(--txt); background: #EEF1F5; }
[data-theme="light"] .transfer-choice { background: #F7F9FC; color: var(--txt); }
[data-theme="light"] .transfer-choice:hover,
[data-theme="light"] .transfer-choice:focus-visible { background: #EDF8F6; }
[data-theme="light"] .transfer-steps li { color: var(--txt); }
[data-theme="light"] .transfer-steps li::before { background: #DDF3EF; }
[data-theme="light"] .transfer-qr { box-shadow: 0 10px 28px rgba(39,55,82,.16); }
[data-theme="light"] .transfer-qr.is-loading { background: #F7F9FC; }
[data-theme="light"] .tool-fees .fee-row:hover,
[data-theme="light"] .tool-fees .fee-row[aria-expanded="true"] { background: #EDF8F6; }
[data-theme="light"] .odb-product { background: #F7F9FC; }
[data-theme="light"] .odb-record > .odb-lu,
[data-theme="light"] .odb-lu__summary:hover { background: #FFFBF0; }
[data-theme="light"] .dpd-product:hover { background: #EDF8F6; }
[data-theme="light"] .folder-tree__tab[aria-selected="true"] { border-bottom-color: #FFFFFF; }

/* ---------- compact density (prefs.density) ---------- */

[data-density="compact"] .card-grid { --grid-gap: 6px; --card-min: 178px; }
[data-density="compact"] .card { height: 76px; min-height: 76px; padding: 9px 11px; }
[data-density="compact"] .card__icon-wrap, [data-density="compact"] .card__icon { width: 48px; height: 48px; }
[data-density="compact"] .card__icon { border-radius: 14px; }
[data-density="compact"] .card__icon .icon { width: 43px; height: 43px; }
[data-density="compact"] .card__icon img { width: 45px; height: 45px; }
[data-density="compact"] .card__glyph { font-size: 15px; }
[data-density="compact"] .link-section { margin-top: 22px; }
[data-density="compact"] .subsection-rows { gap: 13px; }

/* ---------- list view ----------
   Same cards, different density: CSS collapses each tile into a scannable
   40-something-px row (icon · name · description · right-aligned badges). Every
   piece is already in the card DOM, so nothing renders differently — this is a
   pure presentation switch off body[data-view="list"] (also forced while a
   search is active). Two-level hierarchy stays as inline group labels. */
[data-view="list"] .link-section { margin-top: 20px; }
/* rows flow into columns instead of stretching one-per-row edge to edge — a
   44px row of icon+name+badge doesn't need the full 1180px container, and a
   single forced column actually fits FEWER items per screen than a compact
   multi-column grid once there's real vertical height to spare. */
[data-view="list"] .card-grid,
[data-view="list"] .link-subsection > .card-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 4px 14px;
  perspective: none;
}
/* subsection GROUPS still stack top-to-bottom (each keeps its own EMR/PACS/…
   label above it) — only the cards inside a group go multi-column */
[data-view="list"] .subsection-rows { grid-template-columns: 1fr; gap: 4px; }
[data-view="list"] .link-subsection { grid-column: auto; }
[data-view="list"] .link-subsection__head { margin: 12px 0 4px 2px; }

[data-view="list"] .card {
  height: 44px; min-height: 44px; padding: 0 12px 0 9px; gap: 11px; border-radius: 9px;
  transform: none;
}
[data-view="list"] .card:hover .card__icon { transform: none; }

/* small icon */
[data-view="list"] .card__icon-wrap { order: 0; }
[data-view="list"] .card__icon-wrap, [data-view="list"] .card__icon { width: 26px; height: 26px; }
[data-view="list"] .card__icon { border-radius: 7px; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 6px var(--c-glow); }
[data-view="list"] .card__icon .icon { width: 18px; height: 18px; }
[data-view="list"] .card__icon img { width: 22px; height: 22px; border-radius: 5px; }
[data-view="list"] .card__glyph { font-size: 10px; }
[data-view="list"] .card__icon-edit { display: none !important; }

/* body: name + description on one line, badges pushed to the right edge */
[data-view="list"] .card__body {
  order: 1; display: flex; align-items: baseline; gap: 10px; flex: 1 1 auto; min-width: 0;
  max-height: none; overflow: visible; padding-right: 0 !important;
}
[data-view="list"] .card__title-row { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; }
[data-view="list"] .card__title {
  display: block; -webkit-line-clamp: unset; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-size: 13.5px;
}
[data-view="list"] .card__subtitle {
  display: block; -webkit-line-clamp: unset; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; margin-top: 0; min-width: 0; font-size: 12px;
  /* description is the flexible filler: it takes leftover space and truncates
     first, so the name (what power users scan) keeps its room on narrow rows */
  flex: 1 1 0;
}
[data-view="list"] .card__reqs { order: 2; margin: 0 0 0 auto; flex: 0 0 auto; flex-wrap: nowrap; }

/* VPN chip + inline-tool badge: un-absolute and cluster at the right */
[data-view="list"] .card__netstatus { position: static; order: 2; }
[data-view="list"] .card__inline-badge {
  position: static; order: 3; right: auto; bottom: auto; width: 20px; height: 20px; margin-left: 1px;
}