/* ============================================================================
   JFM Magazine — /library front page (maglib-*), article page (magart-*) and
   the PDP related-articles module. Pure Havenly: --hv-* tokens, Geist-only
   editorial grammar (no serifs), kickers = steel (--hv-core-steel-500),
   orange stays reserved for deals, gold = AI-only (the ai-assisted chip).
   Radii from the scale only. Linked globally from app/layout.tsx.
   ========================================================================== */

/* ── Magazine sub-nav (sits BELOW the unchanged main TopBar) ─────────────── */
.maglib-subnav {
  border-bottom: 1px solid var(--hv-color-border-subtle);
  background: var(--hv-color-surface-default);
}
.maglib-subnav__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--hv-space-3) var(--hv-space-6);
  display: flex;
  align-items: center;
  gap: var(--hv-space-5);
}
.maglib-subnav__brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--hv-space-2);
  font-size: var(--hv-text-md);
  font-weight: 600;
  color: var(--hv-color-text-strong);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
}
.maglib-subnav__brand .dot {
  width: 6px; height: 6px;
  border-radius: var(--hv-radius-full);
  background: var(--hv-core-steel-500);
  align-self: center;
}
.maglib-subnav__links {
  display: flex;
  align-items: center;
  gap: var(--hv-space-1);
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.maglib-subnav__links::-webkit-scrollbar { display: none; }
.maglib-subnav__link {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: var(--hv-radius-full);
  font-size: var(--hv-text-sm);
  font-weight: 400;
  color: var(--hv-color-text-subdued);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.maglib-subnav__link:hover { color: var(--hv-color-text-strong); background: var(--hv-color-surface-muted); }
.maglib-subnav__link.is-on {
  color: var(--hv-color-text-inverse);
  background: var(--hv-color-action-primary);
  font-weight: 500;
}
.maglib-subnav__search { flex: 0 0 auto; width: min(340px, 34vw); position: relative; }
@media (max-width: 860px) {
  .maglib-subnav__inner { flex-wrap: wrap; }
  .maglib-subnav__search { width: 100%; order: 3; }
}

/* ── Front page shell ────────────────────────────────────────────────────── */
.maglib-main { padding-bottom: var(--hv-space-20); }
.maglib-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--hv-space-6);
}

/* kicker — the steel editorial eyebrow, everywhere in the magazine */
.mag-kicker {
  font-size: var(--hv-text-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hv-core-steel-500);
}

/* byline / meta row */
.mag-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hv-space-2);
  font-size: var(--hv-text-sm);
  color: var(--hv-color-text-muted);
}
.mag-meta b { font-weight: 500; color: var(--hv-color-text-default); }
.mag-meta .sep { width: 3px; height: 3px; border-radius: var(--hv-radius-full); background: var(--hv-color-border-strong); }
.mag-meta .mag-date { font-family: var(--hv-font-mono); font-size: var(--hv-text-xs); letter-spacing: .04em; }

/* gold = the AI did something: the AI-assisted disclosure chip only */
.mag-ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--hv-radius-full);
  border: 1px solid color-mix(in srgb, var(--hv-color-ai) 45%, transparent);
  background: var(--hv-color-ai-surface);
  color: var(--hv-color-text-default);
  font-size: var(--hv-text-xs);
  font-weight: 400;
}
.mag-ai-chip svg { width: 11px; height: 11px; color: var(--hv-color-ai); }

/* ── Lead feature + secondary stack ──────────────────────────────────────── */
.maglib-top {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: var(--hv-space-10);
  padding: var(--hv-space-10) 0 var(--hv-space-12);
  border-bottom: 1px solid var(--hv-color-border-subtle);
}
@media (max-width: 980px) { .maglib-top { grid-template-columns: 1fr; gap: var(--hv-space-8); } }

.maglib-lead { display: flex; flex-direction: column; gap: var(--hv-space-4); text-decoration: none; }
.maglib-lead__media {
  position: relative;
  border-radius: var(--hv-radius-card);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--hv-color-surface-muted);
}
.maglib-lead__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.maglib-lead:hover .maglib-lead__media img { transform: scale(1.025); }
.maglib-lead__title {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--hv-color-text-strong);
}
.maglib-lead:hover .maglib-lead__title { color: var(--hv-color-text-brand-strong); }
.maglib-lead__standfirst {
  margin: 0;
  max-width: 62ch;
  font-size: var(--hv-text-lg);
  line-height: 1.5;
  font-weight: 300;
  color: var(--hv-color-text-subdued);
}

.maglib-stack { display: flex; flex-direction: column; }
.maglib-stack__label {
  font-size: var(--hv-text-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hv-color-text-muted);
  padding-bottom: var(--hv-space-3);
  border-bottom: 1px solid var(--hv-color-border-subtle);
}
.maglib-stack__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: var(--hv-space-4);
  padding: var(--hv-space-4) 0;
  border-bottom: 1px solid var(--hv-color-border-subtle);
  text-decoration: none;
}
.maglib-stack__item:last-child { border-bottom: none; }
.maglib-stack__body { display: flex; flex-direction: column; gap: var(--hv-space-1); min-width: 0; }
.maglib-stack__title {
  margin: 0;
  font-size: var(--hv-text-md);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--hv-color-text-strong);
}
.maglib-stack__item:hover .maglib-stack__title { color: var(--hv-color-text-brand-strong); }
.maglib-stack__thumb {
  width: 88px; height: 66px;
  border-radius: var(--hv-radius-md);
  overflow: hidden;
  background: var(--hv-color-surface-muted);
}
.maglib-stack__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Search-results / section grid ───────────────────────────────────────── */
.maglib-grid-head { padding: var(--hv-space-10) 0 var(--hv-space-2); display: flex; flex-direction: column; gap: var(--hv-space-2); }
.maglib-grid-head h1, .maglib-grid-head h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--hv-color-text-strong);
}
.maglib-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hv-space-5);
  padding: var(--hv-space-6) 0;
}
.maglib-empty {
  padding: var(--hv-space-16) 0;
  text-align: center;
  color: var(--hv-color-text-muted);
  font-size: var(--hv-text-md);
}

/* ── Article page — newspaper article grammar (Havenly/Geist translation)
      inside the site's standard flagship layout: the 1240px .container wraps
      a two-column grid (main article column + 340px sticky sidebar rail,
      mirroring the PDP's .pdp-grid proportions). Header, hero and media span
      the main column; body text keeps a ~720px comfortable measure INSIDE it. */
.magart-page { padding-bottom: var(--hv-space-20); }
.magart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--hv-space-10);
  /* no align-items: start — the aside must stretch to full row height so the
     sticky rail inside it has travel room */
}
@media (max-width: 960px) {
  .magart-grid { grid-template-columns: 1fr; gap: var(--hv-space-8); }
}
.magart-main { min-width: 0; }

.magart-hero { padding: var(--hv-space-12) 0 0; }

/* kicker as "| CITY GUIDES |" — thin vertical bars, steel, never red */
.magart-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--hv-space-2);
  margin-bottom: var(--hv-space-4);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--hv-color-interactive, var(--hv-core-steel-500));
}
.magart-kicker::before,
.magart-kicker::after {
  content: '';
  width: 1px;
  height: 12px;
  background: currentColor;
}

/* newspaper display headline — very large, very heavy, tight */
/* newspaper strip treatment on the article hero headline (per-line boxed,
   same grammar as the front-page .magx-boxtitle) */
.magart-title__strip { display: inline; background: var(--hv-color-surface-default); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 2px 12px; border: 1px solid var(--hv-ink); border-radius: 0; box-shadow: 0 3px 0 var(--hv-ink); color: var(--hv-brand); font-weight: 800; letter-spacing: -0.02em; }
.magart-title {
  margin: 0 0 var(--hv-space-5);
  font-size: clamp(34px, 3.8vw, 46px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--hv-ink, var(--hv-color-text-strong));
}

/* byline strip — hairline rules above and below */
.magart-byline {
  border-top: 1px solid var(--hv-color-border-default);
  border-bottom: 1px solid var(--hv-color-border-default);
  padding: var(--hv-space-3) 0;
}
.magart-byline b { color: var(--hv-ink, var(--hv-color-text-strong)); }

/* standfirst — between the byline strip and the hero image */
.magart-standfirst {
  margin: var(--hv-space-5) 0 0;
  max-width: 720px;
  font-size: 19px;
  line-height: 1.55;
  font-weight: 300;
  color: var(--hv-color-text-subdued);
}

.magart-heromedia { margin: var(--hv-space-6) 0 0; }
.magart-heromedia img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--hv-radius-card);
  background: var(--hv-color-surface-muted);
}

/* body spans the main grid column; text keeps a ~720px reading measure */
.magart-body {
  padding: var(--hv-space-8) 0 var(--hv-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-5);
}
.magart-body > p,
.magart-body > h2,
.magart-body > h3 { max-width: 720px; }
.magart-body > h2 {
  margin: var(--hv-space-4) 0 0;
  font-size: var(--hv-text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--hv-ink, var(--hv-color-text-strong));
}
.magart-body > h3 {
  margin: var(--hv-space-2) 0 0;
  font-size: var(--hv-text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hv-ink, var(--hv-color-text-strong));
}
.magart-body > p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--hv-color-text-default);
}

/* pull-quote — centered editorial line with short hairline rules above/below
   (no bar, no giant quote glyphs) */
.magart-quote {
  margin: var(--hv-space-5) 0;
  padding: 0 var(--hv-space-6);
  border-left: 0;
  text-align: center;
}
.magart-quote::before,
.magart-quote::after {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  margin: 0 auto;
  background: var(--hv-color-border-strong);
}
.magart-quote::before { margin-bottom: var(--hv-space-4); }
.magart-quote::after { margin-top: var(--hv-space-4); }
.magart-quote p {
  margin: 0;
  font-size: 23px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--hv-ink, var(--hv-color-text-strong));
}
.magart-quote cite {
  display: block;
  margin-top: var(--hv-space-2);
  font-style: normal;
  font-size: var(--hv-text-sm);
  color: var(--hv-color-text-muted);
}

.magart-figure { margin: var(--hv-space-2) 0; }
.magart-figure img {
  width: 100%;
  border-radius: var(--hv-radius-card);
  display: block;
  background: var(--hv-color-surface-muted);
}
.magart-figure figcaption {
  margin-top: var(--hv-space-2);
  font-size: var(--hv-text-xs);
  color: var(--hv-color-text-muted);
  font-family: var(--hv-font-mono);
  letter-spacing: .03em;
}
.magart-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--hv-space-3); }
.magart-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--hv-radius-lg); display: block; background: var(--hv-color-surface-muted); }
@media (max-width: 560px) { .magart-gallery { grid-template-columns: 1fr; } }

/* ── GALLERY — LAYOUT VARIANTS + lightbox trigger (gallery-lightbox wave) ──
   The two rules above are the ORIGINAL, untouched byte-gate markup (no
   `layout` on the block — a plain <img>/<span> grid, no button, no JS).
   Everything below is author OPT-IN ONLY, rendered by the client
   ArticleGallery.tsx: each image becomes a `.magart-gallery__trigger`
   button that opens the shared MediaLightbox
   (src/components/shared/MediaLightbox.tsx). `--grid` reuses the base
   `.magart-gallery` rules above (same 2-col look, just clickable) — it
   needs no extra sizing rules of its own. `--masonry`/`--justified` are
   compound-selected (`.magart-gallery.magart-gallery--x`) so they always
   win over the base rules regardless of source order. 'slider' layout
   doesn't use any of this — it renders via the .magcaro-* carousel engine
   instead (see ArticleCarousel.tsx / the magcaro rules above). */
.magart-gallery__trigger {
  display: block; width: 100%; padding: 0; margin: 0; border: 0;
  background: none; cursor: pointer; text-align: left; position: relative;
}
.magart-gallery__trigger:hover img { opacity: 0.92; }
.magart-gallery__trigger:focus-visible {
  outline: 2px solid var(--hv-core-brand-600); outline-offset: 2px; border-radius: var(--hv-radius-lg);
}
.magart-gallery__trigger .magart-gallery__caption {
  display: block; margin-top: var(--hv-space-1); font-size: var(--hv-text-xs); color: var(--hv-color-text-muted);
}

.magart-gallery.magart-gallery--masonry { display: block; column-count: 2; column-gap: var(--hv-space-3); }
.magart-gallery.magart-gallery--masonry .magart-gallery__trigger { break-inside: avoid; margin-bottom: var(--hv-space-3); }
.magart-gallery.magart-gallery--masonry img { width: 100%; height: auto; aspect-ratio: auto; }
@media (min-width: 720px) { .magart-gallery.magart-gallery--masonry { column-count: 3; } }

.magart-gallery.magart-gallery--justified { display: flex; flex-wrap: wrap; }
.magart-gallery.magart-gallery--justified .magart-gallery__trigger { flex: 1 1 220px; }
.magart-gallery.magart-gallery--justified img { width: 100%; height: 220px; aspect-ratio: auto; }

.magart-video { margin: var(--hv-space-2) 0; }
.magart-video iframe, .magart-video video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--hv-radius-card);
  display: block;
  background: var(--hv-color-surface-deep);
}

/* live listing-card embed — the differentiator. Read-only JFM template. */
.magart-embed {
  margin: var(--hv-space-2) 0;
  padding: var(--hv-space-5);
  border: 1px solid var(--hv-color-border-subtle);
  border-radius: var(--hv-radius-card);
  background: var(--hv-color-surface-subdued);
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-3);
}
.magart-embed__label {
  font-size: var(--hv-text-xs);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hv-core-steel-500);
}
.magart-embed .card { width: 100%; max-width: 340px; }

/* CTA block — structure only, Havenly button system */
.magart-cta {
  margin: var(--hv-space-2) 0;
  padding: var(--hv-space-6);
  border-radius: var(--hv-radius-card);
  background: var(--hv-color-surface-brand-subdued);
  border: 1px solid var(--hv-color-border-subtle);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hv-space-4);
}
.magart-cta p { margin: 0; font-size: var(--hv-text-md); font-weight: 400; color: var(--hv-color-text-strong); max-width: 46ch; }

/* finance footer — auto-carried on finance articles */
.magart-disclaimer {
  padding: var(--hv-space-4) 0 0;
}
.magart-disclaimer p {
  margin: 0;
  padding: var(--hv-space-3) var(--hv-space-4);
  border-radius: var(--hv-radius-md);
  background: var(--hv-color-surface-muted);
  border: 1px solid var(--hv-color-border-subtle);
  font-size: var(--hv-text-xs);
  color: var(--hv-color-text-muted);
}

/* article footer (main column): attribution + places in this story */
.magart-foot { padding: var(--hv-space-8) 0 0; }
.magart-foot__attrib {
  max-width: 720px;
  margin: 0 0 var(--hv-space-10);
  font-size: var(--hv-text-xs);
  color: var(--hv-color-text-muted);
}
.magart-related { margin-top: var(--hv-space-10); }

/* centered newspaper section header — uppercase oblique, hairline beneath */
.magart-related h2 {
  margin: 0 0 var(--hv-space-6);
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--hv-ink, var(--hv-color-text-strong));
  padding-bottom: var(--hv-space-3);
  border-bottom: 1px solid var(--hv-color-border-default);
}
.magart-related__grid { display: flex; flex-wrap: wrap; gap: var(--hv-space-5); justify-content: center; }

/* related articles — dense newspaper list rows: headline left, 3:2 thumb right */
.magart-newslist {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.magart-newslist__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px;
  gap: var(--hv-space-4);
  align-items: center;
  padding: var(--hv-space-4) 0;
  border-bottom: 1px solid var(--hv-color-border-default);
  text-decoration: none;
}
.magart-newslist__item:last-child { border-bottom: 0; }
.magart-newslist__body { display: flex; flex-direction: column; gap: var(--hv-space-1); min-width: 0; }
.magart-newslist__title {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hv-ink, var(--hv-color-text-strong));
}
.magart-newslist__item:hover .magart-newslist__title { color: var(--hv-color-interactive, var(--hv-core-steel-500)); }
.magart-newslist__meta { display: inline-flex; align-items: center; gap: var(--hv-space-3); }
.magart-newslist__cat {
  display: inline-flex;
  align-items: center;
  gap: var(--hv-space-2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hv-color-interactive, var(--hv-core-steel-500));
}
.magart-newslist__cat::before,
.magart-newslist__cat::after {
  content: '';
  width: 1px;
  height: 10px;
  background: currentColor;
}
.magart-newslist__date {
  font-family: var(--hv-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--hv-color-text-muted);
}
/* honest-flip view count (stream H, SidePopular) — same mono/muted treatment
   as the date it sits beside; only rendered when a.viewCount is real. */
.magart-newslist__views {
  font-family: var(--hv-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--hv-color-text-muted);
}
.magart-newslist__thumb {
  width: 90px;
  aspect-ratio: 3 / 2;
  border-radius: var(--hv-radius-md);
  overflow: hidden;
  background: var(--hv-color-surface-muted);
}
.magart-newslist__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Article sidebar rail (mirrors .pdp-sidebar proportions) ─────────────── */
.magart-sidebar { min-width: 0; }
.magart-sidebar-sticky {
  position: sticky;
  top: var(--hv-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-8);
  padding-top: var(--hv-space-12);
}
@media (max-width: 960px) {
  .magart-sidebar-sticky { position: static; top: auto; padding-top: 0; }
}

/* sidebar module header — small newspaper section header, left-aligned */
.magart-side h2 {
  margin: 0 0 var(--hv-space-2);
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hv-ink, var(--hv-color-text-strong));
  padding-bottom: var(--hv-space-2);
  border-bottom: 1px solid var(--hv-color-border-default);
}

/* "The Latest" — dense text-only hairlined rows (no thumbs) */
.magart-newslist--dense .magart-newslist__item {
  grid-template-columns: minmax(0, 1fr);
  padding: var(--hv-space-3) 0;
}
.magart-newslist--dense .magart-newslist__title { font-size: 15px; }

.magart-side__note { margin: 0; font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }

/* ── PDP related-articles module (read-only, JFM-templated) ─────────────── */
.pdp-articles__grid { display: flex; flex-wrap: wrap; gap: var(--hv-space-4); margin-top: var(--hv-space-2); }
.pdp-articles__note { margin: var(--hv-space-3) 0 0; font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }

/* ── Admin block editor (structure-only; Havenly-locked) ─────────────────── */
.mag-ed { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--hv-space-6); align-items: start; }
@media (max-width: 1100px) { .mag-ed { grid-template-columns: 1fr; } }
.mag-ed__col { display: flex; flex-direction: column; gap: var(--hv-space-4); min-width: 0; }
.mag-ed__block {
  border: 1px solid var(--hv-color-border-subtle);
  border-radius: var(--hv-radius-lg);
  background: var(--hv-color-surface-default);
  padding: var(--hv-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-3);
}
.mag-ed__blockhead { display: flex; align-items: center; gap: var(--hv-space-2); }
.mag-ed__blocktype {
  font-size: var(--hv-text-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hv-core-steel-500);
  flex: 1 1 auto;
}
.mag-ed__blockbtn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hv-color-border-subtle);
  border-radius: var(--hv-radius-sm);
  background: transparent;
  color: var(--hv-color-text-subdued);
  cursor: pointer;
  font-size: var(--hv-text-sm);
  line-height: 1;
}
.mag-ed__blockbtn:hover:not(:disabled) { border-color: var(--hv-color-border-strong); color: var(--hv-color-text-strong); }
.mag-ed__blockbtn:disabled { opacity: .35; cursor: not-allowed; }
.mag-ed__add { display: flex; flex-wrap: wrap; gap: var(--hv-space-2); }
.mag-ed__gallery-row { display: flex; gap: var(--hv-space-2); align-items: center; }
.mag-ed__gallery-row .hv-input { flex: 1 1 auto; }
.mag-ed__hint { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); margin: 0; }
.mag-ed__msg {
  padding: var(--hv-space-3) var(--hv-space-4);
  border-radius: var(--hv-radius-md);
  border: 1px solid var(--hv-color-border-default);
  background: var(--hv-color-surface-muted);
  color: var(--hv-color-text-default);
  font-size: var(--hv-text-sm);
}
.mag-ed__msg--err { border-color: var(--hv-core-error-500); color: var(--hv-core-error-500); background: var(--hv-core-error-100); }

/* block editor v2 — drag reorder + insert-between (structure only, no styling controls) */
.mag-ed__blockwrap { display: flex; flex-direction: column; gap: var(--hv-space-2); }
.mag-ed__block--over { border-color: var(--hv-core-steel-500); border-style: dashed; }
.mag-ed__blockhead[draggable="true"] { cursor: grab; }
.mag-ed__insert { display: flex; justify-content: center; }
.mag-ed__insertbtn {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hv-color-border-subtle);
  border-radius: var(--hv-radius-full);
  background: var(--hv-color-surface-default);
  color: var(--hv-color-text-subdued);
  cursor: pointer;
  font-size: var(--hv-text-sm);
  line-height: 1;
  opacity: .55;
}
.mag-ed__insertbtn:hover, .mag-ed__insertbtn:focus-visible { opacity: 1; border-color: var(--hv-color-border-strong); color: var(--hv-color-text-strong); }
.mag-ed__insertmenu { display: flex; flex-wrap: wrap; gap: var(--hv-space-2); justify-content: center; align-items: center; }

/* ── Front-page composer (arrangement only; Havenly-locked) ──────────────── */
.mag-comp__handle { color: var(--hv-color-text-subdued); font-size: var(--hv-text-sm); cursor: grab; user-select: none; }
.mag-comp__index {
  font-size: var(--hv-text-xs);
  font-weight: 500;
  color: var(--hv-color-text-muted);
  min-width: 18px;
}
.mag-comp__row--over { border-color: var(--hv-core-steel-500); border-style: dashed; }
.mag-comp__summary { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); white-space: nowrap; }
.mag-comp__desc { margin: 0; font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }
.mag-comp__btn--active { border-color: var(--hv-core-steel-500); color: var(--hv-core-steel-500); }
.mag-comp__settings {
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-3);
  border-top: 1px solid var(--hv-color-border-subtle);
  padding-top: var(--hv-space-3);
}
.mag-comp__picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hv-space-2); }
@media (max-width: 700px) { .mag-comp__picker { grid-template-columns: 1fr; } }
.mag-comp__pick {
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-1);
  text-align: left;
  border: 1px solid var(--hv-color-border-subtle);
  border-radius: var(--hv-radius-md);
  background: var(--hv-color-surface-default);
  padding: var(--hv-space-3);
  cursor: pointer;
}
.mag-comp__pick:hover, .mag-comp__pick:focus-visible { border-color: var(--hv-core-steel-500); }
.mag-comp__picklabel { font-size: var(--hv-text-sm); font-weight: 400; color: var(--hv-color-text-strong); }
.mag-comp__pickdesc { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }
.mag-comp__preset { display: flex; align-items: center; gap: var(--hv-space-2); }
.mag-comp__presetbody { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mag-comp__presetname { font-size: var(--hv-text-sm); font-weight: 400; color: var(--hv-color-text-strong); }

/* strip-treated hero headline needs opened leading so outlined line-boxes separate */
.magart-title--strip { line-height: 1.36; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; padding: 0 0 4px; }

/* ============================================================
   MAGAZINE BUILDER v2 — first-wave block CSS (MG9–MG14) +
   builder shell (.mag-bld). ADDITIVE ONLY: nothing above this
   line changed; the default /magazine home uses none of these
   selectors, so the locked home page renders untouched.
   ============================================================ */

/* ── MG9 MagLatestNews / MG12 MagRelatedPosts — dense hairlined lists ────── */
.magx-latest, .magx-related { display: flex; flex-direction: column; gap: var(--hv-space-4); }
/* two dense newspaper columns at desktop; the shared .magx-rowlist border
   rules still apply per row */
.magx-latest__grid, .magx-related__grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--hv-space-8); }
@media (max-width: 980px) { .magx-latest__grid, .magx-related__grid { grid-template-columns: 1fr; } }

