/* Remaining journal screens use the same composition and tokens as Overview. */
.atelier-screen{padding-bottom:var(--space-8);min-width:0}
.atelier-screen .page-head{padding:var(--space-10) 0 var(--space-8);margin:0;align-items:flex-end;gap:var(--space-6)}
.atelier-screen .page-head h1{font:400 clamp(2.5rem,5vw,4.5rem)/var(--leading-display) var(--font-display);letter-spacing:var(--tracking-display);max-width:18ch;margin:var(--space-3) 0 var(--space-4)}
.atelier-screen .page-head p{max-width:46rem;margin:0;font-size:var(--text-body)}
.atelier-screen .eyebrow{font-size:var(--text-label);letter-spacing:.06em;color:var(--atelier-text-secondary);font-weight:400}
.atelier-screen .section-title h2{font:400 var(--text-title-sm)/var(--leading-heading) var(--font-display);letter-spacing:-.02em}
.atelier-screen .panel{border-radius:var(--radius-md);box-shadow:none;background:var(--atelier-surface);border-color:var(--atelier-border)}
.atelier-screen .field :is(input,select,textarea){border-radius:var(--radius-sm);min-height:48px;font-size:1rem;border-color:var(--atelier-control-border)}
.atelier-screen .note{border-radius:var(--radius-sm);box-shadow:none}
.atelier-test-drafts{border-block:1px solid var(--atelier-border);margin-bottom:var(--space-8)}
.atelier-test-drafts>summary{min-height:56px;padding:var(--space-4) 0;cursor:pointer;font-size:var(--text-small);font-weight:700}
.atelier-test-drafts .atelier-active{padding:var(--space-6) 0}
.atelier-screen .component-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.atelier-screen .component-card{padding:var(--space-6);border:0;border-top:2px solid var(--atelier-border);border-radius:0;background:transparent;display:flex;flex-direction:column}
.atelier-screen .component-main{background:var(--atelier-surface);border-top-color:var(--atelier-primary)}
.atelier-screen .component-number{background:none;color:var(--atelier-primary);font:400 var(--text-display)/1 var(--font-display);padding:0;border:0}
.atelier-screen .component-card h2{font:400 var(--text-title-sm)/1.12 var(--font-display);letter-spacing:-.025em;margin-block:var(--space-6);min-height:2.25em}
.atelier-screen .component-top{align-items:center;gap:var(--space-3)}
.atelier-screen .component-timing{background:none;border-block:1px solid var(--atelier-border);border-radius:0;padding-block:var(--space-4)}
.atelier-screen .component-parameters{border:0;border-bottom:1px solid var(--atelier-border);margin-bottom:var(--space-5)}
.atelier-screen .component-actions{margin-top:auto}
.atelier-screen .component-card>.inline{margin-top:var(--space-3)}
.atelier-screen .component-card>.inline .quiet{padding-inline:0;font-weight:400}
.atelier-screen .practice-panel{background:transparent;border:0;border-block:1px solid var(--atelier-border);border-radius:0;margin-top:var(--space-8)}
.atelier-screen .practice-panel>summary{min-height:48px;cursor:pointer}
@media(max-width:1050px){.atelier-screen .component-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.atelier-screen .page-head{padding-top:var(--space-7);align-items:flex-start}.atelier-screen .component-grid{grid-template-columns:1fr}.atelier-screen .component-card{padding:var(--space-5) 0}.atelier-screen .component-main{padding:var(--space-5)}.atelier-screen .component-card h2{min-height:0}.atelier-screen .page-head h1{font-size:2.5rem}.atelier-screen .page-head{flex-direction:column}}

/* Component reference: an open, numbered instruction sheet. */
.atelier-screen-component>.panel{background:transparent;border:0;border-top:1px solid var(--atelier-border);padding:var(--space-8) 0;max-width:60rem}
.atelier-screen-component h2{font:400 var(--text-title)/1.15 var(--font-display)}
.atelier-screen-component .instructions{counter-reset:instruction;list-style:none;padding:0;margin-block:var(--space-8)}
.atelier-screen-component .instructions li{counter-increment:instruction;display:grid;grid-template-columns:3rem 1fr;gap:var(--space-4);padding:var(--space-5) 0;border-bottom:1px solid var(--atelier-border);margin:0}
.atelier-screen-component .instructions li:before{content:counter(instruction,decimal-leading-zero);font:400 var(--text-display)/1.2 var(--font-display);color:var(--atelier-primary)}
.atelier-screen-component .result-row{background:var(--atelier-surface);padding:var(--space-4);gap:var(--space-5)}
.component-scale{border-bottom:1px solid var(--atelier-border)}
.component-scale summary{min-height:48px;padding-block:var(--space-4);cursor:pointer}
.component-levels{display:flex;flex-wrap:wrap;gap:var(--space-4);padding-bottom:var(--space-6)}
.component-levels>div{min-width:4rem;max-width:18rem;font-size:var(--text-small)}
.component-level-color{display:block;width:3rem;height:3rem;border:1px solid var(--atelier-control-border);margin-bottom:var(--space-2)}

