/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4
 * macrostructure: activity-first workbench · design-system: design.md
 * audience: families and schools · use: explore one curriculum challenge
 * theme: approved Carret identity · tone: playful, practical
 * Functional orbit playback is opt-in; no arrival or scroll animations.
 * Responsive rules reviewed in source; the owner handles browser review.
 */
@import url('/project-pages.css');

.xp-stack { display:grid; gap:var(--space-lg); }
.xp-stack > *, .xp-control-row > *, .xp-score-pair > * { min-width:0; }
.xp-eyebrow { display:block; font-size:var(--text-sm); font-weight:800; color:var(--color-muted); margin-bottom:var(--space-xs); }
.xp-subhead { margin-top:var(--space-xl); }
.xp-choices { display:flex; flex-wrap:wrap; gap:var(--space-sm); margin-block:var(--space-lg); }
.xp-choices [aria-pressed="true"] { background:var(--color-accent); color:var(--color-accent-ink); outline:var(--rule-strong) solid var(--color-accent); outline-offset:3px; }
.xp-score-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-md); margin-top:var(--space-xl); }
.xp-score-pair > div { border-top:var(--rule-hair) solid var(--color-control-border); padding-top:var(--space-md); }
.xp-score-pair span { display:block; font-size:var(--text-sm); }
.xp-score-pair strong { display:block; font:700 var(--text-md)/1.4 var(--font-display); margin-block:var(--space-xs); }
.xp-check { display:flex; align-items:flex-start; gap:var(--space-sm); padding-block:var(--space-sm); min-height:44px; font-size:var(--text-base); line-height:1.5; cursor:pointer; }
.xp-check input { appearance:auto; width:20px; height:20px; flex-shrink:0; margin:2px 0 0; accent-color:var(--color-accent); }
.xp-rule { padding:var(--space-md); background:var(--color-wash); border-radius:var(--radius-sm); margin-top:var(--space-lg); font-size:var(--text-base); line-height:1.6; }
.xp-details { margin-top:var(--space-lg); border-top:var(--rule-hair) solid var(--color-control-border); padding-top:var(--space-sm); }
.xp-details summary { min-height:44px; padding-block:var(--space-sm); font-size:var(--text-sm); font-weight:800; cursor:pointer; }
.xp-details p { margin-top:var(--space-sm); font-size:var(--text-base); line-height:1.65; }
.xp-count { font:700 var(--text-lg)/1.4 var(--font-display); }
.xp-log { margin-top:var(--space-lg); padding-left:var(--space-lg); font-size:var(--text-base); line-height:1.65; }
.xp-log li + li { margin-top:var(--space-xs); }
.xp-control-row { display:grid; gap:var(--space-md); }
.creation-detail .xp-submit { margin-top:var(--space-lg); }
.creation-detail .dm-primary:active:not(:disabled), .creation-detail .dm-secondary:active:not(:disabled) { transform:translateY(1px); }
.creation-detail .dm-field input[aria-invalid="true"], .creation-detail .dm-field select[aria-invalid="true"] { border-color:var(--color-danger); }

.sorter-teaching { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-md); margin-block:var(--space-lg); }
.sorter-teaching > div { display:flex; align-items:center; gap:var(--space-sm); font-size:var(--text-sm); }
.sorter-teaching .sorter-shape { width:24px; height:24px; }
.sorter-shape { display:inline-block; position:relative; flex-shrink:0; width:32px; height:32px; background:var(--color-accent); border:var(--rule-hair) solid var(--color-ink); }
.sorter-circle { border-radius:50%; }
.sorter-red { background:var(--color-danger); }
.sorter-green { background:var(--color-green); }
.sorter-covered::after { content:''; position:absolute; inset:48% -2px -2px; background:var(--color-surface); border-top:var(--rule-hair) solid var(--color-control-border); }
.sorter-test-picture { display:flex; align-items:center; gap:var(--space-sm); }
#sorter-results th { min-width:185px; }
#sorter-results td { min-width:90px; }
#sorter-results td > span { display:block; font-size:var(--text-sm); margin-top:var(--space-2xs); }
.sorter-right { color:var(--color-green); }
.sorter-wrong { color:var(--color-danger); font-weight:800; }