/* ── MG13 MagNewsletterBlock — full-width sign-up band ───────────────────── */
.magx-newsletter {
  border-top: 2px solid var(--hv-ink);
  border-bottom: 2px solid var(--hv-ink);
  padding: var(--hv-space-8) var(--hv-space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hv-space-3);
  text-align: center;
}
.magx-newsletter__heading { margin: 0; font-size: 24px; font-weight: 700; font-style: oblique 10deg; letter-spacing: .03em; text-transform: uppercase; color: var(--hv-ink); }
.magx-newsletter__copy { margin: 0; font-size: var(--hv-text-sm); color: var(--hv-color-text-muted); }
.magx-newsletter__form { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hv-space-2); width: min(480px, 100%); }
.magx-newsletter__form .hv-input { flex: 1 1 220px; }
.magx-newsletter__msg { margin: 0; font-size: var(--hv-text-sm); color: var(--hv-color-text-default); }
.magx-newsletter__msg--ok { font-weight: 500; }
.magx-newsletter__msg--err { color: var(--hv-core-error-500); flex-basis: 100%; }
.magx-newsletter__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── MG14 MagAdSlot — hairlined placeholder advertisement slot ───────────── */
.magx-adslot {
  border: 1px solid var(--hv-color-border-default);
  padding: var(--hv-space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hv-space-2);
}
.magx-adslot__label { font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--hv-color-text-muted); }
.magx-adslot__creative { display: block; max-width: 100%; }
.magx-adslot__creative img { display: block; max-width: 100%; max-height: 320px; }
.magx-adslot--empty { border-style: dashed; min-height: 120px; justify-content: center; }
.magx-adslot__note { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }

/* ── Builder shell (.mag-bld) — rail | canvas | settings panel ───────────── */
.mag-bld { display: grid; grid-template-columns: 210px minmax(0, 1fr) 320px; gap: var(--hv-space-6); align-items: start; }
@media (max-width: 1280px) { .mag-bld { grid-template-columns: 200px minmax(0, 1fr); } .mag-bld__panel { grid-column: 2; } }
@media (max-width: 900px) { .mag-bld { grid-template-columns: 1fr; } .mag-bld__panel { grid-column: auto; } }

/* left rail — surfaces list (PostX Site Builder grammar, JFM vocabulary) */
.mag-bld__rail {
  background: var(--hv-color-surface-subdued);
  border: 1px solid var(--hv-color-border-subtle);
  border-radius: var(--hv-radius-lg);
  padding: var(--hv-space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: var(--hv-space-6);
}
.mag-bld__rail-label { font-size: var(--hv-text-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--hv-color-text-muted); padding: var(--hv-space-2) var(--hv-space-3); }
.mag-bld__surface {
  display: flex;
  align-items: center;
  gap: var(--hv-space-2);
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: var(--hv-radius-md);
  padding: var(--hv-space-2) var(--hv-space-3);
  font-size: var(--hv-text-sm);
  color: var(--hv-color-text-default);
  cursor: pointer;
}
.mag-bld__surface:hover { background: var(--hv-color-surface-default); color: var(--hv-color-text-strong); }
.mag-bld__surface.is-active { background: var(--hv-color-surface-default); color: var(--hv-brand); font-weight: 400; box-shadow: inset 2px 0 0 var(--hv-brand); }
.mag-bld__surface--indent { padding-left: var(--hv-space-6); }
.mag-bld__rail-foot { margin-top: var(--hv-space-2); padding: var(--hv-space-2) var(--hv-space-3); border-top: 1px solid var(--hv-color-border-subtle); }

/* canvas */
.mag-bld__canvas { display: flex; flex-direction: column; gap: var(--hv-space-4); min-width: 0; }
.mag-bld__canvashead { display: flex; align-items: center; flex-wrap: wrap; gap: var(--hv-space-3); }
.mag-bld__canvashead h2 { margin: 0; font-size: var(--hv-text-lg); font-weight: 400; color: var(--hv-color-text-strong); flex: 1 1 auto; }
.mag-bld__status { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }

/* live-order preview strip — one glyph chip per row, in render order */
.mag-bld__strip {
  display: flex;
  align-items: stretch;
  gap: var(--hv-space-2);
  overflow-x: auto;
  padding: var(--hv-space-3);
  border: 1px solid var(--hv-color-border-subtle);
  border-radius: var(--hv-radius-lg);
  background: var(--hv-color-surface-subdued);
}
.mag-bld__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--hv-color-border-subtle);
  border-radius: var(--hv-radius-md);
  background: var(--hv-color-surface-default);
  padding: var(--hv-space-2) var(--hv-space-3);
  cursor: pointer;
  flex: 0 0 auto;
  color: var(--hv-brand);
}
.mag-bld__chip.is-selected { border-color: var(--hv-brand); box-shadow: 0 0 0 1px var(--hv-brand); }
.mag-bld__chip-label { font-size: 10px; color: var(--hv-color-text-muted); max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mag-bld__strip-empty { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); align-self: center; }

/* templates strip — import cards (PostX template-card grammar) */
.mag-bld__templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--hv-space-3); }
.mag-bld__tcard {
  border: 1px solid var(--hv-color-border-subtle);
  border-radius: var(--hv-radius-lg);
  background: var(--hv-color-surface-default);
  padding: var(--hv-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-3);
}
.mag-bld__tcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hv-space-2); }
.mag-bld__tcard-name { font-size: var(--hv-text-sm); font-weight: 400; color: var(--hv-color-text-strong); }
.mag-bld__tcard-desc { margin: 0; font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); flex: 1 1 auto; }
.mag-bld__tcard-preview { display: flex; flex-direction: column; gap: 3px; color: var(--hv-color-border-strong); }
.mag-bld__tcard--scratch { border-style: dashed; align-items: center; justify-content: center; text-align: center; }
.mag-bld__scratch-plus {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--hv-radius-full);
  border: 1px solid var(--hv-color-border-default);
  color: var(--hv-brand);
  font-size: 22px;
  font-weight: 300;
}

/* status cards for not-yet-buildable surfaces */
.mag-bld__statuscard {
  border: 1px solid var(--hv-color-border-subtle);
  border-radius: var(--hv-radius-lg);
  background: var(--hv-color-surface-default);
  padding: var(--hv-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-3);
  max-width: 640px;
}
.mag-bld__statuscard h3 { margin: 0; font-size: var(--hv-text-md); font-weight: 400; color: var(--hv-color-text-strong); }
.mag-bld__statuscard p { margin: 0; font-size: var(--hv-text-sm); color: var(--hv-color-text-default); }
.mag-bld__statuscard code { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); word-break: break-all; }
.mag-bld__phasepill {
  align-self: flex-start;
  font-size: var(--hv-text-xs);
  font-weight: 500;
  color: var(--hv-color-text-muted);
  border: 1px solid var(--hv-color-border-default);
  border-radius: var(--hv-radius-full);
  padding: 2px 10px;
}

/* right settings panel */
.mag-bld__panel {
  border: 1px solid var(--hv-color-border-subtle);
  border-radius: var(--hv-radius-lg);
  background: var(--hv-color-surface-default);
  padding: var(--hv-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-3);
  position: sticky;
  top: var(--hv-space-6);
}
.mag-bld__panel-empty { font-size: var(--hv-text-sm); color: var(--hv-color-text-muted); text-align: center; padding: var(--hv-space-8) var(--hv-space-2); }
.mag-bld__panel-head { display: flex; align-items: center; gap: var(--hv-space-2); color: var(--hv-brand); }
.mag-bld__panel-title { flex: 1 1 auto; font-size: var(--hv-text-sm); font-weight: 400; color: var(--hv-color-text-strong); }
.mag-bld__panel-code { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }

/* blocks library — one card per registered block (PostX Blocks grammar) */
.mag-bld__groups { display: flex; flex-direction: column; gap: var(--hv-space-6); }
.mag-bld__group h2 { margin: 0 0 var(--hv-space-3); font-size: var(--hv-text-md); font-weight: 400; color: var(--hv-color-text-strong); }
.mag-bld__blockgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--hv-space-3); }
.mag-bld__blockcard {
  display: flex;
  align-items: center;
  gap: var(--hv-space-3);
  border: 1px solid var(--hv-color-border-subtle);
  border-radius: var(--hv-radius-lg);
  background: var(--hv-color-surface-default);
  padding: var(--hv-space-4);
}
.mag-bld__blockglyph { flex: 0 0 auto; color: var(--hv-brand); display: grid; place-items: center; }
.mag-bld__blockbody { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mag-bld__blockname { font-size: var(--hv-text-sm); font-weight: 400; color: var(--hv-color-text-strong); }
.mag-bld__blockname .mag-bld__panel-code { margin-left: 6px; }
.mag-bld__blockdesc { margin: 0; font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }
.mag-bld__blockactions { display: flex; flex-direction: column; gap: var(--hv-space-2); align-items: stretch; }
.mag-bld__row--selected { border-color: var(--hv-brand); }

/* ============================================================
   MAGAZINE INNER PAGES v1 — section (category) + search views
   (.magcat-*). ADDITIVE ONLY: nothing above this line changed.
   The default /magazine front page renders NONE of these
   selectors — every rule is .magcat- prefixed (plus .magcat-
   scoped descendant overrides), so the locked home page is
   untouched. Grammar: Urban Observer category page translated
   to Havenly — steel where the theme used red, navy titles,
   Geist only, magx/magart hairlines.
   ============================================================ */

/* ── full-width section header band ──────────────────────────────────────── */
.magcat-head {
  background: var(--hv-color-surface-subdued);
  border-bottom: 1px solid var(--hv-color-border-default);
}
.magcat-head__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hv-space-5);
  padding-top: var(--hv-space-10);
  padding-bottom: var(--hv-space-8);
  text-align: center;
}
.magcat-head__title {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--hv-brand, var(--hv-color-text-strong));
  text-wrap: balance;
}
.magcat-head__title--search {
  text-transform: none;
  letter-spacing: -0.02em;
  font-size: clamp(26px, 3.2vw, 38px);
}
.magcat-head__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--hv-space-2);
}
.magcat-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border: 1px solid var(--hv-color-border-default);
  border-radius: var(--hv-radius-full);
  background: var(--hv-color-surface-default);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hv-color-text-subdued);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.magcat-pill:hover,
.magcat-pill:focus-visible {
  color: var(--hv-color-interactive);
  border-color: var(--hv-color-interactive);
}

/* ── two-column shell — mirrors .magart-grid (main + 340px rail, 40px gap) ── */
.magcat-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--hv-space-10);
  padding-top: var(--hv-space-10);
}
@media (max-width: 960px) {
  .magcat-grid { grid-template-columns: 1fr; gap: var(--hv-space-8); }
}
.magcat-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-10);
}

/* ── 4-up lead row — PLAIN navy titles (no strip on inner pages) ─────────── */
.magcat-lead {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hv-space-5);
}
@media (max-width: 1100px) { .magcat-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .magcat-lead { grid-template-columns: 1fr; } }
.magcat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hv-space-3);
  text-align: center;
  text-decoration: none;
}
.magcat-card .magx-thumb { width: 100%; }
.magcat-card__title {
  font-size: 17px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hv-brand, var(--hv-color-text-strong));
  text-wrap: balance;
}
.magcat-card:hover .magcat-card__title,
.magcat-card:focus-visible .magcat-card__title { color: var(--hv-color-interactive); }

/* ── two-column dated feed (magx-rowlist hairlines per row) ──────────────── */
.magcat-feed { display: flex; flex-direction: column; gap: var(--hv-space-8); }
.magcat-feedgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--hv-space-8);
}
@media (max-width: 900px) { .magcat-feedgrid { grid-template-columns: 1fr; } }
.magcat-feedgrid .magx-thumb--photo { width: 140px; flex-shrink: 0; }

/* ── centered LOAD MORE ───────────────────────────────────────────────────── */
.magcat-more { display: flex; justify-content: center; }
.magcat-more__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  border: 1px solid var(--hv-color-border-strong);
  border-radius: var(--hv-radius-sm);
  background: var(--hv-color-surface-default);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hv-ink, var(--hv-color-text-strong));
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.magcat-more__btn:hover,
.magcat-more__btn:focus-visible {
  color: var(--hv-color-interactive);
  border-color: var(--hv-color-interactive);
}

/* ── sidebar rail (reuses MagTop5 + magart-newslist--dense grammar) ──────── */
.magcat-sidebar { min-width: 0; }
.magcat-sidebar-sticky {
  position: sticky;
  top: var(--hv-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-8);
}
@media (max-width: 960px) {
  .magcat-sidebar-sticky { position: static; top: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .magcat-pill, .magcat-more__btn { transition: none; }
}
   ARTICLE PAGE — Tier-1 grammar (magazine-inner-pages-builder-
   styling-v1). ADDITIVE ONLY: nothing above this line changed.
   Plain navy title (the strip treatment stays on the FRONT page
   — .magart-title--strip above is retired from the article page
   but kept for the front-page grammar reference), section/tag
   pills, byline share row, prev/next two-up, author bio box and
   the replies section (magcmt-). Steel interactive, Geist only.
   ============================================================ */

/* ── section + tag pill rows ─────────────────────────────────────────────── */
.magart-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hv-space-2);
  margin: 0 0 var(--hv-space-5);
}
.magart-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hv-color-border-default);
  border-radius: var(--hv-radius-full);
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hv-color-interactive, var(--hv-core-steel-500));
  text-decoration: none;
  background: var(--hv-color-surface-default);
  transition: border-color .15s ease, color .15s ease;
}
.magart-pill:hover,
.magart-pill:focus-visible {
  border-color: var(--hv-color-interactive, var(--hv-core-steel-500));
}
.magart-pill--tag {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  color: var(--hv-color-text-default);
}
.magart-pill--tag:hover,
.magart-pill--tag:focus-visible {
  color: var(--hv-color-interactive, var(--hv-core-steel-500));
}

/* ── byline band with the social share row on the right ──────────────────── */
.magart-byline--band {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--hv-space-2) var(--hv-space-3);
}
.magart-share {
  display: inline-flex;
  align-items: center;
  gap: var(--hv-space-2);
  margin-left: auto;
}
.magart-share__btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hv-color-border-default);
  border-radius: var(--hv-radius-full);
  background: var(--hv-color-surface-default);
  color: var(--hv-color-interactive, var(--hv-core-steel-500));
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.magart-share__btn:hover,
.magart-share__btn:focus-visible {
  border-color: var(--hv-color-interactive, var(--hv-core-steel-500));
  background: var(--hv-color-surface-muted);
}
.magart-share__btn.is-copied { border-color: var(--hv-color-interactive, var(--hv-core-steel-500)); }
.magart-share__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .magart-pill, .magart-share__btn { transition: none; }
}

/* ── tags row after the body ─────────────────────────────────────────────── */
.magart-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hv-space-2);
  margin-top: var(--hv-space-4);
  padding-top: var(--hv-space-5);
  border-top: 1px solid var(--hv-color-border-default);
}
.magart-tags__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hv-color-text-muted);
  margin-right: var(--hv-space-2);
}

/* ── previous / next two-up cards ────────────────────────────────────────── */
.magart-pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hv-space-5);
  margin-top: var(--hv-space-10);
  padding-top: var(--hv-space-6);
  border-top: 1px solid var(--hv-color-border-default);
}
@media (max-width: 640px) { .magart-pn { grid-template-columns: 1fr; } }
.magart-pn__card {
  display: flex;
  align-items: center;
  gap: var(--hv-space-4);
  text-decoration: none;
  min-width: 0;
}
.magart-pn__card--next {
  flex-direction: row-reverse;
  text-align: right;
}
.magart-pn__card--next .magart-pn__body { align-items: flex-end; }
.magart-pn__thumb {
  width: 104px;
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
  border-radius: var(--hv-radius-md);
  overflow: hidden;
  background: var(--hv-color-surface-muted);
}
.magart-pn__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.magart-pn__body { display: flex; flex-direction: column; gap: var(--hv-space-1); min-width: 0; }
.magart-pn__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hv-color-interactive, var(--hv-core-steel-500));
}
.magart-pn__title {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hv-ink, var(--hv-color-text-strong));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.magart-pn__card:hover .magart-pn__title,
.magart-pn__card:focus-visible .magart-pn__title {
  color: var(--hv-color-interactive, var(--hv-core-steel-500));
}

/* ── author bio box ──────────────────────────────────────────────────────── */
.magart-author {
  display: flex;
  gap: var(--hv-space-4);
  align-items: flex-start;
  margin-top: var(--hv-space-10);
  padding: var(--hv-space-5) var(--hv-space-6);
  border: 1px solid var(--hv-color-border-subtle);
  border-radius: var(--hv-radius-lg);
  background: var(--hv-color-surface-subdued);
}
.magart-author__avatar {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--hv-radius-full);
  background: var(--hv-ink, var(--hv-color-text-strong));
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .02em;
}
.magart-author__body { display: flex; flex-direction: column; gap: var(--hv-space-1); min-width: 0; }
.magart-author__name {
  font-size: var(--hv-text-md);
  font-weight: 600;
  color: var(--hv-ink, var(--hv-color-text-strong));
}
.magart-author__bio {
  margin: 0;
  font-size: var(--hv-text-sm);
  line-height: 1.55;
  font-weight: 300;
  color: var(--hv-color-text-subdued);
  max-width: 56ch;
}
.magart-author__link { font-size: var(--hv-text-sm); }

/* ── replies (magcmt-) — the "Leave a reply" section ─────────────────────── */
.magcmt {
  margin-top: var(--hv-space-10);
  padding-top: var(--hv-space-6);
  border-top: 1px solid var(--hv-color-border-default);
}
.magcmt__heading {
  margin: 0 0 var(--hv-space-5);
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hv-ink, var(--hv-color-text-strong));
  padding-bottom: var(--hv-space-3);
  border-bottom: 1px solid var(--hv-color-border-default);
}
.magcmt__list { display: flex; flex-direction: column; }
.magcmt__item {
  display: flex;
  gap: var(--hv-space-3);
  padding: var(--hv-space-4) 0;
  border-bottom: 1px solid var(--hv-color-border-subtle);
}
.magcmt__item:last-child { border-bottom: 0; }
.magcmt__avatar {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--hv-radius-full);
  background: var(--hv-color-surface-muted);
  color: var(--hv-color-text-strong);
  font-size: 13px;
  font-weight: 500;
}
.magcmt__body { min-width: 0; display: flex; flex-direction: column; gap: var(--hv-space-1); }
.magcmt__meta {
  display: flex;
  align-items: baseline;
  gap: var(--hv-space-3);
  font-size: var(--hv-text-sm);
}
.magcmt__meta b { font-weight: 500; color: var(--hv-ink, var(--hv-color-text-strong)); }
.magcmt__date {
  font-family: var(--hv-font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--hv-color-text-muted);
}
.magcmt__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--hv-color-text-default);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.magcmt__empty {
  margin: 0 0 var(--hv-space-2);
  font-size: var(--hv-text-sm);
  color: var(--hv-color-text-subdued);
}
.magcmt__cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--hv-space-4);
  margin-top: var(--hv-space-5);
}
.magcmt__note { margin: 0; font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }
   MAGAZINE BUILDER DESIGN v1 — second-wave blocks (MG15–MG22,
   magx3-) + Design-tab token overrides (.magx-styled) + builder
   Design-tab UI. ADDITIVE ONLY: nothing above this line changed;
   the default /magazine composition uses none of these selectors,
   so the locked home page renders untouched. Every value maps to
   Havenly tokens — no arbitrary colours, spacing steps only.
   ============================================================ */

/* ── shared V3 atoms ── */
.magx3-title { font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--hv-ink); letter-spacing: var(--hv-tracking-tight); }
.magx3-title--lg { font-size: 22px; line-height: 1.25; }
.magx3-title--sm { font-size: 14px; }
a:hover > .magx3-title, a:hover .magx3-title { color: var(--hv-color-interactive); }

