/*
  DIAGRAMS: explainer diagrams built from HTML, for long-form posts (the "APIs for product
  managers" series). Real text, so they reflow on phones, follow the theme and read in order
  to a screen reader. Load with `styles: ["/css/pages/diagrams.css"]`; the markup lives in
  _includes/diagrams/. Every diagram sits in a <figure class="dg not-prose">.

  Building blocks:
  - dg-flow: steps (dg-step) joined by arrows (dg-arrow, with an optional label). A row on
    wide screens, a column on phones.
  - dg-pair inside a step: the everyday comparison (dg-like, dashed pink) above the
    technical version (dg-tech).
  - dg-trip: a round trip, two ends with a request arrow out and a response arrow back.
  - dg-url: a web address split into labelled parts.
  - dg-cards: a grid of small cards (status codes, methods, examples).
  - dg-zones: two side-by-side areas (public and private).
  - dg-switch: one panel at a time behind two buttons (API call versus webhook).

  Diagrams are static. Give steps, arrows and cards the `reveal` class and they fade up as
  they scroll into view (see MOTION). Only hands-on parts the reader drives are interactive
  (js/diagrams.js): no timed sequences, which are hard to follow on a phone.
*/

/* In the components layer, so Tailwind utilities in the markup (mt-4, gap-3…) win */
@layer components {


.dg {
  margin: 2.5rem 0;
  padding: clamp(1rem, 3vw, 1.75rem);
  border: 1px solid var(--image-border-color);
  border-radius: 20px;
  background: var(--card);
  font-size: 0.95rem;
  line-height: 1.5;
}
.dg > figcaption {
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--image-border-color);
  color: var(--muted);
  font-size: 0.85rem;
}
.dg-title {
  margin: 0 0 1.25rem;
  color: var(--title-color);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dg-title::before { content: "//"; margin-right: 0.4rem; color: var(--secondary-color); }
.dg p { margin: 0; }
.dg .dg-title { margin: 0 0 1rem; }
.dg strong, .dg b { color: var(--title-color); font-weight: 700; }
.dg .chip b { color: inherit; } /* pressed chips are green with dark text */
.dg code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  color: var(--title-color);
  overflow-wrap: anywhere;
}

