:root{}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:var(--fs-3)/1.6 var(--sans)}[hidden]{display:none!important}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent-bright);outline-offset:3px}button{border:0;background:none;color:inherit}button svg{flex-shrink:0}.skip{position:fixed;left:20px;top:-80px;z-index:20;background:var(--surface);padding:12px}.skip:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.sidebar{position:fixed;inset:0 auto 0 0;width:234px;border-right:1px solid var(--line);padding:35px 23px 20px;display:flex;flex-direction:column;background:var(--surface-tint)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:var(--fs-5);font-weight:700;letter-spacing:.06em}.brand-mark{width:26px;height:26px;position:relative;display:inline-block;transform:rotate(45deg);flex-shrink:0;margin:0 4px}.brand-mark i{position:absolute;width:9px;height:9px;background:var(--accent-bright)}.brand-mark i:nth-child(1){left:0;top:0}.brand-mark i:nth-child(2){right:0;top:0;opacity:.65}.brand-mark i:nth-child(3){right:0;bottom:0;opacity:.28}.brand small{display:block;margin-top:-5px;font-size:var(--fs-1);letter-spacing:4px;font-weight:400}.side-caption{font-size:var(--fs-1);letter-spacing:1.4px;margin:28px 0 30px;color:var(--muted)}nav{display:grid;gap:8px}nav a,nav button{display:flex;align-items:center;gap:12px;min-height:46px;border-radius:var(--r-2);padding:10px 12px;text-decoration:none;font-size:var(--fs-3);text-align:left}nav a:hover,nav button:hover{background:var(--stage)}nav span{display:grid;place-items:center;width:20px;font-size:var(--fs-5)}.nav-active{background:var(--stage);font-weight:600}.side-note{margin-top:auto;padding:20px 12px 44px;color:var(--muted)}.note-mark{font:var(--fs-7)/.5 var(--sans);color:var(--decor)}.side-note p{font:var(--fs-4)/1.45 var(--sans)}.side-note>span:last-child{font-size:var(--fs-1);color:var(--muted)}.account{border-top:1px solid var(--line);padding-top:20px;display:flex;align-items:center;gap:8px;font-size:var(--fs-1);min-width:0}.account-avatar{color:var(--accent-text);font-size:var(--fs-4);display:inline-flex}.account strong{font-size:var(--fs-1);font-weight:600;display:block}.account div{min-width:0}.account div>span{display:block;overflow:hidden;text-overflow:ellipsis;max-width:136px;white-space:nowrap;color:var(--muted)}.account button{margin-left:auto}
.ui-language{margin-top:22px}
.ui-language select{border:1px solid var(--line);background:var(--surface-sunken);border-radius:var(--r-2);padding:7px 9px;color:var(--ink);font-size:var(--fs-3);min-height:36px;cursor:pointer}
main{margin-left:234px;padding:38px clamp(26px,4.8vw,76px) 30px;max-width:1800px}.topline{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:var(--fs-1);letter-spacing:1.8px}.topline span:last-child{letter-spacing:0}.eyebrow{font-size:var(--fs-1);letter-spacing:1.5px;text-transform:uppercase;color:var(--warm);margin:0 0 14px;font-weight:600}h1,h2,h3,p{margin-top:0}h1,h2{font-family:var(--sans);font-weight:500;letter-spacing:-.6px}h1{font-size:var(--fs-7);line-height:1.1;margin-bottom:24px}em{color:var(--accent);font-weight:400;font-style:normal}h2{font-size:var(--fs-7);line-height:1.15;margin-bottom:20px}h3{font-size:var(--fs-3);font-weight:600;margin-bottom:7px}.lead{font-size:var(--fs-3);max-width:440px;color:var(--muted);line-height:1.7;margin-bottom:0}.library-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin:44px 0 44px}.library-heading .button-primary{margin-bottom:6px;white-space:nowrap}.button-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.quiet{font-size:var(--fs-1);line-height:1.7;color:var(--muted)}
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.book-card{min-width:0}.book-cover{height:270px;position:relative;border-radius:var(--r-1) var(--r-2) var(--r-2) var(--r-1);background:var(--stage);box-shadow:0 8px 13px var(--shadow-1),inset 8px 0 var(--shadow-1);overflow:hidden;display:flex;flex-direction:column;padding:27px 28px 24px 32px;justify-content:center;text-align:center}.book-card:nth-child(3n+2) .book-cover{background:var(--stage);color:var(--info)}.book-card:nth-child(3n) .book-cover{background:var(--stage);color:var(--text-2)}.cover-eyebrow{font-size:var(--fs-1);letter-spacing:2px;margin-top:auto;margin-bottom:18px}.cover-title{font:var(--fs-6)/1.15 var(--sans);margin-bottom:15px;overflow-wrap:anywhere}.cover-subtitle{font:var(--fs-1)/1.4 var(--sans);padding:0 8px}.cover-rule{height:1px;width:30px;background:currentColor;margin:10px auto;opacity:.4}.cover-foot{font-size:var(--fs-1);letter-spacing:2px;margin-top:auto}.book-cover.has-photo{padding:0}.book-cover.has-photo img{width:100%;height:100%;object-fit:cover}.book-cover.has-photo .photo-cover-title{position:absolute;inset:auto 0 0;padding:28px 22px 20px;background:linear-gradient(transparent,var(--dark));color:var(--on-accent);font:var(--fs-6)/1.2 var(--sans);overflow-wrap:anywhere;text-align:left}.book-details{padding:17px 0}.book-details h2{font:var(--fs-5)/1.3 var(--sans);letter-spacing:0;margin:0 0 8px;overflow-wrap:anywhere}.book-metadata{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:var(--fs-1);color:var(--muted)}.status{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:var(--fs-1)}.status:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--border-strong)}.book-card .button-text{text-align:left;width:100%;display:flex;justify-content:space-between}.empty-library{border:1px solid var(--line);background:var(--surface-sunken);border-radius:var(--r-3);padding:35px 40px}.empty-library p:not(.eyebrow){color:var(--muted);font-size:var(--fs-2);max-width:360px}.empty-library h2{font-size:var(--fs-7);margin-bottom:15px}.how-it-works{margin-top:62px;padding-top:35px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.5fr;gap:60px}.how-it-works h2{font-size:var(--fs-7)}.how-it-works ol{padding:0;margin:0;list-style:none;display:grid;gap:23px}.how-it-works li{display:flex;gap:20px}.how-it-works li>span{color:var(--warm);font:var(--fs-5) var(--sans);padding-top:2px}.how-it-works h3{font-size:var(--fs-2);margin:0 0 4px}.how-it-works p{color:var(--muted);font-size:var(--fs-1);max-width:370px;margin-bottom:0}.studio-footer{display:flex;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding-top:22px;margin-top:55px;color:var(--muted);font-size:var(--fs-1);letter-spacing:.4px}.studio-footer span:first-child{letter-spacing:2px}
.book-topline{display:flex;justify-content:space-between;gap:18px;align-items:center}.book-topline>span{color:var(--muted);font-size:var(--fs-1)}.book-heading{display:flex;justify-content:space-between;align-items:center;gap:30px;margin:33px 0 25px}.book-heading h1{font-size:var(--fs-7);margin-bottom:10px;overflow-wrap:anywhere}.book-heading p:last-child{color:var(--muted);font:var(--fs-3) var(--sans);margin:0}.progress-steps{padding:0;list-style:none;display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:30px 0 35px;gap:0}.progress-steps li{position:relative;display:flex;gap:11px;align-items:center;padding:20px 0;width:25%;font-size:var(--fs-1);color:var(--muted)}.progress-steps li>span{display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:24px;height:24px;font-size:var(--fs-1)}.progress-steps li.current{font-weight:600;color:var(--green)}.progress-steps li.current>span{background:var(--green);color:var(--on-accent);border-color:var(--green)}.progress-steps .current:after{content:'';position:absolute;bottom:-1px;left:0;width:calc(100% - 26px);height:2px;background:var(--green)}.materials-workspace{display:grid;grid-template-columns:200px minmax(300px,1fr) 156px;gap:25px;align-items:start}.section-caption{display:flex;align-items:center;justify-content:space-between;margin:0 0 20px}.section-caption h2{font:var(--fs-5) var(--sans);margin:0;letter-spacing:0}.section-caption>span{font-size:var(--fs-1);color:var(--muted)}.story-navigation{position:sticky;top:25px}.story-item{width:100%;padding:16px 14px;border:1px solid transparent;border-radius:var(--r-2);text-align:left;display:block;margin-bottom:9px}.story-item:hover{background:var(--hover)}.story-item.active{background:var(--surface);border-color:var(--line);box-shadow:0 2px 5px var(--shadow-1)}.story-item small{display:block;font-size:var(--fs-1);color:var(--warm);text-transform:uppercase;letter-spacing:1px;margin-bottom:7px}.story-item strong{font:var(--fs-3)/1.35 var(--sans);display:block;overflow-wrap:anywhere}.story-item p{font-size:var(--fs-1);color:var(--muted);margin:8px 0 0;line-height:1.5}.add-story{width:100%;margin:20px 0 15px}.story-navigation>.quiet{padding:0 12px}.story-editor{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);padding:26px 30px;min-width:0}.editor-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.editor-top .eyebrow{margin:0}.story-actions{display:flex;gap:5px}.field-title{font-size:var(--fs-1);color:var(--muted)}.story-title-input{display:block;width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;padding:9px 0 15px;color:var(--ink);font:var(--fs-6)/1.2 var(--serif);letter-spacing:-.5px}.story-title-input::placeholder{color:var(--muted);font-size:var(--fs-5)}.material-section{padding-top:24px;margin-top:22px;border-top:1px solid var(--line)}.audio-section{border:0;margin-top:7px;padding-top:8px}.material-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:17px}.material-heading h3{font-size:var(--fs-1);margin:0 0 5px}.material-heading p{font-size:var(--fs-1);color:var(--muted);margin:0}.upload-button{white-space:nowrap}.upload-button input,.photo-add input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.upload-button:focus-within,.photo-add:focus-within{outline:3px solid var(--accent-bright);outline-offset:3px}.audio-empty{border:1px dashed var(--line);padding:18px;border-radius:var(--r-2);font-size:var(--fs-1);color:var(--muted);line-height:1.8;margin:0;background:var(--surface-sunken)}.audio-card{padding:13px 14px;border:1px solid var(--line-soft);background:var(--bg);border-radius:var(--r-2);margin-bottom:10px}.audio-card-head{display:flex;justify-content:space-between;gap:10px;align-items:center}.audio-card-head p{font-size:var(--fs-1);overflow-wrap:anywhere;margin:0}.audio-card audio{display:block;width:100%;height:34px;margin-top:10px}.qr-option{display:flex;gap:11px;align-items:start;margin-top:18px;font-size:var(--fs-1);cursor:pointer}.qr-option input{accent-color:var(--green);margin:3px 0 0}.qr-option small{display:block;font-size:var(--fs-1);line-height:1.6;color:var(--muted);margin-top:3px}.qr-option strong{font-weight:500}.text-section textarea{width:100%;background:var(--surface-sunken);border:1px solid var(--line-soft);border-radius:var(--r-2);padding:17px;font:var(--fs-3)/1.9 var(--serif);color:var(--text-2);resize:vertical;min-height:220px}.text-section textarea::placeholder{color:var(--muted);font:var(--fs-1)/1.8 var(--sans)}.photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.photo-card{min-width:0;position:relative}.photo-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:var(--r-1)}.photo-card p{font-size:var(--fs-1);line-height:1.5;color:var(--muted);margin:6px 0 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.photo-card .remove-media{position:absolute;right:4px;top:4px}.photo-add{position:relative;width:100%;min-height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed var(--line);border-radius:var(--r-2);cursor:pointer;color:var(--muted);background:var(--surface-sunken)}.photo-add:hover{background:var(--surface-tint)}.photo-add>span{font-size:var(--fs-5)}.photo-add strong{font-weight:500;font-size:var(--fs-1)}.photo-add small{font-size:var(--fs-1);color:var(--muted);margin-top:3px}.editor-footer{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}.editor-footer p{margin:0;font-size:var(--fs-1)}.editor-footer #upload-state{width:100%}.story-help{padding:10px 0 0 6px}.story-help>.eyebrow{font-size:var(--fs-1);letter-spacing:1px}.story-help h3{font:var(--fs-6) var(--sans);color:var(--muted);margin-top:15px;margin-bottom:12px}.story-help>p{font-size:var(--fs-1);line-height:1.8;color:var(--muted)}.help-rule{height:1px;background:var(--line);width:40px;margin:25px 0}.no-story{min-height:500px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px dashed var(--line);border-radius:var(--r-3);text-align:center;padding:45px;background:var(--surface-sunken)}.memory-mark{font:var(--fs-glyph)/.6 var(--sans);color:var(--decor);margin-bottom:30px}.no-story h2{font-size:var(--fs-7)}.no-story>p:not(.eyebrow){font-size:var(--fs-1);color:var(--muted);max-width:280px;margin-bottom:26px}.legacy-banner{background:var(--hover);border:1px solid var(--line);padding:25px;border-radius:var(--r-3);margin-bottom:35px}.legacy-banner h2{font-size:var(--fs-6)}.legacy-banner p{font-size:var(--fs-1);color:var(--muted);max-width:620px}.loose-materials{margin-top:36px;padding-top:25px;border-top:1px solid var(--line)}.loose-materials h2{font-size:var(--fs-5);letter-spacing:0}.loose-materials>p{font-size:var(--fs-1);color:var(--muted)}.loose-row{display:flex;align-items:center;gap:15px;padding:10px 0;font-size:var(--fs-1)}.loose-row>span{flex:1;overflow-wrap:anywhere}.loose-row select{max-width:250px}
dialog{border:1px solid var(--line);background:var(--surface-sunken);border-radius:var(--r-3);box-shadow:0 25px 90px var(--shadow-2);width:min(540px,calc(100% - 32px));max-height:calc(100vh - 40px);padding:32px 38px;color:var(--ink)}dialog::backdrop{background:var(--scrim);backdrop-filter:blur(3px)}.dialog-top{display:flex;justify-content:space-between;align-items:center}.dialog-top .eyebrow{margin:0}.dialog-top+h2,.dialog-top>h2{margin:24px 0 27px;font-size:var(--fs-7)}.dialog-top:has(>h2){flex-wrap:wrap}.dialog-top>h2{flex-basis:100%}dialog label{display:block;font-size:var(--fs-1);margin:17px 0}dialog input,dialog textarea,dialog select,.loose-row select{width:100%;border:1px solid var(--line);background:var(--surface-sunken);border-radius:var(--r-2);padding:11px 12px;color:var(--ink);margin-top:8px;font-size:var(--fs-3)}dialog textarea{resize:vertical;line-height:1.7}dialog input::placeholder,dialog textarea::placeholder{color:var(--muted);font-size:var(--fs-1)}.form-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:20px}.style-option{margin-top:17px;font-size:var(--fs-1)}.style-option>div{display:flex;align-items:center;gap:10px;margin-top:8px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--r-2);min-height:43px}.style-option i{display:block;width:20px;height:26px;border-radius:var(--r-1);background:var(--line);border-left:3px solid var(--decor)}.style-option small{display:block;font-size:var(--fs-1);color:var(--muted)}dialog .button-primary{width:100%;margin-top:10px;justify-content:space-between}#dialog-error{font-size:var(--fs-1);color:var(--danger);line-height:1.7}.undo-toast{position:fixed;bottom:25px;right:35px;z-index:10;background:var(--ink);color:var(--on-accent);border-radius:var(--r-2);padding:14px 18px;display:flex;align-items:center;gap:20px;box-shadow:0 5px 30px var(--shadow-2);font-size:var(--fs-1);max-width:calc(100% - 32px)}.undo-toast span{max-width:300px}#notice{position:sticky;top:12px;z-index:8;border:1px solid var(--accent-line);border-radius:var(--r-2);background:var(--accent-soft);padding:14px 20px;margin:0 0 20px;font-size:var(--fs-1);color:var(--accent-strong)}#relogin{display:block;font-size:var(--fs-1);margin-bottom:15px;text-decoration:underline}
@media(min-width:1600px){.shelf{grid-template-columns:repeat(4,minmax(0,1fr))}.book-cover{height:300px}.materials-workspace{grid-template-columns:230px minmax(450px,1fr) 200px;gap:35px}}
@media(max-width:1200px){.sidebar{width:205px;padding-left:19px;padding-right:19px}main{margin-left:205px;padding-left:30px;padding-right:30px}.materials-workspace{grid-template-columns:175px minmax(280px,1fr);gap:20px}.story-help{display:none}.story-editor{padding:25px}.shelf{gap:22px}.book-cover{height:245px}.cover-title{font-size:var(--fs-6)}.library-heading{align-items:center}.library-heading h1{font-size:var(--fs-7)}}
@media(max-width:900px){.sidebar{width:180px;padding:30px 15px 20px}.brand{font-size:var(--fs-5)}.side-caption{font-size:var(--fs-1);letter-spacing:.5px}.brand small{font-size:var(--fs-1)}.side-note{padding-left:5px;padding-right:5px}.side-note p{font-size:var(--fs-phone)}main{margin-left:180px;padding:30px 24px}.library-heading{align-items:start;flex-direction:column;gap:24px;margin:30px 0}.library-heading h1{font-size:var(--fs-7)}.shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.how-it-works{grid-template-columns:1fr;gap:25px;margin-top:45px}.how-it-works h2{font-size:var(--fs-7)}.empty-library{padding:25px}.empty-library h2{font-size:var(--fs-6)}.materials-workspace{grid-template-columns:1fr}.story-navigation{position:static}.story-navigation #story-list{display:flex;gap:10px;overflow:auto;padding-bottom:4px}.story-item{min-width:160px;max-width:220px;margin:0}.story-navigation>.quiet{display:none}.add-story{width:auto;margin:14px 0}.story-editor{padding:25px}.section-caption{margin-bottom:12px}.book-heading h1{font-size:var(--fs-7)}.book-heading .button-outline{white-space:nowrap}.progress-steps li{font-size:var(--fs-1);gap:7px;padding:18px 0}.progress-steps li>span{width:20px;height:20px}.book-subtitle{font-size:var(--fs-3)}.studio-footer{font-size:var(--fs-1)}}
@media(max-width:620px){body{}.sidebar{position:static;width:auto;height:auto;padding:17px 20px 0;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:8px;background:var(--surface-tint)}.brand{font-size:var(--fs-6);gap:8px}.brand small{letter-spacing:3px;margin-top:-5px}.side-caption,.side-note{display:none}.account{border:0;margin:0;padding:0;max-width:170px;grid-column:2;grid-row:1;align-self:center}.account strong{display:none}.account-avatar{color:var(--accent-text);font-size:var(--fs-4);display:inline-flex}.account div>span{max-width:116px}
.ui-language{margin:0;grid-column:1;grid-row:1;justify-self:end;align-self:center}
.ui-language select{min-height:34px;padding:5px 7px}.sidebar nav{display:flex;grid-column:1/-1;gap:15px;padding-top:8px}.sidebar nav a,.sidebar nav button{padding:8px 0;border-radius:0;min-height:35px;background:none}.sidebar nav span{width:14px}.sidebar nav .nav-active{border-bottom:2px solid var(--green)}main{margin:0;padding:24px 20px}.topline{letter-spacing:1px}.library-heading{margin:28px 0;gap:25px}.library-heading h1{font-size:var(--fs-7);margin-bottom:18px}.lead{max-width:300px}.eyebrow{letter-spacing:1px}.library-heading .button-primary{width:100%;justify-content:center}.shelf{gap:18px 16px}.book-cover{height:205px;padding:18px 15px 18px 20px}.cover-title{font-size:var(--fs-5)}.cover-subtitle{}.cover-eyebrow,.cover-foot{letter-spacing:1.3px}.book-cover.has-photo .photo-cover-title{font-size:var(--fs-4);padding:26px 14px 14px}.book-details{padding:12px 0}.book-details h2{font-size:var(--fs-4)}.book-metadata{display:block}.status{margin-bottom:4px}.book-metadata>span:last-child{display:block}.empty-library{padding:24px 16px}.empty-library h2{font-size:var(--fs-6)}.empty-library p:not(.eyebrow){}.how-it-works{padding-top:26px;margin-top:38px}.how-it-works li{gap:16px}.studio-footer{flex-direction:column;gap:7px;margin-top:40px;padding-top:18px}.book-topline>span{max-width:160px;text-align:right}.book-heading{margin-top:25px;align-items:start;gap:15px}.book-heading h1{font-size:var(--fs-7)}.book-heading>div{min-width:0}.book-heading p:last-child{}.progress-steps{margin:25px 0}.progress-steps li{gap:5px;padding:15px 0}.progress-steps li>span{width:17px;height:17px}.progress-steps .current:after{width:calc(100% - 12px)}.materials-workspace{gap:15px}.section-caption h2{font-size:var(--fs-5)}.story-item{min-width:150px;padding:12px}.story-item strong{}.story-item small{}.story-editor{padding:23px 18px;border-radius:var(--r-3)}.editor-top{margin-bottom:18px}.story-title-input{font-size:var(--fs-6)}.story-title-input::placeholder{font-size:var(--fs-5)}.material-heading p{max-width:230px}.text-section textarea{padding:14px;min-height:230px}.photo-grid{gap:8px}.photo-card img{aspect-ratio:1}.editor-footer .button-primary{width:100%}.editor-footer #story-save-state{width:100%}.no-story{min-height:370px;padding:30px 20px}.no-story h2{font-size:var(--fs-7)}.legacy-banner{padding:20px}.legacy-banner h2{font-size:var(--fs-6)}.legacy-banner .button-row{align-items:stretch;flex-direction:column}.legacy-banner .button-row>*{width:100%}.loose-row{flex-wrap:wrap}.loose-row>span{width:100%;flex-basis:100%}.loose-row select{max-width:none;flex:1}.undo-toast{bottom:16px;right:16px;gap:12px;padding:13px}dialog{padding:25px 24px}.dialog-top+h2,.dialog-top>h2{font-size:var(--fs-7)}.form-grid{gap:12px}#notice{top:8px;padding:12px 15px}}
@media(prefers-reduced-motion:no-preference){.book-cover{transition:transform .2s,box-shadow .2s}.book-card:hover .book-cover{transform:translateY(-4px);box-shadow:0 13px 20px var(--shadow-1)}button{transition:background .15s}}
/* Readable text and touch targets for the materials workspace. */
.build-availability{margin-top:32px;padding:24px 28px;border:1px solid var(--line);border-radius:var(--r-3);display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--surface-tint)}
.build-availability .eyebrow{margin:0 0 9px}.build-availability h2{font:var(--fs-6) var(--sans);letter-spacing:0;margin:0 0 8px}.build-availability p{font-size:var(--fs-2);color:var(--muted);margin:0}.build-symbol{font:var(--fs-7) var(--sans);color:var(--muted)}
.archived-stories{margin-top:28px;border-top:1px solid var(--line);padding-top:20px;font-size:var(--fs-2);color:var(--muted)}.archived-stories summary{cursor:pointer;color:var(--ink)}.archived-stories>p{font-size:var(--fs-1)}
.photo-card .replace-media{margin-top:6px}.audio-card-head .replace-audio{margin-left:auto}
#recover-conflict{margin-bottom:18px}.book-cover[role=button]{cursor:pointer}button:disabled{cursor:default;opacity:.5}.photo-add:has(input:disabled){opacity:.55;cursor:wait}
.book-save-state{min-height:20px}.story-help>p{font-size:var(--fs-2)}.material-heading h3{font-size:var(--fs-3)}.material-heading p{font-size:var(--fs-1);line-height:1.6}.field-title{font-size:var(--fs-1)}.audio-empty{font-size:var(--fs-1)}.story-item p{font-size:var(--fs-1)}.story-item small{font-size:var(--fs-1)}.quiet{font-size:var(--fs-1)}.text-section textarea{font-size:var(--fs-4);line-height:1.8}.text-section textarea::placeholder{font-size:var(--fs-2)}.material-section{scroll-margin-top:20px}.qr-option{font-size:var(--fs-1)}.qr-option small{font-size:var(--fs-1)}.photo-add strong{font-size:var(--fs-2)}.photo-add small{font-size:var(--fs-1)}.book-metadata{font-size:var(--fs-1)}.status{font-size:var(--fs-1)}.editor-footer p{font-size:var(--fs-1)}.photo-card .remove-media{position:absolute;right:4px;top:4px}
@media(max-width:620px){.sidebar nav a,.sidebar nav button{min-height:44px}.account div>span{}.book-metadata,.status{}.book-card .button-text{}.book-details h2{font-size:var(--fs-4)}.progress-steps li{}.progress-steps li>span{width:19px;height:19px}.book-topline>span{}.material-heading p{max-width:none}.story-item p{}.story-item small{}.editor-footer .button-primary{}.build-availability{padding:20px}.build-availability h2{font-size:var(--fs-6)}.build-availability p{}.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

#photo-count,#text-count{white-space:nowrap;flex-shrink:0}.material-heading>div{min-width:0}@media(max-width:620px){.photo-card p{}.progress-steps li{}}

/* Structured book preview: content templates and controls have separate layouts. */
.book-page.long-title .page-title{font-size:4.2cqw;line-height:1.2}.book-page.layout-COVER.long-title .page-title{font-size:6.2cqw}
.book-view-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin:-12px 0 28px}.book-view-tabs button{padding:13px 20px;font-size:var(--fs-3);border-bottom:2px solid transparent}.book-view-tabs button[aria-pressed=true]{border-color:var(--green);color:var(--green);font-weight:600}.book-view-tabs span{font-size:var(--fs-3);margin-left:8px;color:var(--muted)}
.build-availability>div{max-width:650px}.build-availability .button-primary{flex-shrink:0;white-space:nowrap}.build-availability #build-limit{font-size:var(--fs-1);margin-top:10px}.build-progress{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:26px 30px;background:var(--hover);border:1px solid var(--line);border-radius:var(--r-3);margin-bottom:30px}.build-progress h2{font-size:var(--fs-7);margin-bottom:12px}.build-progress p{font-size:var(--fs-2);margin-bottom:10px}.build-progress .eyebrow{font-size:var(--fs-1)}.build-progress progress{width:min(400px,100%);accent-color:var(--green);height:7px}.build-progress .quiet{margin:14px 0 0;font-size:var(--fs-1)}
.layout-topline{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:28px}.layout-topline h2{font-size:var(--fs-7);letter-spacing:-.5px;margin-bottom:10px}.layout-topline p:not(.eyebrow){font-size:var(--fs-2);color:var(--muted);margin:0;max-width:500px}.layout-topline .eyebrow{margin-bottom:10px}#layout-save-state{font-size:var(--fs-1);color:var(--muted);text-align:right;flex-shrink:0}.layout-stale{padding:19px 23px;margin-bottom:26px;border:1px solid var(--warning-line);background:var(--warning-soft);border-radius:var(--r-2);display:flex;align-items:center;gap:20px;justify-content:space-between;font-size:var(--fs-2)}.layout-stale p{font-size:var(--fs-1);color:var(--muted);margin:5px 0 0}.layout-stale button{flex-shrink:0}
.layout-workspace{display:grid;grid-template-columns:105px minmax(270px,1fr) 245px;gap:22px;align-items:start}.page-navigation{position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto;padding-right:6px}.page-navigation .section-caption{margin-bottom:16px}.page-navigation .section-caption h3{font-size:var(--fs-2)}.page-navigation .section-caption>span{font-size:var(--fs-1);color:var(--muted)}#page-list{display:grid;gap:14px}.page-thumb{padding:7px;border:1px solid transparent;border-radius:var(--r-2);background:var(--hover);text-align:center;min-width:0}.page-thumb.active{border-color:var(--muted);background:var(--stage)}.thumb-number{display:block;font-size:var(--fs-1);margin-top:6px;color:var(--muted)}.mini-paper{pointer-events:none}.mini-paper .book-page{box-shadow:0 1px 5px var(--shadow-1)}.page-preview-area{padding:16px 18px;background:var(--stage);border-radius:var(--r-2);min-width:0}.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;font-size:var(--fs-1);color:var(--muted)}.preview-toolbar>div{display:flex;gap:6px}.preview-toolbar button{width:36px;height:36px;border-radius:var(--r-1);border:1px solid var(--line);background:var(--bg);font-size:var(--fs-4)}#page-preview{max-width:560px;margin:0 auto}.preview-note{text-align:center;color:var(--muted);font-size:var(--fs-1);line-height:1.6;margin:19px 0 4px}.page-order-actions{display:flex;justify-content:space-between;gap:10px;margin-top:10px}.page-order-actions button{font-size:var(--fs-3);min-height:38px}
.paper-frame{container-type:inline-size;width:100%;min-width:0}.book-page{background:var(--warning-soft);aspect-ratio:148/210;position:relative;padding:8cqw 8cqw 7cqw;color:var(--text-2);box-shadow:0 6px 25px var(--shadow-2);display:flex;flex-direction:column;overflow:hidden;font-family:var(--serif)}.book-page h2,.book-page p{letter-spacing:0;margin:0}.page-running-head{display:flex;justify-content:space-between;gap:6cqw;padding-bottom:3.5cqw;border-bottom:1px solid var(--line);margin-bottom:5cqw;font:1.5cqw var(--sans);letter-spacing:.15cqw;color:var(--muted);flex-shrink:0}.page-running-head span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.page-content{min-height:0;flex:1;display:flex;flex-direction:column;gap:4cqw;overflow:hidden}.book-page .page-title{font:5.8cqw/1.17 var(--serif);color:var(--accent-strong);overflow-wrap:anywhere;flex-shrink:0}.page-copy{white-space:pre-wrap;font:3.1cqw/1.55 var(--serif);overflow-wrap:anywhere;min-height:0;flex-shrink:0}.page-photos{display:grid;gap:2.3cqw;min-height:0;flex-shrink:0}.page-photos:empty{display:none}.page-photos img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;background:var(--stage)}.book-page .page-caption{font:italic 2.4cqw/1.5 var(--serif);color:var(--muted);flex-shrink:0;overflow-wrap:anywhere}.page-voice{display:flex;align-items:center;gap:3cqw;border-top:1px solid var(--line);padding-top:2.5cqw;margin-top:auto;flex-shrink:0}.voice-mark{display:grid;place-items:center;width:9cqw;height:9cqw;border:1px dashed var(--decor);border-radius:var(--r-1);color:var(--muted);font-size:5cqw}.voice-qr{display:block;width:12cqw;height:12cqw;flex-shrink:0;background:var(--surface)}.voice-qr svg{display:block;width:100%;height:100%}.voice-caption strong{display:block;font:2cqw var(--sans);font-weight:500}.voice-caption small{display:block;font:1.8cqw var(--sans);color:var(--muted);margin-top:1cqw}.page-folio{position:absolute;bottom:3cqw;left:0;width:100%;text-align:center;font:1.8cqw var(--serif);color:var(--muted)}.layout-T01 .page-photos{height:34cqw}.layout-T02 .page-photos{grid-template-columns:1fr 1fr;height:34cqw}.layout-T03 .page-photos{grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;height:44cqw}.layout-T03 .page-photos img:first-child{grid-row:1/3}.layout-T04 .page-photos{height:56cqw}.layout-T04 .page-copy{font-size:3.6cqw}.layout-T05 .page-copy{font-size:2.8cqw}.layout-T05 .page-photos{height:18cqw;width:30cqw;align-self:end;margin-top:auto}.layout-T06 .page-photos{height:88cqw}.layout-T06 .page-copy:empty{display:none}.layout-T07 .page-copy{font-size:3.1cqw;line-height:1.65}.layout-T07 .page-content{padding:3cqw 0}
.layout-COVER{background:var(--success-soft);padding:11cqw 10cqw 9cqw;align-items:center;text-align:center;box-shadow:inset 1.8cqw 0 var(--shadow-1),0 6px 25px var(--shadow-2)}.layout-COVER:before{content:'';position:absolute;inset:7cqw 7cqw;border:1px solid var(--line);pointer-events:none}.page-cover-eyebrow{font:1.7cqw var(--sans);letter-spacing:.5cqw;z-index:1}.page-cover-content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5cqw;z-index:1;width:100%}.layout-COVER .page-title{font-size:8cqw;line-height:1.16;max-width:100%;overflow-wrap:anywhere}.layout-COVER .page-cover-subtitle{font:italic 3.4cqw/1.4 var(--serif);color:var(--muted);overflow-wrap:anywhere}.layout-COVER .page-photos{height:46cqw;width:100%;margin-top:2cqw}.page-cover-line{width:9cqw;height:1px;background:var(--border-strong)}.page-cover-brand{font:1.8cqw var(--sans);letter-spacing:.4cqw;z-index:1}
.page-inspector{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);padding:20px 18px;min-width:0}.page-inspector .section-caption{display:block;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--line)}.page-inspector h3{font-size:var(--fs-2)}.page-inspector .section-caption>span{font-size:var(--fs-1);color:var(--muted);display:block;overflow-wrap:anywhere}#page-form>label:not(.page-qr){display:block;font-size:var(--fs-1);margin-top:19px}#page-form select,#page-form input:not([type=checkbox]),#page-form textarea{display:block;width:100%;border:1px solid var(--line);border-radius:var(--r-1);background:var(--surface-sunken);color:var(--ink);padding:10px;margin-top:7px;font-size:var(--fs-3)}#page-form textarea{resize:vertical;line-height:1.65;font-family:var(--serif);font-size:var(--fs-3)}#page-form .quiet{font-size:var(--fs-1);margin:8px 0;line-height:1.6}.inspector-photos{margin:24px 0 15px}.inspector-photos h3{margin-bottom:10px}.page-photo-row{display:flex;align-items:center;gap:10px;margin:10px 0}.page-photo-row img{width:52px;height:47px;object-fit:contain;background:var(--hover);border-radius:var(--r-1)}.page-photo-row button{font-size:var(--fs-3);min-height:36px}.page-photo-row button:last-child{margin-left:auto;font-size:var(--fs-5);min-width:30px}.inspector-photos>.button-outline{width:100%}.page-qr{display:flex;align-items:center;gap:8px;font-size:var(--fs-1);margin-top:23px}.page-qr input{accent-color:var(--green);width:15px;height:15px}#page-audio audio{width:100%;height:34px;margin-top:8px}.page-qr-link{margin-top:10px;font-size:var(--fs-1)}.page-qr-link>span{display:block;margin-bottom:4px}.qr-link-url{display:block;padding:7px 8px;background:var(--surface-tint);border:1px solid var(--line);border-radius:var(--r-1);font-size:var(--fs-1);line-height:1.4;overflow-wrap:anywhere;user-select:all}.qr-link-actions{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:8px}.qr-link-confirm{margin-top:10px;padding:10px;border:1px solid var(--danger-line);border-radius:var(--r-2);background:var(--warning-soft)}.qr-link-confirm p{margin:0 0 8px}.qr-link-confirm button{margin-right:10px}#page-audio>span{display:block;margin-top:18px}.page-inspector #save-page{width:100%;margin-top:20px;min-height:44px;font-size:var(--fs-1)}.page-inspector #reset-page{display:block;width:100%;margin-top:10px;font-size:var(--fs-1)}.page-inspector #rebuild-page{width:100%;margin-top:15px;font-size:var(--fs-1);min-height:40px}.inspector-foot{border-top:1px solid var(--line);margin:23px 0 0;padding-top:16px;font-size:var(--fs-1)}#page-error{color:var(--danger);font-size:var(--fs-1);line-height:1.6;margin:12px 0 0}.photo-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:25px 0}.photo-choice{background:var(--surface-tint);border:1px solid var(--line);border-radius:var(--r-2);padding:10px;font-size:var(--fs-1);min-width:0}.photo-choice img{width:100%;height:115px;object-fit:contain;display:block;margin-bottom:8px}.photo-choice span{display:block;overflow-wrap:anywhere}.layout-warnings{font-size:var(--fs-1);color:var(--muted);margin-top:30px;padding:20px 0;border-top:1px solid var(--line)}.layout-warnings summary{cursor:pointer;color:var(--ink)}.layout-warnings li{margin-top:10px}.page-orphan-drafts{padding:20px;background:var(--warning-soft);border-radius:var(--r-2);margin:20px 0;font-size:var(--fs-2)}.orphan-draft textarea{width:100%;min-height:150px;display:block;margin:15px 0;padding:15px}.orphan-draft+.orphan-draft{margin-top:25px}#build-dialog>p:not(.eyebrow){font-size:var(--fs-3);line-height:1.8;color:var(--muted)}#build-dialog .button-row{margin-top:25px}#build-dialog .button-primary{width:auto;margin:0}
@media(min-width:1600px){.layout-workspace{grid-template-columns:135px minmax(370px,1fr) 295px;gap:30px}.page-inspector{padding:25px}.page-navigation{padding-right:15px}}
@media(max-width:1150px){.layout-workspace{grid-template-columns:85px minmax(240px,1fr) 215px;gap:14px}.page-preview-area{padding:13px}.page-inspector{padding:16px 14px}.layout-topline h2{font-size:var(--fs-6)}.page-order-actions button{font-size:var(--fs-3)}}
@media(max-width:1000px){.layout-workspace{grid-template-columns:90px minmax(0,1fr)}.page-inspector{grid-column:2;max-width:560px;width:100%;justify-self:center}.page-inspector #page-form>label{font-size:var(--fs-2)}.page-inspector #page-form textarea{font-size:var(--fs-4)}.layout-topline{align-items:start;flex-direction:column;gap:12px}.page-navigation{grid-row:1/3}.layout-stale{align-items:start;flex-direction:column}}
@media(max-width:620px){.book-view-tabs{margin-top:-6px}.book-view-tabs button{padding:12px 15px}.build-availability,.build-progress{align-items:stretch;flex-direction:column;padding:20px;gap:20px}.build-availability .button-primary{width:100%}.build-progress h2{font-size:var(--fs-6)}.build-progress .button-outline{width:100%}.layout-topline h2{font-size:var(--fs-6)}.layout-topline p:not(.eyebrow){}.layout-workspace{display:flex;flex-direction:column;gap:22px}.page-navigation{position:static;max-height:none;width:100%;padding:0}.page-navigation .section-caption{display:flex;margin-bottom:12px}#page-list{display:flex;overflow:auto;padding:0 0 8px;gap:10px}.page-thumb{flex:0 0 78px;padding:6px}.page-preview-area,.page-inspector{width:100%;max-width:none}.page-preview-area{padding:15px}.page-order-actions button{min-height:44px}.page-inspector{padding:24px 20px}.page-inspector #page-form textarea{font-size:var(--fs-4)}.page-inspector #page-form input:not([type=checkbox]),.page-inspector #page-form select{font-size:var(--fs-phone);min-height:44px}.page-photo-row img{width:70px;height:60px}.page-photo-row button{min-height:44px}.layout-stale{padding:18px}.layout-stale .button-outline{width:100%}.photo-choice img{height:90px}.page-inspector #save-page{}.page-inspector #rebuild-page{min-height:44px}#build-dialog .button-row{flex-direction:column;align-items:stretch}#build-dialog .button-primary{width:100%}}

.build-feedback{white-space:pre-line;padding:18px 22px;margin-bottom:24px;border:1px solid var(--warning-line);border-radius:var(--r-2);background:var(--warning-soft);font-size:var(--fs-3);line-height:1.7;overflow-wrap:anywhere}

.approval{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 24px;margin-bottom:24px;border:1px solid var(--line);background:var(--surface-tint);border-radius:var(--r-3)}.approval h3{font:var(--fs-5) var(--sans);margin:0 0 6px}.approval p:not(.eyebrow){font-size:var(--fs-2);color:var(--muted);margin:0;max-width:560px;line-height:1.6}.approval .eyebrow{margin-bottom:8px}.approval .button-row{flex-shrink:0}.approval button:disabled{opacity:.5;cursor:default}
.comments{margin:0 0 24px;font-size:var(--fs-2)}.comments summary{cursor:pointer;font-weight:600}.comments ol{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}.comments li{padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2)}.comments small{display:block;font-size:var(--fs-1);color:var(--muted);margin-bottom:6px}.comments li p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6}
#approve-dialog>p:not(.eyebrow){font-size:var(--fs-3);line-height:1.8;color:var(--muted)}#approve-dialog .button-row,#comment-dialog .button-row{margin-top:20px}#approve-dialog .button-primary,#comment-dialog .button-primary{width:auto;margin:0}#comment-error{font-size:var(--fs-1);color:var(--danger)}.book-metadata .owner{display:block;overflow-wrap:anywhere}
@media(max-width:620px){.approval{flex-direction:column;align-items:stretch;padding:18px}.approval .button-row{flex-direction:column;align-items:stretch}.approval .button-row>*{width:100%}#approve-dialog .button-row,#comment-dialog .button-row{flex-direction:column;align-items:stretch}#approve-dialog .button-primary,#comment-dialog .button-primary{width:100%}}
.layout-topline-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}

