/* Time Machine — Palette A completion + Editorial Timeline Stage.
   Presentation only: corpus JSON, reader payloads and entitlement gates remain untouched. */

html:not(.dark-mode) body.ifp-tools-page,
html:not(.dark-mode) body.ifp-tools-page main {
  background: var(--ink, #fff) !important;
  color: var(--text, #2a2a2e);
}

html:not(.dark-mode) #view-home {
  --ink: #fff;
  --ink-2: #f7f7f8;
  --ink-3: #eeeef0;
  --heading: #1a1a1a;
  --text: #2a2a2e;
  --muted: rgba(26, 26, 26, .66);
  --accent: #c0392b;
  --accent-soft: rgba(192, 57, 43, .09);
  --line: rgba(0, 0, 0, .1);
  background: #fff !important;
  color: #1a1a1a;
}

html:not(.dark-mode) #view-home .htm-hero {
  min-height: min(620px, 72svh);
  align-items: center;
  background: #fff !important;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

html:not(.dark-mode) #view-home .htm-hero::before {
  inset: 0;
  background-position: 88% 50%;
  background-size: min(72vw, 920px) auto;
  filter: grayscale(1) contrast(1.02) brightness(1.13);
  opacity: .3;
}

html:not(.dark-mode) #view-home .htm-hero::after {
  background:
    linear-gradient(90deg, #fff 0%, rgba(255,255,255,.98) 28%, rgba(255,255,255,.78) 57%, rgba(255,255,255,.18) 100%),
    linear-gradient(0deg, #fff 0%, transparent 30%, rgba(255,255,255,.12) 100%);
}

html:not(.dark-mode) #view-home .htm-kicker { color: #c0392b; }
html:not(.dark-mode) #view-home .htm-hero h1 { color: #1a1a1a !important; }
html:not(.dark-mode) #view-home .htm-hero-copy > p:not(.htm-kicker) { color: #2a2a2e !important; }

html:not(.dark-mode) #view-home .htm-hero-meta {
  border-color: rgba(0, 0, 0, .1);
  background: rgba(255, 255, 255, .64);
  box-shadow: 0 18px 44px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
}
html:not(.dark-mode) #view-home .htm-hero-meta span { color: rgba(26,26,26,.62); border-color: rgba(0,0,0,.08); }
html:not(.dark-mode) #view-home .htm-hero-meta strong { color: #1a1a1a; }

.htm-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.htm-hero-action {
  min-height: 46px; display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 22px; border-radius: 999px; border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.74); color: #1a1a1a; font-family: var(--thai);
  font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.htm-hero-action.primary { background: #c0392b; border-color: #c0392b; color: #fff; }
.htm-hero-action:hover { transform: translateY(-2px); border-color: #c0392b; }
.htm-hero-action:focus-visible { outline: 3px solid rgba(192,57,43,.28); outline-offset: 3px; }
.htm-census {
  max-width: 560px; margin-top: 14px; padding: 16px 18px; border: 1px solid rgba(0,0,0,.1);
  border-radius: 16px; background: rgba(255,255,255,.82); color: #2a2a2e;
  box-shadow: 0 14px 36px rgba(0,0,0,.08); font-family: var(--thai); font-size: 13px; line-height: 1.75;
}
.htm-census[hidden] { display: none; }
.htm-census strong { color: #1a1a1a; }
.htm-census p { margin: 0; }
.htm-census p + p { margin-top: 5px; }

html:not(.dark-mode) #view-home .bc-section {
  background: #fff !important;
  border-top: 1px solid rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: none;
}
/* Selected direction: one active corpus in a horizontal editorial coverflow. */
#view-home .bc-stage-wrap { position: relative; }
#view-home .bc-stage {
  display: block !important; position: relative !important; height: 470px !important;
  overflow: hidden !important; outline: none; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent) !important;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent) !important;
}
#view-home .bc-card {
  position: absolute !important; left: 50% !important; top: 50% !important;
  margin: 0 !important; min-width: 0 !important; min-height: 0 !important;
  transition: transform .55s cubic-bezier(.2,.75,.2,1), width .55s cubic-bezier(.2,.75,.2,1),
    height .55s cubic-bezier(.2,.75,.2,1), opacity .35s ease, box-shadow .35s ease !important;
}
#view-home .bc-card:not(.is-active) .bc-desc,
#view-home .bc-card:not(.is-active) .bc-progress,
#view-home .bc-card:not(.is-active) .bc-more { opacity: 0; pointer-events: none; }
#view-home .bc-card:not(.is-active) .bc-name { font-size: 16px; }
.bc-flow-nav { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.bc-flow-btn {
  pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.88); color: #1a1a1a; cursor: pointer; font-size: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.bc-flow-btn:hover { background: #1a1a1a; color: #fff; }
.bc-flow-btn:focus-visible { outline: 3px solid rgba(192,57,43,.3); outline-offset: 3px; }
.bc-flow-prev { left: 18px; }
.bc-flow-next { right: 18px; }
html:not(.dark-mode) #view-home .bc-title,
html:not(.dark-mode) #view-home .bc-name { color: #1a1a1a !important; }
html:not(.dark-mode) #view-home .bc-sub,
html:not(.dark-mode) #view-home .bc-author,
html:not(.dark-mode) #view-home .bc-desc { color: rgba(26,26,26,.66) !important; }

html:not(.dark-mode) #view-home .bc-arrow {
  background: rgba(255,255,255,.82); border-color: rgba(0,0,0,.12); color: #1a1a1a;
  box-shadow: 0 8px 24px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.9);
}
html:not(.dark-mode) #view-home .bc-arrow:hover:not(:disabled) { background: #1a1a1a; color: #fff; }