/* ── MG15 MagGridDense — 3/4-across compact image cards ── */
.magx3-gdense-wrap, .magx3-mosaic-wrap, .magx3-gtext-wrap { display: flex; flex-direction: column; gap: var(--hv-space-4); }
.magx3-gdense { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hv-space-6); }
.magx3-gdense[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.magx3-gdense[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.magx3-gdense__card { display: flex; flex-direction: column; gap: var(--hv-space-2); text-decoration: none; min-width: 0; }
.magx3-gdense__x { -webkit-line-clamp: 2; }
@media (max-width: 980px) { .magx3-gdense, .magx3-gdense[data-cols="3"] { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .magx3-gdense, .magx3-gdense[data-cols="3"], .magx3-gdense[data-cols="2"] { grid-template-columns: 1fr; } }

/* ── MG16 MagGridMosaic — 1 big lead + 4 small (2×2) ── */
.magx3-mosaic { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-auto-rows: min-content; gap: var(--hv-space-6); }
.magx3-mosaic__big { grid-row: span 2; display: flex; flex-direction: column; gap: var(--hv-space-3); text-decoration: none; min-width: 0; }
.magx3-mosaic__small { display: flex; flex-direction: column; gap: var(--hv-space-2); text-decoration: none; min-width: 0; }
@media (max-width: 980px) {
  .magx3-mosaic { grid-template-columns: 1fr 1fr; }
  .magx3-mosaic__big { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) { .magx3-mosaic { grid-template-columns: 1fr; } }

/* ── MG17 MagGridText — image-light text grid, hairline column rules ── */
.magx3-gtext { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: var(--hv-space-8); }
.magx3-gtext[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.magx3-gtext[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.magx3-gtext__cell { display: flex; flex-direction: column; gap: var(--hv-space-2); text-decoration: none; min-width: 0; padding: 0 var(--hv-space-6); border-left: 1px solid var(--hv-color-border-default); }
.magx3-gtext__cell:first-child { border-left: 0; padding-left: 0; }
.magx3-gtext[data-cols="3"] .magx3-gtext__cell:nth-child(3n+1),
.magx3-gtext:not([data-cols]) .magx3-gtext__cell:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.magx3-gtext[data-cols="2"] .magx3-gtext__cell:nth-child(2n+1) { border-left: 0; padding-left: 0; }
.magx3-gtext[data-cols="4"] .magx3-gtext__cell:nth-child(4n+1) { border-left: 0; padding-left: 0; }
.magx3-gtext__cell .magx-excerpt { -webkit-line-clamp: 2; }
@media (max-width: 980px) {
  .magx3-gtext, .magx3-gtext[data-cols="2"], .magx3-gtext[data-cols="4"] { grid-template-columns: 1fr; }
  .magx3-gtext .magx3-gtext__cell { border-left: 0; padding: 0; }
}

/* ── MG18 MagListCompact — one-line rows, optional square thumb ── */
.magx3-lcompact { display: flex; flex-direction: column; gap: var(--hv-space-4); }
.magx3-lcompact__list { display: flex; flex-direction: column; }
.magx3-lcompact__row { display: flex; align-items: center; gap: var(--hv-space-3); padding: var(--hv-space-2) 0; border-bottom: 1px solid var(--hv-color-border-default); text-decoration: none; }
.magx3-lcompact__row:last-child { border-bottom: 0; }
.magx3-lcompact__thumb { width: 44px; aspect-ratio: 1 / 1; flex: 0 0 auto; }
.magx3-lcompact__title { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.3; font-weight: 700; color: var(--hv-ink); letter-spacing: var(--hv-tracking-tight); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.magx3-lcompact__row:hover .magx3-lcompact__title { color: var(--hv-color-interactive); }
.magx3-lcompact__date { flex: 0 0 auto; font-family: var(--hv-font-mono); font-size: 11px; letter-spacing: .04em; color: var(--hv-color-text-muted); white-space: nowrap; }

/* ── MG19 MagSlider — hero slider (client engine in MagSliderClient) ──
   Geometry moves on --hv-spring; NO wheel handlers exist; touch-action pan-y
   keeps vertical drags scrolling the page. Reduced motion: instant swap,
   controls stay functional. */
.magx3-slider { position: relative; display: flex; flex-direction: column; gap: var(--hv-space-3); }
.magx3-slider__viewport { position: relative; overflow: hidden; touch-action: pan-y; }
.magx3-slider__track { display: flex; transition: transform 660ms var(--hv-spring); }
.magx3-slide { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--hv-space-3); text-decoration: none; }
.magx3-slide__media { aspect-ratio: 21 / 9; }
.magx3-slide .magx-boxtitle { margin-top: -34px; }
.magx3-slider__arrow {
  position: absolute; top: 0; height: 100%; width: 44px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--hv-ink); opacity: 0;
  transition: opacity 180ms ease;
}
.magx3-slider__arrow--prev { left: 0; }
.magx3-slider__arrow--next { right: 0; }
.magx3-slider__arrow svg { background: var(--hv-color-surface-default); border: 1px solid var(--hv-color-border-default); padding: 8px; width: 34px; height: 34px; box-sizing: border-box; }
.magx3-slider__arrow:hover { color: var(--hv-color-interactive); }
.magx3-slider:hover .magx3-slider__arrow, .magx3-slider:focus-within .magx3-slider__arrow { opacity: 1; }
.magx3-slider__dots { display: flex; justify-content: center; gap: var(--hv-space-2); }
.magx3-slider__dot { width: 9px; height: 9px; padding: 0; border-radius: var(--hv-radius-full); border: 1px solid var(--hv-ink); background: transparent; cursor: pointer; }
.magx3-slider__dot.is-on { background: var(--hv-ink); }
@media (prefers-reduced-motion: reduce) {
  .magx3-slider__track { transition: none; }
  .magx3-slider__arrow { opacity: 1; transition: none; }
}

/* ── MG20 MagTicker — thin ruled headline band (CSS animation only) ── */
.magx3-ticker { display: flex; align-items: center; gap: var(--hv-space-4); border-top: 1px solid var(--hv-color-border-default); border-bottom: 1px solid var(--hv-color-border-default); padding: var(--hv-space-2) 0; }
.magx3-ticker__label { flex: 0 0 auto; background: var(--hv-ink); color: #fff; font-size: 11px; font-weight: 700; font-style: oblique 10deg; letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px; }
.magx3-ticker__scroll { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.magx3-ticker__inner { display: inline-flex; align-items: center; white-space: nowrap; animation: magx3-tick 45s linear infinite; will-change: transform; }
.magx3-ticker__scroll:hover .magx3-ticker__inner,
.magx3-ticker__scroll:focus-within .magx3-ticker__inner { animation-play-state: paused; }
.magx3-ticker__dup { display: inline-flex; align-items: center; }
.magx3-ticker__item { display: inline-flex; align-items: center; gap: var(--hv-space-2); margin-right: var(--hv-space-8); font-size: 13px; font-weight: 700; color: var(--hv-ink); text-decoration: none; letter-spacing: var(--hv-tracking-tight); }
.magx3-ticker__item:hover { color: var(--hv-color-interactive); }
.magx3-ticker__dot { width: 5px; height: 5px; border-radius: var(--hv-radius-full); background: var(--hv-color-interactive); flex: 0 0 auto; }
@keyframes magx3-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .magx3-ticker__inner { animation: none; }
  .magx3-ticker__dup { display: none; }
}

/* ── MG21 MagTaxonomyPills — centred section pills band ── */
.magx3-pills { display: flex; flex-direction: column; align-items: center; gap: var(--hv-space-3); }
.magx3-pills__head { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--hv-color-text-muted); }
.magx3-pills__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hv-space-3); }
.magx3-pills__pill { border: 1px solid var(--hv-ink); border-radius: var(--hv-radius-full); padding: 8px 20px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--hv-ink); text-decoration: none; }
.magx3-pills__pill:hover { background: var(--hv-ink); color: #fff; }

/* ── MG22 MagColumns — two-lane wrapper (one nesting level) ── */
.magx3-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 0 var(--hv-space-8); align-items: start; }
.magx3-cols[data-split="1-1"] { grid-template-columns: 1fr 1fr; }
.magx3-cols[data-split="1-2"] { grid-template-columns: 1fr 2fr; }
.magx3-cols__lane { display: flex; flex-direction: column; gap: var(--hv-space-10); min-width: 0; }
.magx3-cols__lane + .magx3-cols__lane { border-left: 1px solid var(--hv-color-border-default); padding-left: var(--hv-space-8); }
@media (max-width: 980px) {
  .magx3-cols, .magx3-cols[data-split="1-1"], .magx3-cols[data-split="1-2"] { grid-template-columns: 1fr; gap: var(--hv-space-10); }
  .magx3-cols__lane + .magx3-cols__lane { border-left: 0; padding-left: 0; }
}

/* ── Design-tab overrides (.magx-styled data-attributes) ──────────────────
   The mapper wraps EVERY saved-layout row in .magx-styled; attributes appear
   only when the founder picked a non-default option, so an unstyled wrapper
   is visually inert. All selectors are compound (attribute + descendant) so
   they outrank the single-class base rules regardless of sheet order. */
.magx-styled { min-width: 0; }

/* surface — allowed Havenly tints only */
.magx-styled[data-bg="tint"] { background: var(--hv-color-surface-subdued); padding: var(--hv-space-6); }
.magx-styled[data-bg="wash"] { background: var(--hv-color-surface-muted); padding: var(--hv-space-6); }

/* divider under the whole row */
.magx-styled[data-divider="hairline"] { border-bottom: 1px solid var(--hv-color-border-default); padding-bottom: var(--hv-space-10); }
.magx-styled[data-divider="heavy"] { border-bottom: 2px solid var(--hv-ink); padding-bottom: var(--hv-space-10); }

/* density — one Havenly spacing step down/up on list rows + card gaps */
.magx-styled[data-density="compact"] .magx-rowlist > * { padding: var(--hv-space-2) 0; }
.magx-styled[data-density="spacious"] .magx-rowlist > * { padding: var(--hv-space-5) 0; }
.magx-styled[data-density="compact"] .magx-top5__row { padding: var(--hv-space-2) 0; }
.magx-styled[data-density="spacious"] .magx-top5__row { padding: var(--hv-space-5) 0; }
.magx-styled[data-density="compact"] .magx3-lcompact__row { padding: 6px 0; }
.magx-styled[data-density="spacious"] .magx3-lcompact__row { padding: var(--hv-space-3) 0; }
.magx-styled[data-density="compact"] :is(.magx-fg3__cell, .magx-row4__card, .magx-mixed__cell, .magx-herosplit__hero, .magx3-gdense__card, .magx3-mosaic__small, .magx3-gtext__cell) { gap: var(--hv-space-2); }
.magx-styled[data-density="spacious"] :is(.magx-fg3__cell, .magx-row4__card, .magx-mixed__cell, .magx-herosplit__hero, .magx3-gdense__card, .magx3-mosaic__small, .magx3-gtext__cell) { gap: var(--hv-space-4); }
.magx-styled[data-density="compact"] :is(.magx3-gdense, .magx3-mosaic) { gap: var(--hv-space-4); }
.magx-styled[data-density="spacious"] :is(.magx3-gdense, .magx3-mosaic) { gap: var(--hv-space-8); }
.magx-styled[data-density="compact"] .magx-listrow__title { font-size: 14px; }

/* image ratio — force every thumb in the row to one aspect */
.magx-styled[data-ratio="wide"] :is(.magx-thumb--wide, .magx-thumb--tall, .magx-thumb--photo) { aspect-ratio: 16 / 10; }
.magx-styled[data-ratio="photo"] :is(.magx-thumb--wide, .magx-thumb--tall, .magx-thumb--photo) { aspect-ratio: 3 / 2; }
.magx-styled[data-ratio="tall"] :is(.magx-thumb--wide, .magx-thumb--tall, .magx-thumb--photo) { aspect-ratio: 4 / 3; }

/* heading treatment — column heads only (oblique is the shipped default) */
.magx-styled[data-heading="plain"] :is(.magx-colhead span, .magx-colhead a) { font-style: normal; letter-spacing: .06em; }
.magx-styled[data-heading="band"] .magx-colhead { border-top: 2px solid var(--hv-ink); border-bottom: 2px solid var(--hv-ink); padding: var(--hv-space-2) 0; }

/* excerpt clamp (0 hides excerpts entirely) */
.magx-styled[data-xl="0"] .magx-excerpt { display: none; }
.magx-styled[data-xl="1"] .magx-excerpt { -webkit-line-clamp: 1; }
.magx-styled[data-xl="2"] .magx-excerpt { -webkit-line-clamp: 2; }
.magx-styled[data-xl="3"] .magx-excerpt { -webkit-line-clamp: 3; }

/* meta parts — hide author / date / category */
.magx-styled[data-hide~="author"] .magx-meta2 > b { display: none; }
.magx-styled[data-hide~="date"] .magx-meta2__date { display: none; }
.magx-styled[data-hide~="category"] .magx-cat { display: none; }

/* ── Builder: tabbed right panel + segmented Design controls + wrapper lanes ── */
.mag-bld__tabs { display: flex; gap: var(--hv-space-1); border-bottom: 1px solid var(--hv-color-border-subtle); }
.mag-bld__tab {
  flex: 1 1 0; border: 0; background: none; cursor: pointer;
  padding: var(--hv-space-2) var(--hv-space-2) var(--hv-space-3);
  font-size: var(--hv-text-sm); color: var(--hv-color-text-subdued);
}
.mag-bld__tab:hover { color: var(--hv-color-text-strong); }
.mag-bld__tab.is-on { color: var(--hv-brand); font-weight: 400; box-shadow: inset 0 -2px 0 var(--hv-brand); }

.mag-bld__seg { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--hv-color-border-subtle); border-radius: var(--hv-radius-md); overflow: hidden; }
.mag-bld__seg button {
  flex: 1 1 auto; border: 0; background: var(--hv-color-surface-default);
  padding: var(--hv-space-2) var(--hv-space-2); cursor: pointer;
  font-size: var(--hv-text-xs); color: var(--hv-color-text-subdued);
  border-left: 1px solid var(--hv-color-border-subtle);
}
.mag-bld__seg button:first-child { border-left: 0; }
.mag-bld__seg button:hover { color: var(--hv-color-text-strong); }
.mag-bld__seg button.is-on { background: var(--hv-color-surface-subdued); color: var(--hv-brand); font-weight: 400; box-shadow: inset 0 -2px 0 var(--hv-brand); }
.mag-bld__designnote { margin: 0; font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }

/* wrapper row lanes on the canvas */
.mag-bld__lanes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hv-space-3); border-top: 1px solid var(--hv-color-border-subtle); padding-top: var(--hv-space-3); }
@media (max-width: 700px) { .mag-bld__lanes { grid-template-columns: 1fr; } }
.mag-bld__lane { display: flex; flex-direction: column; gap: var(--hv-space-2); border: 1px dashed var(--hv-color-border-default); border-radius: var(--hv-radius-md); padding: var(--hv-space-3); background: var(--hv-color-surface-subdued); min-width: 0; }
.mag-bld__lane-label { font-size: var(--hv-text-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--hv-color-text-muted); }
.mag-bld__lane-row {
  display: flex; align-items: center; gap: var(--hv-space-2);
  border: 1px solid var(--hv-color-border-subtle); border-radius: var(--hv-radius-md);
  background: var(--hv-color-surface-default); padding: var(--hv-space-2) var(--hv-space-3);
  cursor: pointer; text-align: left; width: 100%;
}
.mag-bld__lane-row.is-selected { border-color: var(--hv-brand); box-shadow: 0 0 0 1px var(--hv-brand); }
.mag-bld__lane-name { flex: 1 1 auto; min-width: 0; font-size: var(--hv-text-xs); color: var(--hv-color-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mag-bld__lane-empty { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }

/* ============================================================
   MAGAZINE ELEMENTOR EXPERIENCE v1 — third-wave site-component
   blocks (MG23–MG28, magx4-). ADDITIVE ONLY: nothing above this
   line changed; the default /magazine composition uses none of
   these selectors, so the locked front page renders untouched.
   MG23–MG25 reuse the LOCKED v7 .card system (C1/C3/C5) inside a
   scrollable strip; MG26–MG28 are editorial bands. Havenly
   tokens only — deal orange stays in .dribbon (never green,
   never gold). ============================================== */

/* ── shared: labelled empty frame (preview/dev only — MagAdSlot grammar) ── */
.magx4-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--hv-space-2);
  border: 1px dashed var(--hv-color-border-default);
  border-radius: var(--hv-radius-md);
  padding: var(--hv-space-8) var(--hv-space-6);
  background: var(--hv-color-surface-subdued);
  text-align: center;
}
.magx4-empty__label {
  font-size: var(--hv-text-xs); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--hv-color-text-muted);
}
.magx4-empty__note { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); max-width: 52ch; }

/* ── MG23/24/25 — site-card strip: fixed-width v7 cards in a scrollable row ── */
.magx4-railwrap { display: flex; flex-direction: column; gap: var(--hv-space-5); min-width: 0; }
.magx4-cards {
  display: flex; gap: var(--hv-space-4);
  overflow-x: auto;
  padding: var(--hv-space-1) var(--hv-space-1) var(--hv-space-3);
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.magx4-cards > .card, .magx4-deal { flex: 0 0 248px; scroll-snap-align: start; }
.magx4-deal > .card { width: 248px; }
/* narrow wrapper lanes: cards keep their locked size and the lane scrolls */
.magx3-cols__lane .magx4-cards { padding-right: 0; }

/* Deal-orange doctrine (LOCKED, founder ruling 5 Jul 2026): the ribbon's
   --hv-core-orange-d1…d5 discount ramp is stamped by DealCard itself as
   .dribbon[data-d] (havenly-ds.css) — ONE shared mechanism for the homepage
   DealsRail and MG24 alike. The old .magx4-deal[data-d] descendant override
   is retired; .magx4-deal remains as the rail sizing wrapper only.
   Never green (green = Verified), never gold (gold = AI). */

/* Design-tab density on the strips (gap steps one Havenly spacing step) */
.magx-styled[data-density="compact"] .magx4-cards { gap: var(--hv-space-3); }
.magx-styled[data-density="spacious"] .magx4-cards { gap: var(--hv-space-6); }
.magx-styled[data-density="compact"] .magx4-railwrap { gap: var(--hv-space-4); }
.magx-styled[data-density="spacious"] .magx4-railwrap { gap: var(--hv-space-6); }

/* ── MG26 MagCtaBand — full-width editorial call-to-action ── */
.magx4-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--hv-space-6); flex-wrap: wrap;
  padding: var(--hv-space-8) var(--hv-space-8);
  border-radius: var(--hv-radius-lg);
}
.magx4-cta[data-tone="navy"] {
  background: var(--hv-brand); /* navy #001F60 */
  color: var(--hv-color-text-inverse, #fff);
}
.magx4-cta[data-tone="light"] {
  background: var(--hv-color-surface-subdued);
  border-top: 1px solid var(--hv-ink, var(--hv-color-border-strong));
  border-bottom: 1px solid var(--hv-color-border-default);
  border-radius: 0;
}
.magx4-cta__copy { display: flex; flex-direction: column; gap: var(--hv-space-2); min-width: 0; }
.magx4-cta__title {
  margin: 0; font-size: 26px; line-height: 1.2; font-weight: 700;
  letter-spacing: var(--hv-tracking-tight);
}
.magx4-cta[data-tone="light"] .magx4-cta__title { color: var(--hv-ink, var(--hv-color-text-strong)); }
.magx4-cta__body { margin: 0; font-size: 15px; line-height: 1.6; font-weight: 300; }
.magx4-cta[data-tone="navy"] .magx4-cta__body { color: var(--hv-core-brand-200); /* muted navy tint */ }
.magx4-cta[data-tone="light"] .magx4-cta__body { color: var(--hv-color-text-default); }
.magx-styled[data-density="compact"] .magx4-cta { padding: var(--hv-space-6) var(--hv-space-6); }
.magx-styled[data-density="spacious"] .magx4-cta { padding: var(--hv-space-10) var(--hv-space-10); }
@media (max-width: 700px) { .magx4-cta { flex-direction: column; align-items: flex-start; } }

/* ── MG27 MagImageBand — single full-width editorial image + caption ── */
.magx4-imgband { margin: 0; display: flex; flex-direction: column; gap: var(--hv-space-3); }
.magx4-imgband__media {
  display: block; overflow: hidden;
  background: var(--hv-color-surface-muted);
  aspect-ratio: 21 / 9;
}
.magx4-imgband[data-ratio="photo"] .magx4-imgband__media { aspect-ratio: 16 / 10; }
.magx4-imgband[data-ratio="tall"] .magx4-imgband__media { aspect-ratio: 4 / 3; }
.magx4-imgband__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.magx4-imgband__caption {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--hv-space-4);
  font-size: var(--hv-text-sm); line-height: 1.5; font-weight: 300;
  color: var(--hv-color-text-default);
  border-bottom: 1px solid var(--hv-color-border-subtle);
  padding-bottom: var(--hv-space-3);
}
.magx4-imgband__credit {
  flex: 0 0 auto;
  font-family: var(--hv-font-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--hv-color-text-muted); white-space: nowrap;
}

/* ── MG28 MagQuoteBand — the article pull-quote hairline grammar,
      front-page scale (short centred rules above/below, no bar, no glyphs) ── */
.magx4-quote { margin: 0; padding: var(--hv-space-4) var(--hv-space-6); text-align: center; }
.magx4-quote::before,
.magx4-quote::after {
  content: '';
  display: block; width: 64px; height: 1px; margin: 0 auto;
  background: var(--hv-color-border-strong);
}
.magx4-quote::before { margin-bottom: var(--hv-space-6); }
.magx4-quote::after { margin-top: var(--hv-space-6); }
.magx4-quote__text {
  margin: 0 auto; max-width: 26ch;
  font-size: clamp(24px, 3.2vw, 34px); line-height: 1.3; font-weight: 500;
  letter-spacing: var(--hv-tracking-tight);
  color: var(--hv-ink, var(--hv-color-text-strong));
}
.magx4-quote__attr {
  margin-top: var(--hv-space-4);
  font-size: var(--hv-text-sm); font-weight: 300;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--hv-color-text-muted);
}
.magx-styled[data-density="compact"] .magx4-quote { padding: var(--hv-space-2) var(--hv-space-6); }
.magx-styled[data-density="spacious"] .magx4-quote { padding: var(--hv-space-8) var(--hv-space-6); }
/* ══════════════════════════════════════════════════════════════════════════
   MAGAZINE BUILDER — Elementor-grade live-preview editor
   (magazine-elementor-experience-v1). ADDITIVE ONLY, .magb/.magb- prefixes.
   Grammar: TOP BAR (undo/redo · view toggle · device toggle · draft chip ·
   save) + LEFT DOCK (Blocks | Patterns) + CANVAS (the real rendered page in a
   scaled frame with selection shells) + RIGHT RAIL (accordioned Settings |
   Design). Havenly tokens only; reduced-motion safe; no wheel hijack.
   ════════════════════════════════════════════════════════════════════════ */

.magb {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) 320px;
  gap: var(--hv-space-4);
  align-items: start;
}
@media (max-width: 1280px) { .magb { grid-template-columns: 232px minmax(0, 1fr); } .magb__rail { grid-column: 1 / -1; } }
@media (max-width: 900px) { .magb { grid-template-columns: 1fr; } .magb__dock, .magb__rail { grid-column: auto; } }
.magb--status { grid-template-columns: 1fr; }