/* Library shelves: active books and the archive. */
.shelf-tabs{display:flex;gap:8px;margin:0 0 22px;flex-wrap:wrap}.shelf-tabs button{min-height:40px;padding:8px 16px;border:1px solid var(--line);border-radius:var(--r-2);background:transparent;font-size:var(--fs-3);font-weight:600}.shelf-tabs [aria-pressed=true]{background:var(--green);border-color:var(--green);color:var(--on-accent)}
.empty-archive{margin:0 0 30px;font-size:var(--fs-2)}
.shelf-actions{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:10px}.shelf-actions .shelf-archive-action{font-size:var(--fs-2);min-height:36px;padding:6px 14px;display:inline-flex;gap:6px;align-items:center}.shelf-archive-icon{font-size:var(--fs-1);opacity:.7}
.status.archived{color:var(--warning)}
.archive-zone{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.archive-zone p{font-size:var(--fs-1);margin:0 0 12px}

#delete-dialog p{font-size:var(--fs-2);line-height:1.6}#delete-error{color:var(--danger)}

.book-heading-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.layout-entry a.button-primary,#open-print{white-space:nowrap}
/* Text preparation: the book-level panel and «было / стало» in the story editor. */
.texts-panel{margin-top:32px;padding:24px 28px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px 32px}
.texts-panel h2{font-size:var(--fs-6);margin-bottom:10px}.texts-intro p{font-size:var(--fs-2);line-height:1.7;color:var(--muted);margin:0 0 8px}
.texts-modes{border:0;padding:0;margin:0;display:grid;gap:8px}.texts-modes legend{font-size:var(--fs-1);font-weight:600;margin-bottom:8px}
.texts-modes label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line-soft);border-radius:var(--r-2);cursor:pointer;font-size:var(--fs-1)}.texts-modes label:has(input:checked){border-color:var(--green);background:var(--green-soft)}
.texts-modes input{accent-color:var(--green);margin-top:3px}.texts-modes small{display:block;color:var(--muted);font-size:var(--fs-1);margin-top:3px;line-height:1.5}
.texts-actions{grid-column:1/-1;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.texts-actions p{margin:0;font-size:var(--fs-1);color:var(--muted)}
.texts-questions{grid-column:1/-1;margin:0;padding:12px 16px 12px 32px;background:var(--warning-soft);border-radius:var(--r-2);font-size:var(--fs-1);line-height:1.7}.texts-questions .questions-lead{list-style:none;margin-left:-16px;font-weight:600}
.edited-note{margin-top:12px;padding:12px 14px;border-radius:var(--r-2);background:var(--surface-tint);font-size:var(--fs-1)}.edited-note summary{cursor:pointer;font-weight:600}.edited-note .edited-text{white-space:pre-wrap;font:var(--fs-2)/1.8 var(--serif);margin:10px 0}.edited-note p{margin:6px 0}
.edited-note .edited-lead{font-size:var(--fs-2)}.story-versions{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}.version-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}.version{padding:8px 10px;border-radius:var(--r-2);background:var(--surface);border:1px solid var(--line-soft)}.version.is-current{border-color:var(--accent)}.version-head{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}.version-name{font-weight:600}.version-current{font-size:var(--fs-1);padding:1px 6px;border-radius:var(--r-2);background:var(--accent);color:var(--on-accent)}.version-text summary{font-weight:400;margin-top:4px}.version-diff{white-space:pre-wrap;font:var(--fs-2)/1.7 var(--serif);margin:6px 0;overflow-wrap:anywhere}.version-diff ins{background:var(--success-soft);text-decoration:none}.version-diff del{background:var(--danger-soft)}.version-more-row{list-style:none}
.story-proposal{margin-top:22px;padding:18px 20px;border:1px solid var(--decor);border-radius:var(--r-3);background:var(--bg)}
.story-proposal h3{font:var(--fs-5) var(--sans);margin:0 0 4px}.proposal-stale{font-size:var(--fs-1);color:var(--warning)}
.proposal-pairs{list-style:none;padding:0;margin:14px 0;display:grid;gap:14px}.proposal-pairs li.same p{font:var(--fs-2)/1.8 var(--serif);color:var(--muted);margin:0}
.pair-diff{font:var(--fs-3)/1.9 var(--serif);margin:0 0 8px;white-space:pre-wrap}.pair-diff del{color:var(--danger);background:var(--danger-soft);text-decoration:line-through}.pair-diff ins{color:var(--text-2);background:var(--stage);text-decoration:none}
.pair-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:var(--fs-1)}.pair-columns p{white-space:pre-wrap;margin:4px 0 0;line-height:1.6}.pair-label{font-size:var(--fs-1);text-transform:uppercase;letter-spacing:1px;color:var(--warm);font-weight:600}
.pair-before,.pair-after{padding:8px 10px;border-radius:var(--r-2);background:var(--surface)}.pair-choice{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:var(--fs-1);cursor:pointer}.pair-choice input{accent-color:var(--green)}
.proposal-actions{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:900px){.texts-panel{grid-template-columns:1fr}.pair-columns{grid-template-columns:1fr}}
.pair-apart summary{font-size:var(--fs-3);color:var(--muted);cursor:pointer;margin-bottom:6px}
.voice-hint{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:12px 14px;border:1px dashed var(--line);border-radius:var(--r-2);background:var(--surface-sunken);font-size:var(--fs-1)}.voice-hint p{margin:0}.voice-hint-running{color:var(--green);font-weight:600}