html:not(.dark-mode) #view-home .bc-card {
  background: #fff; border-color: rgba(0,0,0,.11);
  box-shadow: 0 14px 34px rgba(0,0,0,.11), inset 0 1px 0 rgba(255,255,255,.85);
}
html:not(.dark-mode) #view-home .bc-card.is-active {
  box-shadow: 0 26px 58px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.92);
}
html:not(.dark-mode) #view-home .bc-card-bg {
  background:
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(247,247,248,.94)),
    url('/images/civilisation/astrolabe-toledo.webp') center / cover no-repeat;
  filter: none; opacity: 1;
}
html:not(.dark-mode) #view-home .bc-card.locked .bc-card-bg { background: linear-gradient(145deg, #f7f7f8, #eeeef0); filter: none; }
html:not(.dark-mode) #view-home .bc-card::before { background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.18) 38%, transparent 60%); }
html:not(.dark-mode) #view-home .bc-veil { background: linear-gradient(to top, rgba(255,255,255,.99), rgba(255,255,255,.91) 56%, rgba(255,255,255,.66)); }
html:not(.dark-mode) #view-home .bc-watermark { color: rgba(26,26,26,.16); }
html:not(.dark-mode) #view-home .bc-body { color: #1a1a1a; }
html:not(.dark-mode) #view-home .bc-more { color: #1a1a1a; border-color: rgba(0,0,0,.1); }
html:not(.dark-mode) #view-home .bc-tag { border-color: rgba(0,0,0,.12); color: #2a2a2e; background: rgba(255,255,255,.74); }
html:not(.dark-mode) #view-home .bc-tag.open { color: #a02a1e; border-color: rgba(192,57,43,.28); background: rgba(192,57,43,.07); }
html:not(.dark-mode) #view-home .bc-progress .bc-bar-cap { color: rgba(26,26,26,.65); }
html:not(.dark-mode) #view-home .bc-cell { background: rgba(0,0,0,.07); border-color: rgba(0,0,0,.1); }
html:not(.dark-mode) #view-home .bc-cell.on { background: #c0392b; border-color: #c0392b; }
html:not(.dark-mode) #view-home .bc-release-chip { color: #a02a1e; background: rgba(192,57,43,.07); border-color: rgba(192,57,43,.24); }

.bc-card[data-readiness="raw"] { cursor: default; }
.bc-card[data-readiness="raw"] .bc-more { color: rgba(26,26,26,.48) !important; }
.bc-card[data-readiness="raw"] .bc-tag { color: #2a2a2e !important; }

/* Reader chrome and source panes: white by default, dark remains explicit opt-in. */
html:not(.dark-mode) #view-reader,
html:not(.dark-mode) #view-bidayah,
html:not(.dark-mode) #view-muntazam { background: #fff; color: #2a2a2e; }
html:not(.dark-mode) #view-reader .rv-hero,
html:not(.dark-mode) #view-bidayah .dh-hero,
html:not(.dark-mode) #view-muntazam .mz-hero {
  background: #f7f7f8 !important; color: #1a1a1a !important; border-color: rgba(0,0,0,.1);
}
html:not(.dark-mode) #view-reader .rv-hero *,
html:not(.dark-mode) #view-bidayah .dh-hero *,
html:not(.dark-mode) #view-muntazam .mz-hero * { color: inherit; }
html:not(.dark-mode) #view-reader .rd-glass,
html:not(.dark-mode) #view-reader .tm-sidebar,
html:not(.dark-mode) #view-reader .tm-content,
html:not(.dark-mode) #view-bidayah .rd-glass,
html:not(.dark-mode) #view-bidayah .tm-sidebar,
html:not(.dark-mode) #view-bidayah .tm-content {
  background: rgba(255,255,255,.86) !important; border-color: rgba(0,0,0,.1) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
html:not(.dark-mode) #view-reader .rv-ar,
html:not(.dark-mode) #view-reader [lang="ar"],
html:not(.dark-mode) #view-bidayah [lang="ar"] { color: #1a1a1a; }

@media (max-width: 767px) {
  html:not(.dark-mode) #view-home .htm-hero { min-height: 610px; padding: 7rem 20px 4rem; align-items: end; }
  html:not(.dark-mode) #view-home .htm-hero::before { background-position: 58% 10%; background-size: auto 58%; opacity: .22; }
  html:not(.dark-mode) #view-home .htm-hero::after {
    background: linear-gradient(0deg, #fff 0%, rgba(255,255,255,.98) 58%, rgba(255,255,255,.45) 100%);
  }
  #view-home .htm-hero-copy { width: 100%; }
  #view-home .htm-hero-meta { grid-template-columns: 1fr; }
  #view-home .htm-hero-meta span { border-right: 0; border-bottom: 1px solid rgba(0,0,0,.08); }
  #view-home .htm-hero-meta span:last-child { border-bottom: 0; }
  .htm-hero-actions { flex-direction: column; }
  .htm-hero-action { width: 100%; }
  html:not(.dark-mode) #view-home .bc-section { padding-top: 26px; }
  html:not(.dark-mode) #view-home .bc-stage { height: 445px; }
  .bc-flow-prev { left: 6px; }
  .bc-flow-next { right: 6px; }
  .bc-flow-btn { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.dark-mode) #view-home .htm-hero::before { animation: none !important; transform: none !important; }
  .htm-hero-action { transition: none; }
  #view-home .bc-card { transition: none !important; }
}

/* ──────────────────────────────────────────────────────────
   Responsive product split
   Desktop is an editorial reader shell. Mobile/tablet is a
   native horizontal rail; it never inherits desktop geometry.
   ────────────────────────────────────────────────────────── */

.tm-editorial,
.tm-mobile-bento { display: none; }

