:root{--bg:#070a12;--panel:#0e1424;--text:#eef4ff;--muted:#9ca9bf;--line:rgba(255,255,255,.1);--accent:#84b6ff;--accent2:#b994ff;--danger:#ff8b8b;--ok:#95d5a6;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top left,rgba(132,182,255,.12),transparent 34rem),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.page-shell{width:min(1180px,calc(100% - 28px));margin:0 auto;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto}.site-header{position:sticky;top:10px;z-index:20;margin:10px 0 28px;padding:10px 12px;border:1px solid var(--line);border-radius:18px;background:rgba(10,15,28,.82);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:10px;font-weight:800}.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:11px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06101f}.nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.nav a,.link-button{border:1px solid transparent;border-radius:999px;padding:8px 10px;color:var(--muted);background:transparent;cursor:pointer}.nav a:hover,.link-button:hover,.nav .pill{border-color:var(--line);color:var(--text);background:rgba(255,255,255,.05)}.content{padding-bottom:42px}.hero{padding:26px 0 34px}.fixed-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);gap:22px;align-items:stretch}.hero h1,.section h1,.article h1{font-size:clamp(2.35rem,7vw,5.6rem);line-height:.92;letter-spacing:-.06em;margin:.1em 0 .28em}h1,h2,h3,p{margin-top:0}.lead{font-size:clamp(1.05rem,2vw,1.35rem);color:var(--muted);max-width:68ch}.eyebrow{color:var(--accent);font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;font-weight:800}.hero-panel,.card,.login-card{border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));box-shadow:0 24px 70px rgba(0,0,0,.24);padding:22px;overflow:hidden}.hero-panel{position:relative;min-height:310px;display:flex;align-items:flex-end}.orb{position:absolute;inset:18px;border-radius:28px;background:radial-gradient(circle at 30% 20%,rgba(132,182,255,.88),transparent 20%),radial-gradient(circle at 70% 45%,rgba(185,148,255,.7),transparent 22%),linear-gradient(135deg,#101828,#1a2440)}.hero-panel p{position:relative;z-index:2;color:#dbe6fb}.section{margin:36px 0}.section-head,.row-between{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.grid.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.stack{display:grid;gap:14px}.project-card{min-height:220px;display:flex;flex-direction:column}.project-card .actions{margin-top:auto}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.055);color:var(--text);cursor:pointer}.button.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#06101f;border-color:transparent;font-weight:800}.button.ghost{color:var(--muted)}.button.danger{color:var(--danger)}.article{max-width:850px;margin:0 auto}.prose{margin-top:22px;color:#dbe6fb;font-size:1.04rem}.embed-box{position:relative;min-height:320px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#000}.form{display:grid;gap:14px}.form label{display:grid;gap:6px;color:var(--muted);font-weight:700}.form input,.form textarea,.form select{width:100%;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.22);color:var(--text);padding:11px 12px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.check{display:flex!important;align-items:center;gap:8px}.check input{width:auto}.flash{border-radius:16px;padding:12px 14px;margin-bottom:16px;border:1px solid var(--line)}.flash.ok{background:rgba(149,213,166,.12);color:var(--ok)}.flash.error{background:rgba(255,139,139,.12);color:var(--danger)}.site-footer{border-top:1px solid var(--line);padding:22px 0 34px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted)}.login-body{min-height:100svh;display:grid;place-items:center;padding:20px}.login-card{width:min(430px,100%)}.admin-shell .content{padding-bottom:70px}code{color:var(--accent);background:rgba(255,255,255,.06);padding:.15em .4em;border-radius:.45em}@media(max-width:860px){.fixed-grid,.grid.cards,.form-grid{grid-template-columns:1fr}.site-header{align-items:flex-start;flex-direction:column}.nav{justify-content:flex-start}}

/* Thumbnail support for blog, portfolio, and playground */
.project-thumb,
.post-thumb,
.article-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #05070b;
  margin-bottom: 14px;
}

.article-thumb {
  margin: 18px 0 22px;
  max-height: 520px;
}

.thumb-admin-preview {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}

.thumb-admin-preview img {
  width: min(360px, 100%);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--line);
}

/* Strong responsive thumbnail/layout fix */
.project-card,
.post-card,
.playground-card,
.article {
  max-width: 100%;
  overflow: hidden;
}

.project-thumb,
.post-thumb {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #05070b;
  margin: 0 0 14px;
}

.article-thumb {
  display: block;
  width: min(100%, 920px);
  max-width: 100%;
  height: auto;
  max-height: 520px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #05070b;
  margin: 18px auto 22px;
}

.project-detail-embed,
.embed-box {
  max-width: 100%;
  overflow: hidden;
}

.project-detail-embed img,
.embed-box img,
.prose img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 720px) {
  .article-thumb,
  .project-thumb,
  .post-thumb {
    border-radius: 14px;
    max-height: 360px;
  }
}

/* Rich blog feed + reverse snap stream */
.blog-stream-section {
  scroll-margin-top: 20px;
}

.blog-snap-list {
  scroll-snap-type: y proximity;
}

.snap-post {
  scroll-snap-align: start;
  scroll-margin-top: 16px;
}

.fresh-post {
  animation: freshPostPulse 1.4s ease-out;
}

@keyframes freshPostPulse {
  0% { transform: translateY(-10px); box-shadow: 0 0 0 1px rgba(127,178,255,0.55), 0 24px 70px rgba(127,178,255,0.14); }
  100% { transform: translateY(0); box-shadow: inherit; }
}

.topic-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.topic-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(127,178,255,0.28);
  background: rgba(127,178,255,0.10);
  color: var(--text);
  text-decoration: none;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.topic-chip:hover {
  border-color: rgba(127,178,255,0.55);
  background: rgba(127,178,255,0.18);
}

.blog-suggest-card .section-head {
  gap: 14px;
}

.feed-detail-card {
  margin: 20px 0;
}

.feed-detail-card h2 {
  margin-top: 0;
}

.post-thumb,
.article-thumb {
  max-width: 100%;
}


/* STRICT IMAGE FEED SNAP UI START */
html {
  scroll-behavior: smooth;
}

.blog-stream-section {
  scroll-margin-top: 20px;
}

.blog-snap-list {
  scroll-snap-type: y proximity;
  gap: clamp(18px, 4vh, 34px);
}

.feed-image-card {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  padding: 0;
  min-height: min(88vh, 860px);
  display: grid;
  grid-template-rows: minmax(280px, 58vh) auto;
  border-radius: 24px;
}

.feed-image-card .feed-hero-img,
.feed-image-card .post-thumb {
  width: 100%;
  height: 100%;
  min-height: 280px;
  max-height: 62vh;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
  border-radius: 0;
  border: 0;
}

.feed-card-body {
  padding: clamp(16px, 3vw, 28px);
  display: grid;
  gap: 10px;
  align-content: start;
}

.feed-card-body h2 {
  margin: 0;
  font-size: clamp(24px, 4vw, 46px);
  line-height: 1.02;
}

.feed-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.55;
}

.snap-post {
  scroll-margin-top: 14px;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.active-snap-post {
  border-color: rgba(127,178,255,0.46);
  box-shadow: 0 28px 80px rgba(0,0,0,0.34), 0 0 0 1px rgba(127,178,255,0.18);
}

.fresh-post {
  animation: freshPostPulse 1.4s ease-out;
}

@keyframes freshPostPulse {
  0% {
    transform: translateY(18px) scale(.985);
    box-shadow: 0 0 0 1px rgba(127,178,255,0.65), 0 28px 90px rgba(127,178,255,0.18);
  }
  100% {
    transform: translateY(0) scale(1);
    box-shadow: inherit;
  }
}

.topic-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.topic-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(127,178,255,0.28);
  background: rgba(127,178,255,0.10);
  color: var(--text);
  text-decoration: none;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.topic-chip:hover {
  border-color: rgba(127,178,255,0.55);
  background: rgba(127,178,255,0.18);
}

.blog-suggest-card {
  position: sticky;
  top: 12px;
  z-index: 4;
  backdrop-filter: blur(12px);
}

.blog-suggest-card .section-head {
  gap: 14px;
}

.feed-detail-card {
  margin: 20px 0;
}

.article-hero-image {
  width: 100%;
  max-width: 100%;
  max-height: 68vh;
  object-fit: cover;
  border-radius: 24px;
}

@media (max-width: 720px) {
  .feed-image-card {
    min-height: 86vh;
    grid-template-rows: minmax(300px, 54vh) auto;
    border-radius: 18px;
  }

  .feed-card-body {
    padding: 16px;
  }

  .blog-suggest-card {
    position: relative;
    top: auto;
  }
}
/* STRICT IMAGE FEED SNAP UI END */


/* ADMIN CURATION STREAM START */
html {
  scroll-behavior: smooth;
}

.insta-feed-section {
  padding-bottom: 50vh;
}

.curation-toolbar {
  position: sticky;
  top: 12px;
  z-index: 5;
  backdrop-filter: blur(14px);
}

.candidate-stream {
  display: grid;
  gap: clamp(20px, 5vh, 46px);
  scroll-snap-type: y mandatory;
  margin-top: 18px;
}

.stream-candidate-card {
  min-height: min(92vh, 920px);
  display: grid;
  grid-template-rows: minmax(320px, 62vh) auto;
  overflow: hidden;
  padding: 0;
  border-radius: 28px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: 10px;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.stream-candidate-card.active-stream-card {
  border-color: rgba(127,178,255,.56);
  box-shadow: 0 34px 90px rgba(0,0,0,.38), 0 0 0 1px rgba(127,178,255,.22);
}

.stream-candidate-card.candidate-saved {
  border-color: rgba(154,211,165,.62);
  box-shadow: 0 30px 88px rgba(31,153,73,.18);
}

.stream-hero-img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  max-height: 68vh;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #05070b;
}

.stream-card-body {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(16px, 3vw, 30px);
}

.stream-card-body h2 {
  margin: 0;
  font-size: clamp(25px, 4.5vw, 54px);
  line-height: 1.02;
}

.stream-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(14px, 1.5vw, 19px);
  line-height: 1.55;
}

.topic-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.topic-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(127,178,255,.28);
  background: rgba(127,178,255,.10);
  color: var(--text);
  text-decoration: none;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.topic-chip:hover {
  border-color: rgba(127,178,255,.55);
  background: rgba(127,178,255,.18);
}

.saved-posts-section {
  margin-top: clamp(34px, 8vh, 90px);
}

.saved-mini-card .post-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-hero-image {
  width: 100%;
  max-width: 100%;
  max-height: 68vh;
  object-fit: cover;
  border-radius: 24px;
}

.feed-detail-card {
  margin: 20px 0;
}

@media (max-width: 720px) {
  .curation-toolbar {
    position: relative;
    top: auto;
  }

  .stream-candidate-card {
    min-height: 90vh;
    grid-template-rows: minmax(320px, 55vh) auto;
    border-radius: 20px;
  }

  .stream-card-body {
    padding: 16px;
  }
}
/* ADMIN CURATION STREAM END */


/* CODING CURATION STREAM START */
html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

body {
  overflow-x: hidden;
}

.insta-feed-shell {
  width: min(1180px, calc(100% - 24px));
  margin: 0 auto;
  padding: 10px 0 70vh;
}

.curation-toolbar {
  position: sticky;
  top: 10px;
  z-index: 20;
  backdrop-filter: blur(16px);
  margin-bottom: 18px;
}

.curation-toolbar h1 {
  margin: 0;
  font-size: clamp(24px, 4vw, 48px);
}

.candidate-stream {
  display: grid;
  gap: 26px;
}

.stream-candidate-card {
  min-height: calc(100svh - 92px);
  display: grid;
  grid-template-rows: minmax(320px, 62svh) auto;
  overflow: hidden;
  padding: 0;
  border-radius: 28px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-top: 8px;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.stream-candidate-card.active-stream-card {
  border-color: rgba(127,178,255,.56);
  box-shadow: 0 34px 90px rgba(0,0,0,.38), 0 0 0 1px rgba(127,178,255,.22);
}

.stream-candidate-card.candidate-saved {
  border-color: rgba(154,211,165,.65);
  box-shadow: 0 30px 88px rgba(31,153,73,.18);
}

.stream-hero-img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  max-height: 68svh;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #05070b;
}

.stream-card-body {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(16px, 3vw, 30px);
}

.stream-card-body h2 {
  margin: 0;
  font-size: clamp(25px, 4.6vw, 56px);
  line-height: 1.02;
}

.stream-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(14px, 1.5vw, 19px);
  line-height: 1.55;
}

.topic-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.topic-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(127,178,255,.28);
  background: rgba(127,178,255,.10);
  color: var(--text);
  text-decoration: none;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.topic-chip:hover {
  border-color: rgba(127,178,255,.55);
  background: rgba(127,178,255,.18);
}

.article-hero-image {
  width: 100%;
  max-width: 100%;
  max-height: 68vh;
  object-fit: cover;
  border-radius: 24px;
}

.feed-detail-card {
  margin: 20px 0;
}

@media (max-width: 720px) {
  .insta-feed-shell {
    width: min(100% - 14px, 100%);
    padding-top: 6px;
  }

  .curation-toolbar {
    position: relative;
    top: auto;
  }

  .stream-candidate-card {
    min-height: 94svh;
    grid-template-rows: minmax(330px, 55svh) auto;
    border-radius: 20px;
  }

  .stream-card-body {
    padding: 16px;
  }

  .stream-card-body h2 {
    font-size: clamp(24px, 7vw, 38px);
  }
}
/* CODING CURATION STREAM END */


/* COMPACT CURATION TAGS START */
.curation-toolbar {
  max-height: min(34vh, 280px);
  overflow: auto;
}

.curation-toolbar .topic-row,
#topicDictionary {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-height: 44px;
  gap: 8px;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.curation-toolbar .topic-chip,
#topicDictionary .topic-chip {
  flex: 0 0 auto;
}

.stream-card-body .topic-row {
  flex-wrap: nowrap;
  overflow: hidden;
  max-height: 42px;
  mask-image: linear-gradient(90deg, #000 0%, #000 82%, transparent 100%);
}

.stream-card-body .topic-chip:nth-of-type(n+6) {
  display: none;
}

.stream-card-body .actions {
  flex-wrap: wrap;
}

@media (min-width: 900px) {
  .curation-toolbar {
    padding: 18px 22px;
  }

  .curation-toolbar h1 {
    font-size: clamp(28px, 3.4vw, 54px);
  }
}

@media (max-width: 720px) {
  .curation-toolbar {
    max-height: none;
  }

  .curation-toolbar .topic-row,
  #topicDictionary {
    max-height: 42px;
  }
}
/* COMPACT CURATION TAGS END */


/* SAFE TAG OVERFLOW FIX START */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.insta-feed-shell,
.section,
.card,
.curation-toolbar,
.candidate-stream,
.stream-candidate-card,
.stream-card-body {
  max-width: 100%;
  min-width: 0;
}

.curation-toolbar {
  width: 100%;
  overflow: hidden;
  max-height: none;
}

.curation-toolbar .section-head {
  align-items: flex-start;
  gap: 16px;
}

#topicDictionary,
.curation-toolbar .topic-row {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 76px;
  overflow: hidden;
  padding: 2px 0;
}

#topicDictionary .topic-chip:nth-of-type(n+17) {
  display: none;
}