/* ---- A box ---- */
.dg-box {
  position: relative;
  padding: 0.85rem 1rem;
  border: 1px solid var(--image-border-color);
  border-radius: 16px;
  background: var(--card-solid);
}
/* A fixed header height, so one- and two-line titles start their text at the same place */
.dg-box-head { display: flex; align-items: center; gap: 0.6rem; min-height: 2.6rem; margin-bottom: 0.35rem; }
.dg-box-name { color: var(--title-color); font-weight: 800; line-height: 1.2; }
.dg-box-text { color: var(--font-color); font-size: 0.875rem; }
.dg-box-accent { border-color: var(--primary-color); box-shadow: inset 0 0 0 1px var(--primary-color); }
.dg-box-navy { border-color: var(--navy); background: var(--navy); }
.dg-box-navy .dg-box-name, .dg-box-navy .dg-box-text, .dg-box-navy code, .dg-box-navy strong { color: #fff; }

.dg-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 12px;
  background: var(--primary-color);
  color: var(--on-accent);
  font-size: 0.95rem;
}
.dg-icon-pink { background: var(--secondary-color); }
.dg-icon-navy { background: var(--navy); color: #fff; }
.dg-icon-red { background: var(--red); color: #fff; }
.dg-icon-sand { background: var(--sand); color: var(--on-accent); }
.dg-box-navy .dg-icon-navy { background: rgb(255 255 255 / 0.14); }

/* The everyday comparison: dashed pink, sits above the technical box */
.dg-like {
  padding: 0.7rem 0.9rem;
  border: 1.5px dashed rgba(var(--secondary-color-rgb), 0.8);
  border-radius: 14px;
  font-size: 0.875rem;
}
.dg-like-label, .dg-tech-label {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.dg-pair { display: grid; grid-template-rows: auto 1fr; gap: 0.5rem; height: 100%; }

/* ---- Flow: steps joined by arrows ---- */
.dg-flow { display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem; }
.dg-step { min-width: 0; }
.dg-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  color: var(--text-link);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}
.dg-arrow > span { order: 2; }
.dg-arrow > i { order: 1; font-size: 1rem; }

/* Wide screens: a grid of three equal step columns with arrow columns between, the same
   for every flow, so boxes line up within a row and between rows (a two-step flow leaves
   the last column empty). Two rows: the dashed comparisons, then the boxes, shared across
   the row through subgrid so every comparison and every box is the same height. */
@media (min-width: 768px) {
  .dg-flow:not(.dg-flow-down) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr) 4.5rem minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0 0.35rem;
  }
  .dg-flow-wide:not(.dg-flow-down) { grid-template-columns: minmax(0, 1fr) 6rem minmax(0, 1fr) 6rem minmax(0, 1fr); }
  .dg-flow:not(.dg-flow-down):has(.dg-pair) { row-gap: 0.5rem; }
  .dg-flow:not(.dg-flow-down) > .dg-step { grid-row: span 2; display: grid; grid-template-rows: subgrid; }
  .dg-flow:not(.dg-flow-down) > .dg-step > .dg-pair { display: contents; }
  .dg-flow:not(.dg-flow-down) > .dg-step > .dg-box { grid-row: span 2; }
  .dg-flow:not(.dg-flow-down) > .dg-arrow { grid-row: span 2; flex-direction: column; gap: 0.2rem; }
  .dg-flow:not(.dg-flow-down):has(.dg-pair) > .dg-arrow { grid-row: 2; }
  /* Fixed columns: steps in 1, 3 and 5, arrows in 2 and 4 (an arrow pinned to row 2 would
     otherwise be placed before the steps) */
  .dg-flow:not(.dg-flow-down) > :nth-child(1 of .dg-step) { grid-column: 1; }
  .dg-flow:not(.dg-flow-down) > :nth-child(2 of .dg-step) { grid-column: 3; }
  .dg-flow:not(.dg-flow-down) > :nth-child(3 of .dg-step) { grid-column: 5; }
  .dg-flow:not(.dg-flow-down) > :nth-child(1 of .dg-arrow) { grid-column: 2; }
  .dg-flow:not(.dg-flow-down) > :nth-child(2 of .dg-arrow) { grid-column: 4; }
  .dg-flow > .dg-arrow > i { transform: rotate(-90deg); }
  .dg-flow > .dg-arrow > i.dg-back { transform: rotate(90deg); }
}

/* A column flow even on wide screens (long sequences) */
.dg-flow.dg-flow-down { flex-direction: column; }
.dg-flow.dg-flow-down > .dg-arrow { width: auto; flex-direction: row; }
.dg-flow.dg-flow-down > .dg-arrow > i { transform: none; }

/* ---- Round trip: request out, response back ---- */
.dg-trip { display: grid; gap: 0.5rem; }
.dg-trip-arrows { display: grid; gap: 0.6rem; padding: 0.25rem 0; }
.dg-trip-arrow {
  display: grid;
  gap: 0.2rem;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  font-size: 0.85rem;
}
.dg-trip-arrow b { display: flex; align-items: center; gap: 0.4rem; }
.dg-trip-out { background: rgba(var(--primary-color-rgb), 0.12); }
.dg-trip-out b { color: var(--text-link); }
.dg-trip-back { background: rgba(var(--secondary-color-rgb), 0.16); }
@media (min-width: 768px) {
  .dg-trip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); align-items: stretch; gap: 1rem; }
  .dg-trip-out b::after { content: "\2192"; margin-left: auto; font-size: 1.2rem; }
  .dg-trip-back b::before { content: "\2190"; font-size: 1.2rem; }
}
@media (max-width: 767px) {
  .dg-trip-out b::after { content: "\2193"; margin-left: auto; font-size: 1.1rem; }
  .dg-trip-back b::after { content: "\2191"; margin-left: auto; font-size: 1.1rem; }
}