@media (max-width: 1099px) {
  html:not(.dark-mode) body.ifp-tools-page { background: var(--ink) !important; }
  .htm-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
  #view-home { left: 0 !important; width: 100% !important; margin: 0 !important; }
  #view-home > .htm-hero,
  #view-home > .bc-section,
  #view-home > .tm-editorial { display: none !important; }
  #view-home > .tm-mobile-bento { display: block; }

  .tm-mobile-bento {
    width: 100%;
    padding: 92px 0 56px;
    overflow: hidden;
    background: var(--ink);
    color: var(--heading);
  }
  .tm-mobile-intro {
    width: min(100% - 36px, 760px);
    margin: 0 auto;
    padding: 30px 0 28px;
  }
  .tm-mobile-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--accent);
    font-family: var(--ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
  }
  .tm-mobile-kicker::before {
    content: '';
    width: 42px;
    height: 1px;
    background: currentColor;
  }
  .tm-mobile-intro h1 {
    display: flex;
    flex-wrap: wrap;
    gap: 0 .22em;
    max-width: none;
    margin: 0;
    color: var(--heading);
    font-family: var(--serif);
    font-size: clamp(38px, 10.8vw, 56px);
    font-weight: 720;
    line-height: 1.04;
    letter-spacing: -.035em;
    text-wrap: balance;
  }
  .tm-mobile-intro h1 span {
    display: inline-block;
    white-space: nowrap;
  }
  .tm-mobile-intro > p:not(.tm-mobile-kicker) {
    max-width: 680px;
    margin: 24px 0 0;
    color: var(--text);
    font-family: var(--thai);
    font-size: clamp(16px, 4.6vw, 20px);
    line-height: 1.75;
  }
  .tm-mobile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    width: min(100% - 28px, 820px);
    margin: 4px auto 0;
  }
  .tm-mobile-card {
    position: relative;
    isolation: isolate;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.16);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 22px 48px rgba(0,0,0,.13);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
  }
  .tm-mobile-beam-ring,
  .tm-mobile-beam-glow {
    --tm-beam-a: 40deg;
    position: absolute;
    inset: -1px;
    z-index: 5;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from var(--tm-beam-a),
      transparent 0deg,
      rgba(192,57,43,.04) 18deg,
      rgba(192,57,43,.64) 48deg,
      #c0392b 58deg,
      #f2aaa4 63deg,
      transparent 69deg,
      transparent 192deg,
      rgba(255,255,255,.04) 212deg,
      rgba(255,255,255,.62) 238deg,
      #fff 244deg,
      transparent 251deg,
      transparent 360deg);
    animation: tm-border-beam-loop 10.5s linear infinite;
    animation-play-state: paused;
  }
  .tm-mobile-beam-ring {
    padding: 2px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }
  .tm-mobile-beam-glow {
    z-index: 0;
    filter: blur(14px);
    opacity: .24;
  }
  .tm-mobile-card[data-beam-active="true"] .tm-mobile-beam-ring,
  .tm-mobile-card[data-beam-active="true"] .tm-mobile-beam-glow { animation-play-state: running; }
  .tm-mobile-card:hover .tm-mobile-beam-ring,
  .tm-mobile-card:hover .tm-mobile-beam-glow,
  .tm-mobile-card:focus-within .tm-mobile-beam-ring,
  .tm-mobile-card:focus-within .tm-mobile-beam-glow { animation-duration: 5.5s; }

  .tm-mobile-card.is-visible { opacity: 1; transform: none; }
  .tm-mobile-card:focus-within { box-shadow: 0 0 0 3px rgba(192,57,43,.24),0 22px 48px rgba(0,0,0,.13); }
  .tm-mobile-visual {
    height: clamp(260px, 82vw, 390px);
    background-image: linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.62)),var(--tm-card-image);
    background-position: center;
    background-size: cover;
    filter: saturate(.78) contrast(1.03);
    transform: scale(1.01);
    transition: transform .7s cubic-bezier(.2,.7,.2,1);
  }
  .tm-mobile-card:focus-within .tm-mobile-visual { transform: scale(1.035); }
  .tm-mobile-copy {
    position: relative;
    z-index: 2;
    margin-top: 0;
    padding: 24px 22px 22px;
    color: #161616;
    background: #fff;
  }
  .tm-mobile-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }
  .tm-mobile-index {
    color: #5f6368;
    font-family: var(--ui);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  .tm-mobile-ar {
    margin: 0;
    color: #4a4a4a;
    font-family: var(--arabic);
    font-size: 23px;
    line-height: 1.45;
    text-align: left;
  }
  .tm-mobile-copy h2 {
    margin: 4px 0 0;
    color: #161616;
    font-family: var(--serif);
    font-size: clamp(27px,7.5vw,36px);
    font-weight: 750;
    line-height: 1.18;
    letter-spacing: -.035em;
  }
  .tm-mobile-author {
    margin: 8px 0 0;
    color: #5f6368;
    font-family: var(--thai);
    font-size: 13px;
    line-height: 1.45;
  }
  .tm-mobile-description {
    margin: 18px 0 0;
    color: #343434;
    font-family: var(--thai);
    font-size: 14px;
    line-height: 1.75;
  }
  .tm-mobile-card-footer {
    display: grid;
    gap: 14px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(0,0,0,.14);
  }
  .tm-mobile-progress {
    color: #5f6368;
    font-family: var(--thai);
    font-size: 12px;
    line-height: 1.5;
  }
  .tm-mobile-open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    width: 100%;
    padding: 11px 16px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    background: #fff;
    color: #111;
    font-family: var(--thai);
    font-size: 14px;
    font-weight: 750;
  }
  .tm-mobile-open:focus-visible { outline: 3px solid rgba(192,57,43,.72); outline-offset: 3px; }
  .tm-mobile-wait {
    display: block;
    padding: 12px 16px;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 999px;
    color: #5f6368;
    font-family: var(--thai);
    font-size: 13px;
    text-align: center;
  }

}