/* ── top bar ── */
.magb__topbar {
  grid-column: 1 / -1;
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--hv-space-2);
  border: 1px solid var(--hv-color-border-subtle);
  border-radius: var(--hv-radius-lg);
  background: var(--hv-color-surface-default);
  padding: var(--hv-space-2) var(--hv-space-3);
  position: sticky; top: 0; z-index: 40;
}
.magb__msg { grid-column: 1 / -1; }
.magb__surface { width: auto; min-width: 150px; font-size: var(--hv-text-sm); padding-top: 6px; padding-bottom: 6px; }
.magb__sep { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--hv-color-border-subtle); }
.magb__grow { flex: 1 1 auto; }
.magb__tbtn {
  border: 1px solid var(--hv-color-border-subtle); border-radius: var(--hv-radius-md);
  background: none; color: var(--hv-color-text-default);
  width: 30px; height: 30px; font-size: var(--hv-text-md); line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.magb__tbtn:hover:not(:disabled) { background: var(--hv-color-surface-subdued); color: var(--hv-color-text-strong); }
.magb__tbtn:disabled { opacity: .35; cursor: default; }
.magb__seg { display: flex; border: 1px solid var(--hv-color-border-subtle); border-radius: var(--hv-radius-md); overflow: hidden; }
.magb__seg button {
  border: 0; border-left: 1px solid var(--hv-color-border-subtle);
  background: none; color: var(--hv-color-text-muted);
  font: inherit; font-size: var(--hv-text-xs); padding: 6px 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.magb__seg button:first-child { border-left: 0; }
.magb__seg button:hover { color: var(--hv-color-text-strong); }
.magb__seg button.is-on { background: var(--hv-color-surface-subdued); color: var(--hv-brand); font-weight: 400; box-shadow: inset 0 -2px 0 var(--hv-brand); }
.magb__seg--icons button { padding: 6px 9px; }
.magb__chip {
  font-size: var(--hv-text-xs); color: var(--hv-color-text-muted);
  border: 1px solid var(--hv-color-border-subtle); border-radius: var(--hv-radius-full);
  padding: 3px 10px; white-space: nowrap;
}
.magb__chip--dirty {
  color: var(--hv-core-orange-ink, #8a4b12);
  border-color: var(--hv-core-orange-d1, #f2b27f);
  background: color-mix(in srgb, var(--hv-core-orange-d1, #f2b27f) 16%, transparent);
}

/* ── left dock (Blocks | Patterns) ── */
.magb__dock {
  display: flex; flex-direction: column; gap: var(--hv-space-3);
  border: 1px solid var(--hv-color-border-subtle); border-radius: var(--hv-radius-lg);
  background: var(--hv-color-surface-default);
  padding: var(--hv-space-3);
  position: sticky; top: 56px;
  max-height: calc(100vh - 72px); overflow-y: auto;
}
.magb-dock__tabs { display: flex; gap: var(--hv-space-1); border-bottom: 1px solid var(--hv-color-border-subtle); }
.magb-dock__tabs button {
  border: 0; background: none; font: inherit; font-size: var(--hv-text-sm);
  color: var(--hv-color-text-muted); padding: 6px 10px; cursor: pointer;
}
.magb-dock__tabs button:hover:not(:disabled) { color: var(--hv-color-text-strong); }
.magb-dock__tabs button.is-on { color: var(--hv-brand); font-weight: 400; box-shadow: inset 0 -2px 0 var(--hv-brand); }
.magb-dock__tabs button:disabled { opacity: .4; cursor: default; }
.magb-dock__search { font-size: var(--hv-text-sm); }
.magb-dock__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hv-space-2); }
.magb-block {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 1px solid var(--hv-color-border-subtle); border-radius: var(--hv-radius-md);
  background: var(--hv-color-surface-default); color: var(--hv-brand);
  font: inherit; padding: var(--hv-space-3) var(--hv-space-2);
  cursor: grab; text-align: center;
}
.magb-block:hover { border-color: var(--hv-brand); box-shadow: 0 0 0 1px var(--hv-brand); }
.magb-block:active { cursor: grabbing; }
.magb-block__name { font-size: 11px; line-height: 1.25; color: var(--hv-color-text-strong); }
.magb-block__code { font-size: 10px; color: var(--hv-color-text-muted); }
.magb-dock__hint, .magb-dock__empty { margin: 0; font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }
.magb-dock__grouplabel { font-size: var(--hv-text-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--hv-color-text-muted); }
.magb-dock__patterns { display: flex; flex-direction: column; gap: var(--hv-space-3); }
.magb-pattern {
  display: flex; flex-direction: column; gap: var(--hv-space-2);
  border: 1px solid var(--hv-color-border-subtle); border-radius: var(--hv-radius-md);
  padding: var(--hv-space-3);
}
.magb-pattern--scratch { border-style: dashed; }
.magb-pattern__head { display: flex; align-items: center; justify-content: space-between; gap: var(--hv-space-2); }
.magb-pattern__name { font-size: var(--hv-text-sm); font-weight: 400; color: var(--hv-color-text-strong); }
.magb-pattern__preview { display: flex; flex-direction: column; gap: 3px; color: var(--hv-color-border-strong); }
.magb-pattern__desc { margin: 0; font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); display: flex; align-items: center; gap: 6px; }
.magb-pattern__delete { align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer; font-size: var(--hv-text-xs); }
.magb-dock__foot { border-top: 1px solid var(--hv-color-border-subtle); padding-top: var(--hv-space-2); font-size: var(--hv-text-xs); }

/* ── main column / canvas ── */
.magb__main { min-width: 0; }
.magb-structure { display: flex; flex-direction: column; gap: var(--hv-space-4); }
.magb-canvas {
  border: 1px solid var(--hv-color-border-subtle); border-radius: var(--hv-radius-lg);
  background: var(--hv-color-surface-muted, var(--hv-color-surface-subdued));
  padding: var(--hv-space-8) var(--hv-space-4) var(--hv-space-10);
  overflow-x: hidden;
}
.magb-frame { position: relative; margin: 0 auto; }
/* true-responsive preview: the page renders INSIDE a same-origin iframe whose
   viewport is the device width, so @media rules actually fire; the iframe
   element keeps the real device width/height and is transform-scaled to fit,
   while .magb-frame reserves the scaled footprint. */
.magb-iframe {
  position: absolute; top: 0; left: 0;
  border: 0; display: block;
  transform-origin: top left;
  background: var(--hv-color-surface-default, #fff);
  box-shadow: 0 1px 2px rgba(6, 27, 49, .08), 0 12px 32px rgba(6, 27, 49, .10);
  border-radius: var(--hv-radius-sm);
  visibility: hidden; /* FOUC guard until every cloned stylesheet has loaded */
}
.magb-iframe.is-ready { visibility: visible; }
.magb-iframe__loading {
  position: absolute; top: var(--hv-space-8); left: 50%; transform: translateX(-50%);
  font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); white-space: nowrap;
}
/* .magb-page lives inside the iframe document: normal flow at full viewport
   width — no transform, no fixed width (the iframe IS the viewport). */
.magb-page {
  background: var(--hv-color-surface-default, #fff);
  padding: var(--hv-space-10) 0 var(--hv-space-12);
}

/* selection shell — hover ring + floating toolbar, selected = brand ring */
.magb-shell { position: relative; outline-offset: 2px; }
.magb-shell:hover { outline: 1px dashed var(--hv-core-steel-500, #2779a7); }
.magb-shell.is-selected { outline: 2px solid var(--hv-brand); }
.magb-shell:focus-visible { outline: 2px solid var(--hv-core-steel-500, #2779a7); }
.magb-tools {
  display: none;
  position: absolute; top: 0; left: 0; z-index: 30;
  transform: translateY(-100%) scale(var(--magb-inv, 1));
  transform-origin: left bottom;
  align-items: stretch; gap: 0;
  border: 1px solid var(--hv-color-border-default); border-radius: var(--hv-radius-md);
  background: var(--hv-color-surface-default);
  box-shadow: 0 4px 14px rgba(6, 27, 49, .14);
  overflow: hidden;
  white-space: nowrap;
}
.magb-shell:hover > .magb-tools, .magb-shell.is-selected > .magb-tools { display: inline-flex; }
/* when a nested lane child is hovered, keep only ITS toolbar (browsers with :has) */
.magb-shell:hover:has(.magb-shell:hover) > .magb-tools { display: none; }
.magb-shell.is-selected:has(.magb-shell:hover) > .magb-tools { display: none; }
.magb-shell.is-selected:has(.magb-shell.is-selected) > .magb-tools { display: none; }
.magb-tools__drag {
  display: grid; place-items: center; padding: 0 8px;
  color: var(--hv-color-text-muted); cursor: grab; user-select: none;
  border-right: 1px solid var(--hv-color-border-subtle);
  background: var(--hv-color-surface-subdued);
}
.magb-tools__drag:active { cursor: grabbing; }
.magb-tools__name {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: var(--hv-text-xs); color: var(--hv-brand); font-weight: 400;
  padding: 5px 10px;
}
.magb-tools__btn {
  border: 0; border-left: 1px solid var(--hv-color-border-subtle);
  background: none; color: var(--hv-color-text-default);
  font: inherit; font-size: var(--hv-text-xs); line-height: 1;
  width: 28px; cursor: pointer;
}
.magb-tools__btn:hover:not(:disabled) { background: var(--hv-color-surface-subdued); color: var(--hv-color-text-strong); }
.magb-tools__btn:disabled { opacity: .35; cursor: default; }
.magb-tools__btn.is-on { color: var(--hv-brand); background: var(--hv-color-surface-subdued); }
.magb-tools__btn--danger:hover { color: var(--hv-color-danger, #b3261e); }

/* drag-insertion line */
.magb-dropline {
  height: 0; position: relative; z-index: 20;
}
.magb-dropline::after {
  content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 3px;
  border-radius: var(--hv-radius-full);
  background: var(--hv-brand);
  box-shadow: 0 0 0 1px var(--hv-color-surface-default);
}

/* empty / placeholder frames */
.magb-emptyrow, .magb-unknown {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--hv-space-2); text-align: center;
  border: 1px dashed var(--hv-color-border-default); border-radius: var(--hv-radius-md);
  background: var(--hv-color-surface-subdued);
  padding: var(--hv-space-8) var(--hv-space-6);
}
.magb-emptyrow--page { padding: var(--hv-space-16, 96px) var(--hv-space-6); }
.magb-emptyrow__name, .magb-unknown__name { font-size: var(--hv-text-sm); font-weight: 400; color: var(--hv-color-text-strong); }
.magb-emptyrow__note, .magb-unknown__note { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); max-width: 46ch; }

/* wrapper lane tails (drop targets; visible hint only when the lane is empty) */
.magb-lane-tail { min-height: 10px; position: relative; }
.magb-lane-tail--empty {
  min-height: 96px; display: grid; place-items: center;
  border: 1px dashed var(--hv-color-border-default); border-radius: var(--hv-radius-md);
  background: var(--hv-color-surface-subdued);
}
.magb-lane-tail__hint { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }

/* inline text editing + popover */
.magb-editing { cursor: text; }
.magb-editing:focus { outline: 2px solid var(--hv-core-steel-500, #2779a7); outline-offset: 2px; }
.magb-textpop {
  position: absolute; top: 6px; left: 6px; z-index: 35;
  transform: scale(var(--magb-inv, 1)); transform-origin: top left;
  display: flex; flex-direction: column; gap: var(--hv-space-2);
  width: 300px; max-width: 90%;
  border: 1px solid var(--hv-color-border-default); border-radius: var(--hv-radius-lg);
  background: var(--hv-color-surface-default);
  box-shadow: 0 8px 28px rgba(6, 27, 49, .18);
  padding: var(--hv-space-3);
}
.magb-textpop__field { display: flex; flex-direction: column; gap: 4px; font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }
.magb-textpop__actions { display: flex; justify-content: flex-end; gap: var(--hv-space-2); }

/* ── editor-only inline tools (MagInlineTools): slash block-inserter + on-
   selection format toolbar. Live INSIDE the light preview iframe (like
   .magb-textpop), so they use LIGHT Havenly surface tokens — the dark --aedx-*
   chrome vars are out of scope in the iframe — and counter-scale with
   --magb-inv so they stay a constant size as the preview scales. Steel/navy
   accent, never gold (gold = AI only). 8px radii, matching the aedx neighbours. */
.aedx-slash {
  z-index: 40;
  transform: translateY(6px) scale(var(--magb-inv, 1));
  transform-origin: top left;
  width: 264px; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--hv-color-border-default);
  border-radius: 8px;
  background: var(--hv-color-surface-default);
  box-shadow: 0 8px 28px rgba(6, 27, 49, .18);
  padding: var(--hv-space-1);
}
.aedx-slash__group + .aedx-slash__group { margin-top: 2px; }
.aedx-slash__grouphd {
  padding: 6px 8px 2px; font-size: 10px; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--hv-color-text-muted); font-weight: var(--hv-weight-strong);
}
.aedx-slash__item {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 0; background: none; border-radius: 8px;
  cursor: pointer; text-align: left; color: var(--hv-color-text-strong);
}
.aedx-slash__item.is-active,
.aedx-slash__item:hover { background: var(--hv-core-brand-50); }
.aedx-slash__glyph { display: inline-flex; flex: 0 0 auto; color: var(--hv-core-brand-600); }
.aedx-slash__text { display: flex; flex-direction: column; min-width: 0; }
.aedx-slash__label { font-size: 12px; font-weight: var(--hv-weight-strong); line-height: 1.25; }
.aedx-slash__desc {
  font-size: 10px; color: var(--hv-color-text-muted); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aedx-slash__empty { padding: 10px; font-size: 12px; color: var(--hv-color-text-muted); }

.aedx-fmt {
  z-index: 41;
  transform: translate(-50%, calc(-100% - 8px)) scale(var(--magb-inv, 1));
  transform-origin: bottom center;
  display: flex; gap: 2px;
  border: 1px solid var(--hv-color-border-default);
  border-radius: 8px;
  background: var(--hv-color-surface-default);
  box-shadow: 0 6px 20px rgba(6, 27, 49, .2);
  padding: 3px;
}
.aedx-fmt__btn {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  color: var(--hv-color-text-strong); font-size: 13px; line-height: 1;
}
.aedx-fmt__btn:hover { background: var(--hv-core-brand-50); color: var(--hv-core-steel-500); }
.aedx-fmt__btn i { font-style: italic; font-family: Georgia, serif; }

/* ── right rail accordions ── */
.magb__rail {
  display: flex; flex-direction: column; gap: var(--hv-space-3);
  border: 1px solid var(--hv-color-border-subtle); border-radius: var(--hv-radius-lg);
  background: var(--hv-color-surface-default);
  padding: var(--hv-space-4);
  position: sticky; top: 56px;
  max-height: calc(100vh - 72px); overflow-y: auto;
}
.magb-accs { display: flex; flex-direction: column; gap: var(--hv-space-2); }
.magb-acc { border: 1px solid var(--hv-color-border-subtle); border-radius: var(--hv-radius-md); overflow: hidden; }
.magb-acc__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--hv-space-2);
  width: 100%; border: 0; background: var(--hv-color-surface-subdued);
  font: inherit; font-size: var(--hv-text-sm); color: var(--hv-color-text-strong);
  padding: var(--hv-space-2) var(--hv-space-3); cursor: pointer; text-align: left;
}
.magb-acc__head:hover { color: var(--hv-brand); }
.magb-acc__chev { color: var(--hv-color-text-muted); transition: transform .15s ease; }
.magb-acc.is-open .magb-acc__chev { transform: rotate(180deg); }
.magb-acc__body { display: flex; flex-direction: column; gap: var(--hv-space-3); padding: var(--hv-space-3); }

@media (prefers-reduced-motion: reduce) {
  .magb-acc__chev { transition: none; }
}

/* ── shared control primitives (EditorControls.tsx) — Elementor-grade control
   depth (sliders-with-value, steppers, swatches, on/off switches) over
   Havenly's token enums. Used by BOTH builders' right rails; .aed- prefix,
   additive only. ── */

/* on/off switch */
.aed-switchrow { display: flex; align-items: center; justify-content: space-between; gap: var(--hv-space-3); cursor: pointer; }
.aed-switchrow__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aed-switchrow__label { font-size: var(--hv-text-sm); color: var(--hv-color-text-strong); }
.aed-switchrow__hint { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }
.aed-switch { position: relative; display: inline-flex; flex: none; width: 36px; height: 20px; }
.aed-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.aed-switch__track {
  position: absolute; inset: 0; border-radius: var(--hv-radius-full);
  background: var(--hv-color-border-strong); transition: background .15s ease;
}
.aed-switch__thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--hv-radius-full);
  background: var(--hv-color-surface-default); box-shadow: 0 1px 2px rgba(6, 27, 49, .3);
  transition: transform .15s ease;
}
.aed-switch.is-on .aed-switch__track { background: var(--hv-brand); }
.aed-switch.is-on .aed-switch__thumb { transform: translateX(16px); }
.aed-switch input:focus-visible ~ .aed-switch__track { outline: 2px solid var(--hv-core-steel-500, #2779a7); outline-offset: 2px; }

/* numeric stepper */
.aed-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--hv-color-border-subtle); border-radius: var(--hv-radius-md); overflow: hidden; width: fit-content; }
.aed-stepper button {
  border: 0; background: var(--hv-color-surface-subdued); color: var(--hv-color-text-default);
  width: 26px; font-size: var(--hv-text-md); line-height: 1; cursor: pointer;
}
.aed-stepper button:hover:not(:disabled) { color: var(--hv-brand); }
.aed-stepper button:disabled { opacity: .35; cursor: default; }
.aed-stepper input {
  width: 56px; border: 0; border-left: 1px solid var(--hv-color-border-subtle); border-right: 1px solid var(--hv-color-border-subtle);
  text-align: center; font: inherit; font-size: var(--hv-text-sm); background: var(--hv-color-surface-default); color: var(--hv-color-text-strong);
  -moz-appearance: textfield;
}
.aed-stepper input::-webkit-outer-spin-button, .aed-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.aed-stepper__suffix { display: flex; align-items: center; padding: 0 8px; font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); background: var(--hv-color-surface-subdued); }

/* stepped slider-with-value */
.aed-rangefield { display: flex; flex-direction: column; gap: 6px; }
.aed-rangefield__head { display: flex; align-items: center; justify-content: space-between; gap: var(--hv-space-2); }
.aed-rangefield__value {
  font-size: var(--hv-text-xs); font-weight: 400; color: var(--hv-brand);
  background: var(--hv-color-surface-subdued); border-radius: var(--hv-radius-full); padding: 2px 9px; white-space: nowrap;
}
.aed-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin: 8px 0 0;
  border-radius: var(--hv-radius-full); background: var(--hv-color-border-subtle); outline: none; cursor: pointer;
}
.aed-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--hv-brand); border: 2px solid var(--hv-color-surface-default);
  box-shadow: 0 1px 3px rgba(6, 27, 49, .35); cursor: pointer;
}
.aed-range::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--hv-color-surface-default);
  background: var(--hv-brand); box-shadow: 0 1px 3px rgba(6, 27, 49, .35); cursor: pointer;
}
.aed-range__ticks { display: flex; justify-content: space-between; padding: 0 2px; }
.aed-range__ticks span { width: 3px; height: 3px; border-radius: 50%; background: var(--hv-color-border-subtle); }
.aed-range__ticks span.is-on { background: var(--hv-brand); }

/* token swatch grid */
.aed-swatchfield { display: flex; flex-direction: column; gap: 6px; }
.aed-swatchrow { display: flex; flex-wrap: wrap; gap: 8px; }
.aed-swatch {
  width: 26px; height: 26px; border-radius: var(--hv-radius-full); padding: 0; cursor: pointer;
  border: 2px solid var(--hv-color-border-subtle);
  background: var(--aed-swatch-color, var(--hv-color-surface-subdued));
}
.aed-swatch:hover { border-color: var(--hv-brand); }
.aed-swatch.is-on { border-color: var(--hv-color-surface-default); box-shadow: 0 0 0 2px var(--hv-brand); }
.aed-swatch--none {
  background-color: var(--hv-color-surface-default);
  background-image: repeating-linear-gradient(45deg, var(--hv-color-border-strong) 0 2px, transparent 2px 6px);
}

/* icon-glyph segmented group (alignment etc.) — same grammar as .aed-seg, icon children */
.aed-seg--icon button { display: inline-flex; align-items: center; justify-content: center; width: 30px; padding: 6px 0; }

@media (prefers-reduced-motion: reduce) {
  .aed-switch__track, .aed-switch__thumb { transition: none; }
}

/* ── preview is ALWAYS the live-page look ──────────────────────────────────
   The admin shell can run dark, but /magazine ships light — so the canvas
   page re-pins every semantic token the dark theme remaps back to its
   havenly-ds.css light value (same core references, no new colours). The
   preview inside .magb-page therefore renders exactly like the front end
   regardless of the admin theme toggle. */
[data-theme="dark"] .magb-page {
  --hv-color-text-default:         var(--hv-core-neutral-990);
  --hv-color-text-strong:          var(--hv-core-neutral-900);
  --hv-color-text-default-subdued: var(--hv-core-neutral-700);
  --hv-color-text-muted:           var(--hv-core-neutral-500);
  --hv-color-text-quiet:           var(--hv-core-neutral-400);
  --hv-color-text-inverse:         var(--hv-core-neutral-0);
  --hv-color-text-brand:           var(--hv-core-brand-600);
  --hv-color-text-brand-strong:    var(--hv-core-brand-800);
  --hv-color-surface-default:      var(--hv-core-neutral-0);
  --hv-color-surface-subdued:      var(--hv-core-neutral-25);
  --hv-color-surface-muted:        var(--hv-core-neutral-50);
  --hv-color-surface-deep:         var(--hv-core-neutral-990);
  --hv-color-surface-brand:        var(--hv-core-brand-600);
  --hv-color-surface-brand-deep:   var(--hv-core-brand-950);
  --hv-color-border-default:       var(--hv-core-neutral-100);
  --hv-color-border-subtle:        var(--hv-core-neutral-50);
  --hv-color-border-strong:        var(--hv-core-neutral-300);
  --hv-color-border-brand:         var(--hv-core-brand-200);
  --hv-color-border-focus:         var(--hv-core-brand-500);
  --hv-color-action-primary:        var(--hv-core-brand-600);
  --hv-color-action-primary-hover:  var(--hv-core-brand-700);
  --hv-color-action-primary-active: var(--hv-core-brand-800);
  --hv-color-action-quiet:          var(--hv-core-brand-50);
  --hv-color-action-quiet-hover:    var(--hv-core-brand-100);
  --hv-shadow-xs: 0 1px 2px 0 rgba(0, 55, 112, 0.05), 0 1px 3px 0 rgba(0, 59, 137, 0.04);
  --hv-shadow-sm: 0 2px 10px 0 rgba(0, 55, 112, 0.06), 0 1px 4px 0 rgba(0, 59, 137, 0.04);
  --hv-shadow-md: 0 5px 14px 0 rgba(0, 55, 112, 0.08), 0 2px 8px 0 rgba(0, 59, 137, 0.05);
  --hv-shadow-lg: 0 6px 22px 0 rgba(0, 55, 112, 0.10), 0 4px 8px 0 rgba(0, 59, 137, 0.02);
  --hv-shadow-xl: 0 15px 40px -2px rgba(0, 55, 112, 0.10), 0 5px 20px -2px rgba(0, 59, 137, 0.04);
  --hv-shadow-2xl: 0 20px 80px -16px rgba(0, 55, 112, 0.14), 0 10px 60px -16px rgba(0, 59, 137, 0.06);
  --hv-shadow-pop: 0 16px 32px rgba(50, 50, 93, 0.12), 0 6px 12px rgba(0, 0, 0, 0.04);
  --hv-gradient-brand: linear-gradient(135deg, #2779A7 0%, #3A4F94 50%, #001F60 100%);
  --hv-gradient-night: linear-gradient(180deg, #00102E 0%, #11273e 100%);
  --hv-gradient-dawn:  linear-gradient(180deg, #f5f7fb 0%, #ffe6f5 100%);
}

/* dark-admin legibility for the top-bar/dock active segments (brand navy is
   too dark on the dark shell — use the light-on-dark text token instead) */
[data-theme="dark"] .magb__seg button.is-on,
[data-theme="dark"] .magb-dock__tabs button.is-on {
  color: var(--hv-color-text-strong);
  box-shadow: inset 0 -2px 0 var(--hv-core-brand-300, #BAC3DC);
}
[data-theme="dark"] .magb-block { color: var(--hv-core-brand-300, #BAC3DC); }

/* ============================================================
   SURFACE TEMPLATE PAGES (.magt-) — magazine-builder-v3 stream
   W2: archive / tag / author routes + template link atoms.
   ADDITIVE ONLY: nothing above this line changed. The default
   article + category renders reuse ONLY pre-existing selectors,
   so their pixels are untouched; every new rule here is .magt-
   prefixed. Geist only, --hv-* tokens only, navy titles, steel
   interactive, radii from the Havenly scale, reduced-motion safe.
   ============================================================ */

/* ── link atoms ──────────────────────────────────────────────────────────── */
/* author names link to /magazine/author/[key] — inherit the byline/bio type
   exactly (pixel-inert at rest), steel on hover like every magazine link */
.magt-authorlink {
  color: inherit;
  text-decoration: none;
}
.magt-authorlink:hover,
.magt-authorlink:focus-visible {
  color: var(--hv-color-interactive);
}

/* ── shared page shell ───────────────────────────────────────────────────── */
.magt-page { display: flex; flex-direction: column; }
.magt-wrap { padding-top: var(--hv-space-10); }
.magt-wrap--head { padding-top: var(--hv-space-10); }

/* count line inside the magcat-head band (archive + tag heros) */
.magt-count {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hv-color-text-subdued);
}

/* ── archive filters — server-param links only, no client state ──────────── */
.magt-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hv-space-4);
  padding-top: var(--hv-space-6);
  padding-bottom: var(--hv-space-6);
  border-bottom: 1px solid var(--hv-color-border-subtle);
}
.magt-filters__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hv-space-2);
}
.magt-filters__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hv-space-2);
}
/* active section pill — selected state on the shared .magcat-pill grammar */
.magcat-pill.magt-pill--on {
  color: var(--hv-brand, var(--hv-color-text-strong));
  border-color: var(--hv-color-border-strong);
  background: var(--hv-color-surface-subdued);
  font-weight: 500;
}

/* segmented sort / view toggles */
.magt-seg {
  display: inline-flex;
  border: 1px solid var(--hv-color-border-default);
  border-radius: var(--hv-radius-sm);
  overflow: hidden;
  background: var(--hv-color-surface-default);
}
.magt-seg a {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hv-color-text-subdued);
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.magt-seg a + a { border-left: 1px solid var(--hv-color-border-default); }
.magt-seg a:hover,
.magt-seg a:focus-visible { color: var(--hv-color-interactive); }
.magt-seg a.is-on {
  color: var(--hv-brand, var(--hv-color-text-strong));
  background: var(--hv-color-surface-subdued);
}

/* ── archive grid mode — stacked 4-up card rows (magx-row4 grammar) ──────── */
.magt-archgrid {
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-10);
}
.magt-archgrid > .magx-row4 + .magx-row4 {
  border-top: 1px solid var(--hv-color-border-subtle);
  padding-top: var(--hv-space-10);
}
.magt-more { margin-top: var(--hv-space-8); }

/* ── author profile — the magart-author bio-box grammar at page scale ────── */
.magt-authorcard {
  margin-top: 0;
  padding: var(--hv-space-8);
  gap: var(--hv-space-6);
}
.magt-authorcard__avatar {
  width: 72px;
  height: 72px;
  font-size: 24px;
}
.magt-authorcard__name {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hv-brand, var(--hv-color-text-strong));
  text-wrap: balance;
}
.magt-authorcard__bio { max-width: 68ch; font-size: var(--hv-text-md); }
.magt-authorcard__meta {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hv-color-text-subdued);
}

@media (max-width: 560px) {
  .magt-authorcard { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .magt-seg a { transition: none; }
}

/* ============================================================
   CONFIG-DRIVEN CHROME (magazine-builder-v3, stream W3)
   .magh- = header extras (mega menu) · .magf- = magazine footer
   template. Chrome is ARRANGED by the builder, never restyled:
   these are the fixed Havenly looks of the chrome vocabulary.
   ============================================================ */

/* ── mega menu (config-gated OFF by default) ──────────────────────────────
   The menu nav gains .magh-hasmega ONLY when a saved header layout turns the
   mega menu on — default markup carries no extra classes. Panel shows/hides
   via [hidden] (instant, reduced-motion safe by construction, links only
   tabbable while open). Hover mega menus are desktop grammar: below the
   masthead's own 900px breakpoint the chip stays a plain link. */
.magh-hasmega { position: relative; }
.magh-mega { display: inline-flex; }
.magh-mega__panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 640;
  background: var(--hv-color-surface-default);
  border-top: 2px solid var(--hv-ink);
  border-bottom: 1px solid var(--hv-color-border-default);
  box-shadow: 0 22px 34px -24px rgba(0, 16, 46, .28);
}
.magh-mega__inner {
  max-width: 1240px; margin: 0 auto; padding: var(--hv-space-6);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--hv-space-6);
}
.magh-mega__col { display: flex; flex-direction: column; gap: var(--hv-space-3); min-width: 0; }
.magh-mega__head {
  font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--hv-ink); text-decoration: none;
  padding-bottom: var(--hv-space-2); border-bottom: 1px solid var(--hv-color-border-default);
}
.magh-mega__head:hover { color: var(--hv-color-interactive); }
.magh-mega__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--hv-space-2); }
.magh-mega__story {
  font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--hv-color-text-default); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.magh-mega__story:hover { color: var(--hv-color-interactive); }