.topic-chip {
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stream-card-body .topic-row {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  max-width: 100%;
  max-height: 38px;
  gap: 6px;
  mask-image: linear-gradient(90deg, #000 0%, #000 82%, transparent 100%);
}

.stream-card-body .topic-chip {
  flex: 0 1 auto;
  max-width: 132px;
}

.stream-card-body .topic-chip:nth-of-type(n+6) {
  display: none;
}

.stream-card-body h2,
.stream-card-body p,
.feed-detail-card,
.prose {
  overflow-wrap: anywhere;
  word-break: normal;
}

.stream-card-body .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
}

@media (max-width: 720px) {
  #topicDictionary,
  .curation-toolbar .topic-row {
    max-height: 70px;
  }

  #topicDictionary .topic-chip:nth-of-type(n+11) {
    display: none;
  }
}
/* SAFE TAG OVERFLOW FIX END */


/* BLOG POST READABILITY FIX START */
.article,
.article-rich-post {
  width: min(980px, calc(100% - 28px));
  margin-inline: auto;
  overflow: hidden;
}

.article h1,
.article-rich-post h1 {
  font-size: clamp(2.1rem, 6vw, 4.7rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
  max-width: 100%;
  overflow-wrap: anywhere;
  margin-bottom: 22px;
}

.article-thumb,
.article-hero-image {
  width: 100%;
  max-width: 100%;
  max-height: 58vh;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 22px;
  display: block;
}

.feed-detail-card {
  max-width: 100%;
  overflow: hidden;
}

.feed-detail-card .topic-row {
  display: flex;
  flex-wrap: wrap;
  max-height: 72px;
  overflow: hidden;
  gap: 7px;
}

.feed-detail-card .topic-chip:nth-of-type(n+9) {
  display: none;
}

.prose {
  max-width: 76ch;
  overflow-wrap: anywhere;
  line-height: 1.75;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
}

.prose h2,
.prose h3 {
  margin-top: 1.8em;
  line-height: 1.12;
}

.prose a {
  overflow-wrap: anywhere;
}

.curation-toolbar,
#topicDictionary {
  max-width: 100%;
  overflow-x: hidden;
}

#topicDictionary {
  display: flex;
  flex-wrap: wrap;
  max-height: 72px;
  gap: 6px;
}

#topicDictionary .topic-chip:nth-of-type(n+17) {
  display: none;
}

@media (max-width: 720px) {
  .article,
  .article-rich-post {
    width: min(100% - 18px, 100%);
  }

  .article h1,
  .article-rich-post h1 {
    font-size: clamp(2rem, 11vw, 3.4rem);
  }

  .article-thumb,
  .article-hero-image {
    max-height: 46vh;
    border-radius: 16px;
  }
}
/* BLOG POST READABILITY FIX END */

/* PUBLIC BLOG SPLIT START */
.public-blog-section {
  width: min(1120px, calc(100% - 28px));
  margin-inline: auto;
}

.public-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: clamp(18px, 3vw, 30px);
  align-items: stretch;
}

.public-post-card {
  overflow: hidden;
  padding: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}

.public-post-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 0;
  background: #05070b;
}

.public-post-body {
  padding: clamp(16px, 2.4vw, 24px);
  display: grid;
  gap: 10px;
  align-content: start;
}

.public-post-body h2,
.public-post-body h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.6vw, 2.25rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.public-post-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.public-post-tags {
  max-height: 38px;
  overflow: hidden;
}

.public-pagination {
  margin-top: 28px;
}

/* FLOAT_PUBLIC_PAGINATION_SVG_CLAMP_V1 */
.public-pagination nav {
  display: flex;
  justify-content: center;
  width: 100%;
}

.public-pagination svg,
.public-pagination .w-5,
.public-pagination .h-5 {
  width: 1rem !important;
  height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
  flex: 0 0 1rem;
}

.public-pagination a,
.public-pagination span {
  line-height: 1;
}

.public-pagination a[rel="prev"],
.public-pagination a[rel="next"],
.public-pagination span[aria-disabled="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.saved-posts-preview {
  margin-top: clamp(40px, 8vh, 90px);
}

.admin-curation-only .saved-posts-preview .public-blog-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

@media (max-width: 720px) {
  .public-blog-section {
    width: min(100% - 18px, 100%);
  }
}
/* PUBLIC BLOG SPLIT END */

/* ADMIN SNAP RESTORE + IMAGE FIX START */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.admin-snap-shell {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 16px 0 70vh;
}

.admin-snap-toolbar {
  position: sticky;
  top: 12px;
  z-index: 20;
  padding: clamp(16px, 2vw, 24px);
  backdrop-filter: blur(16px);
  max-width: 100%;
  overflow: hidden;
}

.admin-snap-toolbar h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: .98;
}

.admin-topic-drawer {
  margin-top: 12px;
}

.admin-topic-drawer summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
}

.admin-topic-drawer[open] #topicDictionary {
  display: flex;
}

#topicDictionary {
  display: none;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 92px;
  overflow: auto;
  padding-top: 10px;
}

#topicDictionary .topic-chip {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.candidate-stream {
  display: grid;
  gap: clamp(22px, 5vh, 44px);
  margin-top: 20px;
}

.stream-candidate-card {
  min-height: calc(100svh - 92px);
  display: grid;
  grid-template-rows: minmax(320px, 62svh) auto;
  overflow: hidden;
  padding: 0;
  border-radius: 28px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.stream-hero-img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  max-height: 68svh;
  object-fit: cover;
  object-position: center;
  display: block;
  border: 0;
  border-radius: 0;
  background: #05070b;
}

.stream-card-body {
  padding: clamp(16px, 3vw, 30px);
  display: grid;
  gap: 12px;
}

.stream-card-body h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.stream-card-body .topic-row {
  flex-wrap: nowrap;
  overflow: hidden;
  max-height: 38px;
}

.stream-card-body .topic-chip:nth-of-type(n+6) {
  display: none;
}

.stream-candidate-card.active-stream-card {
  border-color: rgba(127,178,255,.56);
  box-shadow: 0 34px 90px rgba(0,0,0,.38), 0 0 0 1px rgba(127,178,255,.22);
}

.stream-candidate-card.candidate-saved {
  border-color: rgba(154,211,165,.65);
}

.public-blog-section,
.article-rich-post {
  width: min(980px, calc(100% - 28px));
  margin-inline: auto;
}

.article-rich-post h1 {
  font-size: clamp(2.2rem, 6vw, 4.8rem);
  line-height: .98;
  letter-spacing: -.05em;
  overflow-wrap: anywhere;
}

.article-hero-image,
.article-thumb {
  width: 100%;
  max-width: 100%;
  max-height: 58vh;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 22px;
}

.public-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: clamp(18px, 3vw, 30px);
}

.public-post-card {
  overflow: hidden;
  padding: 0;
}

.public-post-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.public-post-body {
  padding: clamp(16px, 2.4vw, 24px);
}

.public-post-body h2 {
  font-size: clamp(1.35rem, 2.6vw, 2.25rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .admin-snap-shell,
  .public-blog-section,
  .article-rich-post {
    width: min(100% - 18px, 100%);
  }

  .admin-snap-toolbar {
    position: relative;
    top: auto;
  }

  .stream-candidate-card {
    min-height: 94svh;
    grid-template-rows: minmax(320px, 55svh) auto;
    border-radius: 20px;
  }
}
/* ADMIN SNAP RESTORE + IMAGE FIX END */

/* ADMIN DEDICATED SCROLL DECK FIX START */
.admin-scroll-deck-page {
  height: calc(100svh - 86px);
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
  overflow: hidden;
}

.admin-snap-toolbar {
  position: relative !important;
  top: auto !important;
  z-index: 20;
  max-height: none;
  overflow: hidden;
  padding: clamp(14px, 2vw, 20px);
}

.admin-snap-toolbar h1 {
  font-size: clamp(1.6rem, 3.4vw, 3.6rem);
  line-height: .98;
  margin: 0;
}

.admin-topic-drawer {
  margin-top: 8px;
}

.admin-topic-drawer summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 800;
}

.admin-topic-drawer:not([open]) #topicDictionary {
  display: none;
}

.admin-topic-drawer[open] #topicDictionary {
  display: flex;
}

#topicDictionary {
  flex-wrap: wrap;
  gap: 6px;
  max-height: 72px;
  overflow: auto;
  padding-top: 8px;
}

#topicDictionary .topic-chip {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.candidate-deck {
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  border-radius: 28px;
  outline: none;
}

.candidate-stream {
  display: grid;
  gap: 18px;
  margin: 0;
}

.stream-candidate-card {
  min-height: calc(100svh - 245px);
  display: grid;
  grid-template-rows: minmax(260px, 56svh) auto;
  overflow: hidden;
  padding: 0;
  border-radius: 28px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.stream-hero-img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  max-height: 60svh;
  object-fit: cover;
  object-position: center;
  display: block;
  border: 0;
  border-radius: 0;
  background: #05070b;
}

.stream-card-body {
  padding: clamp(16px, 2.5vw, 28px);
  display: grid;
  gap: 10px;
}

.stream-card-body h2 {
  margin: 0;
  font-size: clamp(1.7rem, 4.1vw, 4.1rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.stream-card-body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.stream-card-body .topic-row {
  flex-wrap: nowrap;
  overflow: hidden;
  max-height: 38px;
}

.stream-card-body .topic-chip:nth-of-type(n+6) {
  display: none;
}

.stream-candidate-card.active-stream-card {
  border-color: rgba(127,178,255,.56);
  box-shadow: 0 34px 90px rgba(0,0,0,.38), 0 0 0 1px rgba(127,178,255,.22);
}

.stream-candidate-card.candidate-saved {
  border-color: rgba(154,211,165,.65);
}

.candidate-loader-card {
  min-height: 70svh;
  display: grid;
  align-items: center;
  scroll-snap-align: start;
  padding: 18px 0;
}

.public-blog-section,
.article-rich-post {
  width: min(980px, calc(100% - 28px));
  margin-inline: auto;
}

@media (max-width: 720px) {
  .admin-scroll-deck-page {
    height: calc(100svh - 74px);
    width: min(100% - 14px, 100%);
    gap: 8px;
  }

  .admin-snap-toolbar {
    padding: 12px;
  }

  .admin-snap-toolbar h1 {
    font-size: clamp(1.45rem, 8vw, 2.4rem);
  }

  .candidate-deck {
    border-radius: 20px;
  }

  .stream-candidate-card {
    min-height: calc(100svh - 205px);
    grid-template-rows: minmax(260px, 50svh) auto;
    border-radius: 20px;
  }

  .stream-card-body {
    padding: 14px;
  }

  .stream-card-body h2 {
    font-size: clamp(1.6rem, 8vw, 2.55rem);
  }
}
/* ADMIN DEDICATED SCROLL DECK FIX END */

/* STREAM RESCUE FIX START */
.admin-scroll-deck-page {
  height: calc(100svh - 86px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
}

.candidate-deck {
  min-height: 420px !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-snap-type: y mandatory !important;
}

.candidate-stream {
  min-height: 1px;
}

.stream-candidate-card {
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

.candidate-loader-card {
  min-height: 55svh !important;
}
/* STREAM RESCUE FIX END */

/* FULLSIZE ADMIN CURATION UX START */
body:has(.admin-curation-viewport) {
  overflow: hidden;
}

.admin-curation-viewport {
  width: min(1440px, calc(100vw - 24px));
  height: calc(100svh - 92px);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.admin-curation-overlay {
  position: absolute;
  z-index: 30;
  top: 14px;
  left: 14px;
  right: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(151, 164, 214, .18);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(18,22,34,.88), rgba(18,22,34,.54));
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(0,0,0,.24);
  pointer-events: auto;
}

.admin-curation-overlay-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
}

.admin-curation-overlay h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 4.2rem);
  line-height: .94;
  letter-spacing: -.055em;
}

.admin-curation-overlay .footerNote {
  margin-top: 6px;
  max-width: 72ch;
}

.admin-topic-drawer {
  margin-top: 8px;
}

.admin-topic-drawer summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 800;
}

.admin-topic-drawer:not([open]) #topicDictionary {
  display: none;
}

.admin-topic-drawer[open] #topicDictionary {
  display: flex;
}

#topicDictionary {
  max-height: 82px;
  overflow: auto;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
}

#topicDictionary .topic-chip {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.candidate-deck {
  position: absolute;
  inset: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  border-radius: 30px;
  outline: none;
  background: rgba(0,0,0,.16);
}

.candidate-stream {
  display: grid;
  gap: 0;
  margin: 0;
}

.stream-candidate-card {
  height: calc(100svh - 92px);
  min-height: calc(100svh - 92px);
  display: grid;
  grid-template-rows: 58% 42%;
  overflow: hidden;
  padding: 0;
  border-radius: 30px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.stream-candidate-card:first-child {
  padding-top: 0;
}

.stream-hero-img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
  object-position: center;
  display: block;
  border: 0;
  border-radius: 0;
  background: #05070b;
}

.stream-card-body {
  padding: clamp(20px, 3vw, 44px);
  padding-top: clamp(24px, 4vw, 64px);
  display: grid;
  align-content: start;
  gap: 12px;
  background: linear-gradient(180deg, rgba(10,13,20,.88), rgba(10,13,20,.98));
  overflow: auto;
}

.stream-card-body h2 {
  margin: 0;
  font-size: clamp(2.2rem, 5.6vw, 6rem);
  line-height: .94;
  letter-spacing: -.055em;
  overflow-wrap: anywhere;
}

.stream-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.5;
  max-width: 82ch;
}

.stream-card-body .topic-row {
  flex-wrap: nowrap;
  overflow: hidden;
  max-height: 38px;
}

.stream-card-body .topic-chip:nth-of-type(n+6) {
  display: none;
}

.stream-card-body .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.stream-candidate-card.active-stream-card {
  border-color: rgba(127,178,255,.56);
  box-shadow: inset 0 0 0 1px rgba(127,178,255,.20);
}

.stream-candidate-card.candidate-saved {
  border-color: rgba(154,211,165,.65);
  box-shadow: inset 0 0 0 1px rgba(154,211,165,.34);
}

.candidate-loader-card {
  height: 82svh;
  min-height: 82svh;
  display: grid;
  place-items: center;
  scroll-snap-align: start;
  padding: 22px;
}

.public-blog-section,
.article-rich-post {
  width: min(980px, calc(100% - 28px));
  margin-inline: auto;
}

.public-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: clamp(18px, 3vw, 30px);
}

.public-post-card {
  overflow: hidden;
  padding: 0;
}

.public-post-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.public-post-body {
  padding: clamp(16px, 2.4vw, 24px);
}

.public-post-body h2 {
  font-size: clamp(1.35rem, 2.6vw, 2.25rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  body:has(.admin-curation-viewport) {
    overflow: hidden;
  }

  .admin-curation-viewport {
    width: calc(100vw - 10px);
    height: calc(100svh - 74px);
  }

  .admin-curation-overlay {
    top: 8px;
    left: 8px;
    right: 8px;
    padding: 10px 12px;
    border-radius: 18px;
  }

  .admin-curation-overlay h1 {
    font-size: clamp(1.45rem, 8vw, 2.55rem);
  }

  .admin-curation-overlay .footerNote {
    font-size: .82rem;
  }

  .admin-curation-overlay-top {
    gap: 8px;
  }

  .stream-candidate-card {
    height: calc(100svh - 74px);
    min-height: calc(100svh - 74px);
    grid-template-rows: 50% 50%;
    border-radius: 22px;
  }

  .stream-card-body {
    padding: 16px;
    padding-top: 22px;
  }

  .stream-card-body h2 {
    font-size: clamp(1.9rem, 10vw, 3.2rem);
  }
}
/* FULLSIZE ADMIN CURATION UX END */

/* ROUTE + FULLSCREEN ADMIN UX HARDENING START */

/* When admin curation is active, the deck becomes the app surface. */
body:has(.admin-curation-viewport) {
  overflow: hidden !important;
}

/* Do not make the admin scroll past the normal site nav to reach the card. */
body:has(.admin-curation-viewport) header,
body:has(.admin-curation-viewport) .site-header,
body:has(.admin-curation-viewport) .navbar,
body:has(.admin-curation-viewport) .topbar,
body:has(.admin-curation-viewport) .main-nav {
  display: none !important;
}

body:has(.admin-curation-viewport) main,
body:has(.admin-curation-viewport) .container,
body:has(.admin-curation-viewport) .page,
body:has(.admin-curation-viewport) .content {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.admin-curation-viewport {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100svh !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  background: #05070b;
}

/* Compact floating controller. It should not dominate the card. */
.admin-curation-overlay {
  position: absolute !important;
  z-index: 40 !important;
  top: 12px !important;
  left: 12px !important;
  right: 12px !important;
  max-height: 122px !important;
  overflow: hidden !important;
  padding: 12px 14px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(12,16,26,.82), rgba(12,16,26,.42)) !important;
  border: 1px solid rgba(151,164,214,.18) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.18) !important;
}