/* ---- A web address split into labelled parts ---- */
.dg-url { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem 0.15rem; }
.dg-seg { display: grid; gap: 0.35rem; }
.dg-seg code {
  padding: 0.35rem 0.4rem;
  border-bottom: 4px solid var(--seg, var(--primary-color));
  border-radius: 6px 6px 0 0;
  background: var(--card-solid);
  font-size: 0.85rem;
}
.dg-seg span { max-width: 14rem; color: var(--muted); font-size: 0.75rem; font-weight: 600; line-height: 1.3; }
.dg-seg span b { display: block; color: var(--title-color); font-size: 0.8rem; }
.dg-seg-1 { --seg: var(--primary-color); }
.dg-seg-2 { --seg: var(--secondary-color); }
.dg-seg-3 { --seg: var(--navy); }
.dg-seg-4 { --seg: var(--red); }
.dg-seg-5 { --seg: var(--sand); }
:root:not([data-theme="light"]) .dg-seg-3 { --seg: #7b7bd6; }

/* ---- Cards ---- */
/* Every card the same height, across rows too. Cards that are a comparison plus a box
   span two rows of a subgrid, so the comparisons and the boxes each line up. */
.dg-cards { display: grid; gap: 0.75rem; }
.dg-cards:not(:has(> .dg-pair)) { grid-auto-rows: 1fr; }
.dg-cards > .dg-pair, .dg-zones > .dg-pair { grid-row: span 2; grid-template-rows: subgrid; }
@media (min-width: 560px) { .dg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .dg-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dg-big {
  display: block;
  color: var(--title-color);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.dg-tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(var(--primary-color-rgb), 0.16);
  color: var(--text-link);
}
.dg-tag-pink { background: rgba(var(--secondary-color-rgb), 0.2); color: var(--title-color); }
.dg-tag-red { background: rgb(248 39 0 / 0.14); color: var(--error); }

/* ---- Two zones: public and private ---- */
.dg-zones { display: grid; gap: 0.75rem; }
@media (min-width: 768px) { .dg-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dg-zone {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: 1rem;
  border: 1.5px dashed var(--image-border-color);
  border-radius: 16px;
}
.dg-zone-public { border-color: rgb(248 39 0 / 0.55); }
.dg-zone-private { border-color: var(--primary-color); border-style: solid; }
.dg-zone ul { margin: 0; padding-left: 1.1rem; font-size: 0.875rem; }
.dg-zone li + li { margin-top: 0.25rem; }

/* A small ticked or crossed list */
.dg-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.875rem; }
.dg-checks li { display: flex; gap: 0.5rem; }
.dg-checks i { margin-top: 0.2rem; color: var(--text-link); }
.dg-checks .is-no i { color: var(--error); }

/* A weather icon on a navy square, for the lookup diagram */
.dg-wx { display: block; width: 3.5rem; flex-shrink: 0; padding: 0.4rem; border-radius: 12px; background: var(--navy); }
.dg-wx svg { display: block; width: 100%; height: auto; }



/* ============ MOTION ============ */
/* Static diagrams that animate in once: each step and arrow carries the site's `reveal`
   class (main.js fades it up as it scrolls into view), so on a phone every step arrives as
   you reach it. Side by side, the steps cascade left to right. Nothing loops or times out,
   and reduced motion turns it all off (main.js skips the reveal, the base layer stops
   animations). */
@media (min-width: 768px) {
  .motion-ready .dg-flow:not(.dg-flow-down) > .reveal:nth-child(2) { transition-delay: 0.12s; }
  .motion-ready .dg-flow:not(.dg-flow-down) > .reveal:nth-child(3) { transition-delay: 0.24s; }
  .motion-ready .dg-flow:not(.dg-flow-down) > .reveal:nth-child(4) { transition-delay: 0.36s; }
  .motion-ready .dg-flow:not(.dg-flow-down) > .reveal:nth-child(5) { transition-delay: 0.48s; }
  .motion-ready .dg-cards > .reveal:nth-child(2) { transition-delay: 0.08s; }
  .motion-ready .dg-cards > .reveal:nth-child(3) { transition-delay: 0.16s; }
  .motion-ready .dg-cards > .reveal:nth-child(4) { transition-delay: 0.24s; }
  .motion-ready .dg-cards > .reveal:nth-child(5) { transition-delay: 0.32s; }
  .motion-ready .dg-cards > .reveal:nth-child(6) { transition-delay: 0.4s; }
  .motion-ready .dg-trip > .reveal:nth-child(2) { transition-delay: 0.15s; }
  .motion-ready .dg-trip > .reveal:nth-child(3) { transition-delay: 0.3s; }
}

/* Arrows nudge twice in the direction of travel once they've arrived */
.motion-ready .dg-arrow.is-visible > i { animation: dg-travel-down 0.6s ease-in-out 0.6s 2; }
@media (min-width: 768px) {
  .motion-ready .dg-flow:not(.dg-flow-down) > .dg-arrow.is-visible > i { animation-name: dg-travel-right; }
}

/* The round trip: a dot runs out along the request, then back along the response, once */
.dg-trip-arrow { position: relative; overflow: hidden; }
.motion-ready .dg-trip-arrows.is-visible .dg-trip-arrow::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: -12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary-color);
  box-shadow: 0 0 12px var(--primary-color);
  animation: dg-run-right 1.1s ease-in-out 0.5s forwards;
}
.motion-ready .dg-trip-arrows.is-visible .dg-trip-back::before {
  left: 100%;
  background: var(--secondary-color);
  box-shadow: 0 0 12px var(--secondary-color);
  animation-name: dg-run-left;
  animation-delay: 1.5s;
}