.magh-mega__browse {
  margin-top: auto; font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
  color: var(--hv-color-interactive); text-decoration: none;
}
.magh-mega__browse:hover { text-decoration: underline; }
@media (max-width: 900px) { .magh-mega__panel { display: none; } }

/* empty right-slot placeholder when a config hides the lockup's boxed link —
   keeps the 1fr/auto/1fr masthead grid centred (arrange, not restyle) */
.magh-boxslot { justify-self: end; }

/* ── magazine footer template (.magf) — surface='footer' vocabulary ──────
   Newspaper grammar to match the masthead: ink top rule, uppercase column
   heads, hairline band separators. Renders on magazine routes only, and only
   when an active footer layout exists. */
.magf { background: var(--hv-color-surface-default); border-top: 2px solid var(--hv-ink); margin-top: var(--hv-space-10); }
.magf__cols {
  max-width: 1240px; margin: 0 auto; padding: var(--hv-space-10) var(--hv-space-6);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--hv-space-8);
}
.magf__col { min-width: 0; }
.magf__colhead {
  margin: 0 0 var(--hv-space-4); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--hv-ink);
  padding-bottom: var(--hv-space-2); border-bottom: 1px solid var(--hv-color-border-default);
}
.magf__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--hv-space-3); }
.magf__link { font-size: var(--hv-text-sm); font-weight: 400; line-height: 1.45; color: var(--hv-color-text-default); text-decoration: none; }
.magf__link:hover { color: var(--hv-color-interactive); }

.magf__news { border-top: 1px solid var(--hv-color-border-default); }
.magf__news-inner {
  max-width: 1240px; margin: 0 auto; padding: var(--hv-space-8) var(--hv-space-6);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: var(--hv-space-6); align-items: center;
}
.magf__news-head { margin: 0 0 var(--hv-space-1); font-size: var(--hv-text-lg); font-weight: 500; color: var(--hv-ink); }
.magf__news-sub { margin: 0; font-size: var(--hv-text-sm); color: var(--hv-color-text-muted); }
.magf__news-inner .magx-newsletter__form { justify-content: flex-end; width: 100%; }
@media (max-width: 900px) {
  .magf__news-inner { grid-template-columns: 1fr; }
  .magf__news-inner .magx-newsletter__form { justify-content: flex-start; }
}

.magf__social { border-top: 1px solid var(--hv-color-border-default); }
.magf__social-inner {
  max-width: 1240px; margin: 0 auto; padding: var(--hv-space-5) var(--hv-space-6);
  display: flex; gap: var(--hv-space-3);
}
.magf__icon {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--hv-color-border-default); border-radius: var(--hv-radius-full);
  color: var(--hv-ink);
}
.magf__icon:hover { color: var(--hv-color-interactive); border-color: var(--hv-color-interactive); }

.magf__bottom { border-top: 1px solid var(--hv-color-border-default); }
.magf__bottom-inner {
  max-width: 1240px; margin: 0 auto; padding: var(--hv-space-5) var(--hv-space-6);
  font-size: 12.5px; color: var(--hv-color-text-muted);
}
/* ═══════════════════════════════════════════════════════════════════════════
   BUILDER UX v3 (magazine-builder-v3, stream W1) — instruction system,
   full-width admin-nav collapse, iframe-canvas helpers. .magb- prefix only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── top-bar “(?) Getting started” ── */
.magb-helpbtn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--hv-color-border-subtle); border-radius: var(--hv-radius-full);
  background: none; color: var(--hv-color-text-muted);
  font: inherit; font-size: var(--hv-text-xs); padding: 4px 10px 4px 5px; cursor: pointer;
  white-space: nowrap;
}
.magb-helpbtn:hover { color: var(--hv-color-interactive, var(--hv-core-steel-500, #2779a7)); border-color: var(--hv-core-steel-500, #2779a7); }
.magb-helpbtn__q {
  display: grid; place-items: center; width: 17px; height: 17px;
  border-radius: var(--hv-radius-full);
  background: var(--hv-color-surface-subdued); color: var(--hv-color-text-default);
  font-size: 11px; font-weight: 500; line-height: 1;
}
.magb-helpbtn:hover .magb-helpbtn__q { background: color-mix(in srgb, var(--hv-core-steel-500, #2779a7) 14%, transparent); color: var(--hv-color-interactive, #2779a7); }

/* ── right-rail compact empty hint ── */
.magb-rail__hint { margin: 0; font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── getting-started guide modal (Havenly onboarding cards) ── */
.magb-guide {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: var(--hv-space-6);
  background: rgba(6, 27, 49, .44);
}
.magb-guide__dialog {
  width: min(920px, 100%); max-height: min(86vh, 720px); overflow-y: auto;
  background: var(--hv-color-surface-default); color: var(--hv-color-text-default);
  border: 1px solid var(--hv-color-border-subtle); border-radius: var(--hv-radius-xl);
  box-shadow: 0 24px 64px rgba(6, 27, 49, .28);
  padding: var(--hv-space-6);
  display: flex; flex-direction: column; gap: var(--hv-space-5);
}
@media (prefers-reduced-motion: no-preference) {
  .magb-guide { animation: magb-guide-fade .16s ease-out; }
  .magb-guide__dialog { animation: magb-guide-rise .2s ease-out; }
}
@keyframes magb-guide-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes magb-guide-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.magb-guide__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hv-space-3); }
.magb-guide__head h2 {
  margin: 0; font-size: var(--hv-text-xl); font-weight: 500; letter-spacing: var(--hv-tracking-tight);
  color: var(--hv-brand, #001F60);
}
.magb-guide__sub { margin: 4px 0 0; font-size: var(--hv-text-sm); color: var(--hv-color-text-muted); }
.magb-guide__close {
  border: 1px solid var(--hv-color-border-subtle); border-radius: var(--hv-radius-md);
  background: none; color: var(--hv-color-text-muted);
  width: 30px; height: 30px; font-size: var(--hv-text-md); line-height: 1; cursor: pointer;
  display: grid; place-items: center; flex-shrink: 0;
}
.magb-guide__close:hover { color: var(--hv-color-text-strong); background: var(--hv-color-surface-subdued); }
.magb-guide__steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch; gap: var(--hv-space-2);
}
.magb-guide__step {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--hv-space-2);
  border: 1px solid var(--hv-color-border-subtle); border-radius: var(--hv-radius-lg);
  background: var(--hv-color-surface-subdued);
  padding: var(--hv-space-4);
  position: relative;
}
.magb-guide__stepnum {
  position: absolute; top: var(--hv-space-3); right: var(--hv-space-3);
  font-size: var(--hv-text-xs); color: var(--hv-color-text-quiet); font-weight: 500;
}
.magb-guide__stepglyph {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--hv-radius-md);
  background: var(--hv-color-surface-default); color: var(--hv-color-interactive, var(--hv-core-steel-500, #2779a7));
  border: 1px solid var(--hv-color-border-subtle);
}
.magb-guide__steptitle { font-size: var(--hv-text-sm); font-weight: 500; color: var(--hv-brand, #001F60); }
.magb-guide__stepbody { font-size: var(--hv-text-xs); line-height: 1.5; color: var(--hv-color-text-muted); }
.magb-guide__arrow { align-self: center; color: var(--hv-color-text-quiet); flex-shrink: 0; display: grid; place-items: center; }
.magb-guide__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--hv-space-3); flex-wrap: wrap; }
.magb-guide__footnote { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }
@media (max-width: 900px) {
  .magb-guide__steps { flex-direction: column; }
  .magb-guide__arrow svg { transform: rotate(90deg); }
}

/* ── full-width mode: AdminShell navCollapsible (builder opt-in only) ──
   The sidebar slides off-canvas (margin-left) with a CSS-only transition;
   a floating toggle brings it back. Other admin pages never carry
   .magb-shellwide, so their shell is untouched. */
.magb-shellwide .adm-sidebar {
  transition: margin-left .24s ease, visibility 0s linear;
}
.magb-shellwide.is-navhidden .adm-sidebar {
  margin-left: -220px;
  visibility: hidden;
  transition: margin-left .24s ease, visibility 0s linear .24s;
}
.magb-navtoggle {
  /* bottom-left so it never overlaps the page header (Elementor-style) */
  position: fixed; bottom: 16px; left: 14px; z-index: 80;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--hv-color-border-default); border-radius: var(--hv-radius-full);
  background: var(--hv-color-surface-default); color: var(--hv-color-text-default);
  font: inherit; font-size: var(--hv-text-xs); padding: 6px 10px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(6, 27, 49, .12);
  transition: left .24s ease;
}
.magb-shellwide:not(.is-navhidden) .magb-navtoggle { left: 232px; padding: 6px 8px; }
.magb-navtoggle:hover { color: var(--hv-color-interactive, var(--hv-core-steel-500, #2779a7)); border-color: var(--hv-core-steel-500, #2779a7); }
.magb-navtoggle:focus-visible { outline: 2px solid var(--hv-core-steel-500, #2779a7); outline-offset: 2px; }
@media (max-width: 900px) {
  /* the base shell hides .adm-sidebar entirely below 900px — hide the toggle too */
  .magb-navtoggle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .magb-shellwide .adm-sidebar, .magb-navtoggle { transition: none; }
  .magb-guide, .magb-guide__dialog { animation: none; }
}

/* dark-admin legibility: navy headings vanish on the dark shell — use the
   light-on-dark strong text token there (same pattern as the seg buttons) */
[data-theme="dark"] .magb-guide__head h2,
[data-theme="dark"] .magb-guide__steptitle { color: var(--hv-color-text-strong); }


/* ============================================================
   INTEGRATION LAYER (magazine-builder-v3, stream W4)
   .magb-subnav = the /admin/magazine surface sub-nav ·
   .magb-chromestage = header/footer canvas staging. ADDITIVE ONLY —
   Geist, --hv-* tokens, navy titles, steel interactive, Havenly radii.
   ============================================================ */

/* ── magazine admin sub-nav — one pill per builder surface ── */
.magb-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hv-space-2);
  margin-bottom: var(--hv-space-5);
}
.magb-subnav__link {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--hv-color-border-default);
  border-radius: var(--hv-radius-full);
  font-size: var(--hv-text-xs);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--hv-color-text-muted);
  text-decoration: none;
  background: var(--hv-color-surface-default);
  transition: color .15s ease, border-color .15s ease;
}
.magb-subnav__link:hover,
.magb-subnav__link:focus-visible {
  color: var(--hv-color-interactive, var(--hv-core-steel-500, #2779a7));
  border-color: var(--hv-core-steel-500, #2779a7);
}
.magb-subnav__link:first-child {
  color: var(--hv-color-text-strong);
  border-color: var(--hv-color-border-strong);
  font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .magb-subnav__link { transition: none; }
}

/* ── canvas iframe: defeat the base reset's `iframe { max-width: 100% }` ──
   The true-responsive contract needs the iframe laid out at the REAL device
   width (1240/768/390) and transform-scaled to fit; the reset was silently
   clamping it to the canvas column, so @media inside the preview keyed on the
   COLUMN width, not the picked device (found in the W4 integration pass —
   affected every surface incl. the front page on narrower admin windows). */
.magb-iframe { max-width: none; }

/* ── chrome canvas staging (header / footer surfaces): the masthead/footer
      render on the page background with an honest context note ── */
.magb-chromestage { background: var(--hv-color-surface-default); }
.magb-chromestage__note {
  margin: 0;
  padding: var(--hv-space-4) var(--hv-space-6);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--hv-color-text-subdued);
  background:
    repeating-linear-gradient(
      -45deg,
      var(--hv-color-surface-subdued),
      var(--hv-color-surface-subdued) 8px,
      var(--hv-color-surface-default) 8px,
      var(--hv-color-surface-default) 16px
    );
}

/* ============================================================
   MEDIA LIBRARY (.magmedia-) — Wave 1.2, mag-media-library
   stream. APPEND-ONLY: nothing above this line changed.
   Surfaces: /admin/media (manage), the MediaPicker modal
   (pick) and the builder dock's Media tab (dock). Geist only,
   --hv-* tokens only, radii from the scale, reduced-motion
   safe (no animation is used at all), theme-aware via the
   semantic tokens + the [data-theme="dark"] overrides below.
   ============================================================ */

.magmedia { display: flex; flex-direction: column; gap: var(--hv-space-4); min-width: 0; }

.magmedia__pagenote {
  margin: 0 0 var(--hv-space-5);
  max-width: 70ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--hv-color-text-default-subdued);
}

.magmedia__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hv-space-3);
}
.magmedia__search { flex: 1 1 220px; min-width: 160px; }
.magmedia__uploadset { display: flex; align-items: center; gap: var(--hv-space-2); }
.magmedia__folderinput { width: 130px; }
.magmedia__file {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.magmedia__uploadbtn { cursor: pointer; }
.magmedia__file:focus-visible + .magmedia__uploadbtn {
  outline: 2px solid var(--hv-color-border-focus);
  outline-offset: 2px;
}

.magmedia__chips { display: flex; flex-wrap: wrap; gap: var(--hv-space-2); }
.magmedia-chip {
  appearance: none;
  border: 1px solid var(--hv-color-border-default);
  background: var(--hv-color-surface-default);
  color: var(--hv-color-text-default-subdued);
  font: inherit;
  font-size: 12.5px;
  font-weight: 400;
  padding: 4px 12px;
  border-radius: var(--hv-radius-full);
  cursor: pointer;
}
.magmedia-chip:hover { border-color: var(--hv-color-border-strong); color: var(--hv-color-text-default); }
.magmedia-chip.is-on {
  background: var(--hv-color-surface-deep);
  border-color: var(--hv-color-surface-deep);
  color: var(--hv-color-text-inverse);
}

.magmedia__status {
  margin: 0;
  font-size: 13px;
  color: var(--hv-color-text-default-subdued);
}
.magmedia__status--err { color: var(--hv-color-text-critical, #b42318); }

.magmedia__empty {
  margin: 0;
  padding: var(--hv-space-8) var(--hv-space-4);
  text-align: center;
  font-size: 13.5px;
  color: var(--hv-color-text-muted);
  border: 1px dashed var(--hv-color-border-default);
  border-radius: var(--hv-radius-lg);
}

.magmedia__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--hv-space-4);
}
.magmedia--dock .magmedia__grid { grid-template-columns: repeat(2, 1fr); gap: var(--hv-space-2); }

.magmedia-card {
  min-width: 0;
  border: 1px solid var(--hv-color-border-default);
  border-radius: var(--hv-radius-lg);
  background: var(--hv-color-surface-default);
  overflow: hidden;
}
.magmedia-card.is-editing { grid-column: 1 / -1; }
.magmedia-card__hit {
  appearance: none;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.magmedia-card__hit:focus-visible { outline: 2px solid var(--hv-color-border-focus); outline-offset: -2px; }
.magmedia-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--hv-color-surface-muted);
}
.magmedia-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.magmedia-badge {
  position: absolute;
  top: var(--hv-space-2);
  left: var(--hv-space-2);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--hv-radius-full);
  background: var(--hv-color-surface-deep);
  color: var(--hv-color-text-inverse);
  opacity: .92;
}
.magmedia-card__copied {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 500;
  background: color-mix(in srgb, var(--hv-color-surface-deep) 72%, transparent);
  color: var(--hv-color-text-inverse);
}
.magmedia-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--hv-space-2) var(--hv-space-3) var(--hv-space-3);
  min-width: 0;
}
.magmedia-card__name {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--hv-color-text-default);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.magmedia-card__sub { font-size: 11.5px; color: var(--hv-color-text-muted); }
.magmedia-card__credit {
  font-size: 11.5px;
  color: var(--hv-color-text-default-subdued);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.magmedia--dock .magmedia-card__sub,
.magmedia--dock .magmedia-card__credit { display: none; }
.magmedia--dock .magmedia-card__name { font-size: 11.5px; }

.magmedia-edit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--hv-space-3);
  padding: var(--hv-space-3) var(--hv-space-3) var(--hv-space-4);
  border-top: 1px solid var(--hv-color-border-subtle);
}
.magmedia-edit__url {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 11.5px;
  color: var(--hv-color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: all;
}
.magmedia-edit__row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hv-space-2);
}
.magmedia-edit__grow { flex: 1; }
.magmedia-edit__delete { color: var(--hv-color-text-critical, #b42318); }
.magmedia__confirm {
  display: inline-flex;
  align-items: center;
  gap: var(--hv-space-2);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--hv-color-text-default);
}

.magmedia__hint {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--hv-color-text-muted);
}

/* ── picker modal ── */
.magmedia-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--hv-space-6);
  background: color-mix(in srgb, var(--hv-core-neutral-990, #061b31) 55%, transparent);
}
.magmedia-modal__panel {
  width: min(920px, 100%);
  max-height: min(82vh, 780px);
  display: flex;
  flex-direction: column;
  background: var(--hv-color-surface-default);
  border: 1px solid var(--hv-color-border-default);
  border-radius: var(--hv-radius-xl);
  box-shadow: var(--hv-shadow-2xl);
  outline: none;
}
.magmedia-modal__head {
  display: flex;
  align-items: baseline;
  gap: var(--hv-space-3);
  padding: var(--hv-space-4) var(--hv-space-5);
  border-bottom: 1px solid var(--hv-color-border-subtle);
}
.magmedia-modal__title { font-size: 15px; font-weight: 500; color: var(--hv-color-text-strong); }
.magmedia-modal__sub { flex: 1; font-size: 12.5px; color: var(--hv-color-text-muted); }
.magmedia-modal__close {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: var(--hv-color-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--hv-radius-sm);
  align-self: center;
}
.magmedia-modal__close:hover { color: var(--hv-color-text-default); background: var(--hv-color-surface-muted); }
.magmedia-modal__body { padding: var(--hv-space-4) var(--hv-space-5) var(--hv-space-5); overflow-y: auto; }

/* ── source tabs (Library / Unsplash) — additive, opt-in Unsplash source ── */
.magmedia-modal__tabs {
  display: flex;
  gap: var(--hv-space-1);
  padding: var(--hv-space-3) var(--hv-space-5) 0;
}
.magmedia-tab {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--hv-color-text-muted);
  cursor: pointer;
  padding: var(--hv-space-2) var(--hv-space-3);
  border-radius: var(--hv-radius-sm);
  border-bottom: 2px solid transparent;
}
.magmedia-tab:hover { color: var(--hv-color-text-default); }
.magmedia-tab.is-on {
  color: var(--hv-core-brand-600, #001F60);
  border-bottom-color: var(--hv-core-brand-600, #001F60);
}
.magmedia-tab:focus-visible { outline: 2px solid var(--hv-color-border-focus); outline-offset: -2px; }

/* ── Unsplash result credit (mandatory attribution, links carry utm params) ── */
.magunsplash-card { display: flex; flex-direction: column; }
.magunsplash-card__credit {
  font-size: 11px;
  line-height: 1.35;
  color: var(--hv-color-text-muted);
  padding: 4px var(--hv-space-2) var(--hv-space-2);
}
.magunsplash-card__credit a { color: var(--hv-color-text-default); text-decoration: underline; }
.magunsplash-card__credit a:hover { color: var(--hv-core-brand-600, #001F60); }

/* ── builder dock Media tab wrapper ── */
.magb-dock__media {
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-3);
  padding: var(--hv-space-3);
  overflow-y: auto;
  min-height: 0;
}

/* ── rail "Browse library" affordance beside MG14/MG27 URL inputs ── */
.magmedia-browse { display: flex; gap: var(--hv-space-2); align-items: center; }
.magmedia-browse .hv-input { flex: 1; min-width: 0; }
.magmedia-browse__btn { flex: none; white-space: nowrap; }

/* ── dark admin theme (same approach as the .magb dark block above:
      the semantic tokens already remap under [data-theme="dark"], these
      are only the spots where a raw core token needed a hand) ── */
[data-theme="dark"] .magmedia-badge,
[data-theme="dark"] .magmedia-chip.is-on {
  background: var(--hv-core-brand-300, #BAC3DC);
  border-color: var(--hv-core-brand-300, #BAC3DC);
  color: var(--hv-core-neutral-0, #061b31);
}
[data-theme="dark"] .magmedia__status--err,
[data-theme="dark"] .magmedia-edit__delete { color: var(--hv-color-text-critical, #f97066); }
/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLE EDITOR UPGRADES (waves 1.3–1.6) — .maged- prefix, append-only.
   Tags chips · list-block rows · inline-markdown hint + mini-preview ·
   draft-preview banner · dirty chip. Havenly tokens only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tags chip input (wave 1.4) ── */
.maged-tags { display: flex; flex-wrap: wrap; gap: var(--hv-space-2); align-items: center; }
.maged-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px;
  font-size: 12.5px; font-weight: 400;
  color: var(--hv-core-brand-700);
  background: var(--hv-core-brand-50);
  border: 1px solid var(--hv-core-brand-200);
  border-radius: var(--hv-radius-full);
  cursor: pointer;
}
.maged-tag:hover { background: var(--hv-core-brand-100); }
.maged-tag .maged-tag__x { font-weight: 500; line-height: 1; }
.maged-tags__count { font-size: 11.5px; color: var(--hv-color-text-subdued); }
.maged-tagsuggest { display: flex; flex-wrap: wrap; gap: var(--hv-space-1); margin-top: var(--hv-space-1); }
.maged-tagsuggest__item {
  padding: 1px 8px;
  font-size: 11.5px; font-weight: 300;
  color: var(--hv-color-text-subdued);
  background: var(--hv-color-surface-subdued);
  border: 1px solid var(--hv-color-border-subdued);
  border-radius: var(--hv-radius-full);
  cursor: pointer;
}
.maged-tagsuggest__item:hover { color: var(--hv-core-brand-700); border-color: var(--hv-core-brand-200); }

/* ── list block rows (wave 1.3) ── */
.maged-listitem { display: flex; align-items: center; gap: var(--hv-space-2); }
.maged-listitem .hv-input { flex: 1; min-width: 0; }

/* ── inline-markdown hint + live mini-preview (wave 1.6) ── */
.maged-hintrow {
  margin: var(--hv-space-1) 0 0;
  font-size: 11.5px; font-weight: 300;
  color: var(--hv-color-text-subdued);
}
.maged-hintrow code {
  font-family: var(--hv-font-mono, ui-monospace, monospace);
  font-size: 11px;
  padding: 0 4px;
  background: var(--hv-color-surface-subdued);
  border-radius: var(--hv-radius-sm);
}
.maged-minipreview {
  margin-top: var(--hv-space-1);
  padding: var(--hv-space-2) var(--hv-space-3);
  font-size: 13.5px; line-height: 1.55; font-weight: 300;
  color: var(--hv-color-text-default);
  background: var(--hv-color-surface-subdued);
  border: 1px dashed var(--hv-color-border-subdued);
  border-radius: var(--hv-radius-md);
}
.maged-minipreview__label {
  display: block;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--hv-color-text-subdued);
  margin-bottom: 2px;
}
.maged-minipreview a { color: var(--hv-core-brand-600); text-decoration: underline; }

/* ── draft preview banner (wave 1.5a) — sticky over the real template ── */
.maged-previewbanner {
  position: sticky; top: 0; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--hv-space-3);
  padding: var(--hv-space-2) var(--hv-space-5);
  font-size: 13px; font-weight: 400;
  color: var(--hv-core-neutral-0);
  background: var(--hv-core-neutral-990);
  border-bottom: 1px solid var(--hv-core-neutral-700);
}
.maged-previewbanner__chip {
  padding: 1px 10px;
  font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--hv-core-neutral-990);
  background: var(--hv-core-neutral-0);
  border-radius: var(--hv-radius-full);
}
.maged-previewbanner__back { margin-left: auto; color: var(--hv-core-neutral-0); text-decoration: underline; }

/* ── unsaved-changes chip (wave 1.5b) ── */
.maged-dirty {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 400;
  color: var(--hv-color-text-subdued);
}
.maged-dirty::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: var(--hv-radius-full);
  background: var(--hv-core-orange-d3, #e8843c);
}

/* ── BLOCK-1: accordion / tabs (article-body block, content-only) ──────────
   ONE block, TWO Design-tab styles: .magacc--accordion (stacked expand/
   collapse rows) and .magacc--tabs (horizontal tab bar + panel). FAQ /
   "what's involved" / process content. Token-locked: --hv-* only, no raw
   hex/px colours. Reading measure matches the rest of .magart-body (720px). */
.magacc {
  max-width: 720px;
  margin: var(--hv-space-2) 0;
}
.magacc[data-density='compact'] { --magacc-row-pad: var(--hv-space-3); }
.magacc:not([data-density='compact']) { --magacc-row-pad: var(--hv-space-5); }

/* accordion rows */
.magacc--accordion { border-top: 1px solid var(--hv-color-border-default); }
.magacc__row { border-bottom: 1px solid var(--hv-color-border-default); }
.magacc__rowhead { margin: 0; }
.magacc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hv-space-4);
  padding: var(--magacc-row-pad) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.magacc__heading {
  font-size: var(--hv-text-md);
  font-weight: 500;
  color: var(--hv-ink, var(--hv-color-text-strong));
}
.magacc__chevron {
  flex: none;
  color: var(--hv-core-steel-500);
  transition: transform var(--hv-duration-base) var(--hv-ease-hover);
}
.magacc__row[data-open='true'] .magacc__chevron { transform: rotate(180deg); }
.magacc__trigger:focus-visible {
  outline: 2px solid var(--hv-core-steel-500);
  outline-offset: 2px;
  border-radius: var(--hv-radius-sm);
}

/* height-animated collapse: grid-template-rows 0fr↔1fr + delayed visibility
   (standard technique for animating an intrinsically-hidden property; the
   delayed visibility also removes any links inside a collapsed panel from
   the tab order without an abrupt content pop on open). */
.magacc__panelwrap {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows var(--hv-duration-base) var(--hv-ease-hover),
    visibility 0s linear var(--hv-duration-base);
}
.magacc__panelwrap[data-open='true'] {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows var(--hv-duration-base) var(--hv-ease-hover),
    visibility 0s linear 0s;
}
.magacc__panelinner { min-height: 0; overflow: hidden; }
.magacc__body { padding: 0 0 var(--magacc-row-pad); }
.magacc__body p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--hv-color-text-default);
}
.magacc__body p + p { margin-top: var(--hv-space-3); }

@media (prefers-reduced-motion: reduce) {
  .magacc__panelwrap { transition: none; }
  .magacc__chevron { transition: none; }
}

/* tabs bar + panel */
.magacc__tablist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hv-space-2);
  border-bottom: 1px solid var(--hv-color-border-default);
  margin-bottom: var(--magacc-row-pad);
}
.magacc__tab {
  padding: var(--hv-space-3) var(--hv-space-4);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-size: var(--hv-text-sm);
  font-weight: 500;
  color: var(--hv-color-text-muted);
  cursor: pointer;
  transition: color var(--hv-duration-base) var(--hv-ease-hover), border-color var(--hv-duration-base) var(--hv-ease-hover);
}
.magacc__tab[aria-selected='true'] {
  color: var(--hv-ink, var(--hv-color-text-strong));
  border-bottom-color: var(--hv-core-steel-500);
}
.magacc__tab:focus-visible {
  outline: 2px solid var(--hv-core-steel-500);
  outline-offset: 2px;
  border-radius: var(--hv-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  .magacc__tab { transition: none; }
}
.magacc__tabpanel p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--hv-color-text-default);
}
.magacc__tabpanel p + p { margin-top: var(--hv-space-3); }

