/* Extend the existing ScaleTrip reading palette and system typography. */
.field-directory { padding: 2rem var(--pad); background: var(--paper-white); color: var(--text); border-block: 1px solid var(--rule); }
.field-directory h2 { margin: 0 0 .8rem; font-size: clamp(1.4rem, 2.4vw, 2rem); }
.field-directory p { max-width: 65ch; line-height: 1.8; }
.field-directory ul { margin: 1.2rem 0 0; padding-left: 1.3rem; }
.field-directory li + li { margin-top: .6rem; }
.field-directory a { display: inline-block; padding: .4rem 0; color: var(--action); text-underline-offset: .2em; }
.field-experiment { scroll-margin-top: 1.5rem; }
/* Preserve deep links and no-script reading through the long Moon article.
   Its old estimated offscreen height could move a fragment target after layout. */
.earth-moon-article, .micro-topic-article { content-visibility: visible; contain-intrinsic-size: none; }
.field-experiment .learning-controls input[type="number"], .field-share input { width: 100%; min-width: 0; padding: .7rem; border: 1px solid var(--control-border); border-radius: 4px; background: var(--paper-white); color: var(--text); }
.field-experiment :is(p, li) { line-height: 1.85; overflow-wrap: anywhere; }
.field-experiment ol { padding-left: 1.4rem; }
.field-experiment li + li { margin-top: .5rem; }
.field-share { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; padding-block: 1.5rem; }
.field-share label { display: grid; gap: .55rem; flex: 1 1 20rem; min-width: 0; font-weight: 600; }
.field-share input { font-size: .85rem; font-weight: 400; }
.field-share button { min-height: 44px; padding: .7rem 1rem; border: 1px solid var(--action); border-radius: 5px; background: var(--action); color: #fff; cursor: pointer; }
.field-share button:hover { background: var(--action-hover); }
.field-share [role="status"] { flex-basis: 100%; margin: 0; }
.field-experiment [role="alert"] { color: #9b251d; }
.field-sources { padding-left: 1.3rem; font-size: .85rem; }
.field-moon-chart circle { fill: #2459d3; }
.field-moon-chart [data-field-moon] { fill: #526176; }
.field-micro-chart rect { fill: #2459d3; }
.field-micro-chart path, .field-universe-chart g path { stroke: #2459d3; stroke-width: 2; fill: none; }
.field-universe-chart circle { fill: #2459d3; }
@media (max-width: 600px) { .field-share button { width: 100%; } .field-experiment .learning-controls { grid-template-columns: 1fr; } }