/* AITUGAN Books: the components of every page (BK-140) — button, field, status, check box. Pages link this file right
   after tokens.css; icons come from icons.css (scripts/icons.mjs). Page stylesheets may place a component (width, margin,
   order, alignment) but do not restyle it: tests/ui-components.test.mjs keeps its look here.

   Buttons: four kinds — main, secondary, text, dangerous — in two sizes, 44 px and 36 px (`button-small`; 44 on a touch
   screen anyway). An icon-only button is square (`button-icon`) and keeps its name in aria-label. States: hover, focus
   (the ring of tokens.css), pressed, disabled — a flat grey look with the reason in the label or beside it, not a
   faded button — and loading: the label stays in place, so the width does not change, and a spinner covers it. */
.button-primary,.button-outline,.button-text,.button-danger{
 position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
 min-height:44px;padding:0 16px;border:1px solid transparent;border-radius:var(--r-2);
 font:inherit;font-size:var(--fs-3);font-weight:600;line-height:1.25;text-align:center;text-decoration:none;
 cursor:pointer;opacity:1}
.button-primary{background:var(--ink);border-color:var(--ink);color:var(--on-accent)}
.button-primary:hover{background:var(--info);border-color:var(--info)}
.button-primary:active{background:var(--dark-strong);border-color:var(--dark-strong)}
.button-outline{background:var(--surface);border-color:var(--border-strong);color:var(--ink)}
.button-outline:hover{background:var(--hover)}
.button-outline:active,.button-outline[aria-expanded=true]{background:var(--stage)}
/* A button that stays on («Не трогать этот разворот», «До края листа»): the accent, so «on» is seen at once */
.button-outline[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong)}
.button-text{background:transparent;color:var(--ink);padding-inline:8px}
.button-text:hover{background:var(--hover)}
.button-text:active,.button-text[aria-pressed=true]{background:var(--stage)}
/* Removing and resetting stand apart from everyday actions (UI-16, Astra T16): the text in red, a red line */
.button-danger{background:var(--surface);border-color:var(--danger-line);color:var(--danger)}
.button-danger:hover{background:var(--danger-soft)}
.button-danger:active{background:var(--danger);border-color:var(--danger);color:var(--on-accent)}
.button-small{min-height:36px;padding-inline:12px}
.button-text.button-small{padding-inline:6px}
.button-icon{padding:0;min-width:44px}
.button-icon.button-small{min-width:36px}
/* The bar and the panels of the layout are dense: their buttons take the small size without a class */
:is(.book-bar,.book-nav,.book-panel) :is(.button-primary,.button-outline,.button-text,.button-danger){min-height:36px;padding-inline:12px}
:is(.book-bar,.book-nav,.book-panel) .button-icon{min-width:36px;padding:0}
@media (pointer:coarse){.button-small,:is(.book-bar,.book-nav,.book-panel) :is(.button-primary,.button-outline,.button-text,.button-danger){min-height:44px}.button-icon.button-small,:is(.book-bar,.book-nav,.book-panel) .button-icon{min-width:44px}}
summary:is(.button-primary,.button-outline,.button-text,.button-danger){list-style:none}
summary:is(.button-primary,.button-outline,.button-text,.button-danger)::-webkit-details-marker{display:none}
:is(.button-primary,.button-outline,.button-text,.button-danger):is(:disabled,[aria-disabled=true]){
 background:var(--surface-sunken);border-color:var(--line-soft);color:var(--muted);cursor:not-allowed;opacity:1}
.button-text:is(:disabled,[aria-disabled=true]){background:transparent;border-color:transparent}
label:is(.button-outline,.button-primary):has(input:disabled){background:var(--surface-sunken);border-color:var(--line-soft);color:var(--muted);cursor:not-allowed}
/* A file input inside a label-button is hidden; the label takes the focus ring */
label:is(.button-outline,.button-primary):focus-within{outline:3px solid var(--focus);outline-offset:2px}
.is-loading{color:transparent!important;cursor:progress!important}
.is-loading::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border-radius:50%;
 border:2px solid var(--ink);border-right-color:transparent;background:none;-webkit-mask:none;mask:none;animation:button-spin .8s linear infinite}
