/* Screen composition. Shared values are generated into theme.css. */
.atelier-shell{display:block;min-height:100vh;max-width:1440px;margin:auto;padding:0 var(--space-16);color:var(--atelier-text)}
.atelier-main{grid-column:auto;padding:0;max-width:none;margin:0;width:100%;outline:0}
.atelier-shell a{color:inherit;text-underline-offset:.3em}
.atelier-shell a.atelier-button{color:var(--control-primary-text)}
.atelier-shell a.atelier-button--secondary,.atelier-shell a.atelier-button--quiet{color:var(--control-secondary-text)}
.atelier-shell p{line-height:var(--leading-body)}
.atelier-header{display:flex;align-items:center;gap:var(--space-8);min-height:108px;border-bottom:1px solid var(--atelier-border)}
.atelier-brand{display:block;flex:none;width:181px;line-height:0;text-decoration:none}
.atelier-brand img{width:100%;height:auto;display:block}
:root[data-theme=dark] .atelier-brand{padding:10px 12px;background:var(--atelier-strip-paper);border-radius:var(--radius-sm);width:205px}
.atelier-nav{display:flex;gap:var(--space-8);margin:auto;align-items:center;font-size:var(--text-small)}
.atelier-nav a{display:inline-flex;align-items:center;min-height:48px;text-decoration:none;color:var(--atelier-text-secondary);position:relative}
.atelier-nav a[aria-current]{color:var(--atelier-text);font-weight:700}
.atelier-nav a[aria-current]:after{content:"";position:absolute;bottom:2px;left:0;right:0;height:2px;background:var(--atelier-primary)}
.atelier-header-tools{display:flex;align-items:center;gap:var(--space-6);margin-left:auto}
.atelier-sign-in{font-size:var(--text-small);text-decoration:none;display:flex;gap:var(--space-3);min-height:48px;align-items:center}
.atelier-menu{position:relative}
.atelier-menu>summary{list-style:none;width:48px;height:48px;border:1px solid var(--atelier-control-border);border-radius:50%;display:grid;place-items:center;cursor:pointer}
.atelier-menu>summary::-webkit-details-marker{display:none}
.atelier-menu>summary svg{width:20px;height:20px}
.atelier-menu>summary:hover{background:var(--atelier-selected)}
.atelier-menu-panel{position:absolute;right:0;top:calc(100% + 12px);width:min(320px,calc(100vw - 40px));background:var(--atelier-raised);box-shadow:var(--elevation-dialog);border:1px solid var(--atelier-border);padding:var(--space-6);border-radius:var(--radius-md);z-index:30;font-size:var(--text-small)}
.atelier-menu-panel nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-bottom:var(--space-5)}
.atelier-menu-panel nav a{min-height:48px;display:flex;align-items:center;text-decoration:none;border-bottom:1px solid var(--atelier-border)}
.atelier-menu-panel p{color:var(--atelier-text-secondary);margin-top:var(--space-5)}
.atelier-skip{position:fixed;top:-100px;left:16px;z-index:100;background:var(--atelier-primary);color:var(--atelier-on-primary)!important;padding:var(--space-4)}
.atelier-skip:focus{top:16px}
.atelier-shell :is(button,a,summary,select):focus-visible{outline:3px solid var(--control-focus);outline-offset:4px}
.atelier-shell :is(.primary,.secondary,.quiet){min-height:48px;padding:var(--space-3) var(--space-5);font-size:var(--text-small);border-radius:var(--radius-sm);line-height:var(--leading-ui);font-weight:700;max-width:100%;white-space:normal}
.atelier-shell .primary{color:var(--control-primary-text);background:var(--control-primary-bg);border:1px solid transparent}
.atelier-shell .primary:hover{background:var(--control-primary-hover)}
.atelier-shell .primary:active:not(:disabled){background:var(--control-primary-pressed)}
.atelier-shell .secondary{color:var(--control-secondary-text);background:transparent;border:1px solid var(--control-border)}
.atelier-shell .quiet{color:var(--control-secondary-text);background:transparent;border:1px solid transparent}
.atelier-shell :is(.secondary,.quiet):hover:not(:disabled){background:var(--control-secondary-hover)}
.atelier-shell :is(.primary,.secondary,.quiet):disabled{background:var(--control-disabled-bg);color:var(--control-disabled-text);border:1px dashed var(--control-disabled-border);opacity:1}
.atelier-shell .pill,.atelier-shell .demo-pill{border-radius:var(--radius-sm);letter-spacing:0;text-transform:none;font-size:var(--text-caption)}
.atelier-page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-6);padding:var(--space-10) 0 var(--space-8)}
.atelier-page-heading h1{font-family:var(--font-display);font-weight:400;font-size:var(--text-hero);line-height:var(--leading-display);letter-spacing:var(--tracking-display);margin:0;overflow-wrap:anywhere}
.atelier-page-heading p{color:var(--atelier-text-secondary);font-size:var(--text-small);margin:var(--space-4) 0 0;max-width:54rem}
.atelier-page-heading p>span{padding:0 var(--space-3)}
.atelier-page-heading>.atelier-button{flex:none}
.atelier-active-jump{display:none}
.atelier-workspace{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--space-12);border-top:1px solid var(--atelier-border);padding:var(--space-8) 0 var(--space-12)}
.atelier-workspace>*{min-width:0}
.atelier-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin:0 0 var(--space-6)}
.atelier-section-heading h2,.atelier-record-context h2,.atelier-source h2,.atelier-kit h2{font:400 var(--text-title-sm)/var(--leading-heading) var(--font-display);letter-spacing:-.02em;margin:0}
.atelier-section-heading h2>span,.atelier-record-context h2>span{font:400 var(--text-small)/var(--leading-ui) var(--font-body);color:var(--atelier-text-secondary);margin-left:var(--space-2)}
.atelier-section-heading>a{font-size:var(--text-small);white-space:nowrap;text-decoration:none}
.atelier-record-label,.atelier-demo{font-size:var(--text-caption);line-height:1.5;color:var(--atelier-text-secondary)}
.atelier-demo{color:var(--atelier-warning)}
.atelier-specimen{background:var(--atelier-surface);padding:var(--space-8);border-radius:var(--radius-md)}
.atelier-specimen-heading h3{font:400 var(--text-title)/var(--leading-heading) var(--font-display);letter-spacing:var(--tracking-display);margin:0;overflow-wrap:anywhere}
.atelier-specimen-heading p{margin:var(--space-3) 0 var(--space-6);font-size:var(--text-small);color:var(--atelier-text-secondary)}
.atelier-specimen-heading p>span{display:block}
.atelier-sample-link{display:flex;gap:var(--space-4);align-items:center;min-height:48px;font-size:var(--text-small);font-weight:700;text-decoration:none;margin-top:var(--space-4)}
.atelier-active{margin:0}.atelier-draft-list{display:block;gap:0}
.atelier-draft{padding:var(--space-6) 0;margin:0;border:0;border-bottom:1px solid var(--atelier-border);border-radius:0;background:transparent;display:block;box-shadow:none}
.atelier-draft:first-child{padding-top:0}
.atelier-draft:last-child{border-bottom:0}
.atelier-draft-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.atelier-draft h3{font:400 var(--text-title-sm)/1.12 var(--font-display);letter-spacing:-.025em;margin:0}
.atelier-draft .draft-status{display:inline-flex;align-items:center;gap:var(--space-1);padding:0;border:0;background:none;letter-spacing:0;text-transform:none;font-size:var(--text-label);font-weight:700;color:var(--atelier-text-secondary);white-space:normal}
.atelier-draft .draft-status svg{width:16px;height:16px;flex:none}
.atelier-draft .draft-status.ready{color:var(--atelier-success)}
.atelier-draft .draft-status.attention{color:var(--atelier-warning)}
.atelier-draft .draft-status.waiting{color:var(--atelier-info)}
.atelier-draft-meta{font-size:var(--text-small);color:var(--atelier-text-secondary);margin:var(--space-2) 0 var(--space-2)}
.atelier-draft-meta>span{display:block}
.atelier-draft .draft-detail{margin:var(--space-2) 0 var(--space-4);font-size:var(--text-label);color:var(--atelier-text-secondary)}
.atelier-draft-action{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.atelier-progress{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-caption);color:var(--atelier-text-secondary)}
.atelier-progress .result-progress{width:calc(var(--progress-count,16)*4px);max-width:96px;height:12px;border-radius:0;margin:0;display:block;flex:none;mask-image:repeating-linear-gradient(90deg,transparent 0 1px,#000 1px 3px,transparent 3px 4px)}
.atelier-no-drafts{padding-top:0}.atelier-no-drafts>p{margin:var(--space-8) 0}
.atelier-recent{padding:var(--space-8) 0;border-top:1px solid var(--atelier-border)}
.atelier-recent .table-wrap{border:0;border-radius:0;background:none;overflow:auto}
.atelier-recent table{background:none;width:100%}.atelier-recent th{background:none;text-transform:none;font-size:var(--text-label);letter-spacing:0}
.atelier-recent td{font-size:var(--text-small);padding:var(--space-5) var(--space-4);border-color:var(--atelier-border)}
.atelier-recent .record-link{font-size:var(--text-body)}
.atelier-kit{display:grid;grid-template-columns:1fr 1.5fr;gap:var(--space-12);padding:var(--space-10) 0;border-top:1px solid var(--atelier-border)}
.atelier-kit p,.atelier-kit a{font-size:var(--text-small);color:var(--atelier-text-secondary)}
.atelier-kit>details{min-width:0}.atelier-kit>details>summary{cursor:pointer;min-height:48px;padding:var(--space-3) 0;font-weight:700;font-size:var(--text-small)}
.atelier-kit .component-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--space-5)}
.atelier-kit .component-card{padding:var(--space-5)}.atelier-kit .component-card h2{font-size:var(--text-heading)}
.atelier-first-sample{padding:var(--space-12) var(--space-8);background:var(--atelier-surface);border-radius:var(--radius-md)}
.atelier-first-sample>img{width:45px;height:72px;margin-bottom:var(--space-8)}
.atelier-first-sample h2{font:400 var(--text-title)/var(--leading-heading) var(--font-display)}
.atelier-first-sample p{max-width:32rem;color:var(--atelier-text-secondary);margin-bottom:var(--space-8)}
.atelier-back{display:inline-flex;align-items:center;min-height:48px;font-size:var(--text-small);margin-bottom:var(--space-4);text-decoration:none;color:var(--atelier-text-secondary)!important}
.atelier-results{container-type:inline-size;container-name:atelier-result}
.atelier-result-heading{padding-top:var(--space-6);border-bottom:1px solid var(--atelier-border)}
.atelier-result-actions{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;flex:none}
.atelier-record-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-6);padding:var(--space-5) 0 var(--space-8);font-size:var(--text-label);color:var(--atelier-text-secondary)}
.atelier-results>.strip-inspector{padding-top:var(--space-2)}
.atelier-explanation{font-size:var(--text-small);color:var(--atelier-text-secondary);margin:var(--space-10) 0}
.atelier-record-context{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);padding:var(--space-10) 0;border-top:1px solid var(--atelier-border)}
.atelier-record-context>div{min-width:0}.atelier-record-context p{font-size:var(--text-small)}
.atelier-record-context .photo-grid:empty{display:none}
.atelier-source{padding:var(--space-8) 0;border-top:1px solid var(--atelier-border)}
.atelier-source p{font-size:var(--text-small);color:var(--atelier-text-secondary)}
@container atelier-result (max-width:18rem){.atelier-result-actions>*{flex-basis:100%!important}.atelier-record-context h2,.atelier-source h2{font-size:1.5rem;overflow-wrap:anywhere}}
.atelier-footer{border-top:1px solid var(--atelier-border);padding:var(--space-8) 0;display:flex;justify-content:space-between;gap:var(--space-6);color:var(--atelier-text-secondary);font-size:var(--text-caption);line-height:1.6}
.atelier-main #timer-notices{margin:0}.atelier-main .timer-notice{padding:var(--space-4) 0;display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);border:0;border-bottom:1px solid var(--atelier-border);border-radius:0;background:none;box-shadow:none;color:var(--atelier-warning)}
.atelier-main .timer-notice>div:first-child{display:flex;align-items:baseline;gap:var(--space-3)}
.atelier-main .timer-notice strong{font-size:var(--text-label);white-space:nowrap}
.atelier-main .timer-notice p{font-size:var(--text-label);margin:0}
.atelier-main .timer-notice .inline{flex:0 1 auto;max-width:100%;gap:var(--space-2)}
.atelier-main .timer-notice .secondary{border-color:var(--control-border);background:none;color:var(--control-secondary-text)}
.atelier-review .form-grid{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr)}
.atelier-review .form-grid>.panel{padding:var(--space-6);border:0;background:var(--atelier-surface);border-radius:var(--radius-md)}
.atelier-review .strip-stage{grid-template-columns:5rem minmax(0,1fr);gap:var(--space-5)}
@media(max-width:1150px){.atelier-shell{padding:0 var(--space-8)}.atelier-nav{gap:var(--space-5)}.atelier-workspace{gap:var(--space-8);grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.atelier-specimen{padding:var(--space-6)}.atelier-header{gap:var(--space-5)}.atelier-main .timer-notice>div:first-child{display:block}.atelier-result-heading{align-items:flex-start;flex-direction:column}.atelier-page-heading h1{font-size:3.75rem}}
@media(max-width:900px){.atelier-nav,.atelier-sign-in{display:none}.atelier-header{min-height:88px}.atelier-workspace{grid-template-columns:1fr}.atelier-active-jump{display:inline-flex;align-items:center;min-height:48px;font-size:var(--text-small);margin-top:var(--space-2);text-decoration:none}.atelier-kit{grid-template-columns:1fr;gap:var(--space-6)}.atelier-review .form-grid{grid-template-columns:1fr}.atelier-main .timer-notice{flex-wrap:wrap;gap:var(--space-2)}.atelier-page-heading h1{font-size:3.5rem}}
@media(max-width:600px){.atelier-shell{padding:0 var(--space-5)}.atelier-header{min-height:88px}.atelier-brand{width:160px}:root[data-theme=dark] .atelier-brand{width:184px}.atelier-page-heading{padding:var(--space-6) 0;align-items:flex-start;gap:var(--space-3)}.atelier-page-heading h1{font-size:3rem}.atelier-page-heading p{font-size:var(--text-label);margin-top:var(--space-3)}.atelier-page-heading p>span{padding:0 var(--space-1)}.atelier-page-heading>.atelier-button{padding:var(--space-3);gap:var(--space-2)}.atelier-workspace{padding-top:var(--space-6);gap:var(--space-8)}.atelier-section-heading{flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-5)}.atelier-section-heading h2{font-size:1.75rem}.atelier-specimen{padding:var(--space-5)}.atelier-specimen-heading h3{font-size:2.5rem}.atelier-specimen-heading p{font-size:var(--text-label)}.atelier-draft{padding:var(--space-6) 0}.atelier-draft h3{font-size:1.85rem}.atelier-draft-heading{align-items:flex-start}.atelier-draft .draft-status{font-size:var(--text-caption);max-width:100%}.atelier-draft-meta,.atelier-draft .draft-detail{font-size:var(--text-label)}.atelier-draft-action .primary,.atelier-draft-action .secondary{font-size:var(--text-label);padding:var(--space-3)}.atelier-progress{flex-wrap:wrap;max-width:100%;font-size:var(--text-caption)}.atelier-recent th.hide-mobile,.atelier-recent td.hide-mobile{display:none}.atelier-recent td,.atelier-recent th{padding:var(--space-4) var(--space-2)}.atelier-recent .record-action{display:none}.atelier-kit .component-grid{grid-template-columns:1fr}.atelier-result-heading{gap:var(--space-5)}.atelier-result-actions{width:100%;gap:var(--space-3)}.atelier-result-actions>*{flex:1;font-size:var(--text-label)!important;padding:var(--space-3)!important}.atelier-record-meta{gap:var(--space-2) var(--space-4);font-size:var(--text-caption);padding-bottom:var(--space-5)}.atelier-record-context{grid-template-columns:1fr;gap:var(--space-8)}.atelier-footer{display:block;padding-bottom:calc(var(--space-8) + env(safe-area-inset-bottom))}.atelier-footer>*{display:block;margin-bottom:var(--space-2)}.atelier-main .timer-notice{padding:var(--space-3) 0;gap:0}.atelier-main .timer-notice strong{display:none}.atelier-main .timer-notice .inline{justify-content:flex-start}.atelier-main .timer-notice .quiet,.atelier-main .timer-notice .secondary{min-height:48px;padding:var(--space-2) var(--space-3);font-size:var(--text-label)}.atelier-review .form-grid>.panel{padding:var(--space-4)}}
@media(max-width:360px){.atelier-shell{padding:0 var(--space-4)}.atelier-page-heading{flex-wrap:wrap}.atelier-draft-action{align-items:flex-start}.atelier-menu-panel nav{grid-template-columns:1fr}.atelier-header{gap:var(--space-3)}}
@media(prefers-reduced-motion:reduce){.atelier-shell *{scroll-behavior:auto!important}.atelier-shell button:active{transform:none}}

.atelier-active .timer-notice{display:block;margin-bottom:var(--space-5);padding-top:0}.atelier-active .timer-notice>div:first-child{display:block}.atelier-active .timer-notice strong{display:none}.atelier-active .timer-notice .inline{margin-top:var(--space-2)}.atelier-resource-return{margin-bottom:0}