.story-item .story-badge{display:inline-block;margin-top:8px;padding:2px 8px;border-radius:var(--r-3);background:var(--warning-soft);color:var(--warning);font-size:var(--fs-1);font-weight:600;letter-spacing:.3px}
.style-picker{border:0;margin:17px 0;padding:0}.style-picker legend{font-size:var(--fs-1);margin-bottom:8px;padding:0}.style-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
dialog label.style-choice-card{display:flex;gap:10px;align-items:center;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-2);cursor:pointer;background:var(--surface)}
.style-choice-card:has(input:checked){border-color:var(--green);box-shadow:0 0 0 2px var(--shadow-2)}
dialog .style-choice-card input{width:auto;margin:0}
.style-choice-card .swatch{display:flex;flex:none}.style-choice-card .swatch i{width:12px;height:22px;display:block;border:1px solid var(--line)}.style-choice-card .swatch i:first-child{border-radius:var(--r-1) 0 0 var(--r-1)}.style-choice-card .swatch i:last-child{border-radius:0 var(--r-1) var(--r-1) 0}
.style-choice-card strong{display:block;font-size:var(--fs-1)}.style-choice-card small{display:block;font-size:var(--fs-1);color:var(--muted);line-height:1.35;margin-top:2px}
.style-picker .quiet{margin:8px 0 0}
.format-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
dialog label.format-card{display:flex;gap:10px;align-items:center;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-2);cursor:pointer;background:var(--surface)}
.format-card:has(input:checked){border-color:var(--green);box-shadow:0 0 0 2px var(--shadow-2)}
dialog .format-card input{width:auto;margin:0}
.format-box{width:36px;height:36px;display:grid;place-items:center;flex:none}.format-shape{display:block;background:var(--stage);border:1.5px solid var(--green);border-radius:var(--r-1)}
.format-card strong{display:block;font-size:var(--fs-1)}.format-card small{display:block;font-size:var(--fs-1);color:var(--muted);line-height:1.35;margin-top:2px}
/* Invitations and contributions (FR-28) */
.contrib-panel .contrib-side{display:grid;gap:16px;min-width:0}
.invite-form{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface)}.invite-form label{display:grid;gap:5px;font-size:var(--fs-1);margin:0}.invite-form input,.invite-form textarea,.invite-form select{font:inherit;font-size:var(--fs-3);padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface)}
.invite-check{display:flex!important;grid-auto-flow:column;align-items:center;gap:8px!important}
.invite-created{padding:14px;border-radius:var(--r-3);background:var(--green-soft);display:grid;gap:8px}.invite-url{margin:0;font-size:var(--fs-1);overflow-wrap:anywhere;color:var(--muted)}
.invite-share{gap:8px}
.invite-list{display:grid;gap:10px}.invite-list h3,.contrib-inbox h3{margin:0}.invite-row{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface)}.invite-row>div:first-child{display:grid;gap:2px}.invite-row.is-off{opacity:.55}
.contrib-inbox{display:grid;gap:10px}.contrib-card{display:grid;gap:6px;padding:14px;border:1px solid var(--decor);border-radius:var(--r-3);background:var(--surface-sunken)}.contrib-card h4{margin:4px 0 0;font-size:var(--fs-3)}
.contrib-summary{margin:0;font-weight:600;color:var(--ink)}
.contrib-all{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;padding:12px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface)}.contrib-all .field-hint{flex-basis:100%;margin:0}
.contrib-done>summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center}.contrib-done-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.contrib-done-list li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface)}.contrib-done-list li>span:first-child{min-width:0;overflow-wrap:anywhere}
.contrib-text{white-space:pre-wrap;font-size:var(--fs-2);line-height:1.6;max-height:220px;overflow:auto;margin:0}
.contrib-media{display:flex;flex-wrap:wrap;gap:6px}.contrib-media img{width:84px;height:84px;object-fit:cover;border-radius:var(--r-2)}.contrib-media audio{max-width:100%}
.contrib-card select{font:inherit;font-size:var(--fs-3);padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface)}
[tabindex="-1"]:focus{outline:none}