/* editor authoring UI for this block */
.maged-accitem {
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-2);
  padding: var(--hv-space-3);
  border: 1px solid var(--hv-color-border-subtle);
  border-radius: var(--hv-radius-md);
}
.maged-accitem__row {
  display: flex;
  align-items: center;
  gap: var(--hv-space-2);
}
.maged-accitem__row .hv-input { flex: 1; }

/* ── Calculator block (BLOCK-2, magazine article body) ──────────────────────
   Token-locked, light-only (matches the magart-* body blocks it sits beside —
   magazine public surfaces are a light-only editorial surface, no dark
   variant is built). Accent swaps the result-panel highlight between the
   default steel and navy Havenly primary; density trims padding/gaps for a
   more compact in-article footprint. */
.magcalc {
  margin: var(--hv-space-6) 0;
  padding: var(--hv-space-6);
  border-radius: var(--hv-radius-card);
  border: 1px solid var(--hv-color-border-default);
  background: var(--hv-color-surface-subdued);
  --magcalc-accent: var(--hv-core-steel-500);
}
.magcalc--navy { --magcalc-accent: var(--hv-core-brand-600); }
.magcalc--compact { padding: var(--hv-space-4); margin: var(--hv-space-4) 0; }

.magcalc__head {
  display: flex;
  align-items: baseline;
  gap: var(--hv-space-2);
  margin-bottom: var(--hv-space-4);
}
.magcalc--compact .magcalc__head { margin-bottom: var(--hv-space-3); }
.magcalc__kicker {
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--magcalc-accent);
}
.magcalc__title {
  margin: 0;
  font-size: var(--hv-text-md);
  font-weight: 600;
  color: var(--hv-color-text-strong);
}

.magcalc__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hv-space-6);
  align-items: start;
}
.magcalc--compact .magcalc__body { gap: var(--hv-space-4); }
@media (max-width: 640px) {
  .magcalc__body { grid-template-columns: 1fr; }
}

.magcalc__inputs {
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-3);
}
.magcalc--compact .magcalc__inputs { gap: var(--hv-space-2); }
.magcalc__field {
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-1);
}
.magcalc__label {
  font-size: var(--hv-text-xxs);
  font-weight: 400;
  color: var(--hv-color-text-muted);
}
.magcalc__input {
  padding: var(--hv-space-2) var(--hv-space-3);
  font-size: var(--hv-text-sm);
  font-family: var(--hv-font-mono, ui-monospace, monospace);
  color: var(--hv-color-text-default);
  background: var(--hv-color-surface-default);
  border: 1px solid var(--hv-color-border-default);
  border-radius: var(--hv-radius-sm);
}
.magcalc__input:focus-visible {
  outline: 2px solid var(--magcalc-accent);
  outline-offset: 1px;
  border-color: var(--magcalc-accent);
}
.magcalc--compact .magcalc__input { padding: var(--hv-space-1-5) var(--hv-space-2); }

.magcalc__result {
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-3);
  padding: var(--hv-space-4);
  border-radius: var(--hv-radius-md);
  background: var(--hv-color-surface-default);
  border: 1px solid var(--hv-color-border-subtle);
}
.magcalc--compact .magcalc__result { padding: var(--hv-space-3); gap: var(--hv-space-2); }
.magcalc__stat { display: flex; flex-direction: column; gap: 2px; }
.magcalc__statrow {
  display: flex;
  gap: var(--hv-space-4);
  padding-top: var(--hv-space-2);
  border-top: 1px solid var(--hv-color-border-subtle);
}
.magcalc__statrow .magcalc__stat { flex: 1; }
.magcalc__statlabel {
  font-size: var(--hv-text-xxs);
  font-weight: 400;
  color: var(--hv-color-text-muted);
}
.magcalc__statvalue {
  font-size: var(--hv-text-xl);
  font-weight: 600;
  font-family: var(--hv-font-mono, ui-monospace, monospace);
  color: var(--magcalc-accent);
  font-variant-numeric: tabular-nums;
}
.magcalc__statvalue--sm { font-size: var(--hv-text-md); color: var(--hv-color-text-strong); }

.magcalc__disclaimer {
  margin: var(--hv-space-4) 0 0;
  padding: var(--hv-space-3) var(--hv-space-4);
  border-radius: var(--hv-radius-md);
  background: var(--hv-color-surface-muted);
  border: 1px solid var(--hv-color-border-subtle);
  font-size: var(--hv-text-xs);
  color: var(--hv-color-text-muted);
}

/* ── Calculator editor sub-UI (admin) ── */
.magcalced { display: flex; flex-direction: column; gap: var(--hv-space-3); }
.magcalced__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hv-space-2);
}
.magcalced__design {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--hv-space-3);
  padding-top: var(--hv-space-2);
  border-top: 1px dashed var(--hv-color-border-subtle);
}
.magcalced__design .hv-field { flex: 1; min-width: 140px; }
.magcalced__designlabel {
  flex-basis: 100%;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--hv-color-text-subdued);
}
/* ── BLOCK-3: Data chart — editor "Design" group + article-body render ──
   Editor-only .mag-ed__blockdesign groups the token-locked knobs (grid /
   values / height) under a small heading, visually separated from the rows
   editor above it. Render-side .magchart-* is the article-body chart itself
   — navy bars/line, steel gridlines, no green/orange/gold (those are
   reserved for verified/deals/AI elsewhere). Light-only parity is not
   required here (this is article-body content, not the /magazine public
   surface chrome) but the palette already holds up in dark via the shared
   --hv-color-* tokens, so no separate dark override is needed. */
.mag-ed__blockdesign {
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-2);
  padding-top: var(--hv-space-3);
  border-top: 1px solid var(--hv-color-border-subtle);
}

.magchart { margin: var(--hv-space-2) 0; }
.magchart__title {
  font-size: var(--hv-text-sm);
  font-weight: 500;
  color: var(--hv-color-text-strong);
  margin: 0 0 var(--hv-space-2);
}
.magchart__svg { display: block; width: 100%; height: auto; font-family: var(--hv-font-sans); }
.magchart__empty {
  font-size: var(--hv-text-sm);
  color: var(--hv-color-text-muted);
  margin: 0;
}
.magchart__label { font-size: 11px; fill: var(--hv-color-text-muted); }
.magchart__label--axis { font-size: 9px; }
.magchart__value { font-size: 11px; font-weight: 600; fill: var(--hv-color-text-default); font-family: var(--hv-font-mono); }
.magchart__value--point { font-weight: 500; }
.magchart__track { fill: var(--hv-color-surface-subdued); }
.magchart__bar { fill: var(--hv-color-action-primary); }
.magchart__bar--secondary { fill: var(--hv-core-steel-500); }
.magchart__gridline { stroke: var(--hv-color-border-subtle); }
.magchart__area { fill: var(--hv-core-steel-500); opacity: .12; }
.magchart__line { fill: none; stroke: var(--hv-core-steel-500); }
.magchart__point { fill: var(--hv-core-steel-500); }

/* ── BLOCK-4: before/after image comparison slider ────────────────────────
   Structure:
     .magba[data-aspect]        wrapping <figure> — data-aspect wide|photo|tall
                                 sets the frame's aspect-ratio (default photo).
     .magba-frame                interactive mode: relative/overflow-hidden
                                 stage holding both images + the divider.
     .magba-img                  full-cover before/after <img> (object-fit).
     .magba-after                absolutely-positioned wrapper around the
                                 "after" image, revealed via clip-path — a
                                 paint-only property, so dragging never
                                 triggers page layout/reflow.
     .magba-divider / .magba-handle   positioned via `left` on elements that
                                 are already position:absolute (self-
                                 contained; no reflow of surrounding content).
                                 The handle is role="slider" — draggable by
                                 pointer (mouse+touch unified) and by
                                 ←/→/Home/End when focused.
     .magba-chip                 Before/After label chips (design-toggle).
     .magba--static / .magba-pair / .magba-pane
                                 no-JS AND prefers-reduced-motion fallback:
                                 the two images shown side by side, no drag
                                 surface — the block stays useful either way. */
.magba { margin: var(--hv-space-2) 0; }

.magba-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--hv-radius-lg);
  background: var(--hv-color-surface-muted);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.magba[data-aspect="wide"] .magba-frame { aspect-ratio: 16 / 9; }
.magba[data-aspect="tall"] .magba-frame { aspect-ratio: 3 / 4; }

.magba-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.magba-after { position: absolute; inset: 0; }

.magba-frame:not(.is-dragging) .magba-after { transition: clip-path 120ms ease-out; }
.magba-frame:not(.is-dragging) .magba-divider,
.magba-frame:not(.is-dragging) .magba-handle { transition: left 120ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .magba-after, .magba-divider, .magba-handle { transition: none !important; }
}

.magba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-1px);
  background: var(--hv-color-surface-default);
  box-shadow: 0 0 0 1px rgba(6, 27, 49, .18);
  pointer-events: none;
}
.magba-handle {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border-radius: var(--hv-radius-full);
  border: 2px solid var(--hv-color-surface-default);
  background: var(--hv-core-steel-500);
  box-shadow: 0 2px 8px rgba(6, 27, 49, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  padding: 0;
}
.magba-handle:focus-visible { outline: 2px solid var(--hv-color-border-focus); outline-offset: 2px; }
.magba-handle__grip { position: relative; width: 14px; height: 2px; background: var(--hv-color-surface-default); }
.magba-handle__grip::before,
.magba-handle__grip::after { content: ''; position: absolute; top: -5px; width: 2px; height: 12px; background: var(--hv-color-surface-default); }
.magba-handle__grip::before { left: -4px; }
.magba-handle__grip::after { right: -4px; }

.magba-chip {
  position: absolute;
  top: var(--hv-space-3);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: var(--hv-space-1) var(--hv-space-2-5);
  border-radius: var(--hv-radius-full);
  background: rgba(6, 27, 49, .55);
  color: #fff;
  pointer-events: none;
}
.magba-chip--before { left: var(--hv-space-3); }
.magba-chip--after { right: var(--hv-space-3); }

/* no-JS / prefers-reduced-motion fallback — plain side-by-side pair */
.magba--static .magba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hv-space-2); }
.magba-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-2);
  border-radius: var(--hv-radius-lg);
  overflow: hidden;
  background: var(--hv-color-surface-muted);
}
.magba-pane img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.magba[data-aspect="wide"] .magba-pane img { aspect-ratio: 16 / 9; }
.magba[data-aspect="tall"] .magba-pane img { aspect-ratio: 3 / 4; }
.magba--static .magba-chip {
  position: static;
  align-self: flex-start;
  margin: 0 0 var(--hv-space-2) var(--hv-space-2);
  background: var(--hv-color-surface-muted);
  color: var(--hv-color-text-strong);
  border: 1px solid var(--hv-color-border-default);
}
@media (max-width: 640px) {
  .magba--static .magba-pair { grid-template-columns: 1fr; }
}

/* ── BLOCK-4 editor sub-UI (BeforeAfterFields) ── */
.maged-ba-side,
.maged-ba-design {
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-2);
  padding: var(--hv-space-3);
  border: 1px solid var(--hv-color-border-default);
  border-radius: var(--hv-radius-md);
}
.maged-ba-warn { color: var(--hv-core-error-500, #b42318); }
.maged-ba-row { display: flex; flex-direction: column; gap: var(--hv-space-1); }

/* ── BLOCK-5 vendor-enquiry — public render (ArticleVendorEnquiry.tsx) ──
   Append-only, .magenq- prefix. Structure only — Geist + --hv-* tokens,
   navy-title / steel-interactive / hairline-border, no dark-mode overrides
   (magazine public surfaces are light-only, founder ruling 5 Jul 2026). */
.magenq {
  margin: var(--hv-space-2) 0;
  padding: var(--hv-space-6);
  border: 1px solid var(--hv-color-border-subtle);
  border-radius: var(--hv-radius-card);
  background: var(--hv-color-surface-subdued);
}
.magenq-heading {
  margin: 0 0 var(--hv-space-1);
  font-size: var(--hv-text-lg);
  font-weight: 600;
  color: var(--hv-color-text-strong);
}
.magenq-intro {
  margin: 0 0 var(--hv-space-4);
  font-size: var(--hv-text-sm);
  color: var(--hv-color-text-muted);
  max-width: 60ch;
}
.magenq-form {
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-3);
  max-width: 480px;
}
.magenq-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.magenq-checkrow {
  display: flex;
  align-items: flex-start;
  gap: var(--hv-space-2);
  font-size: var(--hv-text-sm);
  color: var(--hv-color-text-default);
  cursor: pointer;
}
.magenq-checkrow input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.magenq-consent { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }
.magenq-consent a { color: var(--hv-core-steel-500); }
.magenq-consent--warn { color: var(--hv-core-error-500, #b42318); }
.magenq-honesty {
  margin: 0;
  font-size: var(--hv-text-xs);
  color: var(--hv-color-text-muted);
  font-style: italic;
}
.magenq-error {
  margin: 0;
  font-size: var(--hv-text-xs);
  color: var(--hv-core-error-500, #b42318);
}
.magenq--sent {
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-1);
}
.magenq-sent__title { margin: 0; font-size: var(--hv-text-md); font-weight: 600; color: var(--hv-color-text-strong); }
.magenq-sent__body { margin: 0; font-size: var(--hv-text-sm); color: var(--hv-color-text-muted); }

/* ── BLOCK-5 editor sub-UI (VendorEnquiryFields.tsx) ── */
.magenqed { display: flex; flex-direction: column; gap: var(--hv-space-3); }
.magenqed__row {
  display: flex;
  flex-direction: column;
  gap: var(--hv-space-2);
  padding: var(--hv-space-3);
  border: 1px solid var(--hv-color-border-default);
  border-radius: var(--hv-radius-md);
}
.magenqed__rowhead { display: flex; align-items: center; gap: var(--hv-space-2); }
.magenqed__optrow { display: flex; gap: var(--hv-space-2); align-items: center; }
.magenqed__addrow { display: flex; flex-wrap: wrap; gap: var(--hv-space-2); }

/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE ELEMENTOR EDITOR (ARTICLE-ELEMENTOR-1) — additive only.
   .artblk-* = the per-block Style/Layout/Advanced/Responsive envelope wrap
   (ArticleBlocks.tsx / article-block-props.ts) — renders on BOTH the public
   /library/[slug] page and the builder canvas. .aed-* = the full-width
   editor chrome (ArticleBuilder.tsx). Never touches the individual block
   component files — additive rules only, existing selectors untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* the wrapper is transparent by default (className "artblk" only, no custom
   properties set) — these two rules restore the EXACT existing direct-child
   treatment one level deeper so wrapping every block never changes how an
   envelope-less (i.e. every already-published) article renders. */
.magart-body > .artblk { display: flex; flex-direction: column; order: var(--artblk-order, 0); }
.magart-body > .artblk > p,
.magart-body > .artblk > h2,
.magart-body > .artblk > h3 { max-width: 720px; }
.magart-body > .artblk > h2 {
  margin: var(--hv-space-4) 0 0;
  font-size: var(--hv-text-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--hv-ink, var(--hv-color-text-strong));
}
.magart-body > .artblk > h3 {
  margin: var(--hv-space-2) 0 0;
  font-size: var(--hv-text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hv-ink, var(--hv-color-text-strong));
}
.magart-body > .artblk > p {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 300;
  color: var(--hv-color-text-default);
}

/* Style tab */
.artblk { min-width: 0; }
.artblk[style*="--artblk-weight"] { font-weight: var(--artblk-weight); }
.artblk[style*="--artblk-tracking"] { letter-spacing: var(--artblk-tracking); }
.artblk[style*="--artblk-line"] { line-height: var(--artblk-line); }
.artblk[style*="--artblk-color"] { color: var(--artblk-color); }
.artblk[style*="--artblk-bg"] { background: var(--artblk-bg); }
.artblk[style*="--artblk-radius"] { border-radius: var(--artblk-radius); overflow: hidden; }
.artblk[style*="--artblk-shadow"] { box-shadow: var(--artblk-shadow); }
.artblk-ratio-wide img, .artblk-ratio-wide video { aspect-ratio: 16/9; object-fit: var(--artblk-fit, cover); width: 100%; height: auto; }
.artblk-ratio-photo img, .artblk-ratio-photo video { aspect-ratio: 3/2; object-fit: var(--artblk-fit, cover); width: 100%; height: auto; }
.artblk-ratio-tall img, .artblk-ratio-tall video { aspect-ratio: 4/5; object-fit: var(--artblk-fit, cover); width: 100%; height: auto; }
.artblk-ratio-square img, .artblk-ratio-square video { aspect-ratio: 1/1; object-fit: var(--artblk-fit, cover); width: 100%; height: auto; }
.artblk-fit-contain img, .artblk-fit-contain video { object-fit: contain; }
.artblk-div-hairline { border-bottom: 1px solid var(--hv-color-border-default); padding-bottom: var(--hv-space-5); }
.artblk-div-heavy { border-bottom: 3px solid var(--hv-color-border-strong); padding-bottom: var(--hv-space-6); }

/* Layout tab */
.artblk-w-content { max-width: 720px; }
.artblk-w-wide { max-width: 1040px; }
.artblk-w-full { max-width: none; }
.artblk-a-left { text-align: left; }
.artblk-a-center { text-align: center; margin-inline: auto; }
.artblk-a-right { text-align: right; margin-inline: 0 0 0 auto; }
.artblk-sticky { position: sticky; top: var(--hv-space-4); }
.artblk[style*="--artblk-gap"] { display: flex; flex-direction: column; gap: var(--artblk-gap); }
.artblk[style*="--artblk-padding"] { padding: var(--artblk-padding); }
.artblk[style*="--artblk-margin"] { margin: var(--artblk-margin); }
/* Wave 2 — designer-tier per-side spacing (class-gated so default output is
   untouched; unset sides fall back to 0 within the shorthand). */
.artblk-padsides { padding: var(--artblk-pad-t, 0) var(--artblk-pad-r, 0) var(--artblk-pad-b, 0) var(--artblk-pad-l, 0); }
.artblk-marsides { margin: var(--artblk-mar-t, 0) var(--artblk-mar-r, 0) var(--artblk-mar-b, 0) var(--artblk-mar-l, 0); }
.artblk[style*="--artblk-cols"] { column-count: var(--artblk-cols); column-gap: var(--hv-space-6); }

/* Advanced tab: curated class tokens (never free CSS) */
.artblk-tok-accent-band { border-left: 3px solid var(--hv-core-brand-600); padding-left: var(--hv-space-5); background: var(--hv-core-brand-50); }
.artblk-tok-tight { padding-top: 0; padding-bottom: 0; }
.artblk-tok-emphasis { font-size: 1.08em; }
@media (prefers-reduced-motion: reduce) { .artblk-motion-safe * { transition: none !important; animation: none !important; } }

/* Advanced tab: device visibility (Advanced hideOn[] — also the source of
   truth for the Responsive tab's per-device "Hidden on this device" toggle) */
.artblk-hidden-desktop { }
.artblk-hidden-tablet { }
.artblk-hidden-mobile { }
@media (min-width: 1025px) { .artblk-hidden-desktop { display: none !important; } }
@media (min-width: 641px) and (max-width: 1024px) { .artblk-hidden-tablet { display: none !important; } }
@media (max-width: 640px) { .artblk-hidden-mobile { display: none !important; } }

/* Responsive tab: base(desktop) → tablet → mobile CSS-var cascade, real
   @media rules — identical behaviour inside the builder's true-width iframe
   and on the live public page, no device branching at render time. */
@media (max-width: 1024px) {
  .artblk[style*="--artblk-gap-tablet"] { gap: var(--artblk-gap-tablet); }
  .artblk[style*="--artblk-padding-tablet"] { padding: var(--artblk-padding-tablet); }
  .artblk[style*="--artblk-margin-tablet"] { margin: var(--artblk-margin-tablet); }
  .artblk[style*="--artblk-cols-tablet"] { column-count: var(--artblk-cols-tablet); }
  .artblk[style*="--artblk-fontscale-tablet"] { font-size: calc(1em * var(--artblk-fontscale-tablet)); }
  .artblk-a-tablet-left { text-align: left; }
  .artblk-a-tablet-center { text-align: center; margin-inline: auto; }
  .artblk-a-tablet-right { text-align: right; }
}
@media (max-width: 640px) {
  .artblk[style*="--artblk-gap-mobile"] { gap: var(--artblk-gap-mobile); }
  .artblk[style*="--artblk-padding-mobile"] { padding: var(--artblk-padding-mobile); }
  .artblk[style*="--artblk-margin-mobile"] { margin: var(--artblk-margin-mobile); }
  .artblk[style*="--artblk-cols-mobile"] { column-count: var(--artblk-cols-mobile); }
  .artblk[style*="--artblk-fontscale-mobile"] { font-size: calc(1em * var(--artblk-fontscale-mobile)); }
  .artblk-a-mobile-left { text-align: left; }
  .artblk-a-mobile-center { text-align: center; margin-inline: auto; }
  .artblk-a-mobile-right { text-align: right; }
}

/* ── CANVAS FIDELITY (editor-elementor-ui-fidelity-v1, gap 4): the builder
   canvas wraps each block in an extra `<div key={i}>` (for the drop-line)
   AND a Shell (.magb-shell) for selection/drag/drop — TWO DOM layers the
   public /library/[slug] page never has. Those layers sit BETWEEN
   .magart-body and .artblk (actual canvas DOM:
   `.magart-body > div > .magb-shell > .artblk`), so the direct-child rules
   above (`.magart-body > .artblk` / `> .artblk > h2/h3/p`) silently stopped
   matching inside the canvas only, and every block lost its real typography/
   measure there — grep-verified against the rendered DOM, not assumed. These
   rules restore the exact same treatment two levels deeper, scoped to
   `.magb-page` (which only exists inside the builder's iframe) — zero effect
   on the public page, which has neither wrapper. */
.magb-page .magart-body > div > .magb-shell > .artblk { display: flex; flex-direction: column; order: var(--artblk-order, 0); }
.magb-page .magart-body > div > .magb-shell > .artblk > p,
.magb-page .magart-body > div > .magb-shell > .artblk > h2,
.magb-page .magart-body > div > .magb-shell > .artblk > h3 { max-width: 720px; }
.magb-page .magart-body > div > .magb-shell > .artblk > h2 {
  margin: var(--hv-space-4) 0 0; font-size: var(--hv-text-xl); font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.2; color: var(--hv-ink, var(--hv-color-text-strong));
}
.magb-page .magart-body > div > .magb-shell > .artblk > h3 {
  margin: var(--hv-space-2) 0 0; font-size: var(--hv-text-lg); font-weight: 600;
  letter-spacing: -0.01em; color: var(--hv-ink, var(--hv-color-text-strong));
}
.magb-page .magart-body > div > .magb-shell > .artblk > p {
  margin: 0; font-size: 17px; line-height: 1.65; font-weight: 300; color: var(--hv-color-text-default);
}

/* WYSIWYG chrome the article canvas now renders around the block list (real
   .magart-* classes, driven from the live-edited title/hero/byline/tags state
   — see ArticleBuilder.tsx canvasContent) so the editor shows the true
   container width, main/sidebar split and title/hero/byline treatment
   instead of a bare full-bleed block list. Read-only inside the canvas
   (edited via the Page dock tab, not by clicking the chrome). */
.aed-chrome-static { pointer-events: none; user-select: none; }

/* ── .aed-* — full-width Elementor-style article editor chrome
   (ArticleBuilder.tsx). Reuses .magb-* structural classes (topbar/dock/
   canvas/rail scaffolding, iframe/scale, dropline, shell/tools) from the
   front-page builder unchanged; these rules only cover what's NEW: the
   5-tab properties panel and the block-library search grid. ── */
.aed-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--hv-color-border-default); margin-bottom: var(--hv-space-3); flex-wrap: wrap; }
.aed-tabs button {
  appearance: none; border: none; background: none; cursor: pointer;
  padding: var(--hv-space-2) var(--hv-space-3); font-size: var(--hv-text-sm); font-weight: var(--hv-weight-normal);
  color: var(--hv-color-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.aed-tabs button.is-on { color: var(--hv-color-text-strong); font-weight: var(--hv-weight-strong); border-bottom-color: var(--hv-core-brand-600); }
.aed-tabs button:hover { color: var(--hv-color-text-strong); }
.aed-panel { display: flex; flex-direction: column; gap: var(--hv-space-4); }
.aed-group { display: flex; flex-direction: column; gap: var(--hv-space-2); }
.aed-group__label { font-size: var(--hv-text-xs); font-weight: var(--hv-weight-strong); color: var(--hv-color-text-muted); text-transform: uppercase; letter-spacing: var(--hv-tracking-wide); }
.aed-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.aed-seg button {
  appearance: none; cursor: pointer; border: 1px solid var(--hv-color-border-default); background: var(--hv-color-surface);
  border-radius: var(--hv-radius-sm); padding: var(--hv-space-1) var(--hv-space-2-5); font-size: var(--hv-text-xs); color: var(--hv-color-text-default);
}
.aed-seg button.is-on { background: var(--hv-core-brand-600); border-color: var(--hv-core-brand-600); color: var(--hv-core-neutral-0); }
.aed-devicehint { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); margin: 0; }
.aed-emptyrail { padding: var(--hv-space-6) var(--hv-space-4); text-align: center; color: var(--hv-color-text-muted); font-size: var(--hv-text-sm); }
.aed-search { margin-bottom: var(--hv-space-2); }
.aed-blockgrid__group { font-size: var(--hv-text-xs); font-weight: var(--hv-weight-strong); color: var(--hv-color-text-muted); text-transform: uppercase; letter-spacing: var(--hv-tracking-wide); margin: var(--hv-space-3) 0 var(--hv-space-1); }
.aed-mediarow { display: flex; gap: var(--hv-space-2); align-items: center; }
.aed-mediarow input { flex: 1; }

/* ── sweep-embeds: breadcrumb (F2), table of contents (F1), embed block
   (E). Append-only — public magazine surfaces stay light-only. ── */

/* MagBreadcrumb — template atom on the article + category templates only
   (never the front page). Hairline grammar: steel links, quiet separator,
   hairline rule beneath. */
.magart-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--hv-space-2);
  padding: var(--hv-space-4) 0;
  margin-bottom: var(--hv-space-2);
  border-bottom: 1px solid var(--hv-color-border-subtle);
  font-size: var(--hv-text-xs);
}
.magart-crumb__item { display: inline-flex; align-items: center; gap: var(--hv-space-2); min-width: 0; }
.magart-crumb__link { color: var(--hv-color-interactive, var(--hv-core-steel-500)); text-decoration: none; }
.magart-crumb__link:hover, .magart-crumb__link:focus-visible { text-decoration: underline; }
.magart-crumb__current {
  color: var(--hv-color-text-muted);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40ch;
}
.magart-crumb__sep { color: var(--hv-color-text-muted); opacity: .6; }