@media (min-width: 700px) and (max-width: 1099px) {
  .tm-mobile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tm-mobile-card:first-child { grid-column: 1 / -1; }
  .tm-mobile-card:first-child .tm-mobile-visual { height: 430px; }
  .tm-mobile-copy { min-height: 360px; }
}

@media (max-width: 359px) {
  .tm-mobile-bento { padding-top: 82px; }
  .tm-mobile-intro { width: min(100% - 28px,760px); }
  .tm-mobile-grid { width: min(100% - 20px,820px); }
  .tm-mobile-card { border-radius: 22px; }
  .tm-mobile-copy { padding-inline: 18px; }
}

@property --tm-beam-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 40deg;
}
@keyframes tm-border-beam-loop {
  to { --tm-beam-a: 400deg; }
}

@media (prefers-reduced-motion: reduce) {
  .tm-mobile-card,
  .tm-mobile-card.is-visible,
  .tm-mobile-visual { opacity: 1; transform: none; transition: none; }
  .tm-mobile-beam-ring,
  .tm-mobile-beam-glow { --tm-beam-a: 40deg; animation: none; }
}

@media (min-width: 1100px) {
  html:not(.dark-mode) body.ifp-tools-page { background: #fff !important; }
  .htm-container { margin: 0 !important; padding: 0 !important; }
  #view-home { left: 0 !important; width: 100% !important; margin: 0 !important; }
  html:not(.dark-mode) body.ifp-tools-page .chrome {
    background: rgba(255,255,255,.97) !important;
    color: var(--heading) !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
    backdrop-filter: blur(14px);
  }
  html:not(.dark-mode) body.ifp-tools-page .chrome::before,
  html:not(.dark-mode) body.ifp-tools-page .chrome::after { display: none !important; }
  /* Keep the light chrome controls readable without recolouring the dark
     mega-menu surface nested inside .chrome. */
  html:not(.dark-mode) body.ifp-tools-page .chrome .chrome-wordmark,
  html:not(.dark-mode) body.ifp-tools-page .chrome-nav .nav-item:not(.nav-mega-link),
  html:not(.dark-mode) body.ifp-tools-page .chrome-right .chrome-icon-btn,
  html:not(.dark-mode) body.ifp-tools-page .chrome-right .ifp-auth-btn,
  html:not(.dark-mode) body.ifp-tools-page .chrome-right .ifp-tier,
  html:not(.dark-mode) body.ifp-tools-page .chrome-right .ifp-avatar { color: var(--heading) !important; }
  html:not(.dark-mode) body.ifp-tools-page .chrome-search,
  html:not(.dark-mode) body.ifp-tools-page .chrome-search-input {
    background: var(--ink) !important;
    color: var(--heading) !important;
    border-color: var(--line-strong) !important;
  }
  #view-home > .htm-hero,
  #view-home > .bc-section { display: none !important; }
  #view-home .tm-editorial { display: grid; }
  .htm-container { max-width: none !important; width: 100% !important; }

  .tm-editorial {
    grid-template-columns: 342px minmax(0, 1fr);
    min-height: 100vh;
    padding-top: 72px;
    border-bottom: 1px solid rgba(0,0,0,.1);
    background: #fff;
  }
  .tm-ed-sidebar {
    position: relative;
    z-index: 3;
    padding: 38px 32px 26px 48px;
    border-right: 1px solid rgba(0,0,0,.1);
    background: #fff;
  }
  .tm-ed-kicker {
    margin: 0 0 8px;
    color: #c0392b;
    font-family: var(--ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  .tm-ed-sidebar h1 {
    margin: 0;
    color: #1a1a1a;
    font-family: var(--heading);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.025em;
  }
  .tm-ed-intro {
    margin: 6px 0 24px;
    color: rgba(26,26,26,.62);
    font-family: var(--thai);
    font-size: 13px;
    line-height: 1.6;
  }
  .tm-ed-list {
    position: relative;
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tm-ed-list::before {
    content: '';
    position: absolute;
    top: 18px;
    bottom: 18px;
    left: 11px;
    width: 1px;
    background: rgba(192,57,43,.42);
  }
  .tm-ed-item { position: relative; }
  .tm-ed-select {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0,1fr);
    gap: 14px;
    width: 100%;
    min-height: 91px;
    padding: 8px 0;
    border: 0;
    background: transparent;
    color: #1a1a1a;
    text-align: left;
    cursor: pointer;
  }
  .tm-ed-index {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: 4px;
    border: 1px solid rgba(192,57,43,.55);
    border-radius: 50%;
    background: #fff;
    color: #c0392b;
    font-family: var(--ui);
    font-size: 9px;
    font-weight: 700;
  }
  .tm-ed-select[aria-current="true"] .tm-ed-index {
    border-color: #c0392b;
    background: #c0392b;
    color: #fff;
  }
  .tm-ed-copy { min-width: 0; }
  .tm-ed-ar {
    display: block;
    overflow: hidden;
    color: rgba(26,26,26,.56);
    font-family: var(--arabic);
    font-size: 15px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tm-ed-name {
    display: block;
    margin-top: 1px;
    color: #1a1a1a;
    font-family: var(--heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
  }
  .tm-ed-author,
  .tm-ed-state {
    display: block;
    margin-top: 2px;
    font-family: var(--thai);
    font-size: 11px;
    line-height: 1.35;
  }
  .tm-ed-author { color: rgba(26,26,26,.55); }
  .tm-ed-state { color: #c0392b; font-weight: 700; }
  .tm-ed-select[aria-disabled="true"] { cursor: default; }
  .tm-ed-select[aria-disabled="true"] .tm-ed-copy,
  .tm-ed-select[aria-disabled="true"] .tm-ed-index { opacity: .42; }
  .tm-ed-select:focus-visible { outline: 2px solid #c0392b; outline-offset: 4px; }

  .tm-ed-main {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #fff;
  }
  .tm-ed-photo {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 310px;
    background-position: center 42%;
    background-size: cover;
    opacity: .78;
    transition: opacity .25s ease;
  }
  .tm-ed-photo-shade {
    position: absolute;
    top: 176px;
    right: 0;
    left: 0;
    height: 168px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 -24px 50px rgba(255,255,255,.9);
  }
  .tm-ed-detail {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    margin: 0 auto;
    padding: 220px 48px 46px;
  }
  .tm-ed-collection {
    margin: 0 0 10px;
    color: #c0392b;
    font-family: var(--ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  .tm-ed-detail-ar {
    margin: 0 0 4px;
    color: #1a1a1a;
    font-family: var(--arabic);
    font-size: 31px;
    line-height: 1.4;
    text-align: left;
  }
  .tm-ed-detail h2 {
    max-width: 900px;
    margin: 0;
    color: #1a1a1a;
    font-family: var(--heading);
    font-size: clamp(32px, 3.2vw, 48px);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.035em;
  }
  .tm-ed-description {
    max-width: 880px;
    margin: 14px 0 0;
    color: #2a2a2e;
    font-family: var(--thai);
    font-size: 15px;
    line-height: 1.75;
  }
  .tm-ed-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 18px 0 0;
    padding: 0;
    color: rgba(26,26,26,.58);
    font-family: var(--thai);
    font-size: 12px;
    list-style: none;
  }
  .tm-ed-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
  }
  .tm-ed-action {
    min-height: 46px;
    padding: 10px 26px;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 3px;
    background: #fff;
    color: #1a1a1a;
    font-family: var(--thai);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }
  .tm-ed-action-primary { border-color: #c0392b; background: #c0392b; color: #fff; }
  .tm-ed-action[disabled] { opacity: .46; cursor: not-allowed; }
  .tm-ed-action:focus-visible { outline: 3px solid rgba(192,57,43,.24); outline-offset: 3px; }
  .tm-ed-sample {
    margin-top: 34px;
    border-top: 1px solid rgba(0,0,0,.1);
    padding-top: 15px;
  }
  .tm-ed-sample h3 {
    margin: 0 0 9px;
    color: #1a1a1a;
    font-family: var(--heading);
    font-size: 13px;
    font-weight: 700;
  }
  .tm-ed-table {
    width: 100%;
    border-collapse: collapse;
    color: #2a2a2e;
    font-family: var(--thai);
    font-size: 12px;
  }
  .tm-ed-table th,
  .tm-ed-table td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    text-align: left;
    vertical-align: top;
  }
  .tm-ed-table th { color: #1a1a1a; font-weight: 700; }
  .tm-ed-row-index {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid #c0392b;
    border-radius: 50%;
    color: #c0392b;
    font-family: var(--ui);
    font-size: 9px;
    font-weight: 700;
  }
  .tm-ed-context-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-top: 18px;
    padding: 9px 0 8px;
    border-top: 1px solid rgba(0,0,0,.16);
    color: #a02a1e;
    font-family: var(--thai);
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    transition: color .15s, border-color .15s;
  }
  .tm-ed-context-link:hover,
  .tm-ed-context-link:focus-visible { color: #6f1d16; border-top-color: #c0392b; }
  .tm-ed-context-link:focus-visible { outline: 3px solid rgba(192,57,43,.35); outline-offset: 4px; }

}

@media (min-width: 1100px) and (max-width: 1280px) {
  .tm-editorial { grid-template-columns: 304px minmax(0,1fr); }
  .tm-ed-sidebar { padding-left: 32px; padding-right: 24px; }
  .tm-ed-detail { padding-right: 34px; padding-left: 34px; }
  .tm-ed-detail h2 { font-size: 36px; }
}


/* Book reader system — shared presentation across all live collections. */
html:not(.dark-mode) #view-bidayah,
html:not(.dark-mode) #view-muntazam,
html:not(.dark-mode) #view-reader {
  /* Desktop chrome has no flow spacer; reserve its fixed 72px here. */
  --ifp-header-offset: 72px;
  --tm-reader-paper: var(--ink);
  --tm-reader-layer: var(--ink-2);
  --tm-reader-layer-strong: var(--ink-3);
  --tm-reader-ink: var(--heading);
  --tm-reader-text: var(--text);
  --tm-reader-muted: var(--muted);
  --tm-reader-rule: var(--line);
  --tm-reader-rule-strong: var(--line-strong);
  --tm-reader-accent: var(--accent);
  --tm-reader-accent-deep: var(--accent-deep);
  min-width: 0;
  overflow-x: clip;
  background: var(--tm-reader-paper);
  color: var(--tm-reader-text);
}

html:not(.dark-mode) #view-bidayah .dh-hero,
html:not(.dark-mode) #view-muntazam .mz-hero,
html:not(.dark-mode) #view-reader .rv-hero {
  min-height: 0;
  margin-top: max(16px, calc(var(--ifp-header-offset) + 16px));
  padding: clamp(76px,10vw,112px) clamp(22px,5vw,64px) clamp(44px,7vw,76px);
  border: 1px solid var(--tm-reader-rule);
  border-radius: 28px;
  background: var(--tm-reader-ink) !important;
  color: var(--tm-reader-paper) !important;
  box-shadow: 0 22px 48px rgba(0,0,0,.12);
  text-align: left;
}
html:not(.dark-mode) #view-bidayah .dh-hero::before,
html:not(.dark-mode) #view-bidayah .dh-hero::after,
html:not(.dark-mode) #view-bidayah .dh-sky,
html:not(.dark-mode) #view-bidayah .dh-sun,
html:not(.dark-mode) #view-bidayah .dh-haze,
html:not(.dark-mode) #view-bidayah .dh-dunes { display:none !important; }
html:not(.dark-mode) #view-bidayah .dh-inner,
html:not(.dark-mode) #view-muntazam .mz-hero > *,
html:not(.dark-mode) #view-reader .rv-hero-inner {
  width:min(100%,760px); max-width:760px; margin-inline:auto;
}
html:not(.dark-mode) #view-bidayah .dh-inner { padding:0; }
html:not(.dark-mode) #view-bidayah .dh-kicker,
html:not(.dark-mode) #view-muntazam .mz-kicker,
html:not(.dark-mode) #view-reader .rv-eyebrow {
  margin:0 0 18px; color:var(--tm-reader-accent) !important;
  font-family:var(--ui); font-size:11px; font-weight:700;
  letter-spacing:.17em; line-height:1.4; text-transform:uppercase;
}
html:not(.dark-mode) #view-bidayah .dh-title,
html:not(.dark-mode) #view-muntazam .mz-title,
html:not(.dark-mode) #view-reader .rv-title {
  min-width:0; margin:0; color:var(--tm-reader-paper) !important;
  font-family:var(--heading); font-size:clamp(34px,6vw,64px);
  font-style:normal; font-weight:760; letter-spacing:-.035em;
  line-height:1.12; overflow-wrap:anywhere; text-wrap:balance;
}
html:not(.dark-mode) #view-bidayah .dh-title em { color:inherit !important; font-style:normal; }
html:not(.dark-mode) #view-bidayah .dh-arabic,
html:not(.dark-mode) #view-muntazam .mz-arabic,
html:not(.dark-mode) #view-reader .rv-arabic {
  margin:20px 0 0; color:rgba(255,255,255,.8) !important;
  font-family:var(--arabic); font-size:clamp(25px,4vw,38px);
  line-height:1.65; text-align:left;
}
html:not(.dark-mode) #view-bidayah .dh-author,
html:not(.dark-mode) #view-muntazam .mz-author,
html:not(.dark-mode) #view-reader .rv-author {
  margin:14px 0 0; color:var(--tm-reader-paper) !important;
  font-family:var(--thai); font-size:clamp(14px,2vw,17px);
  font-weight:650; line-height:1.7;
}
html:not(.dark-mode) #view-bidayah .dh-desc,
html:not(.dark-mode) #view-muntazam .mz-summary,
html:not(.dark-mode) #view-reader .rv-desc {
  max-width:68ch; margin:18px 0 0; color:rgba(255,255,255,.76) !important;
  font-family:var(--thai); font-size:clamp(15px,2vw,17px); line-height:1.85;
}
html:not(.dark-mode) #view-bidayah button:focus-visible,
html:not(.dark-mode) #view-muntazam button:focus-visible,
html:not(.dark-mode) #view-reader button:focus-visible,
html:not(.dark-mode) #view-reader a:focus-visible {
  outline:3px solid var(--tm-reader-accent); outline-offset:3px;
}
html:not(.dark-mode) #view-bidayah .dh-cta {
  margin-top:28px; border:1px solid var(--tm-reader-accent); border-radius:14px;
  background:var(--tm-reader-accent); color:var(--tm-reader-paper);
  box-shadow:none; font-family:var(--thai); font-weight:750;
}
html:not(.dark-mode) #view-bidayah .dh-cta:hover {
  background:var(--tm-reader-accent-deep); transform:translateY(-1px);
}
html:not(.dark-mode) #view-bidayah .tm-status-chip,
html:not(.dark-mode) #view-bidayah .tm-bidayah-strip,
html:not(.dark-mode) #view-reader .tm-status-chip,
html:not(.dark-mode) #view-bidayah .tm-release-btn,
html:not(.dark-mode) #view-muntazam .tm-release-btn { display:none !important; }