.format-viewer{max-width:min(1100px,calc(100% - 24px));width:100%;padding:20px 22px 22px}.format-viewer::backdrop{background:var(--scrim-strong)}
.format-viewer .viewer-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.format-viewer h2{font-size:var(--fs-5);margin:0}

.format-viewer>p{margin:8px 0 12px;font-size:var(--fs-2)}
.viewer-tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.viewer-tabs button{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-round);padding:7px 14px;font-size:var(--fs-3);cursor:pointer;color:var(--ink)}.viewer-tabs [aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--on-accent)}
.viewer-frame{border-radius:var(--r-3);overflow:auto;background:var(--paper);max-height:72vh;cursor:zoom-in;touch-action:pan-x pan-y}
.viewer-frame img{display:block;max-width:100%;max-height:calc(72vh - 4px);width:auto;height:auto;margin:0 auto}.viewer-frame.zoomed{cursor:zoom-out}.viewer-frame.zoomed img{width:200%;max-width:none;max-height:none}
@media(max-width:600px){.format-viewer{padding:14px}.format-viewer h2{font-size:var(--fs-4)}.viewer-frame{max-height:60vh}.viewer-frame img{max-height:calc(60vh - 4px)}.viewer-frame.zoomed img{width:300%}}
dialog label.large-text-option{display:flex;gap:12px;align-items:flex-start;margin:4px 0 18px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-2);cursor:pointer;background:var(--surface)}.large-text-option:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 2px var(--shadow-2)}dialog .large-text-option input{width:auto;margin:3px 0 0}.large-text-option strong{display:block;font-size:var(--fs-2)}.large-text-option small{display:block;font-size:var(--fs-1);color:var(--muted);line-height:1.45;margin-top:3px}
.story-conflict{border:1px solid var(--warning-line);background:var(--warning-soft);border-radius:var(--r-3);padding:14px 16px;margin:0 0 18px}.story-conflict>strong{display:block;font-size:var(--fs-3);color:var(--warning)}.story-conflict>p{margin:4px 0 10px}.story-conflict details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);padding:10px 12px;margin-bottom:12px}.story-conflict summary{cursor:pointer;font-size:var(--fs-3);color:var(--accent)}.story-conflict details strong{display:block;margin:10px 0 4px;font-size:var(--fs-3)}.conflict-text{white-space:pre-wrap;font:var(--fs-2)/1.7 var(--serif);max-height:240px;overflow:auto;margin:0}
/* Phone (TZ AIT-18, P1-B): the book's title gets the full width, actions go under it, steps stack their labels. */
@media(max-width:620px){
.book-heading{flex-direction:column;align-items:stretch;gap:16px;margin:22px 0 18px}.book-heading h1{font-size:var(--fs-7);line-height:1.15}
.book-heading-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.book-heading-actions #open-layout{flex:1 1 100%;order:-1}
.progress-steps li{flex-direction:column;justify-content:flex-start;gap:5px;text-align:center;line-height:1.2;padding:12px 2px}
.progress-steps .current:after{width:100%}
}
.video-card{border:1px solid var(--line);border-radius:var(--r-3);padding:12px;margin-bottom:10px;background:var(--surface)}.video-card video{display:block;width:100%;max-height:320px;border-radius:var(--r-2);background:var(--ink);margin:6px 0}.video-text-option{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-2);margin:10px 0 2px;cursor:pointer}.video-text-option input{margin:2px 0 0}.video-text-state{margin:2px 0 0 26px}
.contrib-media video{width:100%;max-width:360px;max-height:240px;border-radius:var(--r-2);background:var(--ink)}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;max-height:360px;margin:6px 0;border-radius:var(--r-2);overflow:hidden;background:var(--ink)}.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.video-frame .video-wait{color:var(--on-dark-muted);background:none;border:0}
.video-wait{margin:6px 0;padding:18px 14px;border-radius:var(--r-2);background:var(--bg);border:1px dashed var(--line);font-size:var(--fs-3);line-height:1.5;color:var(--muted)}.video-failed{border-style:solid;color:var(--danger)}
.video-foot{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0 0;font-size:var(--fs-2)}.video-foot a{color:var(--accent)}
.video-uploading progress{display:block;width:100%;height:8px;margin:8px 0 4px;accent-color:var(--accent)}.video-progress{margin:0;font-size:var(--fs-3);line-height:1.5}.video-uploading .video-progress{font-size:var(--fs-2);color:var(--muted)}
/* A grid column never grows to the width of its content: the row of story cards on a phone scrolls inside itself. */
.materials-workspace>*{min-width:0}
/* «Как оформить историю»: timeline milestones and achievement facts */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.details-kind select{min-height:38px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);font:inherit;font-size:var(--fs-3);max-width:100%}
.details-hint{margin:4px 0 10px;font-size:var(--fs-2)}.details-list{display:grid;gap:10px;margin-bottom:10px}
/* «Тексты истории» («Текст 4»): one card per text. */
#book-texts,#book-wide-texts,#chapter-list{display:grid;gap:10px}.chapter-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:6px 8px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface)}.chapter-number{font-size:var(--fs-1);color:var(--muted)}.chapter-intro-text,.chapter-count{grid-column:1/-1}.skeleton-card{display:grid;gap:8px;padding:14px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface)}.skeleton-card p{margin:0}.skeleton-title{font-weight:600}.skeleton-scenario{display:flex;gap:8px;align-items:center;font-size:var(--fs-2);flex-wrap:wrap}.skeleton-scenario select{min-height:34px;max-width:100%}.skeleton-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 14px;margin:4px 0}.skeleton-item{display:flex;gap:8px;align-items:flex-start;cursor:pointer}.skeleton-item input{margin-top:3px}.skeleton-item span{display:grid;gap:1px}.skeleton-item small{color:var(--muted);font-size:var(--fs-1);line-height:1.35}.skeleton-card .button-primary{justify-self:start}.skeleton-card .button-text{justify-self:start}.chapter-intro-text{resize:vertical}.story-chapter{display:flex;gap:8px;align-items:center;margin:10px 0 0;font-size:var(--fs-1);color:var(--muted)}.story-chapter select{min-height:32px;max-width:100%}.book-wide{max-width:760px}.book-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface)}.book-text-body,.book-text-count,.book-text-author{grid-column:1/-1}.book-text-body{min-height:84px;resize:vertical}.book-text>.button-text{justify-self:start}.book-texts-removed{margin:0}
@media (max-width:700px){.book-text{grid-template-columns:1fr}}
.details-row{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface)}
.details-row input,.details-row textarea,.details-row select{min-width:0;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-2);font:inherit;font-size:var(--fs-3);background:var(--surface)}
.milestone-row{grid-template-columns:minmax(0,190px) minmax(0,1fr) 32px}.milestone-row .details-title,.milestone-row .details-text,.milestone-row .details-photo{grid-column:1/3}.details-row .details-remove{grid-column:3;grid-row:1}
.fact-row{grid-template-columns:minmax(80px,120px) minmax(0,1fr) 32px}.fact-row .details-label,.fact-row .details-period,.fact-row .details-source{grid-column:1/3}
.details-approx{display:flex;gap:6px;align-items:center;font-size:var(--fs-2);white-space:nowrap}