/* Table of contents block (F1) — auto-built from the article's own H2/H3
   headings at render time; renders nothing when there are none. */
.magart-toc {
  margin: var(--hv-space-2) 0;
  padding: var(--hv-space-5);
  border: 1px solid var(--hv-color-border-subtle);
  border-radius: var(--hv-radius-card);
  background: var(--hv-color-surface-subdued);
}
.magart-toc__label {
  display: block;
  font-size: var(--hv-text-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hv-core-steel-500);
  margin-bottom: var(--hv-space-3);
}
.magart-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--hv-space-2); }
.magart-toc li a { color: var(--hv-color-text-strong); text-decoration: none; font-size: var(--hv-text-sm); }
.magart-toc li a:hover, .magart-toc li a:focus-visible { color: var(--hv-color-interactive, var(--hv-core-steel-500)); text-decoration: underline; }
.magart-toc li.magart-toc__sub { padding-left: var(--hv-space-5); }

/* Embed block (E) — allowlisted providers only (vimeo/spotify/googlemaps);
   YouTube stays on the existing .magart-video (video block). Every iframe
   src is a fixed per-provider template + an already-validated id — see
   src/lib/magazine-blocks/embeds.ts. */
.magart-embediframe { margin: var(--hv-space-2) 0; }
.magart-embediframe iframe { width: 100%; border: 0; display: block; background: var(--hv-color-surface-deep); }
.magart-embediframe--vimeo iframe { aspect-ratio: 16 / 9; border-radius: var(--hv-radius-card); }
.magart-embediframe--map iframe { height: 380px; border-radius: var(--hv-radius-card); }
.magart-embediframe--spotify iframe { border-radius: var(--hv-radius-lg); }

/* Embed editor sub-UI (EmbedFields.tsx) */
.maged-embed-warn { color: var(--hv-core-error-500, #b42318); }
.maged-embed-preview { margin-top: var(--hv-space-2); display: flex; flex-direction: column; gap: var(--hv-space-1); }
.aed-topbar-title { font-size: var(--hv-text-sm); color: var(--hv-color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* ── Magazine 404 — MagNotFound.tsx (magazine-100-percent sweep, item G2).
   MagMasthead + a centered message on the standard maglib-wrap container;
   reuses .mag-kicker, .magcat-pill (section links, same class as
   MagCategoryHeader's section nav) and .nf-actions (hv-button row, same
   class as the site 404). .mag404__search repositions the REAL masthead
   <MagSearchModal/> button (normally absolutely-positioned inside the
   header row) into a plain, bordered, in-flow circular button so the same
   search modal opens from the 404 body — no second search implementation. ── */
.mag404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--hv-space-5);
  padding: var(--hv-space-16) var(--hv-space-6) var(--hv-space-20);
}
.mag404__heading {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--hv-color-text-strong);
}
.mag404__desc {
  margin: 0;
  max-width: 480px;
  font-size: var(--hv-text-base);
  line-height: var(--hv-lh-relaxed);
  color: var(--hv-color-text-muted);
}
.mag404__sections { margin-top: var(--hv-space-6); width: 100%; max-width: 640px; }
.mag404__sections h3 {
  margin: 0 0 var(--hv-space-4);
  font-size: var(--hv-text-sm);
  font-weight: var(--hv-weight-strong);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hv-color-text-muted);
}
.mag404__sections .magcat-head__pills { justify-content: center; }
.mag404__search {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hv-space-2);
  margin-top: var(--hv-space-4);
}
.mag404__search p { margin: 0; font-size: var(--hv-text-sm); color: var(--hv-color-text-muted); }
.mag404__search .magm__searchbtn {
  position: static;
  width: 44px;
  height: 44px;
  border-radius: var(--hv-radius-full);
  border: 1px solid var(--hv-color-border-default);
  color: var(--hv-color-text-default);
}
.mag404__search .magm__searchbtn:hover { color: var(--hv-color-interactive); border-color: var(--hv-color-interactive); }
/* ============================================================
   FOURTH-WAVE FRONT-PAGE BLOCKS — MG29…MG30 (sweep item D,
   magx5-). ADDITIVE ONLY: nothing above this line changed; the
   default /magazine composition uses none of these selectors, so
   the locked front page renders untouched. MG29 is a settings-only
   image gallery; MG30 is a multi-card story carousel reusing the
   .magx-listrow story-card grammar. Havenly tokens only.
   ============================================== */

/* ── shared: labelled empty frame (preview/dev only — MagAdSlot grammar) ── */
.magx5-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--hv-space-2);
  border: 1px dashed var(--hv-color-border-default);
  border-radius: var(--hv-radius-md);
  padding: var(--hv-space-8) var(--hv-space-6);
  background: var(--hv-color-surface-subdued);
  text-align: center;
}
.magx5-empty__label {
  font-size: var(--hv-text-xs); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--hv-color-text-muted);
}
.magx5-empty__note { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); max-width: 52ch; }