html:not(.dark-mode) #view-bidayah .rd-bar,
html:not(.dark-mode) #view-reader .rd-bar {
  top:74px; min-height:58px; padding:8px;
  border:1px solid var(--tm-reader-rule); border-radius:16px;
  background:rgba(255,255,255,.94) !important; color:var(--tm-reader-ink);
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}
html:not(.dark-mode) #view-bidayah .rd-toc-toggle,
html:not(.dark-mode) #view-reader .rd-toc-toggle,
html:not(.dark-mode) #view-reader .rv-ar-btn,
html:not(.dark-mode) #view-bidayah .rd-font,
html:not(.dark-mode) #view-reader .rd-font {
  border-color:var(--tm-reader-rule-strong); border-radius:12px;
  background:var(--tm-reader-layer);
}
html:not(.dark-mode) #view-bidayah .rd-glass,
html:not(.dark-mode) #view-reader .rd-glass,
html:not(.dark-mode) #view-bidayah .tm-content,
html:not(.dark-mode) #view-reader .tm-content {
  border-color:var(--tm-reader-rule) !important; border-radius:18px;
  background:var(--tm-reader-paper) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.07) !important;
}
html:not(.dark-mode) #view-bidayah .tm-content,
html:not(.dark-mode) #view-reader .tm-content { padding:clamp(24px,4vw,48px); }
html:not(.dark-mode) #view-bidayah .tm-sidebar,
html:not(.dark-mode) #view-reader .tm-sidebar { background:var(--tm-reader-layer) !important; }
html:not(.dark-mode) #view-reader .rv-kicker {
  color:var(--tm-reader-accent); letter-spacing:.08em;
}
html:not(.dark-mode) #view-reader .rv-h-th {
  color:var(--tm-reader-ink); font-family:var(--heading);
  font-size:calc(clamp(24px,4vw,36px) * var(--rd-fs)); line-height:1.45;
}
html:not(.dark-mode) #view-reader .rv-h-ar,
html:not(.dark-mode) #view-reader .rv-ar { color:var(--tm-reader-ink); }
html:not(.dark-mode) #view-reader .rv-th {
  color:var(--tm-reader-text); font-size:calc(17px * var(--rd-fs)); line-height:2;
}