.details-note{grid-column:1/-1;margin:0;font-size:var(--fs-1)}.details-warning{color:var(--warning)}.details-state{margin:6px 0 0;font-size:var(--fs-1)}
@media(max-width:620px){.milestone-row{grid-template-columns:minmax(0,1fr) auto 32px}.milestone-row .details-title,.milestone-row .details-text,.milestone-row .details-photo{grid-column:1/-1}.fact-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px}.fact-row .details-label,.fact-row .details-period,.fact-row .details-source{grid-column:1/-1}}
.story-ai{margin:12px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface)}.story-ai-label{margin:0 0 8px;font-weight:600;font-size:var(--fs-2)}
.story-ai-actions{display:flex;flex-wrap:wrap;gap:6px}
/* «Текст 4в»: AI for one text, its proposal, a guest's wish. */
.book-text-ask{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px;border-radius:var(--r-2);background:var(--warning-soft)}.book-text-ask p{margin:0;flex-basis:100%}
.contrib-kind{display:inline-block;margin:4px 0;padding:2px 8px;border-radius:var(--r-3);background:var(--accent-soft);font-size:var(--fs-1)}
.book-text-ai{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 10px}.book-text-ai-state,.book-text-lang{grid-column:1/-1;margin:0;font-size:var(--fs-1)}.book-text-lang{color:var(--muted)}
.book-text-proposal{grid-column:1/-1;border:1px solid var(--line);border-radius:var(--r-2);padding:10px;background:var(--surface-sunken)}.book-text-proposal-title{margin:0 0 6px;font-size:var(--fs-1);font-weight:600}.book-text-proposal-text{white-space:pre-wrap;margin:0 0 8px;font-size:var(--fs-2);line-height:1.6}.book-text-proposal-text del{color:var(--danger)}.book-text-proposal-text ins{color:var(--success);text-decoration:none;background:var(--success-soft)}
.story-ai-ask{width:100%;margin:8px 0 4px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-2);font:inherit;font-size:var(--fs-3)}.story-ai-note,.story-ai-state{margin:4px 0 0;font-size:var(--fs-1)}
.story-ai-questions{margin:8px 0 0;padding-left:18px;font-size:var(--fs-2)}
/* Загрузить много фото и видео (BK-72) */
.bulk-buttons{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:10px 0}
/* Under the buttons, on the phone too (BK-312): the files being read, the hint about videos on an iPhone. */
.bulk-note{margin:0 0 10px;color:var(--text-2);font-size:var(--fs-2);line-height:1.45}
.story-item .story-badge-text{background:var(--surface-tint);color:var(--accent-strong)}
.bulk-dialog{width:min(980px,96vw);max-height:92vh;padding:0;border:0;border-radius:var(--r-3);box-shadow:0 20px 60px var(--shadow-3)}
.bulk-dialog::backdrop{background:var(--scrim)}
.bulk-head{padding:18px 20px 8px}.bulk-head h2{margin:0 0 6px;font-size:var(--fs-5)}.bulk-head p{margin:4px 0}
.bulk-warning{color:var(--warning)}
.bulk-groups{display:grid;gap:12px;padding:8px 20px;overflow:auto;max-height:60vh}
.bulk-group{border:1px solid var(--line-soft);border-radius:var(--r-3);padding:12px}
.bulk-group-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bulk-group-top input{flex:1 1 220px;min-width:0;font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:var(--r-2)}
.bulk-group-top select{flex:0 1 240px;min-width:0;max-width:100%}
.bulk-count{margin:6px 0}
.bulk-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.bulk-thumb{display:grid;gap:3px;font-size:var(--fs-1);min-width:0}.bulk-thumb img,.bulk-thumb-kind{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-2);background:var(--bg);display:grid;place-items:center;font-size:var(--fs-4)}
.bulk-thumb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.bulk-thumb.is-out img,.bulk-thumb.is-out .bulk-thumb-kind{opacity:.3}

.bulk-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 20px 18px;border-top:1px solid var(--line-soft)}
.bulk-state{flex:1 1 100%;margin:0}.bulk-foot progress{flex:1 1 100%}
.voice-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
dialog label.voice-choice-card{display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-2);cursor:pointer;background:var(--surface)}
.voice-choice-card:has(input:checked){border-color:var(--green);box-shadow:0 0 0 2px var(--shadow-2)}
dialog .voice-choice-card input{width:auto;margin:2px 0 0}
.voice-choice-card strong{display:block;font-size:var(--fs-1)}.voice-choice-card small{display:block;font-size:var(--fs-1);color:var(--muted);line-height:1.35;margin-top:2px}.voice-choice-card em{display:block;font-size:var(--fs-1);line-height:1.35;margin-top:4px;color:var(--ink)}
.story-voice-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 8px}.story-voice-row .story-voice,.story-voice-row .story-language{max-width:100%;min-width:0;flex:1 1 200px}
.bulk-thumb-similar{display:inline-block;font-size:var(--fs-1);color:var(--warning);background:var(--highlight);border-radius:var(--r-1);padding:1px 6px;margin:2px 0}.bulk-thumb.is-similar:not(.is-out) img{opacity:.55}
.bulk-thumb-state{display:inline-block;font-size:var(--fs-1);border-radius:var(--r-1);padding:1px 6px;margin:2px 0;background:var(--surface-tint);color:var(--muted)}.bulk-thumb[data-state=sent] .bulk-thumb-state{background:var(--success-soft);color:var(--green)}.bulk-thumb[data-state=failed] .bulk-thumb-state{background:var(--warning-soft);color:var(--danger)}
/* BK-90: a photo of the bulk upload shown large */
.bulk-thumb-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:var(--r-2)}
.bulk-thumb-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bulk-viewer{width:min(1100px,96vw);max-width:none;max-height:94vh;padding:12px;border:0;border-radius:var(--r-3);background:var(--dark-strong);color:var(--on-accent);display:grid;gap:8px}
.bulk-viewer::backdrop{background:var(--scrim-strong)}
.bulk-viewer-stage{display:grid;gap:8px;place-items:center;touch-action:pan-y}
.bulk-viewer-stage.is-pair{grid-template-columns:1fr 1fr}
.bulk-viewer-figure{margin:0;display:grid;gap:4px;justify-items:center;min-width:0}
.bulk-viewer-figure img,.bulk-viewer-figure video{max-width:100%;max-height:72vh;object-fit:contain;border-radius:var(--r-2)}
.bulk-viewer-stage.is-pair img,.bulk-viewer-stage.is-pair video{max-height:60vh}
.bulk-viewer-figure figcaption{font-size:var(--fs-2);color:var(--on-dark-muted)}
.bulk-viewer-info{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0;font-size:var(--fs-2)}
.bulk-viewer-name{overflow-wrap:anywhere;color:var(--on-dark-muted)}
.bulk-viewer-out{font-size:var(--fs-1);background:var(--danger);color:var(--on-accent);border-radius:var(--r-1);padding:1px 6px}
.bulk-viewer-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bulk-viewer-bar .bulk-viewer-count{min-width:70px;text-align:center;font-size:var(--fs-2)}

.bulk-viewer-bar .button-primary{width:auto;margin:0 0 0 auto}
@media (max-width:640px){.bulk-viewer-stage.is-pair{grid-template-columns:1fr}.bulk-viewer-stage.is-pair img,.bulk-viewer-stage.is-pair video{max-height:34vh}}
/* BK-92: «Фото без истории» above the stories */
.loose-materials{margin:0 0 22px;padding:18px 20px;border:1px solid var(--warning-line);background:var(--warning-soft);border-radius:var(--r-3)}
.loose-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.loose-head h2{margin:0 0 4px;font-size:var(--fs-3)}.loose-head p{margin:0;color:var(--muted);font-size:var(--fs-1)}
.loose-head .button-primary{margin:0}
.loose-thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.loose-thumbs img,.loose-thumbs .loose-video,.loose-thumbs .loose-more{width:64px;height:48px;object-fit:cover;border-radius:var(--r-1);background:var(--bg);display:grid;place-items:center;font-size:var(--fs-1);color:var(--muted)}
.bulk-unsorted{border-style:dashed}.bulk-unsorted-title{margin:0 0 4px;font-size:var(--fs-3)}
.loose-state{margin:10px 0 0;font-size:var(--fs-2);color:var(--warning)}
.bulk-titles{display:flex;gap:6px;flex-wrap:wrap;align-items:center;flex-basis:100%}
.bulk-title-option{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-3);padding:4px 10px;font-size:var(--fs-1);cursor:pointer}
.bulk-title-option.is-current{border-color:var(--accent);background:var(--surface-tint)}
.story-drop{outline:2px dashed var(--accent);outline-offset:-2px}#story-list [draggable=true]{cursor:grab}
.bulk-thumb{position:relative}.bulk-pick{position:absolute;top:6px;left:6px;width:20px;height:20px;z-index:1;accent-color:var(--accent-text)}.bulk-thumb.is-picked img,.bulk-thumb.is-picked .bulk-thumb-kind{outline:3px solid var(--accent);outline-offset:-3px}.bulk-thumb[draggable=true]{cursor:grab}
.bulk-group.is-drop{border-color:var(--accent);background:var(--surface-tint)}.bulk-new{align-self:flex-start;margin-top:4px}
.bulk-picked{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--dark);color:var(--on-accent);padding:8px 12px;border-radius:var(--r-2);margin-top:8px}.bulk-picked select{min-height:36px;max-width:100%}
.loose-actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
@media (max-width:700px){.chapter-row{grid-template-columns:minmax(0,1fr) auto auto auto}.chapter-number{grid-column:1/-1}}
/* A manager looks at a client's book: nothing in it changes from here. */
.view-only-note{margin:0 0 18px;padding:10px 14px;border-radius:var(--radius);background:var(--highlight);border:1px solid var(--warning-line);font-size:var(--fs-3)}
/* An AI edit: names, dates, places and numbers apart; places the editor was not sure about */
.proposal-facts,.proposal-doubts,.proposal-words{margin:10px 0;padding:10px 14px;border-radius:var(--r-2);font-size:var(--fs-2);line-height:1.6}
.proposal-facts,.proposal-words{border:1px solid var(--warning-line);background:var(--warning-soft)}.proposal-facts.is-strict,.proposal-words.is-strict{border-color:var(--danger-line);background:var(--warning-soft)}
.proposal-facts-title,.proposal-doubts-title{margin:0 0 4px;font-weight:600}.proposal-facts ul,.proposal-doubts ul,.proposal-words ul{margin:0;padding-left:18px}
.proposal-facts del,.proposal-words del{color:var(--danger)}.proposal-facts ins,.proposal-words ins{color:var(--accent-strong);text-decoration:none;font-weight:600}
.proposal-doubts{border:1px solid var(--line);background:var(--surface-sunken)}.proposal-doubts mark{background:var(--highlight);padding:0 2px;border-radius:var(--r-1)}
/* «Люди»: the group photo above the list of people */
.details-group{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:8px 0;font-size:var(--fs-2)}
.details-group select{min-height:38px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);font:inherit;font-size:var(--fs-3);max-width:100%}
.person-row{grid-template-columns:minmax(0,1fr) auto 32px}.person-row .details-label{grid-column:1/2}.person-row .details-text{grid-column:2/4}
@media(max-width:620px){.person-row .details-label,.person-row .details-text,.person-row .details-photo{grid-column:1/-1}}
/* The minimum of spreads, known before the layout check (BK-138) */
.spread-hint{margin:10px 0 0;padding:10px 12px;border-left:3px solid var(--warning);background:var(--warning-soft);color:var(--warning);font-size:var(--fs-3);line-height:1.5;border-radius:var(--r-1)}
/* The header on a phone (BK-144): 56 px — the sign, the section, the menu. */
.phone-section,.account-menu{display:none}
@media(max-width:620px){
 .sidebar.sidebar{display:flex;flex-direction:row;align-items:center;gap:10px;height:56px;padding:0 10px 0 16px;position:relative}
 .sidebar .brand>span:last-child{display:none}.sidebar .brand{flex:none;min-height:44px;min-width:44px;justify-content:center}
 .phone-section{display:block;flex:1;min-width:0;font-size:var(--fs-phone);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .account-menu{display:block;flex:none}
 .account-menu>summary{list-style:none}
 .account-menu>summary::-webkit-details-marker{display:none}
 .account-panel{position:absolute;right:10px;top:52px;z-index:30;width:min(300px,calc(100vw - 20px));display:grid;gap:4px;padding:12px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface);box-shadow:0 12px 40px var(--shadow-3)}
 .account-panel>*{grid-column:auto;grid-row:auto}
 .account-panel .account{display:flex;align-items:center;gap:8px;max-width:none;padding:4px 4px 10px;border-bottom:1px solid var(--line)}
 .account-panel .account strong{display:none}.account-panel .account div>span{max-width:none;overflow-wrap:anywhere}
 .account-panel .account button{margin-left:auto}
 .account-panel .ui-language{justify-self:stretch;margin:4px 0}.account-panel .ui-language select{width:100%;min-height:44px;font-size:var(--fs-phone)}
 .account-panel nav{display:grid;gap:2px;padding:0}.account-panel nav a,.account-panel nav button{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 6px;border-radius:var(--r-2);text-align:left}
 .account-panel nav .nav-active{border-bottom:0;background:var(--surface-tint)}
}
/* A short start of a new book (BK-142): the rest under «Ещё настройки», the buttons always in sight. */
.more-settings{margin:14px 0 6px;border:1px solid var(--line);border-radius:var(--r-3);padding:0 14px;background:var(--surface)}
.more-settings>summary{cursor:pointer;padding:12px 0;font-weight:600;font-size:var(--fs-3);list-style:none;display:flex;align-items:center;gap:8px}.more-settings>summary::-webkit-details-marker{display:none}.more-settings>summary .quiet{font-weight:400;flex:1;min-width:0}
.more-settings>summary::after{margin-inline-start:auto;transition:transform .15s}.more-settings[open]>summary::after{transform:rotate(180deg)}
.mode-line,.format-line{display:none}
.more-settings[open]{padding-bottom:12px}
.dialog-actions{position:sticky;bottom:-32px;z-index:2;display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px -38px -32px;padding:14px 38px 18px;background:var(--surface-sunken);border-top:1px solid var(--line)}
.dialog-actions .button-primary{flex:1 1 200px}
@media(max-width:620px){.dialog-actions{margin:12px -24px -25px;padding:12px 24px 16px;bottom:-25px}}
.voice-tag{display:inline-block;margin:3px 0 0;padding:1px 7px;border-radius:var(--r-round);background:var(--accent-soft);color:var(--accent-strong);font-size:var(--fs-1);font-weight:600}
.voice-suggested{border-style:dashed}
/* «Что изменится в макете» before new settings are saved (BK-152). */
.book-impact{margin:14px 0 4px;padding:12px 14px;border:1px solid var(--warning-line);border-left:4px solid var(--warning-line);border-radius:var(--r-2);background:var(--warning-soft)}
.book-impact h3{margin:0 0 6px;font:600 var(--fs-3)/1.35 var(--sans)}
.book-impact ul{margin:0 0 6px;padding-left:18px;font-size:var(--fs-3);line-height:1.5}
.book-impact p{margin:4px 0 0;font-size:var(--fs-2)}
/* Where each file is (BK-134) */
.file-status{margin:4px 0 0;font-size:var(--fs-1);line-height:1.4;color:var(--text-2);white-space:normal!important;overflow:visible!important}
.file-notPlaced,.file-similar,.file-excluded{color:var(--warning)!important}.file-placed,.file-qr,.file-cover{color:var(--accent-text)!important}
.out-of-book{margin:12px 0 0;font-size:var(--fs-3)}.out-of-book summary{cursor:pointer;font-weight:600;color:var(--warning)}.out-of-book ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}.out-of-book li{display:grid;gap:2px}