.admin-curation-overlay-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.admin-curation-overlay .eyebrow {
  margin: 0 0 4px !important;
  font-size: 11px !important;
}

.admin-curation-overlay h1 {
  margin: 0 !important;
  font-size: clamp(1.45rem, 2.7vw, 2.8rem) !important;
  line-height: .95 !important;
  letter-spacing: -.045em !important;
}

.admin-curation-overlay .footerNote {
  margin-top: 4px !important;
  font-size: 12px !important;
  max-width: 68ch !important;
}

.admin-curation-actions {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.admin-curation-actions .button {
  min-height: 40px !important;
  padding: 8px 14px !important;
  white-space: nowrap !important;
}

.admin-topic-drawer {
  margin-top: 7px !important;
}

.admin-topic-drawer summary {
  cursor: pointer !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  font-weight: 800 !important;
}

.admin-topic-drawer:not([open]) #topicDictionary {
  display: none !important;
}

.admin-topic-drawer[open] #topicDictionary {
  display: flex !important;
}

#topicDictionary {
  flex-wrap: wrap !important;
  gap: 5px !important;
  max-height: 52px !important;
  overflow: auto !important;
  padding-top: 6px !important;
}

#topicDictionary .topic-chip {
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Deck owns the entire viewport. */
.candidate-deck {
  position: absolute !important;
  inset: 0 !important;
  height: 100svh !important;
  width: 100vw !important;
  max-width: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  scroll-snap-type: y mandatory !important;
  scroll-behavior: smooth !important;
  border-radius: 0 !important;
  outline: none !important;
  background: #05070b !important;
}

.candidate-stream {
  display: grid !important;
  gap: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.stream-candidate-card {
  height: 100svh !important;
  min-height: 100svh !important;
  width: 100vw !important;
  max-width: none !important;
  display: grid !important;
  grid-template-rows: 60svh 40svh !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

.stream-hero-img {
  width: 100vw !important;
  height: 60svh !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #05070b !important;
}

.stream-card-body {
  min-height: 40svh !important;
  padding: clamp(18px, 3vw, 44px) !important;
  padding-top: clamp(22px, 4vw, 58px) !important;
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
  overflow-y: auto !important;
  background: linear-gradient(180deg, rgba(10,13,20,.92), rgba(10,13,20,1)) !important;
}

.stream-card-body h2 {
  margin: 0 !important;
  font-size: clamp(2.2rem, 5.6vw, 6.1rem) !important;
  line-height: .94 !important;
  letter-spacing: -.055em !important;
  overflow-wrap: anywhere !important;
}

.stream-card-body p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: clamp(.96rem, 1.15vw, 1.2rem) !important;
  line-height: 1.45 !important;
  max-width: 82ch !important;
}

.stream-card-body .topic-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  max-height: 36px !important;
  gap: 6px !important;
}

.stream-card-body .topic-chip:nth-of-type(n+5) {
  display: none !important;
}

.stream-card-body .actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 2px !important;
}

.stream-candidate-card.active-stream-card {
  box-shadow: inset 0 0 0 1px rgba(127,178,255,.22) !important;
}

.stream-candidate-card.candidate-saved {
  box-shadow: inset 0 0 0 2px rgba(154,211,165,.44) !important;
}

.candidate-loader-card {
  height: 100svh !important;
  min-height: 100svh !important;
  display: grid !important;
  place-items: center !important;
  scroll-snap-align: start !important;
  padding: 20px !important;
}

.public-blog-section,
.article-rich-post {
  width: min(980px, calc(100% - 28px)) !important;
  margin-inline: auto !important;
}

/* Mobile: hide the curation title pane almost entirely. Controls become a small bottom bar. */
@media (max-width: 720px) {
  .admin-curation-overlay {
    top: auto !important;
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    max-height: 74px !important;
    padding: 8px 10px !important;
    border-radius: 18px !important;
  }

  .admin-curation-overlay .eyebrow,
  .admin-curation-overlay h1,
  .admin-curation-overlay .footerNote,
  .admin-topic-drawer {
    display: none !important;
  }

  .admin-curation-overlay-top {
    display: flex !important;
    justify-content: flex-end !important;
  }

  .admin-curation-actions {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .admin-curation-actions .button {
    min-height: 42px !important;
    flex: 1 1 auto !important;
  }

  .stream-candidate-card {
    grid-template-rows: 54svh 46svh !important;
  }

  .stream-hero-img {
    height: 54svh !important;
  }

  .stream-card-body {
    min-height: 46svh !important;
    padding: 16px !important;
    padding-bottom: 86px !important;
  }

  .stream-card-body h2 {
    font-size: clamp(1.9rem, 10vw, 3.25rem) !important;
  }

  .stream-card-body p {
    font-size: .95rem !important;
  }

  .stream-card-body .topic-row {
    display: none !important;
  }
}
/* ROUTE + FULLSCREEN ADMIN UX HARDENING END */

/* MOBILE-FIRST CURATION INTEREST PANEL START */
body:has(.admin-curation-viewport) {
  overflow: hidden !important;
}

body:has(.admin-curation-viewport) header,
body:has(.admin-curation-viewport) .site-header,
body:has(.admin-curation-viewport) .navbar,
body:has(.admin-curation-viewport) .topbar,
body:has(.admin-curation-viewport) .main-nav {
  display: none !important;
}

body:has(.admin-curation-viewport) main,
body:has(.admin-curation-viewport) .container,
body:has(.admin-curation-viewport) .page,
body:has(.admin-curation-viewport) .content {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.admin-curation-viewport {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100svh !important;
  max-width: none !important;
  margin: 0 !important;
  z-index: 9999 !important;
  overflow: hidden !important;
  background: #05070b !important;
}

.admin-curation-topbar {
  position: absolute !important;
  z-index: 42 !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(151,164,214,.20) !important;
  border-radius: 18px !important;
  background: rgba(10,13,20,.70) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,.28) !important;
}

.admin-curation-title {
  min-width: 0 !important;
  display: grid !important;
  gap: 1px !important;
}

.admin-curation-title .eyebrow {
  margin: 0 !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
}

.admin-curation-title strong {
  font-size: 17px !important;
  line-height: 1 !important;
  color: var(--text) !important;
}

.admin-feed-status {
  font-size: 11px !important;
  color: var(--muted) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.admin-curation-actions {
  display: flex !important;
  gap: 7px !important;
}

.admin-curation-actions .button {
  min-height: 40px !important;
  padding: 8px 12px !important;
  white-space: nowrap !important;
}

.selected-interest-rail {
  position: absolute !important;
  z-index: 41 !important;
  left: 10px !important;
  right: 10px !important;
  top: 10px !important;
  display: flex !important;
  gap: 7px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 2px 8px !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  pointer-events: auto !important;
}

.selected-interest-rail::-webkit-scrollbar {
  display: none !important;
}

.selected-interest-rail .topic-chip {
  flex: 0 0 auto !important;
  max-width: 150px !important;
  background: rgba(10,13,20,.68) !important;
  backdrop-filter: blur(12px) !important;
}

.topic-chip.selected {
  border-color: rgba(154,211,255,.9) !important;
  background: rgba(127,178,255,.26) !important;
}

.interest-panel {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: none !important;
  align-items: flex-end !important;
  background: rgba(0,0,0,.52) !important;
  backdrop-filter: blur(6px) !important;
}

.interest-panel.open {
  display: flex !important;
}

.interest-panel-card {
  width: 100% !important;
  max-height: 82svh !important;
  overflow: auto !important;
  padding: 18px !important;
  border-radius: 24px 24px 0 0 !important;
  border: 1px solid rgba(151,164,214,.24) !important;
  background: rgba(13,17,28,.96) !important;
  box-shadow: 0 -30px 90px rgba(0,0,0,.42) !important;
}

.interest-panel-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 14px !important;
  align-items: flex-start !important;
}

.interest-panel-head h2 {
  margin: 0 !important;
  font-size: clamp(1.4rem, 6vw, 2.4rem) !important;
  line-height: 1 !important;
}

.interest-search {
  width: 100% !important;
  min-height: 46px !important;
  margin: 14px 0 !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(151,164,214,.26) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  font: inherit !important;
  outline: none !important;
}

.interest-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  gap: 8px !important;
}

.interest-grid .topic-chip {
  width: 100% !important;
  justify-content: flex-start !important;
  max-width: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.candidate-deck {
  position: absolute !important;
  inset: 0 !important;
  height: 100svh !important;
  width: 100vw !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  scroll-snap-type: y mandatory !important;
  scroll-behavior: smooth !important;
  border-radius: 0 !important;
  outline: none !important;
  background: #05070b !important;
}

.candidate-stream {
  display: grid !important;
  gap: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

.stream-candidate-card {
  height: 100svh !important;
  min-height: 100svh !important;
  width: 100vw !important;
  max-width: none !important;
  display: grid !important;
  grid-template-rows: 54svh 46svh !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

.stream-hero-img {
  width: 100vw !important;
  height: 54svh !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #05070b !important;
}

.stream-card-body {
  min-height: 46svh !important;
  padding: 16px !important;
  padding-bottom: 84px !important;
  display: grid !important;
  align-content: start !important;
  gap: 9px !important;
  overflow-y: auto !important;
  background: linear-gradient(180deg, rgba(10,13,20,.92), rgba(10,13,20,1)) !important;
}

.stream-card-body h2 {
  margin: 0 !important;
  font-size: clamp(1.8rem, 9vw, 3.25rem) !important;
  line-height: .96 !important;
  letter-spacing: -.045em !important;
  overflow-wrap: anywhere !important;
}

.stream-card-body p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: .95rem !important;
  line-height: 1.45 !important;
}

.stream-card-body .topic-row {
  display: none !important;
}

.stream-card-body .actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
  margin-top: 2px !important;
}

.stream-card-body .button {
  min-height: 40px !important;
}

.candidate-loader-card {
  height: 100svh !important;
  min-height: 100svh !important;
  display: grid !important;
  place-items: center !important;
  scroll-snap-align: start !important;
  padding: 20px !important;
}

.public-blog-section,
.article-rich-post {
  width: min(980px, calc(100% - 28px)) !important;
  margin-inline: auto !important;
}

@media (min-width: 800px) {
  .admin-curation-topbar {
    top: 14px !important;
    bottom: auto !important;
    left: 14px !important;
    right: 14px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 12px 16px !important;
  }

  .admin-curation-title strong {
    font-size: clamp(1.8rem, 3vw, 3.3rem) !important;
  }

  .admin-feed-status {
    font-size: 13px !important;
  }

  .selected-interest-rail {
    top: 104px !important;
    left: 18px !important;
    right: 18px !important;
    max-width: 720px !important;
  }

  .stream-candidate-card {
    grid-template-rows: 61svh 39svh !important;
  }

  .stream-hero-img {
    height: 61svh !important;
  }

  .stream-card-body {
    min-height: 39svh !important;
    padding: clamp(22px, 3vw, 44px) !important;
    padding-top: clamp(26px, 3vw, 48px) !important;
  }

  .stream-card-body h2 {
    font-size: clamp(2.5rem, 5.4vw, 6.1rem) !important;
  }

  .stream-card-body p {
    font-size: clamp(1rem, 1.1vw, 1.2rem) !important;
  }

  .stream-card-body .topic-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    max-height: 36px !important;
  }

  .stream-card-body .topic-chip:nth-of-type(n+5) {
    display: none !important;
  }

  .interest-panel {
    align-items: center !important;
    justify-content: center !important;
  }

  .interest-panel-card {
    width: min(900px, calc(100vw - 40px)) !important;
    max-height: min(760px, calc(100svh - 40px)) !important;
    border-radius: 28px !important;
  }
}
/* MOBILE-FIRST CURATION INTEREST PANEL END */

/* CONTAINED ADMIN CURATION LAYOUT START */

/* Undo prior fullscreen/admin overrides without editing old CSS. */
body:has(.admin-curation-page) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body:has(.admin-curation-page) header,
body:has(.admin-curation-page) .site-header,
body:has(.admin-curation-page) .navbar,
body:has(.admin-curation-page) .topbar,
body:has(.admin-curation-page) .main-nav {
  display: initial !important;
}

.admin-curation-page {
  width: 100% !important;
  min-height: auto !important;
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
  overflow: visible !important;
}

.admin-curation-wrap {
  width: min(1180px, calc(100% - 24px)) !important;
  margin: 0 auto !important;
  display: grid !important;
  gap: 14px !important;
}

.admin-curation-heading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  padding: clamp(16px, 2.4vw, 24px) !important;
  overflow: visible !important;
}

.admin-curation-heading h1 {
  margin: 0 !important;
  font-size: clamp(2.2rem, 5vw, 4.8rem) !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
}

.admin-curation-heading .footerNote {
  margin-top: 6px !important;
}

.admin-curation-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
}

.admin-curation-actions .button {
  min-height: 42px !important;
  white-space: nowrap !important;
}

.selected-interest-rail-contained {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 8px !important;
  padding: 10px !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch !important;
}

.selected-interest-rail-contained .topic-chip {
  flex: 0 0 auto !important;
  max-width: 170px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.topic-chip.selected {
  border-color: rgba(154,211,255,.9) !important;
  background: rgba(127,178,255,.26) !important;
}

.interest-panel-contained {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  background: rgba(0,0,0,.52) !important;
  backdrop-filter: blur(6px) !important;
}

.interest-panel-contained.open {
  display: flex !important;
}

.interest-panel-card-contained {
  width: min(920px, calc(100vw - 36px)) !important;
  max-height: min(780px, calc(100svh - 36px)) !important;
  overflow: auto !important;
  padding: clamp(16px, 2.4vw, 24px) !important;
}

.interest-panel-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 14px !important;
  align-items: flex-start !important;
}

.interest-panel-head h2 {
  margin: 0 !important;
  font-size: clamp(1.6rem, 3.4vw, 2.8rem) !important;
  line-height: 1 !important;
}

.interest-search {
  width: 100% !important;
  min-height: 46px !important;
  margin: 14px 0 !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(151,164,214,.26) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  font: inherit !important;
  outline: none !important;
}

.interest-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 8px !important;
}