.dg-json { white-space: pre-wrap; overflow-wrap: anywhere; }

@keyframes dg-travel-down { 50% { transform: translateY(6px); } }
@keyframes dg-travel-right { 0%, 100% { transform: rotate(-90deg) translateY(0); } 50% { transform: rotate(-90deg) translateY(6px); } }
@keyframes dg-run-right { from { left: -12px; } to { left: 100%; } }
@keyframes dg-run-left { from { left: 100%; } to { left: -12px; } }
@keyframes dg-rise { from { opacity: 0; transform: translateY(10px); } }

/* ---- Switch: one panel at a time (API call versus webhook) ---- */
.dg-switch-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
.dg-switch-buttons .chip { justify-content: center; }
.dg-switch-panel + .dg-switch-panel { margin-top: 1.5rem; }
/* Both panels share one grid cell, so the box keeps the taller one's height and the page
   below doesn't jump when you switch. The hidden one is invisible to everyone. */
[data-dg-switch].is-live { display: grid; }
[data-dg-switch].is-live > .dg-switch-panel { grid-row: 2; grid-column: 1; margin-top: 0; }
[data-dg-switch].is-live > .dg-switch-panel[hidden] { display: block; visibility: hidden; }
.dg-switch-head { margin-top: 0.9rem !important; font-size: 0.9rem; }
.dg-exchanges { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.dg-exchanges li {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.15rem 0.75rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--image-border-color);
  border-radius: 14px;
  background: var(--card-solid);
  font-size: 0.875rem;
}
.dg-exchanges li > :not(.dg-time) { grid-column: 2; }
.dg-time { grid-row: span 3; color: var(--title-color); font-weight: 800; font-variant-numeric: tabular-nums; }
.dg-who { color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.dg-who i { margin: 0 0.2rem; color: var(--text-link); }
.dg-msg { color: var(--title-color); font-weight: 600; }
.dg-reply { color: var(--muted); }
.dg-reply::before { content: "\21B3  "; }
.dg-reply-yes { color: var(--text-link); font-weight: 700; }
@media (min-width: 768px) {
  .dg-exchanges li { grid-template-columns: 3.5rem 12rem minmax(0, 1fr) 11rem; align-items: center; }
  .dg-exchanges li > :not(.dg-time) { grid-column: auto; }
  .dg-time { grid-row: auto; }
}
.dg-switch-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.9rem !important; font-size: 0.875rem; color: var(--muted); }
/* Rows rise in one after another each time a panel is shown */
@media (prefers-reduced-motion: no-preference) {
  .dg-switch-panel.is-entering .dg-exchanges li { animation: dg-rise 0.4s ease both; animation-delay: calc(var(--i, 0) * 0.18s); }
  .dg-switch-panel.is-entering .dg-switch-sum { animation: dg-rise 0.4s ease both; animation-delay: 0.5s; }
}

