/* ---------------------------------------------------------
   Styles for the demos and figures in this post.
   Everything is namespaced .hd- so it won't touch the theme.
   --------------------------------------------------------- */
.hd-callout {
  border-left: 3px solid #FF5A1F;
  background: #FFF6F2;
  padding: 1rem 1.25rem;
  border-radius: 0 6px 6px 0;
  margin: 2rem 0;
}
.hd-callout > :first-child { margin-top: 0; }
.hd-callout > :last-child { margin-bottom: 0; }
.hd-callout__title {
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.hd-fig { margin: 2.5rem 0; }
.hd-fig svg { width: 100%; height: auto; display: block; }
.hd-fig figcaption {
  font-size: 0.85rem;
  opacity: 0.75;
  margin-top: 0.75rem;
  text-align: center;
}
.hd-fig-label { font-family: ui-monospace, monospace; font-size: 11px; fill: #5A6373; }
.hd-fig-value { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 500; fill: #10131A; }

.hd-demo {
  margin: 2.5rem 0;
  border: 1px solid #DFE4ED;
  border-radius: 10px;
  overflow: hidden;
}
.hd-demo__bar {
  background: #F4F6FA;
  border-bottom: 1px solid #DFE4ED;
  padding: 0.5rem 0.85rem;
  font-family: ui-monospace, monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5A6373;
}
.hd-demo__body { padding: 1.25rem; }

/* --- Playground --- */
.hd-pg { display: grid; grid-template-columns: minmax(0, 1fr) 195px; gap: 1.5rem; align-items: start; }
@media (max-width: 700px) {
  .hd-pg { grid-template-columns: 1fr; }
  .hd-pg__controls { order: -1; }
}
.hd-pg__controls { background: #F4F6FA; border-radius: 8px; padding: 0.85rem; }
.hd-ctl { display: grid; grid-template-columns: 1fr 34px; gap: 2px 6px; align-items: center; margin-bottom: 0.5rem; }
.hd-ctl label { font-size: 0.75rem; color: #5A6373; grid-column: 1; }
.hd-ctl output { font-family: ui-monospace, monospace; font-size: 0.75rem; font-weight: 500; text-align: right; grid-row: 1; grid-column: 2; }
.hd-ctl input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: #1F4FE0; margin: 0; }
.hd-chk { display: flex; align-items: center; gap: 0.45em; font-size: 0.75rem; color: #5A6373; margin-bottom: 0.4em; }
.hd-chk input { accent-color: #1F4FE0; }
.hd-pg__decl {
  display: block; font-family: ui-monospace, monospace; font-size: 0.65rem;
  line-height: 1.5; color: #5A6373; margin-top: 0.85rem; word-break: break-all;
  background: none; padding: 0;
}
.hd-pg__rule { height: 1px; background: #DFE4ED; margin: 0.85rem 0; }

.hd-step { padding: 0.85rem 0; border-bottom: 1px solid #DFE4ED; }
.hd-step:last-child { border-bottom: 0; }
.hd-step__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.35rem; }
.hd-step__tag { font-family: ui-monospace, monospace; font-size: 0.7rem; color: #5A6373; }
.hd-step__ratio { font-family: ui-monospace, monospace; font-size: 0.85rem; font-weight: 500; }
.hd-step__ratio.is-clamped { color: #FF5A1F; }
.hd-step__px { font-family: ui-monospace, monospace; font-size: 0.7rem; color: #5A6373; }
.hd-step__text { max-width: min(24em, 100%); }
.hd-step__text mark { background: none; color: inherit; }
.hd-step.is-lined .hd-step__text mark { background: #DCE4FB; }

/* --- Inheritance demo --- */
.hd-inh { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 640px) { .hd-inh { grid-template-columns: 1fr; } }
.hd-card { border: 1px solid #DFE4ED; border-radius: 8px; padding: 1.25rem; }
.hd-card__label {
  font-family: ui-monospace, monospace; font-size: 0.65rem; text-transform: uppercase;
  letter-spacing: 0.08em; margin: 0 0 0.85rem; display: flex; align-items: center; gap: 0.5em;
}
.hd-card__label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.hd-card--broken .hd-card__label { color: #C12E1C; }
.hd-card--broken .hd-card__label::before { background: #C12E1C; }
.hd-card--good .hd-card__label { color: #1F4FE0; }
.hd-card--good .hd-card__label::before { background: #1F4FE0; }
.hd-card h4 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.6rem; }
.hd-card p { font-size: 0.9rem; margin: 0 0 0.6rem; }
.hd-card .hd-card__cap { font-size: 0.7rem; opacity: 0.7; margin: 0; }

.hd-card--broken { line-height: clamp(1.1em, calc(0.8em + 0.8rem), 1.7em); }
.hd-card--broken h4,
.hd-card--broken p { line-height: inherit; }

.hd-card--good h4,
.hd-card--good p { line-height: clamp(1.1em, calc(0.8em + 0.8rem), 1.7em); }

.hd-probe {
  font-family: ui-monospace, monospace; font-size: 0.65rem; color: #5A6373;
  margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px dashed #DFE4ED; line-height: 1.6;
}
.hd-probe b { color: #10131A; font-weight: 500; }