.interest-grid .topic-chip {
  width: 100% !important;
  max-width: none !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.candidate-deck-contained {
  width: min(1050px, 100%) !important;
  height: clamp(620px, calc(100svh - 260px), 860px) !important;
  min-height: 520px !important;
  margin: 0 auto 40px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  scroll-snap-type: y mandatory !important;
  scroll-behavior: smooth !important;
  border-radius: 28px !important;
  border: 1px solid rgba(151,164,214,.22) !important;
  background: rgba(0,0,0,.18) !important;
}

.candidate-stream-contained {
  display: grid !important;
  gap: 0 !important;
  margin: 0 !important;
}

.candidate-deck-contained .stream-candidate-card {
  width: 100% !important;
  height: 100% !important;
  min-height: clamp(620px, calc(100svh - 260px), 860px) !important;
  max-width: none !important;
  display: grid !important;
  grid-template-rows: minmax(230px, 42%) minmax(0, 58%) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 28px !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

.candidate-deck-contained .stream-hero-img {
  width: 100% !important;
  height: 100% !important;
  min-height: 230px !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #05070b !important;
}

.candidate-deck-contained .stream-card-body {
  min-height: 0 !important;
  padding: clamp(18px, 3vw, 34px) !important;
  display: grid !important;
  align-content: start !important;
  gap: 10px !important;
  overflow-y: auto !important;
  background: linear-gradient(180deg, rgba(10,13,20,.92), rgba(10,13,20,1)) !important;
}

.candidate-deck-contained .stream-card-body h2 {
  margin: 0 !important;
  font-size: clamp(2rem, 4.5vw, 4.9rem) !important;
  line-height: .97 !important;
  letter-spacing: -.05em !important;
  overflow-wrap: anywhere !important;
}

.candidate-deck-contained .stream-card-body p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: clamp(.96rem, 1.1vw, 1.12rem) !important;
  line-height: 1.48 !important;
  max-width: 78ch !important;
}

.candidate-deck-contained .stream-card-body .topic-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  max-height: 36px !important;
  gap: 6px !important;
}

.candidate-deck-contained .stream-card-body .topic-chip:nth-of-type(n+6) {
  display: none !important;
}

.candidate-deck-contained .stream-card-body .actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
}

.candidate-loader-card-contained {
  min-height: clamp(620px, calc(100svh - 260px), 860px) !important;
  display: grid !important;
  place-items: center !important;
  scroll-snap-align: start !important;
  padding: 20px !important;
}

.public-blog-section,
.article-rich-post {
  width: min(980px, calc(100% - 28px)) !important;
  margin-inline: auto !important;
}

.public-blog-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)) !important;
  gap: clamp(18px, 3vw, 30px) !important;
}

.public-post-card {
  overflow: hidden !important;
  padding: 0 !important;
}

.public-post-img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  display: block !important;
}

.public-post-body {
  padding: clamp(16px, 2.4vw, 24px) !important;
}

.public-post-body h2 {
  font-size: clamp(1.35rem, 2.6vw, 2.25rem) !important;
  line-height: 1.05 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 720px) {
  .admin-curation-wrap {
    width: min(100% - 14px, 100%) !important;
    gap: 10px !important;
  }

  .admin-curation-heading {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 14px !important;
  }

  .admin-curation-heading h1 {
    font-size: clamp(2rem, 10vw, 3.1rem) !important;
  }

  .admin-curation-actions {
    justify-content: stretch !important;
  }

  .admin-curation-actions .button {
    flex: 1 1 auto !important;
  }

  .selected-interest-rail-contained {
    padding: 8px !important;
  }

  .candidate-deck-contained {
    height: calc(100svh - 260px) !important;
    min-height: 520px !important;
    border-radius: 20px !important;
  }

  .candidate-deck-contained .stream-candidate-card {
    min-height: calc(100svh - 260px) !important;
    grid-template-rows: minmax(190px, 36%) minmax(0, 64%) !important;
    border-radius: 20px !important;
  }

  .candidate-deck-contained .stream-hero-img {
    min-height: 190px !important;
  }

  .candidate-deck-contained .stream-card-body {
    padding: 14px !important;
  }

  .candidate-deck-contained .stream-card-body h2 {
    font-size: clamp(1.75rem, 8.8vw, 2.9rem) !important;
  }

  .candidate-deck-contained .stream-card-body .topic-row {
    display: none !important;
  }

  .interest-panel-contained {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .interest-panel-card-contained {
    width: 100% !important;
    max-height: 82svh !important;
    border-radius: 24px 24px 0 0 !important;
  }
}
/* CONTAINED ADMIN CURATION LAYOUT END */

/* REELS PHONE DECK UX START */

/*
  Goal:
  - Keep normal site nav visible.
  - Center a mobile/Reels-sized curation deck on desktop.
  - Fill the available viewport without making the user scroll the page to reach the card.
  - Make image smaller so title, excerpt, buttons, and status are visible inside one card.
*/

/* Undo earlier fullscreen takeover rules when the contained admin page exists. */
body:has(.admin-curation-page) {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

body:has(.admin-curation-page) header,
body:has(.admin-curation-page) .site-header,
body:has(.admin-curation-page) .navbar,
body:has(.admin-curation-page) .topbar,
body:has(.admin-curation-page) .main-nav {
  display: initial !important;
}

body:has(.admin-curation-page) main,
body:has(.admin-curation-page) .container,
body:has(.admin-curation-page) .page,
body:has(.admin-curation-page) .content {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Page becomes a fixed-height app panel below the normal nav. */
.admin-curation-page {
  width: 100% !important;
  height: calc(100svh - 96px) !important;
  min-height: 560px !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  padding: 8px 0 12px !important;
  background: transparent !important;
}

/* Phone-sized column. */
.admin-curation-wrap {
  width: min(460px, calc(100vw - 18px)) !important;
  height: 100% !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
}

/* Compact header: no giant pane. */
.admin-curation-heading {
  width: 100% !important;
  min-height: 0 !important;
  padding: 10px 12px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.admin-curation-heading .eyebrow {
  margin: 0 0 2px !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
}

.admin-curation-heading h1 {
  margin: 0 !important;
  font-size: clamp(1.35rem, 5.2vw, 2rem) !important;
  line-height: .95 !important;
  letter-spacing: -.035em !important;
}

.admin-curation-heading .footerNote {
  margin: 2px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

/* Compact actions; keep all buttons reachable. */
.admin-curation-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  justify-content: end !important;
  min-width: 92px !important;
}

.admin-curation-actions .button {
  min-height: 30px !important;
  padding: 5px 9px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
}

/* Full-width interest rail above the deck, not hidden in a pane. */
.selected-interest-rail-contained {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 6px !important;
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 18px !important;
}

.selected-interest-rail-contained::-webkit-scrollbar {
  display: none !important;
}

.selected-interest-rail-contained .topic-chip {
  flex: 0 0 auto !important;
  max-width: 138px !important;
  min-height: 28px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Deck fills remaining visible height only. No page scroll needed. */
.candidate-deck-contained {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  scroll-snap-type: y mandatory !important;
  scroll-behavior: smooth !important;
  border-radius: 22px !important;
  border: 1px solid rgba(151,164,214,.24) !important;
  background: rgba(0,0,0,.18) !important;
}

/* Each candidate is exactly one deck viewport. */
.candidate-deck-contained .stream-candidate-card {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: 31% 69% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}

/* Image is now a header band, not the whole experience. */
.candidate-deck-contained .stream-hero-img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #05070b !important;
}

/* Text area is the main content. No internal scroll unless article title is extreme. */
.candidate-deck-contained .stream-card-body {
  min-height: 0 !important;
  height: 100% !important;
  padding: 13px !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
  align-content: start !important;
  gap: 7px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(10,13,20,.94), rgba(10,13,20,1)) !important;
}

.candidate-deck-contained .stream-card-body .eyebrow {
  margin: 0 !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  line-height: 1.2 !important;
}

/* Title fits inside the card. */
.candidate-deck-contained .stream-card-body h2 {
  margin: 0 !important;
  font-size: clamp(1.55rem, 7.4vw, 2.25rem) !important;
  line-height: .96 !important;
  letter-spacing: -.045em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
}

/* Excerpt gets the available middle space, clamped rather than forcing scroll. */
.candidate-deck-contained .stream-card-body p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: .9rem !important;
  line-height: 1.38 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 6 !important;
  -webkit-box-orient: vertical !important;
}

/* Keep tags minimal inside card. Interest rail handles topics. */
.candidate-deck-contained .stream-card-body .topic-row {
  display: none !important;
}

/* Buttons are always visible at the bottom. */
.candidate-deck-contained .stream-card-body .actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 7px !important;
  margin: 0 !important;
  align-self: end !important;
}

.candidate-deck-contained .stream-card-body .actions .button,
.candidate-deck-contained .stream-card-body .actions button,
.candidate-deck-contained .stream-card-body .actions a {
  min-height: 36px !important;
  padding: 7px 8px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  text-align: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
}

.candidate-deck-contained .stream-candidate-card.active-stream-card {
  box-shadow: inset 0 0 0 1px rgba(127,178,255,.26) !important;
}

.candidate-deck-contained .stream-candidate-card.candidate-saved {
  box-shadow: inset 0 0 0 2px rgba(154,211,165,.48) !important;
}

/* Loader should also be one deck viewport. */
.candidate-loader-card-contained {
  height: 100% !important;
  min-height: 100% !important;
  display: grid !important;
  place-items: center !important;
  scroll-snap-align: start !important;
  padding: 16px !important;
}

/* Interest modal remains available but not part of the deck layout. */
.interest-panel-contained {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: none !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 !important;
  background: rgba(0,0,0,.54) !important;
  backdrop-filter: blur(6px) !important;
}

.interest-panel-contained.open {
  display: flex !important;
}

.interest-panel-card-contained {
  width: min(560px, 100vw) !important;
  max-height: 82svh !important;
  overflow: auto !important;
  padding: 16px !important;
  border-radius: 24px 24px 0 0 !important;
  border: 1px solid rgba(151,164,214,.24) !important;
  background: rgba(13,17,28,.96) !important;
}

.interest-panel-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

.interest-panel-head h2 {
  margin: 0 !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
}

.interest-search {
  width: 100% !important;
  min-height: 44px !important;
  margin: 12px 0 !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(151,164,214,.26) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  font: inherit !important;
  outline: none !important;
}

.interest-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)) !important;
  gap: 8px !important;
}

