/* 2.21 operator styles. styles.css stays byte-identical (it is hashed into the admin namespace), so every
   tablet change lives here, loaded after it.
   Type scale (Piotr, 13.10): only sizes that already exist in 2.20.1, at most three per screen or dialog, emphasis
   by weight only:
     content  = var(--text-label)   18 px landscape · 20 px portrait (dialog text, labels, list lines)
     control  = var(--text-control) 24 px (titles, buttons, chips, inputs)
     large    = 2rem                32 px (only the element line in the close dialog; 2.20.1 uses 2rem for numbers)
   Buttons: every new or changed 2.21 button is 72 px high (4.5rem, ≈ 13 mm on the Tab A11+; 2.20.1 already uses
   4.5rem for the summary buttons) with control-size text and .25rem 1rem padding, so two lines still fit in 72 px;
   buttons in one row share equal columns, 2rem apart. The top bar keeps its 2.20.1 buttons (44 px, meta-size text).
   1 CSS px ≈ 0.185 mm on the Tab A11+ (1920×1200 at 1.5×). */
:root { --button-221:4.5rem;--row-gap-221:2rem; }
/* Keep the dialog sizes when the on-screen keyboard shortens the page (styles.css switches tokens by height). */
@media (min-width:700px) and (orientation:portrait) {
  #confirm-dialog.uniform-dialog,#cancel-dialog,#correction-dialog,#route-dialog { --text-label:1.25rem;--text-control:1.5rem; }
}
@media (min-width:1100px) and (orientation:landscape) {
  #confirm-dialog.uniform-dialog,#cancel-dialog,#correction-dialog,#route-dialog { --text-label:1.125rem;--text-control:1.5rem; }
}

/* --- One 2.21 button: 72 px, control-size text --------------------------------------------------------- */
.change-element-button,.route-card-button,.repeat-options .button,
#confirm-dialog.uniform-dialog .dialog-actions .button,#cancel-dialog .dialog-actions .button,#correction-dialog .dialog-actions .button,#route-dialog .dialog-actions .button,
#summary-view .correct-element-button,#select-close,.register-batches .button {
  min-width:0;min-height:var(--button-221);padding:.25rem 1rem;font-size:var(--text-control);font-weight:700;line-height:1.2;
}
/* One row of equal buttons (hidden ones drop out), the same in every 2.21 dialog. */
#confirm-dialog.uniform-dialog .dialog-actions,#cancel-dialog .dialog-actions,#correction-dialog .dialog-actions,#route-dialog .dialog-actions {
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--row-gap-221);
}
#confirm-dialog.uniform-dialog .dialog-actions .button,#cancel-dialog .dialog-actions .button,#correction-dialog .dialog-actions .button,#route-dialog .dialog-actions .button { width:100%; }