.kite-drawing { width:100%; max-width:420px; height:auto; display:block; margin:var(--space-lg) auto; }
.kite-wind, .kite-tail, .kite-ribs { fill:none; stroke:var(--color-ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.kite-wind { stroke:var(--color-orange); }
.kite-paper { fill:var(--color-orange); stroke:var(--color-ink); stroke-width:2; }
.kite-story > p { max-width:48ch; }
.kite-story #kite-heading { font-size:var(--text-xl); }
.kite-path-map { margin-block:var(--space-xl); text-align:center; }
.kite-path-start { display:inline-block; padding:var(--space-sm) var(--space-lg); background:var(--color-orange-soft); border-radius:var(--radius-sm); font-weight:800; }
.kite-paths { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm); position:relative; margin-top:var(--space-lg); }
.kite-paths::before { content:''; position:absolute; top:calc(-1 * var(--space-lg)); height:var(--space-lg); left:50%; border-left:var(--rule-hair) solid var(--color-control-border); }
.kite-paths > div { padding:var(--space-md) var(--space-xs); border:var(--rule-hair) solid var(--color-control-border); border-radius:var(--radius-sm); font-size:var(--text-sm); }
.kite-paths strong { display:block; margin-top:var(--space-sm); }
.kite-paths .is-current { border-color:var(--color-accent); }
.kite-paths .is-checked { background:var(--color-green-soft); color:var(--color-green); border-color:var(--color-green); }

.detective-suggestions { display:grid; gap:var(--space-lg); margin-top:var(--space-xl); }
.detective-suggestion { display:flex; flex-direction:column; align-items:flex-start; border-top:var(--rule-hair) solid var(--color-control-border); padding-top:var(--space-lg); min-width:0; }
.detective-suggestion > p { font-size:var(--text-base); line-height:1.6; margin-block:var(--space-sm); }
.detective-suggestion .dm-actions { margin-top:auto; padding-top:var(--space-sm); gap:var(--space-xs); }
.detective-suggestion .dm-secondary { padding-inline:var(--space-md); }
#detective-demo .dm-table { min-width:400px; }
#detective-demo .dm-table th, #detective-demo .dm-table td { padding-inline:var(--space-sm); }
#detective-original-summary, #detective-edited-summary { margin-top:var(--space-lg); }

.notice-scores strong { font-size:var(--text-xl); }
.notice-cases { display:grid; gap:var(--space-lg); margin-top:var(--space-xl); }
.notice-case { padding-block:var(--space-lg); border-top:var(--rule-hair) solid var(--color-control-border); min-width:0; }
.notice-case > p { font-size:var(--text-base); line-height:1.6; margin-top:var(--space-sm); }
.notice-state { font-size:var(--text-sm); }
.notice-allow { color:var(--color-green); }
.notice-hold { color:var(--color-danger); }
.notice-review { color:var(--color-accent-deep); }
#notice-review .dm-field { max-width:38rem; }

.orbit-diagram { display:block; width:100%; max-width:580px; height:auto; margin-inline:auto; }
.orbit-track { fill:none; stroke:var(--color-purple); stroke-width:1; }
.orbit-starts circle { fill:none; stroke:var(--color-ink); stroke-width:1.5; stroke-dasharray:3 3; }
.orbit-sun { fill:var(--color-orange); stroke:var(--color-ink); stroke-width:1; }
.orbit-earth { fill:var(--color-accent); stroke:var(--color-surface); stroke-width:2; }
.orbit-mars { fill:var(--color-danger); stroke:var(--color-surface); stroke-width:2; }
.orbit-diagram text { fill:var(--color-ink); font:400 var(--text-base) var(--font-body); }
.orbit-key { display:flex; flex-wrap:wrap; gap:var(--space-sm) var(--space-lg); font-size:var(--text-sm); }
.orbit-key > span { display:flex; align-items:center; gap:var(--space-xs); }
.orbit-key i { display:block; width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.orbit-earth-key { background:var(--color-accent); }
.orbit-mars-key { background:var(--color-danger); }
.orbit-start-key { border:var(--rule-hair) dashed var(--color-ink); }
#orbit-demo input[type="range"] { appearance:auto; width:100%; min-height:44px; padding:0; border:0; accent-color:var(--color-purple); background:var(--color-clear); }
.orbit-facts { display:grid; gap:var(--space-md); margin-block:var(--space-xl) var(--space-md); }
.orbit-facts > div { padding-bottom:var(--space-md); border-bottom:var(--rule-hair) solid var(--color-rule); }
.orbit-facts dt { color:var(--color-muted); font-size:var(--text-sm); }
.orbit-facts dd { font:700 var(--text-md)/1.5 var(--font-display); margin-top:var(--space-xs); }
#orbit-demo .dm-small a { text-decoration:underline; text-underline-offset:.2em; color:var(--color-accent-deep); }
#orbit-demo .dm-table { min-width:270px; }

.version-previews { margin-top:var(--space-xl); }
.version-preview { padding:var(--space-lg); border:var(--rule-hair) solid var(--color-control-border); border-radius:var(--radius-sm); }
.version-preview > p { margin-block:var(--space-md); }
.creation-detail .version-preview button:disabled { opacity:1; }
.version-preview input[readonly] { color:var(--color-muted); background:var(--color-wash); }
.version-decision { border:0; padding:0; margin-top:var(--space-xl); }
.version-decision legend { font-weight:800; font-size:var(--text-base); margin-bottom:var(--space-xs); }
.version-decision .xp-check { border-bottom:var(--rule-hair) solid var(--color-rule); }
#version-results .dm-table { min-width:350px; }
#version-results .dm-table th, #version-results .dm-table td { padding-inline:var(--space-sm); }

@media (hover:hover) and (pointer:fine) {
 .xp-choices [aria-pressed="true"]:hover { background:var(--color-accent-deep); }
 .xp-details summary:hover { color:var(--color-accent-deep); }
 .xp-check:hover { color:var(--color-accent-deep); }
}
@media (min-width:40rem) {
 .xp-control-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .version-previews { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:60rem) {
 .xp-story-layout, .xp-orbit-layout { grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); }
 .notice-cases { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-lg) var(--space-xl); }
}
@media (min-width:75rem) {
 .detective-suggestions { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce) {
 .creation-detail .dm-primary:active:not(:disabled), .creation-detail .dm-secondary:active:not(:disabled) { transform:none; }
}