/* ── MG29 MagGalleryBlock — responsive front-page image grid ── */
.magx5-gallery-wrap { display: flex; flex-direction: column; gap: var(--hv-space-5); min-width: 0; }
.magx5-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hv-space-4);
}
.magx5-gallery[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.magx5-gallery[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.magx5-gallery__cell { margin: 0; display: flex; flex-direction: column; gap: var(--hv-space-2); min-width: 0; }
.magx5-gallery__media {
  display: block; overflow: hidden;
  border-radius: var(--hv-radius-md);
  background: var(--hv-color-surface-muted);
  aspect-ratio: 4 / 3;
}
.magx5-gallery__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.magx5-gallery__caption {
  font-size: var(--hv-text-xs); line-height: 1.5; font-weight: 300;
  color: var(--hv-color-text-muted);
}
@media (max-width: 700px) {
  .magx5-gallery, .magx5-gallery[data-cols="2"], .magx5-gallery[data-cols="4"] {
    grid-template-columns: 1fr;
  }
}
.magx-styled[data-density="compact"] .magx5-gallery { gap: var(--hv-space-3); }
.magx-styled[data-density="spacious"] .magx5-gallery { gap: var(--hv-space-6); }

/* ── MG30 MagCarousel — multi-card story carousel (client engine in
      MagCarouselClient). Geometry moves on --hv-spring @ 660ms, same curve
      and duration as MG19's slider; NO wheel handlers exist; touch-action
      pan-y keeps vertical drags scrolling the page. Reduced motion: instant
      page swap, controls stay functional. ── */
.magx5-carousel-wrap { display: flex; flex-direction: column; gap: var(--hv-space-5); min-width: 0; }
.magx5-carousel { position: relative; display: flex; flex-direction: column; gap: var(--hv-space-3); }
.magx5-carousel__viewport { position: relative; overflow: hidden; touch-action: pan-y; }
.magx5-carousel__track { display: flex; transition: transform 660ms var(--hv-spring); }
.magx5-carousel__page {
  flex: 0 0 100%; min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hv-space-4);
  align-items: start;
}
.magx5-carousel__page[data-cards="2"] { grid-template-columns: repeat(2, 1fr); }
.magx5-carousel__page[data-cards="4"] { grid-template-columns: repeat(4, 1fr); }
.magx5-carousel__card { min-width: 0; }
.magx5-carousel__card .magx-listrow { height: 100%; }
.magx5-carousel__arrow {
  position: absolute; top: 0; height: 100%; width: 44px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--hv-ink); opacity: 0;
  transition: opacity 180ms ease;
}
.magx5-carousel__arrow--prev { left: 0; }
.magx5-carousel__arrow--next { right: 0; }
.magx5-carousel__arrow svg { background: var(--hv-color-surface-default); border: 1px solid var(--hv-color-border-default); padding: 8px; width: 34px; height: 34px; box-sizing: border-box; }
.magx5-carousel__arrow:hover { color: var(--hv-color-interactive); }
.magx5-carousel:hover .magx5-carousel__arrow, .magx5-carousel:focus-within .magx5-carousel__arrow { opacity: 1; }
.magx5-carousel__dots { display: flex; justify-content: center; gap: var(--hv-space-2); }
.magx5-carousel__dot { width: 9px; height: 9px; padding: 0; border-radius: var(--hv-radius-full); border: 1px solid var(--hv-ink); background: transparent; cursor: pointer; }
.magx5-carousel__dot.is-on { background: var(--hv-ink); }
@media (max-width: 700px) {
  .magx5-carousel__page, .magx5-carousel__page[data-cards="2"], .magx5-carousel__page[data-cards="4"] {
    grid-template-columns: 1fr;
  }
}
.magx-styled[data-density="compact"] .magx5-carousel__page { gap: var(--hv-space-3); }
.magx-styled[data-density="spacious"] .magx5-carousel__page { gap: var(--hv-space-6); }
@media (prefers-reduced-motion: reduce) {
  .magx5-carousel__track { transition: none; }
  .magx5-carousel__arrow { opacity: 1; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE EDITOR CHROME — dark "Elementor" skin, root `.aedx`
   (magazine-elementor-experience-v1 / aedx-chrome-v1). ADDITIVE ONLY.
   ArticleBuilder.tsx's outer wrapper is `.aedx` — a NEW root, fully separate
   from `.magb` (the front-page builder, untouched). Everything below is
   scoped either to `.aedx …` (new dark chrome elements) or `.aedx .foo`
   (dark re-skin of shared control classes — the light `.magb` builder that
   also renders those same classes is unaffected since the selectors here
   all require an `.aedx` ancestor). Dark UI is doctrine-allowed for builder
   chrome only; the canvas keeps rendering the real, light, unchanged
   article (`.magart-*`/`.magb-page` inside the iframe — see the CANVAS
   FIDELITY block above). Havenly `--hv-core-*` tokens for brand colour
   (steel/gold/brand); `--aedx-*` locals below are chrome-only surfaces and
   are intentionally NOT declared in :root. ── */

.aedx {
  --aedx-topbar: #0A2540;
  --aedx-launch: #0d1b30;
  --aedx-panel: #101826;
  --aedx-group: #16233a;
  --aedx-inset: #0d1b30;
  --aedx-border: #222f45;
  --aedx-text: #e8eef7;
  --aedx-muted: #8aa0c0;
  --aedx-faint: #6b7d99;
  --aedx-canvasbg: #eef0f3;

  display: grid;
  grid-template-columns: 48px 300px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  min-height: calc(100vh - 120px);
  background: var(--aedx-panel);
  border-radius: var(--hv-radius-lg);
  overflow: hidden;
  border: 1px solid var(--aedx-border);
}
@media (max-width: 900px) {
  .aedx { grid-template-columns: 1fr; }
  .aedx__launch { display: none; }
  .aedx__panel { grid-column: 1 / -1; }
  .aedx__nav, .aedx__navtab { display: none; }
}

/* ── zone scaffolding ── */
.aedx__topbar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--hv-space-2);
  min-height: 48px;
  padding: var(--hv-space-2) var(--hv-space-3);
  background: var(--aedx-topbar);
  border-bottom: 1px solid var(--aedx-border);
}
.aedx__msg { grid-column: 1 / -1; }
.aedx__launch {
  background: var(--aedx-launch);
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding-top: 8px;
  border-right: 1px solid var(--aedx-border);
}
.aedx__panel {
  background: var(--aedx-panel);
  border-right: 1px solid var(--aedx-border);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.aedx__main {
  background: var(--aedx-canvasbg);
  position: relative; min-width: 0; overflow: auto;
  padding: 18px;
}

/* ── ZONE 1 — launcher rail ── */
.aedx-launch__btn {
  width: 34px; height: 34px; border-radius: 7px;
  display: grid; place-items: center;
  border: 0; background: none; color: var(--aedx-faint);
  cursor: pointer;
}
.aedx-launch__btn:hover { background: var(--aedx-group); color: var(--aedx-text); }
.aedx-launch__btn.is-on { background: var(--hv-core-steel-500); color: #fff; }
.aedx-launch__btn--history { margin-top: auto; margin-bottom: 8px; }
.aedx-launch__logo {
  width: 34px; height: 34px; border-radius: 7px;
  display: grid; place-items: center;
  color: var(--hv-core-steel-500); background: var(--aedx-group);
  text-decoration: none; font-weight: var(--hv-weight-strong);
}
.aedx-launch__logo:hover { background: var(--hv-core-steel-500); color: #fff; }

/* ── ZONE 2 — left panel ── */
.aedx-panelhead {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--aedx-border);
  color: var(--aedx-text); font-size: 13px; font-weight: var(--hv-weight-strong);
}
.aedx-panelhead__glyph { color: var(--hv-core-steel-500); display: inline-flex; }
.aedx-panelhead__kebab {
  border: 0; background: none; color: var(--aedx-faint);
  width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center; cursor: pointer;
}
.aedx-panelhead__kebab:hover { background: var(--aedx-group); color: var(--aedx-text); }

.aedx-tabs { display: flex; gap: 18px; padding: 0 13px; border-bottom: 1px solid var(--aedx-border); }
.aedx-tab {
  background: none; border: 0; padding: 9px 0; font-size: 12px;
  color: var(--aedx-faint); display: flex; gap: 5px; align-items: center;
  cursor: pointer; border-bottom: 2px solid transparent;
}
.aedx-tab:hover { color: var(--aedx-text); }
.aedx-tab.is-on { color: var(--aedx-text); border-bottom-color: var(--hv-core-steel-500); }

.aedx-tabbody { flex: 1; overflow-y: auto; padding: 11px 13px; display: flex; flex-direction: column; gap: 8px; }

.aedx-eltabs { display: flex; gap: 14px; padding: 0 13px; border-bottom: 1px solid var(--aedx-border); }
.aedx-eltabs button {
  background: none; border: 0; padding: 8px 0; font-size: 11.5px;
  color: var(--aedx-faint); cursor: pointer; border-bottom: 2px solid transparent;
}
.aedx-eltabs button:hover:not(:disabled) { color: var(--aedx-text); }
.aedx-eltabs button.is-on { color: var(--aedx-text); border-bottom-color: var(--hv-core-steel-500); }
.aedx-eltabs button:disabled { opacity: .4; cursor: default; }

.aedx-search { margin-bottom: 2px; }

.aedx-wgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aedx-wcard {
  background: var(--aedx-group); border: 1px solid transparent; border-radius: 8px;
  padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: grab; color: var(--aedx-muted);
  transition: border-color .15s ease, transform .15s ease;
}
.aedx-wcard:hover { border-color: var(--hv-core-steel-500); transform: translateY(-1px); }
.aedx-wcard:active { cursor: grabbing; }
.aedx-wcard svg { color: var(--aedx-muted); }
.aedx-wcard__name { font-size: 11px; color: var(--aedx-text); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .aedx-wcard { transition: none; }
  .aedx-wcard:hover { transform: none; }
}

/* ── WAVE 3: block entitlement lock (Elementor Free/Pro). Locked = paid/add-on
   block the vendor isn't entitled to. Admin authoring never sees these. Steel,
   NOT gold (gold = AI only). ── */
.aedx-wcard { position: relative; }
.aedx-wcard--locked { cursor: pointer; opacity: .7; }
.aedx-wcard--locked svg,
.aedx-wcard--locked .aedx-wcard__name { opacity: .8; }
.aedx-wcard--locked:hover { border-color: var(--hv-core-steel-500); transform: none; opacity: 1; }
.aedx-wcard__lock {
  position: absolute; top: 5px; right: 5px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 5px; border-radius: 8px;
  background: var(--hv-core-steel-500); color: #fff;
  font-size: 9px; font-weight: 500; line-height: 1; letter-spacing: .01em;
}
.aedx-wcard__lock svg { color: #fff; }

/* ── WAVE 3: "upgrade to unlock" panel (stubbed billing — see BlockUpgradePanel) ── */
.aedx-upsell { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; }
.aedx-upsell__backdrop { position: absolute; inset: 0; background: rgba(0,16,46,.55); backdrop-filter: blur(2px); }
.aedx-upsell__card {
  position: relative; z-index: 1; width: min(420px, calc(100vw - 32px));
  background: #fff; color: var(--hv-core-navy-600, #001f60);
  border-radius: 12px; padding: 26px 24px 20px;
  box-shadow: 0 20px 60px rgba(0,16,46,.4);
  text-align: center;
}
.aedx-upsell__x {
  position: absolute; top: 12px; right: 12px; border: 0; background: none;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center; color: #52617a;
}
.aedx-upsell__x:hover { background: #eef1f6; }
.aedx-upsell__badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: #eef2fb; color: var(--hv-core-steel-500);
  font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase;
}
.aedx-upsell__title { margin: 12px 0 6px; font-size: 20px; font-weight: 500; }
.aedx-upsell__desc { margin: 0 0 10px; font-size: 13px; color: #52617a; }
.aedx-upsell__pitch { margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: #33415c; }
.aedx-upsell__price {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  padding: 12px; margin-bottom: 16px; border-radius: 8px; background: #f6f8fc;
}
.aedx-upsell__amount { font-size: 16px; font-weight: 500; color: var(--hv-core-navy-600, #001f60); }
.aedx-upsell__unit { font-size: 11.5px; color: #7c8bbe; }
.aedx-upsell__actions { display: flex; flex-direction: column; gap: 8px; }
.aedx-upsell__foot { margin: 14px 0 0; font-size: 11.5px; color: #7c8bbe; }
@media (prefers-reduced-motion: reduce) {
  .aedx-upsell__backdrop { backdrop-filter: none; }
}

.aedx-panel__foot { padding: 9px 13px; border-top: 1px solid var(--aedx-border); font-size: 11px; color: var(--aedx-faint); }

/* ── top bar controls ── */
.aedx-tbtn {
  border: 0; background: none; color: var(--aedx-faint);
  width: 30px; height: 30px; border-radius: 6px;
  display: grid; place-items: center; cursor: pointer;
}
.aedx-tbtn:hover:not(:disabled) { background: var(--aedx-group); color: var(--aedx-text); }
.aedx-tbtn:disabled { opacity: .35; cursor: default; }
.aedx-tbtn.is-on { color: var(--hv-core-steel-500); background: var(--aedx-group); }

.aedx-seg { display: flex; border-radius: 6px; background: var(--aedx-group); overflow: hidden; }
.aedx-seg button {
  border: 0; background: none; color: var(--aedx-faint);
  font: inherit; font-size: 11px; padding: 6px 9px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.aedx-seg button:hover { color: var(--aedx-text); }
.aedx-seg button.is-on { background: var(--hv-core-steel-500); color: #fff; }

.aedx-topbar__title {
  color: var(--aedx-text); font-size: 12px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.aedx-ai { color: var(--hv-core-gold-500); }
.aedx__topbar .hv-button { padding-inline: var(--hv-space-4); }

/* ── ZONE 3 — canvas + floating navigator (light card, per doctrine) ── */
.aedx__nav {
  position: absolute; top: 14px; right: 14px; width: 210px;
  background: #fff; border: 1px solid #d5dae2; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  z-index: 5; font-size: 11px; overflow: hidden;
}
.aedx-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 11px; border-bottom: 1px solid #e4e7ec;
  color: #0A2540; font-weight: var(--hv-weight-strong);
}
.aedx-nav__head button { border: 0; background: none; color: #5a6b82; cursor: pointer; padding: 0; }
.aedx-nav__head button:hover { color: #0A2540; }
.aedx-nav__tree { padding: 7px 9px; max-height: 340px; overflow: auto; }
.aedx-nav__row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 4px;
  color: #5a6b82; cursor: pointer; width: 100%;
  background: none; border: 0; text-align: left; font: inherit;
}
.aedx-nav__row:hover { background: #f2f5f9; }
.aedx-nav__row.is-sel { background: #eaf1f7; color: #0A2540; }
.aedx-nav__row--child { padding-left: 18px; }

.aedx__navtab {
  position: absolute; top: 14px; right: 0;
  background: #fff; border: 1px solid #d5dae2; border-right: 0;
  border-radius: 8px 0 0 8px; padding: 8px 6px;
  font-size: 10px; color: #0A2540; cursor: pointer; z-index: 5;
  writing-mode: vertical-rl;
}
.aedx__navtab:hover { background: #f2f5f9; }

/* ── dark re-skin of shared control classes, scoped under .aedx only ──
   (the same components render inside the light `.magb` builder unchanged —
   these rules never match there because they all require an `.aedx`
   ancestor). ── */
.aedx .hv-input {
  background: var(--aedx-inset); border: 1.25px solid var(--aedx-border); color: var(--aedx-text);
}
.aedx .hv-input::placeholder { color: var(--aedx-faint); }
.aedx .hv-input:focus-visible { border-color: var(--hv-core-steel-500); }
.aedx .hv-label { color: var(--aedx-muted); font-size: 11px; }

.aedx .magb-acc { background: var(--aedx-group); border: 0; border-radius: 8px; }
.aedx .magb-acc__head { color: var(--aedx-text); padding: 9px 11px; }
.aedx .magb-acc__head:hover { color: var(--hv-core-steel-500); }
.aedx .magb-acc__body { padding: 0 11px 12px; display: flex; flex-direction: column; gap: 9px; }
.aedx .magb-acc__chev { color: var(--aedx-faint); }

.aedx .aed-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.aedx .aed-chips button {
  border: 1px solid var(--aedx-border); background: var(--aedx-inset); color: var(--aedx-muted);
  border-radius: var(--hv-radius-sm); padding: var(--hv-space-1) var(--hv-space-2-5);
  font-size: var(--hv-text-xs); cursor: pointer;
}
.aedx .aed-chips button:hover { color: var(--aedx-text); border-color: var(--hv-core-steel-500); }
.aedx .aed-chips button.is-on { background: var(--hv-core-steel-500); color: #fff; border-color: transparent; }

.aedx .aed-seg button, .aedx .aed-seg--icon button {
  border: 1px solid var(--aedx-border); background: var(--aedx-inset); color: var(--aedx-muted);
}
.aedx .aed-seg button:hover, .aedx .aed-seg--icon button:hover { color: var(--aedx-text); border-color: var(--hv-core-steel-500); }
.aedx .aed-seg button.is-on, .aedx .aed-seg--icon button.is-on { background: var(--hv-core-steel-500); border-color: var(--hv-core-steel-500); color: #fff; }

.aedx .aed-swatchrow { gap: 7px; }
.aedx .aed-swatch {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--aedx-border); background: var(--aed-swatch-color, var(--aedx-inset));
}
.aedx .aed-swatch:hover { border-color: var(--hv-core-steel-500); }
.aedx .aed-swatch.is-on { border-color: transparent; box-shadow: 0 0 0 2px var(--hv-core-steel-500); }
.aedx .aed-swatch--none {
  background: repeating-linear-gradient(45deg, var(--aedx-border), var(--aedx-border) 3px, var(--aedx-inset) 3px, var(--aedx-inset) 6px);
}
.aedx .aed-swatch--custom {
  background: conic-gradient(from 0deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}

.aedx .aed-range { background: var(--aedx-border); }
.aedx .aed-range::-webkit-slider-thumb { background: var(--hv-core-steel-500); border-color: var(--aedx-panel); }
.aedx .aed-range::-moz-range-thumb { background: var(--hv-core-steel-500); border-color: var(--aedx-panel); }
.aedx .aed-rangefield__value {
  color: var(--aedx-text); background: var(--aedx-inset); border: 1px solid var(--aedx-border);
  padding: 2px 8px; border-radius: 4px; font-size: 11px;
}
.aedx .aed-range__ticks span { background: var(--aedx-border); }
.aedx .aed-range__ticks span.is-on { background: var(--hv-core-steel-500); }

.aedx .aed-switch__track { background: var(--aedx-border); }
.aedx .aed-switch__thumb { background: #fff; }
.aedx .aed-switch.is-on .aed-switch__track { background: var(--hv-core-steel-500); }
.aedx .aed-switchrow__label { color: var(--aedx-muted); }
.aedx .aed-switchrow__hint { color: var(--aedx-faint); }

.aedx .aed-stepper { border: 1px solid var(--aedx-border); }
.aedx .aed-stepper button { color: var(--aedx-muted); }
.aedx .aed-stepper button:hover:not(:disabled) { color: var(--hv-core-steel-500); }
.aedx .aed-stepper input { background: var(--aedx-inset); color: var(--aedx-text); }
.aedx .aed-stepper__suffix { background: var(--aedx-group); color: var(--aedx-faint); }

.aedx .aed-dims__head { display: flex; align-items: center; justify-content: space-between; }
.aedx .aed-dims__unit { font-size: 10px; color: var(--aedx-muted); background: var(--aedx-inset); border: 1px solid var(--aedx-border); border-radius: 4px; padding: 2px 6px; }
.aedx .aed-dims__boxes { display: flex; gap: 4px; align-items: flex-start; }
.aedx .aed-dims__box { flex: 1; text-align: center; }
.aedx .aed-dims__box input, .aedx .aed-dims__box .aed-dims__boxinner {
  height: 28px; width: 100%; border: 1px solid var(--aedx-border); border-radius: 5px;
  background: var(--aedx-inset); color: var(--aedx-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; text-align: center; padding: 0;
}
.aedx .aed-dims__lbl { display: block; margin-top: 3px; font-size: 9px; color: var(--aedx-faint); }
.aedx .aed-dims__link {
  width: 28px; height: 28px; border-radius: 5px;
  background: var(--aedx-inset); border: 1px solid var(--aedx-border); color: var(--aedx-muted);
  display: grid; place-items: center; cursor: pointer;
}
.aedx .aed-dims__link.is-on { background: var(--hv-core-steel-500); color: #fff; border-color: transparent; }
.aedx .aed-dims__link:disabled { opacity: .6; cursor: default; }
.aedx .aed-dims__note { font-size: 10px; color: var(--aedx-faint); }

.aedx .aed-select select {
  width: 100%; background: var(--aedx-inset); border: 1px solid var(--aedx-border);
  color: var(--aedx-text); border-radius: var(--hv-radius-sm); padding: 6px 8px; font-size: var(--hv-text-xs);
}
.aedx .aed-select select:focus-visible { outline: none; border-color: var(--hv-core-steel-500); }

.aedx .aed-field { display: flex; flex-direction: column; gap: 5px; }
.aedx .aed-hint { font-size: 10px; color: var(--aedx-faint); }

.aedx .maged-tags { color: var(--aedx-text); }
.aedx .maged-tag {
  background: var(--aedx-group); border-color: var(--aedx-border); color: var(--aedx-text);
}
.aedx .maged-tag:hover { background: var(--aedx-inset); }
.aedx .maged-tagsuggest__item { color: var(--aedx-muted); border-color: var(--aedx-border); }
.aedx .maged-tagsuggest__item:hover { color: var(--aedx-text); border-color: var(--hv-core-steel-500); }

@media (prefers-reduced-motion: reduce) {
  .aedx .aed-switch__track, .aedx .aed-switch__thumb { transition: none; }
  .aedx-tbtn, .aedx-tab, .aedx-seg button, .aedx .aed-chips button { transition: none; }
}

/* aedx chrome — layout supplement (editor-chrome-prototype-build-v1):
   the topbar cluster arrangement + navigator row helpers used by
   ArticleBuilder's new chrome. Additive, .aedx-scoped. */
.aedx__topbar { display: flex; align-items: center; gap: 12px; }
.aedx__topcluster { display: flex; align-items: center; gap: 8px; }
.aedx__topcenter { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; justify-content: center; }
.aedx__topcluster--end { justify-content: flex-end; }
.aedx-topchip { font-size: 11px; color: var(--aedx-muted); padding: 3px 9px; border-radius: 999px; background: var(--aedx-group); white-space: nowrap; }
.aedx-topchip.is-dirty { color: var(--hv-core-gold-500); }
.aedx-panelhead__glyph { display: inline-flex; align-items: center; gap: 7px; color: var(--hv-core-steel-500); }
.aedx-panelhead__glyph { color: var(--aedx-text); }
.aedx-panelhead__glyph svg { color: var(--hv-core-steel-500); }
.aedx-tab svg { flex: 0 0 auto; }
.aedx-nav__x { background: none; border: 0; padding: 2px; color: #8593a8; cursor: pointer; display: inline-flex; }
.aedx-nav__x:hover { color: #0A2540; }
.aedx-nav__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aedx-nav__row--root { font-weight: 500; color: #33445c; }
.aedx-nav__row svg { flex: 0 0 auto; }

/* Wave 2 — designer-tier custom colour input row (admin, inside .aedx panel). */
.aedx .aed-customcolor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aedx .aed-customcolor input[type="color"] { width: 40px; height: 26px; padding: 0; border: 1px solid var(--aedx-border); border-radius: 5px; background: var(--aedx-inset); cursor: pointer; }
.aedx .aed-customcolor .hv-link { font-size: 11px; }

/* ═══ WAVE 2 ARTICLE BLOCKS (magazine-block-library-wave2-v1) — tokens only ═══ */

/* ── CAROUSEL (Media) — in-article horizontally-paged image carousel. ── */
.magcaro { display: flex; flex-direction: column; gap: var(--hv-space-2); }
.magcaro-viewport { position: relative; overflow: hidden; touch-action: pan-y; border-radius: var(--hv-radius-lg); background: var(--hv-color-surface-muted); }
.magcaro-track { display: flex; transition: transform 660ms var(--hv-spring); }
.magcaro-slide { flex: 0 0 100%; min-width: 0; }
.magcaro-slide img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
/* Wave (gallery-lightbox): OPTIONAL click-to-open button wrapper — only
   rendered when ArticleCarousel receives onImageClick (the gallery block's
   'slider' layout); the plain 'carousel' block never passes it, so its
   slides stay bare <img>, unaffected by this rule. */
.magcaro-slide__btn { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; }
.magcaro[data-aspect="wide"] .magcaro-slide img { aspect-ratio: 16 / 9; }
.magcaro[data-aspect="square"] .magcaro-slide img { aspect-ratio: 1 / 1; }
.magcaro-arrow { position: absolute; top: 0; height: 100%; width: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--hv-ink); opacity: 0; transition: opacity 180ms ease; }
.magcaro-arrow--prev { left: 0; }
.magcaro-arrow--next { right: 0; }
.magcaro-arrow svg { background: var(--hv-color-surface-default); border: 1px solid var(--hv-color-border-default); padding: 8px; width: 34px; height: 34px; box-sizing: border-box; }
.magcaro-arrow:hover { color: var(--hv-color-interactive); }
.magcaro:hover .magcaro-arrow, .magcaro:focus-within .magcaro-arrow { opacity: 1; }
.magcaro-dots { display: flex; justify-content: center; gap: var(--hv-space-2); }
.magcaro-dot { width: 9px; height: 9px; padding: 0; border-radius: var(--hv-radius-full); border: 1px solid var(--hv-ink); background: transparent; cursor: pointer; }
.magcaro-dot.is-on { background: var(--hv-ink); }
.magcaro-caption { font-size: var(--hv-text-xs); line-height: 1.5; font-weight: 300; color: var(--hv-color-text-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .magcaro-track { transition: none; } .magcaro-arrow { opacity: 1; transition: none; } }

/* ── CHECKLIST (Showcase) — icon/"what's included" list. check/star/dot use
   the steel interactive token (sage green reserved for Verified, gold for AI);
   cross uses the muted neutral text token. ── */
.magcheck { display: flex; flex-direction: column; gap: var(--hv-space-3); margin: 0; padding: 0; list-style: none; }
.magcheck--cols2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--hv-space-6); row-gap: var(--hv-space-3); }
@media (max-width: 640px) { .magcheck--cols2 { grid-template-columns: 1fr; } }
.magcheck__row { display: flex; align-items: flex-start; gap: var(--hv-space-2); }
.magcheck__icon { flex: 0 0 auto; margin-top: 2px; }
.magcheck__row--check .magcheck__icon, .magcheck__row--star .magcheck__icon, .magcheck__row--dot .magcheck__icon { color: var(--hv-color-interactive, var(--hv-core-steel-500)); }
.magcheck__row--cross .magcheck__icon { color: var(--hv-color-text-muted); }
.magcheck__text { font-size: var(--hv-text-md); color: var(--hv-color-text-default); line-height: 1.5; }
.magcheck__row--cross .magcheck__text { color: var(--hv-color-text-muted); }

/* ── COUNTER / STAT (Showcase) — a row of big numbers. ── */
.magstat { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hv-space-6); margin: var(--hv-space-2) 0; }
.magstat[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.magstat[data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .magstat[data-columns="3"], .magstat[data-columns="4"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .magstat { grid-template-columns: 1fr; } }
.magstat-tile { display: flex; flex-direction: column; align-items: center; gap: var(--hv-space-1); text-align: center; }
.magstat-value { font-family: var(--hv-font-sans); font-size: var(--hv-text-3xl); font-weight: var(--hv-weight-heavy); color: var(--hv-color-text-brand); line-height: var(--hv-lh-tight); }
.magstat-affix { font-size: var(--hv-text-xl); font-weight: var(--hv-weight-strong); }
.magstat-label { font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }

/* ── PRICE LIST (Showcase) — service/menu rate card. ── */
.magprice { margin: var(--hv-space-2) 0; }
.magprice__title { font-size: var(--hv-text-sm); font-weight: var(--hv-weight-strong); color: var(--hv-color-text-strong); margin: 0 0 var(--hv-space-3); }
.magprice__table { width: 100%; border-collapse: collapse; }
.magprice__row { border-bottom: 1px solid var(--hv-color-border-subtle); }
.magprice__row:last-child { border-bottom: none; }
.magprice__cell { padding: var(--hv-space-2-5) 0; vertical-align: top; text-align: left; font-weight: var(--hv-weight-normal); }
.magprice__name { display: block; font-size: var(--hv-text-sm); font-weight: var(--hv-weight-bold); color: var(--hv-color-text-strong); }
.magprice__desc { display: block; margin-top: var(--hv-space-1); font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); }
.magprice__cell--price { text-align: right; white-space: nowrap; padding-left: var(--hv-space-4); font-size: var(--hv-text-sm); font-weight: var(--hv-weight-strong); color: var(--hv-core-steel-500); font-family: var(--hv-font-mono); }

/* ── PRICE TABLE (Showcase) — tiered pricing columns. steel "Popular" pill
   on the highlighted tier — never green/orange. ── */
.magptable { margin: var(--hv-space-6) 0; }
.magptable-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--hv-space-5); }
@media (max-width: 640px) { .magptable-grid { grid-template-columns: 1fr; } }
.magptable-tier { position: relative; display: flex; flex-direction: column; gap: var(--hv-space-3); padding: var(--hv-space-6); border: 1px solid var(--hv-color-border-default); border-radius: var(--hv-radius-card); background: var(--hv-color-surface-default); }
.magptable-tier--highlighted { border: 2px solid var(--hv-core-steel-500); box-shadow: var(--hv-shadow-md); }
.magptable-badge { position: absolute; top: calc(var(--hv-space-3) * -1); left: var(--hv-space-6); padding: 2px 12px; border-radius: var(--hv-radius-full); background: var(--hv-core-steel-500); color: var(--hv-color-text-inverse); font-size: var(--hv-text-xxs); font-weight: var(--hv-weight-strong); letter-spacing: var(--hv-tracking-wide); text-transform: uppercase; }
.magptable-name { margin: 0; font-size: var(--hv-text-md); font-weight: var(--hv-weight-strong); color: var(--hv-color-text-strong); }
.magptable-pricerow { margin: 0; display: flex; align-items: baseline; gap: var(--hv-space-1); }
.magptable-price { font-size: var(--hv-text-2xl); font-weight: var(--hv-weight-heavy); color: var(--hv-color-text-default); }
.magptable-period { font-size: var(--hv-text-sm); color: var(--hv-color-text-muted); }
.magptable-features { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--hv-space-2); flex: 1 1 auto; }
.magptable-feature { display: flex; align-items: flex-start; gap: var(--hv-space-2); font-size: var(--hv-text-sm); color: var(--hv-color-text-default-subdued); }
.magptable-feature__tick { flex: 0 0 auto; margin-top: 2px; color: var(--hv-core-steel-500); }
.magptable-ctarow { margin-top: var(--hv-space-2); }
.magptabled { display: flex; flex-direction: column; gap: var(--hv-space-4); }
.magptabled__tier { display: flex; flex-direction: column; gap: var(--hv-space-2); padding: var(--hv-space-4); border: 1px solid var(--hv-color-border-default); border-radius: var(--hv-radius-md); background: var(--hv-color-surface-subdued); }
.magptabled__tierhead { display: flex; align-items: center; justify-content: space-between; }
.magptabled__pricerow { display: flex; gap: var(--hv-space-2); }
.magptabled__pricerow .hv-input { flex: 1; min-width: 0; }

/* ── FULL-WIDTH EDITOR (magazine-editor-gapfill-wave-v1) ─────────────────────
   The .aedx article editor should fill the window like a real full-screen
   builder. It's inset by two things: the .adm-main padding (havenly-home.css)
   and the .aedx card chrome (border/radius/min-height above). Drop BOTH — but
   ONLY when an .aedx editor is present inside the collapsed-nav wide shell, so
   every OTHER admin page keeps its comfortable .adm-main padding.
   Scoped via :has(); the editor pages already mount AdminShell navCollapsible
   (→ .magb-shellwide). Zero TSX change, zero effect on other admin routes. */
.magb-shellwide .adm-main:has(> .aedx) {
  padding: 0;
  gap: 0;
}
.magb-shellwide .adm-main:has(> .aedx) > .aedx {
  border: 0;
  border-radius: 0;
  min-height: 100dvh;
}

/* ── RATING block (editorial star verdict) — gap-fill wave. Steel-filled
   pure-SVG stars over a muted outline base; NOT gold/green/orange. ── */
.magrate { margin: var(--hv-space-2) 0; }
.magrate__label { font-size: var(--hv-text-sm); font-weight: var(--hv-weight-strong); color: var(--hv-color-text-muted); text-transform: uppercase; letter-spacing: var(--hv-tracking-wide); margin: 0 0 var(--hv-space-1); }
.magrate__row { display: flex; align-items: center; gap: var(--hv-space-3); flex-wrap: wrap; }
.magrate__stars { display: inline-flex; gap: 2px; }
.magrate__star { position: relative; display: inline-block; width: 20px; height: 20px; line-height: 0; }
.magrate__star-base, .magrate__star-fillwrap { position: absolute; inset: 0; }
.magrate__star-fillwrap { overflow: hidden; }
.magrate__star-outline { fill: none; stroke: var(--hv-color-border-default); stroke-width: 1.4; stroke-linejoin: round; }
.magrate__star-fill polygon { fill: var(--hv-core-steel-500); }
.magrate__value { font-size: var(--hv-text-sm); font-weight: var(--hv-weight-strong); color: var(--hv-color-text-default); font-family: var(--hv-font-mono); white-space: nowrap; }

/* ── ALERT / CALLOUT block — gap-fill wave. green/orange/gold NEVER used
   (Verified/Deal/AI reserved). note=neutral, info=brand-tint, tip=steel. ── */
.magalert { display: flex; border: 1px solid var(--hv-color-border-default); border-radius: var(--hv-radius-md); background: var(--hv-color-surface-muted); overflow: hidden; margin: var(--hv-space-2) 0; }
.magalert__accent { flex: 0 0 4px; background: var(--hv-color-border-strong); }
.magalert__inner { display: flex; align-items: flex-start; gap: var(--hv-space-3); padding: var(--hv-space-4) var(--hv-space-5); flex: 1; min-width: 0; }
.magalert__icon { flex: 0 0 auto; margin-top: 2px; color: var(--hv-color-text-muted); }
.magalert__text { display: flex; flex-direction: column; gap: var(--hv-space-1); min-width: 0; }
.magalert__title { margin: 0; font-size: var(--hv-text-md); font-weight: var(--hv-weight-strong); color: var(--hv-color-text-default); }
.magalert__body { margin: 0; font-size: var(--hv-text-sm); line-height: var(--hv-lh-relaxed); color: var(--hv-color-text-default-subdued); }
.magalert__body a { color: var(--hv-color-action-primary); text-decoration: underline; }
.magalert[data-tone="note"] { background: var(--hv-color-surface-muted); border-color: var(--hv-color-border-default); }
.magalert[data-tone="note"] .magalert__accent { background: var(--hv-color-border-strong); }
.magalert[data-tone="note"] .magalert__icon { color: var(--hv-color-text-muted); }
.magalert[data-tone="info"] { background: var(--hv-color-surface-brand-subdued); border-color: var(--hv-color-border-brand); }
.magalert[data-tone="info"] .magalert__accent { background: var(--hv-core-brand-600); }
.magalert[data-tone="info"] .magalert__icon { color: var(--hv-core-brand-600); }
.magalert[data-tone="tip"] { background: color-mix(in srgb, var(--hv-core-steel-500) 10%, var(--hv-color-surface-default)); border-color: color-mix(in srgb, var(--hv-core-steel-500) 30%, transparent); }
.magalert[data-tone="tip"] .magalert__accent { background: var(--hv-core-steel-500); }
.magalert[data-tone="tip"] .magalert__icon { color: var(--hv-core-steel-500); }

/* ── ICON BOX block — gap-fill wave. icon + heading + text feature tiles;
   steel icons (NOT gold/green/orange). ── */
.magiconbox { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hv-space-6); margin: var(--hv-space-2) 0; }
.magiconbox[data-columns="1"] { grid-template-columns: 1fr; }
.magiconbox[data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
.magiconbox[data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .magiconbox[data-columns="3"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .magiconbox { grid-template-columns: 1fr !important; } }
.magiconbox--align-center .magiconbox__tile { text-align: center; align-items: center; }
.magiconbox__tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--hv-space-2); }
.magiconbox__icon { display: inline-flex; color: var(--hv-color-interactive, var(--hv-core-steel-500)); }
.magiconbox__heading { font-family: var(--hv-font-sans); font-size: var(--hv-text-md); font-weight: var(--hv-weight-strong); color: var(--hv-color-text-strong); line-height: var(--hv-lh-tight); }
.magiconbox__text { margin: 0; font-size: var(--hv-text-xs); color: var(--hv-color-text-muted); line-height: 1.5; }