/* --- Picker: the same two sizes as the dialogs; the chosen value and long names wrap ---------------------- */
.select-trigger { height:auto;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.25; }
dialog.select-dialog .picker-heading h2 { font-size:var(--text-control); }
dialog.select-dialog .picker-search-label { font-size:var(--text-label); }
dialog.select-dialog .picker-search-label input { font-size:var(--text-control); }
.picker-option { width:100%;min-height:var(--button-221);padding:.25rem 1.5rem;white-space:normal;overflow-wrap:anywhere;font-size:var(--text-control);line-height:1.2; }
.picker-group { position:sticky;top:0;z-index:1;margin:0 !important;padding:.5rem 1.5rem;background:#edf2f5;color:var(--ink);font-size:var(--text-label);font-weight:700;border-bottom:1px solid #c8d6dc; }
#select-message:not(:empty) { margin:0;font-size:var(--text-label);line-height:1.4;overflow-wrap:anywhere; }

/* --- Counter header: product and part in the h1 size, the part bold; "Zmień element" beside them ---------- */
.batch-strip>.batch-title { flex:1 1 auto;min-width:0; }
.batch-strip h1 .strip-product { font-weight:400; }
.batch-strip h1 .strip-part { font-weight:700; }
.change-element-button { flex:none;padding-inline:1.25rem;white-space:nowrap; }
@media (max-width:650px) { .change-element-button,.route-card-button { order:3;width:100%; } }
/* 2.22 przewodnik button (open fv8 pallet, not Poprawkowa): "Komora S14" / "cykl 12" on two lines in the 72 px
   height, or one word ("Zakup"). It takes its own column between the tags and "Zmień element", so the tag column
   keeps 2 lines in portrait (TABLET-SPEC §8.3); pallets without it keep the 2.21 grid. */
.route-card-button { flex:none;flex-direction:column;gap:0; }
.route-card-button>span { display:block;white-space:nowrap; }
/* Counter header (Piotr, 13.10), two rows: the name left and the people right, top-aligned on the first row; the
   tags left (at most two lines) and "Zmień element" right on the second. The title spans into the middle column,
   so the people's column takes only their own width and a long name keeps the room the button does not need.
   Two lines of tags are exactly as tall as "Zmień element" (2 × 33 px + 6 px = 72 px), so the button's top and
   bottom line up with the tags; one line (landscape) sits centred beside the 72 px button, and more lines stretch
   the button with them. Counter only: the summary keeps the 2.20.1 strip. */
.crew-name { display:block; }
@media (min-width:600px) {
  #counter-view .batch-strip { display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"title title crew" "meta change change";align-items:start;gap:.25rem 1rem; }
  #counter-view .batch-strip>.batch-title { display:contents; }
  #counter-view .batch-strip h1 { grid-area:title; }
  #counter-view .batch-meta { grid-area:meta;align-self:center;margin-top:0;gap:.375rem; }
  #counter-view .batch-meta .tag { display:inline-flex;align-items:center;min-height:calc((var(--button-221) - .375rem) / 2);padding-block:0;line-height:1.25; }
  #counter-view .crew-names { grid-area:crew;max-width:none; }
  #counter-view .change-element-button { grid-area:change;justify-self:end;align-self:stretch; }
  #counter-view .batch-strip.with-route { grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"title title title crew" "meta route change change"; }
  #counter-view .route-card-button { grid-area:route;justify-self:end;align-self:stretch; }
}
/* Landscape has the width: the people on one line ("A · B"), so the first row is only as tall as the name. */
@media (min-width:600px) and (orientation:landscape) {
  #counter-view .crew-names { display:flex;flex-wrap:wrap;justify-content:flex-end;column-gap:.375rem; }
  #counter-view .crew-name+.crew-name::before { content:"·";margin-right:.375rem; }
}
/* Portrait tablets: the OK row and the result tiles (all --feedback-tile high) take the height the rest of the
   counter leaves, within the 2.20.1 bounds. 42.25rem (676 px) = everything on the counter except the OK row and
   four tile rows (top bar, two-row header, cards, group headings, footer, version line) plus an ~8 px margin, so the
   counter never scrolls: 120.8 px at 1280 (2.20.1: 128), and the margin holds on shorter portrait screens down to
   the 6.5rem floor. Edited lists share the same budget (8 px gap per row beyond four). */
@media (min-width:700px) and (min-height:1100px) and (orientation:portrait) {
  .feedback-counter { --feedback-tile:clamp(6.5rem,calc((100dvh - 42.25rem) / 5),8.5rem); }
  .feedback-counter.flex-results { --feedback-tile:clamp(4.5rem,calc((100dvh - 40.25rem - var(--portrait-rows) * .5rem) / (var(--portrait-rows) + 1)),8.5rem); }
}

/* --- Top bar: "Anuluj partię" (open pallet's counter only) and "Wyczyść" (form only) are the 2.20.1 top-bar button
   (Piotr, 13.10: the height of "Stanowisko" and "Partie"), so the bar keeps its 2.20.1 height (56 px). "Anuluj
   partię" is bold like the nav buttons and stands out only by its red outline. ----------------------------------- */
#reset-batch { white-space:nowrap;border-color:#687e89; }
#reset-batch[data-mode="cancel"] { padding-inline:1rem;border:2px solid #e9a0a6;border-radius:var(--radius);color:#ffe1e3;font-weight:700; }
#reset-batch[data-mode="cancel"]:hover:not(:disabled) { background:#ffffff14;color:#fff; }
#reset-batch[hidden] { display:none; }
.button.danger { background:#a32630;border-color:#86202a;color:#fff; }

/* --- 2.21 dialogs: title · content lines in one size · one row of equal buttons ---------------------------- */
#confirm-dialog.uniform-dialog,dialog.cancel-dialog,dialog.correction-dialog,dialog.route-dialog { max-width:780px; }
#confirm-dialog.uniform-dialog .dialog-actions,#cancel-dialog .dialog-actions,#correction-dialog .dialog-actions,#route-dialog .dialog-actions { flex-wrap:nowrap; }
/* Close dialog: "PRODUKT A – **czoła** · Biały (white)", one line in the large size, neutral border. */
.confirm-element { display:flex;flex-direction:column;gap:.25rem;margin-top:var(--space);padding:.625rem 1rem;border:2px solid var(--line);border-radius:var(--radius);font-size:2rem;line-height:1.25; }
.confirm-element-name { overflow-wrap:anywhere; }
.confirm-element-colour { font-size:var(--text-control);font-weight:400;line-height:1.25; }
.confirm-element strong { font-weight:700; }
/* The counts sentence keeps its numbers bold, in the content size (2.20.1 made them 1.5em). */
#confirm-dialog.uniform-dialog #confirm-description .confirmation-quantity { font-size:inherit;font-weight:700; }
/* Change confirmation: "Było: …" / "Będzie: …" (bold), content size, no box. */
.change-lines { margin-top:var(--space);font-size:var(--text-label);line-height:1.5;overflow-wrap:anywhere; }
.change-lines .change-line { display:block;font-weight:400; }
.change-lines strong.change-line { font-weight:700; }
/* On-screen keyboard (adjustResize): the action row stays on screen while the dialog scrolls. */
#confirm-dialog.close-confirm .dialog-actions,#cancel-dialog .dialog-actions,#route-dialog .dialog-actions { position:sticky;bottom:0;z-index:1;padding-top:.75rem;background:#fff;box-shadow:0 var(--space) 0 #fff,0 -1px 0 var(--line); }
@media (min-width:600px) and (max-height:539.98px) {
  #cancel-dialog,#confirm-dialog,#route-dialog { --space:1rem;--gap:.5rem;max-height:calc(100dvh - 24px);overflow:auto; }
}

/* Cancel dialog: reason chips in two equal columns, nothing preselected; one warning line when pieces exist. */
.cancel-batch { overflow-wrap:anywhere; }
.cancel-reasons { margin-top:var(--space); }
.cancel-reasons legend { margin-bottom:.5rem; }
.reason-chips { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1rem; }
.reason-chip { position:relative;min-width:0; }
.reason-chip input { position:absolute;width:1px;height:1px;margin:0;opacity:0; }
.reason-chip span { display:flex;align-items:center;justify-content:center;height:100%;min-height:var(--button-221);padding:.25rem .75rem;border:2px solid #b9c9d1;border-radius:var(--radius);background:#f7f9fa;font-size:var(--text-control);font-weight:700;line-height:1.2;text-align:center;cursor:pointer; }
.reason-chip input:checked+span { background:var(--ink);border-color:var(--ink);color:#fff; }
.reason-chip input:focus-visible+span { outline:4px solid #2276bd;outline-offset:3px; }
.cancel-note { margin-top:var(--space); }
.cancel-pieces { font-weight:700; }

/* „Przewodnik” dialog: two equal options (Standardowa · Zakup, 29.10) in the reason-chip size, then Komora · Cykl and
   „Brak przewodnika”, or Zakup. */
#route-dialog .route-choices { grid-template-columns:repeat(2,minmax(0,1fr)); }
#route-dialog .route-choices span { min-height:var(--button-221);padding:.25rem .75rem;line-height:1.2;text-align:center; }
#route-dialog .route-fields { margin-top:var(--space); }

/* "Zły element?" guidance: the line to read to the brygadzistka in bold. */
#correction-batch { font-weight:700;overflow-wrap:anywhere; }

/* --- Summary: "Zły element?" at the end of the heading row; a cancelled pallet reads as not counted -------- */
#summary-view .summary-top .correct-element-button { margin-left:auto;padding-inline:1.25rem;white-space:nowrap; }
.summary-panel.cancelled .metric { border-bottom-color:var(--line); }
.summary-panel.cancelled .metric strong { color:var(--muted);font-weight:400; }

/* --- Partie and Podsumowanie materiałów ------------------------------------------------------------------- */
/* Partie cards (Piotr, 13.10: "still slightly messy"): two sizes only, the element and the count in the control size
   (24 px), everything else in the content size; no label words. Three independent rows (flex lines, so a long
   status chip never narrows the line below it), 8 px apart via the two empty break items:
     element ·························· status chip
     colour · people · zmieniono ······· 609 / 609 szt.
     06:03–09:59 ······················· [Wynik →]
   The chip is grey, and red in the Braki tile tones for "Przerwana · <powód>" (also on the register's cancelled
   rows); a cancelled pallet's count is grey, as it is never counted. */
.history-card { display:flex;flex-wrap:wrap;align-items:center;gap:0 1.5rem;padding:1rem 1.25rem; }
.history-card::before,.history-card::after { content:"";flex-basis:100%;height:.5rem; }
.history-card h2 { order:1;flex:1 1 0;min-width:0;margin:0;font-size:var(--text-control);line-height:1.25;overflow-wrap:anywhere; }
.history-card .history-state { order:2;flex:none;max-width:60%; }
.history-card::before { order:3; }
.history-card .history-material { order:4;flex:1 1 0;min-width:0;margin:0;color:var(--ink);font-size:var(--text-label);line-height:1.4;overflow-wrap:anywhere; }
.history-card .history-quantity { order:5;flex:none; }
.history-card::after { order:6; }
.history-card .history-times { order:7;flex:1 1 0;min-width:0;margin:0;gap:.25rem 1rem;font-size:var(--text-label);color:var(--muted); }
.history-card>.button { order:8;flex:none;min-width:8rem;min-height:3rem;padding:.5rem 1rem;font-size:var(--text-label); }
/* DECISIONS-v4 §C: a drying pallet's "Komora S14 · cykl 12" — the bordered bold neutral box on its own line under the element (the line after
   the row break; Zakup / Poprawkowa / Brak stay in the colour line). The closed pallet's summary tag is the same box, drawn with an inset
   line so it keeps the tag's size. No new text size. */
.history-card .history-route { order:3;flex-basis:100%;margin:0 0 .375rem;font-size:var(--text-label);line-height:1.3; }
.history-route .route-box { display:inline-block;padding:.125rem .5rem;border:1px solid #6f7f88;border-radius:.375rem;color:var(--ink);font-weight:700;white-space:nowrap; }
.batch-meta .tag.route-box { background:transparent;box-shadow:inset 0 0 0 1px #6f7f88;color:var(--ink);white-space:nowrap; }
.history-state { padding:.25rem .75rem;border:1px solid transparent;border-radius:.5rem;background:#edf2f5;color:var(--muted);font-size:var(--text-label);font-weight:400;line-height:1.25;white-space:normal;text-align:right; }
.history-state.cancelled { background:#f4d7da;border-color:#dca2a7;color:#84212a; }
.history-quantity { white-space:nowrap;font-size:var(--text-label);color:var(--muted);font-variant-numeric:tabular-nums; }
.history-quantity strong { color:var(--ink);font-size:var(--text-control);line-height:1.2; }
.history-quantity>span { display:inline;font-size:inherit;color:inherit; }
.history-quantity.not-counted strong { color:var(--muted);font-weight:400; }
.register-batches .button { justify-content:flex-start;text-align:left;overflow-wrap:anywhere; }
/* A cancelled row's chip and arrow move to a second line together rather than break the element line. */
.register-cancelled .register-batches .button { flex-wrap:wrap;gap:.375rem .75rem; }
.register-batches .history-state { flex:none; }
.register-cancelled { margin-top:1rem; }
.register-cancelled>p { margin:0 0 .5rem;font-size:1.125rem;color:var(--muted); }
/* Counter footer: the same 72 px / control-size buttons as every 2.21 dialog (Piotr, 13.10: large, consistent buttons).
   operator.css loads after styles.css, so these equal-specificity rules win over its per-screen footer sizes. */
.counter-footer .button,.counter-footer .mismatch-button { min-height:var(--button-221);padding:.25rem 1rem;font-size:var(--text-control);font-weight:700;line-height:1.2;white-space:normal; }
.counter-footer .mismatch-button { border:2px solid #b9c9d1;border-radius:var(--radius);background:var(--surface);color:var(--ink); }
.counter-footer .mismatch-button:disabled { color:var(--muted); }
/* Counter fit with the 72 px footer: the counter never scrolls, version line included (the longest live name at
   800×1280 and 1280×800). Only gaps around non-touch parts get tighter; tiles and buttons keep their sizes, and
   touch targets stay at least 8 px apart: strip −4, group padding −8 per row, group heading −2 per row, footer −4. */
@media (min-width:600px) and (min-height:540px) {
  #counter-view .batch-strip { margin-bottom:.5rem; }
  #counter-view .feedback-counter .result-group { padding-block:0; }
  #counter-view .feedback-counter .group-heading { margin-bottom:.25rem; }
  #counter-view .feedback-counter .counter-footer { margin-top:.5rem; }
}

/* --- 2.22 start form: 1 · Przewodnik → 2 · Partia → 3 · Obsada (TABLET-SPEC §2–§4) ---------------------------
   Three text sizes on the panel: control (title, options, inputs, the 72 px repeat buttons), content (labels and
   the step dots) and the small "Naliczanie OK" line. The three przewodnik options (Standardowa · Poprawkowa · Zakup,
   Piotr 29.10): one row from 600 px; Zakup is dimmed (no text) when the list has no active Zakup. Step 2 in landscape:
   Element · Ilość on one row, Kolor · Mikrowczepy · UV on the next. */
.step-dots { font-size:var(--text-label); }
.route-choices { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap); }
.route-choices input:disabled+span { opacity:.4;cursor:default; }
@media (min-width:600px) {
  #route-step .route-choices { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:900px) and (orientation:landscape) {
  #parameters-step>#colour-field { grid-column:span 2; }
}
/* „Brak przewodnika” (29.10): a 72 px secondary button under Komora · Cykl, start-aligned; pressed, it is filled like a chosen
   option. Without an active komora it stays pressed and dimmed. */
.no-route-field { display:flex; }
.no-route-button { min-width:16rem;min-height:var(--button-221);padding:.25rem 1.5rem;font-size:var(--text-control);font-weight:700;line-height:1.2; }
.no-route-button[aria-pressed="true"] { background:var(--ink);border-color:var(--ink);color:#fff; }
.no-route-button:disabled { opacity:.6;cursor:default; }