/* Current-site component contract. Loaded once, after page layout styles.
   Archive and colour-preview pages intentionally keep their original styles. */
:root{--surface-card:#fffdf8;--surface-note:var(--cream);--card-radius:24px;--note-radius:16px;--card-gap:24px;--card-padding:28px 32px;--note-padding:20px 24px}
/* Content surfaces: colour does not depend on page, work state or audience. */
.form-card,.task-card,.work-panel,.aside-card,.collection-item,.step-disclosure,.rules-disclosure,.coaches .coach-slot,dialog{background:var(--surface-card);border:0;border-radius:var(--card-radius)}
.form-card,.task-card,.work-panel,.aside-card,.collection-item,.audiences .audience,.coaches .coach-caption{padding:var(--card-padding)}
dialog{padding:32px;max-height:90vh;overflow-y:auto}
.coaches .coach-slot{padding:0}
/* Audience category colors remain the original homepage design. */
.audiences .audience{border:0;border-radius:var(--card-radius)}
#tasks-screen .task-card{padding:var(--card-padding)}
.graphic-steps,#tasks-screen .task-grid,.task-grid,.work-grid,.audience-grid,.coaches .coach-slots{gap:var(--card-gap)}
.main-task-grid{max-width:var(--reading-max)}
.work-panel,.aside-card{margin-bottom:var(--card-gap)}
.work-main>.work-panel:last-child,.work-aside>.aside-card:last-child{margin-bottom:0}
#detail-screen .work-purpose{margin-top:var(--card-gap)}
.collection-item{margin-top:var(--card-gap)}
/* Examples, copied prompts and notices use the same quiet fill. */
.guide-example,.note-example-items,#ai-prompt-text,.demo-callout,.feedback,.transcript-box,.mock-notifications,#task-error,.mock-status.error{background:var(--surface-note);border:0;border-radius:var(--note-radius);padding:var(--note-padding)}
.guide-example,.note-example-items,.demo-callout,.transcript-box{margin-top:24px;margin-bottom:24px}
#tasks-screen .demo-callout{background:transparent;padding:0;border:0;border-radius:0;margin:0}
.demo-callout.fixture-entry{background:transparent;padding:0;border:0;border-radius:0}
/* Use whitespace between content sections instead of additional nested rules. */
.practice-purpose,.step-ai,.thinking-fields,.note-entry+.note-entry,.outcome,#work-review .review-meta,.work-next{border:0}
.practice-purpose{padding-bottom:0;margin-bottom:24px}.step-ai{margin-top:24px;padding-top:0}
.thinking-fields,.note-entry+.note-entry{margin-top:24px;padding-top:0}
#work-review .review-meta{padding-bottom:0;margin:20px 0 24px}
.work-next{margin-top:24px;padding-top:0}
.abilities article+article{border-left:0}
/* Same heading level has the same scale; field labels stay subordinate. */
.work-panel h2,.aside-card h2,dialog h2{font-size:28px;font-weight:800;line-height:1.5}
.work-panel h3,.aside-card h3,.step-body h3,dialog h3,#collection-dialog h3,#work-review h3{font-size:24px;line-height:1.6}
.work-panel h4,.collection-item h4{font-size:20px;line-height:1.6}
/* Simple disclosures, including independent testing tools. */
.writing-help,.demo-tools,.demo-review,.mock-notifications,.demo-tools .demo-review{border:0;border-top:1px solid var(--line);margin-top:24px}
.writing-help>summary,.demo-tools>summary,.demo-review>summary,.mock-notifications>summary,.demo-tools .demo-review>summary{display:block;position:relative;min-height:0;padding:17px 34px 17px 0;border:0;border-radius:0;background:transparent;font-size:21px;font-weight:700;line-height:1.7;list-style:none;cursor:pointer}
.writing-help>summary::-webkit-details-marker,.demo-tools>summary::-webkit-details-marker,.demo-review>summary::-webkit-details-marker,.mock-notifications>summary::-webkit-details-marker{display:none}
.writing-help>summary::after,.demo-tools>summary::after,.demo-review>summary::after,.mock-notifications>summary::after{content:"＋";position:absolute;right:2px;top:50%;width:auto;height:auto;border:0;font-size:22px;font-weight:400;transform:translateY(-50%)}
.writing-help[open]>summary::after,details.demo-tools[open]>summary::after,.demo-review[open]>summary::after,.mock-notifications[open]>summary::after{content:"−";transform:translateY(-50%)}
.writing-help[open]>summary,.demo-tools[open]>summary,.demo-review[open]>summary,.mock-notifications[open]>summary{margin-bottom:24px}
.aside-card.writing-help{border:0}
.demo-tools .demo-review{padding-top:0}
.faq .questions details{border:0;border-top:1px solid var(--line)}
/* Illustrated guide cards retain their larger title and existing symbols. */
.step-disclosure>summary{padding:var(--card-padding)}
.step-body{padding:0 32px 28px}
.rules-disclosure>summary{padding:var(--card-padding)}
/* One action geometry; semantic primary/secondary classes remain state-driven. */
.primary,.secondary,button.text-button,.demo-tools button.secondary,.demo-tools button.text-button{font-size:20px;font-weight:800;line-height:1.5;border-radius:var(--button-radius);padding:14px 30px;min-height:var(--button-large-height);width:fit-content;max-width:100%;box-sizing:border-box;box-shadow:none;transform:none}
.secondary,button.text-button,.demo-tools button.secondary,.demo-tools button.text-button{background:transparent;color:var(--deep);border:1px solid var(--orange)}
.secondary:hover,button.text-button:hover,.demo-tools button.secondary:hover,.demo-tools button.text-button:hover{background:#fff0e6}
.button-row,.work-actions,.mock-actions,#tasks-screen .mock-actions,.record-controls,.topic-suggestions,.work-export-actions,.collection-order{gap:16px}
.button-row{margin-top:24px}
.work-actions{justify-content:flex-start}
@media(max-width:760px){
 :root{--card-padding:22px;--note-padding:16px 20px}
 dialog{padding:24px 22px}
 .step-body{padding:0 22px 22px}
 .work-panel h2,.aside-card h2,dialog h2{font-size:26px}
 .primary,.secondary,button.text-button,.demo-tools button.secondary,.demo-tools button.text-button{padding-block:12px}
}

/* Shared concept icons in the same four-step navigation. */
.detail-steps button{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 10px}
.detail-steps svg{width:42px;height:42px;flex:0 0 42px;color:var(--ink)}
.detail-steps svg{padding:5px;border-radius:40%;background:#f9ebce}
.detail-steps button span{min-width:0}
.detail-steps li:nth-child(2) svg{background:var(--blue)}
.detail-steps li:nth-child(4) svg{background:#f4e0d5}
@media(max-width:760px){.detail-steps button{flex-direction:column;gap:8px}.detail-steps svg{width:38px;height:38px;flex-basis:38px}}

.primary:disabled:hover{background:var(--orange);border-color:var(--orange)}

/* Authentication uses the same action group at every width. */
.form-card .button-row{flex-direction:row;flex-wrap:wrap;gap:16px}
.form-card .button-row>.primary,.form-card .button-row>.secondary{margin:0}