/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4
 * genre: playful · macrostructure: activity-first workbench
 * design-system: design.md · designed-as-app
 * theme: approved Carret identity · nav: established N1b · footer: established Ft5
 * native activities carry the page; existing state feedback, no scroll reveals
 * responsive rules reviewed in source; browser review delegated to the owner
 */
@import url('/home.css');

.creation-detail { --color-control-border: #8b8881; --color-danger: #a12712; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); }
.creation-detail h1, .creation-detail h2, .creation-detail h3 { font-family: var(--font-display); font-style: normal; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.creation-detail h2 { font-size: var(--text-heading); line-height: 1.15; letter-spacing: -.035em; }
.creation-detail p { color: var(--color-muted); }
.creation-detail a:focus-visible, .creation-detail button:focus-visible, .creation-detail select:focus-visible, .creation-detail input:focus-visible, .creation-detail [tabindex]:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.creation-detail .hm-link { font-size: var(--text-sm); }
.creation-detail .hm-header nav a[aria-current]::after { display: none; }
.creation-detail .hm-header nav a[aria-current] { color: var(--color-accent); text-decoration: underline; text-underline-offset: .5em; text-decoration-thickness: 2px; }
.dm-intro { padding-block: var(--space-lg) var(--space-xl); }
.dm-back { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; color: var(--color-accent); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
.dm-back .icon { width: 18px; height: 18px; transform: rotate(180deg); }
.dm-title-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-top: var(--space-lg); }
.dm-title-row h1 { font-size: clamp(2rem, 6vw, 3.25rem); letter-spacing: -.035em; line-height: 1.12; }
.dm-title-row > div > p { max-width: 53ch; margin-top: var(--space-md); font-size: var(--text-base); line-height: 1.6; }
.dm-level { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs); font-size: var(--text-sm); }
.dm-level strong { color: var(--color-ink); }
.dm-activity { min-width: 0; }
.dm-attribution { font-size: var(--text-sm); margin-top: var(--space-md); line-height: 1.5; }
.dm-reset { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 44px; padding: var(--space-xs) 0; border: 0; background: var(--color-clear); color: var(--color-accent); font-weight: 700; font-size: var(--text-sm); white-space: nowrap; }
.dm-reset .icon { width: 18px; height: 18px; }
.dm-reset:active { transform: translateY(1px); }

.dm-learning { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-2xl); }
.dm-learning-intro .hm-link { margin-top: var(--space-lg); }
.dm-insights { display: grid; gap: var(--space-lg); }
.dm-insights > div { padding-bottom: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.dm-insights h3 { font-size: var(--text-md); line-height: 1.3; }
.dm-insights p { margin-top: var(--space-sm); max-width: 58ch; font-size: var(--text-base); line-height: 1.65; }
.dm-insights .dm-challenge { padding: var(--space-lg); background: var(--color-blue-soft); border: 0; border-radius: var(--radius-sm); }
.dm-challenge h3, .dm-insights .dm-challenge p { color: var(--color-blue-dark); }
.dm-related { padding-bottom: var(--space-2xl); }
.dm-related-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); margin-top: var(--space-xl); }
.dm-related-card { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-blue-soft); color: var(--color-blue-dark); }
.dm-related-purple { background: var(--color-purple-soft); color: var(--color-purple); }
.dm-related-green { background: var(--color-green-soft); color: var(--color-green); }
.dm-related-card > span { font-size: var(--text-sm); }
.dm-related-card h3 { font-size: var(--text-lg); line-height: 1.3; }
.dm-related-action { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); font-weight: 800; min-height: 44px; }
.dm-related-action .icon { width: 20px; height: 20px; }
.creation-detail .hm-footer { background: var(--color-orange-soft); padding-block: var(--space-2xl) var(--space-lg); }
.creation-detail .hm-footer-invite p { color: var(--color-ink); }