/* Product and sample setup. */
.atelier-screen-setup .steps{border-block:1px solid var(--atelier-border);border-radius:0;background:transparent;padding:var(--space-5) 0;margin-bottom:var(--space-8);gap:var(--space-5);font-size:var(--text-small)}
.atelier-screen-setup .steps b{color:var(--atelier-primary)}
.atelier-screen-setup .form-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--space-12);align-items:start}
.atelier-screen-setup .panel{padding:var(--space-8);border:0}
.atelier-screen-setup aside.panel{background:transparent;padding:0 0 0 var(--space-8);border-left:1px solid var(--atelier-border);border-radius:0}
.atelier-screen-setup aside h2{font:400 var(--text-title-sm)/1.15 var(--font-display);margin-top:var(--space-6)}
.atelier-screen-setup .product-choice{background:transparent;border-block:1px solid var(--atelier-border);border-radius:0;padding:var(--space-5) 0}
.atelier-screen-setup .product-choice h3{font:400 var(--text-display)/1.2 var(--font-display)}
.atelier-screen-setup .check{align-items:flex-start;line-height:1.6;padding:var(--space-3) 0}
.atelier-screen-setup .check input{flex:none;width:1.25rem;height:1.25rem;margin-top:.2rem;accent-color:var(--atelier-primary)}
@media(max-width:760px){.atelier-screen-setup .form-grid{grid-template-columns:1fr;gap:var(--space-8)}.atelier-screen-setup .panel{padding:var(--space-5)}.atelier-screen-setup aside.panel{border:0;border-top:1px solid var(--atelier-border);padding:var(--space-6) 0}.atelier-screen-setup .steps{gap:var(--space-3);flex-wrap:wrap}}

/* Step-by-step instructions keep the approved media unchanged. */
.atelier-screen-instructions{padding-top:var(--space-7)}
.atelier-screen-instructions .guide-topbar{border-bottom:1px solid var(--atelier-border);padding-bottom:var(--space-5);margin-bottom:var(--space-8)}
.atelier-screen-instructions .instruction-guide{gap:var(--space-10)}
.atelier-screen-instructions .instruction-body{border:0;border-radius:var(--radius-md);padding:var(--space-8)}
.atelier-screen-instructions #instruction-title{font:400 clamp(1.75rem,2.8vw,2.5rem)/1.2 var(--font-display);letter-spacing:-.025em;max-width:34rem}
.atelier-screen-instructions .instruction-step{border-radius:var(--radius-sm)}
.atelier-screen-instructions .instruction-context{border:0;border-left:1px solid var(--atelier-border);border-radius:0;background:transparent;padding-left:var(--space-6)}
.atelier-screen-instructions .instruction-context h3{font:400 var(--text-display)/1.2 var(--font-display)}
@media(max-width:760px){.atelier-screen-instructions .instruction-body{padding:var(--space-5)}.atelier-screen-instructions .instruction-guide{grid-template-columns:1fr}.atelier-screen-instructions .instruction-context{border:0;border-top:1px solid var(--atelier-border);padding:var(--space-5) 0}}

