/* Shared article components for HTML-first and legacy pages.
   Reading geometry, content and interaction contracts stay in their own layers. */
:root {
  --component-fill: #162e51d9;
  --component-fill-strong: #102443ed;
  --component-radius: 12px;
}

.example-panel, .compare-strip__box, .comparison-side,
.capability-card, .practice-block, .checklist, .context-exit, .route-panel {
  min-width: 0;
  background: var(--component-fill);
  border: 1px solid var(--line-strong);
  border-radius: var(--component-radius);
}
.example-panel, .compare-strip__box, .comparison-side { padding: 20px; }
.example-panel__label, .comparison-label, .compare-strip__box > strong,
.capability-card > strong { color: var(--gold); }
.example-panel p, .practice-prompt__text, .copyable-text { color: var(--text); }
.compare-strip__box p, .comparison-side p { line-height: 1.7; }
.compare-strip__arrow { color: var(--gold); }
.capability-card { min-height: 0; padding: 20px; }
.content-card .capability-card button { color: var(--link); min-height: 44px; }
.content-highlight {
  color: var(--text);
  background: var(--component-fill);
  border-left-color: var(--gold);
  border-radius: 0 var(--component-radius) var(--component-radius) 0;
}

.practice-block { padding: 24px; }
.content-card .practice-block h3 { color: var(--gold); }
.practice-block__eyebrow, .practice-observe > strong { color: var(--muted); }
.practice-block__mark { color: var(--gold); }
.practice-services, .practice-prompt, .copyable-block {
  min-width: 0;
  background: var(--component-fill-strong);
  border: 1px solid var(--line-strong);
  border-radius: var(--component-radius);
}
.practice-services { padding: 16px; }
.practice-prompts {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.practice-prompt { padding: 18px; }
.practice-prompt__head { flex-wrap: wrap; align-items: center; }
.practice-prompt__head strong { color: var(--gold); }
.practice-prompt__text, .copyable-text { overflow-wrap: anywhere; }
.practice-observe { border-top-color: var(--line-strong); }
.practice-services__other > summary { min-height: 44px; padding-block: 10px; color: var(--muted); }
.copyable-block {
  margin-block: 20px;
  padding: 18px 20px;
  border-inline-start: 3px solid var(--gold);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
.copyable-text { margin-block: 0 16px; line-height: 1.75; }
.copy-status { margin-block: 12px 0; line-height: 1.6; color: var(--muted); }
.copy-status:empty { margin: 0; }
.copyable-block[data-copy-state="success"] .copy-status { color: var(--gold); }

.content-card .practice-service-link, .content-card .practice-copy,
.copy-button, .toc-controls button, .toc-dialog button, .route-button {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--control-radius);
  background: var(--panel-soft);
  color: var(--link);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}
.content-card .practice-service-link:hover, .content-card .practice-copy:hover,
.copy-button:hover, .toc-controls button:hover, .toc-dialog button:hover,
.route-button:hover {
  background: #30496d;
  border-color: var(--gold);
  text-decoration: none;
}
.content-card .practice-service-link--primary { border-color: #e4ba6a80; }
.content-card .practice-copy.is-copied,
.copyable-block[data-copy-state="success"] .copy-button { border-color: var(--gold); }
.copy-button[aria-busy="true"] { cursor: wait; }
.toc-controls button:disabled { color: var(--soft); cursor: default; }

.checklist { padding: 12px; }
.checklist-item {
  min-height: 44px;
  padding: 10px 8px;
  margin-block: 4px;
  border-radius: 8px;
}
.checklist-item input {
  width: 20px;
  height: 20px;
  margin: .2em 0 0;
  accent-color: var(--gold);
}
.checklist-item label { flex: 1; min-width: 0; line-height: 1.6; }
.checklist-item:has(input:checked) { background: #e4ba6a12; }
.checklist-item:focus-within { background: #e4ba6a12; }

.internal-toc { border-color: var(--line-strong); }
.internal-toc nav ul, .toc-dialog nav ul { list-style: none; padding: 0; margin-block: 8px; }
.internal-toc nav li, .toc-dialog nav li { margin: 4px 0; }
.internal-toc nav a, .toc-dialog nav a {
  display: block;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  text-decoration: none;
}
.internal-toc nav a:hover, .toc-dialog nav a:hover {
  background: var(--component-fill);
  color: var(--link);
  text-decoration: underline;
}
.toc-dialog { background: var(--bg-deep); border-radius: 16px; border-color: var(--line-strong); }
.toc-dialog h2 { color: var(--gold); font-size: 22px; line-height: 1.4; }
.context-exit { padding: 20px; }
.context-exit h2 { margin-block: 0 12px; color: var(--gold); font-size: 20px; }
.context-exit p { margin-block: 12px 0; }
.context-exit .unavailable-note { color: var(--soft); font-size: 16px; }
.context-exit a { color: var(--link); }
.route-panel { padding: 24px; }

/* Frames support existing media and honest placeholders pending the asset pass. */
.illustrated-block__placeholder {
  background: var(--component-fill);
  border-color: var(--line-strong);
  border-radius: var(--component-radius);
}
.illustrated-block__placeholder span { color: var(--muted); }
.illustrated-block__placeholder strong { color: var(--text); }
.illustrated-block__image { border: 1px solid var(--line-strong); border-radius: var(--component-radius); }
.illustrated-block__caption { color: var(--soft); line-height: 1.55; }

.internal-toc summary:focus-visible, .internal-toc a:focus-visible,
.toc-dialog :focus-visible, .checklist input:focus-visible, .copy-button:focus-visible,
.content-card .practice-copy:focus-visible, .content-card .practice-service-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
@media (max-width: 560px) {
  .example-panel, .compare-strip__box, .comparison-side, .capability-card,
  .practice-block, .context-exit, .route-panel { padding: 16px; }
  .practice-services, .practice-prompt, .copyable-block { padding: 14px; }
  .practice-prompts { grid-template-columns: minmax(0, 1fr); }
  .checklist { padding: 8px; }
  .checklist-item { padding: 10px 4px; }
}