/* ============================================================
   PARITY den — web own/visited profile matched to the app (DenProfileView.swift + HomeroomDenShared.swift).
   Loaded after themes/den.css (views/den-view.js adds the <link> if index.html does not have it).
   App order: cover (gold LED strip, shade, crest + THE DEN + "✎ Cover") · purple LED strip · ring-light photo lifted ~32% onto the cover ·
   ribbon name · handle "· Class of" · dashed role patch · Welcome Mat as plain Inter text · Block ID chips (VIP PASS card) ·
   LED counters · clipboard report card · pills · LED-label tabs.
   ============================================================ */

html[data-theme="den"] .bm-den-wrap {
  container: den / inline-size;
  --den-d: min(343px, 55cqi);                       /* HDHeroPhoto: Den 343, capped at 55% of the column */
  --den-inset: calc(var(--den-d) * 10 / 343);       /* halo inset and face border scale with the photo */
  --den-border: calc(var(--den-d) * 6 / 343);
  --den-k: calc(var(--den-d) / 132);                /* glow radii scale (denScale) */
  --den-cover-h: 300px;
}

/* ---------- cover ---------- */
html[data-theme="den"] .bm-den-cover { height: var(--den-cover-h); }
html[data-theme="den"] .bm-den-play { display: none; }   /* the app has no play button: the cover itself opens the viewer */
html[data-theme="den"] .bm-den-stage:focus-visible { outline: 3px solid var(--den-gold); outline-offset: -3px; }

/* ---------- identity: ring-light halo scaled with the photo ---------- */
html[data-theme="den"] .bm-den-ident { margin-top: max(calc(var(--den-d) * -0.32), calc(12px - var(--den-cover-h))); }
html[data-theme="den"] .bm-den-ring { width: var(--den-d); }
html[data-theme="den"] .bm-den-halo {
  inset: calc(var(--den-inset) * -1);
  filter: blur(var(--den-k));
  box-shadow: 0 0 calc(var(--den-k) * 26) rgba(212, 166, 60, .55), 0 0 calc(var(--den-k) * 42) rgba(123, 63, 228, .45);
}
html[data-theme="den"] .bm-den-face { border-width: var(--den-border); }
html[data-theme="den"] .bm-den-ribbon { margin-top: calc(6px + var(--den-inset)); max-width: calc(100% - 8px); box-sizing: border-box; }
html[data-theme="den"] .bm-den-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Welcome Mat: plain Inter 15 semibold, left aligned, pencil in text-2 (WelcomeMatView) ---------- */
html[data-theme="den"] .bm-den-note { display: none; }
html[data-theme="den"] .bm-den-wmbox { padding: 16px 18px 4px; }
html[data-theme="den"] .bm-den-wmbox .bm-den-wm { display: block; margin: 0; text-align: left; font: 600 15px/1.45 Inter, -apple-system, sans-serif; color: var(--den-text); white-space: pre-wrap; opacity: 1; }
html[data-theme="den"] .bm-den-wmbox .bm-wm-pencil { font: 700 11px Inter, sans-serif; color: var(--den-text-2); opacity: 1; margin-left: 8px; }
html[data-theme="den"] .bm-den-wmbox .bm-den-wm.bm-wm-empty { display: block; padding: 0; border: 0; border-radius: 0; background: none; font: 700 13px Inter, sans-serif; color: var(--den-text-2); cursor: pointer; }
html[data-theme="den"] .bm-den-wmbox .bm-wm-empty small { display: none; }

/* ---------- Block ID (chip row + VIP PASS card); accent #B08FF7 like the app ---------- */
html[data-theme="den"] .bm-den-bidwrap { --den-bid: #B08FF7; }
html[data-theme="den"] .bm-den-bidwrap .bm-bid { max-width: none; margin: 12px 0 0; padding: 0; }
html[data-theme="den"] .bm-den-bidwrap .bm-bid-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 0 16px; }
html[data-theme="den"] .bm-den-bidwrap .bm-bid-chips::-webkit-scrollbar { display: none; }
html[data-theme="den"] .bm-den-bidwrap .bm-bid-chip { flex: none; white-space: nowrap; border: 0; border-radius: 999px; padding: 6px 10px; gap: 5px;
  background: rgba(244, 241, 234, .10); color: var(--den-text); font: 600 11px Inter, system-ui, sans-serif; }