/* One main action by the stage of the book (BK-132) */
.book-heading-actions>*{min-height:44px;box-sizing:border-box}
.stage-state{margin:8px 0 0;font-size:var(--fs-3);color:var(--warning)}.stage-state:empty{display:none}
.next-step{margin:10px 0 0;padding:10px 14px;border:1px solid var(--line-soft);border-radius:var(--r-2);background:var(--accent-soft);font-size:var(--fs-3)}.next-step p{margin:0}.next-actions{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin-top:8px}.next-actions:empty{display:none}
#pause-dialog .choice-list{border:0;padding:0;margin:10px 0}#help-dialog textarea{margin:10px 0}#pause-dialog .choice-list label{display:flex;gap:8px;align-items:center;padding:4px 0}
.progress-steps{border:0;gap:6px;margin:22px 0 28px}.progress-steps li{width:auto;flex:1 1 0;padding:8px 0;border-bottom:2px solid var(--line);font-size:var(--fs-1)}.progress-steps li.current{border-bottom-color:var(--green)}
.book-card{position:relative}.book-card .book-open::after{content:'';position:absolute;inset:0;border-radius:var(--r-2)}.book-card .book-open:focus-visible::after{outline:3px solid var(--accent);outline-offset:2px}.book-card .book-open:focus-visible{outline:none}.book-card button:not(.book-open),.book-card a{position:relative;z-index:1}.book-card:hover .book-cover{filter:brightness(1.03)}
.shelf-tabs{gap:18px;border-bottom:1px solid var(--line)}.shelf-tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;padding:8px 2px;background:none;color:var(--muted)}.shelf-tabs [aria-pressed=true]{background:none;color:var(--green);border-bottom-color:var(--green)}

.story-actions #remove-story{margin-left:10px}
.more-menu{position:relative}.more-menu>summary{list-style:none}.more-menu>summary::-webkit-details-marker{display:none}
.more-menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:180px;padding:6px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);box-shadow:0 8px 24px var(--shadow-2);display:grid}
/* Originals, not messenger copies (BK-123) */
.originals-guide{margin:10px 0 0;font-size:var(--fs-2);color:var(--text-2)}.originals-guide summary{cursor:pointer;font-weight:600;color:var(--accent)}.originals-guide ul{margin:8px 0 0;padding-left:18px;line-height:1.55}.originals-guide li{margin:4px 0}
.format-advice{margin:0 0 12px;padding:10px 12px;border-left:3px solid var(--warning);background:var(--warning-soft);color:var(--warning);font-size:var(--fs-3);line-height:1.5;border-radius:var(--r-1)}.format-fit{display:block;color:var(--accent);font-weight:600}
/* UI polish (BK-165) */
.has-books .library-heading .eyebrow,.has-books .library-heading .lead,.has-books .how-it-works{display:none}
.has-books .library-heading{margin:18px 0 26px;flex-direction:row;align-items:center}
.has-books .library-heading h1{font-size:var(--fs-7)}.has-books .library-heading h1 br{display:none}.has-books .library-heading h1 em::before{content:" "}/* a real space: the line may break before «историй» (kk is longer) */
@media(max-width:620px){.has-books .library-heading{flex-direction:column;align-items:stretch;gap:14px}.shelf{grid-template-columns:minmax(0,1fr);gap:18px}}
.story-item .story-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--accent);color:var(--accent);font-size:var(--fs-1);font-weight:600;margin-bottom:8px}
.story-item.active .story-num{background:var(--accent);color:var(--on-accent)}
.story-help details>summary{cursor:pointer;font-size:var(--fs-3);font-weight:600;color:var(--text-2)}
.story-help details>p{font-size:var(--fs-1);line-height:1.7;color:var(--muted)}
.photo-card img,.bulk-thumb img,.loose-thumbs img{object-fit:contain;background:var(--bg)}
.bulk-thumb-out{position:absolute;top:6px;right:6px;background:var(--scrim-strong);color:var(--on-accent);font-size:var(--fs-1);font-weight:600;padding:2px 7px;border-radius:var(--r-1);pointer-events:none}
.bulk-keep{display:flex;gap:6px;align-items:center;font-size:var(--fs-1);cursor:pointer;min-height:28px}.bulk-keep input{margin:0}
/* A small photo in words (BK-147) */
.photo-card .photo-ai-line{display:flex;gap:4px;margin:-6px 0 12px;font-size:var(--fs-1);line-height:1.4;color:var(--muted)}.photo-card .photo-ai-line span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.photo-card .photo-ai-line a{flex:none;white-space:nowrap}
.photo-card .photo-weak{margin:-6px 0 12px;font-size:var(--fs-1);line-height:1.4;color:var(--warning);white-space:normal;overflow:visible}
/* A story told aloud (BK-154): «Запись · Что сказано · Текст в книге» over the text field */
.story-views{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 12px;border-bottom:1px solid var(--line)}
.story-view-tab{min-height:44px;padding:8px 14px;border:0;border-bottom:3px solid transparent;background:none;font-size:var(--fs-3);color:var(--muted);margin-bottom:-1px}
.story-view-tab[aria-selected=true]{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.story-view{padding:4px 0 8px}.story-view>.quiet{font-size:var(--fs-2);margin:0 0 10px}
.view-audio{padding:12px 14px;border:1px solid var(--line-soft);background:var(--bg);border-radius:var(--r-2);margin-bottom:10px}.view-audio strong{display:block;font-size:var(--fs-3);overflow-wrap:anywhere}.view-audio audio{display:block;width:100%;margin-top:8px}
.said-name{font-size:var(--fs-3);margin:14px 0 4px}.said-text{white-space:pre-wrap;font:var(--fs-3)/1.8 var(--serif);color:var(--ink);margin:0 0 10px;padding:14px 16px;background:var(--surface-sunken);border:1px solid var(--line-soft);border-radius:var(--r-2)}
mark.fact{background:var(--highlight);color:inherit;border-radius:var(--r-1);padding:0 2px}mark.fact-name{background:var(--info-soft)}
.book-source{margin:10px 0 0;font-size:var(--fs-2);color:var(--muted)}
.fact-check{margin:10px 0 0;padding:10px 12px;border-radius:var(--r-2);background:var(--warning-soft);border:1px solid var(--warning-line);font-size:var(--fs-3);line-height:1.6}
/* A similar shot (BK-146): in the materials, half-transparent and marked — the book has the best of its series */
.photo-card.is-similar img{opacity:.5}.similar-mark{font-size:var(--fs-1);font-weight:600;color:var(--warning);background:var(--highlight);border-radius:var(--r-1);padding:2px 6px}
/* Over the photo only in the card of the cabinet: studio.css is on the layout page too, and there the mark is in a line of the
   list (BK-322) — positioned it flew to the corner of the panel, over the tabs. */
.photo-card .similar-mark{position:absolute;left:6px;top:6px;z-index:1;pointer-events:none}
/* Fields with their labels in sight (BK-140): the wrapper takes the grid place the control had */
.book-text>.book-text-wide{grid-column:1/-1}
.chapter-row>.chapter-intro{grid-column:1/-1}
.story-ai-ask-field{margin:8px 0 4px}
.details-row>.field>:is(input,textarea,select),.chapter-row>.field>:is(input,textarea),.book-text>.field>:is(input,textarea,select),.invite-form .field>:is(input,textarea,select){width:100%;min-width:0}
.add-story{justify-content:flex-start;gap:6px;text-align:left}
.details-row>.field,.chapter-row>.field,.book-text>.field{align-self:start}
.book-text>.button-danger{justify-self:start}
/* Sections of the book screen (BK-143): the steps of the book are its tabs, one section in sight. Two surfaces — the
   page and white cards; colour only for statuses. The step the book is at keeps its green mark. */
.progress-steps li{padding:0}
.progress-steps .section-tab{display:flex;align-items:center;gap:11px;width:100%;min-height:56px;padding:12px 10px;border:0;border-radius:var(--r-2) var(--r-2) 0 0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.progress-steps .section-tab:hover{background:var(--hover)}
.progress-steps .section-tab>span{display:grid;place-items:center;flex-shrink:0;border:1px solid var(--line);border-radius:50%;width:24px;height:24px;font-size:var(--fs-1);font-weight:600}
.progress-steps li.current .section-tab{color:var(--green);font-weight:600}
.progress-steps li.current .section-tab>span{background:var(--green);color:var(--on-accent);border-color:var(--green)}
.progress-steps .section-tab[aria-selected=true]{background:var(--surface);color:var(--ink);font-weight:700}
.progress-steps .section-tab:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.progress-steps.is-steps-only .section-tab{cursor:default;pointer-events:none;background:none}
.book-section{display:grid;gap:22px;min-width:0}.book-section>*{min-width:0}
.book-section[hidden],.book-part[hidden],.materials-switch[hidden]{display:none}
.book-part{display:grid;gap:22px;min-width:0}.book-part>*{min-width:0;margin-top:0}
.materials-switch{justify-self:start}
.book-card-section{padding:22px 26px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface)}
.book-card-section h2{font-size:var(--fs-5);letter-spacing:0;margin:0 0 8px}
.book-card-section>p{font-size:var(--fs-2);color:var(--muted);margin:0 0 12px;max-width:72ch}
.check-state,.print-state{font-size:var(--fs-3);color:var(--ink)!important}.check-state[data-tone=danger]{color:var(--danger)!important}.check-state[data-tone=ok]{color:var(--success)!important}
.check-panel,.print-panel{display:grid;justify-items:start;gap:4px}
/* «Макет книги» stays in reach on a phone: a bar at the bottom of the screen. */
.layout-bar{display:none}
@media(max-width:620px){
 .layout-bar:not([hidden]){display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px var(--shadow-1)}
 .layout-bar .button-primary{flex:1}
 /* The same «Макет книги» is not repeated in the heading: the bar is it. */
 #book-screen:has(#layout-bar:not([hidden])) #open-layout[data-stage=layout]{display:none}
 #book-screen:has(#layout-bar:not([hidden])){padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
 body:has(#book-screen:not([hidden]) #layout-bar:not([hidden])) .undo-toast{bottom:88px}
 .progress-steps .section-tab{flex-direction:column;justify-content:flex-start;gap:5px;text-align:center;line-height:1.2;padding:10px 2px;min-height:64px}
 .progress-steps .section-tab>span{width:19px;height:19px}
 .materials-switch{justify-self:stretch;width:100%}.materials-switch .segment{padding:0 6px;font-size:var(--fs-2)}
 .book-card-section{padding:18px 16px}
}
.book-section .layout-entry{margin-top:0;background:var(--surface)}
/* «Фото в рамках» (BK-380): its own card under the layout of the book — a product of its own, ordered apart. */
.book-section .walls-entry{margin-top:16px}.walls-entry a{white-space:nowrap}.walls-entry-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
/* Answers to the questions of the AI (BK-5): a question is the label of its field. */
.texts-questions{padding:14px 16px}.texts-questions .questions-list{margin:0;padding-left:18px}
.ai-answers{display:grid;gap:10px;margin:10px 0 0;padding:14px 16px;border-radius:var(--r-2);background:var(--warning-soft)}
.ai-answers .questions-lead{margin:0;font-weight:600;font-size:var(--fs-2)}
.ai-answers .field-label{font-weight:600;color:var(--ink)}.ai-answers textarea{width:100%;box-sizing:border-box}
.ai-answers .button-primary{justify-self:start}.ai-answers .field-hint{margin:0}
/* Text from a photo (BK-80): the photo to read, and the reminder to check the text against it. */
.story-scan-row .story-scan-photo{max-width:100%;min-width:0;flex:1 1 200px}.story-scan-name{min-width:0;overflow-wrap:anywhere;font-size:var(--fs-2)}
.proposal-scan-note{margin:10px 0;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface-sunken);font-size:var(--fs-2);line-height:1.6}
.proposal-scan-text{margin:10px 0;padding:4px 0 4px 14px;border-left:3px solid var(--accent)}.proposal-scan-text p{margin:6px 0 0;font:var(--fs-3)/1.9 var(--serif);white-space:pre-line}
/* «Показать книгу до согласования» (BK-164): the view links and what came back by them, under «Проверка». */
.share-panel{display:grid;gap:14px;margin-top:18px}.share-panel>h2{margin:0}.share-panel>p{margin:0;color:var(--muted);max-width:640px}
.share-panel .share-form{max-width:520px}.share-comment-list{display:grid;gap:10px}.share-comment-list h3{margin:0}
.share-comment-body{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.share-comment.is-done{opacity:.75}.share-done summary{cursor:pointer;font-weight:600;color:var(--muted);margin:4px 0 8px}.share-done{display:grid;gap:10px}
/* The password for signing in (BK-85): the offer in the library and «Пароль для входа» under the account. */
.password-offer{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin:0 0 26px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface-tint)}
.password-offer h2{font:600 var(--fs-4)/1.3 var(--sans);letter-spacing:0;margin:0 0 4px}.password-offer p{margin:0;font-size:var(--fs-2);color:var(--muted);max-width:520px}
.account-password{align-self:flex-start;margin:8px 0 0 30px;font-size:var(--fs-1)}
/* «Мои данные» (BK-88). */
.account-profile{margin-top:2px}.profile-dialog{width:min(640px,calc(100% - 32px))}.profile-dialog fieldset{border:0;margin:18px 0 0;padding:0;min-width:0}.profile-dialog legend{font-weight:600;font-size:var(--fs-3);margin-bottom:2px}.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.profile-grid label{margin:10px 0}.profile-dialog .invite-check{display:flex;gap:10px;align-items:flex-start}.profile-dialog .invite-check input{width:auto;margin-top:3px}#profile-error{color:var(--danger);font-size:var(--fs-2);min-height:1em}
@media(max-width:560px){.profile-grid{grid-template-columns:1fr}}
#password-dialog label{display:grid;gap:6px;margin:12px 0}#password-dialog input[type=password],#password-dialog input[type=text]{font:inherit;padding:11px 12px;border:1px solid var(--border-strong);border-radius:var(--r-2)}#password-error{color:var(--danger);font-size:var(--fs-2);min-height:1em}

/* Co-authors (BK-78): what stays the owner's is not shown to a co-author at all (the server refuses it anyway). */
body.coauthor [data-owner-only]{display:none!important}
/* A voice is taken out of a story by the owner: it changes the story's text and its QR. */
body.coauthor .audio-card-head .button-danger,body.coauthor .replace-audio{display:none!important}
.coauthor-note{display:grid;gap:4px;overflow-wrap:anywhere}
/* The greeting of a co-author (BK-341): where they are and from whom — a line, not a yellow plaque; the owner's words as a
   quote; what can be done as three big buttons until «Понятно». */
.coauthor-note.view-only-note{padding:14px 16px;background:var(--surface);border-color:var(--line)}
.coauthor-where{font-size:var(--fs-4)}.coauthor-from{color:var(--muted);font-size:var(--fs-2)}
.coauthor-message{margin:6px 0 0;padding:2px 0 2px 12px;border-left:3px solid var(--accent-line);white-space:pre-line;font-size:var(--fs-3)}
.coauthor-actions{display:grid;gap:8px;margin-top:10px}.coauthor-actions-title{margin:0;font-weight:600;font-size:var(--fs-3)}
.coauthor-action-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.coauthor-actions>.button-text{justify-self:start}
@media(max-width:620px){.coauthor-action-row{grid-template-columns:minmax(0,1fr)}}
.shared-books{margin:0 0 32px}.shared-books>h2{margin:0 0 6px}.shared-books>p{margin:0 0 16px}
.coauthor-scope{font-size:var(--fs-3);color:var(--muted)}
.coauthors-panel .invite-row .quiet{display:block}
/* A compact story editor (BK-168): a rarely needed part folds into its heading — the title, a short summary and a mark. */
.fold-toggle{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;width:100%;min-width:0;margin:0;padding:2px 0;border:0;background:none;color:var(--ink);font:600 var(--fs-3)/1.4 var(--sans);text-align:left;cursor:pointer}
.fold-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-1)}
.fold-summary{font-weight:400;font-size:var(--fs-1);color:var(--muted);min-width:0;overflow-wrap:anywhere}
.fold-mark{margin-left:auto;align-self:center;flex-shrink:0;color:var(--muted)}
.fold-heading{margin:0}.material-heading>div:has(.fold-heading){flex:1;min-width:0}
.material-section.is-folded{margin-top:8px;padding-top:10px}
.material-section.is-folded>:not(.material-heading){display:none!important}
.material-section.is-folded .material-heading{margin-bottom:0}
.material-section.is-folded .material-heading p{display:none}
.story-ai-head{font-size:var(--fs-2)}.story-ai-head .story-ai-label{margin:0}
.story-ai.is-folded{padding-top:8px;padding-bottom:8px}
.story-ai-body{margin-top:8px}
/* The AI at work (BK-172): the part is outlined in the accent colour and a light runs along its top edge. */
.story-ai.is-working,.voice-hint.is-working{position:relative;overflow:hidden;border:1px solid var(--accent);background:var(--accent-soft)}
.story-ai.is-working::before,.voice-hint.is-working::before{content:"";position:absolute;left:0;top:0;height:3px;width:40%;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:ai-run 1.6s ease-in-out infinite}
.story-ai.is-working .fold-summary,.story-ai.is-working .story-ai-state{color:var(--accent-text);font-weight:600}
@keyframes ai-run{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){.story-ai.is-working::before,.voice-hint.is-working::before{animation:none;width:100%;background:var(--accent)}}
/* Photos (BK-168): four in a row; past eight, «Показать все» opens the rest. */
.photo-more{margin-top:8px}
.photo-heading-add{flex-shrink:0}
.photo-add[hidden],.photo-heading-add[hidden]{display:none}
/* BK-168: a calmer rhythm of the editor on a laptop — less air between parts, wider photos, the text grows to 40% of the
   screen and then scrolls inside, the footer in one row. */
