/* AITUGAN Books: quick UI fixes from the UI audit of 14.10.2026 (UI-аудит в эпике BK-126 «Улучшение UI/UX»).
   Load after studio.css and spreads-view.css (studio.html, spreads.html), or merge rule by rule. UI-xx = finding in the audit.
   Some selectors are doubled (.a.a) or wrapped in :is() on purpose: they must beat contextual rules such as
   «.book-heading .button-outline» or «.photo-card .replace-media» that shrink text on phones.
   The guest page, login and the QR page do not load studio.css: they take ui-quickfix-pages.css. */

/* Tokens: teal that passes on small text, borders you can see, one focus colour (UI-10, UI-11, UI-12) */
:root{
 color-scheme:only light;  /* UI-14: the browser must not force-darken the book preview */
 accent-color:var(--ink);     /* UI-20: radios, checkboxes and progress in the brand ink, not browser blue */
}
:is(a,button,input,select,textarea,summary,audio,video,[tabindex]:not([tabindex="-1"])):focus-visible,
.upload-button:focus-within,.photo-add:focus-within{outline:3px solid var(--focus);outline-offset:2px}

/* Text: nothing below 12px, secondary text in --muted (UI-05, UI-06, UI-09, UI-11) */
.eyebrow,.story-help>.eyebrow{font-size:var(--fs-1);letter-spacing:.08em}
.story-item small{font-size:var(--fs-1);letter-spacing:.06em}
.story-item p,.story-help>p,.material-heading p,.audio-card-head p{font-size:var(--fs-2)}
.field-title,.book-topline>span{font-size:var(--fs-2)}
.material-heading h3{font-size:var(--fs-3)}
.progress-steps li{font-size:var(--fs-2);color:var(--muted)}
.progress-steps li>span{font-size:var(--fs-1)}
.studio-footer{font-size:var(--fs-1);color:var(--muted)}
.side-caption,.photo-card p{font-size:var(--fs-1)}
.topline.topline,.book-metadata.book-metadata,.book-metadata .status,.section-caption>span,.account.account,.account strong,
.loose-materials>p,.texts-modes legend,.texts-modes small,.photo-add small{font-size:var(--fs-1)}
.qr-option{font-size:var(--fs-3)}.qr-option small{font-size:var(--fs-2)}

dialog label,.style-picker legend{font-size:var(--fs-2)}                                   /* «Новая книга» */
.style-picker small,.style-picker em,#identity{font-size:var(--fs-1)}
::placeholder{color:var(--muted)!important;opacity:1}






.shelf-tabs button{font-size:var(--fs-3)}




/* Fields: a border that passes 3:1 wherever a field already has one (UI-12) */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{border-color:var(--border-strong)}
select{background-color:var(--surface)} /* a select with its own border loses the native look in Chrome and turns grey */

/* Phone: 16px fields (no iPhone zoom), 44px targets, no squeezed columns (UI-08, UI-24, UI-31) */
@media (pointer:coarse),(max-width:620px){
 body{font-size:var(--fs-phone)}
 :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not(.story-title-input),select,textarea:not(#story-text)){font-size:var(--fs-phone)}
 .story-voice,.details-kind select,.skeleton-scenario select{min-height:44px}
 
 
  /* spreads-view.css fixes them at 38px by id */
 .progress-steps li{font-size:var(--fs-1);gap:6px}
 .material-heading{flex-direction:column;align-items:stretch}
 .material-heading .upload-button{justify-content:center}
 .details-kind,.details-kind select,.skeleton-scenario select{width:100%;min-width:0}
 #layout-entry+#chapters{margin-top:16px}
 .story-ai-actions{display:grid;grid-template-columns:1fr 1fr} /* UI-26: equal buttons instead of a ragged row */
 .story-ai-actions button{width:100%}
}

/* Layout editor (spreads.html) */
/* UI-27: side panels stick under the real height of the bar. Needs one line in spreads.js:
   new ResizeObserver(([e])=>document.documentElement.style.setProperty('--bar-h',e.target.offsetHeight+'px')).observe(document.querySelector('.book-bar')); */
@media (min-width:901px){.book-nav,.book-panel{top:var(--bar-h);max-height:calc(100vh - var(--bar-h))}} /* up to 900px the panels are static (spreads-view.css) */
.nav-item{font-size:var(--fs-2);padding:8px}
.nav-number,.nav-part,.spreads-summary,.caption-hint,.place-state,.move-photo .move-label{font-size:var(--fs-3)}
.approval-badge{font-size:var(--fs-1);padding-inline:8px} /* 12px with 3px less padding keeps the bar width (UI-27, UI-32) */
.view-modes button,.zoom button,.panel-tabs button,.guides-toggle{font-size:var(--fs-3)}
.guides-toggle input,.photo-tool input[type=checkbox]:not(.switch){width:20px;height:20px}


@media (pointer:coarse),(max-width:620px){:is(.book-nav,.book-panel,.book-bar) :is(button,a,select,summary,.nav-item){min-height:44px}}

/* Bulk upload dialog: 44px buttons made the footer two rows taller and it covered the photos; main and secondary in one row */
.bulk-foot .bulk-state{flex:1 1 100%;margin:0}
.bulk-foot .button-primary.button-primary{width:auto;flex:1 1 260px;margin:0}

/* Layout check, «Материалы книги»: the 14px action went beside a 300px panel's text and squeezed it; it goes under the text */
.material{flex-wrap:wrap}
.material>.button-text{flex:1 0 calc(100% - 50px);justify-content:flex-start;text-align:left;margin-left:50px}