html[data-theme="den"] .bm-den-bidwrap .bm-bid-chip .bm-bid-ic { color: var(--den-bid); width: 14px; height: 14px; }
html[data-theme="den"] .bm-den-bidwrap .bm-bid-open { flex: none; white-space: nowrap; border-radius: 999px; border: 1px solid rgba(176, 143, 247, .6); box-shadow: none;
  background: transparent; color: var(--den-bid); padding: 6px 10px; font: 700 11px Inter, system-ui, sans-serif; }
html[data-theme="den"] .bm-den-bidwrap .bm-bid-wm { display: none; }   /* the add prompt already sits in the Welcome Mat slot */
html[data-theme="den"] .bm-den-bidwrap .bm-bid-card { max-width: none; margin: 10px 16px 0; padding: 14px; border-radius: 14px; box-shadow: none;
  background: rgba(244, 241, 234, .06); color: var(--den-text); border: 1px solid rgba(176, 143, 247, .45); }
html[data-theme="den"] .bm-den-bidwrap .bm-bid-title { font: 900 10px Inter, system-ui, sans-serif; letter-spacing: 1.5px; color: var(--den-bid); }
html[data-theme="den"] .bm-den-bidwrap .bm-bid-title::before { content: none; }
html[data-theme="den"] .bm-den-bidwrap .bm-bid-row { justify-content: flex-start; border-top: 0; padding: 4px 0; font-size: 13px; }
html[data-theme="den"] .bm-den-bidwrap .bm-bid-row span { width: 100px; flex: none; font: 900 9px Inter, sans-serif; letter-spacing: 1px; text-transform: uppercase; opacity: .7; display: inline-flex; gap: 6px; align-items: center; }
html[data-theme="den"] .bm-den-bidwrap .bm-bid-row span .bm-bid-ic { color: var(--den-bid); }
html[data-theme="den"] .bm-den-bidwrap .bm-bid-row b { text-align: left; font-weight: 400; }

/* ---------- the default profile below the hero ---------- */
/* the hero already shows the Welcome Mat, Block ID and the anthem (mini player), so the rest drops its copies */
html[data-theme="den"] #bm-pt-rest > .bm-wm-slot,
html[data-theme="den"] #bm-pt-rest > .bm-bid,
html[data-theme="den"] #bm-pt-rest > .bm-anthem-bar { display: none; }
html[data-theme="den"] #bm-pt-rest .bm-subtab-nav { margin-top: 10px; scrollbar-width: none; }
html[data-theme="den"] #bm-pt-rest .bm-subtab-nav::-webkit-scrollbar { display: none; }
html[data-theme="den"] #bm-pt-rest .bm-subtab { cursor: pointer; }
html[data-theme="den"] #bm-pt-rest .bm-subtab:focus-visible { outline: 3px solid var(--den-gold); outline-offset: -3px; }
html[data-theme="den"] #bm-pt-rest .bm-anthem-embed { display: block; max-width: 688px; margin-inline: auto; }

/* ---------- responsive: phones fill the width; regular-width canvases cap and center (AdaptiveLayout) ---------- */
@container den (max-width: 520px) {
  html[data-theme="den"] .bm-den-wrap .bm-den-cover { height: 230px; border-radius: 0 0 16px 16px; }
  html[data-theme="den"] .bm-den-wrap .bm-den-ident { margin-top: max(calc(var(--den-d) * -0.32), -218px); }
  html[data-theme="den"] .bm-den-wrap .bm-den-name { font-size: 20px; }
  html[data-theme="den"] .bm-den-wrap .bm-den-leds { grid-template-columns: repeat(2, 1fr); }
  html[data-theme="den"] .bm-den-wrap .bm-den-pill { padding: 9px 13px; }
}
@container den (min-width: 521px) {
  html[data-theme="den"] .bm-den-wrap .bm-den-leds { grid-template-columns: repeat(4, 1fr); }
}
@container (min-width: 900px) {
  html[data-theme="den"] #bm-pt-rest { max-width: none; margin-inline: auto; }
}
@supports not (container-type: inline-size) {
  html[data-theme="den"] .bm-den-wrap { --den-d: min(343px, 55vw); }
  @media (max-width: 520px) { html[data-theme="den"] .bm-den-wrap { --den-cover-h: 230px; } }
}
/* TV / console: bigger focus rings for the remote; hover glows are decoration only */
html.bm-tv[data-theme="den"] .bm-den-wrap :focus-visible,
html.bm-tv[data-theme="den"] #bm-pt-rest :focus-visible { outline-width: 4px; outline-offset: 3px; }