/* Hallmark: three small curriculum interactions; tap and keyboard controls. */
.creation-detail textarea:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; }
.dm-back .icon { transform: rotate(180deg); }
.dm-workspace { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-lg); align-items:start; }
.dm-surface { padding:var(--space-lg); min-width:0; background:var(--color-surface); border:var(--rule-hair) solid var(--color-rule); border-radius:var(--radius-card); }
.creation-detail .dm-surface h2, .creation-detail .dm-helper-brief h2 { font-size:var(--text-lg); line-height:1.3; letter-spacing:-.02em; }
.dm-surface h3 { font-size:var(--text-md); line-height:1.3; }
.dm-surface > p { margin-top:var(--space-sm); font-size:var(--text-base); line-height:1.6; }
.dm-surface .dm-small, .creation-detail .dm-small { font-size:var(--text-sm); line-height:1.55; }
.dm-tint-orange, .dm-related-orange { background:var(--color-orange-soft); }
.dm-tint-blue { background:var(--color-blue-soft); }
.dm-tint-purple { background:var(--color-purple-soft); }
.dm-panel-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-xs) var(--space-md); }
.dm-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-sm); margin-top:var(--space-lg); }
.dm-primary, .dm-secondary { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-xs); min-height:48px; padding:var(--space-sm) var(--space-md); border:var(--rule-hair) solid var(--color-accent); border-radius:var(--radius-pill); background:var(--color-accent); color:var(--color-accent-ink); font-size:var(--text-sm); font-weight:800; white-space:nowrap; }
.dm-secondary { background:var(--color-surface); color:var(--color-accent-deep); }
.dm-primary .icon { width:18px; height:18px; }
.creation-detail button:disabled { opacity:.5; cursor:not-allowed; }
.creation-detail .dm-status { padding:var(--space-md); margin-top:var(--space-lg); background:var(--color-wash); border-left:3px solid var(--color-accent); color:var(--color-ink); font-size:var(--text-base); line-height:1.55; }
.creation-detail .dm-status.is-success { background:var(--color-green-soft); border-color:var(--color-green); color:var(--color-green); }
.dm-field { display:grid; gap:var(--space-xs); min-width:0; }
.dm-field label, .helper-draft label { display:block; font-size:var(--text-sm); font-weight:700; color:var(--color-ink); }
.dm-field input, .dm-field select, .milo-program select, .helper-draft textarea { width:100%; min-width:0; min-height:48px; margin:0; padding:var(--space-sm); border:var(--rule-hair) solid var(--color-control-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-ink); font:400 var(--text-base)/1.5 var(--font-body); }
.creation-detail .dm-field-error { color:var(--color-danger); font-size:var(--text-sm); }
.creation-detail [aria-invalid=true] { border-color:var(--color-danger); }
#survey-form { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-lg); margin-top:var(--space-lg); }
#survey-form .dm-primary { justify-self:start; }
.dm-table-wrap { width:100%; overflow-x:auto; margin-top:var(--space-md); }
.dm-table { width:100%; border-collapse:collapse; font-size:var(--text-sm); text-align:left; }
.dm-table caption { text-align:left; padding-bottom:var(--space-sm); color:var(--color-muted); font-size:var(--text-sm); }
.dm-table th { font-weight:800; color:var(--color-ink); }
.dm-table th, .dm-table td { padding:var(--space-sm) var(--space-xs); border-bottom:var(--rule-hair) solid var(--color-rule); vertical-align:top; }
.dm-table small { display:block; font-size:var(--text-sm); color:var(--color-muted); }
.dm-table td:first-child, .dm-table th:first-child { padding-left:0; }
.dm-table th:last-child, .dm-table td:last-child { padding-right:0; }
.dm-record-head { margin-top:var(--space-xl); }
.milo-map { position:relative; aspect-ratio:1; max-width:440px; margin:var(--space-lg) auto; background:var(--color-surface); border:var(--rule-hair) solid var(--color-control-border); border-radius:var(--radius-sm); overflow:hidden; }
.milo-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(5,minmax(0,1fr)); width:100%; height:100%; }
.milo-cell { display:flex; align-items:center; justify-content:center; border:var(--rule-hair) solid var(--color-orange-soft); color:var(--color-ink); }
.milo-road { background:var(--color-orange); }
.milo-visited { box-shadow:inset 0 0 0 3px var(--color-accent-deep); }
.milo-cell .icon { width:60%; height:60%; }
.milo-cell small { font-size:var(--text-sm); align-self:flex-end; }
.milo-robot { position:absolute; top:calc(var(--y) * 20%); left:calc(var(--x) * 20%); width:20%; height:20%; display:grid; place-items:center; transition:top 400ms var(--ease-out), left 400ms var(--ease-out); }
.milo-robot span { width:75%; height:75%; display:grid; place-items:center; background:var(--color-surface); border:2px solid var(--color-accent-deep); border-radius:var(--radius-sm); font-size:clamp(1.25rem,4vw,2rem); line-height:1; }
.milo-program { margin:var(--space-lg) 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-sm); }
.milo-program li { padding:var(--space-sm); border:2px solid var(--color-rule); border-radius:var(--radius-sm); background:var(--color-surface); }
.milo-program label > span { display:block; margin-bottom:var(--space-xs); font-size:var(--text-sm); font-weight:800; }
.milo-program select { padding:var(--space-xs); }
.milo-program select:disabled { color:var(--color-muted); opacity:1; }
.milo-program .is-running { border-color:var(--color-accent); background:var(--color-blue-soft); }
.milo-step-state { display:block; margin-top:var(--space-xs); color:var(--color-muted); font-size:var(--text-sm); }
.dm-trace { margin-top:var(--space-lg); font-size:var(--text-sm); }
.dm-trace summary { min-height:44px; padding-block:var(--space-sm); cursor:pointer; color:var(--color-accent); font-weight:700; }
.dm-trace ol { padding-left:var(--space-lg); line-height:1.75; }
.survey-chart { display:grid; gap:var(--space-md); margin-block:var(--space-lg); }
.survey-bar-row { display:grid; grid-template-columns:60px minmax(0,1fr) 2ch; align-items:center; gap:var(--space-sm); font-size:var(--text-sm); }
.survey-bar-track { display:block; height:20px; background:var(--color-blue-soft); overflow:hidden; border-radius:var(--radius-sm); }
.survey-bar-track > span { display:block; height:100%; background:var(--color-accent); border-radius:var(--radius-sm); }
.dm-helper-brief { display:grid; gap:var(--space-md); padding:var(--space-lg); margin-bottom:var(--space-lg); border-left:4px solid var(--color-purple); background:var(--color-purple-soft); }
.dm-eyebrow { display:block; margin-bottom:var(--space-sm); color:var(--color-purple); font-size:var(--text-sm); font-weight:800; }
.dm-helper-brief p { max-width:70ch; margin-top:var(--space-sm); font-size:var(--text-base); line-height:1.6; }
.dm-helper-brief .dm-actions { margin-top:0; }
.helper-log { padding-left:var(--space-lg); margin-top:var(--space-md); font-size:var(--text-sm); line-height:1.65; }
.helper-log li { padding-bottom:var(--space-sm); }
.helper-question { background:var(--color-orange-soft); padding:var(--space-md); margin-top:var(--space-lg); border-left:3px solid var(--color-orange); }
.helper-question h4 { font-size:var(--text-base); }
.helper-question p { margin-block:var(--space-sm); font-size:var(--text-base); line-height:1.6; }
.helper-question .dm-secondary { padding-inline:var(--space-sm); }
.helper-drafts { display:grid; gap:var(--space-lg); margin-top:var(--space-lg); }
.helper-draft { padding:var(--space-md); background:var(--color-surface); border:var(--rule-hair) solid var(--color-rule); border-radius:var(--radius-sm); }
.helper-draft h4, .helper-approved h4 { font-size:var(--text-base); line-height:1.5; }
.helper-draft label { margin-top:var(--space-md); }
.helper-draft textarea { margin-top:var(--space-xs); resize:vertical; min-height:155px; }
.helper-draft .dm-actions { margin-top:var(--space-sm); }
.helper-draft > p { margin-top:var(--space-sm); }
.helper-draft.is-approved { border-color:var(--color-green); }
.helper-draft.is-rejected { border-style:dashed; }
.helper-outbox { margin-top:var(--space-xl); border-top:var(--rule-hair) solid var(--color-purple); padding-top:var(--space-lg); }
.helper-outbox h3 span { margin-left:var(--space-xs); }
.helper-outbox > p { margin-top:var(--space-xs); }
#helper-outbox > p { margin-top:var(--space-md); font-size:var(--text-sm); }
.helper-approved { padding:var(--space-md); background:var(--color-green-soft); margin-top:var(--space-md); border-radius:var(--radius-sm); }
.helper-approved p { color:var(--color-green); font-size:var(--text-base); line-height:1.6; margin-top:var(--space-xs); white-space:pre-wrap; overflow-wrap:anywhere; }
@media (hover:hover) and (pointer:fine) {
 .dm-primary:hover:not(:disabled) { background:var(--color-accent-deep); }
 .dm-secondary:hover:not(:disabled) { background:var(--color-blue-soft); }
 .dm-back:hover, .dm-reset:hover { text-decoration:underline; text-underline-offset:.2em; }
}
@media (min-width:40rem) {
 .dm-surface { padding:var(--space-xl); }
 .dm-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:60rem) {
 .dm-title-row { grid-template-columns:minmax(0,1fr) auto; gap:var(--space-2xl); align-items:end; }
 .dm-level { flex-direction:column; align-items:flex-start; }
 .dm-workspace { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .dm-survey-layout { grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); }
 .dm-helper-layout { grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); }
 .dm-helper-brief { grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:var(--space-xl); }
 .dm-helper-brief .dm-actions { flex-direction:column; }
 .dm-learning { grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:var(--space-3xl); padding-block:var(--space-3xl); }
 .dm-related { padding-bottom:var(--space-3xl); }
 .dm-related-card { padding:var(--space-xl); }
 .creation-detail .hm-footer { padding-top:var(--space-3xl); }
}
@media (prefers-reduced-motion:reduce) {
 .milo-robot { transition:none; }
 .dm-reset:active { transform:none; }
}