.button-primary.is-loading::after{border-color:var(--on-accent);border-right-color:transparent}
.is-loading::before{visibility:hidden}
@keyframes button-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.is-loading::after{animation-duration:2.4s}}
@media (prefers-reduced-motion:no-preference){:is(.button-primary,.button-outline,.button-text,.button-danger){transition:background-color .15s,border-color .15s,color .15s}}
/* On a phone (BK-320): three kinds that look apart — the main one dark, the secondary light with a thin line of the
   colour of the lines, a lighter weight; an icon is a sign without a frame. The place to press stays 44 px. */
@media (max-width:620px){
 .button-outline{border-color:var(--line);font-weight:500}
 .button-text{font-weight:500}
 :is(.button-outline,.button-text).button-icon:not([aria-pressed=true]):not([aria-expanded=true]){border-color:transparent;background:transparent}
 :is(.button-outline,.button-text).button-icon:is(:disabled,[aria-disabled=true]){border-color:transparent;background:transparent}
 :is(.button-outline,.button-text).button-icon:not(:disabled):active{background:var(--hover)}
}
/* On a dark surface (the photo viewer, the undo message) the secondary and the text kinds turn light */
.on-dark :is(.button-outline,.button-text){background:transparent;border-color:var(--muted);color:var(--on-accent)}
.on-dark .button-text{border-color:transparent}
.on-dark :is(.button-outline,.button-text):hover{background:var(--scrim)}
/* A button inside a sentence reads as a link */
.button-link{display:inline;min-height:0;padding:0;border:0;background:none;color:var(--accent-text);font:inherit;font-weight:600;
 text-align:left;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.button-link:hover{color:var(--accent-strong)}
.button-link:disabled{color:var(--muted);text-decoration:none;cursor:not-allowed}

/* Items of a menu («⋯»): a row of the width of the menu; a dangerous item in red */
.menu-item{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:8px 12px;border:0;border-radius:var(--r-2);
 background:none;color:var(--ink);font:inherit;font-size:var(--fs-3);font-weight:600;text-align:left;text-decoration:none;cursor:pointer}
.menu-item:hover{background:var(--hover)}
/* On a phone (BK-331) the items of a menu are in the weight of the text: the menu is a list, not a row of headings. */
/* BK-319, редакция 2 (BK-389): a line of a menu on a phone is 56 high, 12/16 inside, its icon 24 and 12 to the words;
   a long label wraps and the line grows. */
@media(max-width:900px){.menu-item{gap:12px;min-height:56px;padding:12px 16px;font-weight:400}.menu-item[data-icon]::before{flex:none;width:24px;height:24px}}
.menu-item.is-danger{color:var(--danger)}
/* A way that is not open here says why when pressed (feedback 04.11): shown muted. */
.menu-item[aria-disabled=true]{opacity:.6}
.menu-item[aria-pressed=true]{background:var(--surface-tint)}
.menu-item[aria-current=true]{background:var(--surface-tint);font-weight:700}
.menu-item:is(:disabled,[aria-disabled=true]){color:var(--muted);background:none;cursor:not-allowed}
@media (pointer:coarse) and (min-width:901px){.menu-item{min-height:44px}}
/* A group of a menu (BK-385, Э34): a card of lines, a thin rule between them, no corners of their own. */
.menu-group{display:grid;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface);overflow:hidden}
.menu-group>.menu-item{border-radius:0}.menu-group>.menu-item+.menu-item{border-top:1px solid var(--line-soft)}

/* Segments: one choice of two or three side by side («К сгибу | К краю»); the chosen one is dark */
.segmented{display:inline-flex;max-width:100%;border:1px solid var(--border-strong);border-radius:var(--r-2);overflow:hidden;background:var(--surface)}
.segment{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1 1 auto;min-height:36px;padding:0 12px;border:0;border-left:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-size:var(--fs-3);font-weight:600;cursor:pointer}
.segment:first-child{border-left:0}
.segment:hover{background:var(--hover)}
.segment[aria-pressed=true]{background:var(--ink);color:var(--on-accent)}
.segment:disabled{background:var(--surface-sunken);color:var(--muted);cursor:not-allowed}
@media (pointer:coarse){.segment{min-height:44px}}