/* Reading workspace: clear timing, a single parameter, and the printed scale. */
.atelier-screen-guided .steps{background:none;border-block:1px solid var(--atelier-border);border-radius:0;padding:var(--space-4) 0}
.atelier-screen-guided .timer-panel{background:var(--atelier-info-surface);color:var(--atelier-text);border:0;border-left:3px solid var(--atelier-primary);border-radius:var(--radius-sm);padding:var(--space-6);margin-block:var(--space-6)}
.atelier-screen-guided .timer-panel p{color:var(--atelier-text-secondary)}
.atelier-screen-guided .timer-digits{font:400 clamp(2.5rem,4vw,4rem)/1 var(--font-display);color:var(--atelier-primary);font-variant-numeric:tabular-nums}
.atelier-screen-guided .form-grid{gap:var(--space-10)}
.atelier-screen-guided .pad{border:0;border-radius:var(--radius-md);padding:var(--space-7);background:var(--atelier-surface)}
.atelier-screen-guided .pad h2{font:400 var(--text-title)/1.15 var(--font-display);margin:var(--space-2) 0}
.atelier-screen-guided .pad-nav{gap:var(--space-2);margin-bottom:var(--space-5)}
.atelier-screen-guided .pad-nav button{min-width:48px;min-height:48px;border-radius:var(--radius-sm)}
.atelier-screen-guided .color-option{border-radius:var(--radius-sm);min-width:64px}
.atelier-screen-guided .color-option[aria-pressed=true]{outline:2px solid var(--atelier-primary);outline-offset:3px}
.atelier-screen-guided aside.panel{border:0;border-top:1px solid var(--atelier-border);border-radius:0;background:transparent;padding:var(--space-6) 0}
.atelier-screen-guided aside h2{font:400 var(--text-title-sm)/1.2 var(--font-display)}
@media(max-width:760px){.atelier-screen-guided .form-grid{grid-template-columns:1fr}.atelier-screen-guided .pad{padding:var(--space-5)}.atelier-screen-guided .timer-panel{flex-wrap:wrap}.atelier-screen-guided .pad-head{flex-wrap:wrap}}

/* Review and save. */
.atelier-screen-review .form-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-10);align-items:start;border-top:1px solid var(--atelier-border);padding-top:var(--space-8)}
.atelier-screen-review .panel{border:0;padding:var(--space-7)}
.atelier-screen-review .panel h2{font:400 var(--text-title-sm)/1.15 var(--font-display)}
.atelier-screen-review .panel+ .panel{background:transparent;padding-inline:0}
.atelier-screen-review .upload{background:var(--atelier-surface);border:1px dashed var(--atelier-control-border);border-radius:var(--radius-sm);min-height:96px;display:flex;align-items:center;justify-content:center}
.atelier-screen-review textarea{min-height:180px}
.atelier-screen-review .sticky-bottom{border-top:1px solid var(--atelier-border);border-radius:0;box-shadow:none;background:var(--atelier-bg);padding-block:var(--space-5)}
@media(max-width:850px){.atelier-screen-review .form-grid{grid-template-columns:1fr}.atelier-screen-review .panel{padding:var(--space-5)}}

/* History is an open journal table, with cards on phones. */
.atelier-screen-history .filters{background:transparent;border-block:1px solid var(--atelier-border);padding:var(--space-6) 0;margin-bottom:var(--space-8);gap:var(--space-5)}
.atelier-screen-history .table-wrap{border:0;border-radius:0;background:transparent}
.atelier-screen-history table{background:transparent}
.atelier-screen-history th{background:transparent;text-transform:none;letter-spacing:0;font-size:var(--text-label);color:var(--atelier-text-secondary)}
.atelier-screen-history td{padding:var(--space-5) var(--space-4);font-size:var(--text-small);border-color:var(--atelier-border)}
.atelier-screen-history .record-link{font-family:var(--font-display);font-size:var(--text-display);font-weight:400;text-align:left}
.atelier-screen-history .record-action .quiet{color:var(--atelier-primary)}
@media(max-width:650px){.atelier-screen-history .filters{display:grid;grid-template-columns:1fr}.atelier-screen-history tbody tr{border:0;border-bottom:1px solid var(--atelier-border);border-radius:0;padding:var(--space-4) 0;background:transparent}.atelier-screen-history td{padding:var(--space-2) 0}}