.interest-grid .topic-chip {
  width: 100% !important;
  max-width: none !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Desktop: still phone-like, just centered with a little more breathing room. */
@media (min-width: 760px) {
  .admin-curation-page {
    height: calc(100svh - 108px) !important;
    min-height: 650px !important;
    padding: 10px 0 14px !important;
  }

  .admin-curation-wrap {
    width: min(480px, calc(100vw - 24px)) !important;
  }

  .candidate-deck-contained .stream-card-body h2 {
    font-size: clamp(1.75rem, 2.15vw, 2.45rem) !important;
    -webkit-line-clamp: 4 !important;
  }

  .candidate-deck-contained .stream-card-body p {
    font-size: .92rem !important;
    -webkit-line-clamp: 7 !important;
  }
}

/* Very short screens: reduce chrome and image further so controls stay visible. */
@media (max-height: 720px) {
  .admin-curation-page {
    height: calc(100svh - 76px) !important;
    min-height: 520px !important;
  }

  .admin-curation-heading {
    padding: 8px 10px !important;
  }

  .admin-curation-heading h1 {
    font-size: 1.3rem !important;
  }

  .admin-curation-heading .eyebrow {
    display: none !important;
  }

  .selected-interest-rail-contained {
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 4px !important;
  }

  .candidate-deck-contained .stream-candidate-card {
    grid-template-rows: 26% 74% !important;
  }

  .candidate-deck-contained .stream-card-body h2 {
    font-size: 1.42rem !important;
    -webkit-line-clamp: 3 !important;
  }

  .candidate-deck-contained .stream-card-body p {
    font-size: .82rem !important;
    -webkit-line-clamp: 5 !important;
  }
}

/* Public pages remain normal. */
.public-blog-section,
.article-rich-post {
  width: min(980px, calc(100% - 28px)) !important;
  margin-inline: auto !important;
}

/* REELS PHONE DECK UX END */

/* RESPONSIVE ADMIN DECK WIDTH FIX START */

/*
  This fixes the previous phone-only lock:
  - mobile: nearly full viewport width
  - tablet: wider centered deck
  - desktop: wide centered dashboard deck
  - image stays smaller than text area
*/

body:has(.admin-curation-page) {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

/* Keep normal nav visible, but make the admin tool fill remaining visible space. */
.admin-curation-page {
  width: 100% !important;
  height: calc(100svh - 104px) !important;
  min-height: 560px !important;
  padding: 8px 0 10px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

/* Mobile default: full usable width. */
.admin-curation-wrap {
  width: min(100% - 12px, 520px) !important;
  height: 100% !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 8px !important;
  overflow: hidden !important;
}

/* Header stays compact. */
.admin-curation-heading {
  padding: 9px 11px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.admin-curation-heading h1 {
  margin: 0 !important;
  font-size: clamp(1.45rem, 5vw, 2.35rem) !important;
  line-height: .95 !important;
  letter-spacing: -.04em !important;
}

.admin-curation-heading .footerNote {
  font-size: 11px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.admin-curation-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  min-width: 90px !important;
}

.admin-curation-actions .button {
  min-height: 30px !important;
  padding: 5px 9px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}

/* Interest pills get a full-width rail above the deck. */
.selected-interest-rail-contained {
  width: 100% !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 6px !important;
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch !important;
}

.selected-interest-rail-contained .topic-chip {
  flex: 0 0 auto !important;
  max-width: 150px !important;
  min-height: 28px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Deck fills remaining tool height. */
.candidate-deck-contained {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-snap-type: y mandatory !important;
  scroll-behavior: smooth !important;
  overscroll-behavior-y: contain !important;
  border-radius: 22px !important;
}

/* Every candidate is exactly one deck viewport, not page-height. */
.candidate-deck-contained .stream-candidate-card {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: 30% 70% !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  border-radius: 22px !important;
}

.candidate-deck-contained .stream-hero-img {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.candidate-deck-contained .stream-card-body {
  height: 100% !important;
  min-height: 0 !important;
  padding: 14px !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
  gap: 8px !important;
  overflow: hidden !important;
}

.candidate-deck-contained .stream-card-body h2 {
  margin: 0 !important;
  font-size: clamp(1.55rem, 7vw, 2.55rem) !important;
  line-height: .97 !important;
  letter-spacing: -.045em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
}

.candidate-deck-contained .stream-card-body p {
  margin: 0 !important;
  font-size: .93rem !important;
  line-height: 1.42 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 7 !important;
  -webkit-box-orient: vertical !important;
}

.candidate-deck-contained .stream-card-body .topic-row {
  display: none !important;
}

.candidate-deck-contained .stream-card-body .actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 7px !important;
  align-self: end !important;
}

.candidate-deck-contained .stream-card-body .actions .button,
.candidate-deck-contained .stream-card-body .actions button,
.candidate-deck-contained .stream-card-body .actions a {
  min-height: 36px !important;
  padding: 7px 8px !important;
  font-size: 12px !important;
  justify-content: center !important;
  text-align: center !important;
  border-radius: 999px !important;
}

.candidate-loader-card-contained {
  height: 100% !important;
  min-height: 100% !important;
  display: grid !important;
  place-items: center !important;
  scroll-snap-align: start !important;
}

/* Tablet: stop feeling cramped. */
@media (min-width: 700px) {
  .admin-curation-wrap {
    width: min(760px, calc(100vw - 32px)) !important;
  }

  .admin-curation-heading {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .admin-curation-actions {
    grid-template-columns: auto auto auto !important;
    min-width: 0 !important;
  }

  .candidate-deck-contained .stream-candidate-card {
    grid-template-rows: 30% 70% !important;
  }

  .candidate-deck-contained .stream-card-body h2 {
    font-size: clamp(1.9rem, 4.6vw, 3.8rem) !important;
    -webkit-line-clamp: 3 !important;
  }

  .candidate-deck-contained .stream-card-body p {
    font-size: 1rem !important;
    -webkit-line-clamp: 7 !important;
  }
}

/* Desktop: wide responsive deck, not phone width. */
@media (min-width: 1024px) {
  .admin-curation-page {
    height: calc(100svh - 112px) !important;
    min-height: 680px !important;
    padding: 10px 0 14px !important;
  }

  .admin-curation-wrap {
    width: min(1120px, calc(100vw - 80px)) !important;
    max-width: 1120px !important;
    gap: 10px !important;
  }

  .admin-curation-heading {
    padding: 12px 16px !important;
  }

  .admin-curation-heading h1 {
    font-size: clamp(2rem, 3.2vw, 3.6rem) !important;
  }

  .selected-interest-rail-contained {
    min-height: 44px !important;
    max-height: 44px !important;
  }

  .candidate-deck-contained {
    border-radius: 28px !important;
  }

  .candidate-deck-contained .stream-candidate-card {
    border-radius: 28px !important;
    grid-template-rows: 34% 66% !important;
  }

  .candidate-deck-contained .stream-card-body {
    padding: clamp(20px, 2.3vw, 34px) !important;
  }

  .candidate-deck-contained .stream-card-body h2 {
    font-size: clamp(2.4rem, 3.8vw, 5rem) !important;
    -webkit-line-clamp: 3 !important;
  }

  .candidate-deck-contained .stream-card-body p {
    font-size: clamp(1rem, 1vw, 1.14rem) !important;
    max-width: 86ch !important;
    -webkit-line-clamp: 7 !important;
  }

  .candidate-deck-contained .stream-card-body .topic-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    max-height: 34px !important;
  }

  .candidate-deck-contained .stream-card-body .topic-chip:nth-of-type(n+6) {
    display: none !important;
  }
}

/* Large desktop: use the space, but stay centered/readable. */
@media (min-width: 1440px) {
  .admin-curation-wrap {
    width: min(1240px, calc(100vw - 140px)) !important;
    max-width: 1240px !important;
  }

  .candidate-deck-contained .stream-candidate-card {
    grid-template-rows: 32% 68% !important;
  }

  .candidate-deck-contained .stream-card-body h2 {
    font-size: clamp(2.7rem, 3.4vw, 5.4rem) !important;
  }
}

/* Short desktop screens: reduce chrome and image, preserve buttons/text. */
@media (max-height: 760px) {
  .admin-curation-page {
    height: calc(100svh - 84px) !important;
    min-height: 540px !important;
    padding: 6px 0 8px !important;
  }

  .admin-curation-heading {
    padding: 8px 10px !important;
  }

  .admin-curation-heading .eyebrow {
    display: none !important;
  }

  .admin-curation-heading h1 {
    font-size: 1.45rem !important;
  }

  .selected-interest-rail-contained {
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 4px !important;
  }

  .candidate-deck-contained .stream-candidate-card {
    grid-template-rows: 25% 75% !important;
  }

  .candidate-deck-contained .stream-card-body {
    padding: 12px !important;
  }

  .candidate-deck-contained .stream-card-body h2 {
    font-size: clamp(1.45rem, 3vw, 2.8rem) !important;
    -webkit-line-clamp: 3 !important;
  }

  .candidate-deck-contained .stream-card-body p {
    font-size: .84rem !important;
    -webkit-line-clamp: 5 !important;
  }
}

/* RESPONSIVE ADMIN DECK WIDTH FIX END */

/* TRUE MOBILE VIEWPORT SWIPE DECK START */

/*
  Final admin curation model:
  - Admin curation owns the viewport.
  - Main navigation moves into drawer.
  - No header/pills above the card in document flow.
  - One article fills one viewport.
  - Swipe/scroll moves exactly one article.
  - Mobile first, desktop centers a phone/progressive panel.
*/

html:has(.ig-curation-app),
body:has(.ig-curation-app) {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

body:has(.ig-curation-app) header,
body:has(.ig-curation-app) .site-header,
body:has(.ig-curation-app) .navbar,
body:has(.ig-curation-app) .topbar,
body:has(.ig-curation-app) .main-nav,
body:has(.ig-curation-app) footer {
  display: none !important;
}

body:has(.ig-curation-app) main,
body:has(.ig-curation-app) .container,
body:has(.ig-curation-app) .page,
body:has(.ig-curation-app) .content {
  width: 100% !important;
  max-width: none !important;
  height: 100svh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.ig-curation-app {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  width: 100vw !important;
  height: 100svh !important;
  overflow: hidden !important;
  background: #05070b !important;
}

/* Desktop gets a centered mobile-like viewport, mobile gets full width. */
.ig-candidate-deck {
  position: absolute !important;
  inset: 0 !important;
  width: min(100vw, 540px) !important;
  height: 100svh !important;
  margin: 0 auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  scroll-snap-type: y mandatory !important;
  scroll-behavior: smooth !important;
  background: #05070b !important;
  outline: none !important;
  border-left: 1px solid rgba(151,164,214,.18) !important;
  border-right: 1px solid rgba(151,164,214,.18) !important;
}

.ig-candidate-stream {
  display: grid !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* One article equals one viewport. */
.ig-candidate-deck .stream-candidate-card {
  width: 100% !important;
  height: 100svh !important;
  min-height: 100svh !important;
  max-height: 100svh !important;
  display: grid !important;
  grid-template-rows: 30svh 70svh !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  border: 0 !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  background: #05070b !important;
}

.ig-candidate-deck .stream-hero-img {
  width: 100% !important;
  height: 30svh !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #05070b !important;
}

.ig-candidate-deck .stream-card-body {
  width: 100% !important;
  height: 70svh !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
  gap: 8px !important;
  padding: 14px !important;
  padding-bottom: 82px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, rgba(10,13,20,.95), rgba(10,13,20,1)) !important;
}

.ig-candidate-deck .stream-card-body .eyebrow {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  letter-spacing: .14em !important;
}

.ig-candidate-deck .stream-card-body h2 {
  margin: 0 !important;
  font-size: clamp(1.65rem, 8.6vw, 2.65rem) !important;
  line-height: .96 !important;
  letter-spacing: -.045em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
}

.ig-candidate-deck .stream-card-body p {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: .92rem !important;
  line-height: 1.4 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 7 !important;
  -webkit-box-orient: vertical !important;
}

.ig-candidate-deck .stream-card-body .topic-row {
  display: none !important;
}

.ig-candidate-deck .stream-card-body .actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 7px !important;
  align-self: end !important;
  margin: 0 !important;
}

.ig-candidate-deck .stream-card-body .actions .button,
.ig-candidate-deck .stream-card-body .actions button,
.ig-candidate-deck .stream-card-body .actions a {
  min-height: 38px !important;
  padding: 7px 8px !important;
  font-size: 12px !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
}

.ig-candidate-deck .stream-candidate-card.active-stream-card {
  box-shadow: inset 0 0 0 1px rgba(127,178,255,.25) !important;
}

.ig-candidate-deck .stream-candidate-card.candidate-saved {
  box-shadow: inset 0 0 0 2px rgba(154,211,165,.55) !important;
}

.ig-loader-card {
  width: 100% !important;
  height: 100svh !important;
  min-height: 100svh !important;
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
  scroll-snap-align: start !important;
  background: #05070b !important;
}

.ig-loader-inner {
  text-align: center !important;
  padding: 20px !important;
  border: 1px solid rgba(151,164,214,.22) !important;
  border-radius: 22px !important;
}

/* Floating controls do not consume layout space. */
.ig-top-control {
  position: fixed !important;
  z-index: 10020 !important;
  left: 50% !important;
  bottom: 10px !important;
  transform: translateX(-50%) !important;
  width: min(calc(100vw - 20px), 520px) !important;
  min-height: 58px !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 72px !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(151,164,214,.22) !important;
  background: rgba(8,11,18,.72) !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 20px 70px rgba(0,0,0,.35) !important;
  pointer-events: auto !important;
}

.ig-icon-btn,
.ig-next-btn {
  min-height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(151,164,214,.22) !important;
  background: rgba(255,255,255,.08) !important;
  color: var(--text) !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.ig-next-btn {
  background: linear-gradient(135deg, #8fb7ff, #b198ff) !important;
  color: #05070b !important;
}

.ig-status-pill {
  min-width: 0 !important;
  display: grid !important;
  gap: 1px !important;
  color: var(--text) !important;
}

.ig-status-pill span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 900 !important;
  font-size: 13px !important;
}

.ig-status-pill small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--muted) !important;
  font-size: 11px !important;
}

/* Quick topic rail floats near top but does not push card down. */
.ig-interest-rail {
  position: fixed !important;
  z-index: 10010 !important;
  top: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(calc(100vw - 16px), 520px) !important;
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px !important;
  scrollbar-width: none !important;
  pointer-events: auto !important;
}

.ig-interest-rail::-webkit-scrollbar {
  display: none !important;
}

.ig-interest-rail .topic-chip {
  flex: 0 0 auto !important;
  max-width: 136px !important;
  min-height: 28px !important;
  padding: 4px 8px !important;
  font-size: 11px !important;
  background: rgba(8,11,18,.68) !important;
  backdrop-filter: blur(12px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.topic-chip.selected {
  border-color: rgba(154,211,255,.9) !important;
  background: rgba(127,178,255,.28) !important;
}

/* Drawer owns navigation and full interest list. */
.ig-drawer-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10030 !important;
  display: none !important;
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(4px) !important;
}

.ig-drawer-backdrop.open {
  display: block !important;
}

.ig-nav-drawer {
  position: fixed !important;
  z-index: 10040 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: min(88vw, 380px) !important;
  transform: translateX(-105%) !important;
  transition: transform .22s ease !important;
  overflow-y: auto !important;
  padding: 16px !important;
  background: rgba(13,17,28,.98) !important;
  border-right: 1px solid rgba(151,164,214,.24) !important;
  box-shadow: 30px 0 90px rgba(0,0,0,.42) !important;
}

.ig-nav-drawer.open {
  transform: translateX(0) !important;
}

.ig-drawer-head {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  align-items: flex-start !important;
  margin-bottom: 14px !important;
}

.ig-drawer-head h2 {
  margin: 0 !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
}

.ig-drawer-nav {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
}

.ig-drawer-section {
  display: grid !important;
  gap: 10px !important;
}

.ig-interest-search {
  width: 100% !important;
  min-height: 44px !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(151,164,214,.26) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  font: inherit !important;
  outline: none !important;
}

.ig-interest-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
}

.ig-interest-grid .topic-chip {
  width: 100% !important;
  max-width: none !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Desktop can be a little wider, but still one focused reel. */
@media (min-width: 900px) {
  .ig-candidate-deck,
  .ig-top-control,
  .ig-interest-rail {
    width: min(56vw, 760px) !important;
  }

  .ig-candidate-deck .stream-candidate-card {
    grid-template-rows: 28svh 72svh !important;
  }

  .ig-candidate-deck .stream-hero-img {
    height: 28svh !important;
  }

  .ig-candidate-deck .stream-card-body {
    height: 72svh !important;
    padding: 20px !important;
    padding-bottom: 88px !important;
  }

  .ig-candidate-deck .stream-card-body h2 {
    font-size: clamp(2.1rem, 3.5vw, 4.4rem) !important;
    -webkit-line-clamp: 3 !important;
  }

  .ig-candidate-deck .stream-card-body p {
    font-size: 1rem !important;
    -webkit-line-clamp: 8 !important;
  }
}

/* Very short screens prioritize text and buttons even more. */
@media (max-height: 720px) {
  .ig-candidate-deck .stream-candidate-card {
    grid-template-rows: 24svh 76svh !important;
  }

  .ig-candidate-deck .stream-hero-img {
    height: 24svh !important;
  }

  .ig-candidate-deck .stream-card-body {
    height: 76svh !important;
    gap: 6px !important;
  }

  .ig-candidate-deck .stream-card-body h2 {
    font-size: clamp(1.45rem, 7vw, 2.15rem) !important;
    -webkit-line-clamp: 3 !important;
  }

  .ig-candidate-deck .stream-card-body p {
    font-size: .84rem !important;
    -webkit-line-clamp: 5 !important;
  }
}

/* Public blog remains normal. */
.public-blog-section,
.article-rich-post {
  width: min(980px, calc(100% - 28px)) !important;
  margin-inline: auto !important;
}

/* TRUE MOBILE VIEWPORT SWIPE DECK END */

/* TOPIC RELEVANCE + DRAWER/DESKTOP LAYOUT FIX START */

/* Desktop should not look broken/narrow, but mobile still gets one article per swipe. */
@media (min-width: 900px) {
  .ig-candidate-deck,
  .ig-top-control,
  .ig-interest-rail {
    width: min(82vw, 980px) !important;
  }

  .ig-candidate-deck .stream-candidate-card {
    grid-template-rows: 30svh 70svh !important;
  }

  .ig-candidate-deck .stream-hero-img {
    height: 30svh !important;
  }

  .ig-candidate-deck .stream-card-body {
    height: 70svh !important;
    padding: clamp(20px, 2.4vw, 34px) !important;
    padding-bottom: 92px !important;
  }

  .ig-candidate-deck .stream-card-body h2 {
    font-size: clamp(2.2rem, 3.6vw, 5rem) !important;
    line-height: .96 !important;
    -webkit-line-clamp: 3 !important;
  }

  .ig-candidate-deck .stream-card-body p {
    font-size: clamp(1rem, 1.05vw, 1.14rem) !important;
    line-height: 1.46 !important;
    max-width: 90ch !important;
    -webkit-line-clamp: 8 !important;
  }

  .ig-candidate-deck .stream-card-body .actions {
    max-width: 820px !important;
  }
}

@media (min-width: 1400px) {
  .ig-candidate-deck,
  .ig-top-control,
  .ig-interest-rail {
    width: min(72vw, 1120px) !important;
  }
}

/* Drawer should be a usable panel, not a tiny internal overflow trap. */
.ig-nav-drawer {
  width: min(96vw, 520px) !important;
  max-width: 520px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 18px !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 14px !important;
}

.ig-drawer-head {
  margin-bottom: 0 !important;
}

.ig-drawer-nav {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}

.ig-drawer-section {
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: 10px !important;
  overflow: visible !important;
}

.ig-interest-search {
  width: 100% !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

.ig-interest-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  gap: 8px !important;
  overflow: visible !important;
  max-height: none !important;
  padding-bottom: 32px !important;
}

.ig-interest-grid .topic-chip {
  width: auto !important;
  max-width: 220px !important;
  min-height: 32px !important;
  flex: 0 1 auto !important;
  justify-content: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* The quick rail across the top should not obscure too much of the image. */
.ig-interest-rail {
  top: 8px !important;
  max-height: 34px !important;
  padding: 1px 2px 4px !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%) !important;
}

.ig-interest-rail .topic-chip {
  min-height: 26px !important;
  font-size: 10px !important;
  padding: 3px 7px !important;
}

/* Keep the bottom control usable but not huge. */
.ig-top-control {
  min-height: 54px !important;
  bottom: 10px !important;
}

/* Mobile drawer becomes full-screen-ish and all pills are reachable by the drawer scroll, not pill-grid scroll. */
@media (max-width: 720px) {
  .ig-nav-drawer {
    width: 100vw !important;
    max-width: none !important;
    padding: 16px !important;
  }

  .ig-drawer-nav {
    grid-template-columns: 1fr 1fr !important;
  }

  .ig-interest-grid {
    gap: 7px !important;
  }

  .ig-interest-grid .topic-chip {
    max-width: calc(50vw - 24px) !important;
  }

  .ig-candidate-deck .stream-candidate-card {
    grid-template-rows: 28svh 72svh !important;
  }

  .ig-candidate-deck .stream-hero-img {
    height: 28svh !important;
  }

  .ig-candidate-deck .stream-card-body {
    height: 72svh !important;
  }
}

/* Very short desktop: prevent browser chrome from making the body unusable. */
@media (max-height: 760px) {
  .ig-candidate-deck .stream-candidate-card {
    grid-template-rows: 24svh 76svh !important;
  }

  .ig-candidate-deck .stream-hero-img {
    height: 24svh !important;
  }

  .ig-candidate-deck .stream-card-body {
    height: 76svh !important;
    padding-bottom: 78px !important;
  }

  .ig-candidate-deck .stream-card-body h2 {
    font-size: clamp(1.45rem, 3vw, 3.2rem) !important;
    -webkit-line-clamp: 3 !important;
  }

  .ig-candidate-deck .stream-card-body p {
    font-size: .86rem !important;
    -webkit-line-clamp: 5 !important;
  }
}

/* TOPIC RELEVANCE + DRAWER/DESKTOP LAYOUT FIX END */

/* STRICT INTEREST FEED + KEYWORD/DRAWER FIX START */

/* Drawer scrolls as one whole surface. Interest pills no longer live in a tiny clipped grid. */
.ig-nav-drawer {
  height: 100svh !important;
  max-height: 100svh !important;
  width: min(100vw, 560px) !important;
  max-width: 560px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
  padding: 18px !important;
}

.ig-drawer-head,
.ig-drawer-nav,
.ig-drawer-section {
  display: block !important;
  overflow: visible !important;
  max-height: none !important;
}

.ig-drawer-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.ig-drawer-nav {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 18px !important;
}

.ig-interest-search {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
  width: 100% !important;
  margin: 10px 0 12px !important;
}

.ig-interest-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;
  gap: 8px !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding-bottom: 52px !important;
}

.ig-interest-grid .topic-chip,
.ig-interest-grid .interest-chip {
  width: auto !important;
  max-width: 100% !important;
  min-height: 34px !important;
  flex: 0 1 auto !important;
  justify-content: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Desktop width should be usable, not phone-only. */
@media (min-width: 900px) {
  .ig-candidate-deck,
  .ig-top-control,
  .ig-interest-rail {
    width: min(84vw, 1080px) !important;
  }
}

@media (min-width: 1450px) {
  .ig-candidate-deck,
  .ig-top-control,
  .ig-interest-rail {
    width: min(74vw, 1220px) !important;
  }
}

/* Show article keywords again inside each article. */
.ig-candidate-deck .stream-card-body .candidate-keyword-row,
.ig-candidate-deck .stream-card-body .topic-row.candidate-keyword-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-height: 68px !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.ig-candidate-deck .stream-card-body .candidate-keyword-chip {
  display: inline-flex !important;
  max-width: 160px !important;
  min-height: 26px !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ig-candidate-deck .stream-card-body .candidate-keyword-chip:nth-of-type(n+9) {
  display: none !important;
}

.candidate-keyword-empty {
  color: var(--muted) !important;
  font-size: 12px !important;
}

/* Give text a little less clamp so keywords/buttons fit. */
.ig-candidate-deck .stream-card-body h2 {
  -webkit-line-clamp: 3 !important;
}

.ig-candidate-deck .stream-card-body p {
  -webkit-line-clamp: 5 !important;
}

/* When a topic is selected, quick rail chips must remain clickable and readable. */
.ig-interest-rail {
  max-height: 36px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

.ig-interest-rail .topic-chip {
  opacity: .92 !important;
}

.ig-interest-rail .topic-chip.selected {
  opacity: 1 !important;
  border-color: rgba(154,211,255,.95) !important;
  background: rgba(127,178,255,.32) !important;
}

/* Mobile: drawer gets the full width; no inner overflow. */
@media (max-width: 720px) {
  .ig-nav-drawer {
    width: 100vw !important;
    max-width: none !important;
  }

  .ig-interest-grid .topic-chip,
  .ig-interest-grid .interest-chip {
    max-width: calc(50vw - 24px) !important;
  }

  .ig-candidate-deck .stream-card-body .candidate-keyword-row {
    max-height: 56px !important;
  }

  .ig-candidate-deck .stream-card-body .candidate-keyword-chip:nth-of-type(n+7) {
    display: none !important;
  }
}

/* STRICT INTEREST FEED + KEYWORD/DRAWER FIX END */

/* ADMIN 2FA START */
.twofa-section {
  width: min(920px, calc(100% - 24px));
  margin-inline: auto;
}

.twofa-card {
  display: grid;
  gap: 18px;
}

.twofa-card h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: .98;
}

.twofa-status {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(154,211,165,.36);
  background: rgba(154,211,165,.12);
}

.twofa-qr-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.twofa-qr {
  width: min(260px, 70vw);
  height: auto;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
}

.twofa-secret,
.twofa-code-grid code {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  overflow-wrap: anywhere;
}

.twofa-code-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
}

.twofa-form {
  display: grid;
  gap: 10px;
}

.twofa-form input {
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(151,164,214,.28);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font: inherit;
}

.form-error {
  color: #ffb5b5;
}

@media (max-width: 720px) {
  .twofa-qr-wrap {
    grid-template-columns: 1fr;
  }
}
/* ADMIN 2FA END */

/* ADMIN 2FA SAFE START */
.twofa-section {
  width: min(920px, calc(100% - 24px));
  margin-inline: auto;
}

.twofa-card {
  display: grid;
  gap: 18px;
}

.twofa-card h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: .98;
}

.twofa-status {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(154,211,165,.36);
  background: rgba(154,211,165,.12);
}

.twofa-qr-wrap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.twofa-qr {
  width: min(260px, 70vw);
  height: auto;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
}

.twofa-secret,
.twofa-code-grid code {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  overflow-wrap: anywhere;
}

.twofa-code-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
}

.twofa-form {
  display: grid;
  gap: 10px;
}

.twofa-form input {
  min-height: 48px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(151,164,214,.28);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font: inherit;
}

.form-error {
  color: #ffb5b5;
}

@media (max-width: 720px) {
  .twofa-qr-wrap {
    grid-template-columns: 1fr;
  }
}
/* ADMIN 2FA SAFE END */

/* Phase 1B v2: curation stability */
.phase1b-disabled-loader-card,
#candidateBottomSentinel.phase1b-disabled-loader-card {
  display: none !important;
  pointer-events: none !important;
}

.primary-interests,
.interest-pills,
.interests-pills,
.admin-interests,
.feed-interests,
[class*="interest-pills"],
[class*="interests-pills"] {
  overflow: visible !important;
  max-height: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.phase1b-added-interest-pill {
  border: 1px solid rgba(147,197,253,.35);
  border-radius: 999px;
  padding: 8px 11px;
  background: rgba(15,23,42,.66);
  color: rgba(219,234,254,.96);
  font-weight: 700;
  cursor: pointer;
}


/* V31 cleanup: never show old generated data-SVG article hero placeholders. */
.stream-candidate-card > img.stream-hero-img[src^="data:image/svg"] {
  display: none !important;
}


/* V36 minimal depth button hide */
.v31-depth-fx-toggle,
.v31-depth-fx-pill,
.depth-fx-pill,
.depth-on-pill {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/* V37 advanced depth admin and header chip cleanup */
.v37-header-chip-hidden,
body:not(.ig-drawer-open) #selectedInterestRail,
body:not(.ig-drawer-open) #saveInterestButton,
body:not(.ig-drawer-open) .selected-interest-rail,
body:not(.ig-drawer-open) .ig-selected-interest-rail,
body:not(.ig-drawer-open) .ig-selected-interest-row,
body:not(.ig-drawer-open) .ig-topic-rail,
body:not(.ig-drawer-open) .ig-interest-rail,
body:not(.ig-drawer-open) .topic-rail,
body:not(.ig-drawer-open) .interest-rail,
body:not(.ig-drawer-open) .chip-rail,
body:not(.ig-drawer-open) .topic-chip-row,
body:not(.ig-drawer-open) .interest-chip-row,
body:not(.ig-drawer-open) #candidateDeck .stream-candidate-card > .ig-status-pill,
body:not(.ig-drawer-open) #candidateDeck .stream-candidate-card > .ig-topic-chip,
body:not(.ig-drawer-open) #candidateDeck .stream-candidate-card > .ig-interest-chip,
body:not(.ig-drawer-open) #candidateDeck .stream-candidate-card > .topic-chip,
body:not(.ig-drawer-open) #candidateDeck .stream-candidate-card > .interest-chip,
body:not(.ig-drawer-open) #candidateDeck .stream-candidate-card > .chip,
body:not(.ig-drawer-open) .ig-candidate-deck .stream-candidate-card > .ig-status-pill,
body:not(.ig-drawer-open) .ig-candidate-deck .stream-candidate-card > .ig-topic-chip,
body:not(.ig-drawer-open) .ig-candidate-deck .stream-candidate-card > .ig-interest-chip,
body:not(.ig-drawer-open) .ig-candidate-deck .stream-candidate-card > .topic-chip,
body:not(.ig-drawer-open) .ig-candidate-deck .stream-candidate-card > .interest-chip,
body:not(.ig-drawer-open) .ig-candidate-deck .stream-candidate-card > .chip {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.v37-depth-admin-launcher {
  position: fixed !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  z-index: 2147483000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 11px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(6,10,18,0.94) !important;
  color: #eef3ff !important;
  font: 12px/1 system-ui, -apple-system, Segoe UI, sans-serif !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.42) !important;
  backdrop-filter: blur(12px) !important;
}

#v34DepthAdminTuner {
  z-index: 2147483001 !important;
}

@media (max-width: 760px) {
  #v34DepthAdminTuner {
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: 78vh !important;
  }
}


/* Depth Admin launcher safe v1 */
.depth-admin-launcher-safe-v1 {
  position: fixed !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  bottom: max(12px, env(safe-area-inset-bottom)) !important;
  z-index: 2147483000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 11px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(6,10,18,0.94) !important;
  color: #eef3ff !important;
  font: 12px/1 system-ui, -apple-system, Segoe UI, sans-serif !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.42) !important;
  backdrop-filter: blur(12px) !important;
}

.depth-header-chip-hidden-safe-v1 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 760px) {
  #v34DepthAdminTuner {
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: 78vh !important;
    z-index: 2147483001 !important;
  }

  .depth-admin-launcher-safe-v1 {
    min-height: 46px !important;
    padding: 12px 15px !important;
  }
}


