/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4
 * genre: playful · macrostructure: activity-first workbench · design-system: design.md
 * theme: approved Carret identity · nav: established N1b · footer: established Ft5
 * six functional activities; responsive rules reviewed in source; owner handles browser review
 */
@import url('/project-pages.css');

.demo-fields { display:grid; gap:var(--space-lg); margin-block:var(--space-lg); max-width:32rem; }
.demo-count { font:700 var(--text-md)/1.4 var(--font-display); margin-block:var(--space-lg); }
.demo-count, .dm-table, .monitor-overall { font-variant-numeric:tabular-nums; }
.creation-detail .dm-primary:active:not(:disabled), .creation-detail .dm-secondary:active:not(:disabled) { background:var(--color-accent-deep); color:var(--color-accent-ink); }
.demo-fields select:disabled, .demo-check input:disabled { opacity:.55; cursor:not-allowed; }
.creation-detail .demo-fields p, .creation-detail .market-setting p { margin-top:var(--space-xs); }
.picture-settings { display:grid; gap:var(--space-lg); margin-top:var(--space-lg); }
.picture-board { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-md); margin-top:var(--space-lg); }
.picture-card { padding:var(--space-md); min-width:0; background:var(--color-surface); border-radius:var(--radius-sm); }
.picture-card h3 { font-size:var(--text-base); line-height:1.4; }
.picture-card p { font-size:var(--text-sm); line-height:1.5; margin-top:var(--space-xs); }
.picture-art { height:96px; display:grid; place-items:center; font-size:4rem; line-height:1; margin-bottom:var(--space-md); color:var(--color-purple); background:var(--color-purple-soft); border-radius:var(--radius-sm); }
.picture-art-rainbow { color:var(--color-green); background:var(--color-green-soft); }
.picture-art-note { color:var(--color-accent-deep); background:var(--color-blue-soft); }
.picture-art-poster { color:var(--color-ink); background:var(--color-orange-soft); }
.picture-hidden { display:flex; min-height:210px; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:var(--rule-hair) dashed var(--color-control-border); background:var(--color-clear); }
.picture-hidden-mark { font-size:var(--text-xl); color:var(--color-muted); }
.pattern-program { margin-top:var(--space-xl); display:grid; gap:var(--space-md); }
.pattern-loop { padding:var(--space-lg); display:grid; gap:var(--space-sm); border:var(--rule-strong) solid var(--color-orange); border-radius:var(--radius-card); }
.pattern-loop > strong { font-size:var(--text-base); }
.pattern-loop > span, .pattern-after { display:flex; justify-content:space-between; gap:var(--space-sm); font-size:var(--text-sm); }
.pattern-loop > span { padding-left:var(--space-md); }
.pattern-after { padding:var(--space-md) var(--space-lg); background:var(--color-orange-soft); border-radius:var(--radius-sm); }
.pattern-strip { min-height:180px; display:flex; flex-wrap:wrap; align-content:center; align-items:center; gap:var(--space-xs); margin-top:var(--space-xl); padding:var(--space-lg); background:var(--color-surface); border-radius:var(--radius-card); }
.printed-shape { display:grid; place-items:center; width:36px; height:44px; font-size:var(--text-xl); line-height:1; }
.printed-circle { color:var(--color-accent); }
.printed-star { color:var(--color-purple); }
.printed-flag { color:var(--color-green); border-bottom:var(--rule-strong) solid currentColor; }
#pattern-demo [hidden] { display:none; }
#market-form { display:grid; gap:var(--space-md); }
#market-form button { justify-self:start; }
.market-list { list-style:none; padding:0; margin-top:var(--space-lg); }
.market-list li { display:flex; justify-content:space-between; align-items:center; gap:var(--space-md); padding-block:var(--space-sm); border-bottom:var(--rule-hair) solid var(--color-rule); }
.market-list li > span { min-width:0; overflow-wrap:anywhere; }
.market-list .market-empty { min-height:160px; color:var(--color-muted); align-items:center; line-height:1.6; }
.market-setting { margin-top:var(--space-xl); border-top:var(--rule-hair) solid var(--color-control-border); padding-top:var(--space-lg); }
.market-setting > strong { font-size:var(--text-base); }
.market-setting p { font-size:var(--text-sm); line-height:1.6; }
.market-setting button { margin-top:var(--space-md); }
.signs-controls, .signs-names { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-lg); }
.signs-controls { margin-top:var(--space-lg); }
.signs-rule { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-sm) var(--space-md); padding:var(--space-lg); font-size:var(--text-sm); text-align:center; }
.signs-rule > span { color:var(--color-muted); }
.welcome-signs { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-lg); }
.welcome-sign { min-width:0; min-height:220px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:var(--space-xl) var(--space-lg); border:var(--rule-strong) solid var(--color-accent); border-radius:var(--radius-card); background:var(--color-blue-soft); text-align:center; }
.welcome-sign span { font-size:var(--text-md); line-height:1.5; overflow-wrap:anywhere; }
.welcome-sign h3 { color:var(--color-blue-dark); font-size:var(--text-xl); line-height:1.2; margin-top:var(--space-md); }
.library-controls { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-lg); margin-top:var(--space-lg); }
.library-tables { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-lg); margin-block:var(--space-lg); }
.library-loans > p { max-width:65ch; }
.library-loans table { min-width:250px; }
.monitor-overall { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-md); margin-top:var(--space-xl); }
.monitor-overall > div { padding:var(--space-lg); background:var(--color-purple-soft); border-radius:var(--radius-sm); }
.monitor-overall span, .monitor-overall small { display:block; font-size:var(--text-sm); }
.monitor-overall strong { display:block; font:700 var(--text-display)/1.2 var(--font-display); color:var(--color-purple); margin-block:var(--space-sm); }
#monitor-groups { margin-top:var(--space-xl); }
#monitor-groups table { min-width:480px; }
.monitor-decline { background:var(--color-orange-soft); }
.monitor-review { margin-top:var(--space-lg); }
.demo-check { display:flex; align-items:flex-start; gap:var(--space-sm); margin-top:var(--space-lg); padding-block:var(--space-sm); font-size:var(--text-base); line-height:1.6; cursor:pointer; }
.demo-check input { appearance:auto; width:22px; height:22px; min-width:22px; min-height:22px; margin:var(--space-2xs) 0 0; accent-color:var(--color-accent); }
.demo-check:has(input:disabled) { cursor:wait; }
.creation-detail .dm-related-orange { color:var(--color-ink); }
@media (min-width:40rem) {
 .picture-board, .library-controls, .library-tables, .monitor-overall { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .signs-names, .welcome-signs { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .welcome-sign { padding-inline:var(--space-md); }
}
@media (min-width:60rem) {
 .picture-settings { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .welcome-sign { min-height:280px; padding:var(--space-xl); }
 .signs-controls { grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--space-xl); }
}