/* ==========================================================================
   Prose — rendered body blocks (blog posts, lessons). See components/prose.js.
   ========================================================================== */
.prose {
  margin-top: var(--cds-spacing-07);
  font-size: 1.0625rem;
  line-height: 1.75rem;
}

.prose > * + * {
  margin-top: var(--cds-spacing-05);
}

.prose__h2 {
  margin-top: var(--cds-spacing-08) !important;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 400;
}

.prose__list {
  padding-left: var(--cds-spacing-06);
  list-style: square;
}

.prose__list li + li {
  margin-top: var(--cds-spacing-03);
}

.prose__list li::marker {
  color: var(--cds-interactive);
}

.prose__quote {
  padding-left: var(--cds-spacing-05);
  border-left: 4px solid var(--cds-interactive);
  font-size: 1.375rem;
  line-height: 2rem;
  font-weight: 300;
}

.prose__quote cite {
  display: block;
  margin-top: var(--cds-spacing-03);
  font-size: 0.875rem;
  font-style: normal;
  color: var(--cds-text-secondary);
}

.prose__callout {
  padding: var(--cds-spacing-05);
  border-left: 3px solid var(--cds-support-info);
  background: var(--cds-layer);
}

.prose__callout--warning {
  border-left-color: var(--cds-support-warning);
}

/* A defence tip. */
.prose__callout--success {
  border-left-color: var(--cds-support-success);
}

/* A legal / scope / danger note — used on hands-on and PoC material. */
.prose__callout--danger {
  border-left-color: var(--cds-support-error);
}

.prose__code {
  overflow-x: auto;
  padding: var(--cds-spacing-05);
  font-family: var(--cds-font-mono);
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--cds-gray-10);
  background: var(--cds-gray-100);
}

.prose__run > .prose__code {
  margin: 0;
}

.prose__output-label {
  margin: 0;
  padding: var(--cds-spacing-02) var(--cds-spacing-05);
  font-family: var(--cds-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cds-gray-30);
  background: var(--cds-gray-80);
}

.prose__output {
  margin: 0;
  overflow-x: auto;
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  font-family: var(--cds-font-mono);
  font-size: 0.875rem;
  line-height: 1.375rem;
  color: var(--cds-green-40);
  background: var(--cds-gray-90);
}

.prose__inline-code {
  padding: 0.0625rem 0.3125rem;
  font-family: var(--cds-font-mono);
  font-size: 0.875em;
  background: var(--cds-layer-accent);
}