/* Status: a pill without a border or a pointer, so it does not look like a button (UI-16, Astra T16) */
.status-pill{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 10px;border-radius:var(--r-round);
 background:var(--surface-tint);color:var(--text-2);font-size:var(--fs-2);font-weight:600;line-height:1.3;white-space:nowrap;cursor:default}
.status-pill[data-tone=ok]{background:var(--success-soft);color:var(--success)}
.status-pill[data-tone=warn]{background:var(--warning-soft);color:var(--warning)}
.status-pill[data-tone=danger]{background:var(--danger-soft);color:var(--danger)}
.status-pill[data-tone=accent]{background:var(--accent-soft);color:var(--accent-strong)}
.status-pill[data-icon]::before{width:16px;height:16px}

/* Field: the label above, the hint below, an error in place of the hint (UI-18, UI-21, Astra T17). A placeholder is
   only an example: what to write is said by the label and the hint. */
.field{display:grid;gap:6px;min-width:0}
.field-label{font-size:var(--fs-2);font-weight:600;color:var(--ink)}
.field>:is(input:not([type=checkbox]):not([type=radio]),textarea,select){width:100%;min-width:0;min-height:44px;padding:8px 12px;border:1px solid var(--border-strong);border-radius:var(--r-2);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-3)}
.field>textarea{resize:vertical}
.field-hint,.field-error{margin:0;font-size:var(--fs-2);line-height:1.4;color:var(--muted)}
.field-error{color:var(--danger)}
.field-error:empty{display:none}
.field:has(.field-error:not(:empty)) .field-hint{display:none}
.field:has(.field-error:not(:empty)) :is(input,textarea,select){border-color:var(--danger)}

/* Check boxes and radio buttons: 20 px, in a row of 44 px (UI-20, UI-31) */
input[type=checkbox],input[type=radio]{width:20px;height:20px;margin:0;flex:none;accent-color:var(--ink);cursor:pointer}
/* A label with a box in it is a row of 44 px (36 in the dense panels of the layout, 44 there too on a touch screen) */
label:has(> input:is([type=checkbox],[type=radio])){min-height:44px}
:is(.book-bar,.book-nav,.book-panel) label:has(> input:is([type=checkbox],[type=radio])){min-height:36px}
@media (pointer:coarse){:is(.book-bar,.book-nav,.book-panel) label:has(> input:is([type=checkbox],[type=radio])){min-height:44px}}

/* The audio player (audio-player.js): a round 44 px button with its name, a seek bar and the time. The QR page has the same
   player, large (72 px), in its own style. Without the script the browser's own player stays. */
.audio-player{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 12px;width:100%;min-width:0}
.audio-player audio{grid-column:1/-1;width:100%}
.audio-player.is-ready audio{display:none}
.audio-play{display:none;align-items:center;gap:8px;min-height:44px;padding:0 6px 0 0;border:0;border-radius:var(--r-round);background:none;color:var(--ink);font:inherit;font-size:var(--fs-3);font-weight:600;cursor:pointer}
.is-ready .audio-play{display:inline-flex}
.audio-play svg{display:none;box-sizing:content-box;width:20px;height:20px;padding:12px;border-radius:50%;background:var(--ink);fill:var(--on-accent)}
.audio-player:not(.is-playing) .audio-icon-play,.audio-player.is-playing .audio-icon-pause{display:block}
.audio-play:hover svg{background:var(--info)}
.audio-seek{display:none;width:100%;min-width:0;margin:0;accent-color:var(--accent-text)}
.is-ready .audio-seek{display:block}
.audio-time{font-size:var(--fs-2);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.audio-failed{grid-column:1/-1;margin:0;color:var(--danger);font-size:var(--fs-2)}