/* Trends. */
.atelier-screen-trends .filters{background:transparent;border-block:1px solid var(--atelier-border);padding:var(--space-6) 0;gap:var(--space-5);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.atelier-screen-trends>.panel{border:0;padding:var(--space-8);margin-block:var(--space-8)}
.atelier-screen-trends .chart{display:block;width:100%;max-height:420px;background:transparent}
.atelier-screen-trends .chart text{fill:var(--atelier-text-secondary);font-family:var(--font-body)}
.atelier-screen-trends .empty{padding:var(--space-12) var(--space-6)}
.atelier-screen-trends .empty h3{font:400 var(--text-title)/1.15 var(--font-display)}
.atelier-screen-trends .table-wrap{border:0;border-radius:0;background:transparent}
.atelier-screen-trends th{background:none;text-transform:none;letter-spacing:0}
@media(max-width:850px){.atelier-screen-trends .filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:550px){.atelier-screen-trends .filters{grid-template-columns:1fr}.atelier-screen-trends>.panel{padding:var(--space-5)}}

/* Product library shares the component index and a quiet document section. */
.atelier-screen-products>.note{background:transparent;border:0;border-block:1px solid var(--atelier-border);padding:var(--space-5) 0;margin-bottom:var(--space-8)}
.atelier-screen-products>section.panel{background:transparent;border:0;border-top:1px solid var(--atelier-border);border-radius:0;padding:var(--space-8) 0}
.atelier-screen-products>section.panel h2{font:400 var(--text-title)/1.2 var(--font-display)}
.atelier-screen-products>section.panel h3{font:400 var(--text-display)/1.2 var(--font-display);margin-top:var(--space-8)}

/* Resources index. */
.atelier-screen-resources .resource-hero h1{font:400 clamp(2.5rem,5vw,4.5rem)/1.05 var(--font-display);letter-spacing:var(--tracking-display)}
.atelier-screen-resources .resource-section-heading h2,.atelier-screen-resources .resource-guide-banner h2{font:400 var(--text-title-sm)/1.2 var(--font-display);letter-spacing:-.025em}
.atelier-screen-resources .resource-card{border-radius:0;transform:none}
.atelier-screen-resources .resource-card:hover{transform:none}
.atelier-screen-resources .resource-card-caption{padding:var(--space-4) var(--space-6) var(--space-4) 0;border-bottom:1px solid var(--atelier-border)}
.atelier-screen-resources .resource-card-caption h3{font:400 var(--text-display-sm)/1.2 var(--font-display)}
.atelier-screen-resources :is(.resource-topic-art,.resource-parameter-art){border-radius:var(--radius-sm)}
.atelier-screen-resources .resource-card-category{font-size:var(--text-caption);font-weight:400;letter-spacing:.025em}
.atelier-screen-resources .resource-quicklinks a{min-height:48px;color:var(--atelier-primary)}
.atelier-screen-resources .resource-support{border-radius:0;background:transparent;border:0;border-top:1px solid var(--atelier-border)}

/* Resource field guides, articles, search and printed-document index. */
.atelier-screen-resources :is(.resource-page-head h1,.resource-article h1){font:400 clamp(2.5rem,4vw,4rem)/1.08 var(--font-display);letter-spacing:var(--tracking-display)}
.atelier-screen-resources :is(.resource-article-body h2,.resource-guide-chapters h2,.resource-at-glance h2,.resource-document-panel h2,.resource-related h2){font:400 var(--text-title-sm)/1.2 var(--font-display);letter-spacing:-.02em}
.atelier-screen-resources .resource-article{max-width:64rem}
.atelier-screen-resources .resource-detail-art{border-radius:var(--radius-sm)}
.atelier-screen-resources :is(.resource-search,.resource-document-panel,.resource-at-glance){border:0;border-radius:var(--radius-md);background:var(--atelier-surface)}
.atelier-screen-resources .resource-guide-contents{border-radius:0;border:0;border-top:1px solid var(--atelier-border);background:transparent}
.atelier-screen-resources .resource-read-more{border-radius:var(--radius-sm)}
.atelier-screen-resources .resource-component-documents{padding-block:var(--space-6);border-bottom:1px solid var(--atelier-border)}
.atelier-screen-resources .resource-component-documents h3{font:400 var(--text-display)/1.2 var(--font-display)}

/* FAQ. */
.atelier-screen-resources .resource-faq-section{border:0;border-top:1px solid var(--atelier-border);border-radius:0;background:transparent;padding:var(--space-8) 0}
.atelier-screen-resources .resource-faq-header h2{font:400 var(--text-title)/1.15 var(--font-display);letter-spacing:-.025em}
.atelier-screen-resources .resource-faq-icon{background:none;border:0;border-radius:0}
.atelier-screen-resources .resource-faq-item>summary{min-height:64px;font-weight:400}
.atelier-screen-resources .resource-faq-group h3{font-size:var(--text-label);font-weight:400;letter-spacing:.04em}
.resource-contact-prompt{border-top:1px solid var(--atelier-border);padding-top:var(--space-6);margin-top:var(--space-8);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap}
.resource-contact-prompt h3{font:400 var(--text-title-sm)/1.2 var(--font-display);margin:0}

/* Welcome retains the approved illustration, with Atelier composition. */
.account-page--welcome{padding:var(--space-12) var(--space-6)}
.account-welcome{max-width:1000px;min-height:650px;display:grid;grid-template-columns:1.1fr 1fr;border:0;border-radius:var(--radius-md);box-shadow:none}
.account-welcome-top{padding:var(--space-12) var(--space-8) var(--space-8);min-height:0;justify-content:space-between}
.account-welcome-copy{padding:0}
.account-welcome h1{font:400 clamp(3rem,6vw,4.5rem)/1.05 var(--font-display);letter-spacing:var(--tracking-display)}
.account-welcome-copy p{font-size:var(--text-lead)}
.account-welcome-bottom{min-height:0;padding:var(--space-12) var(--space-8);justify-content:center;background:var(--atelier-selected)}
.account-welcome-bottom:before{display:none}
.account-welcome .account-button{border-radius:var(--radius-sm);font-size:var(--text-body);font-weight:700;box-shadow:none}
.account-welcome-illustration{margin:var(--space-6) auto 0;max-height:280px}
.account-welcome .account-device-link{font-size:var(--text-small);min-height:48px}
.account-contact-link{display:block;text-align:center;color:var(--atelier-primary);font-size:var(--text-small);min-height:48px;padding:var(--space-3);text-underline-offset:.25em}
@media(max-width:650px){.account-page--welcome{padding:0}.account-welcome{grid-template-columns:1fr;border-radius:0;min-height:100svh}.account-welcome-top{padding:var(--space-8) var(--space-6) var(--space-5)}.account-welcome-bottom{padding:var(--space-7) var(--space-6)}.account-welcome-illustration{height:180px}.account-welcome-copy p{font-size:var(--text-body)}}

/* Shared account form primitives, beginning with sign-in. */
.account-page--form .account-card{max-width:560px;border:0;border-radius:var(--radius-md);box-shadow:none;min-height:0}
.account-page--form .account-form-header{padding:var(--space-8);background:transparent;border-bottom:1px solid var(--atelier-border)}
.account-page--form .account-form-header:before{display:none}
.account-page--form .account-form-header h1{font:400 var(--text-title)/1.1 var(--font-display);letter-spacing:var(--tracking-display);margin-top:var(--space-8)}
.account-page--form .account-form-body{padding:var(--space-8)}
.account-page--form .account-field input{border-radius:var(--radius-sm)}
.account-page--form .account-button{border-radius:var(--radius-sm);font-size:var(--text-body);font-weight:700}
.account-page--form .account-form-footer{border-top:1px solid var(--atelier-border);margin-top:var(--space-8);padding-top:var(--space-5)}
.account-page--form .account-field-hint,.account-page--form .account-preview-note{font-size:var(--text-small)}
.account-page--form .account-device-link{font-size:var(--text-small);min-height:48px}
@media(max-width:520px){.account-page--form .account-card{min-height:100svh;max-width:none;border-radius:0}.account-page--form :is(.account-form-header,.account-form-body){padding:var(--space-6)}.account-page--form .account-form-header h1{font-size:2.25rem}}

/* First-visit and source-chart dialogs share the same material and type. */
.onboard article{border-radius:var(--radius-lg);background:var(--atelier-raised);color:var(--atelier-text);box-shadow:var(--elevation-dialog)}
.onboard article h1{font:400 var(--text-title)/1.1 var(--font-display);letter-spacing:var(--tracking-display)}
.chart-overlay article h2{font:400 var(--text-title-sm)/1.15 var(--font-display)}
.onboard article :is(.primary,.secondary,.quiet){border-radius:var(--radius-sm);min-height:48px}
.onboard article .note{border-radius:var(--radius-sm)}

/* Reflow at 200% text; grid children must be allowed below min-content width. */
.atelier-screen .form-grid>*{min-width:0}
.atelier-screen :is(h1,h2,h3,p,li){overflow-wrap:anywhere}
.account-welcome-top,.account-welcome-bottom,.account-welcome-copy{min-width:0}
.account-welcome :is(h1,p,button){overflow-wrap:anywhere}
.account-welcome .account-brand{max-width:100%}
@media(max-width:760px){.atelier-screen :is(.form-grid){grid-template-columns:minmax(0,1fr)}.atelier-screen-resources .resource-component ol{padding-inline-start:1.25em}}
@media(max-width:650px){.account-welcome{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.atelier-screen-guided .real-colors{grid-template-columns:repeat(2,minmax(0,1fr))}.atelier-screen-guided .color-option{min-width:0;overflow-wrap:anywhere}}
.atelier-screen-resources .resource-procedure>summary{padding:var(--space-4) 0;gap:var(--space-3)}
.atelier-screen-resources .resource-procedure>summary :is(span,strong,small){min-width:0;overflow-wrap:anywhere}
.atelier-screen-resources .resource-procedure{border-radius:var(--radius-sm)}