/* Technical English terms kept in English and highlighted (cybersecurity prose). */
.tech {
  color: var(--cds-text-error, #da1e28);
  font-weight: 600;
  white-space: nowrap;
}

.prose__figure img {
  width: 100%;
  height: auto;
}

/* A live browser-style preview rendered under HTML examples. */
.prose__codewrap { display: block; }
.prose__preview {
  margin: 0 0 var(--cds-spacing-05);
  border: 1px solid var(--cds-border-strong, #6f6f6f);
  background: #ffffff;
}
.prose__run + .prose__preview,
.prose__codecard + .prose__preview,
.prose__output-label + .prose__preview { border-top: 0; }
.prose__preview-bar {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-04);
  padding: var(--cds-spacing-03) var(--cds-spacing-04);
  background: var(--cds-gray-80, #393939);
}
.prose__preview-dots { display: inline-flex; gap: 6px; flex: none; }
.prose__preview-dots i { width: 11px; height: 11px; border-radius: 50%; background: #8d8d8d; }
.prose__preview-dots i:nth-child(1) { background: #fa4d56; }
.prose__preview-dots i:nth-child(2) { background: #f1c21b; }
.prose__preview-dots i:nth-child(3) { background: #42be65; }
.prose__preview-url {
  flex: 1;
  padding: 0.1875rem 0.625rem;
  border-radius: 1rem;
  font-family: var(--cds-font-mono);
  font-size: 0.75rem;
  color: var(--cds-gray-30, #c6c6c6);
  background: var(--cds-gray-90, #262626);
}
.prose__preview-frame {
  display: block;
  width: 100%;
  height: 280px;
  border: 0;
  background: #ffffff;
  color-scheme: light;
}

.prose__figure figcaption {
  margin-top: var(--cds-spacing-03);
  font-size: 0.875rem;
  color: var(--cds-text-secondary);
}

/* Embedded YouTube video (components/prose.js "video" block): responsive 16:9. */
.prose__video {
  margin: var(--cds-spacing-06) 0;
}
.prose__video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.prose__video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.prose__video figcaption {
  margin-top: var(--cds-spacing-03);
  font-size: 0.875rem;
  color: var(--cds-text-secondary);
}

/* Line timeline block (components/prose.js "timeline"): eras sit as dots on one connected
   line — 2020 ●━━━━● 2025–Today — each revealing a panel with a label, heading, text and an
   optional image. Every era draws its own two line halves (::before = left, ::after = right),
   so a new era added in the admin simply extends the line. The line is red up to the selected
   era; the last era trails off in a fade to say "still going". */
.timeline {
  margin: var(--cds-spacing-05) 0;
  --tl-dot: 14px;
  --tl-line: 2px;
  --tl-top: 18px; /* vertical centre of the dot/line inside a tab */
  --tl-on: var(--cds-interactive, #da1e28);
  --tl-off: var(--cds-border-subtle, #c6c6c6);
}
.timeline__tabs {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* room for the selected dot's ring, which would otherwise be clipped at the left edge */
  padding: 0 0 4px 6px;
}
.timeline__tabs::-webkit-scrollbar {
  display: none;
}
/* Compact, left-aligned: each era is a fixed-width step that starts at its dot (under the
   section heading) and draws the line onward to the next era's dot. */
.timeline__tab {
  position: relative;
  flex: 0 0 auto;
  width: 9.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: calc(var(--tl-top) - var(--tl-dot) / 2) 12px 12px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--cds-text-secondary);
  font-family: inherit;
  scroll-snap-align: start;
  transition: color 0.15s ease;
}
/* The line from this era's dot to the next one. */
.timeline__tab::after {
  content: "";
  position: absolute;
  top: calc(var(--tl-top) - var(--tl-line) / 2);
  left: calc(var(--tl-dot) / 2);
  right: 0;
  height: var(--tl-line);
  background: var(--tl-off);
  transition: background 0.25s ease;
}
/* The last era trails off in a short fade ("…to today"). */
.timeline__tab:last-child {
  width: auto;
  min-width: 7rem;
}
.timeline__tab:last-child::after {
  right: auto;
  width: 5rem;
  background: linear-gradient(90deg, var(--tl-off), transparent);
}
/* Filled up to the selected era. */
.timeline__tab.is-past::after {
  background: var(--tl-on);
}
.timeline__tab.is-selected:last-child::after {
  background: linear-gradient(90deg, var(--tl-on), transparent);
}
.timeline__dot {
  position: relative;
  z-index: 1;
  width: var(--tl-dot);
  height: var(--tl-dot);
  border-radius: 50%;
  background: var(--cds-background, #fff);
  border: var(--tl-line) solid var(--tl-off);
  box-sizing: border-box;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.timeline__tab.is-past .timeline__dot {
  background: var(--tl-on);
  border-color: var(--tl-on);
}
.timeline__tab.is-selected .timeline__dot {
  background: var(--tl-on);
  border-color: var(--tl-on);
  transform: scale(1.25);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--tl-on) 20%, transparent);
}
.timeline__tab:hover {
  color: var(--cds-text-primary);
}
.timeline__tab:hover .timeline__dot {
  border-color: var(--tl-on);
}
.timeline__tab.is-selected {
  color: var(--cds-text-primary);
}
.timeline__tab:focus-visible {
  outline: 2px solid var(--cds-focus, #0f62fe);
  outline-offset: -2px;
}
.timeline__tablabel {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}
@media (min-width: 44rem) {
  .timeline__tablabel {
    font-size: 1.125rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .timeline__tab,
  .timeline__tab::after,
  .timeline__dot {
    transition: none;
  }
}
.timeline__panel {
  display: grid;
  gap: var(--cds-spacing-06);
  grid-template-columns: 1fr;
  padding-top: var(--cds-spacing-06);
}
.timeline__panel:focus {
  outline: none;
}
@media (min-width: 44rem) {
  .timeline__panel:has(.timeline__fig) {
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
  }
}
.timeline__era {
  margin: 0 0 var(--cds-spacing-02);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cds-interactive, #da1e28);
}
.timeline__title {
  margin: 0 0 var(--cds-spacing-04);
}
.timeline__text {
  margin: 0;
  color: var(--cds-text-secondary);
  line-height: 1.6;
}
.timeline__fig {
  margin: 0;
}
.timeline__fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--cds-border-subtle);
}

html[lang="km"] .prose {
  line-height: 2rem;
}

/* Code block: a small bar with a Copy button, and coloured tokens. */
.prose__codecard { position: relative; }
.prose__run > .prose__codecard { margin: 0; }
.prose__code-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--cds-spacing-02) var(--cds-spacing-03);
  background: var(--cds-gray-90);
  border-bottom: 1px solid var(--cds-gray-80);
}

/* The programming-language / script label, pinned to the left of the code bar. */
.prose__code-lang {
  margin-inline-end: auto;
  font-family: var(--cds-font-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cds-gray-30, #c6c6c6);
}
.prose__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.75rem;
  padding: 0.125rem 0.625rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cds-gray-30);
  font-size: 0.75rem;
  font-family: var(--cds-font-sans, inherit);
  cursor: pointer;
}
.prose__copy::before {
  content: "";
  width: 0.875rem; height: 0.875rem; flex: none;
  background: currentColor;
  -webkit-mask: var(--copy-ico) center / contain no-repeat;
  mask: var(--copy-ico) center / contain no-repeat;
  --copy-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M13 4H6a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1zm0 9H6V5h7zM3 9H2V3a1 1 0 0 1 1-1h6v1H3z'/%3E%3C/svg%3E");
}
.prose__copy:hover { color: var(--cds-white); background: var(--cds-gray-80); }
.prose__copy.is-copied { color: var(--cds-green-40); }
.prose__codecard .prose__code { margin: 0; }

/* token colours (terminal-like, readable on the dark code background) */
.prose__code .tok-com { color: #8d8d8d; font-style: italic; }
.prose__code .tok-str { color: #a7f0ba; }
.prose__code .tok-num { color: #a6c8ff; }
.prose__code .tok-kw { color: #d4bbff; }

/* Notice when a page's Khmer translation is not ready (translation-notice.js). */
.xlate-notice {
  display: flex;
  gap: var(--cds-spacing-05);
  margin-bottom: var(--cds-spacing-06);
  padding: var(--cds-spacing-05);
  background: var(--cds-notification-info, #edf5ff);
  border-left: 3px solid var(--cds-support-info, #4589ff);
}
.xlate-notice__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  font-family: var(--cds-font-km, "Kantumruy Pro", sans-serif);
  font-weight: 600;
  color: var(--cds-link-primary, #0f62fe);
  background: var(--cds-layer, #fff);
}
.xlate-notice__title { margin: 0 0 var(--cds-spacing-02); font-weight: 600; }
.xlate-notice__text { margin: 0 0 var(--cds-spacing-04); color: var(--cds-text-secondary); font-size: 0.875rem; line-height: 1.5; }
.xlate-notice__btn {
  min-height: 2rem;
  padding: 0.25rem 1rem;
  border: 1px solid var(--cds-link-primary, #0f62fe);
  background: transparent;
  color: var(--cds-link-primary, #0f62fe);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.xlate-notice__btn:hover { background: var(--cds-link-primary, #0f62fe); color: #fff; }

/* Floating "not translated yet" toast, shown when a reader switches to Khmer on an untranslated
   page — visible however far down the page they are. (components/translation-notice.js) */
.xlate-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 1.25rem);
  z-index: 9995;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cds-spacing-04);
  width: min(36rem, calc(100vw - 2rem));
  padding: var(--cds-spacing-05);
  background: var(--cds-layer, #fff);
  color: var(--cds-text-primary, #161616);
  border-top: 4px solid var(--cds-link-primary, #0f62fe);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition: opacity 0.25s ease-out, transform 0.3s cubic-bezier(0.2, 0, 0.38, 0.9);
}
.xlate-toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.xlate-toast__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  background: color-mix(in srgb, var(--cds-link-primary, #0f62fe) 14%, transparent);
  color: var(--cds-link-primary, #0f62fe);
  font-size: 0.75rem;
  font-weight: 600;
}
.xlate-toast__body { flex: 1 1 14rem; min-width: 0; }
.xlate-toast__title { margin: 0 0 0.25rem; font-weight: 600; }
.xlate-toast__text { margin: 0; font-size: 0.875rem; color: var(--cds-text-secondary, #525252); }
.xlate-toast__en {
  flex: none;
  min-height: 2.5rem;
  padding: 0 var(--cds-spacing-05);
  border: 0;
  background: var(--cds-link-primary, #0f62fe);
  color: #fff;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
.xlate-toast__en:hover { filter: brightness(0.92); }
.xlate-toast__close {
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  color: var(--cds-text-secondary, #525252);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.xlate-toast__close:hover { color: var(--cds-text-primary, #161616); }
html[lang="km"] .xlate-toast__title { line-height: 1.6; }
html[lang="km"] .xlate-toast__text { line-height: 1.8; }
@media (prefers-reduced-motion: reduce) { .xlate-toast { transition: opacity 0.2s; transform: translate(-50%, 0); } }