@media(min-width:621px){
 #story-editor .material-section{margin-top:14px;padding-top:16px}
 #story-editor .material-section.is-folded{margin-top:6px;padding-top:10px}
 #photo-list .photo-card img{aspect-ratio:4/3}
 #story-editor .editor-footer{margin-top:14px;padding-top:12px}
}
.text-section textarea{max-height:40vh;overflow-y:auto}
/* Photos dropped from a folder (BK-168 follow-up): the whole part is the target and says so. */
.photo-section{position:relative}
.photo-section.is-drop{outline:2px dashed var(--accent);outline-offset:6px;border-radius:var(--r-2);background:var(--accent-soft)}
.photo-section.is-drop::after{content:attr(data-drop-label);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 var(--fs-3) var(--sans);color:var(--accent-text);background:var(--veil);pointer-events:none;border-radius:var(--r-2)}

/* «Как будете собирать книгу» in the new book dialog (tester's feedback 21.10) */
.mode-picker{display:grid;gap:8px}
.mode-option{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-2);cursor:pointer}
.mode-option:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.mode-option span{display:grid;gap:2px}.mode-option small{color:var(--text-2);font-size:var(--fs-2)}

/* «Попросить ИИ ещё раз» under the photos (21.10) */
.photo-ai-retry{justify-self:start;margin-top:4px}

/* «Как хотите начать?» (BK-298, Figma «1. Кабинет: пустое состояние», «2. …окно «Создать книгу»»): two cards, each with its
   picture on a light panel, its name, what it does and its button; in the empty library and in the window alike. */
.start-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px;text-align:left}
.start-way{display:grid;gap:8px;align-content:start;padding:16px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface)}
.start-way h3{margin:8px 0 0;font-size:var(--fs-4)}.start-way p{margin:0;max-width:none!important}
.start-way .button-primary{justify-self:start;width:auto;margin-top:8px}
.start-picture{display:flex;align-items:center;justify-content:center;gap:12px;min-height:186px;padding:14px;box-sizing:border-box;border-radius:var(--r-2);background:var(--accent-soft)}
.start-picture svg{display:block;flex:none}.start-picture small{font-size:var(--fs-1);color:var(--muted);line-height:1.2;white-space:nowrap}
.start-things{display:grid;grid-template-columns:repeat(2,auto);gap:6px 8px}.start-thing{display:grid;justify-items:center;gap:4px}
.start-tile{display:block;overflow:hidden;border-radius:var(--r-1);background:var(--surface);box-shadow:0 1px 3px var(--shadow-2)}.start-tile.is-voice{background:var(--accent)}
.start-arrow{color:var(--accent)}.start-arrow[data-icon]::before{width:22px;height:22px}
.start-picture>svg,.start-mini svg{filter:drop-shadow(0 1px 2px var(--shadow-2))}
.start-minis{gap:14px}.start-mini{display:grid;justify-items:center;gap:8px}.start-mini.is-blank small{color:var(--accent-text)}.start-mini.is-blank svg{filter:none}
/* The colours of the pictures. */
.art-sky{fill:var(--art-sky)}.art-sun{fill:var(--art-sun)}.art-hill{fill:var(--art-hill)}.art-hill-2{fill:var(--art-hill-2)}.art-sand{fill:var(--art-sand)}
.art-skin{fill:var(--art-skin)}.art-brown{fill:var(--art-brown)}.art-wood{fill:var(--art-wood)}.art-cream{fill:var(--art-cream)}.art-pink{fill:var(--art-pink)}
.art-blue{fill:var(--art-blue)}.art-blue-soft{fill:var(--art-blue-soft)}.art-line{fill:var(--line)}.art-surface,.art-page{fill:var(--surface)}.art-dark{fill:var(--dark)}
.art-mic{fill:var(--on-accent)}.art-mic-line{fill:none;stroke:var(--on-accent);stroke-width:2;stroke-linecap:round}
.art-dashed{fill:none;stroke:var(--accent);stroke-width:1;stroke-dasharray:3 2}.art-plus{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round}
.start-dialog{width:min(1000px,calc(100% - 32px));background:var(--surface)}.templates-dialog{width:min(1000px,calc(100% - 32px));background:var(--surface)}
.start-dialog h2,.templates-dialog h2{margin:0 0 6px}.start-note{margin:16px 0 0;font-size:var(--fs-1)}
/* The templates: the mini spread of each on a light panel, its name, the chapters it makes; five in a row. */
.template-books{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:16px 0}
.template-book{display:grid;gap:6px;align-content:start;padding:10px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.template-book:hover,.template-book:focus-visible{border-color:var(--accent)}
.template-book-cover{display:flex;align-items:center;justify-content:center;height:96px;border-radius:var(--r-1);background:var(--accent-soft)}
.template-book-cover svg{filter:drop-shadow(0 1px 2px var(--shadow-2))}.template-book-cover.is-blank svg{filter:none}
.template-book-name{font-size:var(--fs-2)}.template-book-chapters{font-size:var(--fs-1);color:var(--muted);line-height:1.35}
@media(max-width:620px){.start-ways{grid-template-columns:minmax(0,1fr)}.template-books{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.empty-library{padding:20px 12px}.start-way{padding:12px}.start-picture{gap:6px;padding:10px 6px}.start-picture>svg{width:110px;height:auto}.start-tile svg{width:44px;height:auto}.start-minis{gap:4px}.start-mini svg{width:56px;height:auto}}
/* The stories on a phone and a tablet (BK-323): a compact list, every story in sight — not a row that scrolls sideways and
   hides the first story behind the edge. A line: the number, the title and what it has; a mark of the story on the right. */
@media(max-width:900px){
 .story-navigation #story-list{display:grid;gap:4px;overflow:visible;padding:0}
 .story-navigation .story-item{min-width:0;max-width:none;margin:0;display:grid;grid-template-columns:28px minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center;padding:10px 12px}
 .story-navigation .story-item .story-num{grid-column:1;grid-row:1/span 3;margin:0;width:28px;height:28px}
 .story-navigation .story-item>small,.story-navigation .story-item>strong,.story-navigation .story-item>p{grid-column:2;margin:0}
 .story-navigation .story-item>strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .story-navigation .story-item>p{line-height:1.4}
 .story-navigation .story-item .story-badge{grid-column:3;grid-row:1/span 3;margin:0;white-space:nowrap}
}
/* «Создаём книгу…» (BK-313): the window stays until the book is ready, and says what is going on. */
.create-state{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:var(--muted);font-size:var(--fs-2)}
.create-state::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--accent);border-right-color:transparent;animation:button-spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.create-state::before{animation-duration:2.4s}}

/* BK-334: the cabinet's header on a phone — «←», the name with «Сохранено» small under it, the avatar without a frame; the
   menu's items of one kind, the language two buttons. */