html:not(.dark-mode) #view-muntazam .mz-wrap {
  width:min(100% - 32px,1000px); min-height:0; margin:0 auto;
  padding:clamp(28px,5vw,56px) 0 clamp(56px,8vw,96px);
}
html:not(.dark-mode) #view-muntazam .mz-draft,
html:not(.dark-mode) #view-muntazam .mz-section {
  border:1px solid var(--tm-reader-rule); border-radius:18px;
  background:var(--tm-reader-paper); box-shadow:0 18px 44px rgba(0,0,0,.07);
}
html:not(.dark-mode) #view-muntazam .mz-draft {
  max-width:760px; margin:0 auto; padding:clamp(28px,5vw,52px); text-align:left;
}
html:not(.dark-mode) #view-muntazam .mz-draft h3 {
  color:var(--tm-reader-ink); font-family:var(--heading);
  font-size:clamp(25px,4vw,36px); line-height:1.35;
}
html:not(.dark-mode) #view-muntazam .mz-draft p,
html:not(.dark-mode) #view-muntazam .mz-progress-note {
  color:var(--tm-reader-text); font-family:var(--thai); line-height:1.8;
}
html:not(.dark-mode) #view-muntazam .mz-progress-note {
  margin-top:18px; padding-top:18px; border-top:1px solid var(--tm-reader-rule);
  color:var(--tm-reader-muted);
}
html:not(.dark-mode) #view-muntazam .mz-bars { max-width:none; margin-top:26px; }
html:not(.dark-mode) #view-muntazam .mz-cell {
  border-color:var(--tm-reader-rule); background:var(--tm-reader-layer-strong);
}
html:not(.dark-mode) #view-muntazam .mz-cell.on {
  border-color:var(--tm-reader-accent); background:var(--tm-reader-accent);
}
html:not(.dark-mode) #view-muntazam .mz-section {
  margin-bottom:20px; padding:clamp(20px,4vw,34px);
}
html:not(.dark-mode) #view-muntazam .mz-section-h {
  border-color:var(--tm-reader-accent); color:var(--tm-reader-ink); font-family:var(--heading);
}
html:not(.dark-mode) #view-muntazam .mz-row {
  border-color:var(--tm-reader-rule); border-radius:12px;
  background:var(--tm-reader-layer); color:var(--tm-reader-ink);
}
html:not(.dark-mode) #view-muntazam .mz-row:hover {
  border-color:var(--tm-reader-accent); background:var(--tm-reader-paper);
}
html:not(.dark-mode) #view-bidayah .timeline-empty,
html:not(.dark-mode) #view-muntazam .timeline-empty,
html:not(.dark-mode) #view-reader .rv-empty,
html:not(.dark-mode) #view-reader .timeline-empty,
html:not(.dark-mode) #view-muntazam .mz-error {
  min-height:220px; display:grid; place-items:center; padding:48px 24px;
  color:var(--tm-reader-muted) !important; font-family:var(--thai);
  font-size:16px; line-height:1.8; text-align:center;
}