/* Article Feed Toolbar v1 */
.article-feed-toolbar {
  width: min(1180px, calc(100vw - 24px));
  margin: 10px auto 12px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background: rgba(5,8,14,0.76);
  box-shadow: 0 14px 42px rgba(0,0,0,0.25);
  backdrop-filter: blur(12px);
}

.article-feed-toolbar-row {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.article-feed-toolbar-row + .article-feed-toolbar-row {
  margin-top: 8px;
}

.article-feed-toolbar label {
  display: grid;
  gap: 4px;
  min-width: 118px;
  flex: 1 1 120px;
  color: rgba(235,242,255,0.72);
  font: 700 11px/1.1 system-ui, -apple-system, Segoe UI, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.article-feed-toolbar input,
.article-feed-toolbar select {
  min-height: 38px;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(0,0,0,0.34);
  color: #eef3ff;
  padding: 8px 10px;
  font: 13px/1.2 system-ui, -apple-system, Segoe UI, sans-serif;
}

.article-feed-toolbar-button,
.article-feed-depth-admin-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  background: rgba(255,255,255,0.075);
  color: #eef3ff;
  padding: 9px 12px;
  font: 800 12px/1 system-ui, -apple-system, Segoe UI, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
}

.article-feed-toolbar-apply,
.article-feed-depth-admin-button {
  background: linear-gradient(135deg, rgba(98,168,255,0.92), rgba(139,255,208,0.84));
  color: #06101f;
  border-color: transparent;
}

.article-feed-toolbar-presets {
  align-items: center;
}

#articleFeedDepthAdminButton {
  margin-left: 8px;
}

@media (max-width: 760px) {
  .article-feed-toolbar {
    width: calc(100vw - 16px);
    margin: 8px auto 10px;
    padding: 8px;
    border-radius: 16px;
  }

  .article-feed-toolbar-row {
    gap: 6px;
  }

  .article-feed-toolbar label {
    min-width: calc(50% - 6px);
    flex: 1 1 calc(50% - 6px);
  }

  .article-feed-toolbar label:nth-child(2) {
    min-width: 100%;
    flex-basis: 100%;
  }

  .article-feed-toolbar-button,
  .article-feed-depth-admin-button {
    min-height: 40px;
    padding: 10px 12px;
  }

  #v34DepthAdminTuner {
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: 78vh !important;
    z-index: 2147483001 !important;
  }
}


/* Article Feed Toolbar v2 unified responsive component
   One styling contract for desktop + mobile. No separate mobile module. */
#articleFeedToolbar,
.article-feed-toolbar {
  --aft-bg: rgba(7, 11, 20, 0.82);
  --aft-bg-strong: rgba(11, 16, 28, 0.94);
  --aft-field: rgba(255, 255, 255, 0.065);
  --aft-field-focus: rgba(255, 255, 255, 0.10);
  --aft-border: rgba(160, 190, 255, 0.18);
  --aft-border-strong: rgba(160, 190, 255, 0.34);
  --aft-text: #eef4ff;
  --aft-muted: rgba(220, 232, 255, 0.68);
  --aft-blue: #86b7ff;
  --aft-accent-a: #8bbcff;
  --aft-accent-b: #7dffd4;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 10px 0 12px !important;
  padding: 12px !important;
  border: 1px solid var(--aft-border) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(10,15,27,0.92), rgba(5,8,15,0.78)) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,0.28) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  overflow: hidden !important;
}

#articleFeedToolbar *,
.article-feed-toolbar * {
  box-sizing: border-box !important;
}

#articleFeedToolbar .article-feed-toolbar-row,
.article-feed-toolbar .article-feed-toolbar-row {
  width: 100% !important;
  min-width: 0 !important;
}

#articleFeedToolbar .article-feed-toolbar-row:first-child,
.article-feed-toolbar .article-feed-toolbar-row:first-child {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  gap: 10px !important;
  align-items: end !important;
}

#articleFeedToolbar .article-feed-toolbar-presets,
.article-feed-toolbar .article-feed-toolbar-presets {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 10px !important;
  min-width: 0 !important;
}

#articleFeedToolbar label,
.article-feed-toolbar label {
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 6px !important;
  min-width: 0 !important;
  width: 100% !important;
  color: var(--aft-muted) !important;
  font: 800 10.5px/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.055em !important;
}

#articleFeedToolbar label > span,
.article-feed-toolbar label > span {
  display: block !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#articleFeedToolbar input,
#articleFeedToolbar select,
.article-feed-toolbar input,
.article-feed-toolbar select {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 36px 0 12px !important;
  border: 1px solid var(--aft-border) !important;
  border-radius: 13px !important;
  background-color: var(--aft-field) !important;
  color: var(--aft-text) !important;
  font: 650 13px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
  outline: none !important;
}

#articleFeedToolbar select,
.article-feed-toolbar select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(238,244,255,0.82) 50%),
    linear-gradient(135deg, rgba(238,244,255,0.82) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) 18px,
    calc(100% - 12px) 18px !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
}

#articleFeedToolbar input:focus,
#articleFeedToolbar select:focus,
.article-feed-toolbar input:focus,
.article-feed-toolbar select:focus {
  border-color: var(--aft-border-strong) !important;
  background-color: var(--aft-field-focus) !important;
  box-shadow:
    0 0 0 3px rgba(134, 183, 255, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

#articleFeedToolbar option,
.article-feed-toolbar option {
  background: #111722 !important;
  color: #eef4ff !important;
}

#articleFeedToolbar .article-feed-toolbar-button,
#articleFeedToolbar .article-feed-depth-admin-button,
#articleFeedDepthAdminButton,
.article-feed-toolbar .article-feed-toolbar-button,
.article-feed-toolbar .article-feed-depth-admin-button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--aft-border) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.075) !important;
  color: var(--aft-text) !important;
  font: 850 12px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