.lang-switch{display:none}.phone-title{display:contents}
@media(max-width:620px){
 .phone-title{display:grid;flex:1;min-width:0;gap:0}
 .phone-title .phone-section{flex:none}
 .phone-title #book-save-state{min-height:0;font-size:var(--fs-1);line-height:1.2;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .phone-title #book-save-state:empty{display:none}
 .sidebar>#back{flex:none;min-width:44px;min-height:44px;padding:0;justify-content:center;font-size:0}.sidebar>#back::before{width:22px;height:22px}
 body:has(#book-screen:not([hidden])) .sidebar .brand{display:none}
 body:has(#book-screen[hidden]) .sidebar>#back{display:none}
 .book-topline{display:none}
 /* The cabinet's own title only: the layout's page (it has studio.css too) keeps its «← название» (BK-326). */
 #book-screen #book-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 #book-language{display:none}
 .account-panel .ui-language{display:none}
 .lang-switch{display:flex;width:100%;margin:6px 0 2px}.lang-switch .segment{flex:1 1 0;min-height:44px}
 .account-panel .account-password{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin:0;padding:0 6px;border-radius:var(--r-2);justify-content:flex-start;font-weight:inherit}
 #book-screen .book-heading{margin-top:4px}
 .account-panel nav a,.account-panel nav button,.account-panel .account-password{font-size:var(--fs-3);font-weight:500;color:var(--ink);text-decoration:none}
}
/* BK-333: the book screen on a phone — the steps one line that opens their list, one «+ Добавить», short cards of the
   book and of the check, the one main button at the bottom. */
.steps-toggle,.add-any{display:none}
@media(max-width:620px){
 .steps-toggle:has(+ #progress-steps.is-steps-only){display:none!important}
 .steps-toggle{display:flex;align-items:center;gap:6px;width:100%;min-height:44px;margin:6px 0 4px;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-weight:600;text-align:left;cursor:pointer}
 #progress-steps:not(.is-steps-only){display:none}
 #progress-steps.is-open{display:grid;gap:2px;margin:0 0 10px;padding:6px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);box-shadow:0 8px 24px var(--shadow-2)}
 #progress-steps.is-open>li{border:0;background:none}
 #progress-steps.is-open .section-tab{flex-direction:row;justify-content:flex-start;gap:10px;width:100%;min-height:44px;border:0;background:none;box-shadow:none}
 #progress-steps.is-open .section-tab[aria-selected=true]{background:var(--surface-tint)}
 .story-navigation>.add-story,#part-stories .bulk-buttons{display:none}
 .add-any{display:inline-flex}
 #layout-entry>div>p:first-of-type,#check-panel>p:first-of-type{display:none}
 #layout-entry-link,#check-link{display:none}
 .out-of-book summary{color:var(--accent-text);font-weight:600}
 .share-panel .share-form{max-width:none;padding:0;border:0;background:none;box-shadow:none}
}
.add-sheet{width:min(460px,calc(100% - 24px))}.add-sheet-title{margin:0 0 8px;font-size:var(--fs-4)}
.add-sheet-list{display:grid;gap:2px;margin-bottom:8px}.add-sheet-item{align-items:flex-start}.add-sheet-words{display:grid;gap:2px}.add-sheet-words small{font-size:var(--fs-1);font-weight:400;white-space:normal}
@media(max-width:620px){.add-sheet{margin:auto 0 0;width:100%;max-width:none;border-radius:var(--r-3) var(--r-3) 0 0}}
/* BK-332: a story on a phone — the head «История 1 ⋯», the uploads of a recording and a video as lines, the text field
   without lines over it, the photos three in a row with where they stand; a press on a photo opens it. */
.story-more{display:none}.photo-open{display:none}
.story-more>summary{list-style:none}.story-more>summary::-webkit-details-marker{display:none}
.photo-menu{width:min(560px,calc(100% - 24px))}.photo-menu img{display:block;width:100%;max-height:60dvh;object-fit:contain;border-radius:var(--r-2);background:var(--bg)}
.photo-menu-name{margin:8px 0 0;font-size:var(--fs-1);color:var(--muted);overflow-wrap:anywhere}
.photo-menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.photo-menu-actions>.button-text{grid-column:1/-1}
@media(max-width:620px){
 .editor-top .eyebrow{font-size:var(--fs-3);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
 .editor-top .story-actions{display:none}
 .story-more{display:block;position:relative;margin-left:auto}
 .story-more-list{position:absolute;right:0;top:calc(100% + 4px);z-index:20;display:grid;gap:2px;min-width:210px;padding:6px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);box-shadow:0 8px 24px var(--shadow-2)}
 .upload-button.is-row{width:auto;align-self:flex-start;justify-content:flex-start;padding-inline:0}
 #story-text-hint{display:none}
 .text-section .material-heading{flex-direction:row;align-items:baseline;justify-content:space-between}
 #story-text{line-height:1.5}
 #photo-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 #photo-list .photo-card{position:relative;padding:0}
 #photo-list .photo-card :is(.replace-media,.remove-media,.photo-name,.photo-ai-line,.photo-weak){display:none}
 #photo-list .photo-card .file-status{position:absolute;left:4px;right:4px;bottom:4px;z-index:3;margin:0;padding:2px 6px;border-radius:var(--r-1);background:var(--surface);font-size:var(--fs-1);white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis}
 #photo-list .photo-card .file-status .button-link{display:none}
 .photo-open{display:block;position:absolute;inset:0;z-index:2;width:100%;height:100%;padding:0;border:0;border-radius:var(--r-2);background:none;cursor:pointer}
 .photo-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}

/* BK-338: the links of the invitations — the new one is one card («Ссылка готова», WhatsApp, «Скопировать», «⋯» →
   «Выключить»), without its address and without a second set of the same buttons; on a phone no frames in frames. */
.invite-row .status-pill{justify-self:start;margin-bottom:2px}
.invite-row.is-new{border-color:var(--accent)}
.invite-share{align-items:center}
.row-more{position:relative}.row-more>summary{list-style:none}.row-more>summary::-webkit-details-marker{display:none}
.row-more-list{position:absolute;right:0;top:calc(100% + 4px);z-index:20;display:grid;gap:2px;min-width:180px;padding:6px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);box-shadow:0 8px 24px var(--shadow-2)}
@media(max-width:620px){
 #contrib-panel{margin-top:16px;padding:0;border:0;border-radius:0;background:none}
 .invite-list{gap:0}
 .invite-row{padding:12px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none}
 .invite-row.is-new{margin:0 -10px;padding:12px 10px;border-radius:var(--r-2);background:var(--accent-soft)}
 .invite-share{display:flex;flex-wrap:wrap}
 .invite-share>a{flex:1 1 100%;justify-content:center}
 .invite-share>button{flex:1 1 auto}
 .invite-form{padding:0;border:0;background:none}
}
/* «Новая книга» на телефоне (BK-335, аудит Э06–Э08): «Как хотите начать?», «Шаблоны» и окно книги — на весь экран с шапкой
   «× Новая книга»; способ — сегмент с одной строкой; «Язык» и «Повод» той же высоты, что название; «Ещё настройки» — строка
   со стрелкой; форматы — ряд плиток; внизу одна «Создать книгу» над полоской «домой». */
@media(max-width:620px){
 :is(#book-dialog,.start-dialog,.templates-dialog){width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0 16px;border:0;border-radius:0;box-shadow:none}
 :is(#book-dialog,.start-dialog,.templates-dialog) .dialog-top{position:sticky;top:0;z-index:3;flex-wrap:nowrap;justify-content:flex-start;gap:4px;min-height:56px;margin:0 -16px;padding:0 16px 0 4px;border-bottom:1px solid var(--line);background:var(--surface)}
 #book-dialog .dialog-top{background:var(--surface-sunken)}
 :is(#book-dialog,.start-dialog,.templates-dialog) .dialog-top>.button-icon{order:-1;flex:none;width:44px;height:44px}
 :is(.start-dialog,.templates-dialog) .dialog-top .eyebrow{font-size:var(--fs-4);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
 #book-dialog .dialog-top .eyebrow{display:none}
 #book-dialog .dialog-top>h2{flex:1;min-width:0;margin:0;font:600 var(--fs-4)/1.3 var(--sans);letter-spacing:0}
 :is(.start-dialog,.templates-dialog) .dialog-top+h2{margin:16px 0 4px;font-size:var(--fs-5)}
 .templates-lead{margin:0;font-size:var(--fs-2)}
 .start-ways{margin-top:12px}.start-note{margin-bottom:16px}
 .template-books{grid-auto-rows:1fr;gap:8px}
 .template-book-cover{height:80px}
 .template-book-chapters{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
 #templates-back{margin-bottom:16px}
 #book-form{display:flex;flex-direction:column;min-height:100%}
 #book-dialog .form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
 #book-dialog :is(input:not([type=radio],[type=checkbox]),select){height:48px;font-size:var(--fs-phone)}
 #book-dialog input::placeholder,#book-dialog textarea::placeholder{font-size:var(--fs-phone)}
 #book-dialog textarea{font-size:var(--fs-phone)}
 #mode-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:14px 0 0}
 #mode-picker legend{margin-bottom:8px}
 #mode-picker .mode-option{position:relative;justify-content:center;align-items:center;min-height:44px;margin:0;padding:6px 8px;border:1px solid var(--border-strong);border-radius:0;background:var(--surface);text-align:center}
 #mode-picker .mode-option:first-of-type{border-radius:var(--r-2) 0 0 var(--r-2);border-right:0}
 #mode-picker .mode-option:last-of-type{border-radius:0 var(--r-2) var(--r-2) 0}
 #mode-picker .mode-option:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--on-accent)}
 #mode-picker .mode-option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
 #mode-picker .mode-option input{position:absolute;width:1px;height:1px;opacity:0}
 #mode-picker .mode-option strong{font-size:var(--fs-2)}
 #mode-picker .mode-option small{display:none}
 .mode-line{display:block;grid-column:1/-1;margin:8px 0 0;font-size:var(--fs-2)}
 .more-settings{margin:8px 0 0;padding:0;border:0;border-radius:0;background:none}
 .more-settings>summary{min-height:48px;padding:0;border-top:1px solid var(--line)}
 .more-settings[open]{padding-bottom:0}
 .format-choices{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
 dialog label.format-card{position:relative;flex-direction:column;justify-content:flex-start;gap:6px;padding:8px 2px;text-align:center}
 dialog .format-card input{position:absolute;width:1px;height:1px;opacity:0}
 .format-card:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
 .format-card strong{white-space:nowrap}
 .format-card small{display:none}
 .format-line{display:block;margin:8px 0 0;font-size:var(--fs-2)}
 .format-help{font-size:var(--fs-1)}
 #book-dialog .dialog-actions{bottom:0;margin:auto -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
 #book-dialog .dialog-actions .button-primary{flex:1 1 100%;margin:0}
 #cancel-book{display:none}
 #archive-zone{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* BK-337: the library — «В архив» in the «⋯» of a card, a small cover photo shown whole; on a phone the first screen is the
   books and «Создать книгу» (or, with no books yet, the two ways to start), the name of a book once, its status in words. */
.book-status-words{display:none}
.book-card .shelf-more{position:relative;z-index:2}.shelf-more>summary{list-style:none}.shelf-more>summary::-webkit-details-marker{display:none}
.shelf-more-list{position:absolute;left:0;top:calc(100% + 4px);z-index:20;display:grid;gap:2px;min-width:200px;padding:6px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);box-shadow:0 8px 24px var(--shadow-2)}
.book-cover img.is-small{object-fit:contain;background:var(--stage)}
@media(max-width:620px){
 #library-screen>.topline{display:none}
 .library-heading .eyebrow,.library-heading .lead,#how-it-works{display:none}
 #library-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .library-heading{margin:12px 0 16px}
 #library-screen:not(.has-books) .library-heading{display:block;margin:0}#library-screen:not(.has-books) #create-book{display:none}
 .empty-library{margin-top:8px;padding:0;border:0;background:none}.empty-library>.eyebrow{display:none}.empty-library h2{font-size:var(--fs-5)}
 .book-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;align-items:start}
 .book-card>.book-cover{grid-column:1/-1}
 .book-card>.book-details{grid-column:1;padding:10px 0 4px}
 .book-card>.shelf-actions{grid-column:2;grid-row:2;margin-top:4px}
 .book-card>.book-open{grid-column:1/-1}
 .book-card .shelf-more-list{left:auto;right:0}
 .book-cover.has-photo .photo-cover-title{display:none}
 .book-card .status-pill:not([data-tone]){display:none}
 .book-card .book-status-words{display:inline}.book-card .book-metadata>span:last-child{display:inline}
}
/* «Фото в рамках» без книги (BK-383): the card of a project of compositions, its way in the start and «Новая композиция». */
.frames-cover{display:grid;place-items:center;overflow:hidden;background:var(--wall)}
.frames-cover.has-photo img{width:100%;height:100%;object-fit:cover}
.frames-art{width:min(180px,70%);height:auto}.frames-art-frame{fill:var(--frame-black)}.frames-art-photo{fill:var(--surface);stroke:var(--line);stroke-width:.6}
.start-frames{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 16px;border:1px dashed var(--line);border-radius:var(--r-3);background:var(--surface)}
.start-frames .frames-art{width:96px}.start-frames strong{display:block;font-size:var(--fs-3)}.start-frames p{margin:2px 0 0;max-width:none!important}
.frames-dialog{width:min(620px,calc(100% - 32px));background:var(--surface)}
.frames-choice{display:grid;gap:14px;margin-top:10px}.frames-summary{margin:0;font-size:var(--fs-3);font-weight:600}.frames-note{margin:0;padding:10px 12px;border-radius:var(--r-2);background:var(--warning-soft)}
.frames-sources{display:grid;gap:8px;margin:0;padding:0;border:0}.frames-sources legend{margin-bottom:6px;font-weight:600}
.frames-source{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:var(--r-2);cursor:pointer}
.frames-source:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}.frames-source input{margin-top:3px}.frames-source span{display:grid;gap:2px}.frames-source small{color:var(--muted)}
.frames-actions{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:620px){.start-frames{grid-template-columns:minmax(0,1fr)}.start-frames .frames-art{width:80px}.start-frames .button-outline{justify-self:start}}