/* Parent/work context is the return affordance. Keep it editorial and
   text-led instead of repeating a second floating back button. */
html:not(.dark-mode) .tm-context-bar {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  max-width:760px; margin:0 auto 18px; padding:0 2px;
  font-family:var(--thai); font-size:13.5px; color:var(--tm-reader-muted);
}
html:not(.dark-mode) .tm-context-link,
html:not(.dark-mode) .rd-crumb-link,
html:not(.dark-mode) .rd-crumb-book {
  display:inline-flex; align-items:center; min-height:44px; padding:8px 0;
  border-bottom:1px solid transparent; color:var(--tm-reader-muted);
  font:inherit; text-decoration:none; transition:color .15s, border-color .15s;
}
html:not(.dark-mode) .tm-context-link:hover,
html:not(.dark-mode) .tm-context-link:focus-visible,
html:not(.dark-mode) .rd-crumb-link:hover,
html:not(.dark-mode) .rd-crumb-link:focus-visible,
html:not(.dark-mode) .rd-crumb-book:hover,
html:not(.dark-mode) .rd-crumb-book:focus-visible {
  color:var(--tm-reader-accent); border-bottom-color:var(--tm-reader-accent);
}
html:not(.dark-mode) .tm-context-link-current,
html:not(.dark-mode) .rd-crumb-book { color:var(--tm-reader-ink); font-weight:700; }
html:not(.dark-mode) .tm-context-sep { color:var(--tm-reader-muted); }