/* ---- Peek at the code (a <details>) ---- */
.dg-peek { margin-top: 0.75rem; }
.dg-peek summary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--text-link);
  font-size: 0.85rem;
  font-weight: 700;
}
.dg-peek[open] summary { margin-bottom: 0.6rem; }
.dg-peek[open] > :not(summary) { animation: dg-open 0.35s ease; }
.dg-peek pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; }
.dg-peek mark { padding: 0 0.2rem; border-radius: 4px; background: var(--red); color: #fff; animation: dg-flash 1.2s ease 2; }
@keyframes dg-open { from { opacity: 0; transform: translateY(-6px); } }
@keyframes dg-flash { 50% { box-shadow: 0 0 0 4px rgba(248, 39, 0, 0.35); } }

/* ---- Request builder ---- */
.dg-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--image-border-color);
  border-radius: 999px;
  background: var(--card-solid);
  font-size: 0.85rem;
  cursor: pointer;
}
.dg-check input { accent-color: var(--primary-color); }
.dg-check:has(input:checked) { border-color: var(--primary-color); }
.dg-built {
  margin: 1.25rem 0 1rem !important;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--image-border-color);
  border-radius: 12px;
  background: var(--card-solid);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}
.dg-built-part { border-bottom: 3px solid var(--seg); animation: dg-open 0.3s ease; }
.dg-b-status { margin-top: 0.75rem !important; font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.dg-b-status.is-ok { color: var(--text-link); }
.dg-b-status.is-bad { color: var(--error); }
.dg-b-json { max-height: 320px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8rem; animation: dg-open 0.35s ease; }

/* ---- Status code simulator ---- */
.dg-sim-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
.dg-sim-tabs .chip { justify-content: center; }
@media (min-width: 640px) { .dg-sim-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.dg-sim-panel { display: grid; gap: 1rem; align-items: center; }
.dg-sim-panel + .dg-sim-panel { margin-top: 1rem; }
.dg-sim.is-live .dg-sim-panel + .dg-sim-panel { margin-top: 0; }
@media (min-width: 640px) { .dg-sim-panel { grid-template-columns: 200px minmax(0, 1fr); } }
.dg-sim-code { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.dg-sim.is-live .dg-sim-panel:not([hidden]) .dg-sim-text { animation: dg-open 0.35s ease; }

.dg-screen {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 1rem;
  border: 6px solid var(--charcoal);
  border-radius: 26px;
  background: var(--navy);
  color: #fff;
  text-align: center;
}
.dg-screen-result, .dg-screen-loading { grid-area: 1 / 1; display: grid; justify-items: center; gap: 0.35rem; }
.dg-screen-loading { font-size: 1.5rem; opacity: 0; }
.dg-screen-loading i { animation: dg-spin 0.9s linear infinite; }
.dg-screen-wx { display: block; width: 64px; }
.dg-screen-wx svg { display: block; width: 100%; height: auto; }
.dg-screen-temp { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.dg-screen-line { font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.dg-screen-dim { font-size: 2rem; color: rgba(255, 255, 255, 0.45); }
.dg-screen-btn { margin-top: 0.35rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--primary-color); color: var(--on-accent); font-size: 0.75rem; font-weight: 800; }
/* Loading, then the result (the script adds .is-loaded after a moment) */
.dg-sim.is-live .dg-sim-panel:not(.is-loaded) .dg-screen-loading { opacity: 1; }
.dg-sim.is-live .dg-sim-panel:not(.is-loaded) .dg-screen-result { opacity: 0; transform: scale(0.9); }
.dg-sim.is-live .dg-screen-result { transition: opacity 0.35s ease, transform 0.35s ease; }
/* 429 and timeouts wait longer before their result */
.dg-sim.is-live .dg-sim-panel[data-sim-panel="429"].is-loaded .dg-screen-result,
.dg-sim.is-live .dg-sim-panel[data-sim-panel="timeout"].is-loaded .dg-screen-result { animation: dg-late 1.6s ease both; }
.dg-sim.is-live .dg-sim-panel[data-sim-panel="429"].is-loaded .dg-screen-loading,
.dg-sim.is-live .dg-sim-panel[data-sim-panel="timeout"].is-loaded .dg-screen-loading { animation: dg-hold 1.6s ease both; }
@keyframes dg-late { 0%, 70% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: none; } }
@keyframes dg-hold { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dg-spin { to { transform: rotate(360deg); } }

/* ---- Rate limit ---- */
.dg-plates { display: flex; gap: 0.4rem; }
.dg-plate {
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid var(--primary-color);
  border-radius: 50%;
  background: rgba(var(--primary-color-rgb), 0.25);
  transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.dg-plate.is-used { border-color: var(--image-border-color); background: transparent; transform: scale(0.8); }
.dg-log { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.85rem; }
.dg-log li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  padding: 0.45rem 0.75rem;
  border-radius: 10px;
  background: var(--card-solid);
  border-left: 4px solid var(--primary-color);
  animation: dg-open 0.3s ease;
}
.dg-log li.is-bad { border-left-color: var(--red); }
.dg-log li.is-bad b { color: var(--error); }
.dg-log li.is-ok b { color: var(--text-link); }
.dg-log span { color: var(--muted); }

/* ---- Weather code explorer ---- */
.dg-code-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dg-code-chip { width: 3.25rem; justify-content: center; padding: 0.3rem 0.6rem; font-variant-numeric: tabular-nums; }
.dg-code-out { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.25rem; }
.dg-wx-big { width: 8rem; padding: 0.9rem; border-radius: 20px; }
.dg-wx-big.is-new svg { animation: dg-icon-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dg-code-label { color: var(--title-color); font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
@keyframes dg-icon-in { from { opacity: 0; transform: scale(0.6) rotate(-8deg); } }


/* ---- Table: a value's journey (JSON, what the code does, the page). Cards on phones ---- */
.dg-table { width: 100%; border-collapse: separate; border-spacing: 0 0.5rem; font-size: 0.875rem; }
.dg-table th { padding: 0 0.9rem 0.25rem; text-align: left; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.dg-table td { padding: 0.75rem 0.9rem; vertical-align: middle; background: var(--card-solid); border-top: 1px solid var(--image-border-color); border-bottom: 1px solid var(--image-border-color); }
.dg-table td:first-child { width: 36%; border-left: 1px solid var(--image-border-color); border-radius: 14px 0 0 14px; }
.dg-table td:last-child { width: 30%; border-right: 1px solid var(--image-border-color); border-radius: 0 14px 14px 0; }
.dg-table td:nth-child(2) { color: var(--muted); }
.dg-table td:nth-child(2)::after { content: "\2192"; float: right; margin-left: 0.5rem; color: var(--text-link); font-weight: 800; }
.dg-out-big { font-size: 1.4rem; line-height: 1; margin-right: 0.25rem; }
.dg-out-icon { display: inline-flex; align-items: center; gap: 0.5rem; }
.dg-wx-sm { width: 2.25rem; padding: 0.25rem; border-radius: 8px; }
@media (max-width: 639px) {
  .dg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dg-table, .dg-table tbody, .dg-table tr, .dg-table td { display: block; width: auto !important; }
  .dg-table tr { margin-bottom: 0.5rem; border: 1px solid var(--image-border-color); border-radius: 14px; background: var(--card-solid); overflow: hidden; }
  .dg-table td { border: 0 !important; border-radius: 0 !important; background: transparent; padding: 0.5rem 0.9rem; }
  .dg-table td + td { border-top: 1px dashed var(--image-border-color) !important; }
  .dg-table td::before { content: attr(data-label); display: block; margin-bottom: 0.15rem; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .dg-table td:nth-child(2)::after { content: none; }
}

} /* end @layer components */