#articleFeedToolbar .article-feed-toolbar-button:hover,
#articleFeedToolbar .article-feed-depth-admin-button:hover,
#articleFeedDepthAdminButton:hover {
  background: rgba(255,255,255,0.11) !important;
  border-color: var(--aft-border-strong) !important;
}

#articleFeedToolbar .article-feed-toolbar-apply,
#articleFeedToolbar .article-feed-depth-admin-button,
#articleFeedDepthAdminButton {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--aft-accent-a), var(--aft-accent-b)) !important;
  color: #041020 !important;
  box-shadow:
    0 10px 24px rgba(91, 162, 255, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

#articleFeedDepthAdminButton {
  flex: 0 0 auto !important;
  margin-left: 8px !important;
}

/* If the toolbar is inside the narrow left drawer/control column, stay compact. */
#articleFeedToolbar label:nth-child(2),
.article-feed-toolbar label:nth-child(2) {
  grid-column: span 2 !important;
}

@media (max-width: 980px) {
  #articleFeedToolbar label:nth-child(2),
  .article-feed-toolbar label:nth-child(2) {
    grid-column: span 2 !important;
  }
}

@media (max-width: 760px) {
  #articleFeedToolbar,
  .article-feed-toolbar {
    width: 100% !important;
    margin: 12px 0 14px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  #articleFeedToolbar .article-feed-toolbar-row:first-child,
  .article-feed-toolbar .article-feed-toolbar-row:first-child {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  #articleFeedToolbar label,
  .article-feed-toolbar label {
    font-size: 11px !important;
  }

  #articleFeedToolbar label:nth-child(2),
  .article-feed-toolbar label:nth-child(2) {
    grid-column: 1 / -1 !important;
  }

  #articleFeedToolbar input,
  #articleFeedToolbar select,
  .article-feed-toolbar input,
  .article-feed-toolbar select {
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 14px !important;
    font-size: 16px !important;
  }

  #articleFeedToolbar .article-feed-toolbar-button,
  #articleFeedToolbar .article-feed-depth-admin-button,
  #articleFeedDepthAdminButton {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 15px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }

  #articleFeedToolbar .article-feed-toolbar-presets,
  .article-feed-toolbar .article-feed-toolbar-presets {
    gap: 8px !important;
  }
}

@media (max-width: 430px) {
  #articleFeedToolbar .article-feed-toolbar-row:first-child,
  .article-feed-toolbar .article-feed-toolbar-row:first-child {
    grid-template-columns: 1fr !important;
  }

  #articleFeedToolbar label,
  #articleFeedToolbar label:nth-child(2),
  .article-feed-toolbar label,
  .article-feed-toolbar label:nth-child(2) {
    grid-column: 1 / -1 !important;
  }

  #articleFeedToolbar .article-feed-toolbar-presets,
  .article-feed-toolbar .article-feed-toolbar-presets {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }

  #articleFeedToolbar .article-feed-toolbar-presets .article-feed-toolbar-button,
  .article-feed-toolbar .article-feed-toolbar-presets .article-feed-toolbar-button {
    width: 100% !important;
  }
}


/* V39 readable Depth Admin button + unified interaction polish */
#articleFeedDepthAdminButton,
.article-feed-depth-admin-button,
#articleFeedToolbar #articleFeedDepthAdminButton,
#articleFeedToolbar .article-feed-depth-admin-button {
  color: #05101f !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #05101f !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, #8dbbff 0%, #7cffd6 100%) !important;
  border-color: transparent !important;
  box-shadow:
    0 10px 24px rgba(91, 162, 255, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.30) !important;
}

#articleFeedDepthAdminButton:hover,
.article-feed-depth-admin-button:hover {
  color: #020812 !important;
  -webkit-text-fill-color: #020812 !important;
  filter: brightness(1.04) saturate(1.05) !important;
}

#articleFeedDepthAdminButton:active,
.article-feed-depth-admin-button:active {
  transform: translateY(1px) !important;
}

.v31-depth-fx-canvas {
  cursor: crosshair;
}


/* Saved-post Depth FX hero */
.post-depth-hero {
  position: relative;
  display: block;
  width: 100%;
  margin: 20px 0 24px;
  overflow: hidden;
  border-radius: 24px;
  background: #050914;
  box-shadow: 0 22px 60px rgba(0,0,0,0.34);
  isolation: isolate;
}

.post-depth-hero .stream-hero-img,
.post-depth-hero .article-hero-image {
  display: block;
  width: 100%;
  height: clamp(260px, 56vw, 620px);
  min-height: 260px;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.post-depth-hero .v31-depth-fx-wrap {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.post-depth-hero .v31-depth-fx-canvas {
  border-radius: inherit;
}

.post-depth-hero-caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 8;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(4,8,15,0.72);
  color: rgba(238,244,255,0.88);
  font: 800 11px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (max-width: 760px) {
  .post-depth-hero {
    border-radius: 18px;
    margin: 16px 0 20px;
  }

  .post-depth-hero .stream-hero-img,
  .post-depth-hero .article-hero-image {
    height: clamp(240px, 70vw, 460px);
  }
}


/* Saved-post Depth FX hero autoload states */
.post-depth-hero.post-depth-hero-pending::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 20%, rgba(130,190,255,0.16), transparent 34%),
    linear-gradient(180deg, transparent, rgba(0,0,0,0.18));
}

.post-depth-hero.post-depth-hero-ready::after {
  content: none;
}

.post-depth-hero[data-v31-depth-status="failed"] .post-depth-hero-caption {
  background: rgba(80,18,20,0.78);
}


/* Saved post desktop layout fix v1
   Scope: only /blog/{post} article pages using .article-rich-post.
   Goal: stop saved posts from being shoved into the right column. */
.article.article-rich-post,
.article-rich-post {
  width: min(1120px, calc(100vw - 48px)) !important;
  max-width: 1120px !important;
  margin: 32px auto 80px !important;
  padding: 0 !important;
  display: block !important;
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  align-self: start !important;
  transform: none !important;
}

.article-rich-post > .eyebrow,
.article-rich-post > h1,
.article-rich-post > .lead,
.article-rich-post > .feed-detail-card,
.article-rich-post > .prose {
  width: min(880px, 100%) !important;
  max-width: 880px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.article-rich-post > h1 {
  margin-top: 14px !important;
  margin-bottom: 18px !important;
  font-size: clamp(2.4rem, 5.2vw, 4.9rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
}

.article-rich-post .post-depth-hero {
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
  margin: 18px auto 26px !important;
}

.article-rich-post .post-depth-hero .stream-hero-img,
.article-rich-post .post-depth-hero .article-hero-image {
  width: 100% !important;
  height: clamp(360px, 48vw, 640px) !important;
  object-fit: cover !important;
  object-position: center !important;
}

.article-rich-post .article-thumb.article-hero-image:not(.stream-hero-img) {
  display: block !important;
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
  height: auto !important;
  margin: 18px auto 26px !important;
  border-radius: 24px !important;
}

@media (max-width: 900px) {
  .article.article-rich-post,
  .article-rich-post {
    width: calc(100vw - 28px) !important;
    margin: 18px auto 56px !important;
  }

  .article-rich-post > .eyebrow,
  .article-rich-post > h1,
  .article-rich-post > .lead,
  .article-rich-post > .feed-detail-card,
  .article-rich-post > .prose {
    width: 100% !important;
    max-width: 100% !important;
  }

  .article-rich-post > h1 {
    font-size: clamp(2.1rem, 11vw, 3.6rem) !important;
    line-height: 1 !important;
  }

  .article-rich-post .post-depth-hero .stream-hero-img,
  .article-rich-post .post-depth-hero .article-hero-image {
    height: clamp(260px, 72vw, 480px) !important;
  }
}


/* Saved post card-header layout v1
   This makes /blog/{post} use the same media/card contract as the feed.
   It intentionally does not alter the depth renderer or curation feed. */
.article-rich-post-v2 {
  width: min(1180px, calc(100vw - 48px)) !important;
  max-width: 1180px !important;
  margin: 28px auto 80px !important;
  padding: 0 !important;
  display: block !important;
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  transform: none !important;
}

.article-rich-post-v2 .post-stream-header-card {
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
  margin: 0 auto 26px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(140, 170, 230, 0.22) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(100,145,255,0.12), transparent 34%),
    linear-gradient(180deg, rgba(12,17,29,0.96), rgba(5,8,15,0.98)) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.38) !important;
  isolation: isolate !important;
}

.article-rich-post-v2 .post-stream-media-frame {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 26px 26px 0 0 !important;
  background: #050914 !important;
}

/* Critical: keep the depth canvas and image inside the same media frame. */
.article-rich-post-v2 .post-stream-media-frame .stream-hero-img,
.article-rich-post-v2 .post-stream-media-frame .article-hero-image,
.article-rich-post-v2 .post-stream-media-frame .v31-depth-fx-wrap {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.article-rich-post-v2 .post-stream-media-frame .v31-depth-fx-canvas {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}

.article-rich-post-v2 .post-stream-copy {
  width: min(900px, calc(100% - 48px)) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: clamp(22px, 4vw, 44px) 0 clamp(24px, 4vw, 48px) !important;
}

.article-rich-post-v2 .post-stream-copy > .eyebrow {
  margin: 0 0 12px !important;
}

.article-rich-post-v2 .post-stream-copy > h1 {
  margin: 0 !important;
  font-size: clamp(2.25rem, 5vw, 5rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
}

.article-rich-post-v2 .post-stream-copy > .lead {
  margin: 20px 0 0 !important;
  max-width: 820px !important;
  color: rgba(205, 225, 255, 0.86) !important;
  font-size: clamp(1.05rem, 1.75vw, 1.45rem) !important;
  line-height: 1.45 !important;
}

.article-rich-post-v2 > .feed-detail-card,
.article-rich-post-v2 > .prose {
  width: min(900px, calc(100% - 48px)) !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.article-rich-post-v2 .post-depth-hero-caption {
  position: absolute !important;
  left: 14px !important;
  bottom: 14px !important;
  z-index: 12 !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  background: rgba(4,8,15,0.74) !important;
  color: rgba(238,244,255,0.9) !important;
  font: 900 11px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Override earlier experimental post-depth-hero figure sizing. */
.article-rich-post-v2 .post-depth-hero .stream-hero-img,
.article-rich-post-v2 .post-depth-hero .article-hero-image {
  height: 100% !important;
}

@media (max-width: 900px) {
  .article-rich-post-v2 {
    width: calc(100vw - 24px) !important;
    margin: 16px auto 56px !important;
  }

  .article-rich-post-v2 .post-stream-header-card {
    border-radius: 20px !important;
  }

  .article-rich-post-v2 .post-stream-media-frame {
    border-radius: 20px 20px 0 0 !important;
    aspect-ratio: 4 / 3 !important;
  }

  .article-rich-post-v2 .post-stream-copy,
  .article-rich-post-v2 > .feed-detail-card,
  .article-rich-post-v2 > .prose {
    width: calc(100% - 28px) !important;
  }

  .article-rich-post-v2 .post-stream-copy > h1 {
    font-size: clamp(2rem, 10.5vw, 3.8rem) !important;
    line-height: 1 !important;
  }

  .article-rich-post-v2 .post-stream-copy > .lead {
    font-size: 1.05rem !important;
  }
}


/* Saved post depth orbit toggle v1 */
.article-rich-post-v2 .post-depth-orbit-toggle,
.post-depth-orbit-toggle {
  pointer-events: auto !important;
  cursor: pointer !important;
  border: 1px solid rgba(180, 210, 255, 0.28) !important;
  background: rgba(4, 8, 15, 0.76) !important;
  color: rgba(238, 244, 255, 0.94) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

.article-rich-post-v2 .post-depth-orbit-toggle:hover,
.post-depth-orbit-toggle:hover {
  border-color: rgba(140, 190, 255, 0.56) !important;
  background: rgba(18, 28, 48, 0.86) !important;
}

.article-rich-post-v2 .post-depth-orbit-toggle.post-depth-orbit-off,
.post-depth-orbit-toggle.post-depth-orbit-off {
  background: rgba(20, 22, 28, 0.74) !important;
  color: rgba(205, 216, 235, 0.78) !important;
  border-color: rgba(255,255,255,0.14) !important;
}


/* Saved post depth orbit toggle v2 clickable */
.article-rich-post-v2 .post-stream-media-frame [data-post-depth-orbit-toggle],
.post-stream-media-frame [data-post-depth-orbit-toggle],
[data-post-depth-orbit-toggle] {
  position: absolute !important;
  left: 14px !important;
  bottom: 14px !important;
  z-index: 2147482000 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  border: 1px solid rgba(180, 210, 255, 0.32) !important;
  background: rgba(4, 8, 15, 0.78) !important;
  color: rgba(238, 244, 255, 0.96) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

[data-post-depth-orbit-toggle]:hover {
  border-color: rgba(140, 190, 255, 0.62) !important;
  background: rgba(18, 28, 48, 0.9) !important;
}

[data-post-depth-orbit-toggle].post-depth-orbit-off {
  background: rgba(22, 22, 28, 0.78) !important;
  color: rgba(205, 216, 235, 0.82) !important;
}


/* Saved post depth orbit toggle v3 */
[data-post-depth-orbit-toggle] {
  z-index: 2147482000 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

[data-post-depth-orbit-toggle].post-depth-orbit-off {
  background: rgba(22, 22, 28, 0.82) !important;
  color: rgba(205, 216, 235, 0.86) !important;
}


/* Saved post header layout hardening v2
   Scope: /blog/{post} only.
   Separates media/canvas from heading/description/content.
   Moves Orbit toggle to top-left of image frame. */
.article-rich-post-v2 {
  display: block !important;
  width: min(1180px, calc(100vw - 48px)) !important;
  max-width: 1180px !important;
  margin: 28px auto 80px !important;
  padding: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

.article-rich-post-v2 .post-stream-header-card {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "media"
    "copy" !important;
  gap: 0 !important;
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
  margin: 0 auto 30px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(100,145,255,0.12), transparent 34%),
    linear-gradient(180deg, rgba(12,17,29,0.96), rgba(5,8,15,0.98)) !important;
  isolation: isolate !important;
}

/* Media is its own locked box. Nothing from text layout should overlap it. */
.article-rich-post-v2 .post-stream-media-frame {
  grid-area: media !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 26px 26px 0 0 !important;
  background: #050914 !important;
  contain: layout paint !important;
  z-index: 1 !important;
}

/* Lock image, wrapper, canvas to exactly the media frame. */
.article-rich-post-v2 .post-stream-media-frame > img.stream-hero-img,
.article-rich-post-v2 .post-stream-media-frame > .stream-hero-img,
.article-rich-post-v2 .post-stream-media-frame .article-hero-image,
.article-rich-post-v2 .post-stream-media-frame .v31-depth-fx-wrap,
.article-rich-post-v2 .post-stream-media-frame .v31-depth-fx-active {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.article-rich-post-v2 .post-stream-media-frame .v31-depth-fx-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
}

/* Orbit button belongs to image controls, not post text flow. */
.article-rich-post-v2 .post-stream-media-frame [data-post-depth-orbit-toggle],
.article-rich-post-v2 [data-post-depth-orbit-toggle] {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2147482000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 82px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  white-space: nowrap !important;
  font: 900 11px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0.035em !important;
  text-transform: uppercase !important;
}

/* Text is a separate normal-flow area below the media. */
.article-rich-post-v2 .post-stream-copy {
  grid-area: copy !important;
  position: relative !important;
  z-index: 3 !important;
  display: block !important;
  width: min(900px, calc(100% - 56px)) !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: clamp(24px, 4vw, 48px) 0 clamp(28px, 4vw, 52px) !important;
  clear: both !important;
  transform: none !important;
  background: transparent !important;
}

.article-rich-post-v2 .post-stream-copy > .eyebrow,
.article-rich-post-v2 .post-stream-copy > h1,
.article-rich-post-v2 .post-stream-copy > .lead {
  position: relative !important;
  z-index: 4 !important;
  max-width: 900px !important;
  transform: none !important;
}

.article-rich-post-v2 .post-stream-copy > .eyebrow {
  margin: 0 0 12px !important;
  color: #8eb7ff !important;
}

.article-rich-post-v2 .post-stream-copy > h1 {
  margin: 0 !important;
  color: #f4f7ff !important;
  font-size: clamp(2.2rem, 4.8vw, 4.8rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
  text-wrap: balance !important;
}

.article-rich-post-v2 .post-stream-copy > .lead {
  margin: 20px 0 0 !important;
  color: rgba(205, 225, 255, 0.88) !important;
  font-size: clamp(1.05rem, 1.55vw, 1.35rem) !important;
  line-height: 1.5 !important;
}

/* Everything after the header starts below the card, never under the image. */
.article-rich-post-v2 > .feed-detail-card,
.article-rich-post-v2 > .prose {
  position: relative !important;
  z-index: 2 !important;
  width: min(900px, calc(100% - 56px)) !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  clear: both !important;
}

.article-rich-post-v2 > .feed-detail-card {
  margin-top: 28px !important;
}

@media (max-width: 900px) {
  .article-rich-post-v2 {
    width: calc(100vw - 24px) !important;
    margin: 16px auto 56px !important;
  }

  .article-rich-post-v2 .post-stream-header-card {
    border-radius: 20px !important;
  }

  .article-rich-post-v2 .post-stream-media-frame {
    aspect-ratio: 4 / 3 !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .article-rich-post-v2 .post-stream-copy,
  .article-rich-post-v2 > .feed-detail-card,
  .article-rich-post-v2 > .prose {
    width: calc(100% - 28px) !important;
  }

  .article-rich-post-v2 .post-stream-copy {
    padding: 22px 0 28px !important;
  }

  .article-rich-post-v2 .post-stream-copy > h1 {
    font-size: clamp(2rem, 10vw, 3.6rem) !important;
    line-height: 1.04 !important;
  }

  .article-rich-post-v2 .post-stream-copy > .lead {
    font-size: 1.04rem !important;
    line-height: 1.48 !important;
  }

  .article-rich-post-v2 .post-stream-media-frame [data-post-depth-orbit-toggle],
  .article-rich-post-v2 [data-post-depth-orbit-toggle] {
    top: 10px !important;
    left: 10px !important;
    height: 34px !important;
    min-width: 78px !important;
  }
}


/* Saved post readable header/card layout v3
   Fixes old overlay rules where title/description sit on top of the image.
   Media, heading, description, and summary are separate zones. */
.article-rich-post-v2 .post-stream-header-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-areas:
    "media"
    "copy" !important;
  align-items: stretch !important;
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
  margin: 0 auto 42px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(104, 145, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(11, 16, 28, 0.98), rgba(5, 8, 15, 0.98)) !important;
  border: 1px solid rgba(142, 183, 255, 0.22) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36) !important;
  isolation: isolate !important;
}

/* Image/depth canvas area only. */
.article-rich-post-v2 .post-stream-media-frame {
  grid-area: media !important;
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 26px 26px 0 0 !important;
  background: #050914 !important;
  z-index: 1 !important;
}

/* Depth/image should never define the text layout height. */
.article-rich-post-v2 .post-stream-media-frame > img.stream-hero-img,
.article-rich-post-v2 .post-stream-media-frame .stream-hero-img,
.article-rich-post-v2 .post-stream-media-frame .article-hero-image,
.article-rich-post-v2 .post-stream-media-frame .v31-depth-fx-wrap,
.article-rich-post-v2 .post-stream-media-frame .v31-depth-fx-active,
.article-rich-post-v2 .post-stream-media-frame .v31-depth-fx-canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Put Orbit button in top-left image controls. */
.article-rich-post-v2 .post-stream-media-frame [data-post-depth-orbit-toggle],
.article-rich-post-v2 [data-post-depth-orbit-toggle] {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2147482000 !important;
}

/* Text zone is normal flow below image, never overlayed. */
.article-rich-post-v2 .post-stream-copy {
  grid-area: copy !important;
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(28px, 4.5vw, 56px) clamp(24px, 5vw, 64px) clamp(30px, 4vw, 54px) !important;
  transform: none !important;
  translate: none !important;
  clear: both !important;
  z-index: 4 !important;
  background:
    linear-gradient(180deg, rgba(5, 8, 15, 0.96), rgba(5, 8, 15, 0.985)) !important;
  border-top: 1px solid rgba(142, 183, 255, 0.14) !important;
}

/* Kill any old absolute/overlay header text rules. */
.article-rich-post-v2 .post-stream-copy > .eyebrow,
.article-rich-post-v2 .post-stream-copy > h1,
.article-rich-post-v2 .post-stream-copy > .lead {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  translate: none !important;
  display: block !important;
  width: min(900px, 100%) !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  z-index: 5 !important;
  text-shadow: none !important;
}

.article-rich-post-v2 .post-stream-copy > .eyebrow {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  color: #8eb7ff !important;
  font: 900 0.78rem/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}

.article-rich-post-v2 .post-stream-copy > h1 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  color: #f6f8ff !important;
  font-size: clamp(2.25rem, 4.7vw, 4.85rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.055em !important;
  text-wrap: balance !important;
}

.article-rich-post-v2 .post-stream-copy > .lead {
  margin-top: 22px !important;
  margin-bottom: 0 !important;
  color: rgba(206, 226, 255, 0.9) !important;
  font-size: clamp(1.05rem, 1.55vw, 1.35rem) !important;
  line-height: 1.55 !important;
}

/* Summary/body starts below the full header card. */
.article-rich-post-v2 > .feed-detail-card,
.article-rich-post-v2 > .prose {
  position: relative !important;
  z-index: 2 !important;
  width: min(900px, calc(100% - 56px)) !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  clear: both !important;
}

.article-rich-post-v2 > .feed-detail-card {
  margin-top: 0 !important;
}

@media (max-width: 900px) {
  .article-rich-post-v2 .post-stream-header-card {
    margin-bottom: 28px !important;
    border-radius: 20px !important;
  }

  .article-rich-post-v2 .post-stream-media-frame {
    aspect-ratio: 4 / 3 !important;
    border-radius: 20px 20px 0 0 !important;
  }

  .article-rich-post-v2 .post-stream-copy {
    padding: 24px 18px 30px !important;
  }

  .article-rich-post-v2 .post-stream-copy > .eyebrow,
  .article-rich-post-v2 .post-stream-copy > h1,
  .article-rich-post-v2 .post-stream-copy > .lead {
    width: 100% !important;
    max-width: 100% !important;
  }

  .article-rich-post-v2 .post-stream-copy > h1 {
    font-size: clamp(2rem, 10vw, 3.65rem) !important;
    line-height: 1.04 !important;
  }

  .article-rich-post-v2 .post-stream-copy > .lead {
    font-size: 1.04rem !important;
    line-height: 1.5 !important;
  }

  .article-rich-post-v2 > .feed-detail-card,
  .article-rich-post-v2 > .prose {
    width: calc(100% - 28px) !important;
  }
}


/* Saved post copy-height containment fix v4
   Fixes lead text escaping the header card bottom and overlapping summary. */
.article-rich-post-v2 .post-stream-header-card {
  overflow: visible !important;
  margin-bottom: clamp(44px, 6vw, 82px) !important;
}

.article-rich-post-v2 .post-stream-media-frame {
  overflow: hidden !important;
}

/* Force the copy panel to use normal document flow and include title + lead height. */
.article-rich-post-v2 .post-stream-copy {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, min(900px, 100%)) !important;
  justify-content: center !important;
  align-content: start !important;
  row-gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: max-content !important;
  max-height: none !important;
  overflow: visible !important;
  contain: none !important;
  box-sizing: border-box !important;
  padding:
    clamp(28px, 4.5vw, 56px)
    clamp(24px, 5vw, 64px)
    clamp(72px, 8vw, 112px) !important;
}

/* Direct children must stay in flow. */
.article-rich-post-v2 .post-stream-copy > .eyebrow,
.article-rich-post-v2 .post-stream-copy > h1,
.article-rich-post-v2 .post-stream-copy > .lead {
  position: static !important;
  inset: auto !important;
  float: none !important;
  display: block !important;
  grid-column: 1 !important;
  width: 100% !important;
  max-width: 900px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  transform: none !important;
  translate: none !important;
  contain: none !important;
  box-sizing: border-box !important;
}

.article-rich-post-v2 .post-stream-copy > .eyebrow {
  margin: 0 0 14px !important;
}

.article-rich-post-v2 .post-stream-copy > h1 {
  margin: 0 !important;
}

.article-rich-post-v2 .post-stream-copy > .lead {
  margin: 22px 0 0 !important;
  padding: 0 !important;
}

/* Summary must never climb into the header copy panel. */
.article-rich-post-v2 > .feed-detail-card {
  margin-top: 0 !important;
  clear: both !important;
}

@media (max-width: 900px) {
  .article-rich-post-v2 .post-stream-header-card {
    margin-bottom: 42px !important;
  }

  .article-rich-post-v2 .post-stream-copy {
    padding: 24px 18px 70px !important;
  }

  .article-rich-post-v2 .post-stream-copy > .lead {
    margin-top: 18px !important;
  }
}


/* Depth FX card integrity fallback.
   A failed depth canvas must not collapse a snap card or saved-post hero. */
.stream-candidate-card.depth-fx-fallback,
.post-depth-hero.depth-fx-fallback,
.post-standard-header-card.depth-fx-fallback {
  min-height: var(--depth-card-min-h, 320px) !important;
  overflow: hidden !important;
  contain: layout paint !important;
}

.stream-candidate-card.depth-fx-fallback .post-stream-media-frame,
.stream-candidate-card.depth-fx-fallback .fx-post-media,
.post-depth-hero.depth-fx-fallback .post-stream-media-frame,
.post-depth-hero.depth-fx-fallback .fx-post-media {
  min-height: var(--depth-media-min-h, 220px) !important;
}

.depth-fx-fallback .v31-depth-fx-wrap,
.depth-fx-fallback .v31-depth-fx-active,
.depth-fx-fallback .v31-depth-fx-canvas {
  display: none !important;
}

.depth-fx-fallback img.stream-hero-img,
.depth-fx-fallback img.article-hero-image,
.depth-fx-fallback img.post-standard-img {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* Depth FX non-destructive base v1
   The original image/card must survive even when the FX canvas fails. */
.depth-fx-non-destructive-card {
  min-height: var(--depth-non-destructive-card-min-h, auto) !important;
}

.depth-fx-non-destructive-media {
  min-height: var(--depth-non-destructive-media-min-h, auto) !important;
  overflow: hidden !important;
}

.depth-fx-preserved-original,
.depth-fx-non-destructive-card img.stream-hero-img,
.depth-fx-non-destructive-card img.article-hero-image,
.depth-fx-non-destructive-card img.post-standard-img {
  display: block !important;
  visibility: visible !important;
}

@media (pointer: coarse), (max-width: 920px) {
  .stream-candidate-card.depth-fx-non-destructive-card,
  .post-depth-hero.depth-fx-non-destructive-card {
    min-height: var(--depth-non-destructive-card-min-h, 420px) !important;
  }

  .depth-fx-non-destructive-media {
    min-height: var(--depth-non-destructive-media-min-h, 220px) !important;
  }
}


/* Depth FX mobile single canvas gate v1 */
@media (pointer: coarse), (max-width: 920px) {
  .depth-fx-mobile-held-card img.stream-hero-img,
  .depth-fx-mobile-held-card img.article-hero-image {
    display: block !important;
    visibility: visible !important;
  }

  .depth-fx-mobile-held-card .v31-depth-fx-wrap,
  .depth-fx-mobile-held-card .v31-depth-fx-active,
  .depth-fx-mobile-held-card .v31-depth-fx-canvas {
    display: none !important;
  }
}


/* Depth stable reset v1
   Keep the original image/card alive. Depth canvas is an enhancement only. */
.stream-candidate-card img.stream-hero-img,
.post-depth-hero img.stream-hero-img,
.post-depth-hero img.article-hero-image,
.post-standard-header-card img.article-hero-image,
.post-standard-header-card img.post-standard-img {
  visibility: visible;
}

.stream-candidate-card,
.post-depth-hero,
.post-standard-header-card {
  min-height: var(--depth-card-safe-min-h, auto);
}

.post-stream-media-frame,
.fx-post-media {
  overflow: hidden;
}

@media (pointer: coarse), (max-width: 920px) {
  .stream-candidate-card,
  .post-depth-hero {
    min-height: var(--depth-card-safe-min-h, 420px);
  }

  .post-stream-media-frame,
  .fx-post-media {
    min-height: var(--depth-media-safe-min-h, 220px);
  }
}


/* Depth worker/admin stability v1 */
.stream-candidate-card img.stream-hero-img,
.post-depth-hero img.stream-hero-img,
.post-depth-hero img.article-hero-image,
.post-standard-header-card img.article-hero-image,
.post-standard-header-card img.post-standard-img {
  visibility: visible;
}

.post-stream-media-frame,
.fx-post-media {
  overflow: hidden;
}

@media (pointer: coarse), (max-width: 920px) {
  .stream-candidate-card,
  .post-depth-hero {
    min-height: var(--depth-card-safe-min-h, 420px);
  }

  .post-stream-media-frame,
  .fx-post-media {
    min-height: var(--depth-media-safe-min-h, 220px);
  }
}


/* Depth FX image presence gate v1 */
.depth-image-gate-media {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 220px;
  background: #050914;
}

.depth-image-gate-created,
.depth-image-gate-preserved,
.stream-candidate-card img.stream-hero-img,
.post-depth-hero img.stream-hero-img,
.post-depth-hero img.article-hero-image {
  display: block;
  visibility: visible;
}

.stream-candidate-card[data-v31-depth-fx-status="image-only"] .v31-depth-fx-wrap,
.stream-candidate-card[data-v31-depth-fx-status="image-only"] .v31-depth-fx-active,
.stream-candidate-card[data-v31-depth-fx-status="image-only"] .v31-depth-fx-canvas,
.post-depth-hero[data-v31-depth-fx-status="image-only"] .v31-depth-fx-wrap,
.post-depth-hero[data-v31-depth-fx-status="image-only"] .v31-depth-fx-active,
.post-depth-hero[data-v31-depth-fx-status="image-only"] .v31-depth-fx-canvas {
  display: none !important;
}

@media (pointer: coarse), (max-width: 920px) {
  .stream-candidate-card,
  .post-depth-hero {
    min-height: var(--depth-card-safe-min-h, 420px);
  }

  .post-stream-media-frame,
  .fx-post-media,
  .stream-hero-media,
  .depth-image-gate-media {
    min-height: var(--depth-media-safe-min-h, 220px);
    overflow: hidden;
  }
}




/* Article Feed Real Image Filter v2
   Do not display:none rejected cards immediately; that causes scroll-snap jumps.
   JS removes rejected cards only when offscreen. */
.stream-candidate-card.stream-candidate-card-no-real-image-v2 {
  opacity: 0.45;
  filter: grayscale(0.35);
}

.stream-candidate-card.stream-candidate-card-no-real-image-v2::after {
  content: "Loading next article image…";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 6;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  color: rgba(255,255,255,0.86);
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(10px);
}