@media (max-width:860px) {
  html,body { overflow-x:clip; }
  html:not(.dark-mode) #view-bidayah,
  html:not(.dark-mode) #view-muntazam,
  html:not(.dark-mode) #view-reader { padding-inline:14px; }
  html:not(.dark-mode) #view-bidayah .dh-hero,
  html:not(.dark-mode) #view-muntazam .mz-hero,
  html:not(.dark-mode) #view-reader .rv-hero {
    width:100%; margin:16px 0 14px;
    padding:24px 20px 36px; border-radius:22px;
  }
  html:not(.dark-mode) #view-bidayah .dh-title,
  html:not(.dark-mode) #view-muntazam .mz-title,
  html:not(.dark-mode) #view-reader .rv-title { font-size:clamp(31px,10vw,48px); }
  html:not(.dark-mode) #view-bidayah .dh-arabic,
  html:not(.dark-mode) #view-muntazam .mz-arabic,
  html:not(.dark-mode) #view-reader .rv-arabic { text-align:right; }
  html:not(.dark-mode) #view-bidayah .rd-wide,
  html:not(.dark-mode) #view-reader .rd-wide { width:100%; margin-inline:0; }
  html:not(.dark-mode) #view-bidayah .rd-bar,
  html:not(.dark-mode) #view-reader .rd-bar { top:8px; gap:6px; overflow:hidden; flex-wrap:wrap; }
  html:not(.dark-mode) #view-bidayah .rd-crumbs,
  html:not(.dark-mode) #view-reader .rd-crumbs {
    display:flex; order:10; flex:0 0 100%; width:100%; min-width:0;
    padding-top:5px; border-top:1px solid var(--tm-reader-rule);
  }
  html:not(.dark-mode) #view-bidayah .rd-crumb-book,
  html:not(.dark-mode) #view-reader .rd-crumb-book { display:inline-flex; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  html:not(.dark-mode) #view-bidayah .rd-crumb-book + .rd-crumb-sep,
  html:not(.dark-mode) #view-reader .rd-crumb-book + .rd-crumb-sep { display:inline; }
  html:not(.dark-mode) #view-bidayah .rd-toc-toggle,
  html:not(.dark-mode) #view-reader .rd-toc-toggle,
  html:not(.dark-mode) #view-reader .rv-ar-btn {
    min-height:40px; padding-inline:12px; white-space:nowrap;
  }
  html:not(.dark-mode) #view-bidayah .rd-font,
  html:not(.dark-mode) #view-reader .rd-font { margin-left:auto; }
  html:not(.dark-mode) #view-bidayah .tm-layout,
  html:not(.dark-mode) #view-reader .tm-layout { display:block; }
  html:not(.dark-mode) #view-bidayah .tm-content,
  html:not(.dark-mode) #view-reader .tm-content {
    width:100%; padding:26px 20px; border-radius:16px;
  }
  html:not(.dark-mode) #view-bidayah .tm-sidebar,
  html:not(.dark-mode) #view-reader .tm-sidebar { width:min(340px,88vw); }
  html:not(.dark-mode) #view-muntazam .mz-wrap { width:100%; padding-inline:0; }
  html:not(.dark-mode) .tm-context-bar { margin-bottom:12px; padding-inline:2px; }
  html:not(.dark-mode) #view-muntazam .mz-row { align-items:flex-start; flex-wrap:wrap; }
  html:not(.dark-mode) #view-muntazam .mz-row-meta { width:100%; margin-left:0; }
}
@media (max-width:980px) {
  html:not(.dark-mode) #view-bidayah,
  html:not(.dark-mode) #view-muntazam,
  html:not(.dark-mode) #view-reader { --ifp-header-offset: 0px; }
}
@media (max-width:374px) {
  html:not(.dark-mode) #view-bidayah,
  html:not(.dark-mode) #view-muntazam,
  html:not(.dark-mode) #view-reader { padding-inline:10px; }
  html:not(.dark-mode) #view-bidayah .dh-hero,
  html:not(.dark-mode) #view-muntazam .mz-hero,
  html:not(.dark-mode) #view-reader .rv-hero { padding-inline:16px; }
  html:not(.dark-mode) #view-bidayah .rd-bar,
  html:not(.dark-mode) #view-reader .rd-bar { padding:6px; }
  html:not(.dark-mode) #view-bidayah .rd-toc-toggle,
  html:not(.dark-mode) #view-reader .rd-toc-toggle,
  html:not(.dark-mode) #view-reader .rv-ar-btn { font-size:12px; padding-inline:9px; }
  html:not(.dark-mode) #view-bidayah .rd-font-val,
  html:not(.dark-mode) #view-reader .rd-font-val { min-width:34px; }
}
@media (prefers-reduced-motion:reduce) {
  html:not(.dark-mode) #view-bidayah *,
  html:not(.dark-mode) #view-muntazam *,
  html:not(.dark-mode) #view-reader * {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ── 5-stage editorial progress (DISPLAY-ONLY) ───────────────────────────────
   Shown under every volume in the observatory sidebar (.tm-ed-select) and in the
   mobile bento footer (.tm-mobile-stage). Reuses the ps-* bar classes from the
   page <style> (the #1156 carousel bar) as a single visual source; here the
   elements are <span> — the desktop bar lives inside the .tm-ed-select <button>,
   so ps-wrap/ps-cap need an explicit block display. Both surfaces render on a
   white card, so one light palette (brand-red fill) serves both themes. The bar
   shows for EVERY tier including owner — access stays server-gated (progress is
   public status, not content). */
.tm-ed-progress { display: block; margin-top: 10px; }
.tm-ed-progress .ps-wrap { display: block; margin: 0; }
.tm-ed-progress .ps-steps { display: flex; gap: 5px; }
.tm-ed-progress .ps-step { flex: 1 1 0; height: 6px; border-radius: 2px; background: rgba(26,26,26,.14); }
.tm-ed-progress .ps-step.on { background: #c0392b; }
.tm-ed-progress .ps-cap {
  display: block; margin-top: 6px;
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  color: #5f6368; letter-spacing: .01em;
}
.tm-stage-tag {
  display: inline-block; margin-top: 5px;
  font-family: var(--thai); font-size: 11px; font-weight: 700;
  color: #c0392b; letter-spacing: .01em;
}
/* Mobile bento footer is a grid (its `gap` spaces rows); the block spans full width. */
.tm-mobile-stage.tm-ed-progress { margin-top: 0; }