/* Parity finding 157: palette, font and semantic-status tokens ported
   verbatim from the old system (leoprint-platform@0fe3d84
   app/static/css/lp.css:1-35, Outfit import base.html:17). Warm gold
   replaces the ad-hoc orange; --brand/--brand-dark keep this codebase's
   variable names so every existing rule that already consumes them is
   reskinned for free, but in dark mode both now resolve to the same
   brighter gold the old system swaps to for legibility on near-black
   surfaces (lp.css:20-35), rather than carrying two divergent hues.
   Light is the default theme; the topbar switch stamps data-theme="dark"
   on <html> (persisted in localStorage) and these variables restyle the
   whole site. */
:root {
  color-scheme: light;
  font-family: Outfit, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --brand: #9a6e1a;
  --brand-dark: #7d5b15;
  --brand-tint: #f5e6c4;
  --surface: #ffffff;
  --bg: #f5f5f3;
  --line: rgb(0 0 0 / 8%);
  --line-strong: rgb(0 0 0 / 16%);
  --muted: #5f5f5a;
  /* K-8094: a form field's caption, darker than --muted (mockup `.fl label`). */
  --label-text: #3a3a36;
  --text: #1a1a1a;
  --rail-bg: #ebebe8;
  --panel-bg: #ffffff;
  --success: #2e7d32;
  --success-bg: #e6f4ea;
  --warning: #9a6e1a;
  --warning-bg: #faf0d2;
  --danger: #c0392b;
  --danger-bg: #fbe9e7;
  --info: #2c6e9b;
  --info-bg: #e7f0f7;
  /* K-5927 (NCR design N1): the one new hue the NCR mockups carry -- the
     "Vykdoma" (actions in progress) status, between info blue and success
     green (saltiniai/ncr-maketai/README.md `s-vyk`). */
  --teal: #1f6b63;
  --teal-bg: #e3f1ef;
  --radius-lg: 12px;

  /* WORK QUEUE package 2 (owner review 2026-08-02): "typography has no
     defined scale ... roughly four font sizes plus arbitrary bold/not-bold
     with no rule." Finding 185 matched individual VALUES (button padding,
     input height) but never named a hierarchy, so each new rule picked its
     own number. One ordered scale, applied from this single place, per the
     old system (leoprint-platform@0fe3d84 lp.css / docs/reference/
     senoji-lp.css): L1 and L2 nav item text are both 13px (.lp-l1-item,
     .lp-l2-item carry no separate font-size rule of their own — both
     inherit the body's 13px); tab labels are 14px/500 (.lp-tab); section
     titles are 14px/600 (.lp-section-title); field labels are 11px,
     uppercase, and explicitly NOT bold (.lp-field > span, no font-weight
     declared); field values (inputs/selects, already 13px since finding
     185) share the 13px step with L1/L2. Record: docs/architecture/
     p13-visual-parity.md. */
  --fs-nav-l1: 0.8125rem;
  --fs-nav-l2: 0.8125rem;
  --fs-tab-label: 0.875rem;
  --fs-section-title: 0.875rem;
  --fs-field-label: 0.6875rem;
  --fs-field-value: 0.8125rem;
  /* K-5927 (NCR design N1): the mockups' 14px control text -- buttons and
     table cells. */
  --fs-control: 0.875rem;

  /* Component gallery (§0 RULE 4): the three radius values already in
     repeated use (999px for pills/badges, 8px for cards/panels, 6px for
     buttons/inputs) named so new rules can reference one place instead of
     retyping a literal. The deferred sweep this comment used to point at
     is done (see docs/architecture/p13-visual-parity.md): every pre-existing
     declaration whose literal exactly matched one of these three values now
     references the token instead. What is deliberately left as a raw
     literal: border-radius: 50% (a circle shape, not a step on this scale),
     border-radius: 0 (explicitly no radius, not a missing token), and the
     values that do not match any step here (10px, 2px, 3px, 4px, 0.65rem) —
     each would need a judgment call on whether it is a missing fourth token
     or a legitimate one-off, which this pass deliberately did not guess at. */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-pill: 999px;

  /* UI_KANONAS_v1.md §1/§2 (coordinator, 51-screen geometry measurement,
     2026-08-12, `koordinatoriaus-nota-w1-ui-pluostas.md`): the ONLY allowed
     spacing scale (8/16/24/32/48/64 — every other value the measurement
     found, e.g. 12/20/36/52/60/68/76/84/100/132/140/148/156, rounds to the
     nearest step here) and the one control-height constant every input,
     select and button shares. Named `--space-N` where N = px/4, so the
     canon's own two worked examples (`--space-2`/`--space-4`) land on 8px/
     16px exactly and the remaining four steps follow the same formula
     rather than inventing separate names for them. Nothing consumes these
     yet in this package — §4's field-width classes below are the first
     consumers; migrating existing hand-written spacing to reference these
     is each screen's own worker's job as they touch that screen (the
     note's own "moduliniai workeriai savo ekranus perveda pagal pluoštus"),
     not a repo-wide sweep this package attempts. */
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --control-h: 40px;

  /* K-7014 (owner 2026-09-27, "platformos tankis"): one density scale
     for the shared page frame, cards, layout columns, buttons and table
     cells -- text sits closer to the card edge and lines run longer, so
     a 1366px screen spends its width on content, not on margins. The
     floor is 12px of inner space anywhere text meets a line. Buttons
     read `--btn-*`, not `--control-h`: the phone block right below
     puts them back to the 40px/32px row so touch sizes (K-45) stay. */
  --pad-card: 16px;
  --pad-card-x: 16px;
  --gap-layout: 16px;
  --gap-stack: 12px;
  --pad-page-x: 16px;
  --btn-h: 36px;
  --btn-pad-x: 12px;
  --btn-h-sm: 30px;
  --btn-pad-x-sm: 10px;
  --cell-pad-y: 7px;
}

/* UI_KANONAS_v1.md §4 — field width follows content, not the container.
   Applied to `<input>`/`<select>` alongside the existing finding-185 rule
   (width: 100% stays the default; these classes override it for the
   specific content shapes the canon names, e.g. a date input full-width
   across a wide screen, found live in NCR registration, absence requests
   and the worklog). Adoption in existing screens is each screen's own
   worker's job (S1) — these classes exist so that adoption has something
   to opt into instead of each screen re-guessing its own pixel width. */
.fw-year {
  max-width: 100px;
}

.fw-time {
  max-width: 120px;
}

.fw-num {
  max-width: 160px;
  text-align: right;
}

.fw-date {
  max-width: 160px;
}

.fw-phone {
  max-width: 200px;
}

.fw-code {
  max-width: 240px;
}

.fw-name {
  max-width: 400px;
}

.fw-long {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  width: 100%;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #c8922a;
  --brand-dark: #c8922a;
  --brand-tint: #3a2d12;
  --surface: #1a1a18;
  --bg: #131310;
  --line: rgb(255 255 255 / 8%);
  --line-strong: rgb(255 255 255 / 16%);
  --muted: #a9a79f;
  --label-text: #cfcdc6;
  --text: #e8e6e0;
  --rail-bg: #0d0d0b;
  --panel-bg: #1a1a18;
  --success: #6bbf73;
  --success-bg: #18331c;
  --warning: #d9a52a;
  --warning-bg: #33280c;
  --danger: #e57368;
  --danger-bg: #3a1c18;
  --info: #6aa6cf;
  --info-bg: #152733;
  --teal: #5fb8ad;
  --teal-bg: #13302d;
}

/* `w3-note-to-worker-1-hidden-attribute-loses-to-class.md` (2026-08-07,
   worker 3): the [hidden] attribute alone is not enough. Any class in this
   file that sets `display` at the user agent's own specificity (0,1,0) --
   `.field` (which sets `display: grid`), `.button` (`display: inline-
   block`), and whichever the next one turns out to be -- wins the cascade
   over a UA rule of `display: none` regardless of source order, so
   `element.hidden = true` on a `.field` or a `.button` anywhere in the app
   is decorative: the element stays on screen with no way to interact with
   it correctly (a hidden required field silently keeps its value out of
   the request; a hidden button that still receives the click submits the
   wrong action). Measured app-wide, not sampled: 400 [hidden] elements
   across 157 screens, 393 honoured and 7 ignored before this rule, 400/400
   after (tools/hidden_attribute_probe_playwright.py, worker 3's own
   before/after run). The seven were real dead ends -- six NCR-form fields
   whose type-conditional visibility never took effect, so a supplier NCR
   filled out entirely correctly was refused with a fieldless error
   message, and a calculator row-limit button.
   `.nav-l1-account-popover[hidden]` above already worked around this one
   element at a time; this is the same fix, made impossible to need again.
   `!important` is deliberate: the alternative is one `X[hidden]` override
   per class that sets `display`, which is exactly the game of whack-a-mole
   that let this survive as long as it did. Nothing in this app wants a
   hidden element rendered, so a rule this blunt costs nothing here.
   CAUTION for the next person editing this comment: do not write a
   selector immediately followed by a literal opening brace up here.
   `test_navigation.py`'s `FormFieldRowStretchTests` (and its siblings)
   locate "the" rule for a selector with a naive
   `css.index("<selector> {")` -- the first match in the whole file wins,
   comment or not. This block did exactly that with the `.field` selector
   on its first draft and silently broke that test by handing it this
   comment's own text instead of the real rule. */
[hidden] {
  display: none !important;
}

html {
  background: var(--bg);
  color: var(--text);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* -- top-bar shell (kiosk, magic-link, anonymous) ------------------------ */

.site-header {
  align-items: center;
  background: var(--surface);
  border-bottom: 3px solid var(--brand);
  color: var(--text);
  display: flex;
  justify-content: space-between;
  min-height: 60px;
  padding: 0 2rem;
}

.brand,
.link-button,
.button-link {
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.brand {
  align-items: center;
  display: flex;
  font-weight: 700;
  gap: 0.6rem;
}

.site-header .site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-left: auto;
  margin-right: 2rem;
}

.site-header .site-nav a {
  color: var(--muted);
  text-decoration: none;
}

.site-header .site-nav a:hover {
  color: var(--brand-dark);
}

/* -- sidebar shell (authenticated): themed rail + module panel ----------- */

.app-shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-shrink: 0;
  height: 100vh;
  position: sticky;
  top: 0;
}

.nav-collapse-input {
  display: none;
}

.nav-columns {
  display: flex;
  min-height: 0;
}

.nav-l1 {
  background: var(--rail-bg);
  border-right: 1px solid var(--line);
  color: var(--text);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  padding-top: calc(60px + 0.6rem);
  position: relative;
  width: 208px;
}

/* WORK QUEUE package 2 (owner review 2026-08-02): "the owner wants L1 to
   collapse/expand by clicking the logo mark, not a separate arrow ... two
   round buttons in the left column, unclear which does what." The old
   system's brand row is a plain, borderless click target for exactly this
   (leoprint-platform@0fe3d84 _shell_chrome.html:13 `<div class="lp-brand"
   @click="brandClick()">`, no href at all — shell-nav.js:342-349 toggles
   collapse on desktop) — this port's brand used to be a real `<a
   href=dashboard>` PLUS a separate `.nav-l1-collapse-toggle` button; the
   "Dashboard" module already has its own L1 entry (operations/
   navigation.py's `dashboard_overview`), so nothing is lost by making the
   whole row a button instead, and the redundant second control is gone
   from the markup (base.html), not just visually deemphasised. */
.sidebar .brand {
  align-items: center;
  background: var(--rail-bg);
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 0.7rem;
  height: 60px;
  left: 0;
  padding: 0 1.1rem;
  position: absolute;
  text-align: left;
  top: 0;
  width: 207px;
  z-index: 1;
}

.sidebar .brand:hover {
  background: var(--line);
}

/* `leoprint-logo.png` is a dedicated 128x128 square icon-only mark (the
   same glyph cropped out of `leoprint-logo.jpg`'s wide wordmark+icon
   lockup, as a real transparent-background asset instead of a CSS crop).
   A prior pass here (WORK QUEUE package 2) worked around the lack of this
   asset by `object-fit: cover` + `object-position: left center` on the
   wide jpg to crop it down to just the icon; now that the square asset
   exists, render it directly at a fixed size with no cropping needed —
   the size does not change between the expanded and collapsed rail, so
   no separate `[data-nav-l1-collapsed]` override is needed here either.
   The `.brand-text` span (Leoprint / Platforma) still carries the
   wordmark as real text, same as the old system's separate
   `.lp-brand-text` div, and is already hidden when collapsed (below). */
/* docs/plans/koordinatoriaus-nota-w1-siena-ivadinis-logo-porastes-data.md,
   item C (owner ruling, 2026-08-10, live): "the logo should be LARGER."
   32px -> 40px -- comfortably inside the 60px row height (`.sidebar .brand`)
   and the 56px collapsed-rail width (`html[data-nav-l1-collapsed="true"]
   .sidebar .brand`) below, so neither the row nor the collapsed square needs
   to grow with it; `#876`'s own collapse-state-survives-reload mechanism is
   untouched (cookie + server-rendered `checked`, no relation to icon size). */
.brand-logo {
  display: block;
  height: 40px;
  object-fit: contain;
  width: 40px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-name {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.brand-sub {
  color: var(--brand-dark);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  opacity: 0.8;
}

.nav-l1-item {
  align-items: center;
  border-left: 3px solid transparent;
  color: var(--text);
  cursor: pointer;
  display: flex;
  font-size: var(--fs-nav-l1);
  font-weight: 600;
  gap: 0.65rem;
  padding: 0.55rem 0.9rem 0.55rem calc(1.1rem - 3px);
  text-decoration: none;
}

/* Collapsed state: icon-only rail. Badges (.nav-badge) stay visible
   collapsed — finding 182's requirement, same as finding 159 already
   established for the never-collapsing rail — their exact position is
   overridden further below (koordinatoriaus-nota-w1-savininko-radiniai-
   08-12-shell.md item 1), not left to the default inline flow here. */
html[data-nav-l1-collapsed="true"] .nav-l1 {
  width: 56px;
}

html[data-nav-l1-collapsed="true"] .sidebar .brand {
  justify-content: center;
  padding: 0 0.6rem;
  width: 56px;
}

html[data-nav-l1-collapsed="true"] .brand-text {
  display: none;
}

html[data-nav-l1-collapsed="true"] .nav-l1-label {
  display: none;
}

html[data-nav-l1-collapsed="true"] .nav-l1-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

/* koordinatoriaus-nota-w1-savininko-radiniai-08-12-shell.md item 1, collapsed
   L1: the badge used to stay in the flex row next to the now-hidden label
   (finding 182's own rule above only promises it stays VISIBLE, not where),
   so centred against a 56px-wide icon-only rail it pushed the icon off
   centre and its own circle clipped against the rail edge. Taken out of flow
   and pinned to the icon's own top-right corner instead -- "gali truputį
   dengti ikonos kraštą, bet ne atvirkščiai" (may slightly cover the icon's
   edge, never the reverse), the owner's own acceptance bar. */
html[data-nav-l1-collapsed="true"] .nav-l1-item .nav-badge {
  position: absolute;
  right: 4px;
  top: 4px;
}

/* Finding 184: bottom-left avatar and personal-settings popover. Stays
   pinned to the bottom of the rail via the auto top-margin, regardless of
   how many groups render above it or whether L1 is collapsed. */
.nav-l1-account {
  border-top: 1px solid var(--line);
  margin-top: auto;
  padding: 0.6rem;
  position: relative;
}

.nav-l1-account-toggle {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 0;
  width: 100%;
}

.nav-l1-avatar {
  align-items: center;
  background: var(--brand-tint);
  border-radius: 50%;
  color: var(--brand-dark);
  display: flex;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 700;
  height: 32px;
  justify-content: center;
  width: 32px;
}

/* WORK QUEUE package 2 (owner review 2026-08-02): "the avatar popover is
   clipped by the L1 column instead of floating above content ... the
   email truncates." `.nav-l1` sets `overflow-y: auto` (it has to — the
   module rail can outgrow the viewport height) which, per the CSS
   overflow spec, forces `overflow-x` away from `visible` too, so anything
   whose containing block is inside `.nav-l1` gets clipped to its 208px
   width even when `position: absolute` tries to place it further right.
   The old system never hit this because `.lp-l1` sets no `overflow` at
   all (docs/reference/senoji-lp.css:59-66). `position: fixed` escapes
   that clip entirely (a fixed element's containing block is the viewport,
   not the nearest scrolling ancestor, as long as nothing between it and
   the viewport sets `transform`/`filter`/`contain` — nothing here does) —
   the popover-open script below now sets `left`/`bottom` from the
   toggle's own `getBoundingClientRect()` instead of relying on a
   `position: relative` ancestor. Narrower per the same finding ("the panel
   can also be narrower"). */
.nav-l1-account-popover {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  padding: 0.9rem;
  position: fixed;
  width: 240px;
  z-index: 50;
}

/* The [hidden] attribute alone is not enough: a class selector of equal
   specificity to the UA default (0,1,0) that also sets `display` wins the
   cascade regardless of source order, so the popover above renders open at
   all times unless this explicitly out-specifies it. */
.nav-l1-account-popover[hidden] {
  display: none;
}

.account-popover-head {
  align-items: center;
  display: flex;
  gap: 0.6rem;
}

.account-popover-id {
  min-width: 0;
}

.account-popover-name {
  font-weight: 700;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ADDITION TO PACKAGE 2, "also still open" (owner live walkthrough,
   2026-08-02): the popover's own width fix (finding 184, "narrower per the
   same finding") over-corrected — a real address like
   demo-admin@demo.leoprint.test still truncated to "demo-admin@demo…",
   confirmed live. The name line above stays single-line/ellipsised (names
   are short and a second wrapped line there is rarely useful); the email is
   the one piece of information the owner actually needs intact, so it wraps
   instead of losing characters. */
.account-popover-email {
  color: var(--muted);
  font-size: 0.82rem;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* koordinatoriaus-nota-w1-paskyros-kortele-sriftai-ir-el-pasto-nuoroda.md
   item 1: the owner's own screen showed three type sizes in one small
   card -- this row's own local 0.85rem (close to, but not, the app's real
   value-text token), the "Role"/"Theme" rows' correctly-tokenised
   `.account-popover-label` (below), and `.account-popover-link`/
   `.checkbox-label` (no font-size at all, so they fell through to the
   16px browser default -- measured live, `_verify_account_card_
   typography2.py`, not assumed). One scale now, matching the app's own
   canon (`docs/architecture/p13-w3-form-label-tokens.md`, finding 186):
   `--fs-field-label` for the label word, `--fs-field-value` for
   everything that reads as content -- the control AND the action links,
   "actions render at value size, never larger" per the note's own ask.
   `.account-popover-label` (below) already used the label token
   correctly; only the bare label TEXT inside these four `<label
   class="account-popover-row">` rows did not (base.html now wraps it in
   the same `.account-popover-label` span the "Role"/"Theme" rows already
   use, rather than a second label style). */
.account-popover-row {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-field-value);
  gap: 0.3rem;
}

.account-popover-label {
  color: var(--muted);
  font-size: var(--fs-field-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-popover-form {
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 0.7rem;
}

.account-popover-save {
  align-self: flex-start;
}

.account-popover-link {
  align-items: center;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: var(--fs-field-value);
  gap: 0.5rem;
  padding-top: 0.6rem;
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.account-popover-link:hover {
  color: var(--brand-dark);
}

/* Same rule, same reason: "Show help cards…" is this card's third
   actions-render-at-value-size case, but `.checkbox-label` is a shared
   base class every module form's own checkboxes use -- scoped to this
   one form so no other screen's checkbox text changes size. */
.account-popover-form .checkbox-label {
  font-size: var(--fs-field-value);
}

/* item 2: measured first (`_verify_account_card_typography2.py`,
   `getComputedStyle`) -- Language/Number format/Date format (real
   `<select>`s) and Timezone (`<input list="account-tz-list">`, so it
   stays free-typeable beyond the suggested list, not a fourth `<select>`)
   render at the SAME width (209.21875px in the test fixture) under the
   app's one shared `input/select/textarea` base rule -- confirmed, not
   assumed, so this is the arrow only, exactly the note's own "jei
   vienodi — taisom rodyklę, o ne plotį" instruction. No selector in this
   file draws a custom arrow anywhere else -- every visible `<select>`
   chevron in this app is the bare browser default -- so this is a small,
   scoped visual patch for the one field whose native indicator differs
   from that default, not a new app-wide select-styling system. */
/* `.nav-l1-account-popover` prefix, not just `.account-popover-row`: the
   app-wide `input:not([type="checkbox"]):not([type="radio"]), select,
   textarea` base rule (below, §4) sets the `background` SHORTHAND
   (`var(--surface)`), which resets `background-image` to `none` -- same
   (0,2,1) specificity as a bare `.account-popover-row input[list]` would
   have, so the later, unrelated rule silently won on source order alone.
   One more class outranks it outright, regardless of where either rule
   sits in the file. */
.nav-l1-account-popover .account-popover-row input[list] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235f5f5a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.625rem center;
  background-repeat: no-repeat;
  padding-right: 1.75rem;
}

.nav-l1-account-popover .account-popover-row input[list]::-webkit-calendar-picker-indicator {
  display: none;
}

[data-theme="dark"] .nav-l1-account-popover .account-popover-row input[list] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a9a79f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.nav-l1-label {
  flex: 1;
}

.nav-l1-item:hover {
  background: var(--brand-tint);
  color: var(--brand-dark);
}

.nav-l1-item.active {
  background: var(--brand-tint);
  border-left-color: var(--brand);
  color: var(--brand-dark);
}

/* -- module panel: same surface family as the content --------------------- */

/* Which group's panel appears is decided server-side from the current URL
   (operations/context_processors.py's active_group / group["active"]) and
   rendered directly as this element's presence in the markup — the template
   only ever emits the ONE active group's `.nav-l2`, never a radio-driven
   choice among several. Collapse (below) is a separate, orthogonal axis:
   `#nav-collapse` only changes how the already-selected panel is drawn. */
.nav-l2 {
  background: var(--panel-bg);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto;
  padding: 60px 0 1.5rem;
  position: relative;
  transition: width 0.15s ease;
  width: 230px;
}

/* koordinatoriaus-nota-l2-meniu-antraste-vietoj-rodyklytes.md (owner
   ruling 2026-08-10, "kad būtų harmoninga"): the standalone chevron
   button (R1 OWNER VERDICT fix 1, 2026-08-04, superseded below) is gone
   -- the head row itself is the `<label for="nav-collapse">` now,
   absolutely positioned at the same 60px row height as `.sidebar .brand`
   one column over (mirrors that rule's own `position: absolute; top: 0;
   height: 60px` almost verbatim), so the two headers sit on one visual
   line the way the owner described it. `.nav-l2`'s own top padding
   (above) reserves exactly this height for it, the same relationship
   `.nav-l1`'s padding-top already has to `.sidebar .brand`. */
.nav-l2-head {
  align-items: center;
  background: var(--panel-bg);
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 0.55rem;
  height: 60px;
  left: 0;
  padding: 0 0.7rem 0 1.1rem;
  position: absolute;
  right: 0;
  text-align: left;
  top: 0;
  z-index: 1;
}

.nav-l2-head:hover {
  background: var(--line);
}

.nav-l2-head .nav-icon {
  font-size: 15px;
}

.nav-l2 .nav-group-name {
  color: var(--muted);
  flex: 1;
  font-size: var(--fs-field-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav-group-modules {
  display: flex;
  flex-direction: column;
}

.nav-group-modules a {
  align-items: center;
  border-left: 3px solid transparent;
  color: var(--text);
  display: flex;
  font-size: var(--fs-nav-l2);
  gap: 0.5rem;
  padding: 0.5rem 0.9rem 0.5rem calc(1.1rem - 3px);
  text-decoration: none;
}

.nav-l2-label {
  flex: 1;
}

/* koordinatoriaus-nota-w1-beta-zyma-nebaigtiems-moduliams.md: a small,
   quiet marker next to an unfinished module's own name -- D7's own rule
   ("žymė yra papildoma informacija, ne šauktukas"), so no red accent and
   no second prominent element, just muted text riding on the label it
   belongs to. */
.nav-beta-mark {
  color: var(--muted);
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.nav-group-modules a:hover {
  background: var(--brand-tint);
  color: var(--brand-dark);
}

.nav-group-modules a.active {
  background: var(--brand-tint);
  border-left-color: var(--brand);
  color: var(--brand-dark);
  font-weight: 700;
}

/* Panel collapse (orthogonal to selection): shrink the single rendered
   `.nav-l2` to a 56px icon rail rather than hiding it outright, so there is
   always a visible way back — `.nav-l2-head` itself stays put and stays
   the toggle in both states, it is never hidden by this rule. */
#nav-collapse:checked ~ .nav-columns .nav-l2 {
  width: 56px;
}

#nav-collapse:checked ~ .nav-columns .nav-l2-head {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* Icon-only rail: the group icon stays (matches every module link below
   staying icon-only too), only the text disappears. The badge used to
   disappear here too ("Suskleistas L2: badge IŠVIS nerodomas — žinutės
   'dingsta'", koordinatoriaus-nota-w1-savininko-radiniai-08-12-shell.md
   item 1) -- unread counts should never depend on whether a rail happens to
   be expanded. Kept visible and repositioned below instead, same corner
   treatment as the L1 fix right above ("tas pats šablonas kaip L1"). */
#nav-collapse:checked ~ .nav-columns .nav-group-name,
#nav-collapse:checked ~ .nav-columns .nav-l2-label,
#nav-collapse:checked ~ .nav-columns .nav-beta-mark {
  display: none;
}

#nav-collapse:checked ~ .nav-columns .nav-group-modules a {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

#nav-collapse:checked ~ .nav-columns .nav-badge-l2 {
  position: absolute;
  right: 4px;
  top: 4px;
}

/* koordinatoriaus-nota-w1-savininko-radiniai-08-12-shell.md item 1,
   expanded state: "veikia, bet badge per didelis — sumažinti" (works, but
   the badge is too big). Scoped to `.sidebar` so `.tab-badge`, the other
   sharer of the base `.nav-badge`/`.tab-badge` rule (main.css above), keeps
   its own, unrelated size. */
.sidebar .nav-badge {
  font-size: 0.62rem;
  min-width: 0.9rem;
  padding: 0.1rem 0.28rem;
}

.sidebar .nav-l1 .nav-badge {
  background: #d05a4f;
  color: #fff;
}

.nav-badge-l2 {
  background: var(--brand);
  color: #fff;
}

.shell-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  height: 60px;
  padding: 0 1.5rem;
}

/* docs/plans/w1-navigacijos-pertvarka-2026-08-08.md section 5a: the
   version badge -- a slim bar under every page's content, same horizontal
   padding as .topbar for visual alignment. */
.app-footer {
  border-top: 1px solid var(--line);
  padding: 0.75rem 1.5rem;
}

.app-footer .task-meta {
  margin: 0;
}

/* WORK QUEUE package 2 (owner review 2026-08-02): "a full-width empty
   white header strip" — the old system has NO topbar at all (language,
   theme and sign-out live in the L1 account popover, finding 184); this
   port kept one for the mobile nav hamburger and the help link, but on a
   desktop viewport with the help layer hidden (finding 155) or no
   help_url for the current page, `.session` renders with zero children
   and `.sidebar-toggle` is already `display: none` above 900px (below),
   so the whole bar is dead 60px of chrome with nothing in it. Collapse it
   away rather than reserve the space; it still exists (unconditionally,
   for the mobile toggle) on narrower viewports.

   `:has(.session:empty)` was the first attempt and does not work: Django's
   `{% if help_url %}...{% endif %}` block leaves the whitespace/newlines
   from the template source as text nodes inside `.session` even when the
   condition is false, and CSS `:empty` requires literally zero child nodes
   (text nodes count, whitespace-only or not) — confirmed live with
   Playwright, `getComputedStyle(topbar).display` stayed `flex`. `.session`
   on desktop only ever has one possible element child (`.help-link`;
   `.sidebar-toggle` is already hidden above this breakpoint by the rule
   below), so check for that element's absence directly instead — it does
   not depend on template whitespace at all. */
/* R1 EXECUTION S-1 (2026-08-04): the topbar now also carries the
   breadcrumb (`.breadcrumb-current` renders unconditionally whenever the
   topbar itself does -- base.html's own gate), so it is no longer ever
   "dead 60px of chrome with nothing in it" the way an empty `.session`
   alone used to be. The collapse condition now requires BOTH to be
   missing, which in practice never happens on an authenticated page --
   left as a defensive fallback rather than deleted outright, in case a
   future change makes the breadcrumb itself conditional again. */
@media (min-width: 901px) {
  .topbar:not(:has(.help-link)):not(:has(.breadcrumb-current)) {
    display: none;
  }
}

/* -- breadcrumb (S-1) ----------------------------------------------------- */

.breadcrumb {
  min-width: 0;
  overflow: hidden;
}

.breadcrumb-list {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-field-value);
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "\203a";
  margin-right: 0.35rem;
}

/* K-2614 (mobile touch targets, source K-2316 audit): the breadcrumb link
   measured 16px tall -- 38 of 40 mobile screens under the 44px minimum
   (K-45's own rule, WCAG 2.2 §2.5.8 / Material 3 / Apple all agree at
   24-48px). `.breadcrumb-list`'s own `align-items: center` (above) already
   centres a taller item, so growing just the `<a>`'s own box is enough --
   no layout shift for the surrounding topbar (fixed 60px, plenty of
   headroom). Text size is untouched; only the clickable box grows. */
.breadcrumb-item a {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
}

.breadcrumb-current {
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -- theme switch --------------------------------------------------------- */

.theme-switch {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 0.78rem;
  gap: 0.45rem;
}

.theme-toggle {
  background: var(--line-strong);
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  height: 22px;
  padding: 0;
  position: relative;
  transition: background 0.15s ease;
  width: 40px;
}

.theme-toggle::after {
  background: var(--surface);
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
  content: "";
  height: 18px;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform 0.15s ease;
  width: 18px;
}

.theme-toggle[aria-checked="true"] {
  background: var(--brand);
}

.theme-toggle[aria-checked="true"]::after {
  transform: translateX(18px);
}

/* Parity finding 154: three-way Light/Dark/System control in the
   authenticated topbar (replaces the plain boolean switch above, which
   remains for the kiosk header where there is no per-member preference
   to persist). */
.theme-switch--tri {
  background: var(--rail-bg);
  border-radius: var(--radius-pill);
  gap: 0;
  padding: 2px;
}

.theme-option {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-size: 0.95rem;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.theme-option[aria-pressed="true"] {
  background: var(--surface);
  box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
  color: var(--brand);
}

/* Parity finding 162: the shared topbar (help link, theme control, user,
   sign-out) is common chrome above every operator screen — kiosk, scanner,
   my-area and approval pages included, since they all extend base.html.
   Below phone width it must wrap instead of clipping or forcing horizontal
   scroll. Finding 184 moved the member's email (the one unbounded-length
   piece this rule originally targeted via .session-user) out of the topbar
   and into the bottom-left account popover, so the truncation rule now
   lives on .account-popover-email (below) instead. */
@media (max-width: 480px) {
  .topbar {
    flex-wrap: wrap;
    height: auto;
    padding: 0.6rem 1rem;
    row-gap: 0.5rem;
  }

  .session {
    flex-wrap: wrap;
    gap: 0.5rem;
    row-gap: 0.5rem;
  }
}

.sidebar-toggle-input {
  display: none;
}

.sidebar-toggle {
  cursor: pointer;
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-right: auto;
  padding: 0.5rem 0;
}

.sidebar-toggle span {
  background: var(--muted);
  border-radius: 2px;
  display: block;
  height: 2px;
  width: 20px;
}

/* K-9612: the phone topbar's logo link to "Man šiandien" and the phone
   drawer's own parts (base.html) -- all shown only by the max-width: 720px
   block below; above it the L1 rail and the L2 panel are the menu. */
.topbar-brand,
.nav-drawer-scrim,
.nav-drawer-head,
.nav-drawer-modules,
.nav-drawer-chevron,
.nav-drawer-account-name,
.nav-drawer-note {
  display: none;
}

/* K-7014: the compact rail/panel pair from a 1500px window down (was
   1100px) -- a 1366/1440 laptop gives 50px back to <main>. The panel is
   212px, not the old 200px: the longest L2 names ("Spaudos formų
   užsakymai", "Skolininkų priminimai" with its badge) need ~206px on one
   line even with the tighter item padding below. */
@media (max-width: 1500px) {
  .nav-l2 {
    width: 212px;
  }

  .nav-l1,
  .sidebar .brand {
    width: 176px;
  }
}

/* K-7014: 12px from the panel edge to the icon (3px of it the active bar)
   and 12px on the right, so the longest L2 names stay on one line in the
   212px panel; the panel head's icon sits on the same 12px line (K-8896).
   Desktop only -- under 900px the panel is full width. */
@media (min-width: 901px) and (max-width: 1500px) {
  .nav-group-modules a {
    padding-left: calc(12px - 3px);
    padding-right: 12px;
  }

  .nav-l2-head {
    padding-left: 12px;
  }
}

@media (max-width: 900px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    display: block;
    height: auto;
    position: static;
  }

  .sidebar .brand {
    position: static;
    width: 100%;
  }

  .nav-columns {
    flex-direction: column;
  }

  .nav-l1 {
    border-right: 0;
    padding-top: 0.4rem;
    width: 100%;
  }

  .nav-l2 {
    border-bottom: 1px solid var(--line);
    border-right: 0;
    padding-top: 0.9rem;
    width: 100%;
  }

  /* K-2313 (owner report 2026-09-02: "L1/L2 collapse/expand does not work
     at all on mobile"): a desktop session that ever collapsed L1
     (`localStorage["nav-l1-collapsed"]`, `html[data-nav-l1-collapsed]`
     below) or L2 (`nav_collapsed` cookie, `#nav-collapse:checked` below)
     carries that flag straight into a 390px viewport, and both desktop
     selectors outrank the plain `.nav-l1`/`.nav-l2` rules just above by
     specificity alone (an attribute+class selector beats a single class;
     an id+class+class selector beats it even harder) -- the media query
     they are written outside of gives them no protection at all. Below
     900px there must be exactly one state, closed (behind the burger) or
     open at full width, so every property either desktop rule sets is
     mirrored here with matching specificity; being later in the file lets
     equal-specificity ties resolve in this block's favour. */
  html[data-nav-l1-collapsed="true"] .nav-l1 {
    width: 100%;
  }

  html[data-nav-l1-collapsed="true"] .sidebar .brand {
    justify-content: flex-start;
    padding: 0 1.1rem;
    width: 100%;
  }

  html[data-nav-l1-collapsed="true"] .brand-text {
    display: flex;
  }

  html[data-nav-l1-collapsed="true"] .nav-l1-label {
    display: inline;
  }

  html[data-nav-l1-collapsed="true"] .nav-l1-item {
    justify-content: flex-start;
    padding-left: calc(1.1rem - 3px);
    padding-right: 0.9rem;
    position: static;
  }

  html[data-nav-l1-collapsed="true"] .nav-l1-item .nav-badge {
    position: static;
    right: auto;
    top: auto;
  }

  #nav-collapse:checked ~ .nav-columns .nav-l2 {
    width: 100%;
  }

  #nav-collapse:checked ~ .nav-columns .nav-l2-head {
    justify-content: flex-start;
    padding: 0 0.7rem 0 1.1rem;
  }

  #nav-collapse:checked ~ .nav-columns .nav-group-name,
  #nav-collapse:checked ~ .nav-columns .nav-l2-label,
  #nav-collapse:checked ~ .nav-columns .nav-beta-mark {
    display: inline;
  }

  #nav-collapse:checked ~ .nav-columns .nav-group-modules a {
    justify-content: flex-start;
    padding-left: calc(1.1rem - 3px);
    padding-right: 0.9rem;
    position: static;
  }

  #nav-collapse:checked ~ .nav-columns .nav-badge-l2 {
    position: static;
    right: auto;
    top: auto;
  }

  /* K-45 touch-target rule (>=44px), extended to the burger itself -- it
     sat outside every `min-height`/`min-width` sweep in this file (those
     target `.nav-l1-item`/`.nav-group-modules a`/form controls, never
     `.sidebar-toggle`), measuring a ~20x30px box against the ~44px a
     finger needs. `align-items`/`justify-content: center` keeps the three
     bars centred in the now-larger box instead of pinned to its corner. */
  .sidebar-toggle {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  .sidebar-toggle-input:not(:checked) ~ .sidebar .nav-columns {
    display: none;
  }

  .app-shell .topbar {
    border-top: 1px solid var(--line);
  }
}

/* K-2864 (owner ruling 2026-09-03 21:29, phone screenshot): at <=720px the
   topbar used to stack FOUR rows above any page content; this keeps the
   chrome to one row plus the breadcrumb. The sidebar's own brand row
   (`.sidebar .brand`, with the wordmark) is hidden; the breadcrumb drops to
   a second row via `flex-basis: 100%`; `.session` (bell + help) sits right.
   `justify-content: space-between` on `.topbar` (unchanged, main.css above)
   applies per wrapped line, so the second row never pushes the first.

   K-9612 (owner decisions 2026-10-07, "the menu opens strangely"; mockup
   dispeceris/maketai/leoapp-meniu-stalcius-maketas.html): the burger is
   back on the left and opens a drawer that covers the page instead of
   pushing it ~990px down -- `position: fixed`, min(320px, 85vw) wide, the
   whole height, over a dimmed scrim that closes it (a label for the same
   checkbox), page scroll locked while it is open. Groups open in place as an
   accordion (bo/static/js/nav-drawer.js; `.nav-drawer-ready` is set by that
   script, so without it the L2 panel stays below the groups as before). The
   account row and "Note to the makers" sit at the drawer's foot, so the
   topbar's own note button goes. The breadcrumb shows only the parent,
   "‹ Operacijos"; a one-item trail shows nothing. */
@media (max-width: 720px) {
  .sidebar-toggle {
    margin-right: 0;
    order: 0;
  }

  .topbar-brand {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-right: auto;
    min-height: 44px;
    min-width: 44px;
    order: 1;
  }

  .sidebar .brand {
    display: none;
  }

  .topbar {
    flex-wrap: wrap;
    height: auto;
    row-gap: 0.4rem;
  }

  .breadcrumb {
    flex-basis: 100%;
    order: 3;
  }

  .breadcrumb:not(:has(.breadcrumb-item:nth-last-child(2))),
  .breadcrumb-item {
    display: none;
  }

  .breadcrumb-item:nth-last-child(2) {
    align-items: center;
    display: flex;
  }

  .breadcrumb-item:nth-last-child(2)::before {
    color: var(--brand-dark);
    content: "\2039";
    margin-right: 0.35rem;
  }

  /* `.topbar .session` (not the bare `.session` another 720px block already
     sets `width: 100%` on, further down this file, for the unrelated kiosk/
     anonymous site-header) -- a bare selector would win the cascade by file
     order alone and stretch this row full width. */
  .topbar .session {
    order: 2;
    width: auto;
  }

  /* Scoped to `.topbar .feedback-fab` (0,2,0): the bare-class rule sits
     later in the file (its own K-13b section) and would win back the fixed
     corner button by source order. The drawer's foot opens the same dialog. */
  .topbar .feedback-fab {
    display: none;
  }

  .app-shell:has(> .sidebar-toggle-input:checked) {
    overflow: hidden;
  }

  .sidebar-toggle-input:checked ~ .sidebar .nav-drawer-scrim {
    background: rgb(0 0 0 / 45%);
    display: block;
    inset: 0;
    position: fixed;
    z-index: 60;
  }

  .sidebar-toggle-input:checked ~ .sidebar .nav-columns {
    background: var(--rail-bg);
    bottom: 0;
    box-shadow: 4px 0 24px rgb(0 0 0 / 25%);
    display: flex;
    left: 0;
    overflow-y: auto;
    position: fixed;
    top: 0;
    width: min(320px, 85vw);
    z-index: 61;
  }

  .nav-drawer-head {
    align-items: center;
    background: var(--rail-bg);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 0.6rem;
    padding: 0.4rem 0.4rem 0.4rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .nav-drawer-title {
    flex: 1;
    font-weight: 600;
  }

  .nav-drawer-close {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 1.4rem;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  .sidebar .nav-l1 {
    flex: 1 0 auto;
    overflow: visible;
    padding-top: 0;
  }

  .nav-drawer-ready .nav-l2 {
    display: none;
  }

  .nav-drawer-ready .nav-drawer-chevron {
    color: var(--muted);
    display: inline;
    margin-left: auto;
    transition: transform 0.15s ease;
  }

  .nav-l1-item:has(+ .nav-drawer-modules.open) {
    background: var(--brand-tint);
  }

  .nav-l1-item:has(+ .nav-drawer-modules.open) .nav-drawer-chevron {
    transform: rotate(90deg);
  }

  .nav-drawer-ready .nav-drawer-modules.open {
    border-bottom: 1px solid var(--line);
    display: block;
  }

  .nav-drawer-modules a {
    align-items: center;
    color: var(--text);
    display: flex;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1rem 0 2.6rem;
    text-decoration: none;
  }

  .nav-drawer-modules a.active {
    box-shadow: inset 3px 0 0 var(--brand);
    color: var(--brand-dark);
    font-weight: 600;
  }

  /* `z-index` above the sticky head's: a sticky box is its own stacking
     context, so without it the account popover opening upward from here
     would slide under the drawer's head. */
  .nav-l1-account {
    background: var(--rail-bg);
    bottom: 0;
    padding: 0.3rem 0;
    position: sticky;
    z-index: 2;
  }

  /* `.nav-l1-account .nav-drawer-note` (0,2,0): the note is also a
     `.link-button`, whose rule sits later in the file. */
  .nav-l1-account-toggle,
  .nav-l1-account .nav-drawer-note {
    align-items: center;
    background: none;
    border: 0;
    color: var(--text);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0 1rem;
    text-align: left;
    text-decoration: none;
    width: 100%;
  }

  .nav-drawer-account-name {
    display: inline;
    font-weight: 600;
  }
}

.session {
  align-items: center;
  display: flex;
  gap: 1rem;
}

.session form {
  margin: 0;
}

.link-button,
.button-link {
  background: transparent;
  border: 0;
  color: var(--brand-dark);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* -- page + shared components -------------------------------------------- */
/* K-7014: under 900px the buttons keep today's 40px/32px geometry --
   density is a desktop change; phone touch targets are not touched. */
@media (max-width: 900px) {
  :root {
    --btn-h: var(--control-h);
    --btn-pad-x: 1rem;
    --btn-h-sm: 32px;
    --btn-pad-x-sm: 0.75rem;
  }
}


/* `padding-bottom` (K-3918, RADINYS C1 on #2117's K-3810 audit): reserves
   the fixed `.feedback-fab`'s own footprint (16px offset + ~40px button +
   one spacing-scale step, main.css's K-13b section) along the bottom of
   every screen's content, so a table's or form's last control can never
   land underneath the corner the note button floats in -- found live over
   a "Configure" row action on `/purchasing/suppliers/`, but the button is
   fixed on every authenticated screen, not just that one. Below the
   `max-width: 720px` breakpoint the button drops `position: fixed` for a
   plain flex item inside the topbar and needs no reserved space; that
   block already rewrites this whole `padding` shorthand (0 0.75rem), which
   zeroes this value back out there without a second override. A kiosk/
   magic-link screen also renders `.page` without the button at all -- the
   64px there is unused space, not a defect, and costs nothing a person
   notices.
   `max-width` (K-6898): 1600px, not 1200px -- on a 2560px monitor the
   1200px cap squeezed every screen into a narrow centred strip. A 1440px
   laptop (~1080px free beside the navigation) never reaches either cap.
   K-6992: the NCR screens' own `.page:has(.ncr-wide) { max-width: 1400px }`
   (K-5892, written to widen them past the old 1200px) is gone -- above a
   ~1840px window it made them narrower than every other screen. The
   `ncr-wide` marker class stays for its button rule. */
.page {
  display: grid;
  gap: var(--gap-stack);
  margin: 1rem auto 1.5rem;
  max-width: 1600px;
  padding: 0 var(--pad-page-x);
  padding-bottom: 64px;
  width: 100%;
}

.page > * {
  min-width: 0;
}

a {
  color: var(--brand-dark);
}

.flash-stack {
  display: grid;
  gap: 0.5rem;
}

.flash {
  background: var(--brand-tint);
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
}

.flash-success {
  background: var(--success-bg);
  border-color: var(--success);
}

.flash-error {
  background: var(--danger-bg);
  border-color: var(--danger);
}

.flash-warning {
  background: var(--warning-bg);
  border-color: var(--warning);
}

/* K-5927 (NCR design N1): the mockups' `.card` -- flat white, one 1px
   line, 12px radius, 20px/24px padding. `.card--stack` is the opt-in
   column with the mockups' 14px gap between its children; plain `.card`
   keeps normal block flow so no existing screen's inline content is
   rearranged. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--pad-card) var(--pad-card-x);
  /* koordinatoriaus-nota-w1-savininko-radiniai-08-13-nakties-eile.md item
     3: a long unbroken token (a URL like ".../projektas/rato/") inside a
     card cuts across its own border instead of wrapping -- fixed on `.card`
     itself, not just the Radiniai board's `.rato-card`, since any card
     anywhere can receive unpredictable user-entered text. `anywhere` (not
     `break-word`) only breaks mid-word when a normal wrap point would
     already overflow, so ordinary short text is unaffected. */
  overflow-wrap: anywhere;
}

.card--stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.card--stack > * {
  margin: 0;
}

.card-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.card-subtitle {
  color: var(--muted);
  font-size: var(--fs-field-value);
  line-height: 1.4;
  margin: 0;
}

/* K-5927: the mockups' `.kv` -- a label/value list on a fixed 132px label
   column, the value column shrinking instead of overflowing. */
.kv {
  column-gap: 12px;
  display: grid;
  font-size: var(--fs-control);
  grid-template-columns: 132px minmax(0, 1fr);
  margin: 0;
  row-gap: 10px;
}

.kv dt {
  color: var(--muted);
  margin: 0;
}

.kv dd {
  margin: 0;
}

/* K-5927: the mockups' `.warn` / `.okbox` -- a tinted note inside a card,
   no border, the text a shade darker than the tint's own status colour. */
.callout-warning,
.callout-success {
  border-radius: var(--radius-md);
  font-size: var(--fs-field-value);
  line-height: 1.4;
  margin: 0;
  padding: 10px 12px;
}

.callout-warning {
  background: var(--warning-bg);
  color: var(--brand-dark);
}

.callout-success {
  background: var(--success-bg);
  color: var(--success);
}

/* K-6312 (NCR design N14, mockup `Atsakymas-390`): a conversation as
   bubbles -- the other side on the left in grey, the person's own answer
   on the right in the warm tint, each at most 85% of the card. */
.chat-bubble {
  align-self: flex-start;
  background: color-mix(in srgb, var(--rail-bg) 60%, var(--surface));
  border-radius: 12px 12px 12px 4px;
  display: flex;
  flex-direction: column;
  font-size: var(--fs-control);
  gap: 2px;
  max-width: 85%;
  padding: 10px 12px;
}

.chat-bubble--own {
  align-self: flex-end;
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 12%, var(--brand-tint));
  border-radius: 12px 12px 4px 12px;
}

.chat-bubble-meta {
  color: var(--muted);
  font-size: 0.75rem;
}

/* The operator's standalone answer page: one column as narrow as the
   phone mockup on every screen, 16px apart, full-width 48px actions. */
.page.ncr-answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0 auto;
  max-width: 560px;
  padding: 20px var(--space-4) var(--space-8);
}

.ncr-answer-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ncr-answer-head .ncr-page-crumb,
.ncr-answer-head h1 {
  margin: 0;
}

.ncr-answer-head h1 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}

.card.ncr-answer-card {
  gap: 12px;
  padding: var(--space-4);
}

.ncr-answer-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.ncr-answer-question {
  font-size: 1rem;
  line-height: 1.5;
}

.ncr-answer-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
}

.ncr-answer-field {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-field-value);
  font-weight: 500;
  gap: 6px;
  min-width: 0;
}

.ncr-answer-field textarea {
  font-size: var(--fs-control);
  line-height: 1.5;
  min-height: 110px;
}

.ncr-answer-submit {
  min-height: 48px;
  width: 100%;
}

/* K-6330 (K-6312 review): `.ncr-answer-submit` alone is (0,1,0), so its 48px
   lost to the `button[type="submit"]:not(...)` safety net at (0,4,1) -- 40px
   on a desktop, 44px under the phone floor -- and, on the photo-picker
   <label>, to `.button-secondary` declared later in the file (40px). These
   selectors out-rank both regardless of source order (same fix as
   `.safety-kiosk-action`, K-4059). */
.button-secondary.ncr-answer-submit,
button[type="submit"].ncr-answer-submit:not(.link-button):not(.button-link):not(.task-row-button) {
  min-height: 48px;
}

.ncr-answer-continue {
  display: flex;
  justify-content: center;
  margin: 0;
}

.ncr-answer-continue .link-button {
  color: var(--brand-dark);
  font-size: var(--fs-control);
  min-height: 44px;
  text-decoration: none;
}

/* K-7242 (surveys design P4, mockup `A-Atsakymas-390`): the employee's
   answer page opened from an SMS -- one column as narrow as the phone
   mockup on every screen, choices as 48px radio cards (brand outline and
   warm tint once picked), one full-width 52px Send. Moved here from the
   page-local <style> it used to carry. */
.survey-respond {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 auto;
  max-width: 560px;
  width: 100%;
}

.survey-respond h1 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

/* K-7464: the answered note wraps a paragraph and a list; their outer
   margins would stack on the callout's own padding. */
.survey-respond .callout-success > :first-child {
  margin-top: 0;
}

.survey-respond .callout-success > :last-child {
  margin-bottom: 0;
}

.survey-respond-lead {
  color: var(--muted);
  font-size: var(--fs-control);
  line-height: 1.4;
  margin: 0;
}

.survey-respond-meta {
  color: var(--muted);
  font-size: var(--fs-field-value);
  margin: 0;
}

.survey-respond-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.survey-respond-question {
  font-size: 15px;
  font-weight: 600;
  margin: 6px 0 0;
}

.survey-respond-choice {
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  font-size: 15px;
  gap: 10px;
  min-height: 48px;
  padding: 6px var(--space-4);
}

.survey-respond-choice input {
  accent-color: var(--brand);
  flex: 0 0 auto;
  height: 20px;
  margin: 0;
  width: 20px;
}

.survey-respond-choice:has(input:checked) {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
  border-color: var(--brand);
}

.survey-respond-choice:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Out-ranks the `button[type="submit"]` safety net (0,4,1) and its phone
   floor regardless of source order, same as `.ncr-answer-submit`. */
button[type="submit"].survey-respond-submit:not(.link-button):not(.button-link):not(.task-row-button) {
  background: var(--text);
  border-radius: var(--radius-lg);
  color: var(--surface);
  font-size: 15px;
  font-weight: 600;
  margin-top: 8px;
  min-height: 52px;
  width: 100%;
}

button[type="submit"].survey-respond-submit:not(.link-button):not(.button-link):not(.task-row-button):hover {
  background: color-mix(in srgb, var(--text) 85%, var(--surface));
}

.button-secondary.survey-respond-action {
  min-height: 48px;
  width: 100%;
}

/* K-7260 (warehouse design W8, mockup `W-Skeneris-390`): the shop-floor
   scanner -- one column as narrow as the phone mockup on every screen, a
   52px field, 48px Find / camera buttons, the answer as one card with a
   2x2 grid of 44px actions, and the kiosk's actions as tiles. Replaces the
   page-local <style> K-3497 gave `warehouse/scan.html`; the submit
   selectors out-rank the `button[type="submit"]` safety net (0,4,1) the
   same way `.survey-respond-submit` does. */
.scan-hub {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 auto;
  min-width: 0;
  width: 100%;
}

/* K-7487: the phone-narrow column caps each block rather than the hub, so a
   found machine's five-column table (`scan-result--machine`) takes the page's
   width instead of squeezing into 560px beside nothing. */
.scan-hub > :not(.scan-result--machine) {
  margin-inline: auto;
  max-width: 560px;
  min-width: 0;
  width: 100%;
}

.scan-hub h1 {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.scan-hub-search,
.scan-hub-search form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.scan-hub-search .field,
.scan-hub-search .task-meta {
  margin: 0;
}

/* (0,3,1): the K-45 phone floor `input:not(...):not(...)` is (0,2,1) and
   sits later in the file, so an equal selector measured 44px at 390. */
.scan-hub .scan-hub-search input[name="code"] {
  box-sizing: border-box;
  font-size: 15px;
  min-height: 52px;
  width: 100%;
}

.scan-hub-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.scan-hub-buttons > * {
  flex: 1 1 140px;
}

button[type="submit"].scan-hub-find:not(.link-button):not(.button-link):not(.task-row-button),
.scan-hub-buttons > .button-secondary {
  border-radius: var(--radius-lg);
  font-size: 15px;
  font-weight: 600;
  min-height: 48px;
  white-space: normal;
}

button[type="submit"].scan-hub-find:not(.link-button):not(.button-link):not(.task-row-button) {
  background: var(--text);
  color: var(--surface);
}

button[type="submit"].scan-hub-find:not(.link-button):not(.button-link):not(.task-row-button):hover {
  background: color-mix(in srgb, var(--text) 85%, var(--surface));
}

.scan-hub-buttons > .button-secondary {
  border-width: 1.5px;
}

.scan-hub .actions .button-secondary {
  min-height: 44px;
  width: 100%;
}

.card.scan-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}

.card.scan-result--found {
  border-color: var(--success);
}

.scan-result-title {
  font-size: var(--fs-section-title);
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

/* K-7467: the full 18-digit SSCC under the heading's last six -- a phone has
   no hover to show the title attribute. */
.scan-result-code {
  color: var(--muted);
  font-size: 0.75rem;
  margin: 0;
  overflow-wrap: anywhere;
}

/* K-7467: the roll history's When, Quantity and Location cells stay on one line. */
.stock-history-nowrap {
  white-space: nowrap;
}

.scan-result-meta {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
  margin: 0;
}

.scan-result h3 {
  font-size: var(--fs-section-title);
  margin: 8px 0 0;
}

.scan-result form {
  margin: 0;
}

.scan-result-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 6px 0 2px;
}

.scan-result-actions > form {
  display: flex;
}

.scan-result-actions > .button,
.scan-result-actions > .button-secondary,
.scan-result-actions button[type="submit"]:not(.link-button):not(.button-link):not(.task-row-button) {
  border-radius: 10px;
  box-sizing: border-box;
  font-size: var(--fs-field-value);
  font-weight: 600;
  min-height: 44px;
  text-align: center;
  white-space: normal;
  width: 100%;
}

.scan-result-actions > .button-secondary,
.scan-result-actions button[type="submit"].button-secondary:not(.link-button):not(.button-link):not(.task-row-button):not(:disabled) {
  background: var(--bg);
  border-color: transparent;
}

/* The undo label ("Undo my last scan movement (Move)") is wider than a
   phone column; it wraps instead of pushing the page to 442px (K-3497). */
.scan-result .scan-result-more,
.scan-result button[type="submit"].scan-result-more:not(.link-button):not(.button-link):not(.task-row-button) {
  box-sizing: border-box;
  min-height: 44px;
  text-align: center;
  white-space: normal;
  width: 100%;
}

.card.scan-action {
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-margin-top: var(--space-4);
}

.scan-action h3 {
  font-size: 0.9375rem;
  margin: 0;
}

.scan-action form {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.scan-action button[type="submit"]:not(.link-button):not(.button-link):not(.task-row-button) {
  box-sizing: border-box;
  min-height: 44px;
  white-space: normal;
  width: 100%;
}

.scan-hub .card.help-banner {
  background: transparent;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}

.scan-hub .help-banner h2 {
  font-size: var(--fs-section-title);
  font-weight: 600;
  margin: 6px 0 0;
}

.scan-hub .help-banner .task-meta {
  margin: 0;
}

.scan-hub-tiles {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.scan-hub-tiles > li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 84px;
  min-width: 0;
  padding: 12px;
}

.scan-hub-tiles strong {
  font-size: var(--fs-section-title);
  font-weight: 600;
}

.scan-hub-tiles span {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.scan-hub-note {
  text-align: center;
}

@media (max-width: 720px) {
  .scan-result .detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* K-7240 (surveys design P2, mockup `A-Naujas`): the send-out form -- the
   form card with its numbered sections (a hairline between them), the SMS
   preview 300px to its right; the three type cards (`.po-outcome--pick`)
   in a row. Keyed on the form's own width, not the viewport: one column
   when `<main>` is too narrow for both, the cards stacked below that. */
.survey-form {
  container: survey-form / inline-size;
}

.survey-form-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: minmax(0, 1fr) 300px;
}

.survey-form-main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-layout);
  min-width: 0;
}

.survey-form-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.survey-form-section + .survey-form-section {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 18px;
}

/* K-7464: the type group is named by its legend, not an h2 pointed at by
   aria-labelledby. A rendered legend sits outside the fieldset's flex flow,
   so it takes the cards' gap (`.po-outcomes`) as its own margin. */
.survey-form-section > legend {
  margin-bottom: 10px;
  padding: 0;
}

.survey-form-kinds {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.survey-sms-bubble {
  background: var(--bg);
  border-radius: 14px;
  font-size: var(--fs-field-value);
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding: 12px 14px;
}

.survey-sms-link {
  color: var(--info);
}

.survey-sms-counter.is-over b {
  color: var(--warning);
}

@container survey-form (max-width: 52rem) {
  .survey-form-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@container survey-form (max-width: 36rem) {
  .survey-form-kinds {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* K-6180 (NCR design N6, mockup `Vedlys-6M`): the choice card -- one of
   two or three big ways into a step, a bold title over a grey line.
   `link-button` on the element keeps the `button[type="submit"]` safety
   net off it; `--primary` is the suggested way (brand outline, warm tint). */
.choice-card-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.link-button.choice-card {
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  font: inherit;
  gap: 6px;
  padding: 16px;
  text-align: left;
  text-decoration: none;
}

.link-button.choice-card--primary {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
  border: 2px solid var(--brand);
  padding: 15px;
}

.link-button.choice-card:hover {
  border-color: var(--brand);
}

.choice-card b {
  font-size: 0.9375rem;
  font-weight: 600;
}

.choice-card > span {
  color: var(--muted);
  font-size: var(--fs-field-value);
  line-height: 1.4;
}

/* K-6180: the AI's proposal inside a step -- a dashed amber frame on the
   lightest warm tint, its label in brand brown. Rule 7: the AI proposes
   here, a person's button decides. */
.ai-suggestion {
  background: color-mix(in srgb, var(--brand-tint) 15%, var(--surface));
  border: 1px dashed color-mix(in srgb, var(--brand) 55%, var(--surface));
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
}

.ai-suggestion > *,
.ai-suggestion [role="status"] > * {
  margin: 0;
}

.ai-suggestion-label {
  color: var(--brand-dark);
  font-size: 0.75rem;
  font-weight: 500;
}

@media (max-width: 720px) {
  .choice-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* K-6180: the 6M wizard's own layout -- the start card in the left column
   and the category step in the right one, as the mockup places them; one
   column on a phone. */
.six-m-wizard-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.six-m-wizard-layout > .six-m-wizard-step {
  grid-column: 2;
}

.six-m-wizard-layout .card-heading,
.six-m-wizard-finish .card-heading {
  align-items: baseline;
  margin: 0;
}

.six-m-wizard-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.six-m-wizard-title {
  font-size: 1.25rem;
}

.six-m-wizard-lead {
  font-size: var(--fs-control);
  line-height: 1.55;
}

.six-m-wizard-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.six-m-wizard-strip .registry-badge {
  margin: 0;
  min-height: 28px;
  text-decoration: none;
}

.six-m-wizard-strip .registry-badge:not([class*="registry-badge--"]) {
  background: color-mix(in srgb, var(--rail-bg) 60%, var(--surface));
}

/* K-8649: the closing step's primary-cause choice is one sentence per row,
   not `.task-row`'s 4-column grid -- that squeezed the label into its first
   column and broke the category name mid-word ("Įran ga"). */
#six-m-wizard-primary-choice .task-row {
  grid-template-columns: minmax(0, 1fr);
}

.six-m-wizard-primary-category {
  flex-shrink: 0;
  white-space: nowrap;
}

.six-m-wizard-field-label {
  font-size: var(--fs-field-value);
  font-weight: 500;
}

.six-m-wizard-evaluate {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.six-m-wizard-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
}

@media (max-width: 720px) {
  .six-m-wizard-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .six-m-wizard-layout > .six-m-wizard-step {
    grid-column: auto;
  }

  .six-m-wizard-strip .registry-badge,
  .six-m-wizard-layout .button-small.link-button,
  .six-m-wizard-layout .button-small.button-secondary {
    min-height: 44px;
  }
}

/* K-6068 (Core design B1): the Core mockups' own components
   (saltiniai/branduolys-maketai/html/*.dc.html <helmet><style>), under
   the mockups' class names so B2-B8 can lift markup as drawn. Only
   existing tokens: the mockups' warm greys and tints are the nearest
   token or a color-mix of two tokens, the way the NCR `.st` tile above
   derives its tint -- no new hue. */

/* `.av` -- initials in a round tint; 32px, `.sm` 28px (lists), `.lg` 44px
   (a person's card head). */
.av {
  align-items: center;
  background: color-mix(in srgb, var(--brand-tint) 70%, var(--rail-bg));
  border-radius: 50%;
  color: var(--brand-dark);
  display: inline-flex;
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.av.sm {
  font-size: var(--fs-field-label);
  height: 28px;
  width: 28px;
}

.av.lg {
  font-size: 0.9375rem;
  height: 44px;
  width: 44px;
}

/* `.wk` -- the week switcher: previous | current | next in one 40px
   outlined box; the current week is a `<b>` between two hairlines. */
.wk {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  display: inline-flex;
  height: var(--control-h);
  overflow: hidden;
}

.wk a {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: var(--fs-control);
  gap: 4px;
  height: 100%;
  padding: 0 12px;
  text-decoration: none;
}

.wk a:hover {
  background: var(--bg);
  color: var(--text);
}

.wk b {
  align-items: center;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display: inline-flex;
  font-size: var(--fs-control);
  font-variant-numeric: tabular-nums;
  height: 100%;
  padding: 0 12px;
}

/* `.seg` -- a two-or-three-way view switch (Cards | Table); the chosen
   one is `.on` (or `aria-current`) on a warm tint. */
.seg {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  display: inline-flex;
  padding: 2px;
}

.seg a {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--muted);
  display: inline-flex;
  font-size: var(--fs-field-value);
  height: 32px;
  padding: 0 12px;
  text-decoration: none;
}

.seg a.on,
.seg a[aria-current] {
  background: color-mix(in srgb, var(--brand-tint) 70%, var(--rail-bg));
  color: var(--text);
  font-weight: 600;
}

/* Phone: both switches are touch targets, 44px (K-45). */
@media (max-width: 720px) {
  .wk {
    height: 44px;
  }

  .seg a {
    height: 44px;
    justify-content: center;
    min-width: 44px;
  }
}

/* `.ql` -- a report section's label ("01 What is going on" .. "04"). */
.ql {
  color: var(--brand-dark);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* `.prio` -- the week's priority, set apart on a light warm tint. */
.prio {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
  border: 1px solid var(--brand-tint);
  border-radius: 10px;
  padding: 12px 14px;
}

/* `.blk` -- "02 What is blocking me" on red; the template renders it only
   when the answer is not empty. */
.blk {
  align-self: start;
  background: var(--danger-bg);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}

.blk .ql {
  color: var(--danger);
}

/* K-6530 (Finansai F1): the Finansai mockups' red bar with a leading
   warning icon -- `.blk.actions` keeps the icon beside its sentence instead
   of wrapping it onto a line of its own. */
.blk.actions {
  flex-wrap: nowrap;
  gap: 10px;
}

.blk.actions > svg {
  flex: none;
}

/* `.cell` -- one week in the trends grid, 28px (`.sm` 14px in the legend):
   `.c-s` on time, `.c-p` late, `.c-n` not written, `.c-l` not due yet
   (dashed), `.c-x` no data. `.flag` is the red dot for a flagged 02/04. */
.cell {
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  display: inline-block;
  height: 28px;
  position: relative;
  width: 28px;
}

.cell.sm {
  border-radius: 4px;
  height: 14px;
  width: 14px;
}

.cell.c-s {
  background: var(--success-bg);
  border: 1px solid color-mix(in srgb, var(--success) 25%, var(--success-bg));
}

.cell.c-p {
  background: var(--warning-bg);
  border: 1px solid color-mix(in srgb, var(--warning) 25%, var(--warning-bg));
}

.cell.c-n {
  background: var(--danger-bg);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--danger-bg));
}

.cell.c-l {
  background: var(--surface);
  border: 1px dashed var(--line-strong);
}

.cell.c-x {
  background: var(--rail-bg);
  border: 1px solid var(--line);
}

.flag {
  background: var(--danger);
  border: 2px solid var(--surface);
  border-radius: 50%;
  height: 8px;
  position: absolute;
  right: -3px;
  top: -3px;
  width: 8px;
}

/* w3-note-to-worker-1-the-card-wrap-rule-breaks-single-words-in-every-
   registry-table.md (2026-08-16): `.card`'s own `overflow-wrap: anywhere`
   above is an inherited property, so it reaches every table nested in a
   card too -- inside a table that collapses the column's min-content width
   to one character, letting `table-layout: auto` (`.registry-table`'s own
   default) squeeze the column to almost nothing, and then the same rule
   breaks the word to fit the column it just allowed to shrink. Measured:
   the single word "Aktyvus" (no long token, no user-entered content) broke
   as "Akty"/"vus" on every registry screen. Of the three fixes the note
   named, this is the one that keeps the original URL fix (a card can hold
   unpredictable prose) exactly where it was aimed: tables hold short,
   structured cells, not prose, so resetting the property on any table
   inside a card is not a narrower version of the same rule, it is the
   correct scope for it. `table` is enough, not `table *` -- `overflow-wrap`
   is inherited, so cells without their own declaration (every registry
   table cell today) pick up `normal` from their ancestor `<table>` the same
   way they previously picked up `anywhere` from `.card`. A table that
   genuinely does not fit still scrolls (`.registry-table-wrap`'s
   `overflow-x: auto`) instead of cutting a word in half. */
.card table {
  overflow-wrap: normal;
}

/* K-2594 (Gedimino NCR testing session #4, item 2): the investigation
   screen's fine-grained sequence (complaint validity -> methodology ->
   root-cause determination -> conclusion). The list itself is always
   plain, reachable links -- going back is never blocked -- but the
   current step needs to read as "start here" and the sections further
   down the page need to read as done/current/upcoming at a glance. */
/* K-6124 (NCR design N5, saltiniai/ncr-maketai Tyrimas / Tyrimas-vykdomas):
   the investigation screen -- a 280px left column beside the working
   column, one column under 900px. The left column's step list (the same
   `investigation_steps`, K-2594) is one link per step: a round mark (done:
   green check, current: brown number in a brown-framed row, upcoming: grey
   number) and a short line. Every step stays a plain, reachable link --
   going back is never blocked. Tints are token mixes, no new hue. */
.investigation-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: 280px minmax(0, 1fr);
}

/* K-7494: the two columns fold by `<main>`'s own width, not the window's --
   a 1024px window leaves `<main>` ~620px, and beside the 280px column the
   working one was squeezed to ~300px while the 900px window query still saw
   a wide screen. The container is `.page` (a container query cannot restyle
   its own container); the 900px query below stays for browsers without
   `:has()`. The contractor and part cards fold the same way. */
.page:has(> .investigation-layout) {
  container: detail-columns / inline-size;
}

@container detail-columns (max-width: 799px) {
  .investigation-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.investigation-aside,
.investigation-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.investigation-aside-card {
  gap: 8px;
  padding: var(--space-4);
}

/* K-6380: in the 280 px column a long requirement link next to the red
   "Missing" badge shrank the badge, and `.card`'s inherited
   `overflow-wrap: anywhere` then broke the word letter by letter. The
   badge keeps its width; the link text wraps instead. */
.investigation-aside-card .requirement-checklist-item > .registry-badge {
  flex-shrink: 0;
  white-space: nowrap;
}

.investigation-aside > p {
  margin: 0;
}

/* The mockups' `.lbl` -- a small grey label over a value. */
.field-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  margin: 0;
}

.investigation-defect-single {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
}

.investigation-defect-switch {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.investigation-defect-switch a[aria-current] {
  color: var(--text);
  font-weight: 600;
}

.investigation-sequence {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.investigation-sequence-step a {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text);
  display: flex;
  gap: 12px;
  padding: 10px 12px;
}

.investigation-sequence-step a:hover {
  text-decoration: none;
}

.investigation-sequence-step--current a {
  background: color-mix(in srgb, var(--warning-bg) 40%, var(--surface));
  border-color: var(--brand);
}

.investigation-sequence-mark {
  align-items: center;
  background: var(--rail-bg);
  border-radius: 50%;
  color: var(--muted);
  display: inline-flex;
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.investigation-sequence-step--done .investigation-sequence-mark {
  background: var(--success);
  color: var(--surface);
}

.investigation-sequence-step--current .investigation-sequence-mark {
  background: var(--brand);
  color: var(--surface);
}

.investigation-sequence-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.investigation-sequence-title {
  font-size: var(--fs-control);
  font-weight: 600;
}

.investigation-sequence-text small {
  color: var(--muted);
  font-size: 0.75rem;
}

/* The mockup's "Investigation tools" row of small secondary buttons. */
.investigation-tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.investigation-tools form,
.investigation-heading-actions form,
.why-chain-actions form {
  margin: 0;
}

.investigation-heading-actions {
  gap: var(--space-2);
}

.investigation-step-section .card-heading {
  margin-bottom: 0;
}

.investigation-step-section--upcoming {
  background: color-mix(in srgb, var(--bg) 50%, var(--surface));
}

.investigation-step-section--upcoming .card-title {
  color: var(--muted);
}

.investigation-step-section--current,
.investigation-step-section--confirmed {
  border: 2px solid var(--brand);
  padding: 19px 23px;
}

.investigation-step-section--confirmed {
  border-color: var(--success);
}

.investigation-step-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.investigation-step-body > * {
  margin: 0;
}

.investigation-step-body > summary {
  align-self: flex-start;
  cursor: pointer;
  list-style: none;
}

/* K-6380: the upcoming step's "Complete the previous step first -- open to
   work on this anyway." summary is a `link-button button-small`, whose
   shared rule sets `white-space: nowrap`; at 390 px the sentence pushed the
   page 65 px sideways. Wrap it here only -- the shared rule stays nowrap for
   the short row actions. */
.investigation-step-body > summary.link-button {
  text-align: left;
  white-space: normal;
}

/* 6M: six tiles, three per row; the primary cause spans the row in a
   brown frame. */
.six-m-tiles {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.six-m-tile {
  align-items: center;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  display: flex;
  font-size: var(--fs-control);
  gap: var(--space-2);
  justify-content: space-between;
  padding: 12px 14px;
}

.six-m-tile-status {
  color: var(--muted);
  font-size: 0.75rem;
}

.six-m-tile--primary {
  align-items: stretch;
  background: color-mix(in srgb, var(--warning-bg) 40%, var(--surface));
  border: 2px solid var(--brand);
  flex-direction: column;
  grid-column: 1 / -1;
}

.six-m-tile--primary p {
  line-height: 1.5;
  margin: 0;
}

.six-m-tile-head {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.registry-badge.six-m-primary-badge {
  background: var(--brand);
  color: var(--surface);
}

.investigation-card-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  justify-content: space-between;
}

/* 5 Whys: numbered marks joined by a vertical line; the root step's mark
   is brown. */
.why-chain {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.why-chain-step {
  display: grid;
  gap: 14px;
  grid-template-columns: 28px minmax(0, 1fr);
  padding-bottom: 18px;
  position: relative;
}

.why-chain-step:last-child {
  padding-bottom: 0;
}

.why-chain-step:not(:last-child)::before {
  background: var(--rail-bg);
  bottom: -2px;
  content: "";
  left: 13px;
  position: absolute;
  top: 30px;
  width: 2px;
}

.why-chain-mark {
  align-items: center;
  background: var(--text);
  border-radius: 50%;
  color: var(--surface);
  display: inline-flex;
  font-size: var(--fs-field-value);
  font-weight: 600;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.why-chain-step--root .why-chain-mark {
  background: var(--brand);
}

.why-chain-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.why-chain-body p {
  margin: 0;
}

.why-chain-question {
  color: var(--muted);
  font-size: var(--fs-control);
  line-height: 1.5;
}

.why-chain-answer {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.why-chain-answer p {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.why-chain-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-left: -12px;
}

.button-small.link-button.why-chain-delete {
  color: var(--danger);
}

/* Step 3 / 4 and the questions / history pair: two equal cards side by
   side -- steps 3 and 4 only while both still wait (Tyrimas-vykdomas);
   once either is worked on they stack full width (Tyrimas). */
.investigation-pair {
  display: grid;
  gap: var(--space-4);
}

.investigation-pair:has(> .investigation-step-section--upcoming + .investigation-step-section--upcoming),
.investigation-pair--always {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.investigation-final-root-cause {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
}

.investigation-conclusion-text {
  font-size: 0.9375rem;
  line-height: 1.55;
}

.investigation-sources {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The mockups' grey inline box (`#f7f7f5` -- the page background token). */
.soft-box {
  background: var(--bg);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  font-size: var(--fs-field-value);
  gap: 2px;
  padding: 10px 12px;
}

.soft-box br {
  display: none;
}

/* K-8649: each contributing 6M cause on its own line, a step below the primary one. */
:not(.investigation-source-contributing) + .investigation-source-contributing {
  margin-top: var(--space-2);
}

.investigation-history-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-control);
  gap: 10px;
}

@media (max-width: 900px) {
  .investigation-layout,
  .investigation-pair:has(> .investigation-step-section--upcoming + .investigation-step-section--upcoming),
  .investigation-pair--always,
  .investigation-sources,
  .six-m-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .investigation-tools .button-small,
  .investigation-heading-actions .button-small,
  .why-chain-actions .button-small,
  .investigation-step-body > summary {
    min-height: 44px;
  }
}

/* K-2622 (part 2 of the Gedimino session #4, item 2 pair): the badge next
   to a step's own heading, and the `<details>` wrapper that collapses an
   "upcoming" step's body -- see investigation_detail.html's own comment for
   why this is inactive-looking rather than actually blocked. The summary
   line only means anything while collapsed; once a step is done or current
   the `<details>` always renders `open`, so the prompt to "open anyway" is
   hidden rather than left dangling above already-visible content. */
.investigation-step-badge {
  color: var(--brand-dark);
  font-size: 0.85em;
  font-weight: 600;
  margin-left: var(--space-2);
}

/* K-5878 (NCR design 2a): the 6M/5-Whys section badge used to carry its
   own `--in-progress` warning pill (K-4498/K-4767) next to the steps' pill
   -- two looks for one status. Both now render the one `.ncr-status-badge`
   inside this wrapper, so the modifier is gone.

   The 6M summary rows (Method / Machine / ... + status + "Primary cause")
   reused `.task-row`'s 2fr/1fr/auto/auto template: each row is its own
   grid, so a row WITH the "Primary cause" eyebrow shrank its fr tracks and
   its status ("Confirmed") no longer lined up with the rows below
   ("Empty"). Fixed-share tracks keep the status column at the same x in
   every row; at 390 px label and status stay side by side and the
   eyebrow drops under them. */
.task-row.six-m-summary-row {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 720px) {
  .task-row.six-m-summary-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
  }

  .six-m-summary-row > .eyebrow {
    grid-column: 1 / -1;
  }
}

.investigation-step-body[open] > summary {
  display: none;
}

.fishbone-diagram {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.narrow {
  margin: 5rem auto;
  max-width: 420px;
  width: 100%;
}

.eyebrow {
  color: var(--brand-dark);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-heading,
.actions,
.metrics,
.tabs {
  align-items: center;
  display: flex;
  gap: 1rem;
}

.section-heading {
  justify-content: space-between;
}

.section-heading h1 {
  margin-bottom: 0;
}

/* K-10538: a help card's module link above the title is a 44px touch target
   on a phone (K-45); the 0.8rem eyebrow alone made it 16px tall. */
@media (max-width: 720px) {
  .section-heading .eyebrow a {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
}

/* K-3345: page-heading h1 has no wrap rule at all, so a single long word
   (e.g. German compound nouns like "Erinnerungswarteschlange") pushes
   body.scrollWidth past the viewport instead of breaking, causing
   horizontal scroll on narrow screens. */
.page-heading h1,
h1 {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* K-6578: a `<button>` does not inherit the page font -- the UA stylesheet
   gives form controls their own (Arial on Windows), so every
   `<button type="button" class="button-secondary">` read in Arial next to an
   Outfit `<a class="button">`. Only `.link-button`/`.button-link` carried
   `font: inherit`. Family only, at type specificity: sizes and weights stay
   with the button rules below. */
button {
  font-family: inherit;
}

/* Finding 185: button height/padding/text size ported verbatim from the old
   system's .lp-btn (leoprint-platform@0fe3d84 app/static/css/lp.css:789-798
   — padding 8px 14px, font-size 13px). The new app rendered visibly taller,
   fatter buttons than the old one at identical zoom; this is the fix. */
/* K-5927 (NCR design N1): the NCR mockups' `.btn` geometry
   (saltiniai/ncr-maketai/html/Main.dc.html) for every button in the app --
   40px tall, 8px radius, 14px/500 text; `.button-small` is the 32px step.
   Same values on `.button`, the self-sufficient modifiers below and the
   `button[type="submit"]` safety net, so the three ways to build a button
   still compute one size. */
.button {
  align-items: center;
  background: var(--brand);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: #fff;
  display: inline-flex;
  font-size: var(--fs-control);
  font-weight: 500;
  gap: var(--space-2);
  justify-content: center;
  line-height: 1.2;
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  text-decoration: none;
  white-space: nowrap;
}

.button:hover {
  background: var(--brand-dark);
  color: #fff;
}

/* Package 0d item 1 (owner acceptance pass, 2026-08-03): "Ištrinti" (bare
   `button-danger`, no `.button` class) measured 69x33; "Archyvuoti"
   (`button button-small button-danger`) measured 84x28 — five pixels
   apart, the owner's own "almost the same" complaint. Root cause: these
   two modifier classes carried colour only, so a bare one only rendered at
   full size by the accident of also being a `<button type="submit">` (the
   safety net two rules below). Anything else falls through unstyled —
   `bo/absences/request_form.html` (worker 2's folder, not edited here)
   already carries the missing case live: `type="button"` buttons wearing
   only `button-secondary`, which match neither `.button` nor the safety
   net. Two ways to build one control, the same defect class the gallery's
   Delete/Archive pair demonstrated. Made both modifiers self-sufficient
   here so any element carrying one alone — button, link, any `type` —
   computes the same base size as when `.button` is present too, pinned by
   `ButtonModifierSelfSufficiencyTests` in test_gallery_review.py. */
.button-secondary,
.button-danger {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--fs-control);
  font-weight: 500;
  gap: var(--space-2);
  justify-content: center;
  line-height: 1.2;
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  text-decoration: none;
  white-space: nowrap;
}

/* K-5927: the mockups' secondary `.btn` -- white, a neutral 16% line and
   body-coloured text, so the one gold primary on a page is the only gold. */
.button-secondary {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
}

.button-secondary:hover {
  background: var(--bg);
  color: var(--text);
}

/* K-5463 (Gedimino NCR audit K1): the `button[type="submit"]` safety net near
   the end of this file out-specifies a bare `.button-secondary`, so every
   `<button type="submit" class="button button-secondary">` -- the 6M wizard's
   "Skip (not applicable)", "Reject AI hypothesis" ... -- rendered as the same
   solid gold as the one real primary action next to it. Same
   out-specificity duplicate `.button-danger` carries below; `:not(:disabled)`
   keeps it from out-ranking the flat disabled look further down. */
button[type="submit"].button-secondary:not(.link-button):not(.button-link):not(.task-row-button):not(:disabled) {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
}

button[type="submit"].button-secondary:not(.link-button):not(.button-link):not(.task-row-button):not(:disabled):hover {
  background: var(--bg);
  color: var(--text);
}

/* K-4979 (INBOX 2026-09-17, PR #2440 R1): defect switches in
   investigation_detail.html mark the current defect with
   `aria-current="page"` on a `.button-secondary`, but nothing styled that
   attribute -- the current defect looked identical to the others. Reuses
   the brand tokens instead of introducing a `.button-primary` class that
   does not otherwise exist in this codebase. */
.button[aria-current="page"] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--surface);
}

.button[aria-current="page"]:hover {
  background: var(--brand);
  color: var(--surface);
}

/* Component gallery (§0 RULE 4): cataloguing "buttons in every variant"
   found three variants already used in bo/safety/ templates (worker 2's
   folder, not edited here — certificate_list.html, finding_list.html,
   matrix_catalog_list.html, test_questions.html, training_template_list.html)
   with no rule of their own anywhere in this file. Each silently fell
   through to the `button[type="submit"]` safety net below and rendered as
   an ordinary brand-gold button — `.button-small` never actually shrank
   (that selector's specificity loses to the safety net's), and the
   "Dismiss"/"Archive" danger actions looked identical to a normal save.
   `.button-danger`'s tint-by-default, solid-on-hover treatment follows the
   old system's own precedent for a dangerous action (docs/reference/
   senoji-lp.css .lp-badge--danger / .lp-ricon.is-danger — there is no solid
   red button anywhere in that file to copy instead). The `button[type=
   submit]...` duplicates below exist only to out-specificity the safety net
   for the four bare `<button>` cases named above; `.button-small`/
   `.button-danger` alone cover every `<a class="button ...">` case. */
.button-small,
button[type="submit"].button-small:not(.link-button):not(.button-link):not(.task-row-button) {
  font-size: var(--fs-field-value);
  min-height: var(--btn-h-sm);
  padding: 0 var(--btn-pad-x-sm);
}

/* K-5927: the mockups' ghost `.btn.g` -- `link-button` on a button-sized
   control (`button link-button`, or `link-button button-small` for the row
   and AI actions). A bare `.link-button` stays the inline text link it has
   always been; only the combination is button-shaped. */
.button.link-button,
.button.button-link,
.button-small.link-button,
.button-small.button-link {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--muted);
  display: inline-flex;
  font-weight: 500;
  gap: var(--space-2);
  justify-content: center;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.button.link-button,
.button.button-link {
  font-size: var(--fs-control);
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
}

.button-small.link-button,
.button-small.button-link {
  font-size: var(--fs-field-value);
  min-height: var(--btn-h-sm);
  padding: 0 var(--btn-pad-x-sm);
}

.button.link-button:hover,
.button.button-link:hover,
.button-small.link-button:hover,
.button-small.button-link:hover {
  background: var(--bg);
  color: var(--text);
}

/* K-5927: the AI button -- one look on every screen (inventory rule 7):
   an amber outline with a star in front. Pair it with `button-secondary`
   (or `link-button button-small` for a row action); it only recolours. */
.button-ai,
button[type="submit"].button-ai:not(.link-button):not(.button-link):not(.task-row-button):not(:disabled) {
  background: var(--surface);
  border-color: var(--brand);
  color: var(--brand-dark);
}

.button-ai::before {
  content: "\2726";
  font-size: var(--fs-field-value);
  line-height: 1;
}

.button-ai:hover,
button[type="submit"].button-ai:not(.link-button):not(.button-link):not(.task-row-button):not(:disabled):hover {
  background: var(--brand-tint);
  color: var(--brand-dark);
}

.button-danger,
button[type="submit"].button-danger:not(.link-button):not(.button-link):not(.task-row-button) {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

.button-danger:hover,
button[type="submit"].button-danger:not(.link-button):not(.button-link):not(.task-row-button):hover {
  background: var(--danger);
  color: #fff;
}

/* Parity finding 174: header action groups (e.g. NCR "Back to NCR" /
   "Add 6M cause" / "Root-cause summary") used to wrap long labels onto a
   second line, so buttons in the same row read as uneven heights. Every
   .button now renders on one line (white-space: nowrap above) and the
   group itself wraps as whole buttons onto a new row instead. */
.actions {
  flex-wrap: wrap;
}

/* koordinatoriaus-nota-w3-people-filtru-eilute-roliu-helpas-mygtuku-vardai.md
   §3: the owner asked for a sentence under each of `/people/`'s two
   create-a-person buttons, saying when to reach for which. A button plus its
   caption is taller than a bare button, and `.actions`'s own
   `align-items: center` (the shared rule above) would then float the plain
   buttons beside it in the middle of the taller row. `--hinted` is opt-in
   rather than a change to `.actions` itself, so the dozens of action rows
   with no captions keep the centring they were built with. */
.actions--hinted {
  align-items: flex-start;
}

/* K-7124: a table row's own actions (Redaguoti + Archyvuoti) on one line.
   `.actions` wraps, and inside an auto-width table cell that wrap is what
   the column's min-content width is measured by -- so the buttons stacked
   and every row grew to twice its height. */
.actions--nowrap {
  flex-wrap: nowrap;
}

.action-with-hint {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  /* The caption wraps to a readable measure instead of running the width of
     the header; the button inside keeps its own width via align-items above,
     since `.button`'s `white-space: nowrap` must not be stretched to this. */
  max-width: 260px;
}

/* Worker 3, flagged live on /warehouse/stock/ (2026-08-03, flow-warehouse
   rehearsal): two adjacent sibling <form> elements, each ending in its own
   .actions row, rendered with zero gap between them — "Taikyti filtrus" and
   "Spausdinti pasirinktų etiketes" sat on the same y-coordinate and read as
   one broken control. .actions itself only sets flex-wrap, and a form has no
   margin of its own, so nothing separates two forms placed back to back
   regardless of which module renders them. A single form's own internal
   spacing (.field's margin-bottom, .form-grid's gap) is unaffected — this
   only fires when a *second* form immediately follows a first one. */
form + form {
  margin-top: 1rem;
}

/* Worker 3, 2026-08-11: the owner reported the two "Pašto kanalo testai"
   buttons on /organization/settings/company/ as visibly uneven. Measured
   live rather than guessed (tools/company_settings_layout_probe_playwright.py):
   both buttons are exactly 34px tall and the SECOND one sits 8px lower —
   the rule above fires between them, because each test is its own <form> and
   the two forms are flex items of one .actions row. .actions centres its
   items, so a 16px top margin on the second item moves it half that down and
   the pair reads as two different buttons.

   Inside .actions the margin is double-counted anyway: the row already sets
   `gap: 1rem`, which separates wrapped rows in exactly the amount the rule
   above was written to provide, so zeroing it here costs the stacked case
   nothing (measured: /warehouse/findings/, whose two forms carry a reason
   input and genuinely stack, keeps a 120px separation instead of 136px).
   The rule above still applies everywhere it was written for — two forms
   placed back to back in a card, which is not this shape. */
.actions > form + form {
  margin-top: 0;
}

/* One value per row where a half-width cell cannot show it. `.form-grid` is
   two columns inside a 700px `.form-card`, i.e. ~317px per control, which
   renders about 48 characters; a Secret Manager reference
   (`projects/leoprint-bo-dev/secrets/leoprint-smtp-password/versions/latest`)
   laid out at 445px and a logo URL at 452px, so both were clipped with no
   scrollbar and no wrap — the owner's "one field does not show its own
   content". Which fields get this is decided by the form, not by the
   template: see CompanySettingsForm.wide_field_names. */
.field-wide {
  grid-column: 1 / -1;
}

/* K-3000 (owner audit 2026-09-05, Administravimas > Įmonė > Rekvizitai):
   the one company-settings form is three parts — company details, mail,
   advanced — inside one 700px `.form-card`. A part is a heading and a
   `.form-grid`; the advanced part is a `<details>` closed by default, so
   the JSON template map and the secret-store references are one tap away
   instead of in the middle of the address block. The summary is the tap
   target on a phone, hence the 44px floor (K-45). Spacing is on the
   8 · 16 · 24 · 32 scale. */
.settings-section + .settings-section {
  border-top: 1px solid var(--line);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
}

.settings-section h2 {
  font-size: var(--fs-section-title);
  font-weight: 600;
  margin: 0 0 var(--space-4);
}

.settings-advanced > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: var(--fs-section-title);
  font-weight: 600;
  min-height: 44px;
}

/* K-7302 (mockups I-Rekvizitai / I-Redaguoti): the company part as four
   cards in two columns -- company, address, contacts and defaults, brand.
   Locked, each card is a `.kv` list of label and value; editing, the same
   card holds a `.form-grid` of the fields in pairs. The group title is the
   mockup's small uppercase label. Below 720px the cards stack. */
.company-groups {
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.company-group-title {
  color: var(--muted);
  font-size: var(--fs-field-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-4);
  text-transform: uppercase;
}

.company-settings-form {
  display: grid;
  gap: var(--gap-stack);
}

.company-missing,
.company-mail-line {
  align-items: center;
  display: flex;
  gap: 10px;
}

.company-missing > svg,
.company-mail-line > svg {
  flex: none;
}

.company-mail-line {
  flex-wrap: wrap;
  font-size: var(--fs-field-value);
  gap: var(--space-2);
  margin: 0;
}

.company-swatch-row {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

.company-swatch {
  flex: none;
}

.company-swatch rect {
  stroke: var(--line-strong);
}

.company-swatch-row code {
  font-size: 0.75rem;
}

/* The mockup's white save bar: Cancel and Save on the right, closing the
   form. */
.company-save-bar {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  padding: 12px 16px;
}

@media (max-width: 720px) {
  .company-groups {
    grid-template-columns: minmax(0, 1fr);
  }

  /* K-7448: once the cards stack, every field spans its card, and the
     phone's 200px `.fw-phone` cap left it ~60% as wide as its row-mates. */
  .company-groups .fw-phone {
    max-width: none;
  }
}

/* Finding 188 (owner: clicking a tab swaps the whole button set and he loses
   his place). Standing design law for any tabbed module page: .actions in
   the page header is the PRIMARY row — it never changes when the active tab
   changes. .tab-actions is a SECOND row, rendered once per tab immediately
   below the .tabs nav, holding only that tab's own actions; it may be empty
   or absent on tabs with nothing of their own. Same button/gap/wrap rules as
   .actions, plus a top rule to read visually as "belongs to the tab below
   it", not as a continuation of the fixed header above. See
   docs/architecture/p13-visual-parity.md for the full sizing law. */
.tab-actions {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1rem;
}

.metrics {
  flex-wrap: wrap;
  margin: 1.5rem 0;
}

.metrics span {
  background: var(--bg);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.8rem;
}

.tabs {
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

/* Typography scale (WORK QUEUE package 2): tab labels had no font-size
   rule of their own at all, so they rendered at the browser default
   (16px) — visibly larger than every other piece of shell chrome around
   them, and part of why the app reads "coarser" than the old system at
   identical zoom. */
.tabs a {
  border-bottom-color: transparent;
  border-bottom-style: solid;
  border-bottom-width: 3px;
  color: var(--muted);
  font-size: var(--fs-tab-label);
  font-weight: 500;
  min-height: 44px;
  /* K-4096 (K-3814 C7): DE/PL module-tab labels run longer than the LT/EN
     originals ("Debt statements" -> "Schuld-Kontoauszüge", "Receiving
     attention" -> "Wareneingangs-Hinweise") and some are a single compound
     word with no space to wrap at. `.module-tabs`'s own `flex-wrap: wrap`
     already lets the row grow to a second line rather than force the page
     wider, but a lone unbreakable word inside one tab still has no line to
     wrap onto — `overflow-wrap: break-word` gives it one, without changing
     how any word that already fits renders. */
  overflow-wrap: break-word;
  padding: 0.7rem 0;
  text-decoration: none;
}

/* Package 0d item 2 (owner acceptance pass, 2026-08-03): the owner reported
   module tabs "turn brown and the colour does not come back". Live
   verification with a real pointer found no stuck-hover bug at all — hover
   restores correctly the moment the pointer leaves. The real defect is a
   hierarchy inversion: a merely-hovered tab painted rgb(125,91,21) (this
   var(--brand-dark)) while the genuinely active tab painted rgb(26,26,26)
   (var(--text)) with only a 3px border to set it apart — hover was louder
   than selection, and both lived in the same brand-brown family. Hover now
   moves toward the same near-black text as active (the brand hue stays
   reserved for "this tab is selected") and is told apart from plain
   inactive by two weaker signals — a background tint and a neutral,
   not-brand-coloured underline — never by colour alone, the same §0 lesson
   the disabled-control fix (Package 0b item 1) already applied to buttons
   and fields. Border reserved as three longhands (not the `border-bottom`
   shorthand) on the base rule above so this rule's own
   `border-bottom-color` override composes correctly instead of being read
   as an unrelated property by `test_gallery_review.py`'s declaration-level
   guard. */
.tabs a:hover {
  background: var(--bg);
  border-bottom-color: var(--line-strong);
  color: var(--text);
}

/* The active tab must win even while hovered — .tabs a:hover and .tabs
   a.active share equal specificity, so which one's border-bottom-color
   "wins" when both apply would otherwise depend on source order alone, the
   exact kind of fragile tie this project's own history has been burned by
   before (see Package 0c's combined today+selected day-cell rule). Declared
   explicitly instead of relying on it, and pinned by
   test_hover_active_hierarchy in test_gallery_review.py. */
.tabs a.active,
.tabs a.active:hover {
  border-bottom-color: var(--brand);
  color: var(--text);
  font-weight: 600;
}

/* SIENA V5 §5 (koordinatoriaus-nota-w1-siena-v5-grandine-ir-tabai.md):
   "Radiniai"'s own beta mark -- the note's own words, "tas pats
   mechanizmas kaip tavo beta žymos notoje". Same muted/quiet styling as
   `.nav-beta-mark` (#TOOLS-43), a distinct class rather than a shared one
   because a tab label and an L2 nav link are different DOM contexts (this
   one needs no `flex-shrink`, sits inline in running text instead). */
.tab-beta-mark {
  background: var(--warning-bg);
  border-radius: var(--radius-pill);
  color: var(--brand-dark);
  font-size: var(--fs-field-label);
  font-weight: 600;
  margin-left: 0.4rem;
  padding: 1px 7px;
  text-transform: uppercase;
  vertical-align: 0.1rem;
}

/* w3-note-to-worker-1-tarpas-skaiciuojamas-du-kartus-2026-08-12.md's other
   half (`.page > *`, not just `.field`): `{% module_tabs %}`
   (operations/_module_tabs.html) is the ONE place this markup renders, and
   it is always the first thing inside `{% block content %}`, i.e. always a
   direct child of `<main class="page">` (base.html:389) -- `.page`'s own
   `gap: 1rem` (above) already spaces it from whatever follows, so this
   rule's own margin-bottom was a second 1rem stacked on top of that gap.
   Measured live: 32px on `/purchasing/` and `/logistics/parts/`, 53px on
   `/logistics/receiving/attention/` (32px + that screen's own `h1`
   margin-top, untouched here). Explicit `margin-bottom: 0`, not just a
   deleted declaration -- `.module-tabs` shares `nav.tabs`'s own
   `margin-bottom: 0.5rem` (below) via its base `.tabs` class, and simply
   removing the 1rem override left that 0.5rem still stacking on `.page`'s
   gap (measured 24px, not the canon's clean 16px, on the first pass of
   this fix). */
.module-tabs {
  flex-wrap: wrap;
  gap: 0 1.25rem;
  margin-bottom: 0;
}

/* Finding 160 proposal (owner review pending, opt-in via ?tabs=): two
   alternatives to the default tab row, on any module, for one request. */
.module-tabs--segmented {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  display: inline-flex;
  gap: 0;
  padding: 0.25rem;
}

.module-tabs--segmented a {
  border-radius: var(--radius-pill);
  color: var(--muted);
  padding: 0.45rem 1rem;
}

.module-tabs--segmented a:hover {
  color: var(--brand-dark);
}

.module-tabs--segmented a.active {
  background: var(--surface);
  border-bottom: 0;
  box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
  color: var(--brand-dark);
  font-weight: 700;
}

.module-tabs--dropdown {
  border-bottom: 0;
  max-width: 320px;
}

.module-tabs--dropdown select {
  font-weight: 700;
}

.tab-badge,
.nav-badge {
  background: var(--brand);
  border-radius: var(--radius-pill);
  color: #fff;
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  min-width: 1.1rem;
  padding: 0.2rem 0.35rem;
  text-align: center;
  vertical-align: middle;
}

/* K-6596: a tab counting overdue work (Mano > Užduotys) -- red, not brand. */
.tab-badge--danger {
  background: var(--danger);
}

.task-list {
  display: grid;
}

/* koordinatoriaus-nota-w4-ui-pluostas.md item 5 / koordinatoriaus-nota-w1-
   ui-pluostas.md item 4 (UI_KANONAS_v1.md, 2026-08-12): a row was one
   `<span>` (subject + a single combined "From X · opened" <small> line)
   plus a trailing `<time>` -- readable at a glance, but "sender" and
   "reviewed" lived in the same line of text with no column of their own,
   so a wide inbox read as one long undifferentiated button rather than a
   scannable list. Four explicit columns instead: subject grows, sender and
   status get their own fixed-ish lanes, date sits right-aligned like every
   other list screen's date column in the kanon's own §3 rule (text left,
   numbers/dates right). `.task-row--sent` (the "Išsiųsta" tab, same
   template) has no per-row status column -- its own meta text already
   carries "N of M responded" -- so it gets a 3-column variant. */
.task-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: inherit;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(160px, 2fr) minmax(120px, 1fr) minmax(72px, auto) auto;
  padding: var(--space-4) 0;
  text-decoration: none;
}

.task-row--sent {
  grid-template-columns: minmax(160px, 2fr) minmax(160px, 1.5fr) auto;
}

/* K-5387 (Gedimino NCR session, Y4): the 5 Whys wizard's AI-suggestion rows
   (candidate answers/root causes, `investigation_five_why_wizard.html`)
   reused `.task-row` for a JS-built [badge?] + "Use this" button + text
   line -- but `.task-row`'s own 4-column `grid-template-columns` is sized
   for a completely different shape (subject/sender/status/date) and is
   always fully allocated regardless of how many children a row actually
   has. A candidate answer WITHOUT the optional "AI: leads deeper" badge has
   only 2 grid items (button, text) against 4 reserved column tracks, so the
   text landed in the narrow 120px/1fr second track instead of spanning the
   row -- it visibly shrank next to a sibling candidate that did carry the
   badge. A plain wrapping flex row does not care how many children a given
   instance has. */
.ai-suggestion-row {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  padding: var(--space-4) 0;
}

/* K-2596 (Gedimino 4th NCR testing session, item 5): the 6M list used to lay
   description, confirmed/accepted status and AI confidence out as
   side-by-side grid columns (`.task-row`'s own 4-column template) -- for an
   investigation, "what the cause might be" and "whether it is confirmed" are
   steps in a sequence, not independent facts to compare side by side, so a
   wide screen read as several unrelated columns of text with no indication
   which fed into which. Each 6M cause is now one vertical flow of four
   labelled steps -- category, possible cause, investigation/evidence,
   decision -- read top to bottom the same order the investigation itself
   proceeds in, instead of the generic `.task-row` grid. */
.six-m-flow-row {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) 0;
}

.six-m-flow-step {
  border-left: 3px solid var(--line);
  display: grid;
  gap: 0.15rem;
  padding-left: var(--space-4);
}

.six-m-flow-step--evidence.is-confirmed {
  border-left-color: var(--success);
}

.six-m-flow-step--evidence.is-ruled-out {
  border-left-color: var(--danger);
}

.six-m-confidence {
  display: grid;
  gap: 0.2rem;
}

.six-m-confidence-track {
  background: var(--bg);
  border-radius: var(--radius-pill);
  height: 0.5rem;
  overflow: hidden;
}

.six-m-confidence-fill {
  display: block;
  height: 100%;
}

.six-m-confidence-fill.is-plausible {
  background: var(--success);
}

.six-m-confidence-fill.is-not-plausible {
  background: var(--danger);
}

/* K-1878 (Gedimino §3 items 2-3): the confirm button hides until the
   checkbox beside it is ticked (JS toggles `hidden`, mirroring the
   "View example" toggle) so the one clear action a person needs is not
   competing with "Edit" and "Accept AI suggestion" before it is relevant. */
.six-m-primary-confirm {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

/* K-1247: the per-file row a chosen/queued NCR evidence file gets, on both
   the registration form and the NCR detail upload widget. `.task-row`/
   `.task-list` carry the grid and spacing; this only tightens the top
   margin so the list sits close under its input and narrows the row to its
   two actual columns (name+meta, status+remove). */
.ncr-evidence-list {
  margin-top: var(--space-2);
}

.ncr-evidence-row {
  grid-template-columns: minmax(160px, 2fr) auto;
}

/* K-5892: registry cells that must stay one line -- the NCR number, the
   short type word, the open-action count -- and the ones that may be cut
   with an ellipsis instead of wrapping (the registration date, the party
   column's type line and the internal type word / discovery location).
   Author, party and defect wrap instead -- see K-6062 below. */
.ncr-list-table .ncr-list-nowrap {
  white-space: nowrap;
}

.ncr-list-table .ncr-list-line {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* K-6062: author, party and defect are read in full, as in the mockup --
   they wrap to a second line and are cut only past it (full text in the
   cell's `title`). The defect cell's 6M line uses the same class; its text
   is short and carries no `title`. */
.ncr-list-table .ncr-list-wrap {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
}

/* K-6022 (NCR design N2, mockup `Registras`): the registry is one card --
   a single filter line, quick filters, a fixed-layout table whose cells cut
   with an ellipsis instead of wrapping, then the status legend and pager.
   Sizes are the mockup's own (`saltiniai/ncr-maketai/html/Registras.dc.html`). */
.ncr-page-crumb {
  color: var(--muted);
  font-size: var(--fs-field-value);
  margin: 0 0 6px;
}

.ncr-registry {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 20px var(--space-6) var(--space-2);
}

.ncr-registry form {
  display: grid;
  gap: var(--space-2);
}

.ncr-registry-filter-row {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The five filters share one line and give way before they wrap: the
   mockup's widths are each cell's basis, `min-width` its floor. */
.ncr-registry-filter-row > .registry-filter-grid {
  align-items: flex-end;
  display: flex;
  flex: 1 1 600px;
  gap: 12px;
}

.ncr-registry .registry-filter-grid label,
.ncr-registry-more-grid label {
  font-size: 0.75rem;
  gap: 6px;
  letter-spacing: 0;
  text-transform: none;
}

.ncr-registry-filter-row .registry-filter-grid > label {
  flex: 0 1 150px;
  min-width: 110px;
}

.ncr-registry-filter-row .registry-filter-grid > .registry-search {
  flex: 1 1 280px;
  min-width: 160px;
}

.ncr-registry-filter-row .registry-filter-grid > label:nth-child(3) {
  flex-basis: 190px;
}

.ncr-registry-filter-row .registry-filter-grid > label:nth-child(5) {
  flex-basis: 130px;
}

.ncr-registry-filter-row > .actions {
  flex-wrap: nowrap;
  margin: 0;
}

.ncr-registry-more > summary {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
}

.ncr-registry-more-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ncr-registry-quick {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ncr-registry-quick .ncr-quick-filter {
  margin: 0;
  text-decoration: none;
}

.ncr-registry-quick .ncr-quick-filter--outline {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.ncr-registry-quick .ncr-quick-filter.is-active {
  box-shadow: inset 0 0 0 1px currentcolor;
  font-weight: 600;
}

.ncr-registry-legacy {
  color: var(--muted);
  font-size: var(--fs-field-value);
  margin-left: auto;
  text-decoration: none;
}

.ncr-list-table td:first-child a {
  text-decoration: none;
}

.ncr-list-table small.ncr-list-line,
.ncr-list-table small.ncr-list-wrap {
  color: var(--muted);
  font-size: 0.75rem;
}

.ncr-list-table .ncr-list-pending {
  color: var(--muted);
  opacity: 0.7;
}

.ncr-list-table .ncr-list-overdue {
  margin: 0 0 0 var(--space-2);
  min-height: 20px;
  padding: 0 8px;
}

.ncr-list-priority {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: var(--fs-field-value);
  gap: 6px;
}

.ncr-list-priority--high {
  color: var(--warning);
}

.ncr-list-priority--critical {
  color: var(--danger);
}

.ncr-list-sr {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (min-width: 721px) {
  .ncr-list-table {
    table-layout: fixed;
  }

  /* The mockup's column widths as shares of its 1296px table, so the
     columns keep their proportions in the narrower content area beside
     the navigation rail; the defect column takes what is left. */
  .ncr-list-table .ncr-col-number {
    width: 15%;
  }

  .ncr-list-table .ncr-col-registered {
    width: 14%;
  }

  .ncr-list-table .ncr-col-origin {
    width: 17%;
  }

  .ncr-list-table .ncr-col-priority {
    width: 10%;
  }

  .ncr-list-table .ncr-col-status {
    width: 13%;
  }

  .ncr-list-table .ncr-col-actions {
    width: 8%;
  }

  .ncr-list-table .ncr-col-menu {
    width: 52px;
  }

  .ncr-list-table .ncr-list-num {
    text-align: right;
  }

  .ncr-list-table td.ncr-list-menu {
    padding: 0 4px;
  }
}

/* K-6900: on a 1366-1440 screen the party column fell to ~117 px and broke
   "VITTO TEA BOARD s.r.o." into two lines; below 1500 it takes its width
   from the defect, number and status columns (the defect wraps to two lines
   already). */
@media (min-width: 721px) and (max-width: 1499px) {
  .ncr-list-table .ncr-col-number {
    width: 14%;
  }

  .ncr-list-table .ncr-col-registered {
    width: 13%;
  }

  .ncr-list-table .ncr-col-origin {
    width: 22%;
  }

  .ncr-list-table .ncr-col-status {
    width: 12%;
  }
}

.ncr-registry-foot {
  border-top: 1px solid var(--line);
  color: var(--muted);
  flex-wrap: wrap;
  font-size: var(--fs-field-value);
  margin-top: 0;
  padding: 12px 0 var(--space-2);
}

.ncr-status-legend {
  display: flex;
  flex: 1 1 480px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: var(--space-2) 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ncr-status-legend li {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.ncr-status-legend .registry-badge {
  margin: 0;
  min-height: 20px;
  padding: 0 8px;
}

.ncr-registry-pages {
  align-items: center;
  display: flex;
  flex: none;
  gap: 12px;
  white-space: nowrap;
}

.ncr-registry-pages .registry-page-sizes a {
  min-height: 32px;
  min-width: 32px;
}

.ncr-registry-foot .button[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

/* Phone: the filter line stacks, every chip and pager button is a 44px
   touch target (K-45), the table becomes `rt-cards` cards. */
@media (max-width: 720px) {
  .ncr-registry {
    padding: var(--space-4);
  }

  .ncr-registry-filter-row > .registry-filter-grid {
    align-items: stretch;
    flex-direction: column;
  }

  .ncr-registry-filter-row > .actions {
    width: 100%;
  }

  /* K-6037: mobile_guard measured the "Clear" link at 53x40px -- give it
     the same 44px box as the "More filters" summary. */
  .ncr-registry-filter-row > .actions > .link-button {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  .ncr-registry-more-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ncr-registry-quick .ncr-quick-filter,
  .ncr-registry-foot .button-small {
    min-height: 44px;
  }

  .ncr-registry-legacy {
    margin-left: 0;
  }

  .ncr-registry-filter-row .registry-filter-grid > label:nth-child(n) {
    flex: none;
    min-width: 0;
  }

  .ncr-registry-pages {
    flex: 1 1 100%;
    flex-wrap: wrap;
    white-space: normal;
  }

  .ncr-registry-pages .registry-page-sizes a {
    min-height: 44px;
    min-width: 44px;
  }
}

/* K-5892: a row's secondary commands folded behind one small button (the
   defect row's "⋯", Similar NCRs' "Link"). Native `<details>`, so it opens
   with the keyboard and without JS; the list floats over the rows below. */
.ncr-row-menu {
  position: relative;
}

.ncr-row-menu > summary {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  list-style: none;
  min-height: 44px;
  min-width: 44px;
}

.ncr-row-menu > summary::-webkit-details-marker {
  display: none;
}

.ncr-row-menu-list {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  display: grid;
  min-width: 12rem;
  padding: var(--space-2) 0;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
}

.ncr-row-menu-list > a,
.ncr-row-menu-list button {
  align-items: center;
  display: flex;
  min-height: 44px;
  padding: 0 var(--space-4);
  text-align: left;
  text-decoration: none;
  width: 100%;
}

.ncr-row-menu-list .ncr-row-menu-danger {
  color: var(--danger);
}

/* K-6139: `.registry-table-wrap`'s `overflow-x: auto` also clips vertically,
   so a last-row menu dropping below the table was cut off. Flipping it up
   still clips it when the registry has one row, so while such a menu is
   open the wrap grows by the menu's height (2 x 44px links, the list's
   padding and border, the 4px gap) and the menu fits inside it. The
   document card's "Still waiting" upload menu (K-7293: file input and
   Upload button) is no taller, so it shares the rule. */
.registry-table-wrap:has(.documents-waiting-table tbody tr:nth-last-child(-n + 2) .ncr-row-menu[open]),
.registry-table-wrap:has(.ncr-list-table tbody tr:nth-last-child(-n + 2) .ncr-row-menu[open]) {
  padding-bottom: calc(2 * 44px + 2 * var(--space-2) + 6px);
}

/* K-7246: the stock list's row menu has the same wrap and three links
   (Move, Edit metadata, Archive). Every roll is two `tr` (the row and its
   hidden detail), so `-n + 6` is the last three rolls -- K-7497: the 3-link
   menu is taller than two rolls, so the third-from-last roll's menu also
   reached past the wrap (19px of Archive cut off). */
.registry-table-wrap:has(.stock-list-table tbody tr:nth-last-child(-n + 6) .ncr-row-menu[open]) {
  padding-bottom: calc(3 * 44px + 2 * var(--space-2) + 6px);
}

/* K-7288: the compliance certificate registry's row menu (Recheck registry,
   Archive) is the same two-item list, so it gets the same room. K-7637: so
   is the SDS library's (Edit, Archive). */
.registry-table-wrap:has(.compliance-registry tbody tr:nth-last-child(-n + 2) .ncr-row-menu[open]),
.registry-table-wrap:has(.sds-table tbody tr:nth-last-child(-n + 2) .ncr-row-menu[open]) {
  padding-bottom: calc(2 * 44px + 2 * var(--space-2) + 6px);
}

/* K-7632: the catalogue entry list's row menu holds one item (Archive, or
   Restore under Show archived) in the same wrap, so it gets one link's room. */
.registry-table-wrap:has(.dynamic-entry-table tbody tr:nth-last-child(-n + 2) .ncr-row-menu[open]) {
  padding-bottom: calc(44px + 2 * var(--space-2) + 6px);
}

/* K-7662: the department, shift and position lists share the wrap; the
   department menu holds two items (Deactivate, Delete), so it gets two
   links' room. */
.registry-table-wrap:has(.catalog-list-table tbody tr:nth-last-child(-n + 2) .ncr-row-menu[open]) {
  padding-bottom: calc(2 * 44px + 2 * var(--space-2) + 6px);
}

/* K-7993: the shift and position menus hold one item (Deactivate), so they
   get one link's room instead of leaving a link's height empty below it. */
.registry-table-wrap:has(.catalog-list-table--one-action tbody tr:nth-last-child(-n + 2) .ncr-row-menu[open]) {
  padding-bottom: calc(44px + 2 * var(--space-2) + 6px);
}

/* K-7288: supplier and type names, dates and the Edit cell stay on one line
   on the compliance tables (auto layout, so the column widens instead). */
.compliance-nowrap {
  white-space: nowrap;
}

/* K-10464: the registry's notes row writes its own labels inside the cell,
   so on a phone card it reads as plain left-aligned text. With only one of
   the two notes, the shared rt-cards flex row (`space-between`, right
   aligned) pushed that note to the card's right edge. */
@media (max-width: 720px) {
  .registry-table.rt-cards.compliance-registry > tbody > tr > td.compliance-registry-notes {
    display: block;
    text-align: left;
  }

  .registry-table.rt-cards.compliance-registry > tbody > tr > td.compliance-registry-notes::before {
    content: none;
  }
}

/* K-5906: "Legacy imports" on the registry is a plain secondary link now,
   but still a 44px touch target (K-45; tools/mobile_guard.py). */
.ncr-secondary-link {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
}

/* K-6123 (NCR design N4, mockups `Kortele` / `Kortele-390`): the NCR card.
   Sizes are the mockup's own (saltiniai/ncr-maketai/html/Kortele.dc.html).
   The heading is path / number + status pill / one metadata line; below
   the process bar the tabs and two columns -- the card's sections on the
   left, a 380px column on the right whose first card is the one "Next
   step" frame; attachments and history run full width underneath. On a
   phone it is one column in the mockup's order: Next step, tabs, the
   card's sections, then the right column's cards. */
.ncr-card-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ncr-card-heading .ncr-page-crumb {
  margin: 0;
}

.ncr-card-heading .ncr-page-crumb a {
  color: var(--muted);
}

.ncr-card-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ncr-card-title h1 {
  margin: 0;
}

.ncr-card-meta {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-control);
  gap: var(--space-2);
  margin: 0;
}

.ncr-card-meta > span + span::before {
  content: "·";
  margin-right: var(--space-2);
}

.ncr-card-priority {
  align-items: center;
  color: var(--brand-dark);
  display: inline-flex;
  font-size: var(--fs-field-value);
  gap: 6px;
}

.ncr-card-more svg {
  display: block;
}

.ncr-card-layout {
  align-items: start;
  display: grid;
  gap: var(--space-4) var(--gap-layout);
  grid-template-areas:
    "tabs tabs"
    "main next"
    "main side"
    "rest rest";
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-rows: auto auto 1fr auto;
  margin-top: var(--space-6);
}

.ncr-card-layout > .tabs {
  gap: 4px;
  grid-area: tabs;
  margin-bottom: var(--space-2);
}

.ncr-card-layout > .tabs a {
  padding: 0.7rem 14px;
}

.ncr-tab-count {
  color: var(--muted);
  font-size: var(--fs-field-value);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  margin-left: 6px;
}

.ncr-card-main,
.ncr-card-side,
.ncr-card-rest {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.ncr-card-main {
  grid-area: main;
}

.ncr-card-side {
  grid-area: side;
}

.ncr-card-rest {
  grid-area: rest;
}

.ncr-card-side .kv dd a {
  white-space: nowrap;
}

/* K-6900: on a 1366-1440 screen the 380 px side column left the card's main
   column ~390 px -- stage labels broke into three lines and the affected
   orders table did not fit. Below 1500 the next step stays first, the main
   column takes the full width and the side cards follow it two abreast. */
@media (min-width: 721px) and (max-width: 1499px) {
  .ncr-card-layout {
    grid-template-areas:
      "tabs"
      "next"
      "main"
      "side"
      "rest";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .ncr-card-side {
    align-items: start;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

.ncr-card-layout .card {
  margin: 0;
}

.ncr-card-chead {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.ncr-card-chead .actions {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}

.ncr-card-lead {
  font-size: 0.9375rem;
  line-height: 1.55;
}

.ncr-card-kv {
  grid-template-columns: 180px minmax(0, 1fr);
}

.ncr-card-containment {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 12px;
  justify-content: space-between;
}

.ncr-card-open {
  color: var(--brand-dark);
}

.ncr-card-note {
  color: var(--muted);
  font-size: var(--fs-field-value);
  line-height: 1.45;
}

.ncr-card-label {
  color: var(--muted);
  display: block;
  font-size: var(--fs-field-label);
  font-weight: 500;
  margin-bottom: 4px;
}

.ncr-card-arrow-link {
  font-size: var(--fs-field-value);
}

/* "Next step": a 2px brand frame, one primary button (mockup rule 6). */
.ncr-next {
  border: 2px solid var(--brand);
  grid-area: next;
  padding: 19px 23px;
}

.ncr-next.ncr-guide {
  margin: 0;
}

.ncr-next-eyebrow {
  color: var(--brand-dark);
  font-size: var(--fs-field-label);
  font-weight: 500;
}

.ncr-next .card-title {
  font-size: 1.125rem;
}

.ncr-next-button {
  align-self: flex-start;
  gap: var(--space-2);
}

.requirement-checklist--next {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-control);
  gap: 10px;
  margin: 0;
}

.requirement-checklist--next .requirement-checklist-item {
  align-items: center;
  gap: 10px;
  padding: 0;
}

.requirement-checklist-mark {
  align-items: center;
  border-radius: 50%;
  box-sizing: border-box;
  display: inline-flex;
  flex: none;
  height: 18px;
  justify-content: center;
  width: 18px;
}

.requirement-checklist-item--done .requirement-checklist-mark {
  background: var(--success-bg);
  color: var(--success);
}

.requirement-checklist-item--missing {
  font-weight: 600;
}

.requirement-checklist-item--missing .requirement-checklist-mark {
  border: 2px solid var(--brand);
}

.requirement-checklist--next .visually-hidden-text {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Actions: three stage tiles, the root cause, one card per action. */
.ncr-stage-tiles {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ncr-stage-tiles .ncr-stage-tile {
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: flex-start;
  margin: 0;
  padding: 12px 14px;
}

/* Wraps rather than squeezes: in a 1440 px window the main column leaves each
   tile ~190 px, too narrow for "2. Koreguojantis" and "Reikalingas" side by side. */
.ncr-stage-tile-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
}

.ncr-stage-tile-head > :not(strong) {
  flex-shrink: 0;
  white-space: nowrap;
}

.ncr-stage-tile-head strong {
  font-size: var(--fs-control);
}

.ncr-stage-tile small {
  color: var(--muted);
  font-size: var(--fs-field-value);
  line-height: 1.4;
}

.ncr-stage-tile .ncr-card-open {
  color: var(--brand-dark);
}

.ncr-stage-tile-link,
.ncr-stage-na > summary {
  cursor: pointer;
  font-size: var(--fs-field-value);
}

.ncr-stage-tile form {
  margin: 0;
}

.ncr-stage-tile .link-button.ncr-stage-tile-link {
  justify-content: flex-start;
  padding: 0;
}

.ncr-card-rootcause {
  background: var(--bg);
  border-radius: var(--radius-md);
  font-size: var(--fs-control);
  line-height: 1.5;
  padding: 12px 14px;
}

.ncr-action {
  border: 1px solid var(--line);
  border-radius: 10px;
  display: grid;
  gap: var(--space-2) var(--space-4);
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px var(--space-4);
}

.ncr-action-badges,
.ncr-action-next,
.ncr-action-tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ncr-action-next {
  justify-content: flex-end;
}

.ncr-action-type {
  color: var(--muted);
  font-size: var(--fs-field-value);
}

.ncr-action-next form {
  margin: 0;
}

.ncr-action-tools {
  gap: 2px;
}

.ncr-action-text {
  font-size: var(--fs-control);
  grid-column: span 2;
  line-height: 1.45;
  margin: 0;
}

.ncr-action-foot {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-field-value);
  gap: var(--space-2);
  grid-column: span 2;
  justify-content: space-between;
}

.ncr-action-tools .ncr-row-menu-danger {
  color: var(--danger);
}

.ncr-card-foot {
  align-items: center;
}

/* Defects: one bordered block per defect, the affected orders table in the
   primary one. */
.ncr-defect {
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px var(--space-4);
}

.ncr-defect > p {
  margin: 0;
}

.ncr-defect-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ncr-defect-name strong {
  font-size: 0.9375rem;
}

.ncr-defect-tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-4);
}

.ncr-defect-tools form {
  margin: 0;
}

.ncr-defect-tools .ncr-row-menu-danger {
  color: var(--danger);
}

.ncr-orders-table caption {
  caption-side: top;
  padding-bottom: var(--space-2);
  text-align: left;
}

.ncr-orders-table .ncr-orders-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ncr-orders-table .ncr-orders-action {
  text-align: right;
}

/* K-6453: the affected-orders footer lines its figures up under their own
   columns, so in the 720px card its blank cells would print as bare
   column labels ("Notes", "Actions") -- drop them, and let the unlabeled
   "Total" cell read as the card's own heading. K-9390: the AI-models
   "Other"/"Total" footer rows (operations/system_ai_models.html) too. */
@media (max-width: 720px) {
  .registry-table.rt-cards.ncr-orders-table > tfoot > tr > td:empty,
  .registry-table.rt-cards.ai-module-models-table > tfoot > tr > td:empty {
    display: none;
  }

  .registry-table.rt-cards.ncr-orders-table > tfoot > tr > td[data-label=""]::before,
  .registry-table.rt-cards.ai-module-models-table > tfoot > tr > td[data-label=""]::before {
    content: none;
  }
}

/* K-10733: an active opening-balance entry has no Superseded badge, so its
   "Status" cell (absences/admin/subject_card.html) would print as a bare
   label line in the 720px card -- drop the empty cell; the badge stays. */
@media (max-width: 720px) {
  .registry-table.rt-cards.opening-balance-table > tbody > tr > td:empty {
    display: none;
  }
}

.ncr-orders-actions-head {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Similar NCRs: the strongest matches with their reasons, the weaker ones
   folded to one line of numbers. */
.ncr-similar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ncr-similar + .ncr-similar {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.ncr-similar-number {
  font-weight: 600;
}

.ncr-similar .similar-ncr-criteria {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ncr-similar .actions {
  align-items: center;
  display: flex;
  gap: 6px;
  margin: 0;
}

.ncr-similar .actions form {
  margin: 0;
}

.ncr-similar-more > summary {
  cursor: pointer;
  justify-content: flex-start;
  padding: 0;
}

.ncr-similar-more[open] > summary {
  margin-bottom: 12px;
}

@media (max-width: 720px) {
  .ncr-card-heading h1 {
    font-size: 1.5rem;
  }

  .ncr-card-layout {
    grid-template-areas:
      "next"
      "tabs"
      "main"
      "side"
      "rest";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    margin-top: var(--space-4);
  }

  .ncr-card-layout > .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .ncr-card-layout > .tabs a {
    flex: none;
  }

  .ncr-next {
    padding: 15px;
  }

  .ncr-next .card-title {
    font-size: 1.0625rem;
  }

  .ncr-next-button {
    align-self: stretch;
    min-height: 48px;
  }

  .ncr-card-kv {
    grid-template-columns: 132px minmax(0, 1fr);
  }

  .ncr-stage-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .ncr-action {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
  }

  .ncr-action-next {
    justify-content: flex-start;
  }

  .ncr-action-text,
  .ncr-action-foot {
    grid-column: auto;
  }

  .ncr-card-layout .button-small,
  .ncr-card-layout .link-button,
  .ncr-stage-na > summary {
    min-height: 44px;
  }
}

/* K-6302 (NCR design N13, mockups `Istorija` and `Klasifikatorius`). Sizes
   are the mockups' own (saltiniai/ncr-maketai/html/Istorija.dc.html,
   Klasifikatorius.dc.html). History: the NCR card's heading and process
   bar, then its tabs and one "Change history" card -- title left, stage
   filter right, a fixed-layout journal whose stage is a neutral pill and
   whose field name and old value are muted. Classifier: one "Search type"
   box, then a card per category -- name and type count with its four quiet
   buttons, its types below with the priority dot and the status pill. */
.ncr-history-page {
  display: flex;
  flex-direction: column;
  gap: var(--gap-layout);
  margin-top: var(--space-6);
}

.ncr-history-page > .tabs {
  gap: 4px;
  margin-bottom: 0;
}

.ncr-history-page > .tabs a {
  padding: 0.7rem 14px;
}

.ncr-history-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.ncr-history-filter {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

.ncr-history-filter select {
  min-height: var(--control-h);
  width: auto;
}

/* K-6405: the mockup's 920 px of fixed columns is wider than the card's
   table (about 904 px at a 1440 window, 550 px at 1024), which left "After"
   only its padding; shares of the width keep 23 % for it at any size. A
   stage pill wider than its column is cut with an ellipsis (full label in
   its title) instead of spilling over the event. */
.ncr-history-table {
  table-layout: fixed;
}

.ncr-history-col-when {
  width: 14%;
}

.ncr-history-col-who {
  width: 12%;
}

.ncr-history-col-stage {
  width: 14%;
}

.ncr-history-col-event {
  width: 14%;
}

.ncr-history-col-field {
  width: 13%;
}

.ncr-history-col-before {
  width: 10%;
}

.ncr-history-table .registry-badge {
  display: inline-block;
  line-height: 24px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ncr-history-table .ncr-history-when,
.ncr-history-table .ncr-history-who {
  font-size: var(--fs-field-value);
  font-variant-numeric: tabular-nums;
}

.ncr-history-table .ncr-history-field {
  color: var(--muted);
  font-size: var(--fs-field-value);
}

.ncr-history-table .ncr-history-before {
  color: var(--muted);
  opacity: 0.75;
}

/* K-7012: the history table's wrap is a container. From 1000 px of table
   up it keeps its seven columns and the folded "Change" cell and the pill
   under the event stay hidden; below that (a 1366 window gives about
   820 px) "Field / Before / After" become one "Change" cell and the stage
   a grey pill under the event, so no event or field name breaks into three
   lines. Four classes on the hiding rules so they also win over the
   `rt-cards` phone layout's `td { display: flex }`. */
.ncr-history-wrap {
  container: ncr-history / inline-size;
}

.ncr-history-table .ncr-history-when {
  white-space: nowrap;
}

.ncr-history-table .ncr-history-diff {
  color: var(--muted);
  display: block;
}

@container ncr-history (min-width: 1000px) {
  .ncr-history-col-change,
  .registry-table.rt-cards.ncr-history-table .ncr-history-change,
  .registry-table.rt-cards.ncr-history-table .ncr-history-event-stage {
    display: none;
  }
}

@container ncr-history (max-width: 999px) {
  .ncr-history-col-stage,
  .ncr-history-col-field,
  .ncr-history-col-before,
  .ncr-history-col-after,
  .registry-table.rt-cards.ncr-history-table .ncr-history-stage,
  .registry-table.rt-cards.ncr-history-table .ncr-history-field,
  .registry-table.rt-cards.ncr-history-table .ncr-history-before,
  .registry-table.rt-cards.ncr-history-table .ncr-history-after {
    display: none;
  }

  .ncr-history-col-when {
    width: 17%;
  }

  .ncr-history-col-who {
    width: 18%;
  }

  .ncr-history-col-event {
    width: 28%;
  }

  .ncr-history-table .registry-badge.ncr-history-event-stage {
    display: table;
    margin-top: 2px;
  }
}

/* K-7086: under 700 px of table (a 1024 window gives about 550 px) the
   17 % "When" cell is narrower than "2026-09-27 14:50", so the time breaks
   onto its own line instead of running over "Who". */
@container ncr-history (max-width: 699px) {
  .ncr-history-table .ncr-history-when {
    white-space: normal;
  }
}

.ncr-history-more {
  align-self: flex-start;
  margin-top: var(--space-2);
}

.defect-catalog-search {
  margin: var(--space-2) 0 0;
}

.defect-catalog-search-field {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--muted);
  display: flex;
  gap: var(--space-2);
  height: var(--control-h);
  max-width: 420px;
  padding: 0 12px;
}

/* The search input below drops its own outline, so the field draws the ring. */
.defect-catalog-search-field:focus-within {
  border-color: var(--brand);
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.defect-catalog-search .defect-catalog-search-field input[type="search"] {
  background: transparent;
  border: 0;
  box-shadow: none;
  flex: 1;
  font: inherit;
  font-size: var(--fs-control);
  min-width: 0;
  outline: 0;
  padding: 0;
}

.defect-catalog {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-2);
}

.defect-catalog-category {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.defect-catalog-category-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.defect-catalog-count {
  color: var(--muted);
  font-size: var(--fs-control);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.defect-catalog-inactive-title {
  color: var(--muted);
  font-size: var(--fs-section-title);
  font-weight: 600;
  margin: 0;
}

.defect-catalog-row-actions {
  align-items: center;
  display: flex;
  gap: 2px;
  justify-content: flex-end;
}

.defect-catalog-row-actions .inline-form {
  display: inline-flex;
  margin: 0;
}

.defect-catalog-arrow {
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 32px;
}

.defect-catalog-table {
  table-layout: fixed;
}

.defect-catalog-col-priority {
  width: 150px;
}

/* K-6900: the actions need ~260 px (two arrows, Edit, Deactivate); at 330
   the name column fell to 81 px on a 1366 screen and broke every name into
   three lines. */
.defect-catalog-col-group {
  width: 130px;
}

.defect-catalog-col-status {
  width: 100px;
}

.defect-catalog-col-actions {
  width: 270px;
}

.defect-catalog-table td:last-child {
  padding-bottom: 0;
  padding-top: 0;
}

.defect-catalog-table .defect-catalog-group {
  color: var(--muted);
}

/* The mockup's priority words: medium brand-dark, high red, critical red
   and bold, low muted. */
.defect-catalog-table .ncr-list-priority--medium {
  color: var(--brand-dark);
}

.defect-catalog-table .ncr-list-priority--high {
  color: var(--danger);
}

.defect-catalog-table .ncr-list-priority--critical {
  color: var(--danger);
  font-weight: 600;
}

.defect-catalog-category.is-inactive .card-title,
.defect-catalog-table tr.is-inactive td:first-child {
  color: var(--muted);
}

@media (max-width: 720px) {
  .ncr-history-filter {
    margin-left: 0;
    width: 100%;
  }

  .ncr-history-filter select {
    flex: 1;
    min-height: 44px;
  }

  .ncr-history-page .button-small,
  .ncr-history-page .link-button,
  .defect-catalog .button-small,
  .defect-catalog .link-button {
    min-height: 44px;
  }

  .defect-catalog-search-field {
    height: 44px;
    max-width: none;
  }

  .defect-catalog-arrow {
    width: 44px;
  }

  .defect-catalog-row-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .defect-catalog-table td:last-child {
    padding-bottom: var(--space-2);
    padding-top: var(--space-2);
  }
}

/* K-6181 (NCR design N7, mockup `Vedlys-5K`): the 5 Whys wizard. Sizes
   are the mockup's own (saltiniai/ncr-maketai/html/Vedlys-5K.dc.html):
   the chain and the current "why" on the left, a 380px column with the 6M
   cause and the root-cause AI helper on the right; one column on a phone.
   The chain is a numbered line per step joined by a thin rail, the root
   step's number and pill in the brand colour; the current "why" is the
   one card with a 2px brand frame. */
.ncr-wizard-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: minmax(0, 1fr) 380px;
  margin-top: var(--space-6);
}

.ncr-wizard-main,
.ncr-wizard-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.ncr-wizard-layout .card {
  margin: 0;
}

.ncr-wizard-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.ncr-wizard-field-label {
  font-size: var(--fs-field-value);
  font-weight: 500;
  margin: 0;
}

.ncr-wizard-causes {
  margin: 0;
  padding-left: 1.1rem;
}

.ncr-why-chain {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ncr-why-chain > li {
  display: grid;
  gap: 14px;
  grid-template-columns: 28px minmax(0, 1fr);
  padding-bottom: 18px;
  position: relative;
}

.ncr-why-chain > li:last-child {
  padding-bottom: 0;
}

.ncr-why-chain > li:not(:last-child)::before {
  background: var(--rail-bg);
  bottom: -2px;
  content: "";
  left: 13px;
  position: absolute;
  top: 30px;
  width: 2px;
}

.ncr-why-chain-number {
  align-items: center;
  background: var(--text);
  border-radius: 50%;
  color: var(--surface);
  display: inline-flex;
  font-size: var(--fs-field-value);
  font-weight: 600;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.ncr-why-chain-number--root {
  background: var(--brand);
}

.ncr-why-chain-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ncr-why-chain-body p {
  line-height: 1.5;
  margin: 0;
}

.ncr-why-chain-question {
  color: var(--muted);
  font-size: var(--fs-control);
}

.ncr-why-chain-answer {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.ncr-why-chain-answer > p {
  flex: 1;
  font-size: 0.9375rem;
}

.registry-badge.ncr-why-root {
  background: var(--brand);
  color: var(--surface);
  flex: none;
  margin: 0;
}

.card.ncr-why-current {
  border: 2px solid var(--brand);
  gap: var(--space-4);
  padding: 19px 23px;
}

/* The mockup's fields run the card's full width under a 13px/500 label in
   sentence case, not the app's two-track grid under an uppercase caption;
   an AI result box takes no room until it has something to say. */
.ncr-why-current .form-grid {
  grid-template-columns: minmax(0, 1fr);
}

.ncr-why-current .field > label:not(.checkbox-label) {
  color: var(--text);
  font-size: var(--fs-field-value);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.ncr-why-current [role="status"]:empty {
  display: none;
}

.ncr-why-current #five-why-locked-question {
  font-size: var(--fs-control);
  line-height: 1.5;
  margin: 6px 0 0;
}

.ncr-why-previous {
  background: var(--bg);
  border-radius: var(--radius-md);
  font-size: var(--fs-control);
  padding: 10px 12px;
}

.ncr-why-helper {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.ncr-why-actions,
.ncr-why-actions-end {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ncr-why-actions {
  justify-content: space-between;
}

.ncr-why-actions-end {
  margin-left: auto;
}

@media (max-width: 720px) {
  .ncr-wizard-layout {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--space-4);
  }

  .card.ncr-why-current {
    padding: 15px;
  }

  .ncr-why-actions-end,
  .ncr-why-actions-end > .button,
  .ncr-why-actions-end > .button-secondary {
    width: 100%;
  }

  .ncr-why-actions-end > .button {
    min-height: 48px;
  }

  .ncr-wizard-heading .link-button,
  .ncr-wizard-layout .button-small,
  .ncr-wizard-layout .link-button,
  .ncr-wizard-layout .button-secondary {
    min-height: 44px;
  }
}

/* K-6182 (NCR design N8, mockup `Veiksmas`): the action form on the left,
   a 380px column (the mockup's 420px less the side navigation it omits,
   same as the NCR card) on the right (NCR context, AI helper); the compact bar
   above. On a phone and narrow screens it is one column, form first. Sizes
   are the mockup's own (`saltiniai/ncr-maketai/html/Veiksmas.dc.html`). */
.ncr-action-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: minmax(0, 1fr) 380px;
}

.ncr-action-layout--single {
  grid-template-columns: minmax(0, 1fr);
}

.ncr-action-layout .card {
  margin: 0;
}

.ncr-action-main {
  gap: 18px;
}

.ncr-action-main .ncr-type-choice {
  margin: 0;
}

.ncr-action-main .ncr-type-choice legend {
  color: var(--text);
  font-weight: 500;
  margin-bottom: var(--space-2);
}

.ncr-action-main .ncr-type-card {
  border-color: var(--line-strong);
  border-radius: 10px;
  padding: 12px 14px;
}

.ncr-action-main .ncr-type-card:has(input:checked) {
  background: var(--brand-tint);
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.ncr-action-main .ncr-type-cards {
  gap: 10px;
  margin: 0;
}

/* The mockup's card: the radio on the left, title over hint beside it. */
.ncr-action-main .ncr-type-card {
  column-gap: 10px;
}

.ncr-action-main .ncr-type-card input {
  grid-row: span 2;
}

.ncr-action-main .ncr-type-card-title {
  font-size: var(--fs-tab-label);
}

.ncr-action-main .ncr-type-card-hint {
  font-size: var(--fs-field-value);
  grid-column: 2;
}

.ncr-action-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ncr-action-field-label {
  font-size: var(--fs-field-value);
  font-weight: 500;
}

.ncr-action-field textarea {
  min-height: 96px;
}

.ncr-action-fields {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ncr-action-role {
  align-self: end;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-items: start;
}

.ncr-action-role .button {
  align-self: flex-start;
}

.ncr-action-submit {
  gap: var(--space-2);
  justify-content: flex-end;
  margin: 0;
}

.ncr-action-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.ncr-action-context-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.ncr-action-context-cause {
  font-size: var(--fs-tab-label);
  line-height: 1.5;
}

.ncr-action-context-link {
  font-size: var(--fs-field-value);
}

.ncr-ai-candidates {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ncr-ai-candidate-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ncr-ai-candidate {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
}

.ncr-ai-candidate-badges {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.ncr-ai-candidate-text {
  font-size: var(--fs-field-value);
}

.ncr-ai-candidate-fields {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ncr-ai-candidate .link-button {
  align-self: flex-start;
}

.ncr-ai-candidates-foot {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 1100px) {
  .ncr-action-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .ncr-action-main .ncr-type-cards,
  .ncr-action-fields,
  .ncr-ai-candidate-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .ncr-action-submit .button,
  .ncr-action-submit .link-button,
  .ncr-action-layout .button-small {
    min-height: 44px;
  }
}

/* K-6182 (NCR design N8, mockup `Uzduotys`): the module's task list -- four
   quick filters (the active one dark), then one card of rows: NCR, type,
   text, status, due date, Open. On a phone each row stacks. */
.ncr-task-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-6) 0;
}

.ncr-task-filter {
  align-items: center;
  background: var(--rail-bg);
  border-radius: var(--radius-pill);
  color: var(--muted);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 500;
  height: 32px;
  padding: 0 14px;
  text-decoration: none;
  white-space: nowrap;
}

.ncr-task-filter:hover {
  color: var(--text);
  text-decoration: none;
}

.ncr-task-filter.is-active {
  background: var(--text);
  color: var(--surface);
}

.ncr-task-card {
  padding: 8px var(--space-6);
}

.ncr-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ncr-task-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 130px 130px minmax(0, 1fr) 140px 130px 110px;
  padding: var(--space-4) 0;
}

.ncr-task-row:last-child {
  border-bottom: 0;
}

.ncr-task-number {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-decoration: none;
}

.ncr-task-type,
.ncr-task-status {
  justify-self: start;
}

.ncr-task-text {
  font-size: var(--fs-tab-label);
  line-height: 1.45;
  min-width: 0;
  overflow-wrap: break-word;
}

.ncr-task-due {
  color: var(--muted);
  font-size: var(--fs-field-value);
  font-variant-numeric: tabular-nums;
}

.ncr-task-open {
  justify-self: stretch;
}

@media (max-width: 720px) {
  .ncr-task-row {
    grid-template-areas:
      "number type"
      "text text"
      "status due"
      "open open";
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2) var(--space-4);
  }

  .ncr-task-number { grid-area: number; }
  .ncr-task-type { grid-area: type; justify-self: end; }
  .ncr-task-text { grid-area: text; }
  .ncr-task-status { grid-area: status; }
  .ncr-task-due { grid-area: due; justify-self: end; }
  .ncr-task-open { grid-area: open; min-height: 44px; }

  .ncr-task-filter {
    height: 44px;
  }
}

/* K-6174 (K-45): the card's inline text links -- the "Registry" crumb, the
   next step's missing-requirement link, "Open the verification" and
   "Settlement per position" -- measured 16-18px tall at 390px. */
@media (max-width: 480px) {
  .ncr-card-heading .ncr-page-crumb a,
  .requirement-checklist--next .requirement-checklist-item--missing a,
  .ncr-card-side .kv dd a,
  .ncr-card-arrow-link {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
}

/* K-6312 (NCR design N14): the 390px walk of every other NCR screen found
   the same class of inline links 16-40px tall -- the dialogs' path, "Legacy
   imports" under the tasks title, the investigation's step list, its
   requirement links and "Go to step 4", the 32px "Edit registration" -- and
   the defect catalog's arrows and the dashboard's "All" under 44px wide. */
@media (max-width: 480px) {
  .ncr-page-crumb a,
  .ncr-registry-head .task-meta a,
  .investigation-sequence-step a,
  .requirement-checklist-item a,
  .investigation-step-body .hint a,
  .ncr-wide > .actions .button-small {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  .inline-form > .link-button,
  .ncr-dash-more {
    justify-content: center;
    min-width: 44px;
  }
}

/* K-6123 (mockup `Kortele-390`): on a phone the full process bar folds to
   one card -- "Stage 6–7 of 8", one thin segment per stage, the current
   stage's name -- and "Full path" opens the tiles underneath. */
.ncr-pb-phone {
  display: none;
}

@media (max-width: 720px) {
  .ncr-pb-phone {
    align-self: stretch;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    display: block;
    padding: 14px var(--space-4);
  }

  .ncr-pb-phone > summary {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
  }

  .ncr-pb-phone > summary::-webkit-details-marker {
    display: none;
  }

  .ncr-pb-phone-line {
    color: var(--muted);
    display: flex;
    font-size: var(--fs-field-value);
    gap: var(--space-2);
    justify-content: space-between;
  }

  .ncr-pb-phone-toggle {
    color: var(--brand-dark);
  }

  .ncr-pb-phone-segments {
    display: flex;
    gap: 4px;
  }

  .ncr-pb-phone-segment {
    background: var(--line-strong);
    border-radius: 3px;
    flex: 1;
    height: 6px;
  }

  .ncr-pb-phone-segment--completed {
    background: var(--success);
  }

  .ncr-pb-phone-segment--in_progress,
  .ncr-pb-phone-segment--error {
    background: var(--brand);
  }

  .ncr-pb-phone-stage {
    font-size: 0.9375rem;
  }

  .ncr-pb:not(:has(> .ncr-pb-phone[open])) > .ncr-pb-sequence,
  .ncr-pb:not(:has(> .ncr-pb-phone[open])) > .ncr-pb-validity {
    display: none;
  }
}

.ncr-similar-more > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.ncr-attachment-dialog .leo-langas-close {
  height: 44px;
  width: 44px;
}

.task-list form {
  margin: 0;
}

.task-row-button {
  background: transparent;
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  border-top: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
}

.task-row-subject,
.task-row-meta,
.task-row-status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipient-list li {
  display: grid;
  gap: 0.25rem;
}

.task-row-meta,
.task-row-status,
.task-row-date,
.task-meta,
.similar-ncr-reason,
.recipient-list span {
  color: var(--muted);
  font-size: 0.9rem;
}

.task-row-date {
  text-align: right;
  white-space: nowrap;
}

/* K-4906: the fixed-width, right-aligned actions column UI_KANONAS §3 asks
   for on Similar NCRs / Urgent+corrective actions / Affected orders --
   `.task-row`'s own 4-column template is auto-filled by whichever children
   a row happens to have, so a 2-span row (content + actions) leaves the
   actions span sized to the 2nd (1fr) track instead of pinned to the row's
   trailing edge. This modifier pins it to one fixed-width right-hand
   column instead, the same width and order on every row. */
.task-row--fixed-actions {
  grid-template-columns: 1fr 12rem;
}

.task-row--fixed-actions.task-row--with-numeric {
  grid-template-columns: 1fr auto 12rem;
}

.task-row--fixed-actions > .actions {
  justify-content: flex-end;
}

.task-row-numeric {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.safety-progress-card,
.safety-task-card {
  display: grid;
  gap: 0.8rem;
}

.safety-progress-card p,
.safety-task-card h2,
.safety-task-card p {
  margin: 0;
}

.safety-progress-value {
  color: var(--brand-dark);
  font-size: 1.5rem;
}

.safety-progress-track {
  background: var(--bg);
  border-radius: var(--radius-pill);
  height: 0.75rem;
  overflow: hidden;
}

.safety-progress-track span {
  background: var(--success);
  display: block;
  height: 100%;
}

.safety-task-cards {
  display: grid;
  gap: 1rem;
}

.safety-all-done {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
  display: grid;
  gap: 0.25rem;
}

.safety-task-card {
  color: inherit;
  text-decoration: none;
}

.safety-task-card:hover {
  border-color: var(--brand);
  box-shadow: 0 10px 28px rgb(31 36 48 / 12%);
}

.safety-task-chips {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.safety-task-chips > span,
.safety-status {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
}

.safety-status {
  font-weight: 700;
}

.safety-status-done {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}

.safety-status-pending {
  background: var(--warning-bg);
  border-color: var(--warning);
  color: var(--warning);
}

.safety-status-overdue {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

.safety-status-waiting_chain {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand-dark);
}

/* K-7120 (S-Komanda): the team list -- the training legend at the end of
   the filter row, four plain counts per row in the legend's colours (a zero
   grey), the name in the row's own weight, the employee number right. */
.safety-team-legend {
  color: var(--muted);
  font-size: var(--fs-field-value);
  margin: 0 0 0 auto;
}

.safety-team-counts {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.safety-team-counts b,
.safety-team-legend b {
  font-weight: 600;
}

.safety-team-counts .is-zero {
  color: color-mix(in srgb, var(--muted) 70%, var(--surface));
}

.safety-team-count--done {
  color: var(--success);
}

.safety-team-count--overdue {
  color: var(--danger);
}

.safety-team-count--waiting_chain {
  color: var(--brand-dark);
}

.registry-table a.safety-team-name {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.registry-table a.safety-team-name:hover {
  text-decoration: underline;
}

.registry-table .safety-team-number {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* K-7550 (S-Uzduotis): a safety task -- Documents, PPE and the knowledge
   test on the left, the signing block 340px to their right, sticky (340,
   not 300, so its Type value "Personal protective equipment" does not wrap
   word by word -- K-7617). The
   source order is Documents, Signature, PPE, Test, so in one column (inside
   `.survey-form`, <= 52rem) the signature follows the documents. The last
   row is 1fr so a tall signing block does not push the left cards apart. */
.safety-task-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: auto auto 1fr;
}

.safety-task-layout > * {
  grid-column: 1;
  margin: 0;
  min-width: 0;
}

/* Sticky again here (K-8014): the calculator's `@media (max-width: 1100px)`
   makes `.calculation-result-card` static, but this layout keeps two columns
   down to the 52rem container fold below. */
.safety-task-layout > .calculation-result-card {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: sticky;
}

@container survey-form (max-width: 52rem) {
  .safety-task-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .safety-task-layout > .calculation-result-card {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

/* K-7125 (S-Dokumentai): the folders as a list left of the table -- the
   open one tinted and bold, a grey count after each name, a pencil to edit
   the folder, "New folder" at the bottom. One column on the phone, the
   folders first. */
.safety-doc-layout {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: 220px minmax(0, 1fr);
}

.safety-doc-folders {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
}

.safety-doc-folders .card-title {
  font-size: var(--fs-field-value);
  margin: 0;
  padding: 4px 6px;
}

.safety-doc-folder {
  align-items: center;
  display: flex;
}

.safety-doc-folders a:not(.button) {
  align-items: center;
  border-radius: var(--radius-md);
  color: var(--text);
  display: flex;
  font-size: var(--fs-field-value);
  gap: 6px;
  min-width: 0;
  padding: 6px;
  text-decoration: none;
}

.safety-doc-folder > a:first-child {
  flex: 1 1 auto;
}

.safety-doc-folders a.on {
  background: color-mix(in srgb, var(--brand-tint) 30%, var(--surface));
  font-weight: 600;
}

.safety-doc-folders a:not(.button):hover {
  background: color-mix(in srgb, var(--brand-tint) 20%, var(--surface));
}

.safety-doc-folders .n {
  color: var(--muted);
  font-weight: 400;
}

/* A long folder name ends in an ellipsis rather than pushing its count to
   a second line; the link's title carries the whole name. */
.safety-doc-folder-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.safety-doc-folders a.safety-doc-folder-edit {
  color: var(--muted);
  flex: none;
}

.safety-doc-folders > .button {
  margin-top: 4px;
}

@media (max-width: 720px) {
  .safety-doc-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .safety-doc-folders a:not(.button) {
    min-height: 44px;
  }

  .safety-doc-folders a.safety-doc-folder-edit {
    justify-content: center;
    min-width: 44px;
  }
}

/* K-7125 (S-Etiketes): the machine search row, and the labels four a row
   on screen -- a white card, the QR at 56px, the name first and larger,
   the code grey under it. The rules outside `@media screen` are the old
   template's own and still draw the printed A4 sheet unchanged: two
   columns, 35mm codes, dashed cut lines, the code above the name. */
.safety-label-toolbar {
  margin-bottom: 16px;
}

.safety-label-hint {
  color: var(--muted);
  font-size: var(--fs-field-value);
}

.machine-label-grid {
  background: #fff;
  color: #000;
  display: grid;
  gap: 4mm;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.machine-label {
  align-items: center;
  border: 1px dashed #aaa;
  border-radius: 2mm;
  break-inside: avoid;
  display: flex;
  gap: 4mm;
  min-width: 0;
  padding: 4mm;
}

.machine-label svg {
  flex: 0 0 35mm;
  height: 35mm;
  width: 35mm;
}

.machine-label-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.machine-label-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  order: -1;
  overflow-wrap: anywhere;
}

.machine-label-name {
  overflow-wrap: anywhere;
}

@media screen {
  .machine-label-grid {
    background: none;
    color: var(--text);
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .machine-label {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    gap: 12px;
    padding: 10px 12px;
  }

  .machine-label svg {
    flex: 0 0 56px;
    height: 56px;
    width: 56px;
  }

  .machine-label-name {
    font-size: var(--fs-field-value);
    font-weight: 700;
  }

  .machine-label-code {
    align-self: flex-start;
    background: var(--bg);
    border-radius: 4px;
    color: var(--muted);
    font-size: var(--fs-field-label);
    font-weight: 400;
    margin-top: 2px;
    order: 0;
    padding: 1px 5px;
  }
}

@media screen and (max-width: 1100px) {
  .machine-label-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 720px) {
  .machine-label-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media print {
  :where(body:has(.machine-label-grid)) * {
    visibility: hidden;
  }

  .machine-label-grid,
  .machine-label-grid * {
    visibility: visible;
  }

  .machine-label-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    inset: 0;
    position: absolute;
    width: 100%;
  }

  .machine-label {
    border-color: #ddd;
  }
}

.safety-matrix-table {
  min-width: 100%;
  width: max-content;
}

.safety-matrix-table th,
.safety-matrix-table td {
  max-width: 12rem;
  min-width: 7rem;
  white-space: normal;
}

.safety-matrix-table thead th {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
}

.safety-matrix-table .safety-matrix-employee {
  background: #fff;
  left: 0;
  min-width: 12rem;
  position: sticky;
  z-index: 3;
}

.safety-alert {
  color: var(--danger);
  font-weight: 700;
}

/* K-7122 (S-Mokymai): the template description and the CEO approval button
   left the Type column ~130px at 1366, so "Asmeninės apsaugos priemonės"
   broke word by word; it keeps room for two lines. The phone card's own
   `min-width: 0` on its cells still wins. */
.safety-training-table td:nth-child(2) {
  min-width: 11rem;
}

.safety-step-list {
  display: grid;
  gap: 0.7rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.safety-step-list li {
  align-items: center;
  color: var(--muted);
  display: flex;
  gap: 0.6rem;
}

.safety-step-list li.complete {
  color: var(--success);
  font-weight: 700;
}

.safety-test-passed {
  background: var(--success-bg);
  border: 1px solid var(--success);
  border-radius: 0.65rem;
  color: var(--success);
  font-weight: 700;
  padding: 0.85rem 1rem;
}

.safety-quiz-intro {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

.safety-quiz-intro p {
  margin: 0;
  max-width: 45rem;
}

.safety-quiz-form {
  display: grid;
  gap: 1rem;
}

.safety-quiz-question {
  margin: 0;
}

.safety-quiz-answers {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.8rem;
}

.safety-quiz-answers label {
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  cursor: pointer;
  display: flex;
  gap: 0.7rem;
  padding: 0.85rem;
}

.safety-quiz-answers label:has(input:checked) {
  background: var(--brand-tint);
  border-color: var(--brand);
}

.safety-quiz-answers input {
  flex: 0 0 auto;
  height: 1.2rem;
  margin-top: 0.08rem;
  width: 1.2rem;
}

.safety-quiz-result {
  display: grid;
  gap: 0.75rem;
  text-align: center;
}

.safety-quiz-result > strong {
  font-size: 2.75rem;
}

.safety-quiz-result.passed > strong {
  color: var(--success);
}

.safety-quiz-result.failed > strong {
  color: var(--danger);
}

.safety-quiz-result .actions {
  justify-content: center;
}

/* K-3498 (safety kiosk mobile walk): the self-service kiosk/OTP screens are
   touch-only end to end -- a cech tablet mounted at a workstation measures
   768px wide, outside the existing K-45 `@media (max-width: 720px)` floor
   further down this file, so a `<button>`/`<a class="button">` here never
   got the 44px minimum at all above 720px. These controls carry their own
   explicit floor instead, independent of viewport width. `a.safety-kiosk-
   action` needs `inline-flex` (same reasoning as `a.button` at K-3140)
   because `min-height` alone does not center an anchor's text vertically.
   Font-size also needs its own floor here: these buttons otherwise inherit
   `button[type="submit"]`'s `--fs-field-value` (13px), well under the
   card's "kiosk mode: >=18px" requirement for a factory floor screen.
   K-4059 (tikrintojo radinys, PR #2161): a bare `<button type="submit"
   class="safety-kiosk-action">` (no `.button`/`.button-secondary`) lost this
   floor to `button[type="submit"]:not(.link-button):not(.button-link):not(
   .task-row-button)` at (0,4,1) specificity, which beats `.safety-kiosk-
   action` alone at (0,1,0) regardless of source order. The selector below
   repeats that same `:not()` chain so its specificity, (0,5,1), wins outright
   -- source order can no longer matter.
   K-7609 (PR #3372, S-Testas/S-QR mockups): 48px touch height on both
   selectors -- the submit rule needs its own floor for the same specificity
   reason, otherwise the quiz submit stays 36px on desktop. The link rule
   carries `.button` so its (0,2,1) beats the phone-floor `a.button` (0,1,1,
   K-3140) that otherwise pins every kiosk link at 44px at 390px. */
.safety-kiosk-action {
  font-size: 1.125rem;
  min-height: 48px;
}

button[type="submit"].safety-kiosk-action:not(.link-button):not(.button-link):not(.task-row-button) {
  font-size: 1.125rem;
  min-height: 48px;
}

a.button.safety-kiosk-action {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 48px;
}

.empty-state {
  color: var(--muted);
  padding: 1rem 0;
}

.form-card {
  max-width: 700px;
}

/* K-6530 (Finansai F1, mockup Naujas-IBAN): a two-column form card is drawn
   880px wide. */
.form-card--wide {
  max-width: 880px;
}

/* UI_KANONAS_v1.md §1 (coordinator, 51-screen measurement, 2026-08-12,
   koordinatoriaus-nota-w4-ui-pluostas.md item 4): `/messages/new/`'s
   eyebrow -> h1 -> intro <p> block used the browser's own default h1/p
   margins (~21px, ~22px) instead of the token scale -- neither number is
   8/16/24/32/48/64. Same three-tag header shape is shared by six other
   `.form-card` screens (accounts/organizations), so this is scoped to
   `.form-card`'s own header, not a global h1/p reset that would touch
   every `.card` in the app. */
.form-card > .eyebrow {
  margin: 0 0 var(--space-2);
}

.form-card > .eyebrow + h1 {
  margin-bottom: var(--space-4);
  margin-top: 0;
}

/* K-70 (savininko testavimas 2026-08-21, /mano/zinutes/nauja/): "gauta ir
   issiusta tabuose tas laukas platus, o paspaudus 'nauja zinute' persoki i
   taba, kuris siauras" -- `.form-card`'s own `max-width: 700px` above is
   right for a single-card whole-page form (login, signup), but this screen
   sits in the SAME tab bar as Gauta/Issiusta (plain `.card`, no max-width)
   and reads as a step down in width the moment you switch tabs. A second
   owner finding (Valdyti <zmogus>, same day) made this a platform rule, not
   a one-screen patch (UI_KANONAS_v1.md: card width always matches the
   module's own tab-bar siblings) -- but only THIS screen adopts the fix
   here; every OTHER `.form-card` screen (K-70's own report counted 48
   templates carrying `class="card form-card"`, across absences, accounts,
   audit, catalogs, compliance, contractors, dynamic_catalogs, messaging,
   organizations, packaging, parts, purchasing, quality, receiving,
   warehouse -- far more than this one screen's own tab-bar family) keeps
   the 700px cap until each is walked and reflowed in its own round, same
   discipline `KNOWN_MIXED_CARD_WIDTH_TEMPLATES` above uses for its sibling
   defect.
   An opt-in modifier, not an edit to `.form-card` itself, because the base
   rule's max-width AND the two header-spacing selectors just above are
   still correct for every screen that has not opted in yet -- editing
   `.form-card` directly would widen all 48+ at once without any of them
   having had their own two/three-column reflow (items 4/5/6 below).
   `.eyebrow`/`h1`/`form` stay UNWRAPPED direct children (no new wrapper
   div) specifically so the two selectors above keep matching -- wrapping
   them to build a flex row would silently regress the header-spacing fix
   this file already carries a comment about. `.form-card-subtitle` (the
   intro paragraph, previously its own block below the heading) is instead
   placed beside the heading with grid-template-areas, no wrapper needed.
   `textarea` (the message body, currently `rows="8"` in messaging/forms.py,
   a file outside this card's own scope) grows via `min-height` instead --
   CSS height wins over the `rows` attribute's intrinsic sizing, so this
   reaches the same "at least 10 lines" result without touching that file. */
.form-card--wide {
  column-gap: var(--space-6);
  display: grid;
  grid-template-areas:
    "eyebrow eyebrow"
    "title   subtitle"
    "form    form";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: none;
}

.form-card--wide > .eyebrow {
  grid-area: eyebrow;
}

.form-card--wide > .eyebrow + h1 {
  grid-area: title;
}

.form-card--wide > .form-card-subtitle {
  align-self: end;
  grid-area: subtitle;
  margin: 0;
}

.form-card--wide > form {
  grid-area: form;
}

.form-card--wide textarea {
  min-height: 14rem;
}

.message-body {
  border-top: 1px solid var(--line);
  margin-top: 1.25rem;
  padding-top: 1rem;
}

.recipient-list {
  display: grid;
  gap: 1rem;
  list-style: none;
  padding: 0;
}

blockquote {
  border-left: 3px solid #d8d8d8;
  margin: 0.5rem 0 0;
  padding: 0.5rem 1rem;
}

/* Worker 3, measured live on /contractors/new/ (2026-08-03): a .form-grid
   row with an uneven pair of .field cells (one carries help text or a
   translate button, the other doesn't) stretches BOTH cells to the taller
   row height (.form-grid's default align-items: stretch), and then .field's
   own default align-content (normal, i.e. stretch for a grid) let that extra
   height flow into the control row instead of staying empty — KODAS
   rendered 58.2px tall against the normal 34.0px next to a shorter sibling
   field. align-content: start packs .field's own rows (label, control) at
   their natural height and leaves any extra row height as empty space below
   the control, which is invisible, instead of an inflated input/select. */
.field {
  align-content: start;
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

/* K-7218: a `.field` that groups a checkbox list is a fieldset named by its
   legend (the register form's employee picker); it keeps the plain field's
   box instead of the browser's frame. The legend is outside the grid flow,
   so it takes the grid gap as its own margin.
   K-7470: scoped to that form's `.po-fg` grid, whose `.po-fg > .field`
   already gives margin 0 and min-width 0. Global, the rule's 1rem bottom
   margin out-specified `.po-outcomes { margin: 0 }` on the other
   `fieldset.field` screens (work schedule, notification frequency). */
.po-fg > fieldset.field {
  border: 0;
  padding: 0;
}

.po-fg > fieldset.field > legend {
  margin-bottom: 0.4rem;
  padding: 0;
}

/* K-10209: every other `fieldset.field` (delivery schedule "Working days",
   the finance traffic-light groups) drew the browser's grey frame and
   indented legend. Only the frame, inline margin and padding go -- the
   bottom margin stays with the screen's own rules (K-7470 above).
   `:where()` keeps both rules at zero specificity, so they still beat the
   browser's fieldset style but never out-specify a screen's own class rule
   (`.po-outcomes`), which is what K-7470 scoped the old global rule for. */
:where(fieldset.field) {
  border: 0;
  margin-inline: 0;
  min-width: 0;
  padding: 0;
}

:where(fieldset.field) > legend {
  margin-bottom: 0.4rem;
  padding: 0;
}

/* K-10553: `{% form_field %}` draws a checkbox list or radio group as
   `fieldset.field-choices`; its legend wears the field label token below,
   and the list (Django's wrapping div) scrolls past ~16rem, the way the old
   `SelectMultiple size=10` did, instead of a 100-member column. */
.field-choices > legend {
  color: var(--label-text);
  font-size: var(--fs-field-value);
  font-weight: 500;
}

.field-choices > div {
  max-height: 16rem;
  overflow-y: auto;
}

/* Worker 2, 2026-08-11 S13 live walk (koordinatoriaus-nota-w2-helpai-w2-
   aplankams.md): `quality/action_form.html` and
   `quality/financial_decision_form.html` reference a `.form-stack` class
   on their `<form>` that was never defined here -- each field's bare
   `<label>{{ field.label }}{{ field }}{{ field.errors }}</label>` stayed
   at the browser's inline default, and only `select`/`textarea`'s own
   `width: 100%` (above) forced a visual line break. Adding this session's
   `help_text` (a `<small>` after the widget) exposed the gap live: the
   help text and the NEXT field's label ran together on the same line with
   no separator -- confirmed with a real Chromium screenshot, not assumed.
   Same shape as `.field` above, since a `.form-stack label` plays exactly
   that role in these two templates (`investigation_form.html`'s own
   `.form-stack` usage already wraps each field in a real `.field` div and
   is unaffected).

   K-5387 (Gedimino NCR session, Y4): missing the same `:not(.checkbox-label)`
   exclusion `.field > label:not(.checkbox-label)` above already carries --
   `investigation_five_why_wizard.html`'s "This is the root cause" checkbox
   sits inside `.form-stack #five-why-wizard-form`'s own `.field`, so this
   rule's `display: grid` (one implicit column, no `grid-template-columns`)
   out-specificities `.checkbox-label`'s own `display: flex` (an extra type
   selector beats a bare class) and stacks the checkbox glyph and its
   sentence onto two separate grid rows instead of one flex row -- the
   checkbox read as detached from its own label. */
.form-stack label:not(.checkbox-label) {
  align-content: start;
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

/* Finding 186: the standard field-wrapper label (<div class="field"><label>
   ...) gets its own caption token (K-8094 below), one step larger and darker
   than the filter-grid labels.
   Excludes .checkbox-label, which some templates nest directly inside
   a .field and whose own inline "checkbox + sentence" styling must not be
   overridden by this token. A `.field` legend is not listed (K-7470): the
   register form's own `.po-fg > .field > legend` rule styles it, and the
   muted uppercase token turned the work schedule and notification frequency
   legends into small caps.
   K-8094 (owner decision 2026-09-30, G3): the approved mockups' `.fl label`
   -- 13px, weight 500, normal case, darker than --muted. */
.field > label:not(.checkbox-label) {
  color: var(--label-text);
  font-size: var(--fs-field-value);
  font-weight: 500;
}

/* K-73: a field's help text, behind the same icon idiom as the topbar's
   `.help-link` (see `includes/field_help.html`) instead of printing
   permanently under every field. `<details>` needs no positioning of its
   own -- closed, it is exactly the icon's size; open, the explanation
   drops below it in normal flow, same as `.field`'s label-then-control
   stack. */
.field-help {
  display: inline-block;
}

.field-help-toggle {
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.95rem;
  list-style: none;
  padding: 0.1rem;
  vertical-align: middle;
}

/* Chrome/Safari paint their own disclosure triangle before the marker-less
   `list-style: none` above even applies -- this is the standard override. */
.field-help-toggle::-webkit-details-marker {
  display: none;
}

.field-help-toggle:hover,
.field-help[open] .field-help-toggle {
  color: var(--brand);
}

/* K-3834: the unit select on the affected-order row is filled from the GID
   lookup for everyone, so <details> keeps it out of the way of a registrar
   who never has to touch it — the <summary> alone (current pick, or "not
   set") is what stays visible closed; the <select> only shows once someone
   clicks in to correct it. */
.field-advanced summary {
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-field-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field-advanced[open] summary {
  margin-bottom: 0.4rem;
}

.field-help-text {
  color: var(--muted);
  display: block;
  margin-top: 0.25rem;
  text-transform: none;
}

/* Owner's 2026-08-21 layout note on the person card's Kontaktai tab
   (K-73): "Asmeninis telefonas"/"Asmeninis el. paštas" share a row, and
   "Artimasis nelaimės atveju"/"Kaip susijęs"/"Artimojo telefonas" share
   another. `person_form.html` wraps each such row in `.field-row`; the
   fields inside stop being full-width blocks and become equal flex items
   instead. `.field`'s own margin-bottom still separates one `.field-row`
   from the next, same as a bare `.field` between rows. */
.field-row {
  display: flex;
  gap: var(--space-4);
  margin-bottom: 1rem;
}

.field-row > .field {
  flex: 1;
  margin-bottom: 0;
  min-width: 0;
}

/* The "Artimasis nelaimės atveju" / "Kaip susijęs" pair: two fields
   presented as one block inside a `.field-row` (name wider than relation),
   so they read as one question with "Artimojo telefonas" beside the pair
   rather than under it. */
.field-pair {
  display: flex;
  flex: 1;
  gap: var(--space-2);
  min-width: 0;
}

.field-pair > .field {
  margin-bottom: 0;
  min-width: 0;
}

.field-pair > .field:first-child {
  flex: 2;
}

.field-pair > .field:last-child {
  flex: 1;
}

/* Finding 190/191/192 (owner: registration form layout parity — full-width
   numbered section cards with a one-line intro, ported from the old
   system's .lp-form-section/.lp-section-title/.ncr-intro, lp.css and
   _ncr_form.html at the pinned reference commit). One section per card
   instead of a single cramped two-column grid; the required-field marker
   and "View example" link both move to this same standing pattern. */
.ncr-form-section + .ncr-form-section {
  margin-top: 1rem;
}

.ncr-form-section-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  justify-content: space-between;
}

.ncr-form-section-head h2 {
  font-size: var(--fs-section-title);
  font-weight: 600;
  margin: 0;
}

.ncr-form-section-number {
  color: var(--brand);
  font-weight: 700;
}

/* `koordinatoriaus-nota-w2-ui-pluostas.md` item 1 (UI_KANONAS_v1.md §1):
   0.9rem (14.4px) and the divider's 1.25rem (20px, below) were two of this
   screen's own off-scale gaps — 20px is on the canon's own "found and must
   round" list verbatim; 14.4px is not named there but sits off every step
   the same way. Both round UP to the nearest scale member per the canon's
   own tie-break (`w1-ui-kanonas-v1-tokens-and-filter-row.md`), not down —
   0.9rem -> --space-4 (16px). */
.ncr-form-section-intro {
  color: var(--muted);
  font-size: var(--fs-field-value);
  line-height: 1.5;
  margin: 0.2rem 0 var(--space-4);
}

.ncr-form-section-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0;
}

.ncr-required-hint {
  color: var(--muted);
  font-size: var(--fs-field-value);
  margin: 0 0 1rem;
}

.required-marker {
  color: var(--danger);
  margin-left: 0.2rem;
}

/* T4-03: the NCR type is picked on three cards, not in a dropdown. The type
   decides which half of the registration form exists, so it cannot be the
   least visible control on the page — see forms.TYPE_FIELD_SCOPE and
   docs/plans/w3-ncr-registracijos-elgsena.md §1. */
.ncr-type-choice {
  border: 0;
  margin: 0 0 1rem;
  padding: 0;
}

.ncr-type-choice legend {
  color: var(--muted);
  font-size: var(--fs-field-value);
  font-weight: 600;
  padding: 0;
}

.ncr-type-cards {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.5rem;
}

.ncr-type-card {
  align-content: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: grid;
  gap: 0.3rem;
  grid-template-columns: auto 1fr;
  padding: 0.75rem;
}

.ncr-type-card:hover {
  border-color: var(--brand);
}

/* The radio stays a real radio in the top-left; the title sits beside it and
   the hint spans the full width underneath. */
.ncr-type-card input {
  margin: 0.15rem 0 0;
  width: auto;
}

.ncr-type-card-title {
  font-weight: 600;
}

.ncr-type-card-hint {
  color: var(--muted);
  font-size: 0.75rem;
  grid-column: 1 / -1;
  line-height: 1.4;
}

.ncr-type-card:has(input:checked) {
  background: var(--brand-tint);
  border-color: var(--brand);
}

/* T4-06: the input boxes of two fields side by side must sit at the same
   height. `.field { align-content: start }` (above) already stops a tall row
   from inflating the control, but a label that wraps to two lines still
   pushes its own input a line lower than its neighbour's. Subgrid makes the
   pair share the parent's label row, so the labels reserve one common height
   and the controls line up. Scoped to the registration form rather than
   changed on `.field` globally — every screen in the app uses that class.
   An inline `display:none` on a type-scoped field still wins over this
   rule's `display`, so hidden fields stay hidden.

   The span is THREE, not two, and the third row is why the owner could not
   register an NCR at all on 2026-08-09. A subgrid child does not grow extra
   rows: a child beyond the span is clamped onto the LAST track, i.e. painted
   over whatever already sits there. `.field` renders label + control + an
   optional meta row (`_ncr_field.html`), so at `span 2` every field carrying
   help text put that help text on top of its own control — `defect_type` and
   `discovery_date` were unclickable, and after a failed submit the validation
   message landed on the control too. Row 3 is that meta row. If you add a
   fourth child to `.field`, this number moves with it and
   `test_ncr_field_reachability.py` fails until it does. */
.ncr-form-section .form-grid > .field {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

/* K-6527 (NCR design audit K1): section 5's second column is not a `.field`
   but the `#ncr-isolation-fields` wrapper (a whole nested field). As a
   one-row grid item it sized the shared label row to its own full height,
   so "where is the affected product now" sat ~60px above its textarea.
   Spanning the same three rows, top-aligned, leaves that row to the labels. */
.ncr-form-section .form-grid > #ncr-isolation-fields {
  align-self: start;
  grid-row: span 3;
}

/* `koordinatoriaus-nota-w2-ui-pluostas.md` item 1: measured live
   (`tools/w2m_ncr_safety_gap_probe_playwright.py`) — a `.form-grid` row that
   wraps to a second grid row (an odd number of fields in the two-column
   grid, e.g. section 6's three concession fields) showed 32px between the
   wrapped row and the one above it, double the 16px every other field-to-
   field gap on this screen uses. `.form-grid`'s own `gap: 1rem` (16px row-
   gap, shared by every screen using that class) was stacking on top of
   `.field`'s own `margin-bottom: 1rem` (also 16px, needed as the sole
   vertical-spacing source for a bare `.field` outside any grid, e.g. this
   same screen's full-width fields), so a wrapped row paid both. Zeroing
   just the row-gap here — scoped to `.ncr-form-section .form-grid`, not
   `.form-grid` itself — leaves `.field`'s margin-bottom as the one source
   of row-to-row spacing on THIS screen, which is already correct for every
   other `.form-grid` adopter this rule does not touch. Column-gap (the
   horizontal space between the two fields in one row) is untouched. */
/* 2026-08-12 correction to the comment above: "already correct for every
   other `.form-grid` adopter" was wrong -- worker 3 measured the same
   32px double-count live on `/purchasing/` and `/logistics/parts/`
   (w3-note-to-worker-1-tarpas-skaiciuojamas-du-kartus-2026-08-12.md).
   `.form-grid` itself now zeroes its own row-gap, further up in this file,
   making this rule redundant; left in place rather than deleted since a
   more specific selector overriding an identical value is harmless. */
.ncr-form-section .form-grid {
  row-gap: 0;
}

/* One row for both optional children, so the child count above stays fixed
   whether the field carries help text, an error, or both. */
.ncr-form-section .form-grid > .field > .field-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* K-31 point 1 (owner's report of Gediminas' walk, 2026-08-20): the customer
   is picked from a list now, with a search box directly above it. The box and
   the list are two controls of one field, so they sit tight together and the
   search reads as the list's own filter rather than as a separate question.
   This `.field` is deliberately NOT inside `.form-grid` (see the subgrid rule
   above -- a third control would be painted on top of the second), so it needs
   its own vertical rhythm. */
.field-customer_name .ncr-customer-search {
  margin-bottom: 0.35rem;
}

.field-customer_name select {
  width: 100%;
}

/* K-2598 (Gediminas' 4th NCR walk, note 1): while the search box has typed
   text, the picker below it is expanded (`size` > 1, set in ncr_form.html)
   so the matches show immediately instead of staying inside a closed
   dropdown the person has to open themselves. This class only styles that
   state -- the `size` attribute itself does the actual expanding. */
.field-customer_name select.ncr-customer-select-open {
  max-height: 12rem;
  overflow-y: auto;
  border-color: var(--info);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* The lock a legacy GID card puts on the customer. `readOnly` does nothing to
   a <select> and `disabled` would stop it submitting, so the state is carried
   on a data attribute and drawn here: it still looks like the control it is,
   it just no longer answers the pointer. `clean()` re-derives the value from
   the card server-side regardless, so this is a courtesy, never the rule. */
.field-customer_name select[data-locked="1"] {
  background: var(--surface-muted, rgba(0, 0, 0, 0.04));
  pointer-events: none;
}

/* K-2598 (Gediminas' 4th NCR walk, note 5): a small "Captured" flag next to
   the label, shown once a choice or a typed comment has registered. It sits
   inside the <label> in _ncr_field.html on purpose (see that file) so it
   never becomes an extra grid child. No extra click is needed to see it --
   the script in ncr_form.html toggles `hidden` as the field is filled in. */
.field-save-state {
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--success, #2f7d4f);
}

.field-save-state::before {
  content: "✓ ";
}

/* K-31 point 4: the remove control is a button at the foot of each affected
   order, sitting apart from the fields so it cannot be mistaken for one. */
.order-form-actions {
  margin: 0.75rem 0 0;
}

@media (max-width: 720px) {
  .ncr-type-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* K-6301 (NCR design N12): the registration screen per the mockups
   `Registracija` and `Registracija-390` (saltiniai/ncr-maketai). Sizes are
   the mockup's own; every colour is an existing token. Scoped to
   `.ncr-register` so the other `.ncr-form-section` screens keep their look.
   Heading: path, 28px title, the "* required · NCR path" line, Cancel and
   the submit on the right. Below it a 260px column (section list with each
   section's fill state, first-time help, the NCR path diagram) beside the
   section cards: a 28px round number, an 18px title, "Example" on the
   right, a 13px grey intro, 16px between everything. */
.ncr-register-heading {
  align-items: flex-end;
  margin-bottom: var(--space-6);
}

.ncr-register-heading h1 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.ncr-register-heading .ncr-page-crumb {
  color: var(--muted);
  font-size: var(--fs-field-value);
}

.ncr-register-heading .ncr-required-hint {
  margin: 0;
}

.ncr-register-heading a,
.ncr-register .link-button {
  text-decoration: none;
}

.ncr-register .link-button.ncr-register-cancel,
.ncr-register-heading .actions .link-button {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-weight: 500;
  min-height: 40px;
  padding: 0 var(--space-4);
}

.ncr-register-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: 260px minmax(0, 1fr);
}

.ncr-register-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.ncr-register-aside > .card {
  margin: 0;
}

.ncr-register-nav {
  padding: 12px;
}

.ncr-register-nav ol {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ncr-register-nav a {
  align-items: center;
  border-radius: var(--radius-md);
  color: var(--text);
  display: flex;
  font-size: var(--fs-control);
  gap: 10px;
  padding: 9px 10px;
  text-decoration: none;
}

.ncr-register-nav a.is-current {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
  font-weight: 600;
}

/* The round marker: grey number while waiting, brand number for the
   section being worked in, a green tick once done. */
.ncr-register-chip {
  align-items: center;
  background: var(--rail-bg);
  border-radius: 50%;
  color: var(--muted);
  display: inline-flex;
  flex: none;
  font-size: 11px;
  font-weight: 600;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.ncr-register-chip .ti {
  display: none;
  font-size: 12px;
}

.ncr-register-nav a.is-current .ncr-register-chip {
  background: var(--brand);
  color: #fff;
}

.ncr-register-nav a.is-done .ncr-register-chip {
  background: var(--success);
  color: #fff;
}

.ncr-register-nav a.is-done .ncr-register-chip span {
  display: none;
}

.ncr-register-nav a.is-done .ncr-register-chip .ti {
  display: inline;
}

.ncr-register-help {
  background: color-mix(in srgb, var(--bg) 50%, var(--surface));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.ncr-register-help form {
  margin: 0;
}

.ncr-register-help .link-button.button-small {
  padding: 0;
}

.ncr-register-help-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.ncr-register-schema {
  padding: var(--space-4);
}

.ncr-register-main {
  min-width: 0;
}

#ncr-registration-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ncr-register .ncr-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  min-width: 0;
  scroll-margin-top: var(--space-6);
}

.ncr-register .ncr-form-section-head {
  align-items: center;
}

.ncr-register .ncr-form-section-head h2,
.ncr-register details.ncr-form-section > summary h2 {
  align-items: center;
  display: flex;
  font-size: 18px;
  font-weight: 600;
  gap: 12px;
  line-height: 1.3;
  margin: 0;
}

.ncr-register .ncr-form-section-number {
  align-items: center;
  background: var(--text);
  border-radius: 50%;
  color: var(--surface);
  display: inline-flex;
  flex: none;
  font-size: 13px;
  font-weight: 600;
  height: 28px;
  justify-content: center;
  width: 28px;
}

.ncr-register .ncr-form-section-head h2 .required-marker {
  margin-left: -8px;
}

.ncr-register .example-link {
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: var(--fs-field-value);
  font-weight: 500;
  min-height: 32px;
  padding: 0 12px;
}

.ncr-register .ncr-form-section-intro {
  font-size: var(--fs-field-value);
  line-height: 1.4;
  margin: -6px 0 0;
}

/* The disposition card is a `<details>` (K-3500/K-5538 decide when it may
   fold); its summary is drawn as the same numbered title, and the example
   button that sits in its own head row is lifted to the title's line. */
.ncr-register details.ncr-form-section {
  position: relative;
}

.ncr-register details.ncr-form-section > summary {
  cursor: pointer;
  list-style: none;
  min-height: 32px;
  padding-right: 120px;
}

.ncr-register details.ncr-form-section > summary::-webkit-details-marker {
  display: none;
}

.ncr-register details.ncr-form-section > .ncr-form-section-head {
  position: absolute;
  right: var(--space-6);
  top: 20px;
}

/* A `<details>` does not lay its children out as a flex column in every
   engine, so its 16px rhythm is margins. */
.ncr-register details.ncr-form-section {
  display: block;
}

.ncr-register details.ncr-form-section > :not(summary, .ncr-form-section-head) {
  margin-top: var(--space-4);
}

.ncr-register details.ncr-form-section > .ncr-form-section-intro {
  margin-top: 10px;
}

/* Fields: the mockup's 13px/500 label in the text colour, not the small
   upper-case caption other screens use. The fields' own 16px bottom margin
   stays the row spacing (see the subgrid rule above); the grid gives the
   last row's back so a card ends on its own 20px padding. K-6525: the
   investigation sub-screens' forms (`investigation_form.html`) take the same
   label. */
.ncr-register .field > label:not(.checkbox-label),
.ncr-subform .field > label:not(.checkbox-label),
.ncr-register .ncr-type-choice legend {
  color: var(--text);
  font-size: var(--fs-field-value);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.ncr-register .ncr-form-section > .form-grid,
.ncr-register .ncr-form-section > div > .form-grid,
.ncr-register .ncr-form-section > .ncr-form-wide-field {
  margin-bottom: -1rem;
}

.ncr-register .form-grid.ncr-register-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ncr-register .form-grid.ncr-register-single {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 0;
}

.ncr-register .ncr-register-half {
  max-width: calc(50% - 8px);
}

/* Type: three cards, radio beside a 15px title, the sentence under it. The
   legend stays for screen readers only -- the cards say it. */
.ncr-register .ncr-type-choice {
  margin: 0;
}

.ncr-register .ncr-type-choice legend {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.ncr-register .ncr-type-cards {
  gap: 10px;
  margin: 0;
}

.ncr-register .ncr-type-card {
  border-color: var(--line-strong);
  border-radius: 10px;
  column-gap: 10px;
  padding: 14px;
  row-gap: 4px;
}

.ncr-register .ncr-type-card input {
  grid-row: span 2;
  margin-top: 3px;
}

.ncr-register .ncr-type-card-title {
  font-size: 15px;
}

.ncr-register .ncr-type-card-hint {
  font-size: var(--fs-field-value);
  grid-column: 2;
}

.ncr-register .ncr-type-card:has(input:checked),
.ncr-register-priority-card:has(input:checked) {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
  border: 2px solid var(--brand);
  padding: 13px;
}

/* Affected orders: one bordered box per order -- "Order #1" and its
   completeness badge on one line, the five fields in one row, the GID card
   note, then the red ghost "Remove". */
.ncr-register .order-form {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 0 0 var(--space-4);
  padding: 14px 16px;
}

.ncr-register .ncr-register-order-head {
  align-items: center;
  display: flex;
  float: left;
  font-size: var(--fs-control);
  font-weight: 600;
  justify-content: space-between;
  margin-bottom: 14px;
  padding: 0;
  width: 100%;
}

.ncr-register-order-fields {
  clear: both;
  column-gap: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ncr-register-order-fields > .field {
  min-width: 0;
}

.ncr-register-order-card {
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: var(--fs-field-value);
  margin: 0 0 14px;
  padding: 10px 12px;
}

.ncr-register .order-form-actions {
  margin: 0;
}

.ncr-register .ncr-register-remove {
  color: var(--danger);
}

.ncr-register-add {
  margin: 0;
}

.ncr-register-add-phone {
  display: none;
}

/* Photos: a dashed drop area, the title and the size note on the left,
   "Choose files" on the right. */
.ncr-register .ncr-register-dropzone {
  align-items: center;
  border: 1.5px dashed var(--line-strong);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  margin: 0 0 1rem;
  padding: 18px;
}

.ncr-register .ncr-register-dropzone > .ncr-register-dropzone-text {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-control);
}

.ncr-register-dropzone-text small {
  color: var(--muted);
  font-size: var(--fs-field-value);
}

.ncr-register-dropzone .ncr-evidence-list {
  flex-basis: 100%;
}

/* Containment: "Right to stop work" below a line inside the same card. */
.ncr-register-subblock {
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
}

.ncr-register-subblock h3 {
  font-size: var(--fs-control);
  font-weight: 600;
  margin: 0;
}

.ncr-register-subblock .ncr-form-section-intro {
  margin: 0;
}

/* Priority: four cards, radio beside the level (dot + word in the level's
   colour), the criterion and the target response time. */
.ncr-register-priority {
  border: 0;
  margin: 0;
  padding: 0;
}

.ncr-register-priority legend {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.ncr-register-priority-cards {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ncr-register-priority-card {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 12px 14px;
}

.ncr-register-priority-card input {
  margin-top: 3px;
  width: auto;
}

.ncr-register-priority-card:has(input:checked) {
  padding: 11px 13px;
}

.ncr-register-priority-body {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-field-value);
  gap: 4px;
  line-height: 1.4;
}

.ncr-register-priority-body small {
  color: var(--muted);
  font-size: 12px;
}

.ncr-register-priority-level {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  gap: 6px;
}

.ncr-register-priority-level::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  height: 6px;
  width: 6px;
}

.ncr-register-priority-level--medium {
  color: var(--brand-dark);
}

.ncr-register-priority-level--high,
.ncr-register-priority-level--critical {
  color: var(--danger);
}

.ncr-register-priority-level--critical {
  font-weight: 600;
}

.ncr-register .ncr-register-actions {
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

/* The phone walk's parts stay out of the desktop page. */
.ncr-register-progress,
.ncr-register-progress-label,
.ncr-register-step-value {
  display: none;
}

/* K-6900: an affected order's help sits behind an "i" in its label on a
   desktop row -- five ~100 px columns broke it one word per line. The phone
   stacks the fields and shows the text again (below). */
.ncr-register-order-tip {
  color: var(--muted);
  cursor: help;
  font-size: 14px;
  vertical-align: -2px;
}

.ncr-register-order-fields .ncr-register-order-help {
  display: none;
}

.ncr-register-priority-card input {
  flex: 0 0 auto;
}

.ncr-register-priority-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* K-6900: on a 1366-1440 screen the 260 px side column squeezed the form to
   ~600 px. Below 1500 the section list becomes a strip above the form and
   the help and diagram follow it; the notes of an order take a row of their
   own. */
@media (min-width: 721px) and (max-width: 1499px) {
  .ncr-register-layout {
    gap: var(--space-4);
    grid-template-columns: minmax(0, 1fr);
  }

  .ncr-register-aside {
    display: contents;
  }

  .ncr-register-aside > * {
    order: 2;
  }

  .ncr-register-aside > .ncr-register-nav {
    order: 0;
  }

  .ncr-register-main {
    order: 1;
  }

  .ncr-register-nav ol {
    flex-flow: row wrap;
  }

  .ncr-register-nav a {
    white-space: nowrap;
  }

  .ncr-register-order-fields {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ncr-register-order-fields > .field:nth-child(5) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .ncr-register-heading {
    align-items: stretch;
    margin-bottom: var(--space-4);
  }

  .ncr-register-heading h1 {
    font-size: 24px;
  }

  .ncr-register-heading .ncr-required-hint,
  .ncr-register-heading .ncr-page-crumb .ncr-register-crumb-root {
    display: none;
  }

  /* K-6401: the heading's Cancel is the phone's only way out of the
     stepped walk (the foot hides its own Cancel for Back/Next), so it stays;
     the heading's submit is `.hide-phone` in the template instead. */
  .ncr-register-heading .actions {
    justify-content: flex-end;
  }

  .ncr-register-heading .actions .link-button,
  .ncr-register-heading .actions .button {
    min-height: 44px;
  }

  .ncr-register-heading > .ncr-card-heading {
    flex: 1 1 auto;
    width: 100%;
  }

  .ncr-register-order-fields input,
  .ncr-register-order-fields .fw-code {
    max-width: none;
    width: 100%;
  }

  .ncr-register-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  /* The walk replaces the section list; help and the diagram follow the
     form instead of preceding it. */
  .ncr-register-aside {
    order: 2;
  }

  .ncr-register-nav {
    display: none;
  }

  .ncr-register--stepped .ncr-register-progress:not([hidden]) {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 2px;
  }

  .ncr-register-progress span {
    background: var(--rail-bg);
    border-radius: 2px;
    height: 4px;
  }

  .ncr-register-progress span.is-done {
    background: var(--success);
  }

  .ncr-register-progress span.is-current {
    background: var(--brand);
  }

  .ncr-register--stepped .ncr-register-progress-label:not([hidden]) {
    color: var(--muted);
    display: block;
    font-size: var(--fs-field-value);
    margin: 0;
  }

  .ncr-register .ncr-form-section {
    padding: var(--space-4);
  }

  .ncr-register .form-grid,
  .ncr-register .form-grid.ncr-register-three {
    grid-template-columns: minmax(0, 1fr);
  }

  .ncr-register .ncr-register-half {
    max-width: none;
  }

  .ncr-register-priority-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .ncr-register-order-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ncr-register-order-fields > .field:nth-child(1),
  .ncr-register-order-fields > .field:nth-child(4),
  .ncr-register-order-fields > .field:nth-child(5) {
    grid-column: 1 / -1;
  }

  .ncr-register-order-fields .ncr-register-order-help {
    display: block;
  }

  .ncr-register-order-tip {
    display: none;
  }

  .ncr-register-add-desktop {
    display: none;
  }

  .ncr-register-add-phone {
    display: inline;
  }

  .ncr-register .ncr-register-add .button,
  .ncr-register .link-button.button-small {
    min-height: 44px;
  }

  /* One section open at a time: the others fold to their title line --
     grey number and title while waiting, a green tick and the chosen type
     once done, a brand frame around the open one. */
  .ncr-register--stepped .ncr-form-section:not(.is-collapsed) {
    border: 2px solid var(--brand);
    padding: 15px;
  }

  .ncr-register--stepped .ncr-form-section.is-collapsed > :not(.ncr-form-section-head, summary),
  .ncr-register--stepped .ncr-form-section.is-collapsed .example-link,
  .ncr-register--stepped details.ncr-form-section.is-collapsed > .ncr-form-section-head {
    display: none;
  }

  .ncr-register--stepped #ncr-section-concession.is-collapsed {
    display: none;
  }

  .ncr-register--stepped .ncr-form-section.is-collapsed {
    cursor: pointer;
  }

  .ncr-register--stepped .ncr-form-section.is-collapsed h2 {
    color: var(--muted);
    font-size: 16px;
    font-weight: 400;
  }

  .ncr-register--stepped .ncr-form-section.is-collapsed .ncr-form-section-number {
    background: var(--rail-bg);
    color: var(--muted);
  }

  .ncr-register--stepped .ncr-form-section.is-step-done h2 {
    color: var(--text);
    font-weight: 600;
  }

  .ncr-register--stepped .ncr-form-section.is-step-done .ncr-form-section-number {
    background: var(--success);
    color: #fff;
    font-size: 0;
  }

  .ncr-register--stepped .ncr-form-section.is-step-done .ncr-form-section-number::after {
    content: "\2713";
    font-size: 14px;
  }

  .ncr-register--stepped .ncr-register-step-value:not([hidden]) {
    color: var(--muted);
    display: inline;
    font-size: var(--fs-field-value);
  }

  .ncr-register details.ncr-form-section > .ncr-form-section-head {
    position: static;
  }

  /* K-6428 (K-45): the folding section's title is a touch target -- 332x32
     at 390px. Phone only: on a computer the 32px title lines up with the
     absolutely placed Example link, and a mouse does not need 44px. */
  .ncr-register details.ncr-form-section > summary {
    align-items: center;
    display: flex;
    min-height: 44px;
    padding-right: 0;
  }

  /* Back and Next (48px, Next taking the rest of the row); the submit
     takes Next's place on the last section. */
  .ncr-register--stepped .ncr-register-actions {
    flex-direction: row;
  }

  /* Specific enough to beat the `button[type="submit"]` safety net. */
  .ncr-register--stepped .ncr-register-actions .ncr-register-cancel,
  .ncr-register--stepped:not(.is-last-step) .ncr-register-actions button.ncr-register-submit[type="submit"] {
    display: none;
  }

  .ncr-register--stepped .ncr-register-actions .button,
  .ncr-register--stepped .ncr-register-actions .ncr-register-submit {
    min-height: 48px;
    width: auto;
  }

  .ncr-register--stepped .ncr-register-back {
    flex: 0 0 auto;
    min-width: 116px;
  }

  .ncr-register--stepped .ncr-register-next,
  .ncr-register--stepped .ncr-register-submit {
    flex: 1 1 auto;
  }
}

/* Finding 190: a small text link at the section's top-right, not a full
   button, matching the old system's .ncr-example-link (lp.css). Keeps the
   existing .help-example-toggle class so the click handler in
   ncr_form.html needs no change. */
.example-link {
  align-items: center;
  background: none;
  border: 0;
  color: var(--brand);
  cursor: pointer;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 0.3rem;
  padding: 0;
}

.example-link:hover {
  text-decoration: underline;
}

/* K-2738: the toggled example body (investigation_form.html, ncr_form.html,
   financial_decision_form.html, investigation_detail.html) used to render as
   one unbroken paragraph -- bo/static/js/help-examples.js now splits a
   multi-step example into one `.help-example-line` per source line, this
   just gives each line its own row and the question half (up to the arrow)
   its own color so it reads apart from the answer instead of blending into
   the surrounding muted text. overflow-wrap keeps a long line from forcing
   horizontal scroll on a narrow (390px) screen. */
.help-example-content {
  display: block;
  overflow-wrap: break-word;
}

.help-example-line {
  display: block;
  margin-top: 0.5rem;
}

.help-example-line:first-child {
  margin-top: 0;
}

.help-example-line strong {
  color: var(--text);
}

.help-example-line--conclusion {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
}

.help-example-line--conclusion strong {
  color: var(--brand);
}

/* K-2738: the "chain so far" step lists (5 Whys wizard and the matching
   read-only summary on investigation_detail.html) packed the question
   (<strong>), the answer and the early-stop/AI notes (each a <small>) onto
   one inline flow -- with no separator between the <small> tags they read
   as one run-on sentence. Each note now gets its own row. */
.chain-line {
  display: block;
  color: var(--muted);
  margin-top: 0.15rem;
}

/* Finding 87: the universal AI "Translate" button ai_translate_widget.html
   injects after any <prefix>_lt field. .button-sm doesn't exist yet, so this
   is sized down inline rather than adding a new size variant for one use. */
.ai-translate-button {
  align-self: start;
  font-size: 0.75rem;
  justify-self: start;
  margin: 0.3rem 0.4rem 0 0;
  padding: 0.3rem 0.6rem;
  width: auto;
}

/* K-10209: inside a `.field` grid the button and status are grid items;
   without the start alignment they stretched across the row or floated in
   its centre under the LT field. */
.ai-translate-status {
  color: var(--muted);
  display: inline-block;
  font-size: 0.75rem;
  justify-self: start;
  margin-top: 0.3rem;
}

/* koordinatoriaus-nota-w1-savininko-radiniai-08-13-nakties-eile.md item 5:
   the FORM-SCREEN canon's button row -- was `.ncr-form-actions` only, one
   screen's own name for a pattern every admin form needs (Cancel/Submit,
   right-aligned). Shared selector so the two names stay one rule, not two
   that can drift; `.ncr-form-actions` kept for the templates already using
   it (a mechanical rename is not this package's job), `.form-screen-actions`
   is the name new/edited screens should reach for. See docs/architecture/
   w1-ui-kanonas-v1-tokens-and-filter-row.md. */
.form-screen-actions,
.ncr-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

/* K-3150 (Kokybe mobile pass): below phone width the right-aligned button
   row above sizes each button to its own text, which on a form the user
   reached specifically to submit (register/save an NCR, record a
   corrective-action waiver) leaves the primary action as a small target
   floating at the row's edge. Stacking and widening to the full form
   column matches the "formos vieno stulpelio, mygtukai pilno plocio"
   mobile canon without touching desktop, where this block does not apply.
   `.form-stack.form-stack--full-width-submit > button[type="submit"]`
   covers the same primary-submit pattern in templates that skip the
   `.form-screen-actions` wrapper entirely (quality/action_form.html opts
   in with the modifier class); plain `.form-stack` is used well beyond
   Kokybe (e.g. atsiliepimai/gama.html)
   and must not be widened there, hence the modifier rather than a bare
   `.form-stack > button[type="submit"]` selector. `#corrective-waiver-form`
   is the one quality/closure_detail.html form with neither wrapper nor a
   shared class on its own submit button. */
@media (max-width: 720px) {
  .form-screen-actions,
  .ncr-form-actions {
    flex-direction: column;
  }

  .form-screen-actions > *,
  .ncr-form-actions > *,
  .form-stack.form-stack--full-width-submit > button[type="submit"],
  #corrective-waiver-form button[type="submit"] {
    width: 100%;
  }
}

/* K-5387 (Gedimino NCR session, Y5): the 6M wizard's "ai_card" step shows
   its one primary button ("Accept AI hypothesis") alongside three
   secondary ones ("Edit" / "Reject AI hypothesis" / "Write my own") in one
   plain `.actions` row (`display: flex; flex-wrap: wrap`, main.css above)
   -- four buttons of uneven text length wrap onto three uneven lines below
   phone width instead of one clean stack. Same "formos vieno stulpelio,
   mygtukai pilno plocio" mobile canon as `.form-screen-actions`/
   `.ncr-form-actions` just above, scoped to this one wizard's own form so
   the generic `.actions` class used across dozens of unrelated screens is
   untouched. */
@media (max-width: 720px) {
  #six-m-wizard-form .actions {
    flex-direction: column;
  }

  #six-m-wizard-form .actions > * {
    width: 100%;
  }
}

/* koordinatoriaus-nota-w1-savininko-radiniai-08-13-nakties-eile.md item 5:
   the one `.form-grid` (main.css, `grid-template-columns: repeat(2, ...)`)
   never had a shared way to let one field span both columns (a notes
   textarea, a long address) -- every screen that needed it either hand-
   rolled its own `grid-column` or just left the field half-width, one more
   small inconsistency behind "every screen invents its own layout". */
.form-grid-full {
  grid-column: 1 / -1;
}

/* K-6183 (NCR design N9, mockup `Finansai`): the financial decision -- three
   cards on the left (quantity, compensation, extra costs) with the save row
   under them, a 400px column on the right (verification, largest risk,
   settlement by positions); one column below 1100px, form first. Sizes are
   the mockup's own (`saltiniai/ncr-maketai/html/Finansai.dc.html`).
   `.ncr-fin-group` is a field group the script shows or hides as one
   (`#other-method-fields`, `#compensation-scope-fields`) whose fields still
   sit in the card's two-column grid; `.ncr-fin-after` puts the notes after
   the amount the group precedes in the markup. */
.ncr-fin-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: minmax(0, 1fr) 400px;
}

.ncr-fin-main,
.ncr-fin-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.ncr-fin-layout .card {
  margin: 0;
}

.ncr-fin-main > .card--stack {
  gap: var(--space-4);
}

.ncr-fin-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ncr-fin-grid > p {
  font-size: var(--fs-field-value);
  margin: 0;
}

.ncr-fin-group {
  display: contents;
}

.ncr-fin-after {
  order: 1;
}

.ncr-fin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ncr-fin-field > label {
  font-size: var(--fs-field-value);
  font-weight: 500;
}

.ncr-fin-field > small,
.ncr-fin-field > p {
  font-size: 0.75rem;
  margin: 0;
}

.ncr-fin-examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.ncr-fin-state {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.ncr-fin-main > .form-screen-actions {
  gap: var(--space-4);
  margin: 0;
}

@media (max-width: 1100px) {
  .ncr-fin-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .ncr-fin-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* K-45: 44px touch targets on a phone. */
  .ncr-fin-layout .button-small,
  .ncr-fin-layout .link-button,
  .ncr-fin-state a {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
}

/* K-6300 (NCR design N11, mockup `Uzdarymas`): the closure screen -- the
   four checks in one row of cards (label 12px grey, value 18px/600, green
   when done), then two columns: the closure evidence (a 2px green frame
   once the NCR is closed) on the left, the product disposition and the
   corrective / preventive actions on the right; the DF-act documents and
   the requirements card run full width underneath. One column below
   1100px, the checks two by two, then one below 720px. Sizes are the
   mockup's own (`saltiniai/ncr-maketai/html/Uzdarymas.dc.html`). */
.ncr-close-checks {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 var(--space-6);
}

.card.ncr-close-check {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 16px 18px;
}

.ncr-close-check-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.ncr-close-check-value {
  font-size: 1.125rem;
  font-weight: 600;
}

.ncr-close-check-value--ok {
  color: var(--success);
}

.ncr-close-layout {
  align-items: start;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 var(--space-6);
}

.ncr-close-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.ncr-close-layout .card {
  margin: 0;
}

.card.ncr-close-evidence--closed {
  border: 2px solid var(--success);
  padding: 19px 23px;
}

.ncr-close-statement {
  font-size: 0.9375rem;
  line-height: 1.55;
}

.ncr-close-note {
  font-size: var(--fs-control);
}

.ncr-close-requirements {
  display: grid;
  font-size: var(--fs-control);
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  line-height: 1.5;
}

.ncr-close-requirements .requirement-checklist {
  margin-top: var(--space-2);
}

.card.ncr-close-while-open {
  background: var(--bg);
}

.ncr-close-documents > .ncr-card-chead > .leo-langas-heading {
  flex: 1 1 320px;
}

.ncr-close-generate {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.ncr-close-generate select {
  width: auto;
}

.ncr-close-pdf {
  text-align: right;
}

.ncr-close-pdf .button-small {
  gap: 6px;
}

.ncr-close-sr {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.ncr-close-hash {
  overflow-wrap: anywhere;
}

/* The dialog's text boxes at the mockup's height (evidence 100px, override
   reason 72px) instead of the widgets' ten rows; both still resize. */
.ncr-close-dialog textarea {
  height: 100px;
  min-height: 80px;
}

.ncr-close-dialog textarea[name="override_reason"] {
  height: 72px;
  min-height: 56px;
}

.leo-langas-ai {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* The AI answer lines stay out of the column gap until they carry text.
   Visually hidden, not display: none -- they are role="status" live regions
   and must already be in the accessibility tree when JS writes the answer,
   or screen readers do not announce it. */
.leo-langas-form > .task-meta:empty {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (max-width: 1100px) {
  .ncr-close-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ncr-close-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .ncr-close-checks,
  .ncr-close-requirements {
    grid-template-columns: minmax(0, 1fr);
  }

  /* K-45: 44px touch targets on a phone. */
  .ncr-close-head .link-button,
  .ncr-close-layout .button-small,
  .ncr-close-documents .button-small,
  .leo-langas-ai .button-small {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
}

/* K-6241 (NCR design N10, mockup `Sutikrinimas`): the returned-production
   verification -- one card per GID on the left, a 340px column on the
   right (status, photos); one column below 1100px, GIDs first. A GID card
   is its head (number, registered quantity, result pill), the fields in
   three columns -- two while neither the correction method nor the final
   action is showing -- the comment, the tick, and a foot with who/when and
   "Save". Sizes are the mockup's own
   (`saltiniai/ncr-maketai/html/Sutikrinimas.dc.html`); the fields reuse
   N9's `.ncr-fin-field`. */
.ncr-verify-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: minmax(0, 1fr) 340px;
}

.ncr-verify-main,
.ncr-verify-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.ncr-verify-layout .card {
  margin: 0;
}

.ncr-verify-state {
  min-height: 40px;
  padding: 0 14px;
}

.ncr-gid-head,
.ncr-gid-foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.ncr-gid-head {
  align-items: flex-start;
}

.ncr-gid-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ncr-gid-title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.ncr-gid-differs {
  color: var(--brand-dark);
}

.ncr-gid-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ncr-gid-grid:not(:has(> [data-gid-field="correction_method"]:not([hidden]), > [data-gid-field="disposition"]:not([hidden]))) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ncr-verify-count {
  align-items: baseline;
  display: flex;
  gap: var(--space-2);
}

.ncr-verify-big {
  font-size: 2.125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ncr-verify-track {
  background: var(--rail-bg);
}

.ncr-verify-kv {
  grid-template-columns: 120px minmax(0, 1fr);
}

.ncr-gid-check .checkbox-label {
  font-size: var(--fs-control);
}

@media (max-width: 1100px) {
  .ncr-verify-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .ncr-gid-grid,
  .ncr-gid-grid:not(:has(> [data-gid-field="correction_method"]:not([hidden]), > [data-gid-field="disposition"]:not([hidden]))) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* K-45: 44px touch targets on a phone. */
  .ncr-verify-head .link-button,
  .ncr-verify-layout .button-small,
  .ncr-verify-layout .link-button {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
}

/* Koordinatoriaus nota 2026-08-12 (w4-savininko-radiniai-08-12-vedlys-
   zinutes), punktas B2: this row has FOUR children (method select, search
   input, value select, add button) but only three tracks were declared --
   the button silently wrapped onto its own row, squeezed into the first
   track's width (visible live as a narrow "Pridėti" button sitting on its
   own line). Track four (the value select) is where the reported jitter
   lived: with no explicit width of its own, a grid item's default
   `min-width: auto` lets its INTRINSIC content -- here, whichever option
   `renderValueOptions()` (new_task.html) just wrote in from the search
   results -- stretch the track wider than its neighbours track by track as
   the operator types and the option list changes. `min-width: 0` + `width:
   100%` on the controls below makes every track hold to the size the grid
   already gives it, regardless of option text length.

   `align-items: start`, not the earlier `stretch`: punktas B1 grows the
   value select's own `size` attribute open into a multi-row listbox when
   more than one candidate matches, and `stretch` would pull the method
   select and search input up to that same tall height instead of leaving
   them at their normal single-line size. */
.addressing-picker {
  align-items: start;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(130px, 0.7fr) minmax(220px, 1.5fr) minmax(160px, 1fr) auto;
}

.addressing-picker > select,
.addressing-picker > input {
  min-width: 0;
  width: 100%;
}

/* Koordinatoriaus nota 2026-08-12 (w4-savininko-radiniai-08-12-vedlys-
   zinutes), punktas B4: the linked-object search+listbox pair -- same
   shape as `.addressing-picker` above, minus its method-select and
   add-button tracks (only one record can be linked, so picking a listbox
   row IS the action). */
.linked-object-picker {
  align-items: start;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(220px, 1.5fr) minmax(220px, 1.5fr);
}

.linked-object-picker > select,
.linked-object-picker > input {
  min-width: 0;
  width: 100%;
}

.addressing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.addressing-chips li {
  align-items: center;
  background: var(--bg);
  border-radius: var(--radius-pill);
  display: flex;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
}

.chip-remove {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

/* Finding 185: control height/padding/text size ported verbatim from the old
   system's .lp-field input/select/textarea (lp.css:967-977 — padding
   8px 10px, font-size 13px). Excludes checkbox/radio: this selector used to
   catch every `<input>` regardless of type, so a bare filter checkbox (e.g.
   `/warehouse/stock/`'s archived/stale-only toggles, not wrapped in
   `.checkbox-label`) got stretched to `width: 100%` with a text-field
   border and padding instead of rendering as a native checkbox — reported
   live on a per-role screen walk. `.checkbox-label input { width: auto }`
   below only ever patched the width for checkboxes inside that one
   wrapper class, not the border/padding, and not bare ones outside it. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--fs-field-value);
  padding: 0.5rem 0.625rem;
  width: 100%;
}

/* Worker 3, 2026-08-12, measured on `.fw-long`'s first consumer (the Secret
   Manager references on /organization/settings/company/,
   tools/w3_pluostas_walk_playwright.py reading `getComputedStyle().fontFamily`
   off the live input): `.fw-long`'s own monospace declaration (§4, line ~132)
   never reached an `<input>`. The rule directly above sets
   `font-family: inherit`, and each `:not()` carries its argument's weight, so
   that selector scores (0,2,1) against `.fw-long`'s (0,1,0) and wins on every
   text input in the app. The width half of the class worked, which is exactly
   why this was invisible until somebody read the font back rather than the
   markup — the field was full width and still proportional.

   Repeating the selector's own shape puts this at (0,3,1). It sits here,
   immediately after the rule it overrides, rather than beside its siblings in
   §4: `operations.test_navigation`'s checkbox-exemption guard finds "the
   global text field rule" by the FIRST occurrence of that selector text, and
   this rule declared earlier in the file silently became the one it measured.
   Scoped to the elements that have the problem — on a <div> or a <span> §4's
   original rule already applies. Written in worker 1's file rather than left
   in a note because `.fw-long` has no other consumer yet
   (`docs/architecture/w1-ui-kanonas-v1-tokens-and-filter-row.md`: "None
   consumed yet in this package"), so the fix cannot collide with an adoption
   elsewhere; the note to worker 1 records it anyway, the way `#933`/`#934`
   taught us to. */
input:not([type="checkbox"]):not([type="radio"]).fw-long,
textarea.fw-long {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

textarea {
  resize: vertical;
}

/* ADDITION TO PACKAGE 2, item 4 (owner live walkthrough, 2026-08-02): a bare
   checkbox/radio inside `.field` (e.g. /warehouse/stock/'s "Suarchyvuota"/
   "Tik užsistovėję" filters) is a grid item like its sibling <label>, and
   `.field`'s single-column grid defaults `justify-items` to `stretch`. The
   width:100% exclusion above (finding 185) stops the *declared* CSS width
   from reaching checkboxes/radios, but grid stretch alignment is a separate
   mechanism and still stretched the input's layout box to the full column
   width — Chrome/Firefox then paint the small checkbox glyph CENTERED
   within that oversized box, which reads as "the checkbox drifted right,
   unrelated to its own label" (confirmed live: box computed to 536px wide,
   glyph rendered mid-column instead of under the label's left edge). Opt
   bare checkboxes/radios out of stretch so they size to content and sit at
   the column start, same as every other native form control at rest. */
.field > input[type="checkbox"],
.field > input[type="radio"] {
  justify-self: start;
}

.checkbox-label,
.question-order {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.question-order input {
  width: auto;
}

/* w3-note-to-worker-1-fw-long-ir-13px-langelis-2026-08-12.md items 2/3 +
   w3-note-to-worker-1-checkbox-grepas-aklas-2026-08-12.md: the two scoped
   fixes below (`.registry-filter-grid`, `.filters`) only size a checkbox
   inside a filter row; every OTHER `.checkbox-label` consumer -- plain forms
   like `organizations/company_settings.html`'s four SMTP/IMAP toggles and
   `dynamic_catalogs`'s "Bazinis vienetas" -- kept the browser's native ~13px
   box next to this app's 34-40px text fields, because `includes/
   form_field.html`/`catalogs/form_field.html` (the shared BooleanField
   render path both notes found `grep 'type="checkbox"'` blind to) route
   every checkbox through this same base class. Promoted here instead of
   adopted screen by screen: every existing and future `.checkbox-label`
   consumer gets it with zero template edits, since the class already wraps
   every one of them. `flex-shrink: 0` is the same note's item 3 (a
   `.checkbox-label` is `display: flex`; a long sibling sentence -- e.g.
   `/warehouse/stock/`'s "Tik užsistovėję (negyvos atsargos)" -- otherwise
   squeezes the box to 18px even with an explicit width). */
.checkbox-label input {
  flex-shrink: 0;
  height: 20px;
  width: 20px;
}

.question-order input {
  max-width: 5rem;
}

.receiving-form-card {
  max-width: none;
}

.receiving-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.receiving-wide {
  grid-column: 1 / -1;
}

.receiving-lines {
  display: grid;
  gap: 1rem;
}

.receiving-line-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-top: 1rem;
  padding: 1rem;
}

.receiving-line-card .checkbox-label {
  margin: 0;
}

/* K-6886: Remove sits beside the line's fold, on the summary row, so a
   folded line can be marked for removal without expanding it. */
.receiving-line-shell {
  align-items: start;
  column-gap: 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.receiving-line-shell > [data-line-body] {
  grid-column: 1;
  grid-row: 1;
}

.receiving-line-remove {
  grid-column: 2;
  grid-row: 1;
}

.danger-card {
  border-color: var(--danger);
}

/* Finding 174/185 (worker-3 report, 2026-07-30): this rule used to diverge from
   .button on five properties (padding, font-size via `font: inherit`, background,
   border, white-space), so a bare <button type="submit"> paired with a
   <a class="button button-secondary"> Cancel read as "almost but not quite" the
   same size — the owner's exact complaint. Tokens now match .button verbatim. */
button[type="submit"]:not(.link-button):not(.button-link):not(.task-row-button) {
  align-items: center;
  background: var(--brand);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font-size: var(--fs-control);
  font-weight: 500;
  gap: var(--space-2);
  justify-content: center;
  line-height: 1.2;
  min-height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  white-space: nowrap;
}

button[type="submit"]:not(.link-button):not(.button-link):not(.task-row-button):hover {
  background: var(--brand-dark);
}

/* Component gallery self-review, Package 0b item 1 (2026-08-03, BLOCKING):
   `:disabled`/`[disabled]`/`[readonly]` computed to the exact same
   background as an enabled control everywhere in the app -- a live
   getComputedStyle pass on the gallery found the "Issaugoti" button and its
   `disabled=true` twin both rendering rgb(154,110,26) at opacity 1, and a
   plain/readonly/disabled input all resolving to the same white background
   and border; the only difference anywhere was the mouse cursor. On the
   touch scanning terminals the warehouse is being fitted with there is no
   cursor at all, so a dead button looked exactly like the primary action
   and a read-only field exactly like an editable one. A flat, distinct
   background (not opacity, which a no-cursor touch viewer -- and a
   computed-style comparison -- cannot see) is the fix. Selectors below
   reuse each existing rule's own specificity shape (the `:not()` exclusion
   chain for the `button[type="submit"]` safety net, one extra class step
   for `.button`) so a disabled state always outranks the rule it disables,
   by construction rather than by source-order luck. `[readonly]` gets a
   different treatment from `:disabled` on purpose -- a read-only field
   still shows a real, current value the operator did not type, unlike a
   disabled one that cannot be interacted with at all. */
.button:disabled,
button:disabled:not(.link-button):not(.button-link):not(.task-row-button) {
  background: var(--bg);
  border-color: var(--line-strong);
  color: var(--muted);
  cursor: not-allowed;
}

.button:disabled:hover,
button:disabled:not(.link-button):not(.button-link):not(.task-row-button):hover {
  background: var(--bg);
  color: var(--muted);
}

/* K-19 (owner finding, 2026-08-19 evening): an `<a class="button ...">` has
   no native `disabled` state, but the same "still looks clickable while the
   page is loading" trap applies to it -- `production_import/import_preview.html`'s
   "Back to import" link, marked `aria-busy="true"` by its own click handler.
   Same flat, distinct background as the real `:disabled` rule above (not
   opacity, for the same no-cursor-terminal reason), plus `pointer-events:
   none` because unlike a real button a link has no way to refuse a second
   click other than the browser never routing it there. */
.button[aria-busy="true"],
.button-secondary[aria-busy="true"] {
  background: var(--bg);
  border-color: var(--line-strong);
  color: var(--muted);
  cursor: not-allowed;
  pointer-events: none;
}

input:not([type="checkbox"]):not([type="radio"]):disabled,
select:disabled,
textarea:disabled {
  background: var(--bg);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

input:not([type="checkbox"]):not([type="radio"])[readonly],
textarea[readonly] {
  background: var(--bg);
  color: var(--text);
  cursor: default;
}

.error {
  color: var(--danger);
}

/* K-8173: field error text under a form control (includes/form_field.html and 13 templates). */
.field-error {
  color: var(--danger);
  font-size: var(--fs-control);
  margin-top: 0.25rem;
}

.filter-row,
.form-grid,
.detail-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* w3-note-to-worker-1-tarpas-skaiciuojamas-du-kartus-2026-08-12.md: `.field`
   (below, margin-bottom: 1rem) is the one vertical-spacing source a bare
   `.field` needs outside any grid -- but wherever a `.filter-row`/`.form-grid`
   wraps to a second row, that same 1rem also comes from the `gap` above,
   doubling every wrapped row's spacing to 2rem (measured live, two
   independent methods, four widths: 32px on `/purchasing/` and
   `/logistics/parts/`, both via `.registry-filter-grid` below which shares
   this same `gap: 1rem` root cause). `.ncr-form-section .form-grid` (further
   down) already zeroed its own row-gap for this exact reason on one screen
   in 2026-08-11's NCR fix -- this generalises that fix to every adopter
   instead of one at a time, and makes that earlier rule redundant (left in
   place, harmless, not deleted). Column-gap -- the horizontal space between
   the two fields in one row -- is untouched. */
.filter-row,
.form-grid {
  row-gap: 0;
}

/* Card K-1865 point 4: `branduolys/ataskaitos_forma.html`'s five fields keep
   their own `rows` attribute (RIBOS forbids touching field composition, and
   `q03`'s `rows` still doubles as the three-line-limit hint for a no-CSS
   fallback) but must LOOK the same height in the grid — tallest is `q01` at
   6 rows. Scoped to this one form so no other `.form-grid` adopter's field
   heights move. */
.form-grid-ataskaita textarea {
  min-height: 9rem;
}

.one-time-secret {
  background: var(--brand-tint);
  border: 2px solid var(--brand);
  border-radius: var(--radius-md);
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 0.35em;
  /* docs/plans/w2m-note-to-worker-1-one-time-secret-overflow.md: unbroken,
     no-natural-break-point secrets (a long ICS feed URL) widened the whole
     page (2629px against a 1500px viewport) instead of wrapping inside
     this card. */
  overflow-wrap: break-word;
  padding: 1rem;
  text-align: center;
}

/* A one-time secret that is a URL, not a short code -- the 2.5rem/0.35em
   treatment above is right for a PIN (kiosk_pin_issued.html) or a login
   code (supervisor_login_code_issued.html) but turns a URL
   (calendar_subscription.html's ICS feed address) into an unreadable wall
   of widely-tracked letters. word-break: break-all is belt-and-suspenders
   with overflow-wrap above -- a URL has no whitespace at all to wrap on. */
.one-time-secret--url {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: normal;
  word-break: break-all;
}

.filter-row {
  align-items: end;
  margin-bottom: 1rem;
}

/* Worker 3, measured live on the scanner's 2x2 action block (2026-08-03,
   flow-warehouse rehearsal): the third member of the same stretch family as
   `.field` (align-content, above) and `.form-grid` (align-items — see the
   `.field` comment for the full mechanism). `.detail-grid` stretches every
   `> div` cell to its row's tallest member, and each cell's own rows (a
   heading, its fields) then absorbed that extra height because `.detail-grid
   > div` declared no `align-content` — a two-field column's fields sank
   ~150px below its heading when the sibling column in the same row carried
   five fields. */
.detail-grid > div {
  align-content: start;
  display: grid;
  gap: 0.35rem;
}

/* T4-07: a legacy card carries dozens of short key/value pairs. One per row
   made the page scroll for a card that fits on a screen; `.detail-grid`'s two
   wide columns are still too wide for them. Same shape, three columns, tighter
   rows — and the keys use `.eyebrow` like every other key on those pages. */
.card-field-grid {
  display: grid;
  gap: 0.5rem 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-field-grid > div {
  align-content: start;
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

/* Card values include unbroken machine strings (codes, URLs); without this
   one long value widens its column and squeezes the other two. */
.card-field-grid strong {
  overflow-wrap: anywhere;
}

.order-form {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin: 1rem 0;
  padding: 1rem;
}

.registry-filter-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Same double-count as `.filter-row`/`.form-grid` above, same fix -- this
   grid wraps to a second row whenever a filter row carries more than four
   cells (search + selects + a checkbox + `.actions`, e.g. `/purchasing/`),
   and `.field`'s own margin-bottom (below) already covers that row's
   spacing. */
.registry-filter-grid {
  row-gap: 0;
}

/* w4-note-to-worker-1-and-3-prieigos-ekranas-nera-administravimas.md (worker 4,
   2026-08-11, verified live on /people/): every other cell in this grid is a
   <label> whose own small/grey caption (finding 186) pushes its control down;
   .actions carries no caption, so under the grid's default cross-axis stretch
   it stretches to the row's full height and its own align-items: center then
   centres the buttons in that taller box instead of resting them at the row's
   bottom edge where every input/select already sits. Bottom-aligning this one
   cell lines its buttons up with its row-mates without touching any template;
   quality/ncr_list.html has no `.actions` inside its own `.registry-filter-grid`,
   so this is scoped to cells that actually have the mismatch.

   Worker 3, 2026-08-11: this rule existed TWICE for about half an hour --
   `#933` (worker 1) and `#934` (worker 3) both applied worker 4's note, whose
   two addressees were "workers 1 & 3", within minutes of each other. Same
   declaration, so nothing rendered differently and no CI job could see it.
   Worker 1's copy merged first and is the one that survives, per the
   coordinator's `#912`/`#914` ruling. Worker 3's independent measurement is
   folded in here rather than thrown away, because it corrects the wording of
   the owner's report: the two heights were never the defect (input 35px,
   button 34px) -- the buttons sat 9px ABOVE the input beside them, and after
   this rule the bottom edges are level (9px -> 2px of top spread, which is
   just the 1px height difference). Two independent probes agreed to within
   0.6px, which is a firmer diagnosis than either one alone. Pinned by
   bo/accounts/test_people_filter_row.py. */
.registry-filter-grid .actions {
  align-self: end;
}

/* K-3029 (owner's Ketvirtis screenshot, 2026-09-05; carried from K-3016's
   #2001, which is still open): the rule above levels `.actions` with `<label>`
   cells, but a `<div class="field">` cell is a different shape -- `.field`
   carries its own margin-bottom (the spacing a bare field needs in a vertical
   form), so its control stops that far ABOVE the cell's bottom edge while the
   bottom-aligned button rests ON it. Measured on all four reading screens: the
   "Taikyti" button sat 16px below the period select. Matching the margin on
   the button cell (only when it follows a `.field`) puts the two bottom edges
   level again.

   Scoped by the `registry-filter-grid--reading` modifier (PR #2054 review,
   K-3250): the bare `.registry-filter-grid` is shared by at least eight other
   screens with the same `.field` + `.actions` shape (purchasing/order_list,
   parts/part_list, administravimas/position_list, ...) that this card never
   measured, so the modifier is set only on the Rodikliai reading screens
   (ketvirtis, metai, gamyba, dinamika). Pinned by
   bo/rodikliai/test_reading_filter_row_alignment.py.

   K-3016 (#2001, merged after K-3029): the owner's walk measured the same
   16px on Rodikliai > Importas ("Atverti šią savaitę", "Įrašyti prognozę",
   "Įrašyti pelną", ...) and on Luoto import's file row ("Peržiūra"), so
   those grids carry the modifier too -- the rule stays scoped to screens
   somebody measured, it is just that the list of measured screens grew.
   Pinned by bo/rodikliai/test_filter_row_button_alignment.py. */
.registry-filter-grid--reading > .field {
  margin-bottom: 0.75rem;
}

.registry-filter-grid--reading > .field ~ .actions {
  margin-bottom: 0.75rem;
}

/* K-3016: one wide control beside its button on the same row -- Luoto
   import's file picker with "Peržiūra" at the row's end. `1 / -2` is every
   column but the last on the 4-column desktop grid and collapses to the
   single column on the phone grid below (both lines resolve to the same
   edge, which the spec treats as span 1), so no phone override is needed
   and the button falls under the field there like every other `.actions`. */
.registry-filter-grid > .field-fill {
  grid-column: 1 / -2;
}

/* K-7487 (W-Judejimai mockup): the movements journal's seven filters and
   its button sat on two rows of four; as a wrapping flex row they share one
   line at a desk and fold onto more lines on a phone. Measured at 1366 (a
   ~910px main beside both sidebars): four 5rem selects, the 6.5rem job
   reference, two 9rem date cells (the ISO field plus its calendar button)
   and the button fit on one line; a caption that would wrap is cut instead,
   so every control stays level. */
.registry-filter-grid.movement-filter-row {
  column-gap: 10px;
  display: flex;
  flex-wrap: wrap;
}

.movement-filter-row > .field {
  flex: 1 1 5rem;
  min-width: 0;
}

.movement-filter-row > .field:has(.date-iso) {
  flex-basis: 9rem;
}

.movement-filter-row > .field:has(input[name="job_ref"]) {
  flex-basis: 6.5rem;
}

.movement-filter-row > .field > label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.movement-filter-row > .field :is(input, select) {
  min-width: 0;
  width: 100%;
}

.movement-filter-row > .actions {
  flex: 0 0 auto;
}

/* K-10780: on a phone the four 5rem selects shared one line at 84px with
   their captions cut; there every filter takes the full width instead. */
@media (max-width: 720px) {
  .movement-filter-row > .field,
  .movement-filter-row > .field:has(.date-iso),
  .movement-filter-row > .field:has(input[name="job_ref"]) {
    flex-basis: 100%;
  }
}

/* `koordinatoriaus-nota-w1-ui-pluostas.md` item 2 (coordinator, 51-screen
   measurement, 2026-08-12): a "bare" checkbox next to a 40px-tall filter
   field, found in five screens outside this grid (each hand-rolled its own
   filter row instead of adopting this one) — the browser's own default
   checkbox renders at ~13px with no vertical relationship to a 34-40px
   sibling input/select, per UI_KANONAS_v1.md §2's own measurement. This
   grid was the one place in the app that already had the right shape
   (search + selects + actions, all bottom-aligned, per the rule directly
   above); it just never had to size a checkbox item until now. A checkbox
   filter belongs in this grid as `<label class="checkbox-label">` (the
   existing inline checkbox+text pairing used elsewhere in the app) rather
   than this grid's own stacked caption-above-control `<label>` shape,
   since "Show archived" reads naturally beside its box, not above it —
   sized and bottom-aligned here to match its stacked row-mates instead of
   `.checkbox-label`'s own default (`margin-top: 0.6rem`, meant for a
   vertical `.form-grid` stack, not a bottom-aligned filter row).

   2026-08-12: the base `.checkbox-label input` rule (above `.receiving-form-
   card` in this file) now declares the same 20×20, so this pair is
   redundant for `input[type="checkbox"]` -- kept anyway (a) `[type="radio"]`
   is still only sized here, and (b) deleting it would silently depend on the
   base rule never changing again. Harmless as written. */
.registry-filter-grid input[type="checkbox"],
.registry-filter-grid input[type="radio"] {
  height: 20px;
  width: 20px;
}

.registry-filter-grid .checkbox-label {
  align-items: center;
  align-self: end;
  display: flex;
  height: var(--control-h);
  margin-top: 0;
}

/* Worker 3, 2026-08-13 (owner's finding, coordinator's 21:30 note item 2,
   measured live on /purchasing/ before and after): the rule above aligns this
   label to the END OF ITS GRID ROW, and every row-mate is a `.field` carrying
   `margin-bottom: 1rem` — so the row's end sits 16px below the inputs' own
   bottom edge, and the checkbox alone landed there (653 against the selects'
   647). This puts it back on the line.

   `>` and not a descendant selector, deliberately. Four screens still wrap
   this label in a `.field` — `absences/team.html` (W2), `parts/part_list.html`
   (mine, fixed in this same package), `operations/component_gallery.html`
   (W1) — and inside a `.field` the margin would add 16px INSIDE somebody
   else's cell instead of aligning anything. The child combinator says exactly
   what this rule is for: the label that is itself a cell of the filter row.
   The other half of the same finding lives in the templates: a wrapped label
   makes `.field` the grid child, so `align-self` speaks to the wrong box and
   the checkbox sits 26px ABOVE its row (601 against 611..647). */
.registry-filter-grid > .checkbox-label {
  margin-bottom: 1rem;
}

/* K-3018: the product-family boxes of the indicators overview's filter row.
   One grid row for all of them (the import can carry a dozen names),
   wrapping on a wide screen and stacking one under another on a phone --
   the card's own "seimu zymimieji vertikaliai". Each `.checkbox-label` is
   a list item here, not a cell of the filter row, so the grid's
   end-aligned, control-height rule above is reset to the base class. */
.rodikliai-families {
  grid-column: 1 / -1;
}

.rodikliai-families-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.registry-filter-grid .rodikliai-families-list .checkbox-label {
  align-self: auto;
  height: auto;
}

@media (max-width: 720px) {
  .rodikliai-families-list {
    flex-direction: column;
  }
}

/* koordinatoriaus-nota-w4-ui-pluostas.md items 2/3/5 (UI_KANONAS_v1.md,
   2026-08-12): `.filters` (absences worklog/calendar year-month row,
   messaging inbox search row, safety) had NO rule at all -- every input,
   select, button and checkbox fell back to its own native size, which is
   why "Metai"/"Menuo" rendered full-width (a bare `<input>` inherits this
   file's generic `input:not([type=checkbox]):not([type=radio]) { width:
   100% }`) and the checkbox next to "Taikyti" repeated the exact "plikas"
   13px-checkbox defect `.registry-filter-grid` had above, on a second
   hand-rolled filter component nobody had sized yet. `bo/absences/` and
   `bo/safety/` are worker 2/3's folders (S1) -- every rule below is
   CSS-only and keys off `name="year"/"month"` (an attribute both screens
   already carry) instead of a `.fw-year` class only a template edit could
   add, so the fix needs no edit in either folder. */
.filters {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.filters label {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.filters input,
.filters select,
.filters button {
  height: var(--control-h);
}

.filters .checkbox-label {
  height: var(--control-h);
  margin-top: 0;
}

/* 2026-08-12: redundant with the base `.checkbox-label input` rule above
   (same 20×20) since that rule now exists -- kept for the same
   don't-depend-on-the-base-rule-forever reason given at
   `.registry-filter-grid`'s own identical comment. */
.filters .checkbox-label input {
  height: 20px;
  width: 20px;
}

.filters input[name="year"],
.filters input[name="month"] {
  max-width: 100px;
}

/* koordinatoriaus-nota-w4-ui-pluostas.md item 2: the worklog entry form's
   `time_from`/`time_to` (bo/absences/batch2_forms.py's WorklogForm) render
   via bare `{{ form.as_p }}`, no shared widget/class -- ISO_TIME_ATTRS
   carries no `class` at all (its own docstring: no shared time widget
   exists yet, unlike IsoDateInput's "date-iso"), so this file's generic
   `input:not([type=checkbox])... { width: 100% }` stretched them full-width
   with no cap. Their Django auto-id is the only hook available without a
   bo/absences/ edit; WorklogForm is the only form in the app naming fields
   `time_from`/`time_to` (checked), so the id is safe to key off globally. */
#id_time_from,
#id_time_to {
  max-width: 120px;
}

/* Finding 186 (owner: "filter and form labels are all bold — wrong"): small,
   grey, not-bold labels above the control, matching the old system's
   .lp-field > span (lp.css:960-965) and this file's own .account-popover-label
   token (finding 184).
   K-8094 (owner decision 2026-09-30, G3): the approved mockups' filter
   `.lbl` -- 12px, weight 500, normal case, --muted. */
.registry-filter-grid label {
  color: var(--muted);
  display: grid;
  font-size: 0.75rem;
  font-weight: 500;
  gap: 0.35rem;
}

/* K-8094 review: a filter row cell wrapped in `.field` (component gallery,
   machine classifier, CSV import) is still a filter caption, but the form
   rule `.field > label:not(.checkbox-label)` at (0,2,1) beats the one above
   at (0,1,1) and draws it as a 13px form label. (0,3,1) takes it back. */
.registry-filter-grid .field > label:not(.checkbox-label) {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.registry-search {
  grid-column: span 2;
}

.registry-statuses {
  align-items: center;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.6rem;
  margin: 1rem 0;
  padding: 0;
}

/* Finding 193 (owner: registry filter block parity): the registry's
   filter checkboxes render as pill toggles, after the old system's
   .ncr-status-chips (ncr_registry.html at the pinned reference commit).
   Since K-6022 (the "Registras" mockup) the status itself is a <select>
   in the filter line; this fieldset keeps only the "Overdue actions" and
   "Stalled" checkboxes. No JS/reactive framework here, so they stay real
   <input type="checkbox"> for keyboard/screen-reader semantics, and
   :has() does the pill styling. */
/* Typography scale (WORK QUEUE package 2, owner: "filter and form labels
   are all bold — wrong"): this legend was the one label rule finding 186
   missed — small/grey/uppercase like every other filter label, but still
   font-weight: 600, restating the exact complaint on the NCR registry's
   status filter. K-8094: now the mockups' filter `.lbl` like its siblings. */
.registry-statuses legend {
  color: var(--muted);
  float: none;
  font-size: 0.75rem;
  font-weight: 500;
  margin-right: 0.25rem;
}

.registry-statuses label {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: flex;
  font-size: var(--fs-field-value);
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
}

.registry-statuses label:has(input:checked) {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand-dark);
  font-weight: 600;
}

.registry-statuses input {
  width: auto;
}

/* T4-05 (owner's walk, 2026-08-07): the overdue toggle is a filter chip like
   every other one in this row and is drawn like one — frame, radius, and the
   same checked treatment. It previously opted out of all three, which left
   one bare checkbox floating beside a row of framed chips. The label is
   "Overdue actions" now, not "Overdue actions only": the neighbouring chips
   do not say "only" either, and the row already reads as a filter. */

.registry-summary,
.registry-pager,
.registry-page-sizes {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.registry-summary {
  color: var(--muted);
  margin-bottom: 1rem;
}

.registry-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

/* Worker 3's flow rehearsal (docs/verification/flow-receiving-road.md,
   2026-08-03): `min-width: 980px` forced every card-hosted registry table
   into permanent horizontal scroll, because the actual scroll host measures
   ~904px at 1440x900 (card padding + the L1/L2 rails) -- ~76px of every
   table was hidden off-screen by default, including the action column on a
   plain four-column table ("Taros tipai"). The floor had no stated reason
   (checked git history) and no measurement behind it. The old system's own
   `.lp-table` (docs/reference/senoji-lp.css:630-634) carries no floor at
   all -- `width: 100%` sizes to whatever room is actually there, and
   `.registry-table-wrap`'s `overflow-x: auto` below still scrolls a
   genuinely wide table when one is needed, rather than every table
   regardless of its real column count. */
.registry-table {
  border-collapse: collapse;
  width: 100%;
}

/* K-5927 (NCR design N1): the mockups' `table` -- 12px/500 grey column
   heads in sentence case, 14px cells on a 12px padding, one hairline
   between rows and none under the last one. */
.registry-table th,
.registry-table td {
  border-bottom: 1px solid var(--line);
  padding: var(--cell-pad-y) 12px;
  text-align: left;
  vertical-align: middle;
}

.registry-table td {
  font-size: var(--fs-control);
}

.registry-table th {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  padding: var(--cell-pad-y) 12px;
  white-space: nowrap;
}

.registry-table tbody tr:last-child td {
  border-bottom: 0;
}

/* K-17: a discarded import batch is still history -- it stays in the table
   (never deleted, never filtered out) but reads as spent rather than live,
   so the eye finds the batch that still counts first. Grey, not hidden:
   "who undid which period, and when" is exactly the question the history
   table exists to answer. The status badge next to it stays at full
   contrast, because the WORD "Atmesta" is the one part of a greyed row
   that still has to be legible. */
.registry-table tr.is-discarded td {
  color: var(--muted);
}

.registry-table tr.is-discarded .registry-badge {
  color: inherit;
}

/* K-7566 (Z-Roles): a matrix column head read bottom-up, so twelve module
   columns fit without horizontal scroll, and the read-only system row (the
   admin role, always every permission) set apart on the page background. */
.registry-table th.th-vertical {
  font-size: var(--fs-field-label);
  height: 96px;
  padding: 6px 0;
  text-align: left;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
}

.registry-table tr.is-system td {
  background: var(--bg);
}

.registry-table tr.is-system td:not(:first-child) {
  color: var(--muted);
}

/* K-51 decision 3 (owner, 2026-08-21): the NCR register lost its separate
   severity rating, so the single priority field left has to carry the
   weight -- the owner asked for a visual mark in the LIST and said
   explicitly "ne tik spalva", which the coloured chip in the Priority
   column already was. A left edge bar changes the row's SHAPE, so it
   survives both a colour-blind reader and the 720px `rt-cards` collapse,
   where `tr` is already a bordered block and this rule just thickens and
   recolours the edge it has. Row-modifier shape copied from
   `tr.is-discarded` above rather than inventing a second convention. */
.registry-table tr.is-critical-priority {
  border-left: 3px solid var(--danger);
}

.registry-table th a {
  color: inherit;
  text-decoration: none;
}

.registry-table td small {
  color: var(--muted);
  display: block;
  margin-top: 0.25rem;
}

/* K-500: the first column is the row's name -- the only cell that says
   WHICH row this is -- and on a table wide enough to trigger
   `.registry-table-wrap`'s `overflow-x: auto`, scrolling to read the later
   columns pushed that name off the left edge with nothing left to identify
   the row by (owner screenshot 2026-08-25, `/administravimas/pareigybes/`:
   "...vadovas", "...inkas", no way to tell which is which). `position:
   sticky; left: 0` pins it to the wrap's edge, the same mechanism
   `.safety-matrix-employee` already uses for its own sticky column. Opt-in
   via `.registry-table--sticky-first`, not applied to every registry-table
   (C4: only the wide, name-first lists need it), and `var(--surface)`
   matches `.card`'s own background so scrolled content doesn't show
   through the pinned cell. */
.registry-table--sticky-first th:first-child,
.registry-table--sticky-first td:first-child {
  background: var(--surface);
  left: 0;
  position: sticky;
  z-index: 1;
}

/* K-10499: a row's name cell is a `<th scope="row">` for screen readers
   (the role permission matrix); it keeps the body cell's look, not the
   grey 12px column-head style. */
.registry-table--sticky-first tbody th[scope="row"] {
  color: inherit;
  font-size: var(--fs-control);
  font-weight: 400;
  white-space: normal;
}

/* K-6100 (Core design B2) -- branduolys/suvestine.html and istorija.html,
   after saltiniai/branduolys-maketai/html/Suvestine.dc.html (cards),
   Suvestine-lentele.dc.html (table) and Suvestine-390.dc.html (phone).
   Library pieces (`.av`, `.wk`, `.seg`, `.ql`, `.prio`, `.blk`,
   `.registry-badge--*`) come from K-6068; only the page layout lives here. */
.core-week-head {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.core-week-title {
  display: flex;
  flex: 1 1 360px;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.core-week-title h1 {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.core-week-title .card-subtitle {
  font-size: var(--fs-control);
}

.core-week-crumb {
  color: var(--muted);
  display: none;
  font-size: var(--fs-field-value);
  margin: 0;
}

.core-week-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.core-week-status {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  padding: 16px 20px;
}

.core-week-count {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.core-week-count strong {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1.1;
}

.core-week-count span {
  color: var(--muted);
  font-size: 0.75rem;
}

.core-week-people {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.core-week-chip {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-size: var(--fs-field-value);
  gap: var(--space-2);
  padding: 6px 10px 6px 6px;
}

.core-dot--success {
  color: var(--success);
}

.core-dot--warning {
  color: var(--warning);
}

.core-dot--danger {
  color: var(--danger);
}

.core-dot--neutral {
  color: var(--muted);
}

.core-week-status-end {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.core-week-status-end a.registry-badge {
  text-decoration: none;
}

/* One card per person (and, on istorija.html, per week): a 260px side
   column -- who or which week, status, goal, link -- and the report itself,
   the priority on its tint and 01-04 in a 2x2 grid. The same markup is the
   phone card below 720px. */
.core-week-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.branduolio-kortele {
  display: grid;
  gap: 28px;
  grid-template-columns: 260px minmax(0, 1fr);
  padding: var(--space-6);
}

.core-card-side,
.core-card-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.core-card-main {
  gap: var(--space-4);
}

.core-card-person {
  align-items: center;
  display: flex;
  gap: 12px;
}

.core-card-person > div {
  flex: 1 1 auto;
  min-width: 0;
}

.core-card-person h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.core-card-person .task-meta {
  margin: 2px 0 0;
}

.core-card-when {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.core-card-when .task-meta {
  font-size: 0.75rem;
}

.core-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.core-card-goal {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.core-card-goal p {
  font-size: var(--fs-field-value);
  line-height: 1.5;
  margin: 0;
}

.core-card-link {
  color: var(--brand-dark);
  font-size: var(--fs-field-value);
  text-decoration: none;
}

.core-prio-text {
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 4px;
}

.core-card-grid {
  display: grid;
  gap: var(--space-4) var(--gap-layout);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.core-q {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.core-q-text {
  font-size: var(--fs-control);
  line-height: 1.5;
  margin: 0;
}

/* A pasted URL or an unbroken long word wraps inside the card instead of
   taking the page sideways at 390px (K-5808's finding on the old rows). */
.core-q-text,
.core-prio-text,
.core-card-goal p {
  overflow-wrap: anywhere;
}

/* `branduolys_tekstas.lentele_is_teksto` output: typed line breaks stay,
   a pasted "a | b | c" table keeps every column in its own framed box. */
.core-q-text .lentele-tekstas,
.core-prio-text .lentele-tekstas {
  white-space: pre-wrap;
}

.core-q-text .lentele-is-teksto,
.core-prio-text .lentele-is-teksto {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin: var(--space-2) 0;
}

/* K-6185: a pasted KPI table ("Servo | 88,1 → 91,3 | +3,2 | 5,52 → 4,40 %
   | 444 €") broke "a → b" values over four lines and clipped its last
   column in a ~296px answer column at 1440. A value stays on one line (the
   inherited `overflow-wrap: anywhere` is what let it break mid-number); a
   long header wraps between words instead of setting its column's width;
   anything still wider scrolls inside `.registry-table-wrap`, never the page. */
.core-q-text .lentele-is-teksto th,
.core-prio-text .lentele-is-teksto th {
  font-size: var(--fs-field-label);
  overflow-wrap: normal;
  padding: 5px;
  white-space: normal;
}

.core-q-text .lentele-is-teksto td,
.core-prio-text .lentele-is-teksto td {
  font-size: 0.75rem;
  font-weight: 400;
  overflow-wrap: normal;
  padding: 5px;
  white-space: nowrap;
}

/* K-6185: the answer column that holds a table gets 3/5 of the grid, as the
   mockup's wider layout gives it room for five columns; two tables side by
   side keep the even split. Phones stay one column (the 720px block). */
@media (min-width: 721px) {
  .core-card-grid:has(> .core-q:nth-child(odd) .lentele-is-teksto) {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .core-card-grid:has(> .core-q:nth-child(even) .lentele-is-teksto) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .core-card-grid:has(> .core-q:nth-child(odd) .lentele-is-teksto):has(> .core-q:nth-child(even) .lentele-is-teksto) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.core-q--quiet .core-q-text,
.core-muted {
  color: var(--muted);
}

.core-phone-only {
  display: none;
}

/* The table view: fixed columns, every cell clipped at three lines with the
   full text in `title` and behind "Read". */
.core-week-table {
  padding: 8px 8px 4px;
}

.core-week-table table {
  table-layout: fixed;
}

.core-week-table-person {
  width: 236px;
}

.core-week-table-read {
  width: 96px;
}

.core-week-table td {
  vertical-align: top;
}

.core-week-table td:last-child {
  text-align: right;
}

.core-week-table-who {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.core-week-table-who > div {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.core-week-table-who .core-clamp2 {
  color: var(--muted);
  font-size: 0.75rem;
}

.core-clamp2,
.core-clamp3 {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  font-size: var(--fs-field-value);
  line-height: 1.45;
  margin: 0;
  overflow: hidden;
}

.core-clamp2 {
  -webkit-line-clamp: 2;
}

.core-clamp3 {
  -webkit-line-clamp: 3;
}

.core-week-table-blk {
  background: color-mix(in srgb, var(--danger-bg) 55%, var(--surface));
}

/* "Open blockers": one row per person -- who, the 02 text on red, then the
   owner's assign / resolve forms side by side. */
.core-blocker {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px var(--space-6);
  grid-template-columns: 220px minmax(0, 1fr);
  padding: var(--space-4) 0;
}

.core-blocker h3 {
  font-size: var(--fs-control);
  margin: 0;
}

.core-blocker .blocker-controls {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  grid-column: 1 / -1;
}

.core-blocker .blocker-controls > p {
  flex-basis: 100%;
  margin: 0;
}

.core-blocker .blocker-controls form {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.core-blocker .blocker-controls .field {
  margin: 0;
}

/* Phone (Suvestine-390.dc.html): the header stacks, the card keeps who +
   status, the priority (3 lines) and 02 only when it blocks, then "Read
   all"; the status bar and the table are desktop-only. */
@media (max-width: 720px) {
  .core-week-head {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 14px;
  }

  .core-week-title {
    flex: none;
    gap: 6px;
  }

  .core-week-title h1 {
    font-size: 1.375rem;
  }

  .core-week-crumb,
  .core-phone-only {
    display: block;
  }

  .core-week-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .core-week-actions .wk {
    justify-content: space-between;
    width: 100%;
  }

  .core-week-primary {
    justify-content: center;
    min-height: 48px;
  }

  .core-week-cards {
    gap: 14px;
  }

  .branduolio-kortele {
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-4);
  }

  .core-card-person {
    gap: 10px;
  }

  .core-card-person h3 {
    font-size: 0.9375rem;
  }

  .core-card-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .branduolio-kortele .prio {
    padding: 10px 12px;
  }

  .suvestine-tabpanel .core-prio-text,
  .suvestine-tabpanel .core-q.blk .core-q-text {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    font-size: var(--fs-control);
    overflow: hidden;
  }

  .suvestine-tabpanel .core-q.blk .core-q-text {
    font-size: var(--fs-field-value);
  }

  .core-card-read.core-phone-only {
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
  }

  .core-week-table {
    display: none;
  }

  .core-blocker {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* K-6243 (Core design B5) -- branduolys/sprendimai.html and tendencijos.html,
   after saltiniai/branduolys-maketai/html/Sprendimai.dc.html and
   Tendencijos.dc.html. Library pieces (`.seg`, `.wk`, `.av`, `.cell`,
   `.flag`) come from K-6068, the row menu from K-5892, the header from B2
   (`.core-week-head`, above); only the page layout lives here, including
   what tendencijos.html used to carry in its own `<style>` (K-5766). */
.core-num {
  font-variant-numeric: tabular-nums;
}

.core-end {
  text-align: right;
}

/* K-7368 (Tara design gate K-7367): `.registry-table td { text-align: left }`
   outranks the bare `.core-end`, so the Tara balances and movement quantities
   sat flush left; the Tara mockup right-aligns them and their heads. */
.packaging-ledger-table th.core-end,
.packaging-ledger-table td.core-end {
  text-align: right;
}

.core-nowrap {
  white-space: nowrap;
}

.core-person {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
}

/* Decisions: Show, Person (240px) and Week (200px) on one row. */
.core-filter-row {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.core-filter-row .field {
  margin-bottom: 0;
}

.core-filter-row .seg {
  justify-self: start;
}

/* K-8094: the mockups' filter `.lbl` -- 12px, weight 500, normal case. */
.core-filter-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.core-filter-person {
  width: 240px;
}

.core-filter-week {
  width: 200px;
}

.core-filter .callout-warning {
  margin: var(--space-4) 0 0;
}

.core-register {
  padding: 8px 8px 0;
}

.core-register-empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 48px 12px;
  text-align: center;
}

.core-register-empty strong {
  color: var(--text);
  font-size: 1rem;
}

.core-register-empty p {
  margin: 0;
  max-width: 520px;
}

/* The row menu holds the postpone form and the history, so it is wider
   than the NCR row menu's two links. */
.core-row-menu .ncr-row-menu-list {
  min-width: 20rem;
  text-align: left;
}

.core-row-postpone {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
}

.core-row-menu .core-row-postpone > button {
  padding: 0;
}

/* The NCR menu's full-width 44px `button` rule would also stretch the date
   picker's own buttons (K-5892 above); give them back their own shape. */
.core-row-postpone .date-picker-wrap button {
  justify-content: center;
  padding: 0;
  width: auto;
}

.core-row-postpone .date-picker-wrap button.date-picker-nav {
  width: 44px;
}

.core-row-postpone .date-picker-wrap button.date-picker-day {
  width: 100%;
}

.core-row-history {
  padding: 0 var(--space-4);
}

.core-row-history summary {
  align-items: center;
  display: flex;
  min-height: 44px;
}

.core-row-history ul {
  font-size: var(--fs-field-label);
  margin: 0 0 var(--space-2);
  padding-left: 1rem;
}

/* Trends: two signal cards side by side, then the grid and the goals. */
.core-trend-signals {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.core-trend-signal,
.core-trend-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.core-trend-signal--alert {
  border-color: color-mix(in srgb, var(--danger) 25%, var(--danger-bg));
}

.core-trend-head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.core-trend-head h2,
.core-trend-card > h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.core-trend-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.core-trend-pills .registry-badge {
  margin: 0;
}

.core-trend-signal .card-subtitle,
.core-trend-card > .card-subtitle {
  margin: 0;
}

.core-trend-legend {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: 14px;
}

.core-trend-legend span {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.core-trend-legend .flag {
  border: 0;
  position: static;
}

.core-trend-grid th:not(:first-child),
.core-trend-grid td:not(:first-child) {
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
}

.core-trend-grid .core-end {
  text-align: right;
}

.core-trend-grid td:first-child {
  white-space: nowrap;
}

.core-trend-grid button.cell:hover,
.core-trend-grid button.cell:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* The goal is one line, cut with an ellipsis (full text in `title`); a
   fixed layout is what lets the cell stop at its column instead of
   widening the table. */
@media (min-width: 721px) {
  .core-trend-goals {
    table-layout: fixed;
  }

  .core-trend-goals th:first-child {
    width: 200px;
  }

  .core-trend-goals th:nth-child(3) {
    width: 90px;
  }

  .core-trend-goals th:nth-child(4) {
    width: 170px;
  }

  .core-trend-goal {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.trend-dialog {
  border: none;
  border-radius: var(--radius-md);
  max-width: 560px;
  padding: var(--space-4);
  width: 90%;
}

.trend-dialog::backdrop {
  background: rgb(0 0 0 / 45%);
}

.trend-dialog__head {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.trend-dialog__facts dt {
  color: var(--muted);
  font-size: 0.8rem;
  margin-top: var(--space-2);
  text-transform: uppercase;
}

.trend-dialog__facts dd {
  margin: 0;
  white-space: pre-wrap;
}

/* Phone: one column, full-width filters; the grid keeps the person pinned
   (`.registry-table--sticky-first`) and scrolls inside its own wrap. */
@media (max-width: 720px) {
  .core-filter-row {
    align-items: stretch;
    flex-direction: column;
  }

  .core-filter-person,
  .core-filter-week {
    width: 100%;
  }

  .core-register {
    padding: var(--space-4);
  }

  .core-row-menu .ncr-row-menu-list {
    min-width: min(20rem, 80vw);
  }

  .core-trend-signals {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* K-6347 (Core design B6) -- branduolys/quarter_goals.html and
   my_quarter.html, after saltiniai/branduolys-maketai/html/Ketvirtis.dc.html.
   The header, `.wk`, the register card and the row menu come from B2/B5
   above; only the page layout lives here. */
/* `main` is a 16px grid; 8px more makes the mockup's 24px between blocks. */
.core-quarter-warning {
  margin-bottom: var(--space-2);
}

.core-quarter-table td {
  vertical-align: middle;
}

.core-quarter-who {
  display: flex;
  flex-direction: column;
}

.core-quarter-who strong {
  font-weight: 500;
}

.core-quarter-who small {
  color: var(--muted);
  font-size: 0.75rem;
}

.core-quarter-goal {
  margin: 0;
}

/* The "Q3 goal: indicator start -> target" line sits under the goal text as
   its grey second line, not as a paragraph of its own. */
.core-quarter-goal + .quarter-goal-line,
.core-quarter-mine .quarter-goal-line {
  color: var(--muted);
  font-size: var(--fs-field-value);
  margin: 4px 0 0;
}

.core-quarter-legend,
.core-quarter-mine {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.core-quarter-legend {
  margin-top: var(--space-2);
}

.core-quarter-legend > p,
.core-quarter-mine h2 {
  margin: 0;
}

.core-quarter-legend-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.core-quarter-legend-pills .registry-badge {
  margin: 0;
}

.core-quarter-mine-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
}

/* K-6348 (Core design B7) -- branduolys/ataskaitos_forma.html, after
   saltiniai/branduolys-maketai/html/Ataskaita.dc.html and
   Ataskaita-390.dc.html. The header is B2's `.core-week-head`; the status
   note is `.callout-success`/`.callout-warning`, the pill
   `_report_status.html`. Only the page layout lives here: the form on the
   left, a 380px column on the right, one column on a phone. */
.core-report-crumb {
  color: var(--muted);
  font-size: var(--fs-field-value);
  margin: 0;
}

.core-report-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.core-report-saved {
  color: var(--success);
  font-size: var(--fs-field-value);
}

.core-report-saved:not(:empty)::before {
  content: "\2713\00a0";
}

.core-report-status,
.core-report-earlier {
  display: none;
}

.core-report-note {
  margin-bottom: var(--space-6);
}

.core-report-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: minmax(0, 1fr) 380px;
}

.core-report-main,
.core-report-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.core-report-empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: var(--fs-control);
  margin: 0;
  padding: 14px;
}

.core-report-due {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.core-report-commitment {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}

.core-report-commitment > p {
  margin: 0 0 6px;
}

.core-report-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.core-report-form .field {
  gap: 6px;
  margin: 0;
}

.core-report-form .field > label:not(.checkbox-label) {
  color: var(--text);
  font-size: var(--fs-field-value);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.core-report-form textarea {
  font-size: var(--fs-control);
  line-height: 1.5;
  padding: 10px 12px;
}

.core-report-form textarea[name="prioritetas"],
.core-report-form textarea[name="q04_galimybes_rizikos"] {
  height: 64px;
}

.core-report-form textarea[name="q01_kas_vyksta"] {
  height: 112px;
}

.core-report-form textarea[name="q02_kas_blokuoja"] {
  height: 48px;
}

.core-report-form textarea[name="q03_siulau_kitai_savaitei"] {
  height: 88px;
}

.core-report-hint {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
  margin: 0;
}

.core-report-goal {
  font-size: var(--fs-control);
  font-weight: 500;
  line-height: 1.5;
}

.core-report-deadline {
  font-size: var(--fs-control);
  line-height: 1.5;
}

.core-report-last p {
  font-size: var(--fs-control);
  line-height: 1.5;
  margin: 0 0 10px;
}

.core-report-propose > summary {
  list-style: none;
  width: fit-content;
}

.core-report-propose > summary::-webkit-details-marker {
  display: none;
}

.core-report-propose[open] > summary {
  margin-bottom: 10px;
}

.core-report-help {
  align-self: flex-start;
  color: var(--brand-dark);
  font-size: var(--fs-field-value);
}

@media (max-width: 1100px) {
  .core-report-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .core-report-crumb {
    font-size: var(--fs-field-value);
  }

  .core-report-status {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
  }

  .core-report-status .core-report-saved {
    font-size: 0.75rem;
  }

  .core-report-layout,
  .core-report-main,
  .core-report-side {
    gap: 14px;
  }

  .core-report-main > .card {
    padding: var(--space-4);
  }

  .core-report-form textarea[name="prioritetas"] {
    height: 96px;
  }

  .core-report-form textarea[name="q01_kas_vyksta"] {
    height: 150px;
  }

  .core-report-form .actions .button,
  .core-report-earlier {
    justify-content: center;
    min-height: 48px;
    width: 100%;
  }

  .core-report-earlier {
    display: inline-flex;
  }

  .core-report-propose > summary,
  .core-report-help {
    min-height: 44px;
  }
}

/* K-6429 (Core design B8) -- branduolys/importas.html, after
   saltiniai/branduolys-maketai/html/Importas.dc.html: two cards side by
   side (the Word drop area, "Enter for a member"), the preview and the
   member's form full width below them. */
.core-import-grid {
  align-items: start;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.core-import-card,
.core-import-result {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.core-import-result {
  margin-top: var(--space-4);
}

.core-import-card h2,
.core-import-result h2 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.core-import-card .card-subtitle {
  font-size: var(--fs-field-value);
  margin: 0;
}

.core-import-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.core-import-drop {
  align-items: center;
  border: 1.5px dashed var(--line-strong);
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 28px;
  position: relative;
  text-align: center;
}

.core-import-drop.is-over {
  background: var(--brand-tint);
  border-color: var(--brand);
}

/* K-6461: the file input is a 1px transparent box, so its own focus outline
   is invisible -- a keyboard user sees the focus on the drop zone instead. */
.core-import-drop:has(input:focus-visible) {
  border-color: var(--brand);
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.core-import-drop svg {
  color: var(--brand);
}

.core-import-drop strong {
  color: var(--text);
  font-size: var(--fs-control);
}

.core-import-drop > span {
  font-size: var(--fs-field-value);
}

.core-import-pick {
  color: var(--brand-dark);
}

.core-import-names:empty {
  display: none;
}

.core-import-drop input[type="file"] {
  height: 1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.core-import-member {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) 100px 100px;
}

.core-import-member .field {
  margin: 0;
}

.core-import-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .core-import-grid,
  .core-import-member {
    grid-template-columns: minmax(0, 1fr);
  }

  .core-import-actions .button {
    justify-content: center;
    min-height: 48px;
    width: 100%;
  }
}

/* K-60 (owner, 2026-08-21): the mobile bibliotekos sluoksnis UI_KANONAS_v1.md
   §8 asks for. `.rt-cards` is the >=6-column verdict -- a table so marked
   turns each `<tr>` into a card of label/value pairs below 720px instead of
   scrolling sideways. `.rt-trim` (<=5 columns that still overflow) is
   reserved, not built here. Neither class touches anything above 720px: the
   table stays `display: table` there, byte-for-byte the old rendering.

   The label comes from `td[data-label]`, the SAME attribute
   docs/reference/senoji-lp.css:696-762 (`.lp-rtable`) already used for this
   exact pattern before the parity port -- `quality/ncr_list.html` and three
   `receiving/` templates still carry hand-written `data-label="..."` from
   that era, unused until now. A table that has none gets it set
   automatically from its own `<thead>` text by `rt-cards.js`, so adopting
   this component is ONE class on `<table>`, never new per-cell markup —
   the card's own "pridėti klasę, o ne rašyti CSS [ar HTML]" rule. */
@media (max-width: 720px) {
  /* All rules below use `>` (child), not a bare descendant combinator, so a
     table nested INSIDE an `.rt-cards` row (e.g. an expandable detail row's
     own line-item table, which deliberately keeps the plain desktop layout)
     is never reached. A descendant selector would also match that inner
     table's own thead/tr/td, hiding its header and turning its cells into
     unlabeled blocks -- found live in `purchasing/order_list.html`'s
     expanded order-lines table via Playwright at 390px (1892.RADINIAI.md). */
  .registry-table.rt-cards,
  .registry-table.rt-cards > tbody {
    display: block;
    width: 100%;
  }

  /* K-2939: `.warehouse-location-table`'s own `min-width: 900px` (desktop
     tree-column readability) still applies to an element carrying BOTH
     classes -- `width: 100%` above does not override a `min-width`, so the
     card-mode block would otherwise be held open to 900px and the page
     scrolls sideways again, defeating the point of `rt-cards`. */
  .registry-table.rt-cards.warehouse-location-table {
    min-width: 0;
  }

  .registry-table.rt-cards > thead {
    display: none;
  }

  .registry-table.rt-cards > tbody > tr {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    display: block;
    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--space-4);
  }

  .registry-table.rt-cards > tbody:last-child > tr:last-child {
    margin-bottom: 0;
  }

  /* K-10702: a group header row (`tr.rt-group-row` holding one
     `th[colspan]`, e.g. the calculation machine registry's capability
     groups) reads as a heading above its cards, not as a bordered card
     holding only a title. */
  .registry-table.rt-cards > tbody > tr.rt-group-row {
    border: none;
    margin-bottom: var(--space-2);
    padding: 0;
  }

  .registry-table.rt-cards > tbody > tr.rt-group-row > th {
    border-bottom: none;
    color: var(--text);
    display: block;
    font-size: var(--fs-control);
    font-weight: 600;
    padding: var(--space-2) 0 0;
    white-space: normal;
  }

  .registry-table.rt-cards > tbody > tr > td {
    align-items: flex-start;
    border-bottom: none;
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-2) 0;
    text-align: right;
    /* A value that cannot fit beside its label takes the next line at full
       card width instead of hanging off the edge. `/atsiliepimai/`'s
       "Kanalas" cell -- a `<select>` next to a save button, 243px of it --
       overflowed its 258px cell by 59px and the button was cut off the
       screen with no way to scroll to it. The TABLE still measured 334px
       and passed the width check, which is why the guard below now also
       measures each CELL. */
    flex-wrap: wrap;
    /* A long unbreakable token (an e-mail, a code) would otherwise set the
       card's min-content floor. `anywhere` -- not `break-word` -- is the
       variant that shrinks min-content too, and it inherits into the
       anonymous flex item holding the cell's own text. */
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Belt to `flex-wrap`'s braces: a child that is itself wider than the
     card (a long control group) is capped rather than allowed to spill. */
  .registry-table.rt-cards > tbody > tr > td > * {
    max-width: 100%;
  }

  /* `.fw-num`'s `max-width: 160px` is inert on a `display: table-cell`, but
     on the flex row above it caps the cell, so `space-between` parked the
     number at 160px -- mid-card -- while every other value sat at the right
     edge (K-8203, projektas board "Days" at 390px). */
  .registry-table.rt-cards > tbody > tr > td.fw-num {
    max-width: none;
  }

  /* Same K-8203 mechanism for the `tfoot` sum row (same flex row, e.g.
     spaudejai KPI totals) and for the other fixed-width value classes.
     `.fw-name`/`.fw-long` are left alone. */
  .registry-table.rt-cards > tfoot > tr > td:is(.fw-num, .fw-date, .fw-time, .fw-phone, .fw-year, .fw-code),
  .registry-table.rt-cards > tbody > tr > td:is(.fw-date, .fw-time, .fw-phone, .fw-year, .fw-code) {
    max-width: none;
  }

  /* A cell with MORE THAN ONE element child is the case the label/value
     flex row gets wrong: every child becomes its own flex item, so
     `<strong>name</strong><br><small>e-mail</small>` lays out as three
     columns side by side and the card's width is their SUM. `/people/`
     measured 418px inside a 292px card that way -- collapsed into cards
     and still scrolling sideways, which is the one thing `rt-cards`
     exists to prevent (found by the K-60 1 vartai walk, not by reading).
     Such a cell stacks its label above the value instead; single-value
     cells -- the large majority -- keep the label-left/value-right line.
     This matters more than the two screens it fixes today: the 124 tables
     that adopt this component later bring arbitrary cell markup with
     them, and the library has to absorb that without per-module CSS. */
  .registry-table.rt-cards > tbody > tr > td:has(> * + *) {
    display: block;
    text-align: left;
  }

  .registry-table.rt-cards > tbody > tr > td:has(> * + *)::before {
    display: block;
    margin-bottom: 0.15rem;
  }

  .registry-table.rt-cards > tbody > tr > td::before {
    color: var(--muted);
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
  }

  /* The shared `{% empty_state %}` row (a single `colspan` cell, no
     `data-label`) reads as a plain sentence, not a blank card with a
     label-less right-aligned line. */
  .registry-table.rt-cards > tbody > tr > td:not([data-label]) {
    display: block;
    text-align: left;
  }

  .registry-table.rt-cards > tbody > tr > td:not([data-label])::before {
    content: none;
  }

  /* A `<tfoot>` Total row (e.g. rodikliai/overview.html's Product-families
     table) was never brought into the card layout above -- only `tbody`
     was scoped, so `tfoot`'s single `<tr>` kept its plain table box: no
     `width: 100%`, so it shrank to its own content width instead of the
     card's, and `tr:last-child` (which also matched it, as `tfoot`'s own
     last child) zeroed its margin-bottom too, landing it flush against
     the last data card with no gap (1890.RADINIAI.md). `rt-cards.js`
     labels `tfoot` cells the same way it labels `tbody` cells, so the
     card layout below mirrors `tbody`'s rules rather than the
     `:not([data-label])` plain-sentence treatment. */
  .registry-table.rt-cards > tfoot {
    display: block;
    width: 100%;
  }

  .registry-table.rt-cards > tfoot > tr {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    display: block;
    margin-bottom: 0;
    padding: var(--space-2) var(--space-4);
  }

  .registry-table.rt-cards > tfoot > tr > td {
    align-items: flex-start;
    border-bottom: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
    min-width: 0;
    overflow-wrap: anywhere;
    padding: var(--space-2) 0;
    text-align: right;
  }

  .registry-table.rt-cards > tfoot > tr > td > * {
    max-width: 100%;
  }

  .registry-table.rt-cards > tfoot > tr > td:has(> * + *) {
    display: block;
    text-align: left;
  }

  .registry-table.rt-cards > tfoot > tr > td:has(> * + *)::before {
    display: block;
    margin-bottom: 0.15rem;
  }

  .registry-table.rt-cards > tfoot > tr > td::before {
    color: var(--muted);
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
  }

  /* K-3347 (source K-3339, K-2939's own Playwright walk of 124+ rt-cards
     tables): a card's title link -- `/branduolys/portfelis/`'s
     `eilute.projektas.pavadinimas`, `/apklausos/`'s `survey.title` -- is a
     bare inline `<a>`, so its tappable box measured only its own text-line
     height (~20px) even though the surrounding `<td>` has padding: the
     `<td>`'s flex row (line 3885) does not stretch its children (it sets
     `align-items: flex-start`), so the anchor never inherits that padding.
     Same fix as `.breadcrumb-item a` (K-2614): grow the anchor's own box to
     the K-45 44px floor rather than the `<td>`'s, so untouched columns and
     already-sized controls (buttons) keep their layout. `.registry-badge`
     anchors (receiving_list.html's "Exact duplicate" signal pill sits next
     to plain-span badges in the same cell) are excluded: without the `:not`
     the (0,2,4) selector beat `.registry-badge` and ballooned the pill to
     44px beside its ~19px siblings (2106.RADINIAI.md RED 1). */
  .registry-table.rt-cards > tbody > tr > td > a:not(.registry-badge) {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  /* The 44px anchor above centres its text inside its own box, while the
     `<td>` row keeps `align-items: flex-start` for the label. On a
     single-value cell whose value is a link (`/branduolys/portfelis/`
     project name, `/apklausos/` title) the label therefore sat on the row's
     top edge and the link text ~12px lower -- the two never shared a
     baseline (2106.RADINIAI.md yellow, LABEL_LINK_BASELINE_OFFSET). Centre
     the label ONLY beside such a link: a blanket `align-self: center` on
     every label would drag it into the middle of a wrapped two-line plain
     value, which today correctly keeps its label at the top. Stacked
     multi-child cells (`:has(> * + *)`) are `display: block`, where
     `align-self` has no effect, so they are untouched. */
  .registry-table.rt-cards > tbody > tr > td:has(> a:not(.registry-badge))::before {
    align-self: center;
  }
}

/* koordinatoriaus-nota-w1-lenteliu-rikiavimas-ir-paieska.md (owner,
   2026-08-11): the shared `data-simple-table` progressive enhancement
   (bo/static/js/simple-table.js). The search label reuses
   `.registry-filter-grid label`'s own small/grey/uppercase typography
   (finding 186) rather than inventing a second look — the owner named the
   NCR registry's own "PAIEŠKA" field as the reference. */
.simple-table-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.75rem;
}

/* K-3016: a card's `<h2>` with something standing at the row's right end --
   today the live search box `simple-table.js` mounts into
   `[data-simple-table-search]` (Rodikliai > Dinamika: "24 mėn. · 2024-09 …
   2026-08" with the search beside it, instead of a toolbar line of its own
   between the title and the table). Wraps on a phone, so the box drops
   under the title at full width. */
.card-heading {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  margin-bottom: 10px;
}

.card-heading > h2 {
  margin: 0;
}

.card-heading > [data-simple-table-search] {
  flex: 0 1 280px;
}

/* K-8094: the mockups' filter `.lbl` -- 12px, weight 500, normal case. */
.simple-table-search {
  color: var(--muted);
  display: grid;
  font-size: 0.75rem;
  font-weight: 500;
  gap: 0.35rem;
  width: 100%;
  max-width: 280px;
}

/* koordinatoriaus-nota-w3-people-filtru-eilute-roliu-helpas-mygtuku-vardai.md
   §1: when `simple-table.js` mounts this box into a `.registry-filter-grid`
   instead of its own toolbar, the box stops being a right-aligned strip of
   its own and becomes one cell of that row. The 280px cap above is what
   keeps a lone toolbar box from stretching the full card width; inside the
   grid the column (`minmax(0, 1fr)`) already sets the width, and leaving the
   cap on renders the search field visibly narrower than the selects beside
   it. Everything else this rule sets -- the small grey normal-case caption
   above the control -- is identical to `.registry-filter-grid label`'s own,
   so the two agree by value rather than by specificity.

   `align-self: end` is the second half, and it is not cosmetic: a grid item
   defaults to `stretch`, so on a row whose cells are NOT all the same shape
   this label stretches to the tallest one and its inner grid hands the
   leftover height to the input — measured live on
   `/catalogs/warehouse/material-entities/`, a 43px search input beside a 36px
   select. Bottom-aligning it puts the box on the same baseline as
   `.registry-filter-grid .actions` (the rule below, same reasoning, same
   value), which is this row's anchor. On a uniform row like `/people/`'s it
   changes nothing: measured 0px bottom spread across all four controls
   before and after.

   Written directly after the rule it overrides, deliberately: at (0,2,0)
   against (0,1,0) it wins on the cascade, but a reader who finds only one of
   the two halves cannot tell that. */
.registry-filter-grid .simple-table-search {
  align-self: end;
  max-width: none;
}

/* Subtle, same size as the header text it sits beside (owner's own
   wording), no layout jump between the unsorted/ascending/descending
   states — the icon glyph changes, the button's box does not. */
/* `koordinatoriaus-nota-w1-ui-pluostas.md` item 3 (owner, live,
   `/administravimas/sistema/`): a long header ("Paskutinį kartą
   patikrinta") wrapped to three lines in its narrow column while its
   shorter neighbours stayed on one, and the sort icon then sat below the
   wrapped text instead of beside it — reading as a stray floating button
   rather than the same subtle sort control every other header carries.
   `white-space: nowrap` keeps every sort button's label on one line
   regardless of column width; `.registry-table`'s own `table-layout: auto`
   (default) then simply gives that column the room its label needs from
   the row's existing free space, the same way a `<th>` with no button
   already behaves. */
.simple-table-sort {
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 0.3rem;
  letter-spacing: inherit;
  padding: 0;
  text-transform: inherit;
  white-space: nowrap;
}

.simple-table-sort i {
  font-size: 0.85em;
  opacity: 0.55;
}

th[aria-sort="ascending"] .simple-table-sort i,
th[aria-sort="descending"] .simple-table-sort i {
  opacity: 1;
}

/* K-7264 (calculator mockup `K-Masinos`): the tooling count right-aligned;
   Edit and the row's ⋯ on one line at the end; an open ⋯ gets room inside
   the scrolling wrap, which would clip it on the last rows (K-6139). */
.calc-machine-table .num {
  text-align: right;
}

.calc-machine-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.registry-table-wrap:has(.calc-machine-table .ncr-row-menu[open]) {
  padding-bottom: calc(44px + 2 * var(--space-2) + 6px);
}

.calculation-form {
  max-width: none;
}

/* Worker 3, measured live on the calculator's material-layer and
   run-quantity rows (2026-08-03): the fourth member of the same stretch
   family as `.field`, `.form-grid` and `.detail-grid` above. Unlike those,
   the stretched child here is a plain `Pašalinti` <button>, not a grid/flex
   container of its own -- `align-content` on the child has nothing to pack,
   so the fix has to sit on the parent's `align-items` instead: it measured
   70.4px tall (row height set by the label+input cells beside it) against
   the normal 33.6px for `Pridėti sluoksnį` next to it. */
.calculation-grid,
.quantity-grid {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.calculation-options {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 1rem;
  padding: 1rem;
}

.calculation-options legend,
.quantity-grid legend {
  font-weight: 700;
}

.calculation-options .checkbox-label {
  margin: 0;
}

.quantity-grid {
  border: 0;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0 0 1rem;
  padding: 0;
}

/* K-7262 (calculator design K1, saltiniai/kalkuliatorius-maketai Main.png):
   the form's five numbered parts on the left, the result card on the right
   -- 400px and sticky, so it stays in view while the fields change; one
   column below 1100px, form first. The parts are fieldsets without a frame,
   a hairline between them; their field grids run three across as in the
   mockup. Varnish and finishing are `.filter-chip` labels over radios and
   checkboxes, the checked one dark like `--on`. The result table fits the
   card: one row per quantity, the numbers right-aligned. */
.calculation-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: minmax(0, 1fr) 400px;
}

.calculation-layout > .card {
  margin: 0;
  min-width: 0;
}

.calculation-result-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  position: sticky;
  top: var(--space-4);
}

.calculation-result-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
}

.calculation-result-head h2 {
  margin: 0;
}

.calculation-result-head .seg label {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--fs-field-value);
  height: 32px;
  padding: 0 12px;
}

.calculation-result-head .seg label:has(input:checked) {
  background: color-mix(in srgb, var(--brand-tint) 70%, var(--rail-bg));
  color: var(--text);
  font-weight: 600;
}

.calculation-section,
.calculation-subsection {
  border: 0;
  display: grid;
  gap: var(--gap-stack);
  margin: 0;
  min-width: 0;
  padding: 0;
}

.calculation-section + .calculation-section {
  border-top: 1px solid var(--line);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
}

/* Floated, a legend is an ordinary grid item: the part's top hairline no
   longer breaks around it, and the grid gap spaces it like the rest. */
.calculation-section > legend,
.calculation-subsection > legend {
  float: left;
  padding: 0;
  width: 100%;
}

.calculation-subsection > legend {
  font-size: var(--fs-field-value);
  font-weight: 600;
}

.calculation-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.calculation-chips .filter-chip {
  cursor: pointer;
}

.calculation-chips .filter-chip:has(input:checked) {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}

.calculation-chips .filter-chip:has(input:focus-visible),
.calculation-result-head .seg label:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.calculation-result-table th,
.calculation-result-table td {
  padding-inline: 6px;
}

.calculation-result-table th:nth-child(n + 3),
.calculation-result-table td:nth-child(n + 3) {
  text-align: right;
}

.calculation-result-table td .task-meta {
  display: block;
}

.calculation-setup-steps {
  display: grid;
  gap: var(--gap-stack);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.calculation-setup-step {
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: grid;
  gap: 6px;
  padding: var(--gap-stack);
}

.calculation-setup-step h3,
.calculation-setup-step p {
  margin: 0;
}

@media (min-width: 721px) {
  .calculation-section .calculation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .calculation-result-head .seg label {
    height: 44px;
  }

  .calculation-result-table th {
    white-space: normal;
  }
}

@media (max-width: 1100px) {
  .calculation-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .calculation-result-card {
    position: static;
  }
}

/* K-7263 (calculator mockup `K-Pasiulymas`): a saved version -- the input
   card beside the saved result, one column under 900px; the result's number
   columns right-aligned. 280px, not the mockup's 300px: the seven result
   columns need the difference at 1366 (604px table in a 596px card). */
.quote-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: 280px minmax(0, 1fr);
}

.quote-result-table .num {
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .quote-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* K-7287 (contractor card mockup `C-Kortele`): the role tags beside the
   name; Identity in a 320px column, Addresses and Contacts stacked beside it;
   one column under 900px. The other-language names fold under a muted
   summary line. Measured at 1366: the 132px `.kv` label column broke
   "Numatytasis apmokėjimo terminas" one word per line, and the five contact
   columns needed 592px of a 576px card at 12px cell padding. On a phone the
   three header buttons wrap under the title instead of widening the page. */
.contractor-head,
.contractor-head .bi-head-actions {
  flex-wrap: wrap;
}

.contractor-head .bi-head-actions {
  flex-shrink: 1;
  min-width: 0;
}

.contractor-layout .kv {
  grid-template-columns: 150px minmax(0, 1fr);
}

.contractor-layout-main .registry-table th,
.contractor-layout-main .registry-table td {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

/* K-7477: on a phone the address and contact row Edit/Archive buttons are
   `.button-small` (32px); the K-45 touch-target rule wants 44x44. */
@media (max-width: 720px) {
  .contractor-layout-main td .button-small {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }
}

.contractor-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 12px;
}

.contractor-title .actions {
  gap: var(--space-2);
}

.contractor-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: 320px minmax(0, 1fr);
}

.contractor-layout-main {
  display: grid;
  gap: var(--gap-layout);
  min-width: 0;
}

.contractor-names summary {
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-field-value);
  margin-bottom: 10px;
}

@media (max-width: 900px) {
  .contractor-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* K-7494: fold by `<main>`'s width, as `.investigation-layout` does. */
.page:has(> .contractor-layout) {
  container: detail-columns / inline-size;
}

@container detail-columns (max-width: 799px) {
  .contractor-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.warehouse-location-filter,
.warehouse-location-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.warehouse-location-filter {
  justify-content: space-between;
  margin: 1rem 0;
}

.warehouse-location-filter .checkbox-label {
  margin: 0;
}

.warehouse-location-table {
  min-width: 900px;
}

.warehouse-tree-label {
  display: inline-block;
  padding-inline-start: calc(var(--tree-depth) * 1.25rem);
}

.warehouse-location-archived {
  color: var(--muted);
  opacity: 0.7;
}

.warehouse-location-actions form {
  margin: 0;
}

.warehouse-location-actions .button {
  font-size: 0.85rem;
  padding: 0.45rem 0.65rem;
}

.warehouse-location-form-card {
  max-width: none;
}

/* Package 0b item 4 (component gallery self-review, 2026-08-03): a bare
   `.registry-badge` with no colour modifier (e.g. "Suarchyvuota"/Archived)
   computed to a transparent background on white with only a #d8d8d8 border
   -- next to the saturated success/warning/danger chips it read as
   unfinished, and the contrast was marginal. Base rule now carries a
   neutral filled look (the same `--bg`/`--muted` pairing `:disabled` above
   uses) so every bare badge across the whole app gets it for free; a
   colour modifier declared below still wins the cascade tie because it
   comes later in this file, same as before this change. */
/* K-5927 (NCR design N1): the mockups' `.pill` -- 24px tall, fully round,
   12px/500, no outline; a `.registry-badge-dot` or an icon sits 6px in
   front of the word. `min-height`, not `height`, so a badge in a narrow
   column that does wrap still grows instead of clipping its text. */
.registry-badge,
.registry-alert {
  align-items: center;
  background: var(--rail-bg);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--muted);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 500;
  gap: 6px;
  line-height: 1.2;
  margin: 0.15rem;
  min-height: 24px;
  padding: 0 10px;
  vertical-align: middle;
}

.registry-badge-dot {
  background: currentcolor;
  border-radius: 50%;
  display: inline-block;
  flex: none;
  height: 6px;
  width: 6px;
}

/* Package 0b item 2 (2026-08-03, owner override): `.registry-badge--danger`
   and `.registry-alert` used to be two separately-declared rules that
   happened to compute identically ("two identical Veluoja chips" in the
   gallery) -- redundant, unlike `status-registered`/`priority-high` below,
   which are kept apart deliberately (see the comment further down). Folded
   into one selector list so there is exactly one place that declares what
   "danger" looks like; `.registry-alert` and `.priority-critical` are now
   pure aliases of `.registry-badge--danger`, not a second definition that
   could silently drift from it. Keep new danger-badge CSS here, not on a
   revived standalone `.registry-badge--danger` block. */
.registry-badge--danger,
.registry-alert,
.priority-critical {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

/* Package 0b item 3: `.status-registered` set `background`/`border-color`
   but no `color`, so its text fell through to the ambient table colour
   (`rgb(26,26,26)`) instead of the warning gold `.registry-badge--warning`
   uses on the identical background -- two badge systems disagreeing about
   what "warning" text should look like. `status-registered`/`priority-high`
   stay a separate, domain-named system on purpose (see the comment below
   this rule) rather than being folded into `.registry-badge--warning` the
   way item 2 folded the danger pair above: that folding was the owner's own
   call for a badge his review found genuinely redundant, not a licence to
   merge every same-coloured pair. */
.priority-high,
.status-registered {
  background: var(--warning-bg);
  border-color: var(--warning);
  color: var(--warning);
}

.status-closed {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}

/* Generic semantic modifiers for `.registry-badge`, distinct from the
   domain-named ones above (`status-registered`, `priority-critical`/
   `priority-high`, ...): those read as a maintenance trap when reused on a
   screen with nothing to do with a registry status or a priority (legacy
   `lp-badge--ok/--warn/--danger`, `calc.html:795-802` marginBadge()).
   Colour only — text/icon is the caller's job, same as every other
   `.registry-badge` usage. `--danger` is deliberately NOT repeated here —
   see the merged rule above this comment block. */
.registry-badge--success {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}

.registry-badge--warning {
  background: var(--warning-bg);
  border-color: var(--warning);
  color: var(--warning);
}

/* K-5927: the two NCR status hues the generic set lacked -- "Ištirta"
   (info blue) and "Vykdoma" (teal). */
.registry-badge--info {
  background: var(--info-bg);
  color: var(--info);
}

.registry-badge--teal {
  background: var(--teal-bg);
  color: var(--teal);
}

/* koordinatoriaus-nota-w3-savininko-radiniai-08-12-people.md §2 (owner, live
   2026-08-12): the status chip on `/people/` "burst into a multi-line yellow
   pancake -- atrodo netvarkingai".

   Shortening the wording alone does not fix it, and that is measured, not
   assumed (`tools/w3_prieigos_cipo_plotis_probe.py`, 1440px viewport): the
   column gives a badge 92px, and at 12px Outfit the OTHER two chips the same
   column renders are 106px ("Neaktyvi narystė") and 108px ("Neaktyvi
   paskyra"). Both wrap today. So does the same state in German (126px) and
   Polish (114px). Trimming Lithuanian words until one language fits inside
   92px leaves the pancake for an inactive account and for every reader who is
   not reading Lithuanian.

   So the cell stops wrapping badges instead, and the column takes the width it
   needs -- opt-in from the template through one class, the same shape as
   `data-simple-table` above, rather than `white-space: nowrap` on
   `.registry-badge` itself, which is a shared component on 20+ screens where
   nothing has been measured. Nothing in this file sets `white-space` on a
   badge, so no `:not()`-inflated selector is being fought here; the computed
   value is asserted live in the walk, not inferred from this rule existing. */
.registry-status-cell .registry-badge {
  white-space: nowrap;
}

.registry-pager {
  margin-top: 1rem;
}

.registry-page-sizes {
  justify-content: flex-start;
}

.registry-page-sizes a {
  align-items: center;
  border-radius: 4px;
  color: var(--muted);
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.25rem 0.45rem;
}

.registry-page-sizes a.active {
  background: var(--brand-dark);
  color: #fff;
  text-decoration: none;
}

.dashboard-periods,
.dashboard-custom-period,
.dashboard-cards,
.dashboard-grid,
.dashboard-queues,
.closure-quality-grid {
  display: grid;
  gap: 1rem;
}

.dashboard-periods {
  align-items: end;
  grid-template-columns: 1fr auto;
}

.dashboard-custom-period {
  align-items: end;
  grid-template-columns: repeat(3, auto);
}

/* ADDITION TO PACKAGE 2, item 4 (owner live walkthrough, 2026-08-02): a KPI
   strip (`.dashboard-cards`) had no bottom margin of its own, so whatever
   followed it (a filter form on /warehouse/stock/, a queue table elsewhere)
   butted directly against the cards with no visual break — confirmed live,
   ~7px gap at 100% zoom. `.dashboard-cards` is shared by four modules
   (quality, safety, warehouse ×2); fixing the shared rule once covers all
   of them instead of a per-page margin. */
.dashboard-cards {
  margin-bottom: 1.5rem;
}

/* `koordinatoriaus-nota-w2-ui-pluostas.md` item 4: `/safety/dashboard/`
   measured 40px between the KPI strip and the module grid below it — this
   rule's own 1.5rem (24px) plus `.page`'s own 16px grid row-gap, the same
   double-count shape as the NCR form-grid fix above but across two
   *different* shared rules rather than one. Scoped to `:has(+ .safety-
   dashboard-grid)` rather than editing `.dashboard-cards` itself: that
   base rule exists FOR the other three dashboards (quality, warehouse ×2,
   comment above), each of which relies on it being 24px because their own
   next sibling is not inside the same `.page` grid gap this one is.
   16px (this rule) + 16px (`.page`'s row-gap) = 32px, UI_KANONAS_v1.md §1's
   "between sections" step — not a new number invented for this screen. */
.dashboard-cards:has(+ .safety-dashboard-grid) {
  margin-bottom: var(--space-4);
}

/* K-8094: the mockups' filter `.lbl` -- 12px, weight 500, normal case. */
.dashboard-custom-period label {
  color: var(--muted);
  display: grid;
  font-size: 0.75rem;
  font-weight: 500;
  gap: 0.25rem;
}

.dashboard-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* koordinatoriaus-nota-w3-savininko-radiniai-dizainas.md §1, found in the
   S13 screenshot of the finished frame rather than by any test: the owner's
   headline amounts broke MID-DIGIT. "14080.00 €" rendered as "14080.0" on
   one line and "0 €" on the next, and a reader glancing at the card reads
   the first line as the figure. Measured, not eyeballed: at 1280px three of
   the four cards wrapped to two line boxes, at 1440px one still did, at
   1600px and above none -- and the demo fixture's 14 080 € is the SMALLEST
   number this card will ever hold (M5's own mockup writes 118 430 € for one
   WEEK), so the real magnitudes break a step wider again.

   Three fixes were measured and two rejected. `overflow-wrap: normal` alone
   only moves the damage: `.card`'s own `anywhere` (line 1187, worker 1's fix
   for URLs cutting across a card border) is there precisely because a token
   that cannot fit has to go somewhere, and a 176px number in a 124px box
   would then cut the border instead -- trading a misread figure for the bug
   that rule exists to prevent. Shrinking the font needs ~10px to fit seven
   digits in 124px, which is not a headline any more. What is actually too
   small is the COLUMN: four money cards across a 800px content area give
   124px each, and no font size rescues that.

   So the grid reflows to two columns below 1500px and keeps the mockup's
   four across at the widths the mockup was drawn for. Scoped to this
   module's own grids: `.dashboard-cards` is shared with quality, safety and
   warehouse, whose cards hold small counts that never came close to
   wrapping, and reflowing all of them would be a platform-wide layout
   decision rather than a fix to the screen that has the defect. Two classes
   deep (0,2,0) on purpose -- a bare `.rodikliai-kpis` ties with
   `.dashboard-cards` above and would lose or win by file order alone. */
@media (max-width: 1500px) {
  .dashboard-cards.rodikliai-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* K-10264: the operations desk "Today" strip holds five cards, and its
   mockup (OP-1-Siandien.dc.html) draws all five in one row; the shared
   four-column grid dropped the fifth onto a row of its own at 1440px.
   Below 1200px it keeps the shared four-column / one-column phone rules. */
@media (min-width: 1200px) {
  .dashboard-cards.dashboard-cards--five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.kpi-card {
  color: inherit;
  display: grid;
  gap: 0.35rem;
  margin: 0;
  text-decoration: none;
}

.kpi-card > strong {
  font-size: 2rem;
}

.kpi-card small {
  color: var(--muted);
}

/* R7 §3.b (docs/plans/r7-w1-note-siena-lietuviskai-ir-israiska.md): the KPI
   strip's gate-countdown tile colours its own value amber under 14 days,
   red under 7 -- the number is the signal, not the whole card, so only
   .kpi-card > strong is retinted (the label/caption stay --muted/--text as
   normal, same "never colour-alone" reasoning as the module-card badges
   below: the digits still read as a plain number even without colour). */
.kpi-card--warning > strong {
  color: var(--warning);
}

.kpi-card--danger > strong {
  color: var(--danger);
}

/* koordinatoriaus-nota-w1-savininko-radiniai-08-12-shell.md item 2: "Man
   šiandien"'s Attention list read as a bare, underlined-link word list ("kaip
   koks Wordas"). Reuses this same .kpi-card/.dashboard-cards pair every
   other dashboard already uses instead of a new component -- the label and
   the count swap places (label first, count as the big number) but the
   shape, spacing and control conventions are identical. The zero/non-zero
   split the note asks for ("nulinės — vizualiai prislopintos, nenulinės —
   akcentuotos") mirrors --warning/--danger's own "retint only the number"
   rule: the digit itself already carries the state, colour only reinforces
   it, so a colour-blind viewer still reads "0" vs a real count as plain
   text (D7, never colour alone). */
.kpi-card--zero > strong {
  color: var(--muted);
}

/* === Rodikliai (R1) === */
/* K-6080 (BI design R1): the BI mockups' own components
   (saltiniai/bi-maketai/html/*.dc.html <helmet><style>, README table
   "PRIDETI ... R1"), under the mockups' class names so R2-R10 can lift
   markup as drawn. `.card`, `.tabs`, `.seg` and `.wk` are already above
   (B1) and are not repeated. The mockups' `.warn` / `.okbox` are
   `.callout-warning` / `.callout-success` (K-5927, above): R2-R10 write
   those classes; no `.warn` alias is added. Only existing tokens: the mockups' warm greys and tints are the nearest
   token or a color-mix of two tokens, the same way B1 derives its
   tints -- no new hue. */

/* `.kpi` -- one number tile: label, value, a one-line note. `.kpi--empty`
   (the mockups' `.kpi.e`) greys the value for "no export yet" -- the tile
   stays so the row of tiles keeps its shape. */
.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 12px 14px;
}

.kpi .l {
  color: var(--muted);
  font-size: var(--fs-field-value);
  font-weight: 500;
}

.kpi .v {
  font-size: 1.625rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.kpi .n {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.kpi--empty .v {
  color: color-mix(in srgb, var(--muted) 45%, var(--surface));
  font-weight: 500;
}

/* `.sel` -- a filter field with its label inside the same 40px box
   ("Mėnuo 2026-08"). A real `<select>` inside it loses its own border so
   the box, not the control, is what the eye sees. */
.sel {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  color: var(--text);
  display: inline-flex;
  font-size: var(--fs-control);
  gap: 8px;
  height: var(--control-h);
  padding: 0 10px 0 12px;
  white-space: nowrap;
}

.sel small {
  color: var(--muted);
  font-size: 0.75rem;
}

.sel select {
  background: transparent;
  border: 0;
  font-size: var(--fs-control);
  height: 100%;
  padding: 0;
  width: auto;
}

/* `.side` -- the side navigation with group heads (Gamyba screens):
   uppercase grey group labels, 34px links, the current one on the same
   warm tint as B1's `.seg`; `.nw` is the small "new" tag at the link's end. */
.side {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 2px;
  width: 212px;
}

.side .g {
  color: color-mix(in srgb, var(--muted) 73%, var(--surface));
  font-size: var(--fs-field-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 14px 12px 4px;
  text-transform: uppercase;
}

.side a {
  align-items: center;
  border-radius: var(--radius-md);
  color: color-mix(in srgb, var(--text) 55%, var(--muted));
  display: flex;
  font-size: var(--fs-control);
  height: 34px;
  padding: 0 12px;
  text-decoration: none;
}

.side a:hover {
  background: var(--bg);
  color: var(--text);
}

.side a.on,
.side a[aria-current] {
  background: color-mix(in srgb, var(--brand-tint) 70%, var(--rail-bg));
  color: var(--text);
  font-weight: 600;
}

.side a .nw {
  background: var(--warning-bg);
  border-radius: 4px;
  color: var(--brand-dark);
  font-size: 0.625rem;
  font-weight: 600;
  margin-left: auto;
  padding: 1px 5px;
}

/* `.spk` -- 24 months as 4px bars on a 24px baseline; the bar height is
   the row's own data (inline `height`), `.h` marks the months in focus. */
.spk {
  align-items: flex-end;
  display: inline-flex;
  gap: 1px;
  height: 24px;
}

.spk i {
  background: color-mix(in srgb, var(--muted) 17%, var(--rail-bg));
  border-radius: 1px;
  display: block;
  width: 4px;
}

.spk i.h {
  background: var(--brand);
}

/* `.kb` -- a score (`<b>`) and its 64px bar; the fill width is the score (inline
   `width`), green by default, `.kb--ty` amber, `.kb--tr` red -- the same
   three target states as the row tints below. */
.kb {
  align-items: center;
  display: flex;
  gap: 8px;
}

.kb b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 34px;
}

.kb .b {
  background: var(--rail-bg);
  border-radius: 3px;
  flex: none;
  height: 6px;
  overflow: hidden;
  width: 64px;
}

.kb .b span {
  background: var(--success);
  display: block;
  height: 100%;
}

.kb--ty .b span {
  background: var(--warning);
}

.kb--tr .b span {
  background: var(--danger);
}

/* `.sbar` -- a row's share of the total as a 6px bar (inline `width`). */
.sbar {
  background: color-mix(in srgb, var(--brand) 30%, var(--brand-tint));
  border-radius: 3px;
  display: inline-block;
  height: 6px;
  vertical-align: middle;
}

/* `.grp` / `.tot` inside `.registry-table`: a group head row across all
   columns (a machine, a product family) and the closing sum row. */
.registry-table tr.grp td {
  background: var(--bg);
  color: color-mix(in srgb, var(--muted) 70%, var(--text));
  font-size: 0.75rem;
  font-weight: 600;
  padding: 8px 12px;
}

.registry-table tr.tot td {
  border-top: 1px solid var(--line-strong);
  font-weight: 600;
}

/* Row tint by target, three states: `.row-tg` on target (no tint on
   purpose, so a template can always write `row-{{ state }}`), `.row-ty`
   close to it, `.row-tr` below it. The cell-sized version of the same
   three states is `.tg` / `.ty` / `.tr` (a value on its own tint, the
   Tikslai grid). */
.registry-table tr.row-tg > td {
  background: transparent;
}

.registry-table tr.row-ty > td {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
}

.registry-table tr.row-tr > td {
  background: color-mix(in srgb, var(--danger-bg) 50%, var(--surface));
}

.tg,
.ty,
.tr {
  border-radius: var(--radius-sm);
  display: block;
  font-variant-numeric: tabular-nums;
  padding: 6px 10px;
}

.tg {
  background: var(--success-bg);
  color: var(--success);
}

.ty {
  background: var(--warning-bg);
  color: var(--brand-dark);
}

.tr {
  background: var(--danger-bg);
  color: var(--danger);
}

/* `details.how` -- "Kaip skaičiuojama": the long explanation folded under
   a small link-coloured summary, so nothing is dropped from the screen
   and nothing crowds the numbers. */
details.how {
  color: var(--muted);
  font-size: var(--fs-field-value);
}

.how summary {
  align-items: center;
  color: var(--brand-dark);
  cursor: pointer;
  display: inline-flex;
  font-weight: 500;
  gap: 6px;
  list-style: none;
}

.how summary::-webkit-details-marker {
  display: none;
}

.how p {
  line-height: 1.5;
  margin: 8px 0 0;
}

/* `.trend-line` -- the 6-week curve: one 1.6px line with a dot on the last
   week, gold; `.trend-line--tr` red for a row that went the wrong way.
   Size comes from the SVG's own width/height (96x24, 56x20 on a phone). */
.trend-line {
  color: var(--brand);
  vertical-align: middle;
}

.trend-line--tr {
  color: var(--danger);
}

.trend-line polyline {
  fill: none;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.trend-line circle {
  fill: currentColor;
}

/* Phone: the filter box, the side links and the "how" fold are touch
   targets, 44px (K-45); the side navigation takes the full width. */
@media (max-width: 720px) {
  .sel {
    height: 44px;
  }

  .side {
    width: 100%;
  }

  .side a {
    height: 44px;
  }

  .how summary {
    min-height: 44px;
  }
}

/* === end Rodikliai (R1) === */

/* === Rodikliai (R2) === */
/* K-6114 (BI design R2): the Apžvalga screen's own layout, as
   saltiniai/bi-maketai/html/Apzvalga.dc.html and Apzvalga-390.dc.html lay
   it out, on R1's components. `.bi-head` + tabs is the module header every
   Rodikliai screen shares (rodikliai/_module_header.html); `.bi-toolbar` is
   the one filter row that replaces the "Period and source" card. Tokens and
   color-mix of two tokens only -- no new hue. */
.bi-head {
  align-items: flex-end;
  display: flex;
  gap: var(--space-6);
  justify-content: space-between;
}

.bi-head-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.bi-head-title h1 {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.bi-head-title .card-subtitle {
  font-size: var(--fs-control);
}

.bi-crumb {
  color: var(--muted);
  font-size: var(--fs-field-value);
}

/* K-8654 (owner ruling 2026-10-02): one path per page. The shell's own
   `nav.breadcrumb` (base.html, built from the navigation registry) is the
   only trail; the hand-written `.bi-crumb` above a page heading repeated it
   (65 of 105 pages on pp-bo). Hidden here only while the shell trail is on
   the page; the template markup stays until a later wave removes it. */
.shell-main:has(.topbar .breadcrumb) .bi-crumb {
  display: none;
}

.bi-head-actions {
  align-items: center;
  display: flex;
  flex: none;
  gap: var(--space-2);
}

.bi-more {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: var(--control-h);
  min-width: var(--control-h);
}

.bi-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px var(--space-6);
  justify-content: space-between;
}

.bi-tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bi-meta {
  color: var(--muted);
  font-size: var(--fs-field-value);
  font-weight: 400;
}

.bi-meta b {
  color: var(--text);
  font-weight: 500;
}

/* The kind select is the `.sel` box's own small label ("Mėnuo 2026-08"). */
.sel select.bi-sel-kind {
  color: var(--muted);
  font-size: 0.75rem;
}

.bi-families {
  position: relative;
}

.bi-families > summary {
  cursor: pointer;
  list-style: none;
}

.bi-families > summary::-webkit-details-marker {
  display: none;
}

.bi-families-panel {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  max-height: 360px;
  overflow-y: auto;
  padding: 12px;
  position: absolute;
  z-index: 20;
}

.bi-families-panel .checkbox-label {
  white-space: nowrap;
}

/* K-7109 (absences design A4, mockup N-Registruoti): the same drop-down as
   a form field -- "Keliems darbuotojams": the summary is the field's own
   full-width box ("pasirinkta N iš 100"), the panel opens as wide as the
   field, with the search box over the checkbox list. */
.bi-families--field > summary.sel {
  display: flex;
  width: 100%;
}

.bi-families--field > summary.sel > svg {
  color: var(--muted);
  margin-left: auto;
}

.bi-families--field > .bi-families-panel {
  left: 0;
  right: 0;
}

.bi-families--field .checkbox-label {
  font-size: var(--fs-control);
  margin-top: 0;
  white-space: normal;
}

@media (max-width: 720px) {
  .bi-families--field > summary.sel,
  .bi-families--field .checkbox-label {
    min-height: 44px;
  }
}

/* Two columns: the week and the month, and a 380px side column. */
.bi-columns {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: minmax(0, 1fr) 380px;
}

/* K-7467: a screen that drops its side card (the roll form's edit door has no
   geometry preview) keeps the main card and no empty 380px track. */
.bi-columns--single {
  grid-template-columns: minmax(0, 1fr);
}

.bi-main,
.bi-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.bi-sec {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.bi-sec--gap {
  margin-top: var(--space-2);
}

.bi-callout {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.bi-callout a {
  font-weight: 500;
  margin-left: auto;
}

/* The tile rows: the week's seven (Pinigai and Sandėlis wider, first) and
   the month's four. Flex rather than a fixed grid, because a reader who may
   not see a block gets fewer tiles and the row closes up. The platform's
   <main> is narrower than the mockup's (side navigation, 1600px cap), so a
   tile never shrinks below its own figure: the row wraps instead of cutting
   "361 894 €" into "361 89". */
.bi-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bi-kpis > .kpi {
  flex: 1 1 0;
  min-width: min-content;
}

.bi-kpis .kpi .v {
  white-space: nowrap;
}

/* After `.bi-kpis .kpi .v` (same specificity): a name value must wrap, not stretch the tile. */
.kpi .v.v--text {
  font-size: var(--fs-control);
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

.bi-kpis > .kpi.bi-wide {
  flex-grow: 1.5;
}

.bi-kpis--month {
  gap: 12px;
}

/* K-9416: the five finance tiles over the week's table. The tone is a 4px
   left edge on the tile, never a filled tile -- the figure stays the thing
   the eye reads -- and is also written out in `.bi-signal-tone`. */
.bi-signals {
  margin-bottom: 12px;
}

.kpi.bi-signal {
  border-left: 4px solid var(--line);
}

.kpi.bi-signal--bad {
  border-left-color: var(--danger);
}

.kpi.bi-signal--warn {
  border-left-color: var(--warning);
}

.kpi.bi-signal--ok {
  border-left-color: var(--success);
}

.bi-signal--bad .bi-signal-tone {
  color: var(--danger);
  font-weight: 600;
}

.bi-signal--warn .bi-signal-tone {
  color: var(--warning);
  font-weight: 600;
}

.bi-signal-spark {
  width: 100%;
}

.bi-chead {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.bi-chead > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.bi-hint {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}

.bi-up {
  color: var(--success);
}

.bi-dn {
  color: var(--danger);
}

/* The finances table: compact rows, the newest week tinted, the two
   "iš jų pradelstos" lines indented and grey, a jumped one red.
   K-6167: all six weeks and the curve fit the card at 1440px. Measured: with
   the side navigation open the card's table area is 502px, and on the
   registry's 12px padding the table needed 799px -- weeks 34-36 and the
   curve (the newest week being the one that matters) sat past the scrolling
   edge. So the cells are tighter and a step smaller, the headings break
   between the week and its date, and the name column gives way: the name
   wraps and its note goes a step smaller still. No week is hidden; a card
   still narrower scrolls inside `.registry-table-wrap`, never the page. */
.bi-finance .registry-table th,
.bi-finance .registry-table td {
  padding: 9px 12px;
}

.bi-finance .finance-line {
  font-weight: 500;
}

.bi-finance .finance-line.bi-part {
  color: var(--muted);
  font-weight: 400;
  padding-left: 28px;
}

/* Above the phone breakpoint only: the phone's name | curve | newest list
   (Apzvalga-390) keeps its own cells. */
@media (min-width: 721px) {
  .bi-finance .registry-table th,
  .bi-finance .registry-table td {
    padding: 7px 5px;
  }

  .bi-finance .registry-table th:first-child,
  .bi-finance .registry-table td:first-child {
    padding-left: 0;
  }

  .bi-finance .registry-table th:last-child,
  .bi-finance .registry-table td:last-child {
    padding-right: 0;
  }

  .bi-finance .registry-table td {
    font-size: 0.75rem;
  }

  .bi-finance .registry-table th.numeric {
    line-height: 1.25;
    white-space: normal;
  }

  /* Beats `.finance-weeks .finance-line`'s 9rem floor further down. */
  .bi-finance .finance-weeks .finance-line {
    min-width: 0;
  }

  .bi-finance .finance-line .bi-hint {
    font-size: var(--fs-field-label);
  }

  .bi-finance .finance-line.bi-part {
    padding-left: 12px;
  }
}

/* The overdue warning is ONE run of text: its bold jump and the words after
   it are a single flex item (`<span>` in overview.html), not two columns. */
.bi-finance .bi-callout {
  font-size: var(--fs-nav-l1);
}

.bi-finance th.numeric:nth-last-child(2),
.bi-finance td.numeric:nth-last-child(2) {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
}

.bi-finance tr.bi-jump td.numeric:nth-last-child(2) {
  color: var(--danger);
  font-weight: 600;
}

.bi-finance tr.bi-jump .finance-spark polyline {
  stroke: var(--danger);
}

.bi-finance tr.bi-jump .finance-spark circle {
  fill: var(--danger);
}

/* K-9482: the newest week is bold as well as tinted, and the line names stay
   put while thirteen week columns scroll sideways under them. Above the phone
   breakpoint only -- below it `.rt-cards` turns each row into a card. */
.bi-finance td.numeric:nth-last-child(2) {
  font-weight: 600;
}

@media (min-width: 721px) {
  .bi-finance .finance-weeks thead th:first-child,
  .bi-finance .finance-weeks td.finance-line {
    background: var(--surface);
    left: 0;
    position: sticky;
    z-index: 1;
  }
}

/* K-9482: the lightbox chart's line and points; the frame, grid, axis and
   the dashed median are `.rodikliai-bigchart`'s. */
.finance-bigchart__line {
  fill: none;
  stroke: var(--brand);
  stroke-linejoin: round;
  stroke-width: 2;
}

.finance-bigchart__dot {
  fill: var(--brand);
}

.finance-bigchart__median {
  fill: var(--brand-dark);
}

.bi-spark-cell {
  text-align: right;
  width: 64px;
}

.bi-spark-cell .finance-spark {
  display: inline-block;
  width: 56px;
}

.bi-bar-cell {
  width: 130px;
}

.bi-bar-cell .sbar {
  max-width: 120px;
}

.registry-table tr.bi-muted > td {
  color: var(--muted);
}

.bi-gaps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bi-gaps li {
  font-size: var(--fs-field-value);
  line-height: 1.45;
}

.bi-gaps b {
  font-weight: 600;
}

.bi-self-start {
  align-self: flex-start;
}

.bi-row {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.bi-months {
  height: auto;
  width: 100%;
}

.bi-months rect {
  fill: none;
  stroke: var(--line-strong);
  stroke-dasharray: 4 3;
}

.bi-months text {
  fill: var(--muted);
  font-size: 11px;
}

.bi-comment textarea {
  min-height: 112px;
  width: 100%;
}

.bi-comment-foot {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.bi-phone-only {
  display: none;
}

/* Phone (Apzvalga-390): one column in the same order, the week switcher
   alone in the tool row, Pinigai/Sandėlis as the week's tiles, the
   finances as name | curve | newest figure, and the side column down to
   the week's comment. Nothing scrolls sideways but the tab row itself. */
@media (max-width: 720px) {
  .bi-wide-only,
  .bi-wide-only-row {
    display: none;
  }

  .bi-phone-only {
    display: inline;
  }

  .bi-head-title .card-subtitle {
    display: none;
  }

  .bi-head-title h1 {
    font-size: 1.375rem;
  }

  /* K-9608 (owner's phone photo 2026-10-07; mobile audit 2.1, 3.1): the
     actions box is `flex: none`, so a help door plus a primary button or a
     freshness line took nearly the whole row and left the title ~30px --
     the h1 broke one letter per line. On a phone the title takes its own
     row and the actions wrap on the row below it -- a column, as `.po-head`
     already does: `flex-wrap` on the head would make `.po-head`/`.my-docs`
     multi-line columns, whose actions then stop wrapping and widen the page. */
  .bi-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .bi-head-actions {
    flex-wrap: wrap;
  }

  .bi-head + .module-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .bi-head + .module-tabs a {
    flex: none;
  }

  /* K-9613 (mobile audit 2026-10-07, 3.3): the scrolled tab row cut its
     last label off ("Pagam...", "Info (sys...") with nothing saying more
     tabs follow. card-tabs.js adds `.tabs-scroll-more` while a tab row (or
     the messages rail) still has tabs past its right edge; the row then
     fades out on the right. A mask rather than a gradient pseudo-element:
     the same rows sit on the grey page, the white rail and a white card,
     and a mask fades whatever is underneath without knowing its colour. */
  .tabs-scroll-more {
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }

  /* K-10666: the fade also blurred the right 2.5rem of an open row menu
     inside a wide registry table; while one is open the wrap stays sharp. */
  .registry-table-wrap.tabs-scroll-more:has(.ncr-row-menu[open]) {
    mask-image: none;
  }

  /* K-9613 (mobile audit 3.1): the roles matrix put the page at 1023px
     although its table scrolls inside this wrap -- a column head's
     `.visually-hidden` label is absolutely positioned, its containing block
     lay outside the wrap, so `overflow-x: auto` never clipped it. As a
     containing block the wrap clips it with the table. Row menus are
     already positioned on their own `.ncr-row-menu`, so they do not move. */
  .registry-table-wrap {
    position: relative;
  }

  .bi-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .bi-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bi-finance thead,
  .bi-finance tr.grp,
  .bi-finance tr.grp ~ tr {
    display: none;
  }

  .bi-finance tbody tr {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 8px;
  }

  .bi-finance tbody td {
    border-bottom: 0;
  }

  .bi-finance td.finance-line {
    flex: 1 1 auto;
    min-width: 0;
  }

  .bi-finance td.numeric {
    display: none;
  }

  .bi-finance td.numeric:nth-last-child(2) {
    background: transparent;
    display: block;
    font-weight: 600;
    order: 3;
  }

  .bi-finance .bi-spark-cell {
    order: 2;
    width: auto;
  }

  .bi-finance .bi-spark-cell .finance-spark {
    height: 20px;
    width: 56px;
  }

  /* Families as a list: name | turnover | change -- the first two cells
     and the last; the others (bar, profit, margin, orders) fold away. */
  .bi-list thead,
  .bi-list td:not(:first-child):not(:nth-child(2)):not(:last-child) {
    display: none;
  }

  .bi-list td:nth-child(2) {
    font-weight: 600;
  }

  .bi-comment-foot {
    align-items: stretch;
    flex-direction: column;
  }

  .bi-comment button {
    min-height: 48px;
    width: 100%;
  }

  /* K-45 touch targets (mobile-guard, K-6125): the header's two doors are
     40px on the desktop scale, and the week switcher's box is 44px WITH its
     border, so its previous/next links were 42px inside it. */
  .bi-head-actions a {
    min-height: 44px;
    min-width: 44px;
  }

  .bi-tools .wk {
    height: auto;
  }

  .bi-tools .wk > * {
    align-self: stretch;
    min-height: 44px;
  }
}

/* === Rodikliai (R3) === */
/* K-6303 (BI design R3): the Dinamika screen's own layout, as
   saltiniai/bi-maketai/html/Dinamika.dc.html lays it out, on R1's
   components and R2's header, tool row and columns. Tokens and color-mix of
   two tokens only -- no new hue. */

/* The right column is 400px here (the mockup's own), R2's is 380px. */
.bi-columns--dynamics {
  grid-template-columns: minmax(0, 1fr) 400px;
}

/* The four cards are the "Rodyti" filter: links that keep the tile's look,
   the one in force framed in the accent colour (2px, padding one less so
   the tile does not grow). */
.bi-show > a.kpi {
  color: inherit;
  text-decoration: none;
}

.bi-show > a.kpi:hover {
  border-color: var(--line-strong);
}

.bi-show > a.kpi[aria-current] {
  border: 2px solid var(--brand);
  padding: 15px 17px;
}

/* The table's own search, in the card head. */
.bi-search input[type="search"] {
  height: 32px;
  width: 220px;
}

.bi-name {
  font-weight: 500;
}

/* The row name is the row's own link (it opens the close-up), drawn as the
   mockup's plain name, not as a link. */
.bi-dynamics td > a:not(.registry-badge) {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}

.bi-dynamics td > a:not(.registry-badge):hover {
  text-decoration: underline;
}

/* The shared table search (`simple-table.js`) kept on the side and bottom
   tables ("Paieška — lieka"), mounted small in the card head: the box alone,
   its caption left for screen readers only. */
.bi-table-search {
  flex: 0 1 180px;
}

.bi-table-search .simple-table-search > span {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.bi-table-search input[type="search"] {
  height: 32px;
}

/* The horizon table: the row that is open on the right is tinted, a row
   is pressable as a whole, the "Nuo geriausio" figure is the small one. */
.bi-dynamics tbody tr {
  cursor: pointer;
}

.registry-table tr.bi-picked,
.registry-table tr.bi-picked > td {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
}

/* The name keeps its line (the mockup's ellipsis column); the curve column
   is only as wide as its 24 bars. */
/* Measured at a 1440px window: with the side navigation open the card
   leaves the table ~530px, and on the registry's 12px cells the six
   columns needed ~820px, so "Būsena" sat past the scrolling edge. Above
   720px the cells are tighter, the headings may wrap, the bar is 40px and
   the curve cell drops its padding (the 44px button is the row's height);
   the name keeps one line only where the page is wide enough for it. */
@media (min-width: 721px) {
  .bi-dynamics .registry-table th,
  .bi-dynamics .registry-table td,
  .bi-recent th,
  .bi-recent td {
    padding: 8px 5px;
  }

  .bi-dynamics .registry-table th,
  .bi-recent th {
    white-space: normal;
  }

  .bi-dynamics td.fw-num,
  .bi-recent td.fw-num {
    white-space: nowrap;
  }

  .bi-dynamics th:nth-child(2),
  .bi-dynamics td:nth-child(2) {
    width: 1%;
  }

  .bi-dynamics td:nth-child(2) {
    padding-block: 0;
  }

  .bi-dynamics .kb .b {
    width: 40px;
  }
}

/* Below 1700px the side column gives up 60px (400px -> 340px) so the
   horizon table's six columns stay inside their card. What limits the
   width here is the window, not `.page`'s 1600px cap: <main> is the window
   minus the side navigation, and the cap only starts to bind once the
   window is wider than 1600px plus that navigation. With both rails
   collapsed (56px + 56px) that is ~1712px, just above 1699px; with both
   expanded (208px + 230px) it is ~2038px. Either way <main> is narrower
   than the cap everywhere this rule applies, so keying it on the window
   at 1699px is still right. The mockup lays the screen out on 1344px of content with no platform
   navigation beside it. Rodikliai > Dinamika (`.rodikliai-stack`) already
   stacks into one column at 721-1499px (K-6901, below), so for it this
   rule only acts at 1500-1699px; the other screens reusing the class
   (accounts receivable, cost centres) keep it across the whole range. */
@media (min-width: 721px) and (max-width: 1699px) {
  .bi-columns--dynamics {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
}

@media (min-width: 1700px) {
  .bi-dynamics th:first-child,
  .bi-dynamics td:first-child {
    min-width: 11rem;
  }
}

.bi-dynamics .kb b {
  font-size: 0.75rem;
  font-weight: 400;
}

/* The close-up: 24 bars 120px tall across the card, older months a light
   accent, the newest three the accent itself; the axis under them. */
.bi-closeup .rodikliai-curve-open--tall {
  width: 100%;
}

.bi-closeup .rodikliai-curve--tall {
  border-bottom: 0;
  gap: 3px;
  height: 120px;
  max-width: none;
  min-width: 0;
}

.bi-closeup .rodikliai-curve__bar {
  background: color-mix(in srgb, var(--brand) 40%, var(--brand-tint));
}

.bi-closeup .rodikliai-curve__bar.is-new {
  background: var(--brand);
}

.bi-axis {
  color: var(--muted);
  display: flex;
  font-size: var(--fs-field-label);
  justify-content: space-between;
}

.bi-closeup-close {
  align-items: center;
  display: inline-flex;
  font-size: 1.125rem;
  justify-content: center;
  min-height: 32px;
  min-width: 32px;
}

/* "Kam skambinti" as the mockup's table (K-9507): name over its reason
   line, then the money, the last order, the weight and the priority. */
.bi-calls td {
  vertical-align: top;
}

.bi-calls .bi-name {
  display: block;
}

.bi-calls td.fw-num {
  white-space: nowrap;
}

/* The two bottom cuts side by side across the whole width. */
.bi-pair {
  align-items: start;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .bi-columns--dynamics,
  .bi-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .bi-search,
  .bi-search input[type="search"],
  .bi-table-search {
    width: 100%;
  }

  .bi-chead:has(.bi-search, .bi-table-search) {
    flex-wrap: wrap;
  }

  .bi-search input[type="search"],
  .bi-table-search input[type="search"] {
    height: 44px;
  }

  .bi-closeup-close,
  .bi-show-all {
    min-height: 44px;
    min-width: 44px;
  }

  /* K-10816: the same 44px phone floor under a neutral name, so screens
     outside the indicators (absences, receiving, warehouse) no longer
     borrow `.bi-show-all` and a BI-only change cannot resize them. */
  .touch-target-44 {
    min-height: 44px;
    min-width: 44px;
  }

  /* "Bendros taisyklės" 9: on a phone the horizon table and the two bottom
     cuts are lists -- name | figure | change. The horizon table keeps the
     last 12 months and the change against the 12 before; a bottom cut keeps
     its total and its change. The curve, the bar, the chip and the months
     stay in the close-up and on the wide screen. */
  .bi-dynamics thead,
  .bi-dynamics td:nth-child(2),
  .bi-dynamics td:nth-child(5),
  .bi-dynamics td:nth-child(6),
  .bi-recent thead,
  .bi-recent td:nth-child(2),
  .bi-recent td:nth-child(3),
  .bi-recent td:nth-child(4),
  .bi-recent td:nth-child(7) {
    display: none;
  }

  .bi-dynamics tbody tr,
  .bi-recent tbody tr:not(.grp) {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 8px;
  }

  .bi-dynamics tbody td,
  .bi-recent tbody td {
    border-bottom: 0;
  }

  .bi-dynamics tbody td {
    padding-block: 0;
  }

  .bi-dynamics td:first-child,
  .bi-recent td:first-child {
    flex: 1 1 auto;
    min-width: 0;
  }

  .bi-dynamics td:nth-child(3),
  .bi-recent td:nth-child(6) {
    font-weight: 600;
    white-space: nowrap;
  }

  .bi-recent td:nth-child(5) {
    order: 2;
    white-space: nowrap;
  }

  .bi-dynamics td > a:not(.registry-badge) {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
}

/* === end Rodikliai (R3) === */

/* === Rodikliai (R4) === */
/* K-6349 (BI design R4): Ketvirtis and Metai, as saltiniai/bi-maketai/html/
   Ketvirtis.dc.html and Metai.dc.html lay them out, on R1/R2 components.
   Tokens and color-mix of two tokens only -- no new hue. */
.bi-grid {
  align-items: start;
  display: grid;
  gap: 12px;
}

.bi-grid--2 {
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bi-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bi-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bi-grid > .card {
  margin: 0;
}

/* The mockups' `.hl`: the row being read, on the warm tint. */
.registry-table tr.bi-hl > td {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
}

.bi-mute {
  color: color-mix(in srgb, var(--muted) 70%, var(--surface));
}

/* A switcher step the picker does not offer: greyed, not a link. */
.wk a.bi-off {
  color: color-mix(in srgb, var(--muted) 40%, var(--surface));
  pointer-events: none;
}

.bi-chead-tools {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* "Įvykdyta": the paid share of the plan as an 8px bar and its percent. */
.bi-done-col {
  width: 260px;
}

.bi-done {
  align-items: center;
  display: flex;
  gap: 8px;
}

.bi-done-bar {
  background: var(--rail-bg);
  border-radius: 4px;
  display: flex;
  flex: 1;
  height: 8px;
  overflow: hidden;
}

.bi-done-bar > span {
  background: var(--brand-dark);
  display: block;
  height: 100%;
}

.bi-done .num {
  font-size: 0.75rem;
  white-space: nowrap;
}

/* Metai: "Pajamos pagal metus" at 320px beside the year and month tables. */
.bi-year-cols {
  align-items: start;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
}

.bi-year-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.bi-year-cols .card,
.bi-year-side .card {
  margin: 0;
}

.bi-bars {
  align-items: flex-end;
  display: flex;
  gap: 8px;
  height: 200px;
}

.bi-bar {
  align-items: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.bi-bar .num {
  font-size: 0.75rem;
  white-space: nowrap;
}

.bi-bar-fill {
  background: color-mix(in srgb, var(--brand) 55%, var(--brand-tint));
  border-radius: 4px 4px 0 0;
  max-width: 56px;
  width: 100%;
}

.bi-bar--on .bi-bar-fill {
  background: var(--brand);
}

/* The production export standing in for the books: hatched, never solid. */
.bi-bar-fill--export,
.bi-bar--on .bi-bar-fill--export {
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand-tint) 70%, var(--rail-bg)) 0 6px,
    color-mix(in srgb, var(--brand-tint) 40%, var(--surface)) 6px 12px
  );
}

.bi-bar-ax {
  color: color-mix(in srgb, var(--muted) 70%, var(--surface));
  font-size: var(--fs-field-label);
}

/* The mockups' `.t2`: 13px cells on 9px/12px (8px across in the platform's
   narrower <main>, beside the side navigation); headings may wrap, the first
   column (a quarter, a year, a company) does not. The vertical padding is
   the platform cell token (K-7014), so "compact" is never looser than the
   base `.registry-table`. */
.bi-compact th,
.bi-compact td {
  font-size: var(--fs-field-value);
  padding: var(--cell-pad-y) 8px;
}

.bi-compact th {
  white-space: normal;
}

.bi-compact td:first-child {
  white-space: nowrap;
}

/* The `{% empty %}` row's one colspan cell is also a first child, but it is
   a sentence, not a column: at 390px "No receivables statements have been
   imported." ran 21px past its rt-cards card (K-6744, mobile-guard). */
.bi-compact td.empty-state {
  white-space: normal;
}

.bi-compact th.fw-num,
.bi-compact td.fw-num {
  text-align: right;
}

/* K-6508 (BI R10, inventory rule 7): an amount reads as one token -- the
   family table's Pelnas broke "50 201 €" before the "€" at a 1440 window. */
.bi-list td.fw-num {
  white-space: nowrap;
}

.bi-compact .registry-badge {
  white-space: nowrap;
}

/* A competitor's five-year history, folded under its name. */
.bi-hist > summary {
  cursor: pointer;
  list-style-position: inside;
}

.bi-hist-table {
  border-collapse: collapse;
  font-size: 0.75rem;
  margin-top: 8px;
}

.bi-hist-table caption {
  color: var(--muted);
  text-align: left;
}

.bi-hist-table th,
.bi-hist-table td {
  padding: 3px 12px 3px 0;
  white-space: nowrap;
}

/* Phone: one column in the same order; the tables are already row lists
   (`rt-cards`), the switcher and the year choice are 44px touch targets. */
@media (max-width: 720px) {
  .bi-grid--2,
  .bi-grid--3,
  .bi-grid--4,
  .bi-year-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  /* K-7020: "rekvizitai.lt has not published <year> yet" wraps in its card
     (the sums beside it stay one token), and the empty per-employee cell
     after it draws no label-only line. */
  .rodikliai-competitors td.fw-num.rodikliai-unpublished {
    white-space: normal;
  }

  .rodikliai-competitors td.rodikliai-per-employee:empty {
    display: none;
  }

  .bi-done-col {
    width: auto;
  }

  .bi-chead-tools .seg {
    flex-wrap: wrap;
  }

  .bi-hist > summary {
    line-height: 44px;
    min-height: 44px;
  }

  .bi-hist > summary a {
    display: inline-block;
    min-height: 44px;
  }

  .bi-grid .button-small,
  .bi-chead .button-small,
  .bi-callout .button-small {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
}

/* K-9466: Metai "Monthly P/N" -- group headings and totals grey, results
   bold under a rule, profitability rows small and muted (mockup tab 2). */
.rodikliai-pnl td.fw-num {
  white-space: nowrap;
}

.rodikliai-pnl .rodikliai-pnl-heading td,
.rodikliai-pnl .rodikliai-pnl-total td {
  background: var(--bg);
  font-weight: 600;
}

.rodikliai-pnl .rodikliai-pnl-result td {
  border-top: 1px solid var(--line);
  font-weight: 700;
}

.rodikliai-pnl .rodikliai-pnl-ratio td {
  color: var(--muted);
  font-size: var(--fs-field-label);
}

/* K-6901 (BI width, 1366-1440 windows): beside the side navigation <main>
   is ~930-1000px, not the mockups' 1344px. A sum reads as one token, a door
   keeps its words on one line, and below a 1500px window the fixed side
   columns go under the main one instead of squeezing it (Metai: the year
   table across, the bars and the months under it). Opt-in classes, because
   `.bi-columns`/`.bi-grid--2` also lay out other modules' screens. */
.rodikliai-sums td.fw-num,
.rodikliai-entered td:nth-child(2),
.bi-callout > a,
.bi-dynamics .task-meta {
  white-space: nowrap;
}

.bi-callout > a {
  flex: none;
}

/* The entered row's name is a sentence ("Investicija: <direction>"): it
   wraps, so the value and the date beside it do not have to. */
.rodikliai-entered td:first-child {
  min-width: 10rem;
  white-space: normal;
}

.rodikliai-entered td:nth-child(3) {
  white-space: nowrap;
}

@media (min-width: 721px) {
  /* Importas: the quarter card, with its entered-rows table, across; the
     revenue and competitor forms side by side under it. */
  .rodikliai-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rodikliai-entry-grid > #ketvirtis {
    grid-column: 1 / -1;
  }

  /* Metai competitors: the long sort headings wrap, and the name column is
     as wide as the five-year history folded under it, which opens there. */
  .rodikliai-competitors > thead .simple-table-sort {
    white-space: normal;
  }

  .rodikliai-competitors .bi-hist {
    min-width: 20.5rem;
  }

  .rodikliai-competitors .bi-hist-table th,
  .rodikliai-competitors .bi-hist-table td {
    padding-right: 8px;
  }

  /* K-7020: without the "Revenue by year" chart (a reader outside the
     accounting block) the year and month cards are the only child; they take
     the whole row instead of one of two tracks with the other left empty. */
  .bi-year-cols.rodikliai-year-cols--single {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 721px) and (max-width: 1499px) {
  .rodikliai-stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .rodikliai-stack > .bi-side {
    align-items: start;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  }

  /* A tile wraps to the next row before its note goes to four lines. */
  .rodikliai-stack .bi-kpis > .kpi {
    flex-basis: 12rem;
  }

  .rodikliai-sums th.fw-num {
    white-space: nowrap;
  }

  /* Revenue per employee is revenue over headcount, both beside it. */
  .rodikliai-per-employee {
    display: none;
  }

  .rodikliai-year-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rodikliai-year-side {
    display: contents;
  }

  .rodikliai-years-card {
    grid-column: 1 / -1;
    order: -1;
  }
}

/* Dinamika: the silent-customers card follows the side column in the markup
   (K-7021), and from 1500px goes back under the horizon table. The side
   column spans both rows; the second row takes whatever it is taller by, so
   no gap opens under the horizon table. */
@media (min-width: 1500px) {
  .bi-columns--dynamics.rodikliai-stack {
    grid-template-rows: auto 1fr;
    row-gap: var(--space-4);
  }

  .bi-columns--dynamics.rodikliai-stack > .bi-side {
    grid-row: span 2;
  }
}

/* === end Rodikliai (R4) === */

/* === Priminimai (P1) === */
/* K-6446 (reminders design P1): the debtor-reminder mockups' own components
   (saltiniai/priminimai-maketai/html/*.dc.html <helmet><style>, README table
   "PRIDETI (P1)"), under the mockups' class names so P2-P9 can lift markup
   as drawn. Already in the library and NOT repeated here: the dialog is
   `.leo-langas` on a real `<dialog>` (N1, its `::backdrop` is the mockups'
   `.dim`), the "⋯" menu is `.ncr-row-menu` (K-5892, native `<details>`),
   the share bar is `.sbar` (R1). Only existing tokens: the mockups' warm
   greys and tints are a color-mix of two tokens, the same way B1/R1 derive
   theirs -- no new hue. */

/* `.cnt` -- a count inside a tab ("Dėmesio 3"), a small warm pill;
   `.cnt--danger` (the mockups' `.cnt.r`) red for things waiting on a person. */
.tabs .cnt {
  background: var(--warning-bg);
  border-radius: var(--radius-pill);
  color: var(--brand-dark);
  font-size: var(--fs-field-label);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-left: 6px;
  padding: 1px 7px;
}

.tabs .cnt--danger {
  background: var(--danger-bg);
  color: var(--danger);
}

/* `.fnd` -- a decision card (Dėmesio): what happened on the left, a column
   of actions on the right; `.fnd .t` is the one-sentence finding, `.ev` the
   evidence folded under a link-coloured summary so nothing is dropped. */
.fnd {
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 10px 24px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 16px 20px;
}

.fnd-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.fnd-actions {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}

/* K-6852: a `.fnd` whose right column is an `.actions` row (receiving
   Dėmesio: Išspręsti, Atmesti and the type's door) -- the grid's `auto`
   track would take the row's one-line width, and a long door squeezed the
   body to a word per line. The row is capped and wraps at the right; the
   door's own label wraps inside it. */
.fnd > .actions {
  justify-content: flex-end;
  max-width: 15rem;
}

.fnd > .actions > a.link-button {
  text-align: right;
  white-space: normal;
}

/* K-6956: receiving Dėmesio inside the platform's <main> (928px at 1366,
   1002px at 1440) beside the 380px side column leaves a card ~480px. With
   the actions as the body's right column the title and the IBAN lines got
   ~150-250px and broke a few words per line. On a desktop the body's rows
   become the card's own grid rows: the type/date line shares the top row
   with the actions on the right, and the title, evidence and forms run the
   card's full width under them; the tighter gaps keep the tag and its
   date on one line. The phone keeps the one-column card. */
@media (min-width: 721px) {
  .bi-columns--attention .fnd {
    column-gap: 16px;
  }

  .bi-columns--attention .fnd > .fnd-body {
    display: contents;
  }

  .bi-columns--attention .fnd > .fnd-body > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .bi-columns--attention .fnd > .fnd-body > :first-child {
    gap: 4px 8px;
    grid-column: 1;
    grid-row: 1;
  }

  .bi-columns--attention .fnd > .actions {
    grid-column: 2;
    grid-row: 1;
  }

  /* The Type and Supplier selects took their longest option's width
     (~280px each) and pushed the tool row to three lines; capped, a long
     chosen value is clipped and the row is two lines. */
  .bi-columns--attention .sel select {
    max-width: 8rem;
    text-overflow: ellipsis;
  }
}

/* The side card's title at the mockup's size, so "Radinių tipai ir
   veiksmai" stays one line beside Uždaryti in the 380px column. */
.bi-columns--attention .help-banner h2 {
  font-size: 1rem;
}

.fnd .t {
  font-size: 0.9375rem;
  line-height: 1.45;
  margin: 0;
}

.ev {
  color: var(--muted);
  font-size: var(--fs-field-value);
}

.ev summary {
  color: var(--brand-dark);
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}

.ev summary::-webkit-details-marker {
  display: none;
}

.ev .kv {
  font-size: var(--fs-field-value);
  margin-top: 8px;
}

/* `.drop` -- the upload area: an icon, the title with a grey note, the
   choose button pushed to the right. The real `<input type="file">` stays
   inside it, so the form posts without JS. */
.drop {
  align-items: center;
  background: color-mix(in srgb, var(--brand-tint) 12%, var(--surface));
  border: 1.5px dashed color-mix(in srgb, var(--muted) 30%, var(--rail-bg));
  border-radius: var(--radius-lg);
  display: flex;
  gap: 16px;
  padding: 24px;
}

.drop-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.drop-text b {
  font-size: var(--fs-control);
  font-weight: 600;
}

.drop-text span {
  color: var(--muted);
  font-size: var(--fs-field-value);
}

.drop > :last-child {
  margin-left: auto;
}

/* `.tl` -- the timeline: one row per event, a coloured dot, the text and
   the time on the right. The dot is gold by default, `.m--danger` for a
   failed attempt, `.m--success` for a paid or answered one. */
.tl {
  display: flex;
  flex-direction: column;
}

.tl .i {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  padding: 12px 0;
}

.tl .i:last-child {
  border-bottom: 0;
}

.tl .m {
  background: var(--brand);
  border-radius: 50%;
  height: 10px;
  margin: 5px 0 0 5px;
  width: 10px;
}

.tl .m--danger {
  background: var(--danger);
}

.tl .m--success {
  background: var(--success);
}

/* `.sw` -- the switch, drawn on a real `<input type="checkbox">` so it posts
   like any checkbox and works with the keyboard; `.sw-row` puts the label
   and its grey note on the left, the switch on the right, and the whole
   row is the click target -- so the row also carries `.tap-target-parent`,
   which keeps the phone 44px checkbox floor (K-45) off the switch itself. */
.sw {
  appearance: none;
  background: color-mix(in srgb, var(--muted) 17%, var(--rail-bg));
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  flex: none;
  height: 24px;
  margin: 0;
  padding: 0;
  position: relative;
  width: 40px;
}

.sw::after {
  background: var(--surface);
  border-radius: 50%;
  content: "";
  height: 18px;
  left: 3px;
  position: absolute;
  top: 3px;
  width: 18px;
}

.sw:checked {
  background: var(--brand);
}

.sw:checked::after {
  left: 19px;
}

.sw:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.sw-row {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.sw-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sw-label b {
  color: color-mix(in srgb, var(--text) 55%, var(--muted));
  font-size: var(--fs-field-value);
  font-weight: 500;
}

.sw-label span {
  color: var(--muted);
  font-size: var(--fs-field-value);
}

/* `.hbar` -- a part of the whole as a 10px bar across the cell (ageing
   buckets); the fill width is the row's own data (inline `width`). The fill
   darkens with age: `.hbar--a1` 1-7 d. ... `.hbar--a4` 31+ d. in red. */
.hbar {
  align-items: center;
  display: flex;
  gap: 10px;
}

.hbar .b {
  background: var(--rail-bg);
  border-radius: 5px;
  flex: 1;
  height: 10px;
  min-width: 64px;
  overflow: hidden;
}

.hbar .b span {
  background: var(--brand);
  display: block;
  height: 100%;
}

.hbar--a1 .b span {
  background: color-mix(in srgb, var(--brand) 15%, var(--brand-tint));
}

.hbar--a2 .b span {
  background: color-mix(in srgb, var(--brand) 45%, var(--brand-tint));
}

.hbar--a3 .b span {
  background: color-mix(in srgb, var(--brand) 80%, var(--brand-tint));
}

.hbar--a4 .b span {
  background: var(--danger);
}

/* `.letter` -- a letter as the client will read it: the text keeps its own
   line breaks, `.itab` is the invoice table the `{invoice_table}`
   placeholder turns into, ruled like an e-mail table. */
.letter {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: var(--fs-control);
  line-height: 1.6;
  padding: 20px 24px;
  overflow-x: auto;
  white-space: pre-line;
}

.itab {
  border-collapse: collapse;
  margin: 4px 0;
  width: 100%;
}

.itab th,
.itab td {
  border: 1px solid color-mix(in srgb, var(--rail-bg) 94%, var(--muted));
  font-size: var(--fs-field-value);
  padding: 6px 10px;
  white-space: normal;
}

.itab th {
  background: var(--bg);
  color: color-mix(in srgb, var(--text) 55%, var(--muted));
  font-weight: 600;
  text-align: left;
}

/* The mockups' manual-letter dialog is 640px wide, narrower than the
   default `.leo-langas`. Two classes so it beats the base `.leo-langas`
   width, which sits later in this file. */
.leo-langas.leo-langas--form {
  width: min(640px, 92vw);
}

/* Phone: one column, touch targets 44px (K-45) -- the decision card's
   actions go under the text at full width, the upload button under its
   text, the switch row and the evidence fold are 44px tall. */
@media (max-width: 720px) {
  .fnd {
    grid-template-columns: minmax(0, 1fr);
  }

  .fnd-actions {
    min-width: 0;
  }

  .fnd > .actions {
    max-width: none;
  }

  .fnd-actions > *,
  .fnd-actions > .button-small.link-button {
    min-height: 44px;
  }

  .ev summary {
    align-items: center;
    display: flex;
    min-height: 44px;
  }

  .drop {
    flex-wrap: wrap;
  }

  .drop > :last-child {
    margin-left: 0;
    min-height: 48px;
    width: 100%;
  }

  .sw-row {
    min-height: 44px;
  }
}

/* === end Priminimai (P1) === */

/* === Pirkimai (T1) === */
/* K-6547 (purchasing design T1): the purchasing mockups' own components
   (saltiniai/pirkimai-maketai/html/*.dc.html <helmet><style>: `.path6`,
   `.chg`, `.rbar`, `.gate`), each on the library piece that already draws
   the same thing -- the path is the NCR bar's `.ncr-pb-stage` tiles, the
   received bar is `.progress-track`, the readiness list is the "Next step"
   `.requirement-checklist--next`, the frame is `.ncr-next`, the status
   pills are `.registry-badge` hues (purchasing/_po_status_badge.html).
   Only what those lack is added here, from existing tokens only. */

/* `.path6` -- six tiles: one row from 48rem of bar width, three columns
   below that, two on a phone. The mark and the name share a line, a grey
   note sits under them; 60px tall, not the NCR tile's 72px. */
.path6 .ncr-pb-sequence {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@container ncr-pb (max-width: 30rem) {
  .path6 .ncr-pb-sequence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container ncr-pb (min-width: 48rem) {
  .path6 .ncr-pb-sequence {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.path6 .ncr-pb-link {
  min-height: 60px;
}

.path6-head {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  min-width: 0;
}

.path6-note {
  color: var(--muted);
  font-size: 0.75rem;
}

/* `.chg` -- a supplier-confirmed quantity or price that differs from the
   ordered one (inventory rule 7); the ordered value stays beside it. */
.chg {
  background: var(--warning-bg);
  border-radius: 4px;
  color: var(--brand-dark);
  font-weight: 600;
  padding: 1px 6px;
}

/* `.rbar` -- received share of a line: a 120px `.progress-track` in teal,
   the received quantity after it (`.po-received`); full width on a phone. */
.po-received {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.progress-track.rbar {
  background: var(--rail-bg);
  flex: none;
  width: 120px;
}

.progress-track.rbar > span {
  background: var(--teal);
}

/* `.gate` -- the send-readiness rows: done (green, above), plus a check
   that blocks (red) and one that only informs (grey); `.gate-note` is the
   grey second line under a row. */
.requirement-checklist-item--blocked {
  font-weight: 600;
}

.requirement-checklist-item--blocked .requirement-checklist-mark {
  background: var(--danger-bg);
  color: var(--danger);
}

.requirement-checklist-item--waiting .requirement-checklist-mark {
  background: var(--rail-bg);
  color: var(--muted);
}

.gate-note {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
}

/* "Next step" for purchasing: the `.ncr-next` frame on the light tint the
   in-progress path tile uses. `grid-area: auto` -- the NCR card's named
   `next` area does not exist on a purchasing screen. */
.ncr-next.po-next {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
  grid-area: auto;
}

/* On a phone the path is not drawn -- Uzsakymas-390 has none; the status
   pill and "Next step" say where the order is. Said here, not left to the
   NCR bar's own phone fold. Two classes: the one-class `.ncr-pb`
   `display: flex` further down the file would win the cascade and leave an
   empty `<nav>`. The received bar takes the row's width; the frame's main
   action is 48px, the ghost one 44px (inventory rule 11). */
@media (max-width: 720px) {
  .ncr-pb.path6 {
    display: none;
  }

  .po-next .actions .button {
    min-height: 48px;
  }

  .po-next .actions .button.link-button {
    min-height: 44px;
  }

  .progress-track.rbar {
    flex: 1 1 auto;
    min-width: 64px;
    width: auto;
  }
}

/* === end Pirkimai (T1) === */

/* === Pajamavimas (J1) === */
/* K-6748 (receiving design J1): the receiving mockups' own components
   (saltiniai/pajamavimas-maketai/html/*.dc.html <helmet><style>: `.path4`,
   `.tag`, `.cf`, `.danger`, `.caution`, `.ro`, `.lf`, `.lcard`, `.grpl`,
   `.subrow`), each on the library piece that already draws the same thing
   -- the path is the purchasing path's NCR tiles, the status pills are
   `.registry-badge` hues, the signal and confidence tags are `.src`, the
   line card is `.receiving-line-card` (receiving/_rcv_path.html,
   receiving/_rcv_status_badge.html). Only what those lack is added here,
   from existing tokens only. */

/* `.path4` -- four tiles; the NCR bar already puts four in one row and two
   on a narrow bar, so only the purchasing tile's 60px height is kept. */
.path4 .ncr-pb-link {
  min-height: 60px;
}

/* `.tag` / `.cf` -- the grey `.src` tag in the signal hues: red for an
   exact duplicate, changed bank details and low confidence; amber for a
   possible duplicate, a price anomaly and a suggestion; blue for the
   mailbox and a new entity; green for learned and high confidence. Two
   classes: the one-class `.src` further down the file would otherwise win
   the cascade and draw every tag grey. */
.src.src--danger {
  background: var(--danger-bg);
  color: var(--danger);
}

.src.src--warning {
  background: var(--warning-bg);
  color: var(--brand-dark);
}

.src.src--info {
  background: var(--info-bg);
  color: var(--info);
}

.src.src--success {
  background: var(--success-bg);
  color: var(--success);
}

/* `.danger` / `.caution` -- a warning card: a light frame in the hue and a
   4px bar on the left; the exact-duplicate title is red. */
.card.card-alert--danger {
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--surface));
  border-left: 4px solid var(--danger);
}

.card-alert--danger .card-title {
  color: var(--danger);
}

.card.card-alert--caution {
  border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--surface));
  border-left: 4px solid var(--warning);
}

/* `.ro` -- the read-only note: the `.callout-*` note on the grey tint. */
.callout-neutral {
  background: color-mix(in srgb, var(--rail-bg) 60%, var(--surface));
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: var(--fs-field-value);
  line-height: 1.4;
  margin: 0;
  padding: 10px 12px;
}

/* `.lcard` / `.lf` / `.grpl` -- one line of the receipt form: six columns
   of fields under small grey group labels (Item, Quantity and price,
   Coding, Warehouse, Origin and order); a field spans 2, 3 or all six.
   The highlighted card is a line a learned suggestion filled in. */
.receiving-line-card--highlight {
  background: color-mix(in srgb, var(--brand-tint) 10%, var(--surface));
}

.line-fields {
  display: grid;
  gap: 12px 14px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.line-fields > .field {
  margin: 0;
  min-width: 0;
}

.line-fields > .line-span-2 {
  grid-column: span 2;
}

.line-fields > .line-span-3 {
  grid-column: span 3;
}

/* K-7087 (design gate K-7075): six columns need a ~1300px receipt line.
   At 1366 the line got 928px of <main>, six ~103px columns and help
   texts a word a line (up to 9 lines), the class select and the unit
   price cut off -- so below that the line is three columns (~220px).
   Keyed on the line's own width, not the window; the phone's one column
   below stays (it comes after). */
.receiving-line-shell {
  container: rcv-line / inline-size;
}

@container rcv-line (max-width: 1299px) {
  .line-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* K-7087 (design gate K-7075): the list's row actions are the mockup's
   ghost text links on one line -- Atidaryti, Redaguoti, Ištrinti in the
   danger colour. Three bordered buttons stacked a button a line made a
   draft row ~170px tall and left the supplier 84px, a word a line. */
.rcv-row-actions .rcv-row-delete,
.rcv-row-actions .rcv-row-delete:hover {
  color: var(--danger);
}

@media (min-width: 721px) {
  .po-orders .registry-table.rcv-list > thead > tr > th,
  .po-orders .registry-table.rcv-list > tbody > tr > td {
    padding-left: 6px;
    padding-right: 6px;
  }

  .rcv-list .rcv-supplier {
    min-width: 8.5rem;
  }

  .rcv-list .rcv-doc,
  .rcv-list time {
    white-space: nowrap;
  }

  .rcv-row-actions {
    width: 1%;
  }

  .rcv-row-actions > .actions {
    flex-wrap: nowrap;
    gap: 0;
  }

  .rcv-list .button-small.link-button {
    padding: 0 2px;
  }
}

/* K-7087: the receipt card's line table at 1366 (506px beside the side
   column) left the item 97px, and the class tag "Dažai / eksploatacinės
   medžiagos" fell a word a line -- the item keeps room for two (the VAT
   column no longer takes the order card's 5.5rem floor, K-7045). */
@media (min-width: 721px) {
  .po-lines-table.rcv-lines .rcv-line-item {
    min-width: 8rem;
  }
}

/* K-7087: the receipt form's head -- "Tvarkyti kaštų centrus" and
   "Atšaukti" are the mockup's small text links, so "Naujas pajamavimo
   juodraštis" keeps one line at 1366 (373px, it broke in two). */
.rcv-form-head .bi-head-actions > .link-button {
  font-size: var(--fs-field-value);
}

.line-group-label {
  color: var(--muted);
  font-size: var(--fs-field-label);
  font-weight: 600;
  grid-column: 1 / -1;
  letter-spacing: 0.06em;
  margin-top: 4px;
  text-transform: uppercase;
}

/* `.subrow` -- notes under a table row (price anomaly, stock change): no
   line between the row and its notes, the notes start at the row's text. */
.registry-table tr:has(+ .line-subrow) > td {
  border-bottom: 0;
}

.registry-table .line-subrow > td {
  padding-top: 0;
}

/* On a phone the path is not drawn -- Priemimas-390 has none; the status
   pill says where the receipt is. The line form is one column (inventory
   rule 10). */
@media (max-width: 720px) {
  .ncr-pb.path4 {
    display: none;
  }

  .line-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .line-fields > .line-span-2,
  .line-fields > .line-span-3 {
    grid-column: auto;
  }
}

/* === end Pajamavimas (J1) === */

/* === Pirkimai (T2) === */
/* K-6594 (purchasing design T2): the orders list (mockup `Uzsakymai`) on
   the header, tiles, `.sel`, `.seg` and pills already in the library. Only
   the list's own arrangement is added: four tiles in one row (two on a
   phone), the late tile's red frame, the filter row as one line, the
   Dėmesio column's items and the legend row under the table. */
.po-kpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.po-kpis > a.kpi {
  color: inherit;
  text-decoration: none;
}

.po-kpis > a.kpi:hover {
  border-color: var(--line-strong);
}

.po-kpis > .kpi--danger {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--danger-bg));
}

.registry-filter-grid.po-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* The grid's own labels are small grey uppercase captions stacked over
   their control; here the caption sits inside the `.sel` box, one line. */
.registry-filter-grid.po-toolbar > label {
  color: var(--text);
  display: inline-flex;
  font-size: var(--fs-control);
  letter-spacing: 0;
  text-transform: none;
}

.registry-filter-grid.po-toolbar > .checkbox-label {
  align-self: center;
  color: var(--muted);
  font-size: var(--fs-field-value);
  height: auto;
  margin: 0;
}

/* K-7908: `.sel select` is `width: auto`, so each spare-parts select took
   its longest category/machine name and the row ran to 1173px inside the
   946px main of a 1366 window, dropping "Clear" to a second line. Capped
   on the parts row only (other `.po-toolbar` screens keep their widths);
   the phone rule below still gives each `.sel` the full column. */
@media (min-width: 721px) {
  .po-toolbar.parts-filter-row .po-search input[type="search"] {
    width: 120px;
  }

  .po-toolbar.parts-filter-row > .sel select {
    max-width: 6.5rem;
    min-width: 0;
    text-overflow: ellipsis;
  }
}

.po-no,
.po-orders .registry-badge {
  white-space: nowrap;
}

.po-search input[type="search"] {
  background: transparent;
  border: 0;
  height: 100%;
  padding: 0;
  width: 220px;
}

.po-orders {
  padding: 8px 12px;
}

/* K-6774: the mockup's `.t2` rows -- 13px text, 9px 12px cells -- and
   "Kas perkama" cut at two lines (the full name stays in its title; one
   line does not fit beside the menu at 1440). Wider than the phone only:
   there the rows are cards. */
@media (min-width: 721px) {
  .po-orders .registry-table > thead > tr > th,
  .po-orders .registry-table > tbody > tr > td {
    padding: 9px 12px;
  }

  .po-orders .registry-table > tbody > tr > td {
    font-size: var(--fs-field-value);
  }

  .po-orders .po-item {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
  }
}

/* K-6651: the list's "Gauta" bar -- narrower than the card's 120px so all
   nine columns fit a 1440px window beside the menu; green once complete. */
.po-orders .po-received {
  white-space: nowrap;
}

.po-orders .progress-track.rbar {
  width: 72px;
}

.progress-track.rbar.rbar--done > span {
  background: var(--success);
}

/* K-6894 (design gate on K-6788, mockup `Kastu-centrai`): at 1440 the
   table sits in a 564px card beside the form panel and needed 585px -- the
   nowrap "Naudojimas pajamavimuose" head held its column at 175px, the
   actions got the leftover and fell one button per line, "Patvirtinti" cut
   at the card's edge. Here the "Reikia finansų peržiūros" chip may wrap
   (the heads may not -- K-6955) and the cells pad 8px a side; the actions
   column keeps
   exactly two buttons a line (180px, Redaguoti + Patvirtinti) and no more,
   so the rest goes to the other three columns. */
@media (min-width: 721px) {
  .registry-table.cost-centres .registry-badge {
    white-space: normal;
  }

  .registry-table.cost-centres .cost-centres-actions {
    width: 1%;
  }

  .registry-table.cost-centres > thead > tr > th,
  .registry-table.cost-centres > tbody > tr > td {
    padding-left: 8px;
    padding-right: 8px;
  }

  .registry-table.cost-centres .cost-centres-actions > .actions {
    gap: 4px 6px;
    min-width: 11.25rem;
  }
}

/* K-6955 (design gate K-6947): at 1366 the same table had only 490px and
   needed 511 -- "Naudojimas pajamavimuose" broke, the review chip fell a
   word a line, "Patvirtinti" cut at the card's edge. Below 1700 this
   screen's form panel is 300px (not Dinamika's 340px, which stays), and
   below 1440 the actions go a button a line, so the one-line head and the
   two-line chip fit; from 1440 they keep two a line. */
@media (min-width: 721px) and (max-width: 1699px) {
  .bi-columns--cost-centres {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

@media (min-width: 721px) and (max-width: 1439px) {
  .registry-table.cost-centres .cost-centres-actions > .actions {
    min-width: 0;
  }
}

.po-attn {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: var(--fs-field-value);
  gap: 6px;
  margin-right: 8px;
}

.po-attn.dn {
  color: var(--danger);
}

.po-legend {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 12px;
}

.po-legend > .actions {
  margin: 0;
}

@media (max-width: 720px) {
  .po-kpis {
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .po-toolbar > .sel,
  .po-search input[type="search"] {
    width: 100%;
  }

  .po-toolbar > .sel,
  .po-toolbar .link-button,
  .registry-filter-grid.po-toolbar > .checkbox-label {
    min-height: 44px;
  }

  /* K-7050: `.sel select` is `width: auto`, so a long supplier label
     (Zodynas) pushed the filter row past a 390px window; the select now
     shrinks inside its full-width `.sel` and clips its text instead. */
  .po-toolbar > .sel,
  .po-toolbar > .sel select {
    max-width: 100%;
    min-width: 0;
  }

  .po-head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .po-head .bi-head-actions {
    flex-wrap: wrap;
  }

  .po-head .bi-head-actions .button:not(.button-secondary) {
    min-height: 48px;
  }

  .po-orders {
    padding: 0;
  }
}

/* === end Pirkimai (T2) === */

/* === Pirkimai (T5) === */
/* K-6597 (purchasing design T5, mockup `Naujas-PO`): the order form. The
   header fields on the mockup's four columns (the supplier across two), the
   lines as a compact `.registry-table` with the controls in its cells, the
   secondary line fields behind a "+ ..." disclosure, and the two notes side
   by side on the plain `.form-grid`. Tokens only. */
.po-form > .card {
  margin-bottom: var(--space-4);
}

.form-grid.po-form-grid {
  column-gap: 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.po-form-grid .po-span-2 {
  grid-column: span 2;
}

.po-field-label {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
}

.po-card-note {
  font-size: 0.75rem;
}

.po-lines td {
  padding: 10px 8px;
  vertical-align: top;
}

.po-lines .field {
  margin: 0;
}

.po-lines td > .field input,
.po-lines td > .field select {
  width: 100%;
}

/* K-6661: the columns fit the 1440 window's content column (~900px);
   K-6902: the supplier code is the item's second line (its head the item
   head's second line), so the eight left fit the 1366 one (~830px). */
.po-lines .po-line-item {
  min-width: 13rem;
}

.po-lines-head-sub {
  display: block;
  font-weight: 400;
}

.po-lines .po-line-class {
  min-width: 8rem;
}

.po-lines .po-line-quantity {
  min-width: 5.5rem;
}

.po-lines .po-line-price {
  min-width: 7rem;
}

.po-lines .po-line-unit {
  min-width: 4.5rem;
}

.po-line-item {
  display: grid;
  gap: var(--space-2);
}

.po-line-item textarea {
  height: var(--control-h);
  min-height: var(--control-h);
  resize: vertical;
}

.po-line-no,
.po-line-total,
.po-lines-sum {
  white-space: nowrap;
}

.po-line-no {
  padding-top: 20px;
}

.po-line-total,
.po-lines-sum {
  padding-top: 20px;
  text-align: right;
}

.po-lines th.num {
  text-align: right;
}

.po-lines-foot td {
  border-bottom: 0;
  border-top: 1px solid var(--line-strong);
  font-weight: 600;
}

.po-line-sub {
  align-items: baseline;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: 0 var(--space-2);
}

.po-line-more > summary {
  color: var(--brand-dark);
  cursor: pointer;
  list-style: none;
}

.po-line-more > summary::-webkit-details-marker {
  display: none;
}

.po-line-more[open] {
  display: grid;
  flex-basis: 100%;
  gap: var(--space-2);
}

.po-form-actions {
  align-items: center;
  gap: var(--space-4);
}

/* K-6774: the lines table scrolls inside its wrap at 1024; the wrap is the
   containing block of the header's visually hidden label, so that label no
   longer widens the page. */
.po-form .registry-table-wrap {
  position: relative;
}

/* K-6774: tablet (1024) -- the header fields on two columns, so the date
   field is not cut. */
@media (max-width: 1100px) {
  .form-grid.po-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.po-line-delete label {
  align-items: center;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  gap: 4px;
  margin-top: 0;
  min-height: var(--control-h);
}

/* Phone (inventory rule 11): one column, the lines as `rt-cards` cards,
   the main action 48px. */
@media (max-width: 720px) {
  .form-grid.po-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .po-form-grid .po-span-2 {
    grid-column: auto;
  }

  .po-lines .po-line-item,
  .po-lines .po-line-class,
  .po-lines .po-line-price,
  .po-lines .po-line-quantity,
  .po-lines .po-line-unit {
    min-width: 0;
  }

  .po-line-no,
  .po-line-total,
  .po-lines-sum {
    padding-top: var(--space-2);
  }

  /* The foot row is one card: "+ Line" and the order total, no blanks. */
  .registry-table.po-lines .po-lines-foot > td:empty {
    display: none;
  }

  .registry-table.po-lines .po-lines-foot > td {
    border-top: 0;
  }

  .po-line-delete label,
  .po-lines-foot .link-button {
    min-height: 44px;
  }

  /* The card has no column heads, so the supplier code carries its own. */
  .po-line-code::before {
    color: var(--muted);
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
  }

  .po-line-more > summary {
    align-items: center;
    display: flex;
    min-height: 44px;
  }

  .po-form-actions .button {
    min-height: 48px;
  }

  .po-form-actions .link-button {
    min-height: 44px;
  }
}

/* === end Pirkimai (T5) === */

/* === Pirkimai (T3) === */
/* K-6595 (purchasing design T3, mockups `Uzsakymas` / `Uzsakymas-390`):
   the order card's two columns -- lines, receipts and findings on the left,
   a right column with "Next step" on top, then the order facts, notes,
   history and the terminal actions. The right column is 380px while the
   left one still gets 41rem (the eight line columns); narrower, it gives
   way down to 300px (~30%, the mockup's share at a 1440px window), so
   there the lines table shows every column (K-6621).
   K-6902: the columns follow the content width, not the window -- below a
   1100px `.po-card-frame` (a 1366 or 1440 window with both menus) one
   column with "Next step" first, the lines across the full width and the
   order facts under them, as Uzsakymas-390 draws it. Tokens only. */
.po-card-frame {
  container: po-card / inline-size;
}

.po-card-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-areas:
    "main next"
    "main side";
  grid-template-columns: minmax(0, 1fr) clamp(300px, 100% - 41rem, 380px);
  grid-template-rows: auto 1fr;
  margin-top: var(--space-6);
}

.po-card-layout > .po-next {
  grid-area: next;
}

.po-card-main,
.po-card-side {
  display: flex;
  flex-direction: column;
  gap: var(--gap-layout);
  min-width: 0;
}

.po-card-main {
  grid-area: main;
}

.po-card-side {
  grid-area: side;
}

/* The received quantity stays on one line beside its bar; a line total and
   the order total are never broken (K-6902). */
.po-received > .task-meta,
.po-lines-table td:last-child {
  white-space: nowrap;
}

/* K-6621: the eight line columns fit the two-column card at a 1440px
   window, the item name no narrower than two words -- 6px side padding,
   heads that may take two lines ("Conf. unit price") and a 48px received
   bar, in this table only.
   Desktop only: the phone card keeps its own padding and full-width bar. */
@media (min-width: 721px) {
  .po-lines-table th,
  .po-lines-table td {
    padding-left: 6px;
    padding-right: 6px;
  }

  .po-lines-table th {
    white-space: normal;
  }

  /* K-6980: on a draft the confirmed price cells hold only a dash, so the
     column would shrink until "Conf. unit price" takes three lines.
     K-7045: the order card only -- the receipt card's sixth column is VAT. */
  .po-card-frame .po-lines-table th:nth-child(6) {
    min-width: 5.5rem;
  }

  .po-lines-table .progress-track.rbar {
    width: 48px;
  }

  /* K-6902: the totals on the right; the order total spans the received
     column too, so its currency does not widen the line totals' column. */
  .po-lines-table th:last-child,
  .po-lines-table td:last-child {
    text-align: right;
  }
}

/* New revision / Cancel under the right column, right-aligned ghost links;
   each opens its explanation and the confirming button in place. K-6902:
   the fold takes the column's width and only its link sits on the right,
   so the confirming button starts inside the column instead of hanging
   past its edge from a summary-wide box. */
.po-card-actions {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.po-card-actions > details > summary {
  display: flex;
  justify-content: flex-end;
}

@container po-card (max-width: 1099px) {
  .po-card-layout {
    grid-template-areas:
      "next"
      "main"
      "side";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  /* Across the full width the heads keep one line again (K-6902). */
  .po-lines-table th {
    white-space: nowrap;
  }
}

/* K-7043: the receipt card reuses this layout without the `po-card` frame
   (its Priemimas board keeps two columns in a 1440 window), so it folds on
   the window width as before K-6902 -- without this its main column shrank
   to 52px beside the 300px Next step on a phone. Inside the frame the
   container query above has already folded it. */
@media (max-width: 1099px) {
  .po-card-layout {
    grid-template-areas:
      "next"
      "main"
      "side";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
}

@media (max-width: 720px) {
  .po-card-layout,
  .po-card-main,
  .po-card-side {
    gap: 14px;
  }

  .po-card-actions > details > summary {
    justify-content: flex-start;
  }

  /* The ghost links (Next step's "Close", the lines card's "Supplier PDF",
     the send dialog's close and PDF "Preview", K-6716) keep the 44px phone
     target (inventory rule 11). K-7043: so do the receiving ghost buttons
     -- a finding's Dismiss / Open supplier compliance, a cost centre row's
     Edit / Reject / Archive, the price history's Clear and the confirm
     dialog's close (32-40px). K-7087: and the list's row actions. */
  .po-next .actions .link-button,
  .po-card-main .card-heading > .link-button,
  .fnd .actions.phone-stack > .link-button,
  .cost-centres-actions .link-button,
  .rcv-row-actions .link-button,
  .po-fg-s4.phone-stack > .link-button,
  .leo-langas [data-po-send-close],
  .leo-langas [data-rcv-confirm-close],
  .po-send-pdf > .link-button {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  /* K-7028: the confirm dialog's icon-only X is 16px + padding (42px wide);
     it gets the 44px width too. */
  .leo-langas .button-small[data-rcv-confirm-close] {
    justify-content: center;
    min-width: 44px;
  }

  /* The lines total in the phone card: no bare column labels for the
     blank cells, the unlabeled "Total excl. VAT" reads as its heading
     (the K-6453 affected-orders footer does the same). */
  .registry-table.rt-cards.po-lines-table > tfoot > tr > td:empty {
    display: none;
  }

  .registry-table.rt-cards.po-lines-table > tfoot > tr > td[data-label=""]::before {
    content: none;
  }
}

/* === end Pirkimai (T3) === */

/* === Pirkimai (T7) === */
/* K-6649 (purchasing design T7): the supplier card (mockup `Tiekejas`) and
   the type-defaults form. The cards are the mockup's left column, 940px at
   most; its right column (Veikla / Banko rekvizitai) has no data yet and is
   not drawn. `.po-fg` is the mockup's four-column field grid with 2- and
   4-wide cells; labels are sentence case as drawn, the "i" toggle after
   them. One column on a phone. */
.po-supplier-main {
  display: flex;
  flex-direction: column;
  gap: var(--gap-layout);
  max-width: 940px;
  min-width: 0;
}

.po-supplier-main > .card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.po-supplier-main > .card > .card-title,
.po-supplier-main > .card > .card-subtitle {
  margin: 0;
}

.po-fg {
  display: grid;
  gap: var(--space-4) 20px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* K-6889: in a half-width card (Pajamavimas > Nustatymai) four columns
   broke the short labels onto two lines at 1440 px; the mockup keeps two
   fields a row there. The phone rule below still folds it to one column. */
.po-fg--half {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.po-fg > .field {
  gap: 6px;
  margin: 0;
  min-width: 0;
}

/* K-7218: the register form's employee list is a fieldset named by its
   legend; it reads as one more label of this form, not the muted one. */
.po-fg > .field > label:not(.checkbox-label),
.po-fg > .field > legend {
  color: var(--text);
  font-size: var(--fs-field-value);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.po-fg-s2 {
  grid-column: span 2;
}

.po-fg-s4 {
  grid-column: 1 / -1;
}

.po-fg-s4 > .po-fg {
  margin-top: var(--space-4);
}

.po-vies {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: var(--control-h);
}

@media (max-width: 720px) {
  .po-fg {
    grid-template-columns: minmax(0, 1fr);
  }

  .po-fg-s2 {
    grid-column: auto;
  }

  .po-vies .link-button,
  .po-head .bi-head-actions .link-button {
    min-height: 44px;
  }

  .po-fg-s4 > summary {
    box-sizing: border-box;
    min-height: 44px;
    padding: 14px 0;
  }

  /* The "i" keeps a 44px target without growing the label row. */
  .po-fg .field-help-toggle {
    align-items: center;
    justify-content: center;
    margin: -13px -10px;
    min-height: 44px;
    min-width: 44px;
  }
}

/* K-6808: the card's right column, 380px beside the form as the mockup
   draws it; under the form below 1100px. `.po-mrow` is the mockup's `.mrow`:
   label left, figure right, a hairline between rows. */
.po-supplier-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: minmax(0, 1fr);
}

/* The 380px column exists only when the card has its Activity aside (edit, not create). */
.po-supplier-layout--side {
  grid-template-columns: minmax(0, 1fr) 380px;
}

.po-supplier-layout > form {
  min-width: 0;
}

.po-supplier-side {
  margin: 0;
}

.po-supplier-side > .card-title {
  margin: 0 0 var(--space-2);
}

.po-mrow {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 44px;
  padding: 12px 0;
}

.po-mrow:last-child {
  border-bottom: 0;
}

@media (max-width: 1100px) {
  .po-supplier-layout--side {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* === end Pirkimai (T7) === */

/* === Pirkimai (T6) === */
/* K-6717 (purchasing design T6, mockups `Patvirtinimas` /
   `Siuntimas-neaiskus`): two columns, one 460px wide -- the supplier's
   document on the left of the confirmation form; the decision on the right
   of the facts when a send is uncertain. One column below 1100px. Tokens
   only; the frame is `.ncr-next.po-next`, the marks `.chg` (T1). */
.po-review-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: 460px minmax(0, 1fr);
  margin-top: var(--space-6);
}

.po-review-layout--decide {
  grid-template-columns: minmax(0, 1fr) 460px;
}

.po-review-layout > .card,
.po-review-stack > .card {
  margin: 0;
}

.po-review-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap-layout);
  min-width: 0;
}

/* The values the AI read, as marks down the document. */
.po-doc-marks {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A value the AI filled in, or a confirmed value that differs from the
   ordered one (inventory rule 7): the input on the `.chg` tint. Two
   pseudo-classes: the global `input:not(...):not(...)` surface rule must
   not win. */
.po-ai-value input:not([type="hidden"]):not([type="button"]) {
  background: var(--warning-bg);
}

/* The card's title and its note on the left, the "AI suggestion" pill on
   the right, as the mockup's card head. */
.po-review-layout .card-heading > div {
  flex: 1 1 20rem;
  min-width: 0;
}

.po-review-layout .card-heading {
  align-items: flex-start;
  flex-wrap: nowrap;
}

.po-review-layout .card-heading > .registry-badge {
  flex: none;
  white-space: nowrap;
}

/* The differences, listed under the lines; nothing differs -- no box. */
.po-deltas {
  padding-left: 28px;
}

.po-deltas:empty {
  display: none;
}

.po-review-actions {
  justify-content: flex-end;
}

.po-blocked-list {
  line-height: 1.8;
  margin: 0;
  padding-left: 18px;
}

/* The two outcomes as cards on the frame's tint, the radio beside a bold
   name and what it does in grey (`.gate-note`). */
.po-outcomes {
  border: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

/* `.checkbox-label` on the element: a label wrapping its own radio, the
   form-label token guard (calculations/test_form_label_tokens.py) knows it;
   its top margin is dropped, the fieldset's gap spaces the cards. */
.po-outcome {
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
}

.po-outcome b {
  font-weight: 500;
}

/* The radio keeps its own size on a phone too -- the whole card is the
   44px target. */
.po-outcome input[type="radio"] {
  flex: none;
  margin: 0.15rem 0 0;
  min-height: 0;
  width: auto;
}

@media (max-width: 1100px) {
  .po-review-layout,
  .po-review-layout--decide {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .po-review-layout,
  .po-review-stack {
    gap: 14px;
  }

  .po-outcome {
    min-height: 44px;
  }

  /* The card is also a `.checkbox-label`, whose phone rule further down
     (`padding: 0.75rem 0`) would win on source order and glue the radio and
     text to the frame; the doubled class keeps the card's side padding. */
  .checkbox-label.po-outcome {
    padding: 12px 14px;
  }

  .po-review-actions > button,
  .po-review-actions > .button {
    min-height: 48px;
    width: 100%;
  }

  .po-review-actions > .link-button {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
}

/* === end Pirkimai (T6) === */

/* === People (Z1) === */
/* K-6880 (people design Z1): the account and hire-wizard mockups' own
   components (saltiniai/paskyros-priemimas-maketai/html/*.dc.html
   <helmet><style>), each on the library piece that already draws the same
   thing -- the radio card is `.po-outcome`, the "what they will get" list
   is `.requirement-checklist--next`, the numbered section is
   `.ncr-form-section-number`, the vertical wizard is the hire wizard's
   `.hire-steps`, the PIN and the sign-in link are `.one-time-secret`, the
   three-column form is `.form-grid`. Only what those lack is added here,
   from existing tokens only. */

/* The person card's `data-card-tabs` wrapper (strip, hiring status and
   form): it exists only so card-tabs.js reaches the strip's links, so it
   adds no box and its children keep `.page`'s grid gap. */
.person-card-tabs {
  display: contents;
}

/* K-9278: `display: contents` takes the wrapper out of the tree the `.page > *`
   selector sees, so its children need the same `min-width: 0` or long text widens the grid. */
.person-card-tabs > * {
  min-width: 0;
}

/* `.strip` -- five facts in one card, a hairline between them: a grey
   label, the value, a grey note under it. */
.summary-strip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
}

.summary-strip > div {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 18px;
}

.summary-strip > div:last-child {
  border-right: 0;
}

.summary-strip-label,
.summary-strip-note {
  color: var(--muted);
  font-size: 0.75rem;
}

.summary-strip-value {
  font-size: var(--fs-control);
  font-weight: 600;
}

/* `.vst` -- the hire wizard's steps as a vertical list in a card: a 24px
   round mark, the step name and a grey hint under it. Done is green,
   skipped amber, the open step is outlined in brand, a step not reachable
   yet is greyed out. */
.hire-steps.hire-steps--vertical {
  margin: 0;
}

.hire-steps--vertical .hire-steps-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0;
  padding: 10px;
}

.hire-steps--vertical .hire-step {
  background: transparent;
  border-radius: var(--radius-md);
  display: block;
}

.hire-steps--vertical .hire-step > a,
.hire-steps--vertical .hire-step > span {
  align-items: center;
  color: var(--text);
  display: grid;
  font-size: var(--fs-control);
  gap: 10px;
  grid-template-columns: 24px minmax(0, 1fr);
  padding: 9px 10px;
}

.hire-step-mark {
  align-items: center;
  background: var(--rail-bg);
  border-radius: 50%;
  color: var(--muted);
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 600;
  height: 24px;
  justify-content: center;
  width: 24px;
}

.hire-step-hint {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  margin-top: 1px;
}

.hire-steps--vertical .hire-step.is-done .hire-step-mark {
  background: var(--success);
  color: var(--surface);
}

.hire-steps--vertical .hire-step.is-skipped .hire-step-mark {
  background: var(--warning-bg);
  color: var(--brand-dark);
}

.hire-steps--vertical .hire-step.is-current {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
  box-shadow: inset 0 0 0 1.5px var(--brand);
}

.hire-steps--vertical .hire-step.is-current > a,
.hire-steps--vertical .hire-step.is-current > span {
  color: var(--text);
  font-weight: 600;
}

.hire-steps--vertical .hire-step.is-current .hire-step-mark {
  background: var(--brand);
  color: var(--surface);
}

.hire-steps--vertical .hire-step.is-off > a,
.hire-steps--vertical .hire-step.is-off > span {
  color: color-mix(in srgb, var(--muted) 50%, var(--surface));
}

/* `.opt` + `.rad` -- a radio card: the `.po-outcome` label with a bold
   title and a grey line; the chosen card gets the 2px brand frame on the
   light warm tint. `.cb` -- the same native control as a checkbox. Both
   are real inputs in the brand colour, so a form works without JS. */
.po-outcome.po-outcome--pick {
  box-sizing: border-box;
  gap: 12px;
  min-width: 0;
}

.po-outcome--pick b {
  display: block;
  font-size: var(--fs-control);
  font-weight: 600;
}

.po-outcome--pick small {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
  margin-top: 2px;
}

.po-outcome.po-outcome--pick:has(input:checked) {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
  border: 2px solid var(--brand);
  padding: 11px 13px;
}

input.brand-check:is([type="radio"], [type="checkbox"]) {
  accent-color: var(--brand);
  flex: none;
  height: 18px;
  margin: 1px 0 0;
  min-height: 0;
  width: 18px;
}

/* `.rr` -- a fact row: a 24px mark, a bold name with a grey line under it,
   and a value or control on the right; `--plain` drops the mark. */
.mark-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  padding: 11px 0;
}

.mark-row:last-child {
  border-bottom: 0;
}

.mark-row.mark-row--plain {
  grid-template-columns: minmax(0, 1fr) auto;
}

.mark-row b {
  font-size: var(--fs-control);
  font-weight: 600;
}

.mark-row small {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  line-height: 1.35;
  margin-top: 2px;
}

/* `.gl` -- "What they will get": the "Next step" checklist with a hairline
   between rows, a 20px mark, a bold name and a grey `.gate-note`. */
.requirement-checklist--next.requirement-checklist--gain {
  font-size: var(--fs-field-value);
  gap: 0;
  margin: 0;
}

.requirement-checklist--gain .requirement-checklist-item {
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
  line-height: 1.4;
  padding: 10px 0;
}

.requirement-checklist--gain .requirement-checklist-item:last-child {
  border-bottom: 0;
}

.requirement-checklist--gain .requirement-checklist-mark {
  font-size: var(--fs-field-label);
  font-weight: 600;
  height: 20px;
  width: 20px;
}

.requirement-checklist--gain b {
  display: block;
  font-weight: 600;
}

/* `.savebar` -- the dark save bar that shows once something is changed:
   an amber dot, what changed, then "Undo" and "Save" on the right. It
   stays in view at the bottom of a long card. */
.save-bar {
  align-items: center;
  background: var(--text);
  border-radius: var(--radius-lg);
  bottom: var(--space-4);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--text) 18%, transparent);
  color: var(--surface);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-control);
  gap: 12px;
  padding: 12px 16px 12px 20px;
  position: sticky;
  z-index: 2;
}

.save-bar-dot {
  background: color-mix(in srgb, var(--warning) 45%, var(--warning-bg));
  border-radius: 50%;
  flex: none;
  height: 8px;
  width: 8px;
}

.save-bar-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.save-bar .link-button {
  color: color-mix(in srgb, var(--surface) 80%, var(--muted));
}

/* K-7502: above 720px the note button (`.feedback-fab`) is fixed 16px off
   the same bottom-right corner the stuck bar's actions end in, and covered
   "Undo"/"Save" on every screen with a save bar. The stuck bar stops one
   16px step above the button's footprint (its 16px offset plus at most a
   control's height) -- the same 72px `.palydovas` stacks at. At 720px and
   below the button sits in the topbar and the bar keeps its 16px. */
@media (min-width: 721px) {
  .save-bar {
    bottom: calc(var(--space-4) * 2 + var(--control-h));
  }

  /* K-7944: in the gama window `.palydovas` (320px wide, fixed 72px up the
     same corner) covered "Undo"/"Save" at that 72px. The bar moves, not the
     companion: the companion is anchored to the note button and moving it
     would pull that pair apart on every screen, while the bar only exists
     on screens with a form. It stops one more step above the companion's
     collapsed summary (at most a control's height). `:where()` keeps this
     at `.save-bar`'s own specificity; it wins here only by coming later. */
  :where(body:has(.palydovas)) .save-bar {
    bottom: calc(var(--space-4) * 3 + var(--control-h) * 2);
  }

  /* K-8026: opened, the companion grows up from its 72px to at most 33vh
     (its `max-height`) and covered the bar again. The bar stops one 16px
     step above that ceiling; collapsed it keeps the rule above. */
  :where(body:has(.palydovas[open])) .save-bar {
    bottom: calc(var(--space-4) * 3 + var(--control-h) + 33vh);
  }
}

/* `.chip` -- a list filter as a pill with its count; `--on` is the chosen
   one (dark), `--warn` the one that needs attention (amber). */
.filter-chip {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  box-sizing: border-box;
  color: var(--text);
  display: inline-flex;
  font-size: var(--fs-field-value);
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  text-decoration: none;
  white-space: nowrap;
}

.filter-chip b {
  color: var(--text);
  font-weight: 600;
}

.filter-chip.filter-chip--on {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}

.filter-chip.filter-chip--on b {
  color: var(--surface);
}

.filter-chip.filter-chip--warn {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
  border-color: color-mix(in srgb, var(--warning) 45%, var(--surface));
  color: var(--brand-dark);
}

/* K-7282 (Detalės D1): the part list -- a 40px main-photo thumbnail beside
   the name with the category under it, the ticked row's tint, and the dark
   `.save-bar` that appears once a row is ticked and counts the ticked boxes
   (CSS counter, as `.hf-bulk`). */
.part-list {
  counter-reset: part-selected;
}

.part-list input[name="part"]:checked {
  counter-increment: part-selected;
}

.part-list .registry-table > tbody > tr:has(input[name="part"]:checked) > td {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
}

.part-list-name {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.part-list-thumb {
  background: var(--rail-bg);
  border-radius: var(--radius-md);
  flex: none;
  height: 40px;
  object-fit: cover;
  width: 40px;
}

.part-list .registry-table code {
  white-space: nowrap;
}

.part-list .registry-table .num {
  text-align: right;
}

.part-list-name a {
  color: var(--text);
  text-decoration: none;
}

.part-list-name b {
  font-weight: 600;
}

.part-list-name small {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
}

.part-list-bulk {
  display: none;
  margin-top: var(--space-4);
}

.part-list:has(input[name="part"]:checked) .part-list-bulk {
  display: flex;
}

.part-list-bulk-count::after {
  content: " " counter(part-selected);
  font-weight: 600;
}

/* K-7283 (Detalės D2, mockup `D-Detale`): the part card -- Gallery (2x2
   square tiles, the last one opening the upload form across both columns)
   and QR code in a 300px column, the rest stacked beside it; one column
   under 900px. "Add supplier" sits in the Suppliers heading and opens the
   form under it. The supplier and "seen" cells carry a muted second line. */
.part-head,
.part-head .bi-head-actions {
  flex-wrap: wrap;
}

.part-head .bi-head-actions {
  flex-shrink: 1;
  min-width: 0;
}

.part-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 12px;
}

.part-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: 300px minmax(0, 1fr);
}

.part-layout-side,
.part-layout-main {
  display: grid;
  gap: var(--gap-layout);
  min-width: 0;
}

.part-gallery {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.part-gallery-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  min-width: 0;
}

.part-gallery-thumb,
.part-gallery-upload > summary {
  align-items: flex-end;
  aspect-ratio: 1;
  background: var(--rail-bg);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  color: var(--muted);
  display: flex;
  font-size: 0.75rem;
  overflow: hidden;
  padding: 6px;
  position: relative;
  text-decoration: none;
}

.part-gallery-thumb img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.part-gallery-thumb span {
  background: var(--surface);
  border-radius: 4px;
  padding: 0 4px;
  position: relative;
}

.part-gallery-tile figcaption {
  display: grid;
  font-size: 0.75rem;
  min-width: 0;
}

.part-gallery-tile figcaption strong {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.part-gallery-tile figcaption small {
  color: var(--muted);
}

.part-gallery-actions {
  display: flex;
  flex-wrap: wrap;
}

.part-gallery-actions form {
  margin: 0;
}

.part-gallery-actions .link-button {
  padding: 0 6px 0 0;
  text-align: left;
  white-space: normal;
}

.part-gallery-upload > summary {
  cursor: pointer;
  list-style: none;
}

.part-gallery-upload[open] {
  grid-column: 1 / -1;
}

.part-gallery-upload[open] > summary {
  aspect-ratio: auto;
  margin-bottom: var(--space-2);
}

.part-gallery-upload .form-grid {
  grid-template-columns: minmax(0, 1fr);
}

.part-qr-url {
  overflow-wrap: anywhere;
}

.part-qr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.part-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
}

.part-supplier-add[open] {
  flex-basis: 100%;
}

.part-supplier-add > summary.button-small.link-button {
  display: flex;
  list-style: none;
  margin-left: auto;
  width: max-content;
}

/* Chrome lays a closed <details>'s content out (hidden, not removed), so
   the form measured wider than <main> beside the heading. */
.part-supplier-add:not([open]) > form,
.part-gallery-upload:not([open]) > form {
  display: none;
}

.part-suppliers .registry-table th,
.part-suppliers .registry-table td {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

/* K-7461: the related purchase orders' quantity and unit price align the same way. */
.part-suppliers .registry-table .num,
.part-orders .registry-table .num {
  text-align: right;
}

.part-suppliers .registry-table th small,
.part-suppliers .registry-table td small {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
}

.part-suppliers .registry-table td b {
  font-weight: 600;
}

@media (max-width: 900px) {
  .part-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* K-7494: fold by `<main>`'s width, as `.investigation-layout` does. */
.page:has(> .part-layout) {
  container: detail-columns / inline-size;
}

@container detail-columns (max-width: 799px) {
  .part-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* K-7290 (Atitiktis A3, mockup A-Sertifikatas): a radio field drawn as a
   row of `.filter-chip` pills -- the label is the chip and the checked one
   takes `--on`'s dark look by itself, so it stays one form field that works
   without JavaScript. The radio stays inside for keyboard and screen
   readers, visually hidden; the chip carries the focus ring. */
.chip-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-radios .filter-chip {
  cursor: pointer;
  position: relative;
}

.chip-radios .filter-chip:has(input:checked) {
  background: var(--text);
  border-color: var(--text);
  color: var(--surface);
}

.chip-radios .filter-chip:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.chip-radios .filter-chip input[type="radio"] {
  height: 1px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}

/* The same mockup's amber note above a form: a field's own spacing below it. */
.form-card > .callout-warning {
  margin-bottom: 1rem;
}

/* K-7289 (Atitiktis A2, mockup A-Pack): the pack's materials as a ticked
   list -- the name, the default supplier and certificates under it -- and
   "Selected: N" beside the button, counted by CSS (as `.part-list`). */
.compliance-pack {
  counter-reset: pack-selected;
}

.compliance-pack input[name="materials"]:checked {
  counter-increment: pack-selected;
}

.compliance-pack-materials .checkbox-label {
  align-items: flex-start;
  margin-top: 0;
}

.compliance-pack-count::after {
  content: " " counter(pack-selected);
  font-weight: 600;
}

/* A-Tiekejai: the supplier picker and "Watch supplier" on one line in the
   card's heading -- the picker takes its own width, not the form's, and
   the pair still wraps on a narrow screen. A long supplier name is capped
   (K-7517: 375px at 390px scrolled the page sideways and pushed the button
   onto a second line at 1366px); 15rem keeps the pair on one line there. */
.compliance-watch select {
  width: auto;
  max-width: min(100%, 15rem);
}

/* `.prog` -- the seven hire steps as small segments beside a list row:
   green done, amber skipped, brand the open one. `.mstep` -- the same
   segments across the phone wizard's top, 4px high. */
.step-dots {
  display: inline-flex;
  gap: 2px;
  vertical-align: middle;
}

.step-dots > span {
  background: var(--rail-bg);
  border-radius: 2px;
  display: block;
  height: 6px;
  width: 10px;
}

.step-dots > span.is-done {
  background: var(--success);
}

.step-dots > span.is-skipped {
  background: color-mix(in srgb, var(--warning) 45%, var(--warning-bg));
}

.step-dots > span.is-current {
  background: var(--brand);
}

.step-dots.step-dots--bar {
  display: flex;
  gap: 4px;
}

.step-dots--bar > span {
  flex: 1;
  height: 4px;
  width: auto;
}

/* K-6997 (design gate K-6979): the people list (accounts/people.html) at
   1366/1440 showed the Status and Manage columns cut off inside the card.
   The e-mail under the name was one unbreakable 14px line (~280px for
   `mindaugas.vasiliauskas@...`), so the first column never went below
   ~340px and squeezed "Place in the company" to a word per line. As the
   mockup (Paskyros) draws it: the lines under the cell text at 12px, the
   e-mail cut with an ellipsis (whole address in `title`), the place kept
   wide enough for a department name on at most two lines, the hire
   progress link on one line, 8px beside each cell instead of the list's
   12px (`.po-orders`, whose selector this one has to outweigh). Wide only -- the phone cards (`rt-cards`,
   <=720px) keep the full address. */
@media (min-width: 721px) {
  .registry-table.registry-table--people > thead > tr > th,
  .registry-table.registry-table--people > tbody > tr > td {
    padding-left: 8px;
    padding-right: 8px;
  }

  .registry-table--people td small {
    font-size: 0.75rem;
  }

  .registry-table--people .people-email {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .registry-table--people .people-place {
    min-width: 10rem;
  }

  .registry-table--people .registry-status-cell a {
    white-space: nowrap;
  }
}

/* K-7757 (design gate K-7752): the positions list (administravimas/
   position_list.html) shares `registry-table--people`, but its place cell
   is `td.position-place`, which the people list's 10rem `.people-place`
   rule never reaches. This adds an 8rem minimum to that cell so a
   department name stays on at most two lines at 1366, with the other
   columns on their nowrap minimums. Wide only, like K-6997. */
@media (min-width: 721px) {
  .registry-table.registry-table--people td.position-place { min-width: 8rem; }
}

/* `.secn` -- a numbered form section: the number in a 24px brand circle
   before the section name. */
.section-numbered {
  align-items: center;
  display: flex;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: 10px;
  margin: 0;
}

.ncr-form-section-number.ncr-form-section-number--circle {
  align-items: center;
  background: var(--brand);
  border-radius: 50%;
  color: var(--surface);
  display: inline-flex;
  flex: none;
  font-size: 0.75rem;
  font-weight: 600;
  height: 24px;
  justify-content: center;
  width: 24px;
}

/* `.pin` -- the kiosk PIN shown once: large tabular digits, no frame.
   `.lnk` -- the sign-in link shown once: small monospace in a light box,
   broken anywhere so a long link never widens the page. */
.one-time-secret.one-time-secret--pin {
  background: transparent;
  border: 0;
  font-size: 2.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.18em;
  padding: 0;
  text-align: left;
}

.one-time-secret.one-time-secret--link {
  background: color-mix(in srgb, var(--rail-bg) 40%, var(--surface));
  border: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: normal;
  padding: 10px 12px;
  text-align: left;
  word-break: break-all;
}

/* `.fg3` -- a three-column form; a field spans two (`form-span-2`) or the
   whole row (`form-grid-full`). */
.form-grid.form-grid--3 {
  column-gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid--3 > .form-span-2 {
  grid-column: span 2;
}

/* K-7088: in a card narrower than three 180px fields (the person card's
   half-width cards at 1366/1440) the columns follow the card, not the
   viewport -- two columns, and the third field takes the row, so an e-mail
   address is not cut to "jonas.petraitis@" and its help is not one word a
   line. */
.card:has(> .form-grid--3) {
  container: form-grid-3 / inline-size;
}

@container form-grid-3 (max-width: 36rem) {
  .form-grid.form-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid--3 > .field:nth-child(3) {
    grid-column: 1 / -1;
  }
}

/* On a phone: one column, the strip's facts one under the other, filter
   chips and the save bar's buttons at the 44px/48px tap targets. Two
   classes on the form grid: the phone `.form-grid` one-column rule further
   down the file would otherwise lose to the three-column rule above. */
@media (max-width: 720px) {
  .summary-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .summary-strip > div {
    border-bottom: 1px solid var(--line);
    border-right: 0;
  }

  .summary-strip > div:last-child {
    border-bottom: 0;
  }

  .form-grid.form-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-grid--3 > .form-span-2 {
    grid-column: auto;
  }

  .filter-chip {
    height: 44px;
    min-width: 44px;
  }

  .save-bar-actions {
    margin-left: 0;
    width: 100%;
  }

  .save-bar-actions > .button {
    flex: 1;
    min-height: 48px;
  }

  .save-bar-actions > .link-button {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
}

/* K-7430 (people design Z6, mockups Priimti-1 and Priimti-390): the hire
   wizard's frame -- the steps (200px) on the left, the step's form, and
   "What they will get" on the right once `<main>` has room for it (>= 1300px,
   inventory rule 11), under the form otherwise. On a phone one column: the
   steps become the segment bar in the header, "What they will get" waits
   for step 7. The e-mail box is the part before "@" with the company domain
   fixed beside it, and "Generate" next to it. */
.hire-frame {
  container: hire-frame / inline-size;
}

.hire-frame-grid {
  align-items: start;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 200px minmax(0, 1fr);
}

.hire-frame-main,
.hire-frame-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.hire-frame-side {
  grid-column: 2;
}

@container hire-frame (min-width: 1300px) {
  .hire-frame-grid {
    grid-template-columns: 200px minmax(0, 1fr) 312px;
  }

  .hire-frame-side {
    grid-column: auto;
  }
}

.step-dots.hire-frame-bar {
  display: none;
}

/* "How they will sign in": the two radio cards side by side. */
.hire-frame-main .po-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hire-email {
  display: flex;
  gap: 8px;
}

.hire-email-box {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  display: flex;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.hire-email-box > input {
  border: 0;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}

.hire-email-domain {
  align-items: center;
  background: color-mix(in srgb, var(--rail-bg) 40%, var(--surface));
  border-left: 1px solid var(--line);
  color: var(--muted);
  display: inline-flex;
  padding: 0 12px;
}

@media (max-width: 720px) {
  .hire-frame-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hire-frame-grid > .hire-steps,
  .hire-frame-side {
    display: none;
  }

  .hire-frame-side.hire-frame-side--summary {
    display: flex;
    grid-column: auto;
  }

  .step-dots.hire-frame-bar {
    display: flex;
    margin: 4px 0;
  }

  .hire-frame-main .po-outcomes {
    grid-template-columns: minmax(0, 1fr);
  }

  .hire-email {
    flex-direction: column;
  }

  .hire-email > .button {
    min-height: 44px;
  }

  .hire-frame-main .bi-head .bi-head-actions {
    width: 100%;
  }

  .hire-frame-main .bi-head .bi-head-actions > :is(button, .button) {
    flex: 1;
    min-height: 48px;
  }

  /* K-7912: steps 3-6 put "Back" beside the actions row, not in it. */
  .hire-frame-main .bi-head > .button {
    min-height: 44px;
  }

  /* K-7912: the wizard's "Step n of 7" stays on the phone -- the header
     rule above hides every other screen's subtitle. The step bar sits
     right before it in each step's header. */
  .bi-head-title .hire-frame-bar + .card-subtitle {
    display: block;
  }

  /* K-7912: the "i" is a 44px target without growing the label row,
     as `.po-fg .field-help-toggle` already does. */
  .field-help-toggle {
    align-items: center;
    justify-content: center;
    margin: -13px -10px;
    min-height: 44px;
    min-width: 44px;
  }

  .bi-chead > a.link-button,
  .mark-row > a.link-button {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
}
/* === end People (Z1) === */

/* `.gs-strip` -- Gamybos stebesena "Visi uzsakymai" (K-9854, board GS-1):
   the status groups as one strip of links, a hairline between them; the
   chosen group is tinted. The 1px gap over a line-coloured background draws
   the hairlines in both the one-row and the phone two-column layout. */
.gs-strip {
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 1px;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  overflow: hidden;
}

.gs-strip > a {
  background: var(--surface);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px;
  text-decoration: none;
}

.gs-strip > a:hover {
  background: var(--bg);
}

.gs-strip > a.on {
  background: color-mix(in srgb, var(--brand-tint) 70%, var(--rail-bg));
}

.gs-strip small {
  color: var(--muted);
  font-size: 0.75rem;
}

.gs-strip strong {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

/* The filters in one grid row: Mano/Visi, the search taking the spare
   width, then the three selects. */
.gs-filters {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(160px, 1fr) repeat(3, auto);
}

.gs-filters input[type="search"] {
  height: var(--control-h);
  margin: 0;
  min-width: 0;
}

.gs-filters .sel {
  min-width: 0;
}

/* K-9953 (design gate K-9952): a select as wide as its chosen option --
   "All managers" was cut under the chevron in a fixed 180px track. */
.gs-filters .sel select {
  field-sizing: content;
  min-width: 0;
}

/* K-10092 (board GS-2): the deviation list's row -- Mine/All, Open/Marked,
   the search taking the spare width, then the two selects. */
.gs-dev-filters {
  grid-template-columns: auto auto minmax(160px, 1fr) repeat(2, auto);
}

/* K-10092: the header's one primary action -- the decision for the ticked
   rows beside "Mark selected OK". */
.gs-bulk {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gs-bulk .sel {
  display: grid;
  gap: 2px;
}

.gs-deviations .gs-pick {
  width: 34px;
}

/* K-10092: the product may take two lines; a client head and its note wrap
   (the compact table keeps a first cell on one line). */
.gs-deviations .gs-product {
  min-width: calc(2.5 * var(--space-16));
}

.gs-deviations tr.grp td {
  white-space: normal;
}

.gs-row-actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

/* K-9953: the eight columns at 1366: the table runs to the card's edges as
   in the mockup; the order, group name, state chip and the heads stay on one
   line ("On schedule", "gid 239004" broke), the client keeps room for two. */
.registry-table-wrap:has(> .gs-all),
.registry-table-wrap:has(> .gs-deviations) {
  margin-inline: calc(-1 * var(--pad-card-x));
  max-width: none;
}

.gs-all th,
.gs-all td strong,
.gs-deviations .gs-order strong,
.gs-deviations .gs-chip {
  white-space: nowrap;
}

.gs-all td:nth-child(2) {
  min-width: calc(2 * var(--space-16));
}

/* The grey second line no larger than the compact cell above it. */
.gs-all .task-meta,
.gs-deviations .task-meta {
  font-size: inherit;
}

.gs-foot {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: space-between;
}

/* K-10050: the one-row grid needs ~870px of `<main>` (LT "All orders":
   Mine/All 153 + search 160 + selects 225/177/113 + gaps). Beside the menu
   a 1024px window leaves `<main>` ~600px and a 1280px one ~860px, and the
   selects were squeezed to 84px with the chosen option cut under the
   chevron, while the window query below still saw a wide screen. Folded by
   `<main>`'s own width into a wrapping row, as `.po-toolbar` (late orders)
   already does; the phone keeps the single column below. */
.page:has(> .gs-filters) {
  container: gs-filters / inline-size;
}

@media (min-width: 721px) {
  @container gs-filters (max-width: 879px) {
    .gs-filters {
      display: flex;
      flex-wrap: wrap;
    }

    .gs-filters input[type="search"] {
      flex: 1 1 160px;
    }
  }
}

@media (max-width: 720px) {
  .gs-strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gs-strip > a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .gs-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .gs-filters .sel select {
    flex: 1;
  }

  .registry-table-wrap:has(> .gs-all),
  .registry-table-wrap:has(> .gs-deviations) {
    margin-inline: 0;
  }

  .gs-filters .seg a {
    flex: 1;
    justify-content: center;
  }

  /* K-10092: a client head stays one plain line between the row cards. */
  .registry-table.rt-cards.gs-deviations > tbody > tr.grp {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 8px 0 0;
  }

  .registry-table.rt-cards.gs-deviations > tbody > tr.grp > td {
    background: transparent;
    display: block;
    padding: 0;
    text-align: left;
  }

  .registry-table.rt-cards.gs-deviations > tbody > tr.grp > td::before {
    content: none;
  }

  .gs-deviations .gs-pick input,
  .gs-row-actions .button {
    min-height: 44px;
    min-width: 44px;
  }
}

/* === Mano (M1) === */
/* K-6518 (Mano design M1): the "Mano" group mockups' own components
   (saltiniai/mano-maketai/html/*.dc.html <helmet><style>, inventory rule 1),
   under the mockups' class names so M2-M7 can lift markup as drawn: the
   three-pane messages layout, its rail, list rows, bubbles, the linked
   record card, the reply box, quick replies, recipient tokens, dotted rows,
   source tags and keys. Already in the library and NOT repeated here: `.av`
   (B1), `.seg` (B1), the buttons, badges and `.task-meta`. Only existing
   tokens: the mockups' warm greys and tints are a color-mix of two tokens,
   the same way B1/R1/P1 derive theirs -- no new hue. Breakpoints are
   inventory rule 4: >= 1200px three panes (rail 232 | list 400 | thread),
   768-1199px the rail folds to icons beside list | thread, < 768px one pane
   at a time (`.msg--thread` shows the thread instead of the list). */

/* `.msg` -- the three panes in one rounded frame. */
.msg {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 232px 400px minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
}

/* K-6896 (Zinutes-pataisa): a 1200-1699px window leaves `<main>` about
   900-1300px beside the side navigation, so the rail and the list give the
   message more than the mockup's 232 | 400 -- K-7409 (Z-Zinutes): rail 190 |
   list 320, three panes in the 1366 window's ~980px `<main>`. */
@media (min-width: 1200px) and (max-width: 1699px) {
  .msg {
    grid-template-columns: 190px 320px minmax(0, 1fr);
  }
}

/* K-7409 (Z-Zinutes): Gauta / Išsiųsta fill the window's height below the
   page head (~175px) and above the page's bottom padding, instead of a box
   as tall as its rows; the list and the conversation scroll inside it.
   "New message" moved to the page head, so the rail drops its own copy --
   on a phone the rail's floating button stays and the head's goes. */
@media (min-width: 768px) {
  .msg.msg--fill {
    grid-template-rows: minmax(0, 1fr);
    height: calc(100vh - 264px);
    min-height: 480px;
  }

  /* K-7420: the head carries the linked record card, and an opened NCR
     "Action · Root cause" can be taller than the fixed frame. The pane
     scrolls then, the head keeps its height and the conversation keeps
     a readable strip, so the composer stays reachable. */
  .msg.msg--fill .thr {
    overflow-y: auto;
  }

  .msg.msg--fill .thr .hd {
    flex: none;
  }

  .msg.msg--fill .thr .bd {
    min-height: 120px;
  }

  .page:has(> .bi-head .msg-new) .rail a.new {
    display: none;
  }
}

/* `.rail` -- the left pane: the "New message" button (`.new`), the folders
   and filters (`.on` is the open one, `.n` a count, `.n.r` a red one), the
   group labels (`.g`) and the keyboard hint (`.hint`) at the bottom. Link
   text sits in `.l` so the tablet rail can fold to icons. */
.rail {
  background: color-mix(in srgb, var(--bg) 50%, var(--surface));
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 12px;
}

.rail a {
  align-items: center;
  border-radius: var(--radius-md);
  color: color-mix(in srgb, var(--text) 55%, var(--muted));
  display: flex;
  font-size: var(--fs-control);
  gap: 10px;
  height: 38px;
  padding: 0 10px;
  position: relative;
  text-decoration: none;
}

.rail a.on {
  background: color-mix(in srgb, var(--brand-tint) 70%, var(--rail-bg));
  color: var(--text);
  font-weight: 600;
}

.rail a.new {
  color: var(--surface);
  height: 44px;
  justify-content: center;
  margin-bottom: 12px;
}

/* K-6896: folder counts are grey; only Gauta's unopened count is red. */
.rail a .n {
  color: color-mix(in srgb, var(--muted) 70%, var(--surface));
  font-size: 0.75rem;
  font-weight: 500;
  margin-left: auto;
}

.rail a .n.r {
  background: var(--danger);
  border-radius: var(--radius-pill);
  color: var(--surface);
  padding: 1px 7px;
}

.rail .g {
  color: color-mix(in srgb, var(--muted) 70%, var(--surface));
  font-size: var(--fs-field-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 14px 10px 6px;
  text-transform: uppercase;
}

.rail .hint {
  color: color-mix(in srgb, var(--muted) 70%, var(--surface));
  font-size: 0.75rem;
  line-height: 1.6;
  margin-top: auto;
  padding: 10px;
}

/* K-7409 (Z-Zinutes): on Gauta / Išsiųsta the key hints are the title of a
   "?" (`span.hint`) at the right end of the Preferences row; Preferences
   takes the free room above. The "?" sits inside the link's box and comes
   before it, so `z-index` keeps it on top for hover and click. */
.rail {
  position: relative;
}

.rail > span.hint {
  bottom: 16px;
  cursor: help;
  font-size: var(--fs-control);
  line-height: 38px;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 12px;
  text-align: center;
  width: 38px;
  z-index: 1;
}

.rail > span.hint + a {
  margin-top: auto;
}

/* `.lst` -- the middle pane: `.top` holds the title, search and `.seg`,
   the rows scroll under it. */
.lst {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
}

.lst .top {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}

/* K-6803 (M9): the pane title is 18px and the paging line under the rows
   is centred, as in Zinutes.dc.html. */
.lst .top h2,
.inf > .section-heading h2 {
  font-size: 18px;
  margin: 0;
}

.thr--form .hd h2 {
  font-size: 20px;
  margin: 0;
}

.lst > .actions {
  justify-content: center;
  padding: 18px;
}

/* `.it` -- one list row: initials, sender (`.who`), time (`.t`), subject
   (`.sub`), the first line of text (`.pre`) and the tags row (`.tags`).
   `.u` is unopened (bold, with the blue `.ud` dot), `.on` the open one. */
.it {
  border-bottom: 1px solid var(--line);
  color: var(--text);
  display: grid;
  gap: 4px 12px;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  padding: 14px 16px;
  position: relative;
  text-decoration: none;
}

/* K-6896 (Zinutes-pataisa): the Gauta / Išsiųsta rows have no initials --
   sender and time on top, the subject, text and grey line span both. */
.it:not(:has(> .av)) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.it:not(:has(> .av)) > .sub,
.it:not(:has(> .av)) > .pre,
.it:not(:has(> .av)) > .tags {
  grid-column: 1 / 3;
}

/* K-6986: a Gauta row carries the sender in its own `.nm` span, so a long
   name is cut with an ellipsis and the unopened `.ud` dot stays visible. */
.it .who:has(> .nm) {
  align-items: center;
  display: flex;
  min-width: 0;
}

.it .who > .nm {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.it .who .ud {
  flex: none;
  margin-left: 4px;
  vertical-align: middle;
}

.it.on {
  background: color-mix(in srgb, var(--warning-bg) 40%, var(--surface));
}

.it.on::before {
  background: var(--brand);
  border-radius: 0 3px 3px 0;
  bottom: 10px;
  content: "";
  left: 0;
  position: absolute;
  top: 10px;
  width: 3px;
}

.it .who {
  font-size: var(--fs-control);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.it.u .who,
.it.u .sub {
  font-weight: 700;
}

.it .t {
  color: color-mix(in srgb, var(--muted) 70%, var(--surface));
  font-size: 0.75rem;
  white-space: nowrap;
}

.it .sub {
  font-size: var(--fs-control);
  grid-column: 2 / 4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.it .pre {
  color: var(--muted);
  font-size: var(--fs-field-value);
  grid-column: 2 / 4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.it .tags {
  align-items: center;
  display: flex;
  gap: 6px;
  grid-column: 2 / 4;
}

/* K-6896: in Gauta / Išsiųsta the tags are one grey line of text
   ("Užduotis · iki 09-30 · NCR"), only "vėluoja N d." red. */
.it:not(:has(> .av)) > .tags {
  color: color-mix(in srgb, var(--muted) 70%, var(--surface));
  display: block;
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ud {
  background: var(--info);
  border-radius: 50%;
  display: inline-block;
  height: 9px;
  width: 9px;
}

/* `.av.s` -- initials of a system or unknown sender, grey instead of warm. */
.av.s {
  background: color-mix(in srgb, var(--rail-bg) 60%, var(--surface));
  color: color-mix(in srgb, var(--muted) 70%, var(--text));
}

/* `.thr` -- the right pane: `.hd` the message head, `.bd` the conversation. */
.thr {
  background: color-mix(in srgb, var(--bg) 50%, var(--surface));
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

/* K-6620: the head is a grid so the controls (back, "⋯") sit only on the
   top row beside the type tag and deadline, and the subject and "who → whom"
   lines below take the pane's full width instead of a squeezed column. */
.thr .hd {
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  column-gap: 8px;
  display: grid;
  grid-template-areas:
    "title back more"
    "who who who";
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 16px 24px;
  row-gap: 6px;
}

.thr .hd > div,
.thr .hd > .actions {
  display: contents;
}

.thr .hd h3 {
  grid-area: title;
  margin: 0;
}

.thr .hd > div > .task-meta {
  grid-area: who;
}

.thr .hd > .actions > a {
  grid-area: back;
}

/* The mockup's 32px icon buttons; the phone block below keeps them 44px. */
.thr .hd .button,
.thr .hd summary {
  justify-content: center;
  min-width: 32px;
  padding-inline: 0;
}

.thr .hd > .actions > details {
  grid-area: more;
}

/* K-7409 (Z-Zinutes): the grey line leads with the type tag and the
   deadline chip; the linked record card (`.rec`) is the head's last row. */
.thr .hd > div > .task-meta {
  line-height: 2;
}

.thr .hd > div > .task-meta > .src ~ .src {
  border-radius: var(--radius-pill);
  padding-inline: 10px;
}

.thr .hd > .rec {
  display: flex;
  flex-direction: column;
  gap: 10px;
  grid-column: 1 / -1;
  margin-top: 4px;
}

/* K-7433: in the head "Open" takes a row of its own under the title,
   right-aligned (Z-Zinutes), so the record title keeps the card's width. */
.thr .hd > .rec > .lnk {
  background: color-mix(in srgb, var(--bg) 50%, var(--surface));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  max-width: none;
  row-gap: 8px;
}

.thr .hd > .rec > .lnk > .button {
  grid-column: 2;
  justify-self: end;
}

/* K-7433: a text button, not one of the head's 32px icons -- it keeps
   its padding (as "Remind" does). */
.thr .hd > .rec .button {
  padding-inline: 0.75rem;
}

/* K-6713 (ML4): the sender's "Remind" sits left of "‹" and "⋯" (Zinutes-issiusta);
   a text button, so it keeps its padding. */
.thr .hd:has(.rmd) {
  grid-template-areas:
    "title remind back more"
    "who who who who";
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}

.thr .hd .rmd {
  grid-area: remind;
}

/* K-6935: under 1700px the message pane is 330-520px -- beside "Remind",
   "‹" and "⋯" the subject got 131px, one word a line. The controls take a
   row of their own above it; the subject and the grey line keep the width. */
@media (min-width: 768px) and (max-width: 1699px) {
  .thr .hd {
    grid-template-areas:
      ". back more"
      "title title title"
      "who who who";
  }

  .thr .hd:has(.rmd) {
    grid-template-areas:
      ". remind back more"
      "title title title title"
      "who who who who";
  }
}

.thr .hd .rmd.button,
.thr .hd .rmd .button {
  padding-inline: 0.75rem;
}

.thr .bd {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
}

/* `.day` -- the date between messages, a small centred pill. */
.day {
  align-self: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: color-mix(in srgb, var(--muted) 70%, var(--surface));
  font-size: 0.75rem;
  padding: 3px 12px;
}

/* `.bub` -- a message bubble; `.me` is mine, on the right in the warm tint.
   `.bm` is the grey line under it (time, read state). */
.bub {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px 16px 16px 16px;
  box-sizing: border-box;
  font-size: var(--fs-control);
  line-height: 1.55;
  max-width: 560px;
  padding: 12px 16px;
}

.bub.me {
  align-self: flex-end;
  background: color-mix(in srgb, var(--brand-tint) 70%, var(--rail-bg));
  border-color: color-mix(in srgb, var(--brand) 12%, var(--brand-tint));
  border-radius: 16px 4px 16px 16px;
}

.bm {
  align-items: center;
  color: color-mix(in srgb, var(--muted) 70%, var(--surface));
  display: flex;
  font-size: 0.75rem;
  gap: 6px;
}

.bub.me + .bm {
  align-self: flex-end;
}

/* `.dn` -- a late deadline ("vėluoja 20 d."), red on any grey meta line. */
.dn,
.task-meta.dn {
  color: var(--danger);
}

/* `.lnk` -- the linked record card under a message: source tag, what it
   is, "Open" pushed right. */
.lnk {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  gap: 12px;
  max-width: 560px;
  padding: 10px 14px;
}

.lnk > :last-child {
  margin-left: auto;
}

/* K-6896: a card with one block (Recipient state) keeps it on the left. */
.lnk > :only-child {
  margin-left: 0;
}

/* K-6620: the text between the source tag and "Open" takes the free room
   and its title stays on one line (the full text is its tooltip), so the
   card is two lines in the narrow thread column, not six. */
.lnk > .src + div {
  flex: 1;
  min-width: 0;
}

.lnk > .src + div > b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* K-6803 (M9): the sender's "Recipient state" card spans the thread and
   keeps each recipient on one row -- initials, name, how addressed, state
   (Zinutes-issiusta.dc.html `.rcp`). */
.thr .lnk:has(.recipient-list) {
  align-self: stretch;
  max-width: none;
}

.thr .lnk:has(.recipient-list) > div {
  flex: 1;
  margin-left: 0;
  min-width: 0;
}

.thr .recipient-list {
  gap: 10px;
  margin: 10px 0 0;
}

.thr .recipient-list li {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.thr .recipient-list strong {
  font-weight: 500;
}

/* `.cmp` -- the reply box at the bottom of the thread: quick replies
   (`.qa`), the text box (`.box`, a real textarea inside) and a key hint. */
.cmp {
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
}

.cmp .box {
  align-items: flex-end;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
}

.cmp .box textarea {
  background: transparent;
  border: 0;
  color: var(--text);
  flex: 1;
  font: inherit;
  font-size: var(--fs-control);
  min-height: 24px;
  padding: 0;
  resize: vertical;
}

.cmp .box textarea:focus {
  outline: none;
}

.cmp .box:focus-within {
  border-color: var(--brand);
}

/* `.qa` / `.chipq` -- a row of quick-reply chips. */
.qa {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chipq {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--fs-field-value);
  gap: 6px;
  height: 32px;
  padding: 0 12px;
}

/* `.tok` -- a chosen recipient in the "To" field; `.tok--group` a role,
   department or position instead of a person. */
.tok {
  align-items: center;
  background: color-mix(in srgb, var(--brand-tint) 70%, var(--rail-bg));
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-size: var(--fs-field-value);
  gap: 6px;
  height: 28px;
  padding: 0 6px 0 4px;
}

.tok.tok--group {
  background: var(--info-bg);
  padding-left: 10px;
}

.tok .av {
  font-size: 0.625rem;
  height: 22px;
  width: 22px;
}

/* `.row2` -- a row with a coloured dot (`.m`, `.m--danger` overdue,
   `.m--warning` today), the title with its source under it, and the
   deadline with the action on the right. */
.row2 {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  padding: 12px 4px;
}

.row2:last-child {
  border-bottom: 0;
}

.row2 .m {
  background: var(--info);
  border-radius: 50%;
  height: 10px;
  margin-left: 8px;
  width: 10px;
}

.row2 .m--danger {
  background: var(--danger);
}

.row2 .m--warning {
  background: var(--warning);
}

/* K-6586 (M4): a row with no deadline -- the mockups' grey dot. */
.row2 .m--muted {
  background: var(--muted);
}

/* `.src` -- where a thing comes from (NCR, PIRKIMAI), a small grey tag. */
.src {
  background: color-mix(in srgb, var(--rail-bg) 60%, var(--surface));
  border-radius: 4px;
  color: var(--muted);
  font-size: var(--fs-field-label);
  flex: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  white-space: nowrap;
}

/* K-6877: in a document's line table the class tag ("Dažai / eksploatacinės
   medžiagos") wraps, so all eight columns fit the 1440 receipt card without
   scrolling inside it -- as in the `Priemimas` mockup. */
.po-lines-table .src {
  display: inline-block;
  white-space: normal;
}

/* K-6945: the receipt's item name takes two lines in a 1366px window, as in
   the mockup -- a plain bold name, not a <strong> heading -- and the
   right-aligned "Landed cost" head keeps one line over its amounts. */
.po-lines-table .po-line-name {
  font-weight: 600;
}

@media (min-width: 721px) {
  .po-lines-table th.task-row-numeric {
    white-space: nowrap;
  }
}

/* `.kbd` -- a keyboard key. */
.kbd {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-field-label);
  padding: 0 5px;
}

/* K-7013: a frame under 1100px (a 1366-1440 window, or a narrow `<main>` in
   a wide one) left the open message ~330px. There the rail becomes one row
   of folder chips over list | message, and the list gives up 20px. K-7409:
   with rail 190 | list 320 that is a frame under 900px (Z-Zinutes draws the
   1366 window's three panes). Keyed on
   the frame's own width: the container is `.page`, whose content box is the
   frame (a container query cannot restyle its own container). Tablet and
   phone keep their rules below. */
@media (min-width: 1200px) {
  .page:has(> .msg) {
    container: msg-page / inline-size;
  }

  @container msg-page (max-width: 899px) {
    .msg {
      grid-template-columns: 320px minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr);
    }

    /* K-7409: `.msg--fill` (Gauta / Išsiųsta) sets one row and outranks
       `.msg`; the folded rail needs its own row here too. */
    .msg.msg--fill {
      grid-template-rows: auto minmax(0, 1fr);
    }

    .rail {
      align-items: center;
      border-bottom: 1px solid var(--line);
      border-right: 0;
      flex-direction: row;
      gap: 4px;
      grid-column: 1 / -1;
      overflow-x: auto;
      padding: 8px;
    }

    .rail a {
      flex: none;
      font-size: var(--fs-field-value);
      gap: 6px;
      height: 36px;
      padding: 0 6px;
    }

    /* The row fits one line only without the folder icons and the "Type"
       heading (as on a phone); "New message" and Preferences keep just
       their icons, the label stays for screen readers and `title` names
       it. */
    .rail a.new,
    .rail > a:last-child {
      height: 36px;
      justify-content: center;
      margin: 0;
      padding: 0;
      width: 36px;
    }

    .rail > a:last-child {
      margin-left: auto;
    }

    .rail a:not(.new, :last-child) svg,
    .rail a.new .kbd,
    .rail .g,
    .rail .hint {
      display: none;
    }

    .rail a.new .l,
    .rail > a:last-child .l {
      border: 0;
      clip: rect(0, 0, 0, 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }

    .rail a .n {
      margin-left: 2px;
    }
  }
}

/* K-6941: under 1440px "Reikia tavęs" beside the 380px side column is about
   500px, so the deadline and "Atidaryti" go under the title instead of
   squeezing it to 160px and breaking it word by word. */
@media (min-width: 768px) and (max-width: 1439px) {
  .bi-main .row2 {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .bi-main .row2 > :last-child {
    grid-column: 2;
  }
}

/* Tablet: the rail folds to its icons (labels, group headings, the type and
   link filters and the key hint go -- the filters are the links after `.g`
   with no icon; Preferences, below them, keeps its), a count becomes a corner
   badge; list | thread share the rest. */
@media (min-width: 768px) and (max-width: 1199px) {
  .msg {
    grid-template-columns: 64px 320px minmax(0, 1fr);
  }

  .rail {
    align-items: center;
    padding: 16px 8px;
  }

  .rail a {
    height: 44px;
    justify-content: center;
    padding: 0;
    width: 44px;
  }

  .rail a .l,
  .rail a.new .kbd,
  .rail .g,
  .rail .g ~ a:not(:has(svg)),
  .rail .hint {
    display: none;
  }

  /* With the "?" gone, Preferences sits right under the folders as on
     every other messages page, not pushed to the rail's bottom. */
  .rail > span.hint + a {
    margin-top: 0;
  }

  .rail a .n {
    font-size: 0.625rem;
    position: absolute;
    right: 0;
    top: 2px;
  }
}

/* Phone: one pane at a time. The rail becomes a row of chips over the list
   (only the folders and Preferences -- the icon-less type and link filters
   and the key hint go), "New
   message" floats bottom right, the thread replaces the list when the frame
   has `.msg--thread`, and the reply box sticks to the bottom. Touch targets
   44px (K-45). */
@media (max-width: 767px) {
  .msg {
    border: 0;
    border-radius: 0;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }

  .rail {
    background: var(--surface);
    border-right: 0;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding: 0 16px 10px;
  }

  .rail a {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    flex: none;
    font-size: var(--fs-field-value);
    height: 44px;
    padding: 0 12px;
  }

  .rail a.on {
    border-color: color-mix(in srgb, var(--brand) 12%, var(--brand-tint));
  }

  .rail a svg,
  .rail .g,
  .rail .g ~ a:not(:has(svg)),
  .rail .hint {
    display: none;
  }

  .rail a .n {
    margin-left: 0;
  }

  .rail a.new {
    border-radius: 16px;
    bottom: 20px;
    height: 56px;
    margin: 0;
    padding: 0;
    position: fixed;
    right: 16px;
    width: 56px;
    z-index: 5;
  }

  /* K-6697: the gallery's sample keeps its FAB inside its own section
     instead of floating over the whole gallery page. */
  #gallery-mine .msg {
    position: relative;
  }

  #gallery-mine .rail a.new {
    position: absolute;
  }

  .rail a.new svg {
    display: block;
  }

  .rail a.new .l,
  .rail a.new .kbd {
    display: none;
  }

  /* K-7409: the page head's "New message" gives way to the floating one. */
  .bi-head .msg-new {
    display: none;
  }

  .lst {
    border-right: 0;
  }

  /* K-6803 (M9): Zinutes-390 has no pane title -- the folder chip above
     already carries its name and count. */
  .lst .top .section-heading {
    display: none;
  }

  /* K-9613 (mobile audit 3.3): the folder chips, the search and All /
     Unopened were three rows, and the first message started at ~400px of a
     844px screen. The search and the switch share one row (the search takes
     what the switch leaves), so the list starts under ~320px; a switch label
     long enough to leave the search under 8rem wraps to its own row. */
  .lst .top {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 8px 16px;
  }

  .lst .top form[role="search"] {
    flex: 1 1 8rem;
    min-width: 0;
  }

  .lst .top .seg {
    flex: none;
  }

  /* K-6620: only the list screen's pane hides; `/messages/<id>/` is the
     thread alone and stays visible. */
  .msg .thr,
  .msg--thread .lst,
  .msg--thread .rail {
    display: none;
  }

  .msg--thread .thr {
    display: flex;
  }

  .it {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    min-height: 76px;
  }

  .it:not(:has(> .av)) {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* K-6620: on a phone "‹" goes left of the subject; K-6896: "⋯" (and
     "Remind") sit right of the grey line, so the subject keeps the row. */
  .thr .hd {
    grid-template-areas:
      "back title title"
      "who who more";
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 12px;
  }

  .thr .hd:has(.rmd) {
    grid-template-areas:
      "back title title title"
      "who who remind more";
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  /* K-6585 (M2): the thread head's back and "⋯" controls, 44px (K-45). */
  .thr .hd .button,
  .thr .hd summary {
    min-height: 44px;
    min-width: 44px;
  }

  .thr .bd {
    gap: 12px;
    padding: 16px;
  }

  .bub,
  .lnk {
    max-width: 85%;
  }

  /* K-6620: a tighter card leaves "terminas MM-DD" room for one line. */
  .lnk {
    gap: 8px;
    padding: 10px;
  }

  .cmp {
    bottom: 0;
    padding-bottom: 20px;
    position: sticky;
  }

  .cmp .box {
    min-height: 48px;
  }

  .qa {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .chipq {
    flex: none;
    height: 44px;
  }

  /* The deadline and action go under the title instead of squeezing it. */
  .row2 {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .row2 > :last-child {
    grid-column: 2;
  }

  /* K-6586 (M4): a row's small actions ("Atidaryti", "Atlikta", a
     notification's "Perskaityta") are K-45 targets on a phone. The second
     selector outranks the desktop `button[type=submit].button-small` step. */
  .row2 .button-small,
  .row2 button[type="submit"].button-small:not(.link-button):not(.button-link):not(.task-row-button) {
    min-height: 44px;
  }
}

/* K-10538: the reply's icon-only send button is a 44x44 touch target on a
   phone (K-45); the 16px icon alone left it 42px wide. */
@media (max-width: 720px) {
  .cmp .box .button-small {
    min-height: 44px;
    min-width: 44px;
  }
}

/* === end Mano (M1) === */

/* === Mano (M3) === */
/* K-6613 (Mano design M3): New message in the right pane
   (Zinutes-nauja.dc.html) and Info (Zinutes-info.dc.html) in the same `.msg`
   frame. `.full` is one pane over the list and thread columns (Info,
   Preferences, and the compose form until Gauta's list is fetched beside
   it); `.inf` the Info / Preferences pane; `.thr--form` the compose pane;
   `.tokf` the "To" box of `.tok` chips and its search input, `.tokm` the
   suggestions under it; `.seg` also takes radio labels (the message type);
   `.cmpf-2` the subject | deadline row; `.lnkp` the "Link to a record"
   disclosure. Only existing tokens. */
.msg > .full {
  grid-column: 2 / -1;
}

/* K-7013: with the rail a row over list | thread (M1), `.full` takes both. */
@media (min-width: 1200px) {
  @container msg-page (max-width: 899px) {
    .msg > .full {
      grid-column: 1 / -1;
    }
  }
}

.inf {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  padding: 16px 24px;
}

.thr--form {
  background: var(--surface);
}

.thr--form .bd {
  gap: 16px;
}

/* The mockup's field labels are sentence case, not the app's small caps. */
.thr--form .field > label:not(.checkbox-label) {
  color: color-mix(in srgb, var(--text) 80%, var(--muted));
  font-size: var(--fs-field-value);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.thr--form .cmp {
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.tokf {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  cursor: text;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 44px;
  padding: 6px 8px;
}

.tokf:focus-within {
  border-color: var(--brand);
}

.tokf input[type="text"] {
  border: 0;
  flex: 1;
  font-size: var(--fs-control);
  min-width: 12rem;
  padding: 4px;
  width: auto;
}

.tokf input[type="text"]:focus-visible {
  outline: none;
}

.tok .tok-x {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  height: 22px;
  justify-content: center;
  padding: 0;
  width: 22px;
}

.tokm {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  max-height: 16rem;
  overflow-y: auto;
  padding: 6px;
}

.tokm button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: var(--fs-control);
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  text-align: left;
}

.tokm button.on,
.tokm button:hover {
  background: color-mix(in srgb, var(--rail-bg) 60%, var(--surface));
}

.tokm small {
  color: color-mix(in srgb, var(--muted) 70%, var(--surface));
  font-size: 0.75rem;
  margin-left: auto;
}

.thr--form .seg label {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--fs-field-value);
  height: 32px;
  padding: 0 12px;
  position: relative;
}

.thr--form .seg label:has(input:checked) {
  background: color-mix(in srgb, var(--brand-tint) 70%, var(--rail-bg));
  color: var(--text);
  font-weight: 600;
}

.thr--form .seg label:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.thr--form .seg label input[type="radio"] {
  height: 1px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.cmpf-2 {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 220px;
}

.lnkp > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.lnkp > summary::-webkit-details-marker {
  display: none;
}

.lnkp[open] > summary {
  margin-bottom: 12px;
}

/* K-6896: the pane is 400-900px, so the type and the search stack and the
   search | result pair wraps instead of passing `<main>`'s edge. */
.lnkp .form-grid {
  grid-template-columns: minmax(0, 1fr);
}

.lnkp .linked-object-picker {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* Phone: the panes stack (M1), so `.full` takes the one column; touch
   targets 44px, the send button 48px (K-45). */
@media (max-width: 767px) {
  .msg > .full {
    grid-column: auto;
  }

  .inf {
    padding: 12px 16px;
  }

  .cmpf-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .thr--form .seg {
    display: flex;
    flex-wrap: wrap;
  }

  .thr--form .seg label,
  .tokm button,
  .tok .tok-x {
    min-height: 44px;
  }

  .tok .tok-x {
    min-width: 44px;
  }

  .thr--form .cmp .button {
    min-height: 48px;
  }
}

/* === end Mano (M3) === */

/* === Mano (M5) === */
/* K-6587 (Mano design M5): "Mano dokumentai" and the signing window, as
   saltiniai/mano-maketai/html/Mano-dokumentai.dc.html and
   Pasirasymas.dc.html lay them out, on the library's own components
   (`.bi-head`, `.kpi` framed by `.bi-show`, `.seg`, `.sel`, `.drop`,
   `details.how`, `.callout-*`). Only what those have no class for lives
   here: the page rhythm, the three filter tiles' grid, the code chip, the
   document | steps split and the numbered step boxes. Tokens and
   color-mix of two tokens only -- no new hue. */
.my-docs {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.my-docs-tiles {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.my-docs-search input[type="search"] {
  background: transparent;
  border: 0;
  font-size: var(--fs-control);
  height: 100%;
  padding: 0;
  width: 220px;
}

.my-docs-search .sel {
  color: var(--muted);
}

.my-docs-table {
  padding: 8px 12px;
}

.my-docs-table .registry-table th.my-docs-action,
.my-docs-table .registry-table td.my-docs-action {
  text-align: right;
}

/* The mockups' `.code` -- a document code as a small monospace chip. */
.my-docs-code {
  background: color-mix(in srgb, var(--rail-bg) 60%, var(--surface));
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  padding: 1px 6px;
  white-space: nowrap;
}

.my-docs-hint,
.sign-hint {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
  margin: 0;
}

/* The signing window: the document on the left, the steps card (420px)
   on the right, "What changed" under the steps. */
.sign-layout {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: minmax(0, 1fr) 420px;
}

.sign-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.card.sign-doc {
  background: color-mix(in srgb, var(--rail-bg) 45%, var(--bg));
  padding: var(--space-4);
}

.sign-doc-head {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.sign-doc .doc-preview-box {
  background: var(--surface);
  height: 68vh;
}

.sign-doc .sign-hint {
  text-align: center;
}

.sign-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sign-block > b {
  font-size: 1rem;
  font-weight: 600;
}

/* `.sign-step` -- one numbered step (the mockups' `.st`): `--current` is
   the step to do now, framed in the accent; `--todo` a later one, grey. */
.sign-step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
}

.sign-step-title {
  align-items: center;
  display: flex;
  font-size: var(--fs-field-value);
  gap: var(--space-2);
}

.sign-step-title b {
  font-weight: 600;
}

.sign-step-n {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  flex: none;
  font-size: var(--fs-field-label);
  font-weight: 600;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.sign-step--current {
  background: color-mix(in srgb, var(--brand-tint) 25%, var(--surface));
  border: 2px solid var(--brand);
  padding: 9px 11px;
}

.sign-step--current .sign-step-n {
  background: var(--brand);
  color: var(--surface);
}

.sign-step--todo .sign-step-n {
  background: color-mix(in srgb, var(--rail-bg) 70%, var(--surface));
  color: var(--muted);
}

.sign-step--todo .sign-step-title b {
  color: var(--muted);
  font-weight: 500;
}

.sign-step .how ol {
  margin: 8px 0 0;
  padding-left: 1.2rem;
}

.sign-start {
  align-self: flex-start;
}

.drop.sign-drop {
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 14px;
}

.drop.sign-drop input[type="file"] {
  font-size: var(--fs-field-value);
  max-width: 100%;
}

.sign-sep {
  background: var(--line);
  height: 1px;
}

.sign-frame {
  border: 1px solid var(--line);
  min-height: 480px;
  width: 100%;
}

.sign-consent {
  align-items: flex-start;
  display: flex;
  font-size: var(--fs-field-value);
  gap: var(--space-2);
}

.sign-sha {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

/* Tablet: the steps card narrows before the document does. */
@media (min-width: 768px) and (max-width: 1199px) {
  .sign-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
}

/* Phone: one column -- tiles, then the tab switch and the search each on
   a full row; the document first, the steps under it. Every button and
   tab is a 44px target, the step's main action 48px and full width. */
@media (max-width: 767px) {
  .my-docs {
    gap: var(--space-4);
  }

  .my-docs .bi-head {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-4);
  }

  .my-docs .bi-head-title .card-subtitle {
    display: block;
  }

  .my-docs-tiles,
  .sign-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .my-docs .bi-toolbar .seg {
    display: flex;
    width: 100%;
  }

  .my-docs .bi-toolbar .seg a {
    flex: 1 1 0;
    justify-content: center;
  }

  .my-docs-search,
  .my-docs-search .sel {
    width: 100%;
  }

  .my-docs-search input[type="search"] {
    flex: 1 1 auto;
    width: auto;
  }

  .my-docs-search .sel {
    height: 44px;
  }

  .my-docs .button,
  .my-docs .button-small {
    min-height: 44px;
  }

  .my-docs .sign-start {
    align-self: stretch;
    min-height: 48px;
  }

  .sign-doc .doc-preview-box {
    height: 60vh;
  }
}
/* === end Mano (M5) === */

/* === Priminimai (P2) === */
/* K-6529 (reminders design P2): the Apžvalga screen's own layout, as
   saltiniai/priminimai-maketai/html/Apzvalga.dc.html and Apzvalga-390.dc.html
   lay it out. The module header, tool row, columns and tiles are R2's
   (`.bi-head`, `.bi-toolbar`, `.bi-columns`, `.kpi`); the cycle steps are
   N1's `.ncr-pb-stage`. Here only what those do not cover: "Šiandien" as
   three row tiles, the four balance tiles in one row, the mockups' `.mrow`
   list row, and the two tables as phone rows. Tokens only -- no new hue. */
a.sel {
  text-decoration: none;
}

.ar-today {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ar-today > .kpi {
  align-items: center;
  color: var(--text);
  flex-direction: row;
  gap: 16px;
  text-decoration: none;
}

.ar-today > .kpi--danger {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--danger-bg));
}

.ar-today-n {
  font-size: 1.875rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.kpi--danger .ar-today-n {
  color: var(--danger);
}

.ar-today-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ar-today-go {
  color: var(--brand-dark);
  flex: none;
  margin-left: auto;
}

.ar-kpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ar-kpis .kpi .v {
  white-space: nowrap;
}

.ar-aging-bar {
  width: 40%;
}

/* An amount never breaks before its euro sign. */
.ar-aging .fw-num,
.ar-debtors .fw-num,
.mrow .fw-num {
  white-space: nowrap;
}

/* K-6579: with "Pakopa" and the "Nepavyko išsiųsti" chip the largest
   debtors are five columns in the platform's narrower <main>; the client's
   name wraps so the status chip is not cut off. K-6905: wider than a phone
   the headings stay on one line and the name keeps 160px, so it wraps into
   words, not letters. */
.ar-debtors td.ar-debtor-name {
  white-space: normal;
}

@media (min-width: 721px) {
  .ar-debtors td.ar-debtor-name {
    min-width: 160px;
  }
}

/* `.mrow` -- one list row in a side card: the text on the left, the figure
   (or a chip, or a door) on the right. */
.mrow {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 0;
}

.mrow:last-child {
  border-bottom: 0;
}

/* K-6803 (M9): a row that is a door (Man šiandien's project tasks and NCR
   actions) reads as the row, not as underlined link text. */
a.mrow {
  color: inherit;
  text-decoration: none;
}

/* K-6650: Pirkimai > Kontrolės rows keep `.field > label` (the label token
   calculations.test_form_label_tokens guards), but the mockup draws the row
   name as body text, not the uppercase caption -- the `.ncr-register` idiom. */
.po-controls .mrow > .field {
  margin-bottom: 0;
}

.po-controls .field > label:not(.checkbox-label) {
  color: var(--text);
  font-size: var(--fs-control);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* K-6650: a row whose box is a select (Pirkimai > Kontrolės, "Kas tvirtina")
   -- on a phone the select keeps its longest option's width, so the row
   wraps and the select goes under its text instead of squeezing that text
   to one letter a line. */
@media (max-width: 720px) {
  .mrow.po-mrow-select {
    flex-wrap: wrap;
  }

  .mrow.po-mrow-select > .ar-mrow-end {
    align-items: stretch;
    flex: 1 1 100%;
  }
}

/* K-6774: wider than a phone the select is the mockup's 260px, so its
   longest option no longer squeezes "Kas tvirtina" to a word a line. */
@media (min-width: 721px) {
  .mrow.po-mrow-select select {
    max-width: 260px;
  }
}

.ar-mrow-text,
.ar-mrow-end {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ar-mrow-end {
  align-items: flex-end;
  flex: none;
  gap: 4px;
}

.ar-cycle {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.ar-cycle small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.ar-cycle .ncr-pb-count {
  color: var(--text);
}

/* Phone (Apzvalga-390): one column; Eilė and Dėmesio as full-width rows,
   the balance tiles two by two without their notes, ageing as "range |
   bar | amount" rows, the largest debtors as "name, days · chip | amount"
   rows, and "Įkelti žiniaraštį" as a 48px button at the bottom. */
@media (max-width: 720px) {
  .ar-today {
    grid-template-columns: minmax(0, 1fr);
  }

  .ar-today > .kpi {
    gap: 14px;
    min-height: 64px;
  }

  .ar-today-n {
    font-size: 1.625rem;
  }

  .ar-kpis {
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ar-kpis .kpi .n {
    display: none;
  }

  .ar-kpis .kpi .v {
    font-size: 1.25rem;
  }

  .ar-aging thead,
  .ar-aging tr.tot,
  .ar-aging td:nth-child(4),
  .ar-aging td:nth-child(5),
  .ar-debtors thead {
    display: none;
  }

  .ar-aging tbody tr {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 8px;
  }

  .ar-aging tbody td {
    border-bottom: 0;
  }

  .ar-aging td:first-child {
    flex: none;
    width: 64px;
  }

  .ar-aging td.ar-aging-bar {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  .ar-aging td:nth-child(3) {
    flex: none;
    max-width: none;
  }

  .ar-debtors tbody tr {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 2px 8px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 10px 0;
  }

  .ar-debtors tbody td {
    border-bottom: 0;
    padding: 0;
  }

  .ar-debtors td.ar-debtor-name {
    grid-column: 1 / span 2;
  }

  /* K-45: the client's name is the row's door, so it gets the 44px floor. */
  .ar-debtors td.ar-debtor-name a {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  .ar-debtors td.ar-debtor-amount {
    grid-column: 3;
    grid-row: 1 / span 2;
    max-width: none;
  }

  .ar-debtors td:nth-child(3) {
    color: var(--muted);
    font-size: var(--fs-field-value);
    grid-column: 1;
    grid-row: 2;
    text-align: left;
  }

  .ar-debtors td:nth-child(3).bi-dn {
    color: var(--danger);
  }

  .ar-debtors td:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }

  /* K-6579: "Pakopa" (the hidden fourth cell on a phone) moved the status
     chip to the fifth cell; it keeps its place next to the days. */
  .ar-debtors td.ar-debtor-status {
    grid-column: 2;
    grid-row: 2;
  }

  .ar-phone-upload.bi-phone-only {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: center;
    min-height: 48px;
    width: 100%;
  }
}

/* === end Priminimai (P2) === */

/* === Priminimai (P3) === */
/* K-6570 (reminders design P3): the Eilė screen as
   saltiniai/priminimai-maketai/html/Eile.dc.html and Eile-390.dc.html lay
   it out, on B1/R1/R2/P1 components (`.wk`, `.seg`, `.bi-toolbar`,
   `.registry-badge`, `.callout-warning`, `.leo-langas--form`). Here only
   the queue's own arrangement: the send group at the tool row's end, the
   warning's door on the right, the row's actions and its skip fold, and on
   a phone the rows as cards with "Siųsti visus laukiančius" pinned to the
   bottom. Tokens only -- no new hue. */
.ar-queue-send {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-left: auto;
}

.ar-queue td.fw-num,
.ar-queue td.ar-queue-tier,
.ar-queue td.ar-queue-actions {
  white-space: nowrap;
}

.ar-queue-send-all {
  margin: 0;
}

.ar-queue-send-all .button {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.ar-queue-hint {
  margin: -12px 0 0;
}

.ar-queue-warn {
  align-items: center;
  display: flex;
  gap: 8px;
}

.ar-queue-warn svg {
  flex: none;
}

.ar-queue-warn a {
  font-weight: 500;
  margin-left: auto;
  white-space: nowrap;
}

.ar-queue .ar-queue-status .task-meta {
  margin-top: 4px;
}

.ar-queue-buttons {
  align-items: flex-start;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: flex-end;
}

/* The opened skip fold goes under the row's buttons, not beside them. */
.ar-queue-buttons:has(.ar-queue-skip[open]) {
  flex-wrap: wrap;
}

.ar-queue-skip[open] {
  flex-basis: 100%;
  text-align: right;
}

.ar-queue-buttons form {
  margin: 0;
}

.ar-queue-skip > summary {
  list-style: none;
}

.ar-queue-skip > summary::-webkit-details-marker {
  display: none;
}

.ar-queue-skip-form {
  display: grid;
  gap: 6px;
  margin: 6px 0 0;
  min-width: 16rem;
  text-align: left;
}

.ar-queue-skip-form button {
  justify-self: end;
}

/* Phone (Eile-390): the day switcher and the status segments at full
   width ("Visi" last), each row a card -- name and amount, "14 d. · LT ·
   2 sąsk." under the name, the status chip, then Peržiūrėti | Siųsti --
   and the one primary button fixed to the bottom at 48px (K-45), the card
   list ending above it. */
@media (max-width: 720px) {
  .ar-queue-toolbar .bi-tools,
  .ar-queue-day,
  .ar-queue-seg {
    width: 100%;
  }

  .ar-queue-day {
    justify-content: space-between;
  }

  .ar-queue-day a {
    justify-content: center;
    min-width: 44px;
  }

  .ar-queue-day b {
    flex: 1 1 auto;
    justify-content: center;
  }

  .ar-queue-seg a {
    flex: 1 1 0;
    height: 44px;
    justify-content: center;
    white-space: nowrap;
  }

  /* An empty status stays on the wide screen only (Eile-390 draws
     Laukia · Nepavyko · Visi); `.seg a` would otherwise outrank it. */
  .ar-queue-seg a.bi-wide-only {
    display: none;
  }

  .ar-queue-seg a:first-child {
    order: 1;
  }

  .ar-queue-send {
    background: var(--surface);
    border-top: 1px solid var(--line);
    bottom: 0;
    left: 0;
    padding: 12px 16px;
    position: fixed;
    right: 0;
    z-index: 20;
  }

  .ar-queue-send-all,
  .ar-queue-send-all .button {
    justify-content: center;
    min-height: 48px;
    width: 100%;
  }

  .ar-queue-send-all .button {
    height: 48px;
  }

  .ar-queue-card {
    margin-bottom: 80px;
  }

  .ar-queue-warn {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .ar-queue-warn a {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  .ar-queue thead,
  .ar-queue td.ar-queue-tier,
  .ar-queue td.ar-queue-lang,
  .ar-queue td.ar-queue-count {
    display: none;
  }

  .ar-queue tbody tr {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 10px 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px 0;
  }

  .ar-queue tbody td {
    border-bottom: 0;
    padding: 0;
  }

  .ar-queue td.empty-state {
    grid-column: 1 / -1;
  }

  .ar-queue td.ar-queue-client a {
    align-items: center;
    display: inline-flex;
    font-weight: 600;
    min-height: 44px;
  }

  .ar-queue td.ar-queue-client .bi-phone-only {
    display: block;
  }

  .ar-queue td.ar-queue-amount {
    font-weight: 600;
    max-width: none;
    padding-top: 12px;
  }

  .ar-queue td.ar-queue-status,
  .ar-queue td.ar-queue-actions {
    grid-column: 1 / -1;
  }

  .ar-queue-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ar-queue-buttons > a,
  .ar-queue-buttons form .button,
  .ar-queue-buttons form .button-secondary {
    justify-content: center;
    min-height: 44px;
    width: 100%;
  }

  .ar-queue-skip {
    grid-column: 1 / -1;
  }

  .ar-queue .ar-queue-skip > summary {
    align-items: center;
    display: flex;
    height: 44px;
    justify-content: center;
    width: 100%;
  }

  .ar-queue-skip-form {
    min-width: 0;
  }

  .ar-queue-skip-form button {
    justify-self: stretch;
    min-height: 44px;
  }
}

/* === end Priminimai (P3) === */

/* === Priminimai (P4) === */
/* K-6593 (reminders design P4): the queue letter, as
   saltiniai/priminimai-maketai/html/Eile-laiskas.dc.html lays it out, on
   R3's 400px columns, the header, `.letter`/`.itab`, `.drop`, `.seg` and
   `.kv`. `.ar-letter-row` is a label (or a status line) with its control
   on the right; `.ar-letter-actions` is "Būsena"'s full-width stack, the
   primary button 48px as drawn. */
.ar-letter-row,
.ar-letter-status {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.ar-letter-status {
  justify-content: flex-start;
}

.ar-letter-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ar-letter-actions .button,
.ar-letter-actions > .button-secondary,
.ar-letter-skip > summary {
  justify-content: center;
  width: 100%;
}

.ar-letter-actions .ar-letter-send {
  height: 48px;
}

.ar-letter-skip > summary {
  align-items: center;
  display: flex;
  list-style: none;
  min-height: 40px;
  text-decoration: none;
}

.ar-letter-skip > summary::-webkit-details-marker {
  display: none;
}

.ar-letter-skip > form {
  margin-top: 8px;
}

@media (max-width: 720px) {
  .ar-letter-actions > .button-secondary,
  .ar-letter-skip > summary {
    min-height: 44px;
  }
}

/* === end Priminimai (P4) === */

/* === Priminimai (P5) === */
/* K-6615 (reminders design P5): the Dėmesio screen as
   saltiniai/priminimai-maketai/html/Demesio.dc.html lays it out, on P1's
   `.fnd` decision card, `.seg`, `.sel`, `.bi-toolbar` and `details.how`.
   Here only the list's own arrangement: the cards 12px apart, a form in the
   actions column as wide as the column, the counter-date row, and the
   reason field that "Atmesti su priežastimi…" opens under the evidence. */
.ar-findings {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ar-finding-head {
  gap: 10px;
}

.fnd-actions form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.fnd-actions .button,
.fnd-actions .button-secondary,
.fnd-actions .link-button {
  justify-content: center;
  text-align: center;
  width: 100%;
}

.fnd-actions form.ar-finding-counter {
  flex-direction: row;
}

.ar-finding-counter input {
  flex: 1;
  min-width: 0;
}

.fnd-actions .ar-finding-counter .button-secondary {
  width: auto;
}

.fnd-actions label.button-secondary {
  cursor: pointer;
}

.ar-finding-dismiss {
  background: var(--bg);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
  padding: 12px;
}

.ar-finding-dismiss textarea {
  background: var(--surface);
  min-height: 64px;
}

.ar-finding-dismiss-foot {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .ar-finding-dismiss-foot > * {
    min-height: 44px;
  }
}

/* === end Priminimai (P5) === */

/* === Priminimai (P6) === */
/* K-6662 (reminders design P6): Klientai, Klientas and Elgsenos ataskaita
   as saltiniai/priminimai-maketai/html/Klientai.dc.html, Klientas.dc.html
   and Elgsenos-ataskaita.dc.html lay them out, on the library's `.bi-*`
   head/toolbar/columns, `.seg`, `.tl`, `.sw`, `.kpi`, `.bi-bars` and
   `details.how`. Here only the search's 260x40 box, the status chips' row
   and the month columns' 140px height. */
.ar-client-search input[type="search"] {
  height: 40px;
  width: 260px;
}

.ar-client-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ar-report-bars {
  height: 140px;
}

/* Klientas' state form labels its fields in sentence case, the same weight
   and shade as the switch rows' own labels (`.sw-label b`), as drawn. */
.ar-client-state .field > label:not(.checkbox-label) {
  color: color-mix(in srgb, var(--text) 55%, var(--muted));
  font-size: var(--fs-field-value);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 720px) {
  .ar-client-search,
  .ar-client-search input[type="search"] {
    width: 100%;
  }

  .ar-client-state .ar-letter-row > .link-button {
    min-height: 44px;
  }

  /* A client card is the name, the debt and the chips; an empty segment is
     left out (the library's `.bi-wide-only` loses to the card and segment
     rules' own `display`). */
  .ar-clients.rt-cards > tbody > tr > td.bi-wide-only,
  .ar-client-seg a.bi-wide-only {
    display: none;
  }

  /* "Iš viso" as the invoice cards' last card: the sum, no column labels. */
  .ar-client-invoices.rt-cards > tbody > tr.tot > td:empty {
    display: none;
  }

  .ar-client-invoices.rt-cards > tbody > tr.tot > td::before {
    content: none;
  }
}

/* === end Priminimai (P6) === */

/* === Priminimai (P7) === */
/* K-6732 (reminders design P7): Istorija, Žiniaraščiai and Susiejimai as
   saltiniai/priminimai-maketai/html/Istorija.dc.html, Ziniarasciai.dc.html
   and Susiejimai.dc.html lay them out, on the library's `.bi-*` head and
   tool row, `.seg`, `.sel`, `.kv`, `.letter`, `.drop` and `.ev`. Here only
   the history's 420px event column (open once a row is read), the event's
   text box and assign form, the upload zone while a file is dragged over
   it, and the unmatched code's one-row list + buttons. */
.ar-events {
  align-items: start;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}

.ar-events--open {
  grid-template-columns: minmax(0, 1fr) 420px;
}

.ar-events > .card {
  margin: 0;
}

.ar-event-table tbody tr[data-event-type] {
  cursor: pointer;
}

/* The type is the row's link, drawn as the mockup's plain text. */
.ar-event-table td > a {
  color: inherit;
  text-decoration: none;
}

.ar-nowrap {
  white-space: nowrap;
}

.ar-event-head {
  align-items: center;
  gap: 8px;
}

.ar-event-direction svg {
  vertical-align: -2px;
}

.ar-event-panel {
  margin: 0;
}

.ar-event-page {
  max-width: 640px;
}

.ar-event-text {
  font-size: var(--fs-field-value);
  max-height: 160px;
  overflow-y: auto;
}

.ar-event-assign {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

/* "Priskirti klientą" in sentence case, as Klientas' state form labels. */
.ar-event-assign .field > label {
  color: color-mix(in srgb, var(--text) 55%, var(--muted));
  font-size: var(--fs-field-value);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.ar-event-sel,
.ar-mapping-sel {
  display: flex;
  min-width: 0;
}

.ar-event-sel select,
.ar-mapping-sel select {
  flex: 1;
  min-width: 0;
}

.ar-statement-errors {
  margin-top: 4px;
}

.drop.drop--over {
  border-color: var(--brand);
}

.ar-mapping-form {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.ar-mapping-sel {
  flex: 1;
  min-width: 240px;
}

@media (max-width: 720px) {
  .ar-mapping-form {
    width: 100%;
  }

  .ar-mapping-sel {
    flex-basis: 100%;
    min-width: 0;
  }

  .ar-mapping-form > .button-small {
    flex: 1;
    justify-content: center;
    min-height: 44px;
  }

  .ar-statement-errors summary {
    align-items: center;
    display: flex;
    min-height: 44px;
  }
}

/* === end Priminimai (P7) === */

/* === Priminimai (P8) === */
/* K-6780 (reminders design P8): Šablonas and Nustatymai as
   saltiniai/priminimai-maketai/html/Sablonas.dc.html and Nustatymai.dc.html
   lay them out. Tokens only -- no new hue. */
.ar-template-form .field,
.ar-settings-form .field {
  margin: 0;
  min-width: 0;
}

/* The merge-field chips under the letter text: a monospace tag that
   inserts its field at the cursor. */
.ar-merge-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ar-merge-field {
  background: var(--bg);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  padding: 4px 8px;
}

/* Nustatymai: the tiers as chips with a remove cross, then "+ Pridėti". */
.ar-tier-chips {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ar-tier-chip {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  display: inline-flex;
  font-size: var(--fs-control);
  font-variant-numeric: tabular-nums;
  gap: 6px;
  height: 32px;
  padding: 0 10px 0 12px;
}

.ar-tier-chip-remove {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  padding: 0;
}

.ar-tier-chips input.ar-tier-new {
  height: 32px;
  width: 80px;
}

/* Pasenęs pažadas (200px) | Siuntėjo vardas | Siuntėjo el. paštas. */
.ar-settings-row {
  display: grid;
  gap: 16px;
  grid-template-columns: 200px repeat(2, minmax(0, 1fr));
}

.ar-mailbox-link {
  align-self: flex-start;
}

/* Šablonai: "Redaguoti" at the row's right end. */
.ar-templates td.fin-actions {
  text-align: right;
}

@media (max-width: 720px) {
  .ar-settings-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .ar-merge-field,
  .ar-tier-chip,
  .ar-tier-chips input.ar-tier-new,
  .ar-tier-chips .link-button,
  .ar-mailbox-link {
    min-height: 44px;
  }

  .ar-tier-chip {
    padding-right: 0;
  }

  /* Šablonai: a group head stays one plain heading line between the row
     cards, not a card of its own labelled with the first column. */
  .registry-table.rt-cards.ar-templates > tbody > tr.grp {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 8px 0 0;
  }

  .registry-table.rt-cards.ar-templates > tbody > tr.grp > td {
    background: transparent;
    display: block;
    padding: 0;
    text-align: left;
  }

  .registry-table.rt-cards.ar-templates > tbody > tr.grp > td::before,
  .registry-table.rt-cards.ar-templates td.fin-actions::before {
    content: none;
  }

  .ar-tier-chip-remove {
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }
}

/* === end Priminimai (P8) === */

/* === Priminimai (plotis) === */
/* K-6905: the reminders screens in a 1366-1440 window, where <main> is
   930-1000px. Table headings stay on one line; the columns and buttons
   rearrange instead of squeezing the text. A phone keeps its own layout.
   Tokens only. */
@media (min-width: 721px) {
  .ar-debtors th,
  .ar-client-invoices th,
  .ar-report-invoices th,
  .ar-mappings th {
    white-space: nowrap;
  }

  .ar-mappings td.ar-mapping-name {
    min-width: 180px;
  }

  /* The contractor select takes the cell's width, not its longest
     option's, so the name column is not squeezed. */
  .ar-mapping-sel select {
    width: 100%;
  }
}

/* K-6963: Apžvalga and Klientas fold by <main>'s own width, not the
   window's -- on pp-bo <main> was 928px while the window queries saw a wide
   screen, so the side column stayed beside the debtors table (540>426px)
   and the cycle kept six 106px steps. Under 1100px the side column follows
   the main one, its cards in a row, so the tables get the whole width.
   The wrapper keeps `.page`'s own grid gap between its blocks. */
.ar-body {
  container: ar-body / inline-size;
  display: grid;
  gap: var(--space-4);
}

.ar-body > * {
  min-width: 0;
}

@media (min-width: 721px) {
  @container ar-body (max-width: 1099px) {
    .ar-columns {
      grid-template-columns: minmax(0, 1fr);
    }

    .ar-columns > .bi-side {
      align-items: start;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .ar-today > .kpi {
      gap: 12px;
      padding: 16px 14px;
    }

    /* With a three-digit count "reikia žmogaus sprendimo" had 164px and
       broke in two; the whole tile is the door, so the arrow goes and the
       count takes the phone's size. */
    .ar-today-go {
      display: none;
    }

    .ar-today-n {
      font-size: 1.625rem;
    }

    .ar-cycle {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .ar-client-invoices .fw-num {
    white-space: nowrap;
  }
}

@media (min-width: 721px) and (max-width: 1499px) {
  /* Elgsenos ataskaita: the invoices under the monthly totals. */
  .ar-report-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Susiejimai: the select on its own line, "Susieti" and "Sukurti iš
     Edranos" together under it. */
  .ar-mapping-sel {
    flex-basis: 100%;
  }
}

/* === end Priminimai (plotis) === */

/* === Rodikliai (R9) === */
/* K-6445 (BI design R9): Importas and Nustatymai, as saltiniai/bi-maketai/
   html/Importas.dc.html and Nustatymai.dc.html lay them out, on R1/R2/R4
   components. Tokens and color-mix of two tokens only -- no new hue. */

/* The five status tiles: label, who files it and when, one badge. The tile
   still owed something wears the mockup's 2px gold frame. */
a.kpi.bi-tile {
  color: inherit;
  text-decoration: none;
}

a.kpi.bi-tile:hover {
  border-color: var(--line-strong);
}

.kpi.bi-tile--due,
.kpi.bi-tile--due:hover {
  border: 2px solid var(--brand);
  padding: 15px 17px;
}

.bi-tile-who {
  font-size: 0.9375rem;
  font-weight: 600;
}

.bi-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.bi-stack > .card {
  margin: 0;
}

/* The week picker's options are long ("2026 · 39 sav. · 09-21–09-27 · …"):
   the switcher wraps under the title instead of squeezing it to a sliver. */
.bi-chead:has(.bi-wk-select) {
  flex-wrap: wrap;
}

.bi-chead:has(.bi-wk-select) > div:first-child {
  flex: 1 1 14rem;
}

/* The quarter picker's long option ("2026 III · be gamybos eksporto") stays
   inside its card. */
.bi-chead-tools > .sel,
.bi-chead-tools > .sel select {
  max-width: 100%;
  min-width: 0;
}

/* The week switcher around the picker's own select: ‹ [select] ›. */
.wk.bi-wk-select select {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 0;
  font-size: var(--fs-control);
  font-weight: 600;
  height: 100%;
  padding: 0 8px;
  width: auto;
}

.bi-wk-label {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Forms laid out as the mockup: two equal columns, or one wide and one
   narrow (Prognozė | Tikrumas, Metai | Mėnuo). */
.bi-form-2 {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bi-form-2--narrow-end {
  align-items: end;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) 140px;
}

.bi-form-2--narrow-start {
  align-items: end;
  gap: 10px;
  grid-template-columns: 90px minmax(0, 1fr);
}

.bi-form-2 > .field,
.bi-form-stack > .field {
  margin: 0;
  min-width: 0;
}

.bi-form-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bi-actions-end {
  justify-content: flex-end;
  margin: 0;
}

.bi-sep {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

.bi-sec-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

/* The upload zones: a dashed frame, an icon, the text, the button. */
.bi-drop {
  align-items: center;
  border: 1.5px dashed var(--line-strong);
  border-radius: 10px;
  display: flex;
  gap: 14px;
  padding: 18px;
}

.bi-drop--stack {
  align-items: stretch;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}

.bi-drop-icon {
  color: var(--brand-dark);
  flex: none;
}

.bi-drop-text {
  flex: 1;
  min-width: 0;
}

.bi-drop-title {
  font-size: var(--fs-control);
  font-weight: 500;
}

/* Nustatymai: the visibility table on the left, the press KPI settings on
   the right, half and half as the mockup draws them -- while each half still
   has the ~640px the four-position table needs; beside the side navigation
   (a 1002px main at 1440) they stack. */
.bi-columns--settings {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 640px), 1fr));
}

/* The four-position switch: B1's `.seg` look on radio buttons, so it is
   still one form field (`block-<name>`) and works without JavaScript. */
.seg.bi-seg-radio {
  flex-wrap: nowrap;
}

.bi-seg-radio label {
  cursor: pointer;
  display: inline-flex;
  position: relative;
}

.bi-seg-radio input {
  inset: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
}

.bi-seg-radio span {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--muted);
  display: inline-flex;
  font-size: var(--fs-field-value);
  height: 32px;
  padding: 0 10px;
}

.bi-seg-radio input:checked + span {
  background: color-mix(in srgb, var(--brand-tint) 70%, var(--rail-bg));
  color: var(--text);
  font-weight: 600;
}

.bi-seg-radio input:focus-visible + span {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.bi-visibility td {
  vertical-align: middle;
}

.bi-vis-state {
  text-align: right;
  white-space: nowrap;
}

.bi-vis-group > summary {
  cursor: pointer;
  font-size: var(--fs-control);
  font-weight: 500;
  padding: 10px 12px;
}

.bi-vis-same {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 12px 10px;
}

/* One press KPI setting: its label on the left, a 110px box on the right. */
.bi-setting {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.bi-setting label {
  flex: 1 1 auto;
  font-size: var(--fs-field-value);
  min-width: 0;
}

.bi-setting input[type="text"],
.bi-setting-input[type="text"] {
  flex: none;
  text-align: right;
  width: 110px;
}

.bi-sum {
  margin: 0;
}

@media (max-width: 720px) {
  .bi-form-2,
  .bi-form-2--narrow-end,
  .bi-form-2--narrow-start {
    grid-template-columns: minmax(0, 1fr);
  }

  .bi-drop {
    align-items: stretch;
    flex-direction: column;
  }

  .bi-columns--settings {
    grid-template-columns: minmax(0, 1fr);
  }

  .seg.bi-seg-radio {
    flex-wrap: wrap;
  }

  .bi-seg-radio span,
  .bi-vis-group > summary {
    min-height: 44px;
  }

  .bi-vis-state {
    text-align: left;
    white-space: normal;
  }

  .bi-drop .link-button,
  .bi-form-stack .button-small,
  .bi-drop .button-small,
  .bi-actions-end button {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  /* The week switcher fits the line; its arrows are 44 px targets. */
  .bi-chead-tools:has(.bi-wk-select),
  .wk.bi-wk-select {
    max-width: 100%;
    min-width: 0;
  }

  .wk.bi-wk-select {
    height: auto;
  }

  .wk.bi-wk-select a {
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0;
  }

  .wk.bi-wk-select select {
    flex: 1 1 auto;
    min-height: 44px;
    min-width: 0;
  }

  /* K-3223 kept: a stacked form's submit takes the full line on a phone. */
  .bi-form-stack > button,
  .bi-actions-end > form,
  .bi-actions-end button {
    justify-content: center;
    width: 100%;
  }
}

/* === end Rodikliai (R9) === */

/* koordinatoriaus-nota-w1-bylos-pamatai-ir-vedlio-meniu.md (2026-08-14),
   built from PERSONALO_VALDYMO_SCOPE_2026-08-13.md §8: "generuojama
   aplinkybių santrauka (A-H žemėlapio stiliumi: kas žinoma, ko trūksta,
   su varpeliais trūkstamiems)" above a tabbed card. Not a .kpi-card variant
   -- .kpi-card is one big <strong> digit with no shape for "known value OR
   a missing-with-a-link state" side by side, which is what a circumstances
   field needs. Missing items reuse the existing .registry-badge--warning
   badge + .link-button link instead of a new bell icon: grepped the whole
   app first, no bell glyph exists anywhere to match (D7 -- colour/an icon
   never carries the meaning alone, the badge's own text does). */
.circumstances-summary {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  margin-bottom: var(--space-4);
}

.circumstances-item {
  display: grid;
  gap: 0.3rem;
}

.circumstances-item-label {
  color: var(--muted);
  font-size: var(--fs-field-label);
}

.circumstances-item-value {
  font-weight: 600;
}

.circumstances-item--missing .circumstances-item-value {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* R7 §3.d: the findings progress bar on a module card. Same track+fill
   shape .safety-progress-track already carries (bo/safety templates,
   worker 2's own folder, left untouched here) -- generalised under a
   module-agnostic name so a second caller does not have to reach into
   another app's CSS to reuse it. */
.progress-track {
  background: var(--bg);
  border-radius: var(--radius-pill);
  height: 0.5rem;
  overflow: hidden;
}

.progress-track > span {
  background: var(--success);
  display: block;
  height: 100%;
}

/* K-7292 (Dokumentai D1, mockup D-Registras): the document registry's
   "Signed" cell -- a 104px bar with "38/42" after it. Green once everyone
   has signed, amber from 60 %, red below (the view's `signed_band`). */
.documents-signed {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  white-space: nowrap;
}

.documents-signed .progress-track {
  background: var(--rail-bg);
  flex: none;
  width: 104px;
}

.documents-signed .progress-track--warning > span {
  background: var(--warning);
}

.documents-signed .progress-track--danger > span {
  background: var(--danger);
}

.documents-nowrap {
  white-space: nowrap;
}

/* K-10587 (audit 2026-10-11): the long Case column on Acquisitions >
   Attention squeezed the "Since" date, which broke at its dash into
   "2026-" / "10-11" at 1440 px; the date stays on one line. */
.isig-nowrap {
  white-space: nowrap;
}

/* The "overdue" line under a late deadline stays red -- `.registry-table
   td small` would otherwise grey it. */
.documents-registry td small.dn {
  color: var(--danger);
}

/* K-7294 (Dokumentai D3, mockup D-Ikelimas): "Upload a new revision" --
   the revision beside who it binds, two equal columns (one under 900 px),
   then the confirmation and the submit in one bar. */
.documents-upload {
  display: flex;
  flex-direction: column;
  gap: var(--gap-layout);
}

.documents-upload-grid {
  align-items: start;
  display: grid;
  gap: var(--gap-layout);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.documents-upload-grid .card > div > .field:last-child {
  margin-bottom: 0;
}

/* The drop zone is the file input's second label, so `.field > label`'s
   small-caps label style and `.drop`'s pushed-right last child are undone. */
.field > label.documents-upload-drop {
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-field-value);
  letter-spacing: normal;
  padding: 18px 20px;
  text-transform: none;
}

.documents-upload-drop > .drop-text {
  margin-left: 0;
}

.documents-upload-drop b {
  color: var(--text);
}

/* The file input under the drop zone: the base `input:not(...)` rule's
   `width: 100%` outranks `.visually-hidden` and, on an absolute box, the
   page scrolled sideways to 1786 px at 1366. */
.documents-upload input.visually-hidden {
  padding: 0;
  width: 1px;
}

.documents-upload-confirm {
  align-items: center;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.documents-upload-confirm .field {
  margin: 0;
}

.documents-upload-confirm .checkbox-label {
  font-size: var(--fs-field-value);
  margin-top: 0;
}

.documents-upload-confirm .button {
  flex: none;
}

.documents-upload-ai summary {
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-field-value);
}

.documents-upload-ai[open] summary {
  margin-bottom: var(--space-2);
}

.documents-upload-ai p {
  margin: 0;
}

@media (max-width: 900px) {
  .documents-upload-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .documents-upload-confirm {
    align-items: stretch;
    flex-direction: column;
  }
}

/* A tag field with search, laid by `js/tag-field.js` (K-10372) over
   a multiple select that stays in the form (visually hidden): the chosen
   options as chips with a remove button, a search box after them, and the
   matching options in a list under the box. */
.tag-field {
  position: relative;
}

.tag-field-chips {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  min-height: var(--control-h);
  padding: 4px 6px;
}

.tag-field-chips:focus-within {
  border-color: var(--brand);
}

.tag-field-chip {
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  display: inline-flex;
  font-size: var(--fs-field-value);
  gap: 2px;
  max-width: 100%;
  min-height: 26px;
  padding: 0 2px 0 10px;
}

.tag-field-chip > span {
  overflow-wrap: anywhere;
}

.tag-field-chip > button,
.tag-field-options button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}

.tag-field-chip > button {
  padding: 0 6px;
}

.tag-field-chips > li:last-child {
  flex: 1 1 8rem;
  min-width: 8rem;
}

.tag-field-chips input[type="search"] {
  border: 0;
  padding: 2px 4px;
}

.tag-field-chips input[type="search"]:focus {
  outline: none;
}

.tag-field-options {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
  left: 0;
  list-style: none;
  margin: 4px 0 0;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 5;
}

.tag-field-options button {
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: var(--fs-field-value);
  min-height: 36px;
  padding: 0 10px;
  text-align: left;
  width: 100%;
}

.tag-field-options button:hover,
.tag-field-options button:focus-visible {
  background: var(--brand-tint);
}

/* K-7294: "New document" -- the same fields in a 720 px card, two per row. */
.documents-new-card {
  max-width: 720px;
}

/* K-7297 (Dokumentai D4, mockup D-Auditas): the audit report's code in the
   mockups' small monospace, the signed count right-aligned in even digits. */
.documents-audit .documents-audit-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  white-space: nowrap;
}

.documents-audit .documents-audit-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The printed audit report is one A4 landscape sheet run: only this screen
   switches to the named page, the table prints whole (no scroll clip, no
   card frame), its header repeats on every sheet and no row splits. */
@page documents-audit {
  margin: 12mm;
  size: A4 landscape;
}

@media print {
  :root:has(.documents-audit) {
    page: documents-audit;
  }

  :where(body:has(.documents-audit)) .app-footer {
    display: none;
  }

  .documents-audit {
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .documents-audit .registry-table-wrap {
    overflow: visible;
  }

  .documents-audit .registry-table thead {
    display: table-header-group;
  }

  .documents-audit .registry-table tr {
    break-inside: avoid;
  }
}

/* Koordinatoriaus nota 2026-08-13 (w4-vedlio-radiniai-08-13-vakaras.md),
   findings 1/5/6: the hire wizard's step nav (`_hire_steps_nav.html`) used
   to be unstyled `<span>`s joined by middots -- `.is-current` had no rule
   anywhere in this file (confirmed by grep before writing this one), so
   neither "which step is this" nor "is this step actually done" read as
   anything but plain text. A real horizontal stepper, reusing the same
   ✓/⌛/○ glyph vocabulary hire_summary.html's own .kpi-card grid already
   established for the same three states. */
.hire-steps {
  margin-bottom: var(--space-4);
}

.hire-steps-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
}

.hire-step {
  background: var(--bg);
  border-radius: var(--radius-pill);
  display: inline-flex;
}

.hire-step > a,
.hire-step > span {
  color: var(--muted);
  display: inline-block;
  font-size: var(--fs-field-value);
  padding: 0.35rem 0.75rem;
  text-decoration: none;
}

.hire-step > a {
  color: var(--text);
}

.hire-step > a:hover {
  color: var(--brand-dark);
  text-decoration: underline;
}

.hire-step.is-current {
  background: var(--brand-tint);
}

.hire-step.is-current > a,
.hire-step.is-current > span {
  color: var(--brand-dark);
  font-weight: 700;
}

/* SIENA v4 (docs/plans/w1-siena-v4-sutarta-su-savininku.md) RETIRED the
   R7 §3 sections these classes served (KPI strip's module-rehearsal cards,
   the Bangos ir vartai gate list) -- `.projektas-module-card*`/
   `.projektas-gate-card`/`.projektas-gate-list`/`.projektas-gate-mark`/
   `.projektas-gate-when` are removed here, not left dead: none of them has
   a second caller (`grep -rl` against every template, 2026-08-07). Their
   replacements are the tabs 1-4 component set below. `.progress-track`
   (declared above this block) is untouched -- it is a generic, module-
   agnostic component with its own doc note about staying reusable for a
   second caller, unlike the projektas-specific names removed here. */

/* The amber "Kas čia: ..." explainer box -- non-negotiable #4 (the owner
   named it explicitly): "do not shorten it into a subtitle, do not move it
   behind a tooltip, do not drop it". Since K-8215 the amber box stays only on
   the Findings tab (`#rato-srautas`); the other four wall tabs show the same
   note as a quiet line (the `:not(#rato-srautas)` override further down). No
   existing box component carried this shape (`.registry-badge` is a pill,
   not a block), hence new. */
.projektas-explainer {
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--fs-field-value);
  line-height: 1.5;
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
}

.projektas-explainer strong {
  color: var(--warning);
}

/* item A4: the one ad hoc `style="margin-top: 1.5rem"` on tab 3's own
   "every work item" eyebrow (dashboard.html) replaced with a named class --
   "one consistent grid" means no inline layout values on this page, not
   only consistent card widths. */
.projektas-section-gap {
  margin-top: 1.5rem;
}

/* K-3493: "New project" default-stage rows (projektas_form.html). One row
   = bare checkbox + two stacked text inputs (name, gate). `minmax(0, 1fr)`
   not `1fr`: a bare `1fr` track still lets a long gate sentence push the
   card past the viewport at 390px (bare-1fr-grid-track lesson, K-3139).
   The checkbox is deliberately NOT inside `.checkbox-label`, so main.css's
   own K-45 mobile rule (44px min box) applies to it unchanged. */
.stage-templates {
  border: 1px solid var(--line, #e2e5ea);
  border-radius: var(--radius-md);
  margin-top: 1rem;
  padding: 0.75rem 1rem;
}

.stage-template-row {
  align-items: start;
  display: grid;
  gap: 0.5rem 0.75rem;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 0.5rem 0;
}

.stage-template-row + .stage-template-row {
  border-top: 1px solid var(--line, #e2e5ea);
}

.stage-template-row input[type="checkbox"] {
  margin-top: 0.4rem;
}

.stage-template-texts {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.stage-template-texts label {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.stage-template-texts input[type="text"] {
  min-width: 0;
  width: 100%;
}

/* K-138 tab 6 (Sistemos srautas): mermaid.js renders the diagram as an SVG
   whose natural width can exceed a narrow viewport -- same "scroll the
   block, not the page" rule `.registry-table-wrap` already applies to a
   wide table (acceptance A3: works at 390px via horizontal scroll INSIDE
   this wrapper). */
.projektas-diagram-wrap {
  max-width: 100%;
  overflow-x: auto;
}

/* Tab 1 -- the phase-gate flow. `.projektas-flow-arrow` is the plain
   connector between cards; a NAMED gate on the main path (`etapas.gate_po`)
   is no longer a connector of its own -- its diamond
   (`.projektas-flow-gate__mark`) lives in the phase card's
   `.projektas-phase__gate` row (K-8236).
   T2 finding R1 (`docs/verification/ekrano-patikros/
   siena-v4-2026-08-07-1400.md`, 2026-08-07): the row's cards used to carry
   `flex-shrink: 0` (the "0" in the old `flex: 1 0 11rem`), so six 11rem
   cards plus five gates never fit `.page`'s 1200px budget and cards 5-6
   were cut behind an easy-to-miss scrollbar. Cards now shrink before the
   row does anything else (`.projektas-phase` below); `flex-wrap` is the
   fallback for whatever a shrunk row still cannot fit, wrapping into
   "two rows of three" the way the finding's own suggestion described --
   the natural wrap point falls after a card (a gate is never the row's
   last item), so a wrapped second row starts with that gate, still
   reading left-to-right as one chain. */
.projektas-flow-row {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding-bottom: 0.5rem;
  row-gap: 0.75rem;
}

/* docs/plans/koordinatoriaus-nota-w1-siena-ivadinis-logo-porastes-data.md,
   item A4 ("one consistent grid on every tab -- same card widths"): bumped
   9rem -> 10rem, a step closer to tab 4's `.projektas-verdict-grid` 13rem
   tiles without reintroducing the overflow T2 finding R1 fixed (six phase
   cards + five gate connectors share one flex-wrap row; tab 4's grid has
   no such row-length constraint, so its tiles can run wider). Full parity
   with tab 4's width was tried and reverted under the old 1200px `.page`
   cap -- documented here rather than silently not attempted, S15.
   Recounted for the 1600px cap (K-6898, K-7017): tab 1's gate row sits
   directly in `.projektas-tabpanel` -> `main.page` (no `.card`), so it
   gets at most 1600 - 48 (`.page` padding) = 1552px; six 13rem cards
   (1248px) + five 0.5rem card margins (40px) + five 5rem gates (400px) =
   1688px, 136px too wide before the "Today" marker, so the tab 1 gate row
   still wraps at every window width with 13rem. 10rem needs 1400px and
   fits. */
.projektas-phase {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  flex: 1 1 10rem;
  margin-left: 0.5rem;
  min-width: 10rem;
  padding: 0.75rem 0.85rem;
  position: relative;
}

.projektas-phase:first-child {
  margin-left: 0;
}

/* Non-negotiable #5: phase cards stay visually distinct by state. */
.projektas-phase--done {
  background: var(--success-bg);
  border-color: var(--success);
}

.projektas-phase--now {
  background: var(--warning-bg);
  border-color: var(--warning);
  box-shadow: 0 0 0 2px var(--warning-bg);
}

.projektas-phase--dashed {
  background: var(--bg);
  border-style: dashed;
}

/* T2 finding R2: card titles 13px -> 15px, card body 12px -> 13px (reuses
   the field-value token, which is already 13px). */
.projektas-phase h4 {
  font-size: 0.9375rem;
  margin: 0 0 0.2rem;
}

.projektas-phase__when {
  color: var(--muted);
  display: block;
  font-size: var(--fs-field-label);
  margin-bottom: 0.4rem;
}

.projektas-phase p {
  color: var(--muted);
  font-size: var(--fs-field-value);
  line-height: 1.4;
  margin: 0;
}

/* K-2947: the screen-managed stage's own footer (responsible -> gate note
   -> status -> task count -> actions) -- only ever rendered for
   `saltinis="ekranas"` cards, stacked in a narrow ~10rem card the same way
   `.projektas-darbai-dabar__row` already stacks onto small widths. */
.projektas-phase__footer {
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  font-size: var(--fs-field-value);
  gap: 0.3rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.projektas-phase__vartai {
  color: var(--muted);
  margin: 0;
  white-space: pre-line;
}

.projektas-phase__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.projektas-phase__actions form {
  display: inline;
}

/* K-45 touch-target rule: six controls sit in this one narrow (~10rem)
   card, several of them (the reorder glyphs, "Edit") only a few characters
   wide -- the global `button[type=submit]` mobile rule (`min-height: 44px`,
   no matching `min-width`) does not reach plain `<a>` links at all and
   still leaves an icon-only button ~9px wide. `inline-flex` + centering
   keeps the visible glyph/text unchanged while growing the tappable box,
   same technique `.help-link` above already uses for its own icon button. */
.projektas-phase__actions a,
.projektas-phase__actions button {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}

/* item A4 ("same badge positions"): was a ribbon absolutely overlapping the
   card's own top border (`position: absolute; top: -0.55rem`) -- moved into
   normal flow, first element before the title, matching tab 4's
   `.projektas-verdict-tile` badge placement (a `.registry-badge` already
   sitting in-flow above its own `<h3>`) rather than the reverse: tab 4's
   badge stays `.registry-badge`, the shared component 20+ other screens in
   this app also use, so this direction is the one that does not cost that
   consistency to gain this one. */
/* K-3647: the "Kortelė" summary card's own etapai strip -- one
   `.registry-badge` chip per main-path stage, wrapping onto its own line at
   390px (non-negotiable #5's "one column" mobile rule for this whole
   screen) since `.registry-badge` chips are inline and this row is the
   ONLY multi-chip line on the card. */
.projektas-kortele-etapai {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0;
}

.projektas-kortele-etapas--current {
  outline: 2px solid var(--brand-dark);
  outline-offset: 1px;
}

/* `.settings-advanced > summary`'s own pattern (44px touch target, K-45) --
   the collapsible "detailed build wall" toggle below the Kortelė card. */
.projektas-siena > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: var(--fs-section-title);
  font-weight: 600;
  min-height: 44px;
}

.projektas-phase__badge {
  border-radius: var(--radius-pill);
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-bottom: 0.35rem;
  padding: 0.1rem 0.5rem;
  text-transform: uppercase;
}

.projektas-phase__badge--done {
  background: var(--success);
  color: #fff;
}

.projektas-phase__badge--now {
  background: var(--warning);
  color: #fff;
}

/* T2 finding R4: this bucket's own label moved from "Proposed"/"Siūloma"
   to "Coming"/"Ateina" (`views.py::ETAPAS_STATE_LABELS`); the class name
   follows the same `card.busena` value it always has. */
.projektas-phase__badge--upcoming {
  background: var(--muted);
  color: #fff;
}

/* item A2: this badge only ever renders "Ivas" (the parallel production
   lane, views.py's own `_annotate_phase` docstring) -- folded into the
   WORKERS gray bucket, same as `.projektas-actor--iv` above and for the
   same reason (was `--info`/blue). */
.projektas-phase__badge--actor {
  background: var(--muted);
  color: #fff;
}

/* K-8190 (P-Lenta): the badge and the period share the phase card's top
   row on both the wall and the board. */
.projektas-phase__top {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.projektas-phase__top .projektas-phase__badge,
.projektas-phase__top .projektas-phase__when {
  margin-bottom: 0;
}

/* K-8190 (P-Lenta): the board's own layout. "Where we are" wide beside a
   narrow "Waiting on you" -- stacked once that card holds a task table,
   which cannot fit 300px. The phase cards sit four to a row (fewer once a
   card would drop under 12rem, one on a phone) instead of the wall's flex
   chain; done is a soft green, the current one an amber frame, a parallel
   one dashed. Everything below is scoped to the board's own classes, so
   the wall's flow row keeps its look. */
.projektas-lenta-top {
  align-items: start;
  display: grid;
  gap: var(--gap-stack);
  grid-template-columns: minmax(0, 1fr) 300px;
}

.projektas-lenta-top--stacked {
  grid-template-columns: minmax(0, 1fr);
}

/* K-8204 (P-Siena): the wall reuses the board's wide/narrow row -- each
   side a column of cards. A warning card carries a thick status-coloured
   left edge; the KPI tiles share one row at equal width, however many
   tiles the strip holds (the gate tile is optional). The header's three
   actions wrap under the title on a phone instead of pushing it sideways. */
.projektas-head,
.projektas-head .bi-head-actions {
  flex-wrap: wrap;
}

.projektas-head .bi-head-actions {
  flex-shrink: 1;
  min-width: 0;
}

.projektas-siena-col {
  align-content: start;
  display: grid;
  gap: var(--gap-stack);
  min-width: 0;
}

.projektas-alert {
  border-left-width: 4px;
}

.projektas-alert--warning {
  border-color: var(--warning);
}

.projektas-refresh-button {
  width: 100%;
}

.projektas-kpis .kpi-card small {
  font-size: 0.75rem;
  line-height: 1.35;
}

.projektas-kpis > .dashboard-cards {
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  grid-template-columns: none;
  margin-bottom: 0;
}

.projektas-count {
  color: var(--muted);
  font-size: var(--fs-field-value);
  font-weight: 400;
}

.projektas-flow-row--grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(max(12rem, calc((100% - 30px) / 4)), 1fr));
  padding-bottom: 0;
}

.projektas-flow-row--grid .projektas-phase {
  background: var(--surface);
  border-color: var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 0;
  min-width: 0;
  padding: 12px 14px;
}

.projektas-flow-row--grid .projektas-phase--done {
  background: color-mix(in srgb, var(--success-bg) 45%, var(--surface));
  border-color: color-mix(in srgb, var(--success) 25%, var(--surface));
}

.projektas-flow-row--grid .projektas-phase--now {
  background: color-mix(in srgb, var(--warning-bg) 45%, var(--surface));
  border: 1.5px solid var(--brand);
  box-shadow: none;
}

.projektas-flow-row--grid .projektas-phase--dashed {
  border-color: var(--line-strong);
  border-style: dashed;
}

.projektas-flow-row--grid .projektas-phase__top {
  margin-bottom: 0;
}

.projektas-flow-row--grid .projektas-phase__badge {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.15rem 0.6rem;
  text-transform: none;
}

.projektas-flow-row--grid .projektas-phase__badge--done {
  background: var(--success-bg);
  color: var(--success);
}

.projektas-flow-row--grid .projektas-phase__badge--now {
  background: var(--warning-bg);
  color: var(--brand-dark);
}

.projektas-flow-row--grid .projektas-phase__badge--upcoming,
.projektas-flow-row--grid .projektas-phase__badge--actor {
  background: var(--bg);
  color: var(--muted);
}

.projektas-flow-row--grid .projektas-phase h4 {
  font-size: var(--fs-control);
  line-height: 1.3;
  margin: 0;
}

.projektas-flow-row--grid .projektas-phase__when {
  font-size: 0.75rem;
}

.projektas-flow-row--grid .projektas-phase p {
  color: var(--text);
  line-height: 1.45;
}

.projektas-flow-row--grid .projektas-phase__vartai,
.projektas-flow-row--grid .projektas-phase__footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 2px;
  padding-top: 6px;
}

.projektas-flow-row--grid .projektas-phase__footer {
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.projektas-flow-row--grid .projektas-phase__vartai + .projektas-phase__footer {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.projektas-flow-row--grid .projektas-phase__actions {
  align-items: center;
  border-top: 1px solid var(--line);
  flex-basis: 100%;
  gap: 4px 10px;
  padding-top: 6px;
}

.projektas-flow-row--grid .projektas-phase__actions form {
  display: inline-flex;
  margin: 0;
}

.projektas-flow-row--grid .projektas-phase__actions a,
.projektas-flow-row--grid .projektas-phase__actions button {
  color: var(--brand-dark);
  font-size: 0.75rem;
  height: auto;
  line-height: 1.3;
  min-height: 0;
  min-width: 0;
  padding: 0;
  text-decoration: none;
}

.projektas-flow-row--grid .projektas-phase__actions .projektas-phase__delete {
  color: var(--danger);
}

/* K-8215 (P-Siena-Detali): the wall's "Whole project" tab. The main path is
   a three-column grid of cells -- the phase card with its named gate as the
   card's last row (K-8236); the "Today" marker opens the first not-done
   phase's cell as a dashed line. The further-out row keeps its arrows between equal-width cards. The
   dated gates list is badge | date | title over its sentence. */
.projektas-flow-row--thirds {
  grid-template-columns: repeat(auto-fill, minmax(max(12rem, calc((100% - 20px) / 3)), 1fr));
}

.projektas-flow-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.projektas-flow-cell > .projektas-phase {
  flex: 1 1 auto;
}

.projektas-phase__gate {
  align-items: baseline;
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  font-size: 0.75rem;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 6px;
}

.projektas-flow-cell .projektas-flow-gate__mark {
  display: inline;
  font-size: 0.75rem;
  margin: 0;
}

.projektas-flow-cell > .projektas-flow-today {
  border-left: 0;
  border-top: 2px dashed var(--danger);
  font-size: 0.75rem;
  margin: 0;
  padding: 2px 0 0;
  text-transform: none;
  writing-mode: horizontal-tb;
}

.projektas-flow-row--chain {
  display: flex;
  flex-wrap: wrap;
}

.projektas-flow-row--chain > .projektas-phase {
  flex: 1 1 12rem;
}

.projektas-flow-row--chain > .projektas-flow-arrow {
  flex: 0 0 auto;
  padding: 0;
}

.projektas-vartai__row {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: grid;
  font-size: var(--fs-field-value);
  gap: 12px;
  grid-template-columns: 150px 110px minmax(0, 1fr);
  padding: 10px 0;
}

.projektas-vartai__row:last-child {
  border-bottom: 0;
}

.projektas-vartai__date {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.projektas-vartai__row strong {
  display: block;
  font-weight: 600;
}

.projektas-vartai__row small {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Every wall tab except Findings stacks its cards with the page's own gap;
   the "Here:" note is a quiet line under the tabs, not an amber box. The
   Findings board (`#rato-srautas`) keeps its own spacing and amber box, PJ6. */
.projektas-tabpanel:not([hidden]):not(#rato-srautas) {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.projektas-tabpanel:not(#rato-srautas) > .projektas-explainer {
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  margin: 0;
  padding: 0;
}

.projektas-tabpanel:not(#rato-srautas) > .projektas-explainer strong {
  color: var(--brand-dark);
  font-weight: 500;
}

/* The owner filter: segments with their counts, a label on the left; the
   segments wrap on a phone. */
.projektas-kieno-filter {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 10px;
}

.projektas-kieno-filter__label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.projektas-kieno-filter .seg {
  flex-wrap: wrap;
  max-width: 100%;
}

@media (max-width: 720px) {
  .projektas-lenta-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .projektas-kpis > .dashboard-cards {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
  }

  .projektas-vartai__row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .projektas-vartai__row > :last-child {
    grid-column: 1 / -1;
  }

  /* K-45: the phase actions are touch targets again on a phone. */
  .projektas-flow-row--grid .projektas-phase__actions a,
  .projektas-flow-row--grid .projektas-phase__actions button {
    min-height: 44px;
    min-width: 44px;
  }
}

/* T2 finding R1/R2: gate column widened (4.5rem -> 5rem) and its label
   raised to 12px so a multi-word gate name reads as a couple of short
   lines under the diamond, not one word per line. */
.projektas-flow-arrow {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex: 0 0 5rem;
  flex-direction: column;
  font-size: 0.75rem;
  justify-content: center;
  padding: 0 0.4rem;
  text-align: center;
}

.projektas-flow-gate__mark {
  color: var(--brand-dark);
  display: block;
  font-size: 1.1rem;
  margin-bottom: 0.15rem;
}

/* The "šiandien" marker on the main-path row -- build note: "render a
   šiandien marker on the flow now that dates exist." A dashed red divider,
   not a card of its own, so it reads as a line crossing the flow rather
   than a phase that has no name. */
.projektas-flow-today {
  align-self: stretch;
  border-left: 2px dashed var(--danger);
  color: var(--danger);
  flex: 0 0 auto;
  font-size: 0.625rem;
  font-weight: 700;
  margin-left: 0.5rem;
  padding: 0 0.5rem;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.projektas-flow-branch {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.projektas-flow-branch p {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
  margin: 0;
  max-width: 28rem;
}

/* SIENA V5 (koordinatoriaus-nota-w1-siena-v5-grandine-ir-tabai.md)
   retired tabs 2/3's old seven-step-chain row shape wholesale --
   `.projektas-row*`/`.projektas-chain*`/`.projektas-week*`/
   `.projektas-lane*` are removed here, not left dead, same convention
   this file's own R7 rewrite used above. `.projektas-actor` survives
   UNCHANGED: its four colour/label pairs (you/me/rob/iv) are exactly
   SIENA V5's own "pas ką kamuolys" bar too, reused as-is below rather
   than redeclared under a second name. */
.projektas-actor {
  border-radius: var(--radius-pill);
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.1rem 0.6rem;
  white-space: nowrap;
}

.projektas-actor--you {
  background: var(--warning-bg);
  color: var(--brand-dark);
}

.projektas-actor--me {
  background: var(--info-bg);
  color: var(--info);
}

.projektas-actor--rob,
.projektas-actor--iv {
  background: var(--bg);
  color: var(--muted);
}

/* SIENA V5 §1: the five-square chain -- coloured blocks, never text
   (non-negotiable #1 carried forward), `title` on each square is D7's
   colour-alone escape hatch. `--ret` (a finding sent this item back to
   square 2) is a NEW state this package adds: the warm "now" fill plus a
   red ring, distinct from every other state, so a returned item is never
   mistaken for ordinary progress. */
.projektas-chain5 {
  align-items: center;
  display: inline-flex;
  gap: 3px;
}

.projektas-chain5__step {
  background: var(--line-strong);
  border-radius: 2px;
  height: 0.6rem;
  width: 0.9rem;
}

.projektas-chain5__step--done {
  background: var(--success);
}

.projektas-chain5__step--now {
  background: var(--warning);
  box-shadow: 0 0 0 2px var(--warning-bg);
}

.projektas-chain5__step--ret {
  background: var(--warning);
  box-shadow: 0 0 0 2px var(--danger);
}

.projektas-chain-key .projektas-chain5__step {
  border: 1px solid var(--line-strong);
  display: inline-block;
  margin: 0 0.15rem -0.05rem 0.4rem;
}

.projektas-chain-key {
  color: var(--muted);
  font-size: var(--fs-field-label);
}

/* SIENA V5 §2 -- "Mano savaitė"'s three columns. Cards are full weight
   (no collapsed non-owner row here any more -- every card on this tab now
   carries the same coordinator-curated content, so item A2's old
   "collapse the informational rows" reasoning no longer applies). */
.projektas-savaite {
  align-items: start;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.projektas-savaite-col h3 {
  border-bottom: 2px solid var(--line-strong);
  font-size: var(--fs-field-value);
  margin: 0 0 0.6rem;
  padding-bottom: 0.4rem;
}

@media (max-width: 720px) {
  .projektas-savaite {
    grid-template-columns: minmax(0, 1fr);
  }
}

.projektas-savaite-col--current h3 {
  border-bottom-color: var(--danger);
  color: var(--danger);
}

.projektas-savaite-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 0.6rem;
  padding: 0.65rem 0.8rem;
}

/* Non-negotiable #2 (unchanged): a returned item's own card carries a
   coloured left border, never a badge or tint instead. */
.projektas-savaite-card--returned {
  border-left: 4px solid var(--danger);
}

.projektas-savaite-card h4 {
  font-size: var(--fs-field-value);
  margin: 0 0 0.35rem;
}

.projektas-savaite-card p {
  color: var(--muted);
  font-size: var(--fs-field-label);
  line-height: 1.4;
  margin: 0 0 0.5rem;
}

.projektas-savaite-card .projektas-chain5 {
  margin-bottom: 0.5rem;
}

/* SIENA V5 §2: "laukia tavęs N d." -- a warm badge that says WHY the
   card is here without hiding it (the note's own "niekada neslepiama"
   rule), same warm/never-danger tint `.projektas-row__stale` used to
   carry for the retired staleness marker. */
.projektas-savaite-card__wait {
  background: var(--warning-bg);
  border-radius: var(--radius-sm);
  color: var(--warning);
  display: inline-block;
  font-size: var(--fs-field-label);
  font-weight: 600;
  margin-bottom: 0.5rem;
  padding: 0.1rem 0.5rem;
}

.projektas-savaite-card__updated {
  color: var(--muted);
  display: block;
  font-size: var(--fs-field-label);
  margin-bottom: 0.5rem;
  opacity: 0.75;
}

/* SIENA V5 §2's own green "Paleista šiandien" strip. */
.projektas-paleista-strip {
  background: var(--success-bg);
  border: 1px solid var(--success);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: var(--fs-field-value);
  margin: 0 0 1rem;
  padding: 0.6rem 0.85rem;
}

.projektas-paleista-strip strong {
  color: var(--success);
}

/* SIENA V5 §3 -- "Kelias"'s five columns, one per chain square. Squares
   1-4 hold full name+sentence cards (`.projektas-kelias-card`); square 5
   ("Paleista") collapses every card to one thin checkmark line
   (`.projektas-kelias-thin`) -- the note's own "Padaryta ... tik
   pavadinimas" rule. */
/* K-8215 (P-Siena-Detali): one band per chain square, top to bottom; the
   band's cards share a grid, so a long title keeps its line instead of
   being squeezed into a fifth of the page (one card per row on a phone). */
.projektas-kelias {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.projektas-kelias-col {
  align-items: start;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.35rem 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  padding: 0.6rem 0.75rem 0.75rem;
}

.projektas-kelias-col > h3,
.projektas-kelias-col > .projektas-kelias-col__count,
.projektas-kelias-col > .projektas-kelias-more,
.projektas-kelias-col > .projektas-kelias-empty,
.projektas-kelias-col > .projektas-kelias-archive-note {
  grid-column: 1 / -1;
}

.projektas-kelias-col h3 {
  font-size: var(--fs-control);
  font-weight: 600;
  margin: 0;
}

.projektas-kelias-col__count {
  color: var(--text);
  display: block;
  font-size: 1.35rem;
  font-weight: 650;
}

.projektas-kelias-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-field-label);
  line-height: 1.35;
  padding: 0.5rem 0.65rem;
}

.projektas-kelias-card--returned {
  border-left: 3px solid var(--danger);
}

.projektas-kelias-card strong {
  display: block;
  font-size: var(--fs-field-value);
  margin-bottom: 0.2rem;
}

.projektas-kelias-card p {
  color: var(--muted);
  margin: 0 0 0.35rem;
}

.projektas-kelias-thin {
  color: var(--muted);
  font-size: var(--fs-field-label);
  line-height: 1.5;
}

.projektas-kelias-thin::before {
  color: var(--success);
  content: "✓ ";
}

.projektas-kelias-more {
  color: var(--muted);
  font-size: var(--fs-field-label);
  font-style: italic;
}

.projektas-kelias-empty {
  color: var(--muted);
  font-size: var(--fs-field-label);
}

/* Finding R2 (koordinatoriaus-nota-w1-siena-v5-radiniai-po-perejimo.md):
   the Paleista lane's own honest-partial-history footer, styled like its
   sibling `.projektas-kelias-more` overflow pill rather than the plain
   `.projektas-kelias-empty` text it replaces there -- this line renders
   even when the lane is not empty. */
.projektas-kelias-archive-note {
  color: var(--muted);
  font-size: var(--fs-field-label);
  font-style: italic;
  margin: 0.2rem 0 0;
}

/* SIENA V5 §4 -- "Ar galiu naudotis"'s four bands, top to bottom. Reuses
   `.projektas-verdict-grid`/`.projektas-verdict-tile` (below) for each
   module tile unchanged -- only this wrapper and band D's dashed
   treatment are new. */
.projektas-band > h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.projektas-band > h3 small {
  color: var(--muted);
  font-size: var(--fs-field-value);
  font-weight: 400;
  margin-left: 0.5rem;
}

.projektas-band--c {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: var(--fs-field-value);
  padding: 0.6rem 0.85rem;
}

.projektas-verdict-tile--dim {
  background: var(--bg);
  border-style: dashed;
}

/* "Vykdomi darbai" (koordinatoriaus-nota-w1-siena-v2-koordinatoriaus-failas-
   vietoj-agregavimo.md item 1) -- the coordinator's own darbai_dabar[]
   list, tab 1. Reuses `.registry-badge` for the worker-code badge; only
   the row layout itself is new. */
.projektas-darbai-dabar {
  display: flex;
  flex-direction: column;
}

.projektas-darbai-dabar__row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 11px 0;
}

.projektas-darbai-dabar__row:last-child {
  border-bottom: 0;
}

.projektas-darbai-dabar__row strong {
  font-size: var(--fs-control);
  font-weight: 600;
}

.projektas-darbai-dabar__text {
  display: flex;
  flex: 1 1 16rem;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.projektas-darbai-dabar__row small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

/* Tab 4 -- one verdict tile per module. The verdict badge itself reuses
   `.registry-badge`/`.registry-badge--success/--warning/--danger` (bare
   `.registry-badge` for `Verdiktas.NIEKAS`, matching `VERDIKTAS_BADGES`'s
   own `"css": ""` in views.py) rather than a fifth badge system. */
.projektas-verdict-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}

.projektas-verdict-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.85rem;
}

/* item A4 ("one consistent grid on every tab"): title/body sizes matched to
   `.projektas-phase h4`/`p` (tab 1's own card) -- both were already the same
   padding/border/radius/background, only the type scale had drifted. */
.projektas-verdict-tile h3 {
  font-size: 0.9375rem;
  margin: 0 0 0.4rem;
}

.projektas-verdict-tile p {
  color: var(--muted);
  font-size: var(--fs-field-value);
  line-height: 1.4;
  margin: 0.4rem 0 0;
}

/* Finding R1 (koordinatoriaus-nota-w1-siena-v5-radiniai-po-perejimo.md):
   `irodymas` collapsed by default, one size down from the card's own body
   text -- present for anyone who opens it, never part of the card the
   owner reads at a glance. */
.projektas-verdict-tile__evidence {
  margin-top: 0.4rem;
}

.projektas-verdict-tile__evidence summary {
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-field-label);
}

.projektas-verdict-tile__evidence p {
  font-size: var(--fs-field-label);
}

/* Rato srautas -- the launch round's flow board (docs/plans/
   w2-rato-lenta-iki-08-14.md). Scoped, new classes, same pattern as the
   .projektas-* block above: five columns, a day strip of verdict chips
   reusing tab 4's four states/colours (SIENA v4's "NON-NEGOTIABLE VISUAL
   ELEMENTS" #3/#1 analogue for this tab), and the same red-left-border
   treatment the mockup gives every owner-waiting row, reused here for the
   "Patikrina pranešęs" column and any escalated card regardless of column. */
.rato-board {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.rato-board > * {
  margin: 0;
}

/* K-8238 (R-Srautas): "Here:" folds into a quiet disclosure -- the same
   `.projektas-explainer` class and text, without the amber box. */
.projektas-explainer.rato-explainer {
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  padding: 0;
}

.rato-explainer summary {
  cursor: pointer;
}

.rato-explainer summary strong {
  color: var(--brand-dark);
  font-weight: 500;
}

.rato-explainer p {
  margin: 6px 0 0;
}

.card.rato-caution {
  font-size: var(--fs-field-value);
  line-height: 1.5;
  padding: 12px 14px;
}

.rato-day-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rato-verdict-chip {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: var(--fs-field-value);
  font-weight: 400;
  min-height: 34px;
  padding: 0 12px;
}

.rato-verdict-chip--veikia {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}

.rato-verdict-chip--su_trukumais {
  background: var(--warning-bg);
  border-color: var(--warning);
  color: var(--warning);
}

.rato-verdict-chip--negalima {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

/* The five columns fold on the board's own width (the wall's tab and the
   standalone page sit in <main>, whose width is not the viewport's). */
.rato-flow {
  container: rato-flow / inline-size;
}

.rato-columns {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.rato-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.rato-column > * {
  margin: 0;
}

.rato-column-head {
  align-items: center;
  border-bottom: 2px solid var(--line);
  display: flex;
  font-size: var(--fs-field-value);
  font-weight: 600;
  gap: var(--space-2);
  justify-content: space-between;
  padding: 0 2px var(--space-2);
}

.rato-column--waiting .rato-column-head {
  border-bottom-color: var(--brand);
}

.rato-column-count {
  background: color-mix(in srgb, var(--rail-bg) 60%, var(--surface));
  border-radius: var(--radius-pill);
  color: var(--muted);
  flex: none;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 20px;
  padding: 0 var(--space-2);
}

.rato-column .empty-state {
  color: var(--muted);
  font-size: 0.75rem;
}

.card.rato-card {
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  font-size: var(--fs-field-value);
  gap: 6px;
  line-height: 1.4;
  padding: 10px 12px;
}

.rato-card > * {
  margin: 0;
}

.rato-card--mine {
  border-left: 3px solid var(--danger);
}

.rato-card-what {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.rato-card .task-meta {
  font-size: 0.75rem;
}

.rato-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rato-card-actions form {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* A long action ("Ready for the reporter to check") stays on one line
   inside the narrow column, cut with an ellipsis; the button's `title`
   carries the whole label. The `:not(...)` chain is repeated so the
   selector (0,7,1) out-ranks `button[type="submit"].button-small:not(...)`
   (0,5,1), which sets the font-size and padding this rule replaces. */
.rato-card .rato-card-actions button[type="submit"].button-small:not(.link-button):not(.button-link):not(.task-row-button) {
  display: block;
  font-size: 0.75rem;
  line-height: calc(var(--btn-h-sm) - 2px);
  max-width: 100%;
  overflow: hidden;
  padding-inline: var(--space-2);
  text-overflow: ellipsis;
}

.rato-card-actions label {
  align-items: center;
  display: flex;
  font-size: 0.75rem;
  gap: var(--space-2);
}

.rato-rules ol {
  margin: 0;
  padding-left: 18px;
}

.rato-rules li {
  font-size: var(--fs-field-value);
  margin: 4px 0;
}

@container rato-flow (max-width: 720px) {
  .rato-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container rato-flow (max-width: 560px) {
  .rato-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dashboard-grid,
.dashboard-queues {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-grid .card,
.dashboard-queues .card {
  margin-top: 0;
}

.safety-dashboard-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.trend-chart {
  display: grid;
  gap: 0.5rem;
}

.trend-row {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 5rem 1fr;
}

.trend-row > span {
  color: var(--muted);
  font-size: 0.8rem;
}

.trend-bars {
  display: grid;
  gap: 0.2rem;
}

.trend-bar {
  border-radius: 3px;
  min-height: 1.1rem;
  min-width: 2px;
  position: relative;
}

.trend-bar span {
  font-size: 0.7rem;
  left: 0.35rem;
  line-height: 1.1rem;
  position: absolute;
  white-space: nowrap;
}

.trend-registered {
  background: var(--warning);
}

.trend-closed {
  background: var(--success);
}

.distribution-list {
  display: grid;
  gap: 0.75rem;
}

.distribution-list a {
  align-content: center;
  color: inherit;
  display: grid;
  gap: 0.3rem;
  /* K-4364 (mobile guard touch check): a single-line entry (no
     `.distribution-track` bar under it, e.g. NCR "Top 5 customers") was
     only ~20px tall at 390px -- under the K-45 44px floor. `min-height`
     plus `align-content: center` gives the short variant the same floor
     without changing the taller two-line variant's own layout. */
  min-height: 44px;
  padding: 0.25rem 0;
  text-decoration: none;
}

.distribution-list a > span:first-child {
  display: flex;
  justify-content: space-between;
}

.distribution-track {
  background: var(--bg);
  border-radius: var(--radius-pill);
  height: 0.55rem;
  overflow: hidden;
}

.distribution-track span {
  background: var(--brand-dark);
  display: block;
  height: 100%;
}

.closure-quality-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.closure-quality-grid a {
  background: var(--bg);
  border-radius: var(--radius-md);
  color: inherit;
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem;
  text-decoration: none;
}

.closure-quality-grid strong {
  font-size: 1.5rem;
}

.closure-quality-grid span {
  color: var(--muted);
  font-size: 0.75rem;
}

.dashboard-table-wrap {
  overflow-x: auto;
}

.dashboard-table {
  border-collapse: collapse;
  width: 100%;
}

.dashboard-table th,
.dashboard-table td {
  border-bottom: 1px solid var(--line);
  padding: 0.65rem 0.4rem;
  text-align: left;
  vertical-align: top;
}

.dashboard-table th {
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.dashboard-table small {
  color: var(--muted);
  display: block;
  margin-top: 0.2rem;
}

/* K-6023 (NCR design N3): the NCR dashboard per
   saltiniai/ncr-maketai/html/Main.dc.html (1440) and Suvestine-390.dc.html.
   Scoped `ncr-dash-*` / `ncr-trend-*` / `ncr-dist-*` names: the shared
   `.dashboard-cards` / `.trend-chart` / `.distribution-list` rules above
   also draw the safety, warehouse and indicator dashboards. Colours are the
   existing tokens: registered = --brand, closed/effective = --success,
   ineffective and bad news = --danger, 6M bars = --text, empty months and
   zero rows = --line-strong / --muted. */
.ncr-dash-head {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
}

.ncr-dash-title {
  display: flex;
  flex: 1 1 420px;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ncr-dash-title h1 {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}

.ncr-dash-title .card-subtitle {
  font-size: var(--fs-control);
}

.ncr-dash-crumb {
  color: var(--muted);
  font-size: var(--fs-field-value);
}

.ncr-dash-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ncr-dash-actions .button svg,
.ncr-dash-actions .button-secondary svg {
  margin-right: var(--space-2);
}

/* The mockup's period segment: a --rail-bg track, ghost options, the
   active one a white raised chip. */
.ncr-period {
  align-items: center;
  background: var(--rail-bg);
  border-radius: var(--radius-md);
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  position: relative;
}

.ncr-period-option {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--fs-field-value);
  font-weight: 500;
  height: 34px;
  list-style: none;
  padding: 0 12px;
  text-decoration: none;
  white-space: nowrap;
}

.ncr-period-option::-webkit-details-marker {
  display: none;
}

.ncr-period-option:hover {
  color: var(--text);
  text-decoration: none;
}

.ncr-period-option.is-active {
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 8%);
  color: var(--text);
}

.ncr-period-custom .dashboard-custom-period {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  padding: var(--space-4);
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
}

.ncr-dash-kpis {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ncr-kpi {
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 18px 22px;
  text-decoration: none;
}

.ncr-kpi:hover {
  text-decoration: none;
}

.ncr-kpi-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.ncr-kpi-value {
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.ncr-kpi-note {
  color: var(--muted);
  font-size: var(--fs-field-value);
  line-height: 1.35;
}

.ncr-kpi-note--bad {
  color: var(--danger);
}

/* One grid, three equal columns; the trend and the oldest-open table span
   two. Rows stretch, so every card in a row is as tall as the tallest. */
.ncr-dash-grid {
  align-items: stretch;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ncr-dash-card--wide {
  grid-column: span 2;
}

.ncr-dash-card-head {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.ncr-dash-more {
  font-size: var(--fs-field-value);
  white-space: nowrap;
}

.ncr-trend-legend {
  color: var(--muted);
  display: flex;
  font-size: 0.75rem;
  gap: var(--space-4);
}

.ncr-trend-legend > span {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.ncr-trend-swatch {
  border-radius: 2px;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.ncr-trend-swatch--registered,
.ncr-trend-bar--registered .ncr-trend-fill {
  background: var(--brand);
}

.ncr-trend-swatch--closed,
.ncr-trend-bar--closed .ncr-trend-fill {
  background: var(--success);
}

.ncr-trend {
  display: flex;
}

.ncr-trend-col {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.ncr-trend-bars {
  align-items: flex-end;
  display: flex;
  gap: 3px;
  height: 172px;
}

.ncr-trend-bar {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ncr-trend-count {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.ncr-trend-bar--registered .ncr-trend-count {
  color: var(--brand);
}

.ncr-trend-bar--closed .ncr-trend-count {
  color: var(--success);
}

/* `--ncr-trend-h` is the bar's share (0-100) of the largest month; the
   tallest bar is 150px, leaving room for its count above it. */
.ncr-trend-fill {
  border-radius: 3px 3px 0 0;
  display: block;
  height: max(2px, calc(var(--ncr-trend-h) * 1.5px));
  width: 14px;
}

/* A zero month is one thin baseline per series, not an empty row. */
.ncr-trend-zero {
  background: var(--line-strong);
  border-radius: 1px;
  display: block;
  height: 2px;
  width: 14px;
}

.ncr-trend-month {
  color: var(--muted);
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: center;
}

.ncr-trend-month > span {
  opacity: 0.7;
}

.ncr-closure-headline {
  align-items: baseline;
  display: flex;
  gap: var(--space-2);
}

.ncr-closure-headline strong {
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
}

.ncr-closure-bar {
  background: var(--rail-bg);
  border-radius: var(--radius-sm);
  display: flex;
  height: 12px;
  overflow: hidden;
}

.ncr-closure-bar > span {
  flex-basis: 0;
}

.ncr-closure-bar-effective {
  background: var(--success);
}

.ncr-closure-bar-partial {
  background: var(--brand);
  opacity: 0.75;
}

.ncr-closure-bar-ineffective {
  background: var(--danger);
}

.ncr-closure-counts {
  display: grid;
  font-size: var(--fs-field-value);
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ncr-closure-counts a {
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
}

.ncr-closure-counts strong {
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.ncr-closure-count--effective strong {
  color: var(--success);
}

.ncr-closure-count--partial strong {
  color: var(--brand-dark);
}

.ncr-closure-count--ineffective strong {
  color: var(--danger);
}

.ncr-dist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ncr-dist-row {
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
}

.ncr-dist-row:hover {
  text-decoration: none;
}

.ncr-dist-label {
  display: flex;
  font-size: var(--fs-control);
  gap: 12px;
  justify-content: space-between;
}

.ncr-dist-label > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ncr-dist-label strong {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.ncr-dist-track {
  background: var(--rail-bg);
  border-radius: 4px;
  display: block;
  height: 8px;
  overflow: hidden;
}

.ncr-dist-track > span {
  background: var(--brand-dark);
  display: block;
  height: 100%;
}

.ncr-dist--six-m .ncr-dist-track > span {
  background: var(--text);
}

.ncr-dist-row--zero {
  color: var(--muted);
}

.ncr-overdue-list,
.ncr-reopen-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ncr-overdue-list > li {
  border-bottom: 1px solid var(--line);
  column-gap: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px 0;
  row-gap: 4px;
}

.ncr-overdue-list > li:last-child,
.ncr-reopen-list > li:last-child {
  border-bottom: 0;
}

.ncr-overdue-list > li > a {
  font-size: var(--fs-control);
  font-weight: 500;
}

.ncr-overdue-list .registry-badge {
  align-self: center;
  grid-row: span 2;
  white-space: nowrap;
}

.ncr-overdue-text {
  color: var(--muted);
  font-size: var(--fs-field-value);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ncr-oldest-table th:last-child,
.ncr-oldest-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.ncr-reopen-list > li {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: grid;
  font-size: var(--fs-control);
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 10px 0;
}

.ncr-reopen-list > li > span {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Phone (Suvestine-390): KPIs two by two, one column of cards in the
   mockup's order -- trend, overdue actions, closure quality, defects --
   then the three the phone mockup does not draw; the primary action full
   width above everything. */
@media (max-width: 720px) {
  .ncr-dash-head {
    gap: var(--space-4);
  }

  .ncr-dash-title {
    flex-basis: 100%;
  }

  .ncr-dash-actions {
    width: 100%;
  }

  .ncr-dash-actions > .button:not(.button-secondary) {
    min-height: 48px;
    order: -1;
    width: 100%;
  }

  .ncr-period {
    max-width: 100%;
    overflow-x: auto;
  }

  .ncr-period-option {
    height: 44px;
  }

  .ncr-period-custom .dashboard-custom-period {
    left: 0;
    right: auto;
  }

  .ncr-dash-kpis {
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ncr-kpi {
    padding: var(--space-4);
  }

  .ncr-kpi-value {
    font-size: 28px;
  }

  .ncr-dash-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ncr-dash-card--wide {
    grid-column: auto;
  }

  .ncr-dash-trend {
    order: 1;
  }

  .ncr-dash-overdue {
    order: 2;
  }

  .ncr-dash-closure {
    order: 3;
  }

  .ncr-dash-defects {
    order: 4;
  }

  .ncr-dash-six-m {
    order: 5;
  }

  .ncr-dash-oldest {
    order: 6;
  }

  .ncr-dash-reopens {
    order: 7;
  }

  .ncr-dash-trend .ncr-dash-card-head {
    flex-wrap: wrap;
  }

  .ncr-trend-bars {
    gap: 2px;
    height: 140px;
  }

  .ncr-trend-fill,
  .ncr-trend-zero {
    width: 8px;
  }

  .ncr-trend-fill {
    height: max(2px, calc(var(--ncr-trend-h) * 1.1px));
  }

  .ncr-dash-title .card-subtitle a,
  .ncr-oldest-table td > a,
  .ncr-overdue-list > li > a,
  .ncr-dash-more,
  .ncr-closure-counts a,
  .ncr-reopen-list > li > a {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  .ncr-dist-row:not(.ncr-dist-row--zero) {
    min-height: 44px;
  }
}

@media (max-width: 720px) {
  /* K-2865 (owner, 2026-09-03 21:33, from a phone screenshot of /rodikliai/
     overview/): "viskas spaudziasi, mazesnes parastes remeliuose ... nes
     korteles labai siauros". At 390px the page's own 1.5rem (24px) side
     padding plus `.card`'s own 1.5rem padding left ~294px of the 390px
     viewport for actual content -- two nested 24px margins the phone screen
     cannot afford. Halved to 0.75rem (12px) each, one shared rule so every
     screen built on `.page`/`.card` (not just rodikliai) gets the wider
     content column, matching the card's own "viena vieta, ne per ekranus"
     instruction. Desktop (>720px) keeps the original 1.5rem untouched --
     these are overrides inside the existing mobile breakpoint, not edits to
     the base rules at lines ~1230/~1269. */
  .page {
    padding: 0 0.75rem;
  }

  .card {
    padding: 0.75rem;
  }

  /* `.dashboard-cards`' own 1rem (16px) grid gap is the same double-margin
     problem between adjacent KPI cards -- halved alongside the padding
     above so the cards read as a tighter strip instead of mostly whitespace. */
  .dashboard-cards {
    gap: 0.5rem;
  }

  .site-header {
    align-items: stretch;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
  }

  /* K-2313: scoped to `.site-header .site-nav` (matching the desktop rule
     at this file's line ~236) -- the bare `.site-nav` this used to be
     ALSO matches the authenticated shell's sidebar nav (base.html:
     `<nav class="site-nav nav-columns">`), which shares the class name but
     is a completely different element (the collapsible L1/L2 rail, not the
     kiosk/anonymous header's link row this rule was written for). Same
     specificity as the unscoped version (0,1,0) would have tied and lost
     the cascade to whichever rule happened to come later, so the leak was
     real, not hypothetical: at <=720px every authenticated page's sidebar
     was forced into a 2-column grid on top of whatever `.nav-columns`
     itself was doing, which is what made the owner's "collapse/expand does
     not work AT ALL on mobile" report read as total breakage rather than a
     narrower specificity bug. */
  .site-header .site-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    margin: 0;
  }

  .session {
    justify-content: space-between;
    width: 100%;
  }

  .section-heading,
  .addressing-picker,
  .linked-object-picker {
    align-items: flex-start;
    flex-direction: column;
  }

  /* K-2866: window.print() is redundant on phones (users print via the
     browser's own share/print menu), and it was the only action in these
     headers, so it stood alone as a full-width button under the title. */
  .hide-phone {
    display: none !important;
  }

  /* K-2866: `.actions` already wraps (shared rule above), but on a phone
     `.section-heading` switches to flex-direction: column with
     align-items: flex-start (also above), so the actions block shrinks to
     its content width instead of spanning the header -- full width lets
     the wrapped button rows use the whole line instead of bunching left. */
  .section-heading .actions {
    width: 100%;
  }

  /* K-3139 (Personalas mobile pass, owner canon 2026-09-04: single-column
     forms with full-width buttons on a phone). `.phone-stack` is the one
     opt-in class the module's templates put on a button container -- an
     `.actions` row, a `.filters` row or a bare `<form>` whose submit is a
     direct child -- so that below this breakpoint every button in it takes
     the whole content column instead of sitting at its text width next to
     empty space. Opt-in rather than a bare `.actions button` rule because
     `.actions` also carries the module tab-bar-adjacent link rows, whose
     side-by-side layout the K-2866 `.section-heading .actions` rule above
     already settled. Desktop (>720px) is untouched by design. */
  .actions.phone-stack,
  .filters.phone-stack {
    align-items: stretch;
    flex-direction: column;
  }

  .filters.phone-stack label {
    align-items: stretch;
    flex-direction: column;
  }

  .filters.phone-stack input[name="year"],
  .filters.phone-stack input[name="month"] {
    max-width: none;
  }

  .phone-stack > button,
  .phone-stack > .button,
  .phone-stack > input[type="submit"] {
    width: 100%;
  }

  .addressing-picker,
  .linked-object-picker {
    display: flex;
  }

  /* K-70: the header-row grid above (eyebrow+h1 beside the subtitle) has no
     room for two columns at phone widths -- same one-column collapse every
     other grid modifier in this block already gets. */
  .form-card--wide {
    grid-template-areas:
      "eyebrow"
      "title"
      "subtitle"
      "form";
    grid-template-columns: minmax(0, 1fr);
  }

  .filter-row,
  .form-grid,
  .detail-grid,
  .registry-filter-grid,
  .calculation-grid,
  .quantity-grid,
  .card-field-grid,
  .task-row,
  .task-row--sent {
    grid-template-columns: minmax(0, 1fr);
  }

  /* K-3223 (2030.RADINIAI): the 1-column collapse above stacks
     `.registry-filter-grid`'s own fields, but its `.actions` submit button
     (e.g. "Apply filters", rodikliai/importas.html's "Save the month" /
     "Save the company's year") kept its intrinsic content width -- a ~65px
     button left-aligned under a full-width stacked form, per
     mobile-rodikliai-3087-after.json/importas-390.png. Full width matches
     every other stacked control in this block.

     `.button` is in the list on purpose (2030.RADINIAI RED-1): seven of the
     filter grids pair the submit with an `<a class="button button-secondary">`
     ("Clear", accounts/people.html), and a full-width "Apply" next to a
     content-width link left the link orphaned on its own row. Both now stack
     full width, one under the other.

     K-3286 (K-3271.RADINIAI RED-1): two of those screens never reached the
     descendant rule at all. quality/ncr_list.html and
     production_import/import_start.html put `.registry-filter-grid` on an
     inner `<div>` that closes before `.actions` (the `.actions` div is that
     grid's later SIBLING inside the form -- the same shape the desktop
     `align-self: end` note above already records), so on a phone their
     "Apply filters"/"Clear" pair stayed content-width, left-aligned under a
     full-width stacked form. The `~` selectors below cover that sibling
     shape; scoped to this 720px block, so desktop is untouched.
     K-3016 (#2001) since moved import_start.html's pair INTO its grid div
     (the descendant shape), so ncr_list.html is the one sibling-shape
     screen left; test_mobile_filter_submit_width.py pins it. */
  .registry-filter-grid .actions button,
  .registry-filter-grid .actions .button,
  .registry-filter-grid .actions [type="submit"],
  .registry-filter-grid ~ .actions button,
  .registry-filter-grid ~ .actions .button,
  .registry-filter-grid ~ .actions [type="submit"] {
    width: 100%;
  }

  /* K-73: the Kontaktai tab's side-by-side rows (`.field-row`, and the
     name/relation `.field-pair` nested inside one of them) stack instead of
     squeezing two controls into a phone-width column. Both wrappers zero
     their children's margin-bottom on desktop (the row's own gap/margin
     does the spacing there); stacked, each child needs its own again. */
  .field-row,
  .field-pair {
    flex-direction: column;
  }

  .field-row > .field:not(:last-child),
  .field-pair > .field:not(:last-child) {
    margin-bottom: 1rem;
  }

  .task-row-date {
    text-align: left;
  }

  .registry-search {
    grid-column: span 1;
  }

  /* K-3016: on the one-column phone grid the `.actions` cell lands under the
     fields; its buttons take the whole line instead of huddling at the left
     edge, each on its own row when there are two ("Taikyti" + "Išvalyti"). */
  .registry-filter-grid > .actions > button,
  .registry-filter-grid > .actions > .button {
    width: 100%;
  }

  .card-heading > [data-simple-table-search] {
    flex-basis: 100%;
  }

  .dashboard-periods,
  .dashboard-cards,
  .dashboard-grid,
  .dashboard-queues {
    grid-template-columns: minmax(0, 1fr);
  }

  /* K-2865: `.dashboard-cards.rodikliai-kpis` (line ~4214) is two classes
     deep (0,2,0) on purpose -- it out-specifies the plain `.dashboard-cards`
     1-column rule directly above at every width below 1500px, including
     this 720px breakpoint, so the KPI strip stayed 2-up all the way down to
     phone width. At 390px a 2-up card left too little room for its own
     headline figure and the number wrapped mid-digit ("82.873 EUR" ->
     "82.8 / 73 EUR", owner's screenshot). One column gives each figure the
     full card width, which measured wide enough that no additional
     font-size shrink was needed once this ran. */
  .dashboard-cards.rodikliai-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Belt to the 1-column fix above: even at full card width a still-longer
     figure (owner's own mockup goes up to "118 430 €") must never wrap
     inside the number itself, and `.card`'s own `overflow-wrap: anywhere`
     (line ~1282) is inherited onto every child including this <strong> and
     the label <span> beside it -- which is what broke "Pelningumas" into
     "Pelningu"/"mas" mid-word on the owner's screenshot even though the
     word itself fit the column. Resetting both to `normal` here restores
     ordinary between-word wrapping without losing the anywhere-wrap
     `.card` still needs for unrelated long tokens (URLs, codes) elsewhere.
     Scoped to `.rodikliai-kpis` (1945.RADINIAI): outside that class
     `.kpi-card`'s width isn't guaranteed 1-column here, so `nowrap` let
     other cards (e.g. membership_salary.html, ai_governance/status.html)
     grow past the viewport instead of wrapping. */
  .dashboard-cards.rodikliai-kpis .kpi-card > strong {
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .dashboard-cards.rodikliai-kpis .kpi-card > span {
    overflow-wrap: normal;
    hyphens: none;
  }

  /* Bare `1fr` (== minmax(auto, 1fr)) still lets the track grow to the
     card's min-content width -- here that's the dashboard tables nested
     inside, so the grid stayed +74px wider than the viewport even after
     collapsing to one column. `minmax(0, 1fr)` matches the desktop rule
     (main.css:4477) and actually floors the track at 0. */
  .safety-dashboard-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-custom-period {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-custom-period button {
    grid-column: 1 / -1;
  }

  /* K-45: touch target rule, same @media block as the rest of the mobile
     layer per UI_KANONAS_v1 §8.1 (no new breakpoints). Live measurement on
     pp-bo at 390px (2026-08-21) found controls at 28-40px and sort/menu
     links at 16-42px -- below the ~44px a finger needs. font-size is left
     untouched everywhere here; only the box each control occupies grows.
     `.link-button`/`.button-link` are excluded -- they render as plain
     underlined text inside sentences (e.g. rodikliai/overview.html's "Load
     an export" paragraph link), the same exemption `button[type="submit"]`
     styling already carries elsewhere in this file. */
  button:not(.link-button):not(.button-link),
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  [type="submit"] {
    min-height: 44px;
  }

  /* K-6009: K-5927's desktop button geometry puts `min-height` (40px /
     32px) on the `button[type="submit"]` safety net and its `.button-small`
     twin, selectors that out-rank the floor above -- mobile_guard measured
     every submit button at 40px on 11 contract screens. Same selectors
     again, later in the file, so the phone floor wins. */
  button[type="submit"]:not(.link-button):not(.button-link):not(.task-row-button),
  button[type="submit"].button-small:not(.link-button):not(.button-link):not(.task-row-button) {
    min-height: 44px;
  }

  /* K-3140 (Sandelis mobile pass): `a.button` -- the link styled as a
     button ("Cancel", "Edit", "New receipt", "Download QR") -- was the one
     control the rule above never reached, because it is an <a>, not a
     <button>/<input>; measured 34px tall on every parts/receiving/packaging
     screen at 390px. inline-flex + align-items keeps the label centred
     when the box grows; justify-content keeps it centred when
     `.phone-stack` stretches the link to full width. font-size untouched. */
  a.button {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
  }

  /* K-4341 RED-1 (PR #2224 review): the "My tasks" / "My project tasks" /
     "Assigned to me" rows on operations/man_siandien.html wrap the whole
     row in ONE plain `<a href>` as the `.task-row` grid's direct child. It
     is neither a `<button>` nor `a.button`, so no rule above reaches it,
     and its height came only from its text: two wrapped lines happened to
     clear 44px in the live walk, but a short project name / task text
     ("P1" / "X") measured 27.56px at 390px. The floor has to be structural,
     not a property of the demo data. `align-content: center` keeps the
     text vertically centred inside the taller box where supported; where
     it is not, the box is still 44px tall, which is the contract. */
  .task-row > a {
    align-content: center;
    display: block;
    min-height: 44px;
  }

  /* Sort controls: `.simple-table-sort` (JS-rendered <button>) and the
     plain <a> sort links some registries render server-side (e.g.
     quality/ncr_list.html's <th><a>) both carry only their text's own
     line-height today. `display: inline-flex` + `min-height` gives both a
     real touch box without touching `font-size`. K-3353: rodikliai/metai.html's
     Months table has 12 single/double-digit column headers ("1".."12") --
     their label is so short that `min-height` alone still left them ~15-30px
     wide, well under the 44px a finger needs; `min-width` closes that gap
     the same way `min-height` already does for the vertical axis. */
  .simple-table-sort,
  th a {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  /* Sidebar/menu links: `.nav-l1-item` and the L2 module links already lay
     out with flex + align-items: center, so min-height alone grows the box
     and keeps the label centered.
     K-4096/K-3499 finding: min-height alone was not enough for the
     shortest labels -- "Mano" (L1 "My area" item) measured 33x44 and
     "Tabelis" (L2 "Timesheet" module) 43x44 at 390px, both narrower than
     the label's own text plus icon/padding needs, well under the 44px a
     finger needs. Same gap `.simple-table-sort`/`th a` above closed with
     min-width alongside min-height for the same reason (short text leaves
     the box too narrow even once it is tall enough). */
  .nav-l1-item,
  .nav-group-modules a,
  .site-header .site-nav a {
    align-items: center;
    display: flex;
    min-height: 44px;
    min-width: 44px;
  }

  /* Checkbox/radio: touch area grows via padding around the label, not by
     enlarging the 20px glyph itself (`.checkbox-label input` sets that size
     app-wide and stays untouched here). */
  .checkbox-label {
    padding: 0.75rem 0;
  }

  /* K-637: `.registry-statuses label` (the pill wrapper itself, see the
     K-45b comment below) opted its input out of the bare-checkbox rule via
     `.tap-target-parent` but was never given a touch box of its own, so the
     pill stayed at its natural 32.2px. Same principle as `.checkbox-label`
     above: grow the label's own box via `min-height`, not the 13px glyph
     inside it. */
  .registry-statuses label {
    min-height: 44px;
  }

  /* K-45b/K-238/K-260/K-328: bare checkbox/radio touch target -- `.checkbox-
     label input` above only reaches inputs a template routed through that
     class. Plenty don't: a plain `<label>` with no class (accounts/
     person_form.html's role proposal), or no label at all -- just a
     `<td><input>` table row-select box (warehouse/stock_list.html,
     parts/part_list.html) or an aria-label-only checkbox (administravimas/
     hire_finding_list.html). None of those share a common wrapper to pad
     the way `.checkbox-label` does, so the box itself grows here instead,
     to the same 44px floor as every other control in this block.

     The exemption is NOT "sits inside a <label>" -- accounts/person_form
     .html's plain label above proves that alone isn't enough; that input
     still needs the growth. The actual test is whether the WRAPPER already
     renders its own >=44px click box (padding/border/background), so
     growing the glyph on top of it would only distort that box instead of
     adding usable area. `.checkbox-label` (padding: 0.75rem 0, above) is
     the one built-in case, app-wide, and stays named here since it predates
     this rule and every consumer already carries it.

     Every other self-sized wrapper opts out by carrying `.tap-target-
     parent` on the element that IS the click box, instead of adding a new
     `:not()` here each time one turns up (K-238 and K-260 originally did
     exactly that, one clause per screen -- fingerprint
     CSS_LAYOUT/INCOMPLETE_EXCLUSION_LIST, `skola/INBOX.md`, x4):
       - `.registry-statuses` (quality/ncr_list.html status pill filters,
         K-238) -- `.registry-statuses label`, main.css:2949, is a visible
         bordered pill; 44px on the input clamped it 32.2px -> 63.2px.
       - `.safety-quiz-answers` (safety/my_task_quiz.html answer list,
         K-260) -- `.safety-quiz-answers label`, main.css:1870, same shape;
         19.2px -> 44px.
       - `.ncr-type-card` (quality/ncr_form.html type-choice cards, K-328) --
         the label IS the bordered card; 68.6px -> 94.0px, title wrapped to
         two lines.
     All three are already their own click target at natural size (the
     whole `<label>`, not just the glyph, is clickable). A future self-sized
     wrapper adds `.tap-target-parent` in its own template -- this rule does
     not need editing again. */
  input[type="checkbox"]:not(:is(.checkbox-label, .tap-target-parent) input),
  input[type="radio"]:not(:is(.checkbox-label, .tap-target-parent) input) {
    min-height: 44px;
    min-width: 44px;
  }

  /* K-3918 (RADINYS C2, K-3810 mobile audit): `.tabs a` (main.css above)
     already carries the K-45 44px `min-height`, but no horizontal padding --
     `.module-tabs`'s own `gap: 0 1.25rem` only spaces tabs apart, it does
     not widen the link itself, so a short label measured narrower than the
     44px floor on `/purchasing/` and `/logistics/receiving/` ("New" 22px,
     "List" ~30px, "Orders" 41px). Horizontal padding pushes every module
     tab past 44px wide without touching the desktop rule (untouched above
     this breakpoint) or the underline/active-state rules, which key off
     colour and border-bottom, not padding. */
  /* K-4183 addendum (organizations/settings/company/ mobile pass): the
     padding above closes most of the gap, but the shortest module-tab label
     of all -- "Įmonė" ("Company"), organizations' own module -- still
     measured 36px wide at 390px, short of the 44px floor on the horizontal
     axis. Same shape as `.simple-table-sort`/`th a` and `.nav-l1-item`
     above: padding alone is not enough once the label is this short, so
     `min-width` closes the remainder without touching the vertical sizing
     already handled by `.tabs a`'s `min-height` or the desktop rule above
     this breakpoint. */
  .module-tabs a {
    padding: 0.7rem 0.75rem;
    min-width: 44px;
  }

  /* K-4456 (skola INBOX SPECIFICITY_COLLISION, PR #2133 review): the
     `?tabs=segmented` opt-in variant declares its own compact
     `padding: 0.45rem 1rem` above this breakpoint, but that rule and the
     K-3918 `.module-tabs a` rule just above share one specificity (0,1,1),
     so the later one -- this block's -- won on phones too and the pill
     tabs came out taller and narrower than designed. Restated here, after
     the general rule, so source order resolves the tie the intended way.
     Height stays on the K-45 44px floor via `.tabs a`'s own `min-height`
     (base rule above this breakpoint, untouched); 1rem of horizontal
     padding already clears the general rule's 44px `min-width`. */
  .module-tabs--segmented a {
    padding: 0.45rem 1rem;
  }

  /* K-3918 (RADINYS C2): a plain in-sentence link inside a `.task-meta`
     paragraph (e.g. "Manage cost centres" on receiving/receiving_form.html)
     is a bare inline anchor with no box of its own -- its tap target is
     just its own text's line box, measured 327x36px, short of the 44px
     floor on the height axis. `.task-meta-link` is the opt-in this one
     template carries (same "add a class, not new CSS per screen" pattern
     as `.tap-target-parent` above); `inline-flex` + `align-items: center`
     grows the box without breaking its place inside the running sentence,
     the way `.checkbox-label`'s own padding does elsewhere in this file. */
  .task-meta-link {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  /* K-4180 (Sandelis /warehouse/stock/ mobile pass), confirmed independently
     by K-4181's /messages/ walk and K-4183's organizations/settings/company/
     walk (both K-3496 KNOWN_GAPS): `.breadcrumb-item a` (main.css above,
     K-2614) already grows the box's HEIGHT to 44px, but never its width --
     the module-root crumb ("Lager", Sandelis's German group name;
     "Mano"/"Žinutės" on /messages/; "Įmonė" on organizations/settings/
     company/) still measured 33-42px wide at 390px, short of the 44px a
     finger needs on the horizontal axis. Same gap `.simple-table-sort`/
     `th a` and `.nav-l1-item` above closed with `min-width` alongside
     `min-height`. Scoped to this breakpoint so the desktop breadcrumb --
     already wide enough from its longer crumb labels -- is untouched. This
     one rule fixes the breadcrumb on every screen that shares it.
     K-4622 (skola INBOX, quality/NCR breadcrumb): the min-width above grows
     the box, but the K-2614 `inline-flex` on the base rule defaults to
     `justify-content: flex-start`, so a crumb shorter than 44px ("NCR", "PR")
     left-packs its text and leaves the padding lopsided on one side only --
     `justify-content: center` balances it inside the now-wider box without
     touching the box's own size. */
  .breadcrumb-item a {
    justify-content: center;
    min-width: 44px;
  }

  /* K-4180: the row-detail toggle button ("▸"/"▾", warehouse/stock_list.html
     and any other registry table using the same `[data-row-toggle]`
     pattern) already gets its 44px HEIGHT from the general `button` rule
     above, but its single glyph plus `.button-secondary` padding still
     measured 38px wide -- short of the 44px floor on the horizontal axis,
     same shape as the breadcrumb gap just above. */
  [data-row-toggle] {
    min-width: 44px;
  }
}

/* -- focus visibility (brand) -------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.sidebar-toggle:focus-visible,
.nav-l2-head:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* K-6714: a native file input hidden behind its translated "Choose file"
   label (K-5385, K-6680). The class sits either on the input itself or on
   a span wrapping a form-rendered input. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* The hidden input still takes keyboard focus, but its own ring is clipped
   away -- draw it on the label the reader sees, whether that label comes
   after the input, after the wrapping span, or before the input. */
.visually-hidden:focus-visible + label,
.visually-hidden:has(:focus-visible) + label,
label:has(+ .visually-hidden:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* K-7909: the row or zone around a hidden file input (K-7866, K-7872). The
   base `input:not(...)` rule's `width: 100%` and padding outrank
   `.visually-hidden`; without a positioned container that 100% is the
   viewport and the page scrolls sideways, and in a padded zone the input
   still pokes past the padding box. */
.file-picker {
  position: relative;
}

.file-picker > input.visually-hidden {
  padding: 0;
  width: 1px;
  height: 1px;
}

/* K-10209: the shared file field hides its native input by position alone,
   with or without `.visually-hidden` on it; the focus ring moves to the
   label the reader sees. */
.file-picker > input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

.file-picker > input[type="file"]:focus-visible + label {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* -- NCR status timeline (finding 125) ------------------------------------ */

.ncr-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ncr-timeline-step {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.7rem;
  color: var(--muted);
  flex: 1 1 0;
  min-width: 8rem;
  text-align: center;
}

.ncr-timeline-step.done {
  border-color: var(--success);
  color: var(--text);
}

.ncr-timeline-label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
}

.ncr-timeline-step.done .ncr-timeline-label::before {
  content: "✓ ";
  color: var(--success);
}

.ncr-timeline-date {
  display: block;
  font-size: 0.75rem;
}

/* -- NCR stage guide (K-707) ---------------------------------------------- */

.ncr-timeline-step-current {
  border-color: var(--brand);
  color: var(--text);
  background: var(--surface);
}

/* K-1602: a stage the disposition never required (e.g. containment for a
   customer credit with no returned product) -- muted and dashed, so it does
   not read as either "done" (a checkmark for a fact that never happened) or
   "waiting" (a stage the reader is expected to still act on). */
.ncr-timeline-step-not_applicable {
  border-style: dashed;
  color: var(--muted);
}

.ncr-timeline-now {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand);
}

.ncr-guide {
  margin-top: 1rem;
}

.ncr-guide-stage {
  font-weight: 600;
  margin: 0 0 0.35rem;
}

.ncr-guide-heading {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* K-4966: the "Requirement checklist" component -- one row per fact, done
   (green .registry-badge--success) or missing (red .registry-badge--danger,
   the text a link to the screen that resolves it). Shared by the NCR
   card's stage guide and the investigation screen's completion
   requirements, see quality/_requirement_checklist.html. */
.requirement-checklist {
  margin: 0 0 0.75rem;
  padding-left: 0;
  list-style: none;
}

.requirement-checklist-item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.2rem 0;
}

/* K-4966: the "i" hint icon next to a DI (AI) button -- one sentence on
   hover/focus, no JS tooltip library (native `title`). */
.help-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 0.7rem;
  font-style: normal;
  line-height: 1;
  cursor: help;
  margin-left: 0.35rem;
}

/* -- Absence calendar grid (finding 131) ---------------------------------- */

.absence-calendar-grid-wrap {
  overflow-x: auto;
}

.absence-calendar-grid {
  border-collapse: collapse;
  font-size: 0.8rem;
}

.absence-calendar-grid th,
.absence-calendar-grid td {
  border: 1px solid var(--line);
  padding: 0.15rem 0.3rem;
  text-align: center;
  min-width: 1.6rem;
}

.absence-calendar-grid th.employee-col,
.absence-calendar-grid td.employee-col {
  position: sticky;
  left: 0;
  background: var(--surface);
  text-align: left;
  min-width: 10rem;
  z-index: 1;
}

.absence-calendar-grid th.off-day {
  background: var(--rail-bg);
  color: var(--muted);
}

.absence-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0;
  font-size: 0.8rem;
}

.absence-calendar-legend-swatch {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 3px;
  margin-right: 0.3rem;
  vertical-align: middle;
  border: 1px solid var(--line-strong);
}

/* K-7103 (nebuvimų maketai A1): on a phone the "Nustatymai" switch's five
   parts wrap onto a second line instead of pushing the page sideways, as
   `.bi-chead-tools .seg` does, and the header's "Registruoti nebuvimą" drops
   under the title instead of squeezing it to a word per line.
   K-7212 (A9): every Nebuvimai header now carries `.absences-head`; the
   register screen's "Vienam darbuotojui | Keliems darbuotojams (iki 100)"
   switch wraps the same way, each half on one line. */
@media (max-width: 720px) {
  .seg.absences-settings-seg,
  .seg.absences-register-seg,
  .bi-head.absences-head {
    flex-wrap: wrap;
  }

  .seg.absences-register-seg a {
    white-space: nowrap;
  }
}

/* K-7344 (saugos maketai S9): every Sauga screen's header as the mockups
   draw it -- title block on the left, the screen's buttons on the right in
   the same row, the tabs under both. `.page-heading` itself has no layout, so
   the buttons fell under the subtitle. On a phone the title keeps the whole
   line and the buttons wrap under it. */
.page-heading.safety-head {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  justify-content: space-between;
}

.page-heading.safety-head > :first-child {
  flex: 1 1 28rem;
  min-width: 0;
}

/* K-7105 (saugos maketai S1): Suvestinė's "Terminų tendencija" -- twelve
   18px columns on the `.bi-bars` row, a month's due tasks in the neutral
   line shade with its late ones in red at the bottom, a 2px stub for a month
   with nothing due. `safety/dashboard.html` sets the two heights. */
.safety-trend-bars {
  gap: 4px;
  height: 116px;
}

.safety-trend-due {
  background: var(--line-strong);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 2px;
  overflow: hidden;
  width: 18px;
}

.safety-trend-late {
  background: var(--danger);
}

/* Suvestinė's side-by-side tables: counts right-aligned as drawn, and the
   column headings on one line ("Vidutinis rezultatas" broke in two at
   1366px), on 4px sides instead of 6.4px so all five still fit the half
   card -- the wrap scrolls sideways if a heading ever outgrows it. A phone
   keeps wrapping headings, its one-column card being narrower still. */
.safety-dashboard-grid .dashboard-table .fw-num {
  text-align: right;
}

@media (min-width: 721px) {
  .safety-dashboard-grid .dashboard-table th {
    white-space: nowrap;
  }

  .safety-dashboard-grid .dashboard-table th,
  .safety-dashboard-grid .dashboard-table td {
    padding-inline: 4px;
  }
}

/* K-7105 (saugos maketai S1): Sauga's Mokymai / Registrai / Nustatymai
   switch (`safety/_section_switch.html`) wraps the same way on a phone. */
@media (max-width: 720px) {
  .seg.safety-section-seg {
    flex-wrap: wrap;
  }
}

/* K-7266 (K-Parametrai): the calculator parameters' four-way switch
   (Operacijos / Inline stotys / Maršrutai / Bendrieji) wraps the same way. */
@media (max-width: 720px) {
  .seg.calc-parameter-seg {
    flex-wrap: wrap;
  }
}

/* Nebuvimų pertvarka P4 (koordinatoriaus-nota-w2-nebuvimu-pertvarka.md):
   "tvirtinimo kortelės" -- the team screen's pending-decision list, thinned
   out per UI_KANONAS_v1.md §1 (only scale gaps: 8/16/24/32/48/64) instead of
   the dense table rows it used to render as. */

.approval-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.approval-card {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  padding: var(--space-4);
}

.approval-card-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* K-3499 (MOBILE_STRATEGIJA step 2, absences request/approval path walked
   at 390px): every row-action link on this path -- team.html's "Review"
   (both the pending list's own `.button-secondary` and the plain `<a>` in
   the full registry table), its "Enter initial balances" notice link,
   own.html's "Open", and detail.html's controlled-document links --
   measured only its own text-line height (~20px): `.button-secondary`
   carries no min-height, and a bare `<a>` inside a `<td>`/`<li>` never
   inherits the container's padding. Same root cause and fix as
   `.breadcrumb-item a` (K-2614) and `.registry-table.rt-cards td > a`
   (K-3347), scoped to this path's own marker class rather than every
   `.registry-table td a` in the app (a table this card did not walk, out
   of its TOUCH scope). */
.absences-row-action {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
}

/* === Nebuvimai (A7) === */
/* K-7112 (absences design A7, saltiniai/nebuvimai-maketai N-Nustatymai and
   N-Parametrai): figures right-aligned with grey zeros, dates and row
   actions on one line, the parameters card's toolbar (search, the "No hire
   date" chip, "Enter initial balances" at the row's end), the short amber
   "not set" mark, and the norms table's 90px inputs. Tokens only. */
.registry-table th.absence-num,
.registry-table td.absence-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.absence-zero {
  color: color-mix(in srgb, var(--muted) 50%, var(--surface));
}

.registry-table td.absence-nowrap {
  white-space: nowrap;
}

.absence-params-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: var(--space-2);
}

.absence-params-toolbar > .bi-table-search {
  flex-basis: 260px;
}

.absence-params-toolbar > .link-button:last-child {
  margin-left: auto;
}

.absence-hire-missing {
  align-items: center;
  color: var(--brand-dark);
  display: inline-flex;
  font-size: var(--fs-field-value);
  gap: 6px;
}

.absence-norms input {
  max-width: 90px;
}

/* The parameters card as drawn: 12px beside the table instead of the
   card's own padding, the toolbar inset 8px. On a wide screen the cells
   take 8px a side and a long name is cut with an ellipsis (whole name in
   `title`), as on the people list (K-6997) -- seven columns with sortable
   one-line headers otherwise measured 1011px in a 912px card at 1366. */
.card.absence-params-card {
  padding: var(--space-2) 12px 12px;
}

.absence-params-card > .absence-params-toolbar {
  padding: 12px var(--space-2) var(--space-2);
}

@media (min-width: 721px) {
  .absence-params-card .registry-table > thead > tr > th,
  .absence-params-card .registry-table > tbody > tr > td {
    padding-left: 8px;
    padding-right: 8px;
  }

  .absence-params-name {
    display: inline-block;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  .absence-params-toolbar > .bi-table-search {
    flex-basis: 100%;
  }

  .absence-params-toolbar > .link-button:last-child {
    margin-left: 0;
    min-height: 44px;
  }

  .registry-table td.absence-nowrap {
    white-space: normal;
  }
}
/* === end Nebuvimai (A7) === */

/* K-7106 (Nebuvimai A2, mockup N-Komanda): the team screen. The
   continuous-leave review is the mockup's `.caution` strip (13px, tight
   padding, the triangle before the line); the period is one `.sel` box
   holding both date fields, their frames and the calendar trigger's frame
   dropped the same way `.spaudejai-toolbar` drops them; figures sit on the
   right in tabular digits, a zero in grey. */
.card.absences-team-caution {
  font-size: var(--fs-field-value);
  padding: 10px 14px;
}

.absences-team-caution summary {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 10px;
  list-style: none;
}

.absences-team-caution summary::-webkit-details-marker {
  display: none;
}

.absences-team-caution summary > svg {
  flex: none;
  margin-top: 1px;
}

.absences-team-caution summary .task-meta-link {
  color: var(--brand-dark);
}

.absences-team-caution ul {
  margin: var(--space-2) 0 0;
}

.absences-team-filters .sel input.date-iso {
  background: transparent;
  border: 0;
  font-size: var(--fs-control);
  height: 100%;
  min-height: 0;
  padding: 0;
  width: 6.5rem;
}

.absences-team-filters .date-picker-wrap {
  gap: 2px;
  height: 100%;
}

.absences-team-filters .date-picker-trigger {
  background: transparent;
  border: 0;
  min-height: 0;
  min-width: 28px;
}

/* The table's live search box (`simple-table.js` mounts it as the row's
   first cell) drawn as one more 40px `.sel`: caption inside, no frame on
   the input. Beats `.registry-filter-grid.po-toolbar > label`. */
.registry-filter-grid.po-toolbar.absences-team-filters > .simple-table-search {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  display: inline-flex;
  gap: 8px;
  height: var(--control-h);
  padding: 0 10px 0 12px;
  width: auto;
}

.registry-filter-grid.po-toolbar.absences-team-filters > .simple-table-search > span {
  color: var(--muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.registry-filter-grid.po-toolbar.absences-team-filters > .simple-table-search > input {
  background: transparent;
  border: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  width: 10rem;
}

@media (max-width: 720px) {
  .registry-filter-grid.po-toolbar.absences-team-filters > .simple-table-search {
    width: 100%;
  }

  .registry-filter-grid.po-toolbar.absences-team-filters > .simple-table-search > input {
    flex: 1;
    min-width: 0;
    width: auto;
  }

  .absences-team-filters .sel input.date-iso {
    width: 5.75rem;
  }
}

.absences-nowrap {
  white-space: nowrap;
}

.registry-table .absences-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.registry-table .absences-num--zero {
  color: var(--muted);
}

.help-slot {
  position: relative;
}

/* "HELP AS AN L3 SCREEN" (2026-08-05): back to a real `<a>` (was a
   `<button>` wired through the popover toggle this fix removed) -- kept the
   `.help-link` name regardless, since main.css's own
   `.topbar:not(:has(.help-link))` collapse rule below keys off it. */
/* K-2614: measured 26x26px, well under the 44px minimum (see the
   .breadcrumb-item a note above for the source and the rule). `.topbar` is
   a fixed 60px with `align-items: center`, so growing this icon's own box
   has room to spare -- the icon glyph itself (font-size, padding) is
   untouched, only the clickable box grows. */
.help-link {
  align-items: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-size: 1.2rem;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.2rem;
}

.help-link:hover {
  color: var(--brand);
}

/* The current L3 -- the help screen itself is never listed in the module's
   own tab bar (context_processors.navigation), so this is the only "you are
   here" signal for it. Same class+aria-current pairing and the same
   active-state tokens as the L2/L3 registries (`.nav-group-modules
   a.active`, `.tabs a.active`), not a new colour. */
.help-link.active {
  background: var(--brand-tint);
  color: var(--brand-dark);
}

/* -- attention slot (R1 EXECUTION S-4) ------------------------------------ */

.attention-slot {
  position: relative;
}

/* K-2614: measured 53x19px in the badge state (width already clears 44px
   there) but the icon-only state (no unresolved findings, no badge span)
   measured 19x44 once height alone was fixed -- narrower than the icon
   glyph's own em-box. `min-width` covers both states; `justify-content:
   center` keeps the icon centred in the wider box instead of pinned left.
   Same fixed-60px `.topbar` headroom as `.help-link` above. */
.attention-toggle {
  align-items: center;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  font-size: 1.2rem;
  gap: 0.3rem;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
}

.attention-toggle:hover {
  color: var(--brand);
}

.attention-total {
  font-size: var(--fs-field-label);
  margin: 0;
}

.attention-popover {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 0.4rem;
  position: fixed;
  z-index: 50;
}

.attention-popover[hidden] {
  display: none;
}

.attention-popover-row {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--text);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.6rem;
}

.attention-popover-row:hover {
  background: var(--bg);
}

/* Operator help cards (parity finding 62, package P3) — ported layout from
   leoprint-platform@0fe3d84 app/templates/operator_card_base.html's .recipe
   rules, using this port's existing --surface/--line/--brand tokens instead
   of that file's ad hoc hex fallbacks. */
.help-recipe {
  margin-bottom: 1rem;
}

.help-recipe-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.help-recipe-num {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.help-recipe-heading h2 {
  font-size: 1.1rem;
  margin: 0;
}

.help-recipe-when {
  color: var(--muted);
  font-style: italic;
  margin: 0 0 0.75rem 2.75rem;
}

.help-recipe-body {
  margin-left: 2.75rem;
}

.help-recipe-body h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--brand);
  margin: 0.75rem 0 0.25rem;
}

.help-recipe-steps {
  margin: 0;
  padding-left: 1.25rem;
}

.help-recipe-steps li {
  margin-bottom: 0.25rem;
}

/* .help-recipe-mistakes-heading/.help-recipe-mistakes/.help-recipe-slot
   removed (koordinatoriaus-nota-w1-savininko-radiniai-08-12-shell.md item
   5): help_card.html no longer renders a screenshot-placeholder or
   common-mistakes block at all, structurally, so these three rules had no
   selector left to match. */

@media print {
  .sidebar,
  .topbar,
  .no-print {
    display: none !important;
  }
}

/* WORK QUEUE Package 0c (2026-08-03): the shared calendar popup
   (bo/static/js/date-picker.js) enhances every existing "date-iso" field
   app-wide -- see docs/architecture/p0c-shared-date-widget.md. The popup
   follows the same position:fixed + JS-computed getBoundingClientRect()
   pattern as .nav-l1-account-popover above (a positioned/overflow:auto
   ancestor -- a filter grid, a card -- would otherwise clip it), and reuses
   that popover's exact z-index/shadow/radius language rather than
   inventing a second one. Trigger and day cells are >=44x44 CSS px per the
   owner's own touch-terminal note in Package 0b item 1. */
/* UI_KANONAS_v1.md §4 ("Data | 160"), koordinatoriaus-nota-w4-ui-pluostas.md
   item 1: every "date-iso" field (bo/operations/widgets.py's IsoDateInput,
   shared across the whole app) rendered full-width when its `.date-picker-
   wrap` sat inside a CSS-grid `.field` cell -- the grid's own default
   stretch pulled the wrapper to the full column width, and the 100% below
   (of that stretched width) had nothing capping it back down to the
   content's own size. Found live in NCR registration, absence requests and
   the worklog per the note; one cap here closes all three (max-width only
   ever shrinks, never widens, so this cannot make any existing narrower
   date field wider). */
.date-picker-wrap {
  align-items: stretch;
  display: inline-flex;
  gap: 0.4rem;
  max-width: 160px;
}

.date-picker-wrap .date-iso {
  flex: 1 1 auto;
  min-width: 0;
}

/* K-728: the char-counter.js readout under any field carrying
   .char-counter[data-min-length] -- muted until the minimum is met (same
   informational tone as .task-meta), warning-coloured while short so the
   still-missing count reads as a nudge, not a blocking error (the button
   stays enabled; the server is still the one real gate). */
.char-counter-readout {
  color: var(--muted);
  display: block;
  font-size: 0.85rem;
  margin-top: 0.15rem;
}

.char-counter-readout--short {
  color: var(--warning);
}

/* char-counter.js toggles --met/--short together, never both (met = !short),
   so no precedence rule is needed here. */
.char-counter-readout--met {
  color: var(--success);
  font-weight: 600;
}

.date-picker-trigger {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1.1rem;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
}

.date-picker-trigger:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.date-picker-trigger:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.date-picker-popup {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
  padding: 0.75rem;
  position: fixed;
  width: 288px;
  z-index: 55;
}

.date-picker-popup[hidden] {
  display: none;
}

.date-picker-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.date-picker-nav {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.date-picker-nav:hover {
  background: var(--bg);
}

.date-picker-nav:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.date-picker-label {
  font-size: var(--fs-section-title);
  font-weight: 600;
  text-align: center;
  text-transform: capitalize;
}

.date-picker-grid {
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.date-picker-weekday {
  color: var(--muted);
  display: block;
  font-size: var(--fs-field-label);
  padding-bottom: 0.35rem;
  text-align: center;
  text-transform: uppercase;
}

.date-picker-day {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  display: flex;
  font-size: var(--fs-field-value);
  height: 44px;
  justify-content: center;
  width: 100%;
}

.date-picker-day:hover {
  background: var(--bg);
}

.date-picker-day:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.date-picker-day--outside {
  color: var(--muted);
  opacity: 0.55;
}

/* Package 0b's own lesson, applied on day one instead of found later: "a
   state carried only by colour ... is an invisible state on a touch
   terminal." Today is a SHAPE (dashed border), selected is a SHAPE (solid
   fill). Both set `border-style`, so without the combined rule below the
   later-in-source `--selected` would silently win the cascade on the one
   day both are true (a field's own initial value is very often today's
   date) and the "today" cue would vanish exactly when a reviewer is most
   likely to be looking at it -- caught by live verification, not assumed
   from the two rules in isolation. */
.date-picker-day--today {
  border-color: var(--brand);
  border-style: dashed;
  font-weight: 600;
}

.date-picker-day--selected {
  background: var(--brand);
  border-color: var(--brand);
  border-style: solid;
  color: #fff;
  font-weight: 700;
}

.date-picker-day--today.date-picker-day--selected {
  outline: 2px dashed var(--surface);
  outline-offset: -4px;
}

/* T4-04 remainder (docs/plans/w3-note-to-worker-1-datetime-kalendorius.md):
   a "datetime-iso" field gets this extra row under the day grid instead of
   a second popup implementation. Same 44px touch-target rule as the rest
   of the popup (Package 0b item 1). */
.date-picker-time-row {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}

.date-picker-time-label {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: var(--fs-field-label);
}

.date-picker-time-input {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  flex: 1 1 auto;
  font-size: var(--fs-field-value);
  min-height: 44px;
  min-width: 0;
  padding: 0 0.5rem;
}

.date-picker-time-input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* BI B2 §3, the Dinamika screen's 24-month curve (`banga-v1/bi/bi_dinamika
   .html`'s own `.mini-bars`). One inline-flex strip of bars per table row,
   each bar's height set inline because it IS the datum -- there is no class
   for "37 % of this row's own peak", and a stylesheet cannot hold one bar per
   month per customer.

   Deliberately not an SVG like the overview's month axis: that chart is one
   figure on the page and can afford a viewBox; this one repeats inside every
   row of a table, and an SVG per row would put 25 of them in one screen. The
   bars carry no text, so the strip is a single `role="img"` with the row's
   name in its label -- a screen reader gets one sentence, not 24 empty spans.

   A month with no orders renders as a 0 %-tall bar and keeps its slot: the
   gap in the curve is the reading, and `min-height` would fill it in with a
   line that looks like a small month. The gaps stay visible through the
   strip's own baseline border instead. */
.rodikliai-curve {
  align-items: flex-end;
  border-bottom: 1px solid var(--line);
  display: inline-flex;
  gap: 1px;
  height: 26px;
  min-width: 160px;
  width: 100%;
}

/* The close-up card's own curve. Capped in width from the first S13 shot and
   not by taste: at `width: 100%` inside a full-width card the 24 bars became
   one solid 1200px block with the month shape invisible inside it, which is
   the opposite of what a curve is for. The mockup draws this one about a
   third of the page wide. */
.rodikliai-curve--tall {
  height: 96px;
  max-width: 420px;
  min-width: 240px;
}

.rodikliai-curve__bar {
  background: var(--line-strong);
  border-radius: 2px 2px 0 0;
  flex: 1 1 0;
  min-width: 2px;
}

/* The newest three months, which the mockup draws in the accent colour. The
   height difference already carries the figure, so this only says WHICH bars
   are the recent ones -- never colour alone (D7). */
.rodikliai-curve__bar.is-new {
  background: var(--brand);
}

/* The visibility screen's "Rodoma" column: one audience name, one line.
   Found in the S13 photograph and by nothing else -- every test read the badge
   through `assertContains`, which sees "Visi darbuotojai" whether the browser
   drew it on one line or broke it into "Visi darbuoto / jai". Three of the four
   audience names are long enough to wrap inside a pill sized for a status word
   ("Branduol / ys", "Savinink / as"), and a chip broken mid-word is exactly the
   kind of "looks" defect the owner's 08-16 finding was about.

   Scoped to this column rather than added to `.registry-badge` itself: badges
   elsewhere carry longer phrases and are meant to wrap inside their cell. */
.rodikliai-audience-badge {
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Card K-13b — "Note to the makers": the shell's own feedback button and the
   one box behind it (`templates/atsiliepimai/_shell_button.html`).

   The button is a floating corner control rather than a fifth icon in the
   topbar on purpose. The topbar's geometry is measured and fixed (UI_KANONAS
   v1 §2/§3, 51 screens), its icon slots are an ARIA-toggle family with their
   own component rules, and this one is a text action a person must be able to
   FIND without being told -- it carries the library's own `.button
   .button-small` and simply sits above the page instead of inside a bar.

   K-2864 (owner ruling 2026-09-03): below 720px this reasoning is overridden
   by a narrower one -- four stacked chrome rows above the content on a
   390px screen ate ~200px before anything the person came to read, and the
   owner's fix folds the bell/help/note row into the same line as the logo.
   The max-width: 720px block below drops the fixed corner styling for a
   plain flex item inside `.session` (base.html moved the include there);
   above that breakpoint this rule is untouched and the button still floats.

   Every value below is a token or a step on the §1 spacing scale
   (8 · 16 · 24 · 32); the dialog itself is a real `<dialog>`, so the backdrop,
   Escape and focus containment are the browser's and need no rules here.

   K-3918 (RADINYS C1, `/purchasing/suppliers/` desktop): the fixed corner sat
   24px off both edges and floated over a table's own last-row action button
   whenever a page's content happened to reach the bottom of the viewport --
   found live over "Configure" in a Tiekejo tipo table, but the button is
   fixed on EVERY authenticated screen, so any table/form whose last control
   lands near the bottom is at risk, not just this one. Moved to 16px (one
   step in, still the spacing scale) and paired with `.page`'s own
   padding-bottom below, which reserves this button's full footprint so
   page content can never reach the corner it floats in, whatever the
   screen. `.palydovas` below stacks off this same corner and its own
   `bottom` step moved with it. */
.feedback-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}

.feedback-fab-label-short {
  display: none;
}

.feedback-dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
}

.feedback-dialog::backdrop {
  background: rgb(0 0 0 / 40%);
}

.feedback-dialog h2 {
  margin: 0 0 8px;
  font-size: var(--fs-section-title);
}

.feedback-dialog-lead {
  margin: 0 0 16px;
  color: var(--muted);
}

.feedback-dialog textarea {
  width: 100%;
}

.feedback-dialog-where {
  margin: 8px 0 16px;
  color: var(--muted);
  font-size: var(--fs-field-label);
}

/* Card K-29 §2: the one tick in the box. It reads as a warning before it is
   read at all -- a person about to claim that work has stopped should see the
   weight of the claim -- but stays quiet until it is ticked, so the ordinary
   note is not shouted at on its way out. `:has()` rather than a class the JS
   toggles: the state is already in the DOM, and a second copy of it in a
   class attribute is one more thing to get out of step.

   The row itself is the platform's own `.checkbox-label` (box + sentence,
   the 20px box included), and only the frame around it belongs to this card.
   The selector is scoped to `.feedback-dialog` for specificity, not for
   style: `.form-stack label` (this form carries `form-stack`) is a two-class
   rule that lays every label out as a GRID, and a one-class `.feedback-
   dialog-urgent` loses to it -- measured live, the box sat alone on a row
   above its own sentence. */
.feedback-dialog .feedback-dialog-urgent {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--muted);
}

.feedback-dialog .feedback-dialog-urgent:has(:checked) {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}

.feedback-dialog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The registry link is the only thing in the row that is not an action on
   this box, so it takes the leftover space and pushes the two buttons to the
   right edge where every other dialog-style footer in this design puts them. */
.feedback-dialog-registry {
  margin-right: auto;
}

/* K-1145: NCR attachment photos used to open through their own download URL,
   which left the current tab and showed exactly one image with no way back
   to the rest of the evidence. A real `<dialog>`, same as `.feedback-dialog`
   above -- Escape, the backdrop and focus trapping are the browser's job --
   with prev/next arrows so a person can page through every photo on the NCR
   without leaving the box. */
.attachment-lightbox {
  position: fixed;
  max-width: min(90vw, 960px);
  max-height: 90vh;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
}

.attachment-lightbox::backdrop {
  background: rgb(0 0 0 / 70%);
}

.attachment-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 75vh;
  margin: 0 auto;
  object-fit: contain;
}

.attachment-lightbox-caption {
  margin: 8px 0 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.attachment-lightbox-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.attachment-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.attachment-lightbox-prev {
  left: 8px;
}

.attachment-lightbox-next {
  right: 8px;
}

/* Branduolio langas (K-5767): a shared `<dialog>` shell for Branduolys
   screens, same family as `.feedback-dialog` above and `.attachment-
   lightbox` -- Esc, the backdrop and focus-return are the browser's job. */
/* K-5927 (NCR design N1): the mockups' dialog -- 14px radius, no border
   but a soft drop shadow plus a hairline ring. */
.leo-langas {
  width: min(880px, 92vw);
  max-height: 85vh;
  padding: 24px;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 12px 40px rgb(0 0 0 / 14%), 0 0 0 1px rgb(0 0 0 / 6%);
  background: var(--surface);
  color: var(--text);
  overflow-y: auto;
}

.leo-langas::backdrop {
  background: rgb(0 0 0 / 50%);
}

.leo-langas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
}

.leo-langas-title {
  margin: 0;
  font-size: var(--fs-section-title);
}

.leo-langas-close {
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.leo-langas-body h3 {
  margin: 0 0 4px;
  font-size: var(--fs-field-label);
}

.leo-langas-body .ai-tekstas {
  margin: 0 0 16px;
}

/* Same treatment `ai_suvestine.html`'s own inline style gives
   `branduolys_tekstas`'s output (K-5257) -- text stays `pre-wrap` so the
   line breaks a person actually typed survive, and a wide pipe-table
   scrolls its own box instead of stretching the dialog. */
.leo-langas-body .lentele-tekstas {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.leo-langas-body .lentele-is-teksto {
  margin: 12px 0;
}

/* K-6241 (NCR design N10, mockup `Formos`): a dialog that has its own URL
   (containment, defect validation) -- the same `.leo-langas` box, 560px
   wide, standing in the middle of a grey stage instead of over a backdrop.
   The head is title + one grey line with the close mark beside them; a grey
   `.leo-langas-note` carries what is already on file; the actions sit
   right-aligned under the fields. */
.leo-langas-page {
  background: var(--rail-bg);
  border-radius: var(--radius-lg);
  display: grid;
  justify-items: center;
  padding: var(--space-12);
}

.leo-langas--page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-height: none;
  overflow: visible;
  width: min(560px, 100%);
}

.leo-langas--page .leo-langas-head {
  align-items: flex-start;
  margin: 0;
}

.leo-langas-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.leo-langas--page .leo-langas-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.leo-langas--page .leo-langas-close {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  text-decoration: none;
}

.leo-langas-note {
  background: var(--bg);
  border-radius: var(--radius-md);
  font-size: var(--fs-control);
  margin: 0;
  padding: 10px 12px;
}

.leo-langas-note-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.leo-langas-form {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-control);
  gap: var(--space-4);
}

.leo-langas-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.leo-langas-actions .link-button {
  text-decoration: none;
}

@media (max-width: 720px) {
  .leo-langas-page {
    padding: var(--space-4) 0;
    background: transparent;
  }

  /* K-45: 44px touch targets on a phone. */
  .leo-langas--page .leo-langas-close,
  .leo-langas-actions .link-button {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
    min-width: 44px;
  }
}

/* The previous/current/next week strip on suvestine.html and
   ai_suvestine.html (K-5768). Its two links were bare inline text split by
   literal `|` characters -- one text line tall, under the K-45 44px tap floor
   on a phone. The gap now comes from here, and each link is its own
   44x44 target; the current week stays a plain `<strong>` between them. */
.week-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
}

.week-switcher a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.week-switcher a:hover {
  background: var(--brand-tint);
}

.week-switcher strong {
  padding: 0 4px;
  white-space: nowrap;
}

/* UI_KANONAS v1 §3: one date, one format, and on one line -- the column is
   the narrowest in the table and broke "2026-08-19 22:45" after the month. */
.feedback-when {
  white-space: nowrap;
}

/* The Note column holds prose a person typed, and people paste things: a URL,
   an order number, a stack trace, a row of forty identical characters. None of
   those offer a break opportunity, so the cell demanded its full length and the
   table grew to match -- measured on the stand at 1.86 MILLION pixels wide from
   one pasted run of "a"s, which pushed Status, Channel and Scope off the right
   edge of the screen for every row in the table.

   `anywhere` rather than `break-word`: only `anywhere` is counted when the
   browser works out the column's min-content width, which is the number that
   was wrong. Scoped to this one cell -- the neighbouring columns hold names,
   addresses and select boxes that must NOT be broken mid-token. Card K-30 did
   not cause this (the run of "a"s is a card K-13 probe row), but adding a
   seventh column is what made it impossible to ignore. */
.feedback-note-cell {
  overflow-wrap: anywhere;
  /* `anywhere` above makes the cell's min-content width one character, which
     leaves this column entirely at the mercy of whatever the others demand --
     measured at 173px beside a 267px channel dropdown, i.e. the sentence a
     person wrote was the narrowest thing on their own registry. A floor, not a
     width: on a wide screen the column still takes the space the table has
     left over (measured at 222px), and this only bites when it would otherwise
     go below a line worth reading. Kept under that leftover on purpose -- a
     larger floor pushes the table past `.registry-table-wrap` and puts the
     Save button behind a horizontal scrollbar. */
  min-width: 13rem;
}

/* And the other axis of the same problem: once the run of characters wraps, it
   is TALL instead of wide -- the same stand row turned one table row into tens
   of thousands of pixels of height, which is a registry nobody can scan (and a
   page Chrome refuses to screenshot). A note longer than this box scrolls
   inside it; nothing is hidden and no row can set the height of the table. */
.feedback-note-text {
  max-height: 12rem;
  overflow-y: auto;
}

/* Card K-30 §5: the classifier's one line of reasoning, and the scope note
   beside it. Grey and small on purpose -- it is the machine talking under a
   control the human owns, so it must read as a footnote to the select above
   it and never as a second value competing with it. `var(--muted)` is the
   platform's own quiet text colour (used by `.field-hint` and every other
   explanatory line in this stylesheet); a grey of this module's own would be
   the second definition of the same idea. */
.feedback-ai-note {
  margin: 4px 0 0;
  font-size: 0.85em;
  line-height: 1.35;
  color: var(--muted);
}

/* Card K-30 §4: the unsent reply draft, inset under the note it answers.
   The left rule is what says "this is about the text above it" without
   spending a column on it, and the whole block only ever appears on the
   handful of rows the classifier read as a misunderstanding. */
.feedback-draft {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--line-strong);
  background: var(--bg);
  border-radius: var(--radius-sm);
}

.feedback-draft-label {
  margin: 0 0 4px;
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.feedback-draft-text {
  margin: 0 0 8px;
}

/* Card K-54: the microphone row -- one button and its own timer, sitting
   between the textarea and the urgent tick so the two ways of filling the
   field (typing, dictating) read as neighbours rather than as a second box. */
.feedback-voice-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}

/* A plain, filled dot rather than an animated one: `prefers-reduced-motion`
   would have to be threaded through a pulse keyframe for no gain over a
   colour that already says "this is different from the idle button". */
.feedback-mic--recording {
  border-color: var(--danger);
  color: var(--danger);
}

.feedback-mic--recording i {
  color: var(--danger);
}

.feedback-mic-timer {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.feedback-mic-error {
  margin: 0 0 8px;
  color: var(--danger);
  font-size: var(--fs-field-label);
}

/* Card K-54's own "window hint": a static line, never AI-written, naming what
   is worth saying -- it sits under the fields rather than above the textarea
   so it reads as a footnote and not as a label the box requires. */
.feedback-dialog-hint {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: var(--fs-field-label);
}

/* K-755 (owner, 2026-08-26): the week's finances went from two columns to six,
   and the `Pokytis` column the owner dropped is replaced by the shape of the
   line itself -- *"kompaktiška ir gražu, o geriau ir grafiškai"*.

   The sparkline's geometry is `bo/rodikliai/week_finance.py`'s, laid out in a
   viewBox and drawn at whatever size these rules give it. Nothing here names a
   colour: `--brand` is the one variable that is redefined under
   `:root[data-theme="dark"]`, so the same rule draws a legible line in either
   theme and the dark screen never gets a stroke somebody picked for the light
   one. `fill: none` on the polyline is not optional -- an unfilled SVG
   polyline defaults to BLACK fill, which turns every sparkline into a solid
   wedge under its own line. */
/* Name and drawing on ONE line: stacked, the sparkline read as a stray
   underline beneath the label and each of the eleven rows stood a line
   taller than it had anything to say. */
.finance-line-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.finance-line-name {
  min-width: 0;
}

.finance-spark {
  display: block;
  width: 72px;
  height: 22px;
  flex: none;
  /* The end marker's radius sits on the padding, not outside it, so nothing
     is clipped -- but a browser that rounds the other way costs a pixel of
     the dot rather than a redraw. */
  overflow: visible;
}

.finance-spark polyline {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* The box is stretched to the cell's width (`preserveAspectRatio="none"`),
     so an untouched stroke would be stretched with it and read thicker
     horizontally than vertically. */
  vector-effect: non-scaling-stroke;
}

.finance-spark circle {
  fill: var(--brand);
}

/* Six money columns wrap into two lines each the moment the card narrows, and
   a table of half-height and full-height cells is the thing that stops looking
   like a table. They are short by construction (`compact_money`), so keeping
   them on one line costs nothing and the wrapper scrolls if the sum still does
   not fit. `tabular-nums` lines the digits up in a column, which is the whole
   point of reading six weeks side by side. */
.finance-weeks th.numeric,
.finance-weeks td.numeric {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The headings (`2026 · 14 · 03-30`) are the widest cells in the table and the
   least of what the reader is here for, so they take the field-label step of
   the scale. Measured, not guessed: at the body size the two tables laid out
   919px inside a 904px card and the newest week -- the one column that matters
   most -- was the one hanging off the scrolling edge. */
.finance-weeks th.numeric {
  font-size: var(--fs-field-label);
}

.finance-weeks .finance-line {
  min-width: 9rem;
}

/* Below the mobile breakpoint `.rt-cards` turns each row into a card of
   label/value pairs, and the name cell is then the card's own title rather
   than a right-aligned value beside a label. */
@media (max-width: 720px) {
  .registry-table.rt-cards td.finance-line {
    text-align: left;
  }

  /* `rt-cards.js` labels every cell from its own column heading, and the name
     cell's heading is "Figure" -- a word that reads as a value's label above
     the card's own title. The row name IS the title here, so the label is
     dropped rather than printed over it. */
  .registry-table.rt-cards td.finance-line::before {
    content: none;
  }

  .finance-weeks .finance-line {
    min-width: 0;
  }
}

/* ---------------------------------------------------------------------------
   Card K-79: the testing companion, bottom-right, while the gama window is
   open.

   It sits ABOVE the note button (`.feedback-fab`, 16px from the same corner
   since K-3918 moved it in from 24px) rather than beside it: the two are
   both for a person testing, they are read in that order -- see where you
   are, then write down what is wrong -- and stacking keeps the corner one
   target instead of two competing ones. Its `z-index` is the same 40 the
   note button carries, and the `bottom` below is that button's 16px offset
   plus its own height plus one 16px step.

   Collapsed it is a summary line and nothing else, which is the card's
   "susitraukia i ikonele"; open it is capped at a third of the viewport and
   scrolls, so a module with a long purpose sentence can never grow a panel
   over the page it is supposed to help someone read. Every value is a token
   or a step on the component library's own 8 · 16 · 24 · 32 spacing scale.
   --------------------------------------------------------------------------- */
.palydovas {
  position: fixed;
  right: 16px;
  bottom: 72px;
  z-index: 40;
  width: min(320px, calc(100vw - 48px));
  max-height: 33vh;
  overflow-y: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}

.palydovas-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: var(--fs-field-label);
}

.palydovas-body {
  padding: 0 16px 16px;
  display: grid;
  gap: 8px;
}

.palydovas-body p {
  margin: 0;
}

.palydovas-paskirtis {
  font-size: var(--fs-field-label);
}

.palydovas-tuscia,
.palydovas-busena,
.palydovas-pazanga {
  color: var(--muted);
  font-size: var(--fs-field-label);
}

.palydovas-verdiktai {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.palydovas-verdiktai-label,
.palydovas-verdiktas-esamas {
  color: var(--muted);
  font-size: var(--fs-field-label);
}

/* -- Dinamika: the curve as a button, and the big chart (K-3017 e) --------
   Each small curve in the horizon table is wrapped in a button that opens
   the same months as a big chart in a `<dialog>`. The button carries
   `link-button` for the component guard and undoes the underline and the
   brand colour here: the strip is the control, not a word. 44 px tall for
   the K-45 touch rule even though the strip itself is 26 px. */
.rodikliai-curve-open {
  align-items: flex-end;
  color: inherit;
  display: flex;
  min-height: 44px;
  padding: 9px 0;
  text-decoration: none;
  width: 100%;
}

.rodikliai-curve-open:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.rodikliai-curve-open--tall {
  width: auto;
}

/* The dialog. Same family as `.attachment-lightbox` (real `<dialog>`, the
   browser owns Escape, backdrop and focus). Full screen on a phone -- the
   chart is wider than any phone and scrolls sideways inside the dialog. */
.rodikliai-lightbox {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  max-height: 90vh;
  max-width: min(94vw, 1400px);
  padding: 16px 20px 20px;
  width: min(94vw, 1400px);
}

.rodikliai-lightbox::backdrop {
  background: rgb(0 0 0 / 60%);
}

.rodikliai-lightbox__head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rodikliai-lightbox__head h2 {
  font-size: var(--fs-section-title);
  margin: 0;
}

.rodikliai-lightbox__close {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--text);
  flex: 0 0 auto;
  font-size: 1.5rem;
  height: 44px;
  line-height: 1;
  text-decoration: none;
  width: 44px;
}

.rodikliai-lightbox__chart {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.rodikliai-bigchart {
  display: block;
  height: auto;
  max-width: 100%;
  min-width: 100%;
}

.rodikliai-bigchart__grid {
  stroke: var(--line);
  stroke-width: 1;
}

.rodikliai-bigchart__window {
  fill: var(--brand);
  opacity: 0.06;
}

.rodikliai-bigchart__bar {
  fill: var(--line-strong);
}

.rodikliai-bigchart__bar.is-new {
  fill: var(--brand);
}

.rodikliai-bigchart__best {
  stroke: var(--brand-dark);
  stroke-dasharray: 6 4;
  stroke-width: 1.5;
}

.rodikliai-bigchart__axis {
  fill: var(--muted);
  font-size: 12px;
}

.rodikliai-bigchart__value {
  fill: var(--text);
  font-size: 11px;
}

.rodikliai-lightbox__facts {
  display: grid;
  gap: 4px 16px;
  grid-template-columns: max-content 1fr;
  margin: 12px 0 8px;
}

.rodikliai-lightbox__facts dt {
  color: var(--muted);
}

.rodikliai-lightbox__facts dd {
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* -- Apžvalga: the families' corridor signal and 24-month curve (K-9430) --
   A signal row carries the mockup's orange stripe on its left edge; the
   curve is the Dinamika button around an inline SVG, its last three months
   drawn stronger. The big chart reuses `.rodikliai-bigchart` above. */
.bi-list tr.bi-signal > td:first-child {
  box-shadow: inset 3px 0 0 var(--warning);
}

.bi-family-spark-cell {
  width: 128px;
}

.bi-family-spark {
  align-items: center;
  width: auto;
}

.bi-family-spark__all,
.bi-family-spark__recent {
  fill: none;
  stroke-linejoin: round;
}

.bi-family-spark__all {
  stroke: var(--line-strong);
  stroke-width: 1.5;
}

.bi-family-spark__recent {
  stroke: var(--brand);
  stroke-width: 2;
}

.bi-family-chart__band {
  fill: var(--line-strong);
  opacity: 0.25;
}

.bi-family-chart__turnover {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
}

.bi-family-chart__margin {
  fill: none;
  stroke: var(--warning);
  stroke-dasharray: 4 3;
  stroke-width: 1.5;
}

.bi-family-chart__last {
  fill: var(--brand);
}

.bi-family-chart__legend {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 6px 0 0;
}

.bi-family-chart__key {
  background: var(--brand);
  border-radius: 2px;
  display: inline-block;
  height: 10px;
  margin-right: 5px;
  width: 10px;
}

.bi-family-chart__key--margin {
  background: var(--warning);
}

.bi-family-chart__key--band {
  background: color-mix(in srgb, var(--line-strong) 25%, transparent);
}

.bi-family-chart__key--window {
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  outline: 1px solid var(--line);
}

@media (max-width: 600px) {
  .rodikliai-lightbox {
    border: 0;
    border-radius: 0;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    max-height: none;
    max-width: none;
    padding: 12px;
    width: 100vw;
  }

  /* Keep the chart at its drawn width and let the dialog scroll sideways:
     shrunk to a phone's width the month figures would be unreadable. */
  .rodikliai-bigchart {
    max-width: none;
    min-width: 0;
  }
}


/* K-3138 -- the project card's "Related" section (templates/projektas/
   _related.html): documents, NCR actions and purchase orders pinned to the
   project. Rows reuse `.projektas-darbai-dabar__row` above; these rules only
   place the unpin button at the row's end and turn every row and the search
   form into one column on a phone (the card's own "telefone sekcija
   stulpeliu" requirement), so nothing scrolls sideways at 390px. */
.projektas-related__heading {
  font-size: var(--fs-control);
  font-weight: 600;
}

.projektas-related__heading small {
  color: var(--muted);
  font-weight: normal;
}

.projektas-related__row {
  align-items: center;
}

.projektas-related__phase {
  color: var(--muted);
}

.projektas-related__row .projektas-related__detach {
  margin-left: auto;
}

/* K-45: every tap target in the section at least 44px tall -- the shared
   `.button` anchor renders at 34px, the `<button>` at 44px; level them. */
.projektas-related__row .button,
.projektas-related__search .button {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  min-height: 44px;
}

.projektas-related__search {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.projektas-related__search .field {
  min-width: 0;
}

.projektas-related__search .projektas-related__query {
  flex: 1 1 16rem;
}

.projektas-related__search .projektas-related__query input {
  width: 100%;
}

@media (max-width: 720px) {
  .projektas-related__row,
  .projektas-related__search {
    align-items: stretch;
    flex-direction: column;
  }

  .projektas-related__row .projektas-related__detach {
    margin-left: 0;
  }

  .projektas-related__row select,
  .projektas-related__search select,
  .projektas-related__search input {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   K-3141 -- Finansai (accounts_receivable + bank_accounts) at phone width.
   Three module-level classes, all inert above 720px so desktop is untouched:

   `.fin-num`   -- a date/amount/count cell. `.card`'s `overflow-wrap:
                   anywhere` is inherited by every table cell, and in a
                   min-content column that broke "2026-09-06 17:08" into
                   three lines and "1247718.44" wherever the digits ran out
                   of room (owner 09-04: "skaiciai neluzta"). The cell keeps
                   one line and the `.registry-table-wrap` scrolls instead.
   `.fin-actions` -- a container of row/heading/filter buttons. `<button>`
                   already gets the K-45 44px floor from the shared rule
                   above, but `a.button` links ("Perziureti", "Redaguoti",
                   "Naujas sablonas") measured 34px; this lifts them to the
                   same floor without changing their desktop size.
   `.fin-actions--stack` -- a form's submit row (`.form-actions`): one
                   column, full-width buttons, so the primary action spans
                   the screen instead of sitting content-width at the left.
   The first column of every module table is pinned with the existing
   `.registry-table--sticky-first` (K-500) -- no new sticky mechanism. */
@media (max-width: 720px) {
  .fin-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .fin-actions .button,
  .fin-actions button:not(.link-button):not(.button-link) {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
  }

  .fin-actions--stack {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr);
  }

  .fin-actions--stack .button,
  .fin-actions--stack button:not(.link-button):not(.button-link) {
    width: 100%;
  }
}

/* K-4009 (Gediminas session 6, point 1): NCR module root -- KPI panel first,
   process table as folded help. Open-by-stage band reads left to right in
   the owner's sequence; the per-row stage strip in the table uses the same
   four state tokens K-4008 standardises on (done --success, current
   --warning, waiting --muted, error --danger) -- never a raw hex. */
.ncr-stage-band {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.ncr-stage-band a {
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: inherit;
  display: flex;
  flex: 1 0 auto;
  gap: 0.5rem;
  justify-content: space-between;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}

.ncr-stage-band a strong {
  font-size: 1.25rem;
}

.ncr-stage-band a + a::before {
  content: "\2192";
  color: var(--muted);
  margin-left: -0.5rem;
}

.ncr-kpi-money.closure-quality-grid {
  grid-template-columns: minmax(0, 1fr);
}

.ncr-kpi-money strong {
  font-size: 1.25rem;
  overflow-wrap: anywhere;
}

.ncr-process-table > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.75rem 0;
}

.ncr-process-table > summary strong {
  font-size: 1.1rem;
}

.ncr-process-table > summary .task-meta {
  margin: 0;
}

/* K-3378: "Man šiandien"'s "gaminys" schema (`flowchart LR`, ten steps plus
   two side chains) is folded by default behind a native `<details>` --
   `man_siandien.html` renders no `open` attribute, so a browser with no
   JavaScript keeps it closed too. `summary` keeps the native disclosure
   triangle (no icon override, unlike `.field-help-toggle` above) since this
   is the screen's own headline toggle, not a small inline icon; the 44px
   floor is K-45's touch-target rule.

   Open, `catalogs/schema_block.html`'s page-level style has fitted
   `.schema-figure svg` to the block's width (`max-width: 100%`) since
   K-6191; before that it forced `max-width: none` so the org chart could
   stay wide and scroll -- exactly the behaviour this diagram must NOT
   have. The two overrides below (two classes beat the page-level single
   class) do different jobs. The `.schema-figure` one is NOT a restatement:
   it lifts the shared preview's 420px window and its `overflow: hidden`,
   so this card's figure box is never cropped and never scrolls. The
   `.schema-figure svg` one only restates the width fit for this card, so a
   later change to the shared rule cannot bring the scrollbar back here:
   Mermaid's drawn SVG carries a `viewBox`, and the browser scales the
   whole picture down to the card's width instead of clipping its
   right-hand boxes behind a horizontal scrollbar. It does not reset the
   shared `max-height: 420px` on the SVG, so the picture still shrinks to
   fit both the card's width and that 420px height. The same rules hold at
   any width down to a 390px phone -- there is no separate mobile block. */
.man-siandien-schema > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  min-height: 44px;
}

.man-siandien-schema .schema-figure {
  max-height: none;
  overflow: visible;
}

.man-siandien-schema .schema-figure svg {
  height: auto;
  max-width: 100%;
  width: auto;
}

/* K-6897 (Man-siandien-pataisa.dc.html): a 440px side column (was R2's
   380px); the rows fold by <main>'s own width, not the window's, because
   the side navigation eats a different share at each window size. Under
   1100px "Reikia tavęs" puts its deadline and action under the title --
   beside them the title had ~109px and broke onto three lines (<main> is
   928px at a 1366px window); under 900px the side column goes under
   "Reikia tavęs", which has the whole width again until 600px. */
.man-siandien-body {
  container: man-siandien / inline-size;
}

.bi-columns.man-siandien-columns {
  grid-template-columns: minmax(0, 1fr) 440px;
}

@container man-siandien (max-width: 600px) or ((min-width: 901px) and (max-width: 1100px)) {
  .man-siandien-columns .row2 {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .man-siandien-columns .row2 > :last-child {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@container man-siandien (max-width: 900px) {
  .bi-columns.man-siandien-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The number tiles are links; like the mockup they are not underlined. */
.man-siandien-kpis > a.kpi {
  color: inherit;
  text-decoration: none;
}

.man-siandien-kpis > a.kpi:hover {
  border-color: var(--line-strong);
}

.man-siandien-demo {
  color: var(--muted);
  flex: none;
  font-size: var(--fs-field-value);
  white-space: nowrap;
}

.man-siandien-demo a {
  text-decoration: none;
}

/* An Info row: the whole row is the "read and open" submit button -- the
   title on one line, "type · date · Atverti →" under it, the text up to two
   lines. */
.man-siandien-inf,
.man-siandien-inf + .man-siandien-inf {
  border-bottom: 1px solid var(--line);
  margin: 0;
}

.man-siandien-inf:last-child {
  border-bottom: 0;
}

.man-siandien-inf > .link-button {
  color: var(--text);
  display: block;
  padding: 12px 0;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  width: 100%;
}

.man-siandien-inf-title {
  display: block;
  font-size: var(--fs-control);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.man-siandien-inf-dot {
  background: var(--info);
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  margin-right: 8px;
  vertical-align: middle;
  width: 8px;
}

.man-siandien-inf-dot--danger {
  background: var(--danger);
}

.man-siandien-inf-meta {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  margin-top: 2px;
}

.man-siandien-inf-go {
  color: var(--brand-dark);
  font-weight: 500;
}

.man-siandien-inf-text {
  -webkit-box-orient: vertical;
  color: var(--muted);
  display: -webkit-box;
  font-size: var(--fs-field-value);
  -webkit-line-clamp: 2;
  line-height: 1.45;
  margin-top: 4px;
  overflow: hidden;
}

.man-siandien-inf > .link-button:hover .man-siandien-inf-go {
  text-decoration: underline;
}

.man-siandien-inf-all {
  font-size: var(--fs-field-value);
  text-decoration: none;
}

/* K-45: the demo toggle and "Visi pranešimai" are text links -- 44px
   targets on a phone. */
@media (max-width: 720px) {
  .man-siandien-demo a,
  .man-siandien-inf-all {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
}

/* K-6527 (NCR design audit K1): the NCR path is a tall top-down chain, so
   the shared "fit the whole picture into 420px" thumbnail shrank it to ~10 %
   of the card's width and no label was readable. Here the picture keeps its
   drawn size up to the card's width and the 420px window crops its height
   instead; "Enlarge" still opens the whole picture in the dialog. */
.ncr-dashboard-schema .schema-figure svg {
  max-height: none;
}

/* K-3028 -- Rodikliai > Gamyba, "Spaudėjų KPI". The desktop program's
   screens on the platform's own components: the cards are
   `.dashboard-cards`/`.kpi-card` with a pre-wrapped detail line (the
   original's multi-line card text); ranking rows are tinted by the KPI
   target the way the original tinted them (green/yellow/red rows), never
   colour alone -- the figure is in the cell -- and the Δ square beside
   `Skirt.` is the original's gap severity mark.
   K-6115 (BI mockups `Gamyba-*`): the frame -- one tool row of R1 `.sel`
   fields with the status on the right, then the R1 `.side` navigation
   beside the screen (24px apart, 16px between the screen's blocks), the
   report buttons closing it under a rule. One column on a phone. */
.spaudejai-pre {
  white-space: pre-line;
}

.spaudejai-toolbar {
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0;
}

.spaudejai-toolbar .sel input {
  background: transparent;
  border: 0;
  font-size: var(--fs-control);
  height: 100%;
  min-height: 0;
  padding: 0;
  width: 6.5rem;
}

.spaudejai-toolbar__search input {
  width: 9rem;
}

/* The shared calendar (date-picker.js) inside the from-to box: its trigger
   drops its own frame so the box stays one 40px `.sel`, as drawn. */
.spaudejai-toolbar .date-picker-wrap {
  gap: 2px;
  height: 100%;
}

.spaudejai-toolbar .date-picker-trigger {
  background: transparent;
  border: 0;
  font-size: 0.95rem;
  min-height: 0;
  min-width: 28px;
}

.spaudejai-toolbar__status {
  margin-left: auto;
}

.spaudejai-layout {
  align-items: flex-start;
  display: flex;
  gap: var(--gap-layout);
}

.spaudejai-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.spaudejai-main > .card,
.spaudejai-main .section-heading h2,
.spaudejai-main .section-heading p {
  margin: 0;
}

.spaudejai-actions--foot {
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 16px;
}

.spaudejai-band {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.spaudejai-band > a {
  font-weight: 500;
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .spaudejai-layout {
    flex-direction: column;
  }

  /* K-6244: as a column, `align-items: flex-start` sizes the screen to its
     widest table (Kalendorius > Visa komanda's 31 day columns: 2229 px at
     390 px); stretched, the table scrolls inside its own wrap instead. */
  .spaudejai-main {
    align-self: stretch;
  }

  .spaudejai-toolbar .sel,
  .spaudejai-toolbar__search input {
    width: 100%;
  }

  .spaudejai-toolbar__status {
    margin-left: 0;
  }

  .spaudejai-toolbar .date-picker-trigger {
    min-height: 44px;
    min-width: 44px;
  }

  /* K-6508 (BI R10, K-45 touch targets): "Išvalyti filtrą" and the report
     row's "Instrukcija" are 32px `.button-small` links, and Kalendorius's
     month switcher links are 42px inside the 44px box -- `.bi-tools .wk`'s
     own fix, on the Gamyba screens. */
  .spaudejai-toolbar .link-button,
  .spaudejai-actions .link-button {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  .spaudejai-main .wk {
    height: auto;
  }

  .spaudejai-main .wk > * {
    align-self: stretch;
    min-height: 44px;
  }
}

.spaudejai-actions .button {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
  min-width: 44px;
  white-space: normal;
}

/* K-5885: the top buttons, two per row on a phone. */
@media (max-width: 480px) {
  .spaudejai-actions--top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.spaudejai-cards .kpi-card > strong {
  font-size: 1.6rem;
}

.spaudejai-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}

@media (max-width: 720px) {
  .spaudejai-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.spaudejai-card--accent {
  border-top: 3px solid var(--brand);
}

.spaudejai-card--danger {
  border-top: 3px solid var(--danger);
}

.spaudejai-card--plain {
  border-top: 3px solid var(--line);
}

.spaudejai-rank td,
.spaudejai-rank th {
  padding-block: 9px;
  padding-inline: 6px;
  white-space: nowrap;
}

/* K-6399: Brokas (9 columns), Normos (11) and Valandos (9) ran 890-950 px
   wide in a ~670 px card at 1440 px -- the last columns sat off the card
   and a figure was cut mid-number. The column heads wrap -- a word per
   line, the sort arrow under them when even that is too wide -- and the
   cells take half the padding, so every column shows; the phone's
   `rt-cards` view is left as it is. */
@media (min-width: 721px) {
  .spaudejai-fit th,
  .spaudejai-fit td {
    padding-inline: 6px;
  }

  .spaudejai-fit th,
  .spaudejai-fit th .simple-table-sort {
    white-space: normal;
  }

  .spaudejai-fit th .simple-table-sort {
    flex-wrap: wrap;
  }
}

/* `.registry-table th, td { text-align: left }` outranks the bare `.fw-num`,
   so figures sat flush left; the Gamyba mockups right-align them. */
.spaudejai-main .registry-table .fw-num {
  text-align: right;
}

/* K-7284 (parts design D3): the machine and category lists right-align
   their counts and sort order, as the D-Masinos / D-Kategorijos mockups, and
   the code ("MSN-001") and the serial number ("MA-2024-000187", K-7351) do
   not break at their hyphens. */
.parts-registry .parts-registry-num {
  text-align: right;
}

.parts-registry td > code {
  white-space: nowrap;
}

/* K-7351: the machine row's Edit + Archive sit on one line
   (`.actions--nowrap`), as the D-Masinos mockup. Seven columns in a 978px
   <main> (1366 window) then left the location 72px, one word per line; the
   ghost buttons' own padding already separates them, so the row's 1rem gap
   goes, and the cells take 8px a side instead of 12px. K-7461: only that
   one-line row -- the category list's wrapping buttons keep their gap. */
.parts-registry .actions--nowrap {
  gap: 0;
}

.parts-registry th,
.parts-registry td {
  padding-inline: 8px;
}

.spaudejai-machinehdr > td {
  background: var(--bg);
  font-weight: 700;
}

.spaudejai-sumrow > td {
  font-weight: 700;
}

.spaudejai-row--good > td,
td.spaudejai-cell--good {
  background: rgb(46 125 50 / 8%);
}

.spaudejai-row--mid > td,
td.spaudejai-cell--mid {
  background: rgb(239 125 1 / 10%);
}

.spaudejai-row--low > td,
td.spaudejai-cell--low {
  background: rgb(198 40 40 / 8%);
}

.spaudejai-seg--setup > td {
  color: var(--muted);
}

.spaudejai-seg--gap > td {
  background: rgb(198 40 40 / 8%);
}

.spaudejai-gap {
  border-radius: 2px;
  display: inline-block;
  height: 0.7em;
  width: 0.7em;
}

.spaudejai-gap--small {
  background: var(--success);
}

.spaudejai-gap--mid {
  background: #ef7d01;
}

.spaudejai-gap--big {
  background: #c62828;
}

/* K-6244 (BI mockups `Gamyba-Reitingas/-Operatorius/-Kalendorius/-Tikslai`),
   on R1's components and tokens only.
   Screen heading: title + one line on the left, the screen's actions on the
   right, bottom-aligned as drawn. */
.spaudejai-head {
  align-items: flex-end;
  flex-wrap: wrap;
}

/* The mockups keep the screen's actions beside its title: the title block
   shrinks and wraps its note instead of pushing the actions to a new row. */
.spaudejai-head > div:first-child {
  flex: 1 1 320px;
}

/* Kalendorius: the month arrows stay drawn at the archive's first and last
   month (the mockup's switcher is always ‹ month ›), just without a link. */
.spaudejai-actions .wk a:not([href]) {
  opacity: 0.4;
  pointer-events: none;
}

.spaudejai-head h2 {
  font-size: 1.25rem;
  margin: 0 0 4px;
}

.spaudejai-head p,
.spaudejai-subhead p {
  margin: 0;
}

.spaudejai-head .actions {
  flex-wrap: wrap;
  gap: 8px;
}

.spaudejai-subhead {
  margin-bottom: 12px;
}

.spaudejai-subhead h3 {
  font-size: 1rem;
  margin: 0 0 4px;
}

/* Reitingas: Lygis in a 20px circle -- green for the first tier, amber for
   the next ones (the mockup's `.lv1` / `.lv2`). */
.spaudejai-lv {
  align-items: center;
  background: var(--success-bg);
  border-radius: 50%;
  color: var(--success);
  display: inline-flex;
  font-size: var(--fs-field-label);
  font-weight: 600;
  height: 20px;
  justify-content: center;
  width: 20px;
}

.spaudejai-lv--next {
  background: var(--warning-bg);
  color: var(--brand-dark);
}

.spaudejai-rank__name {
  font-weight: 500;
}

.spaudejai-warn {
  color: var(--danger);
  margin-right: 4px;
}

/* "Stulpeliai": the columns past the mockup's thirteen stay in the table and
   show when the card's checkbox is ticked -- no script, nothing dropped. */
.spaudejai-more-toggle {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.spaudejai-rankcard {
  position: relative;
}

.spaudejai-rankcard:not(:has(.spaudejai-more-toggle:checked)) .spaudejai-more {
  display: none;
}

/* The legend under a target-tinted table: 14px swatches of R1's `.tg` /
   `.ty` / `.tr`. */
.spaudejai-legend {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  gap: 8px 16px;
}

.spaudejai-legend > span {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.spaudejai-swatch {
  border: 1px solid var(--line);
  box-sizing: border-box;
  display: inline-block;
  height: 14px;
  padding: 0;
  width: 14px;
}

/* The legend squares take the row tints they explain (`tr.row-t*`),
   not the cell-sized `.tg` / `.ty` / `.tr` of the Tikslai grid. */
.spaudejai-swatch.tg {
  background: transparent;
}

.spaudejai-swatch.ty {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
}

.spaudejai-swatch.tr {
  background: color-mix(in srgb, var(--danger-bg) 50%, var(--surface));
}

/* Excel column choice as a small popover under its button. */
.spaudejai-pick {
  position: relative;
}

.spaudejai-pick > summary {
  list-style: none;
}

.spaudejai-pick > summary::-webkit-details-marker {
  display: none;
}

.spaudejai-pick > form {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px var(--line-strong);
  max-width: calc(100vw - 32px);
  padding: 16px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 420px;
  z-index: 5;
}

/* Operatorius: six tiles in one row, then seven small label/value fields. */
.spaudejai-tiles {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.spaudejai-tiles .kpi .v {
  font-size: 1.375rem;
}

.spaudejai-tiles .kpi--accent {
  border-top: 3px solid var(--brand);
}

.spaudejai-fields {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
}

.spaudejai-fields div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.spaudejai-fields dt {
  color: var(--muted);
  font-size: 0.75rem;
}

.spaudejai-fields dd {
  font-size: var(--fs-tab-label);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  margin: 0;
}

/* Kalendorius, one person: a Mon-Sun grid of 82px day tiles -- a worked day
   on the warm tint under a gold top rule, overtime framed red, weekends
   grey; the month's sums under it. */
.spaudejai-cal {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.spaudejai-cal__wd {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
}

.spaudejai-cal__day {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  gap: 3px;
  min-height: 82px;
  min-width: 0;
  padding: 8px 10px;
}

.spaudejai-cal__day--weekend {
  background: color-mix(in srgb, var(--rail-bg) 60%, var(--surface));
}

.spaudejai-cal__day--worked {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
  border-color: color-mix(in srgb, var(--brand-tint) 80%, var(--brand));
  border-top: 3px solid var(--brand);
}

.spaudejai-cal__day--overtime {
  border: 2px solid var(--danger);
  border-top-width: 3px;
}

.spaudejai-cal__num {
  color: var(--muted);
  font-size: var(--fs-nav-l1);
  font-variant-numeric: tabular-nums;
}

.spaudejai-cal__day--worked .spaudejai-cal__num {
  color: var(--text);
  font-weight: 600;
}

.spaudejai-cal__top {
  display: flex;
  justify-content: space-between;
}

.spaudejai-cal__wdname {
  display: none;
}

.spaudejai-cal__top b {
  font-size: var(--fs-nav-l1);
  font-variant-numeric: tabular-nums;
}

.spaudejai-cal__time {
  font-variant-numeric: tabular-nums;
}

.spaudejai-cal__day small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.spaudejai-cal__day--overtime small {
  color: var(--danger);
}

.spaudejai-sums {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-nav-l1);
  gap: 8px 24px;
  margin-top: 12px;
}

.spaudejai-sums b {
  font-variant-numeric: tabular-nums;
}

/* Tikslai: the value sits on its own target tint inside a 4px cell; the
   target under each head in regular weight. */
.spaudejai-targets td.spaudejai-targets__cell {
  padding: 4px;
}

.spaudejai-targets th small {
  display: block;
  font-size: inherit;
  font-weight: 400;
}

/* simple-table.js rebuilds each head from its text, dropping the <br>; the
   newline after it keeps the target on its own line in the sort button. */
.spaudejai-targets .simple-table-sort span {
  white-space: pre-line;
}

/* The mockup outlines each tint in its own colour. */
.spaudejai-targets__cell > span {
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

/* K-6313 (BI mockups `Gamyba-Pakuotojai/-Produktai/-Tendencijos`).
   Produktai / Grafikai bars: a 150px name, a 14px bar across the card and
   the value with its unit on the right. The fill is gold, or the target
   colour where the figure has one (Grafikai); the value is always written
   beside it, never colour alone.
   K-6419: the value column is `auto` on the list and each row takes it as a
   subgrid, so it is as wide as the longest value ("123 456 m", "12 345 EUR")
   and still lines up down the card; a fixed 60px let those spill out. */
.spaudejai-bars {
  display: grid;
  gap: 8px 12px;
  grid-template-columns: 150px minmax(0, 1fr) minmax(60px, auto);
  list-style: none;
  margin: 0;
  padding: 0;
}

.spaudejai-bars > li {
  align-items: center;
  display: grid;
  font-size: var(--fs-field-value);
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.spaudejai-bars__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spaudejai-bars__bar {
  background: var(--rail-bg);
  border-radius: 3px;
  height: 14px;
  overflow: hidden;
}

.spaudejai-bars__bar > span {
  background: var(--brand);
  border-radius: 3px;
  display: block;
  height: 100%;
}

.spaudejai-bars__bar--good > span {
  background: var(--success);
}

.spaudejai-bars__bar--mid > span {
  background: var(--warning);
}

.spaudejai-bars__bar--low > span {
  background: var(--danger);
}

/* Pakuotojų KPI: the name picks the row whose KPI parts show underneath;
   it reads as the mockup's plain name, underlined on hover. */
.spaudejai-rank__name a {
  color: inherit;
  text-decoration: none;
}

.spaudejai-rank__name a:hover {
  text-decoration: underline;
}

.spaudejai-bars__value {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Tendencijos: the line in gold with its value over each point, the grid
   and axis labels muted. */
.spaudejai-trend {
  color: var(--muted);
  display: block;
  height: 240px;
  width: 100%;
}

.spaudejai-trend line {
  stroke: var(--line-strong);
}

.spaudejai-trend text {
  fill: currentColor;
  font-size: 11px;
}

.spaudejai-trend polyline {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
}

.spaudejai-trend circle {
  fill: var(--brand);
}

.spaudejai-trend .v {
  fill: var(--text);
  font-size: 12px;
}

@media (max-width: 720px) {
  /* The name takes its own line over the bar and the value, and wraps
     there in full: the ellipsis is for the desktop's 150px column only. */
  .spaudejai-bars {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .spaudejai-bars > li {
    row-gap: 4px;
  }

  .spaudejai-bars__name {
    grid-column: 1 / -1;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .spaudejai-trend {
    height: auto;
  }

  /* The band's way to Kokybė is a touch target, 44px (K-45). */
  .spaudejai-band > a {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }

  /* Produktai's cut and figure switches wrap under their title. */
  .spaudejai-main .bi-chead,
  .spaudejai-main .seg {
    flex-wrap: wrap;
  }
}

@media (max-width: 720px) {
  /* The heading stacks here, so the title's 320px basis would be a height. */
  .spaudejai-head > div:first-child {
    flex-basis: auto;
  }

  .spaudejai-tiles,
  .spaudejai-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spaudejai-cal {
    grid-template-columns: minmax(0, 1fr);
  }

  .spaudejai-cal__wd,
  .spaudejai-cal__pad,
  .spaudejai-cal__day--free {
    display: none;
  }

  .spaudejai-cal__wdname {
    display: inline;
  }

  .spaudejai-cal__day {
    min-height: 0;
  }

  .spaudejai-head .button,
  .spaudejai-head .link-button,
  .spaudejai-pick > summary {
    min-height: 44px;
  }
}

/* -- NCR process bar (K-4008) --------------------------------------------- */
/* One bar on every NCR screen. Four statuses, four existing tokens:
   completed -> --success, in_progress -> --warning, not_started -> --muted,
   error -> --danger; not_applicable is dashed --muted (K-1602). The current
   screen gets the --brand outline the old card-only bar used. */

.ncr-pb {
  container: ncr-pb / inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

/* K-5877: the 8 sequence stages are a grid of identical tiles. The column
   count follows the bar's OWN width (a container query -- the shell's
   sidebar leaves it ~550px on a 1024px screen, ~815px on 1366px and
   ~889px on 1440px in Chrome with a scrollbar): one row of equal columns
   from 54rem (864px), where no LT/EN tile name breaks mid-word -- with
   the full stage names (K-6472) LT fits from ~843px ("pagrįstumas"), EN
   from ~850px ("Investigation") (K-6507 measurement); two equal rows of
   4 below that, so a 1366px screen's 815px bar stays 4 + 4, 2
   columns under 30rem (a phone). One row at 1024px would break most
   names mid-word in every language, so it is not attempted. Every tile
   reserves two label lines and pins its status badge to the bottom, so all
   badges sit on one line whatever the name's length. Returned-production
   verification is a sequence cell here, not the old `.ncr-pb-side`
   block. */
.ncr-pb-sequence {
  flex-basis: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@container ncr-pb (max-width: 30rem) {
  .ncr-pb-sequence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container ncr-pb (min-width: 54rem) {
  .ncr-pb-sequence {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}

/* K-5927 (NCR design N1): the mockups' `.st` tile (Kortele.png) -- a round
   mark and "n / N" on top, the stage name, the status word under it; at
   least 72px tall. Completed: a green mark with a tick. In progress (the
   process's current stage included): a brown 2px frame on a light tint.
   Not started: a grey mark and a grey name. */
.ncr-pb-stage {
  position: relative;
  display: flex;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface);
}

.ncr-pb-link {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  min-height: 72px;
  padding: 10px 12px;
  color: inherit;
  text-align: left;
  text-decoration: none;
}

.ncr-pb-count {
  order: -1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ncr-pb-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--rail-bg);
  color: var(--muted);
  font-size: var(--fs-field-label);
  font-weight: 600;
}

.ncr-pb-label {
  max-width: 100%;
  font-size: var(--fs-field-value);
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* K-6033: the compact bar's "Stage: status" for a stage without a link --
   read by screen readers, never drawn. */
.ncr-pb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Inside a tile the status is the mockups' plain grey line, not a pill. */
.ncr-pb-link .ncr-status-badge {
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
  white-space: normal;
}

.ncr-pb-link .ncr-status-badge::before {
  content: none;
}

/* The NCR bar no longer says "You are here" (K-5877); component_gallery.html
   still demonstrates the older marker. */
.ncr-pb-now {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand);
}

.ncr-pb-next {
  flex-basis: 100%;
  margin: 0;
}

.ncr-pb-stage--completed .ncr-pb-mark {
  background: var(--success);
  color: #fff;
}

.ncr-pb-stage--in_progress {
  border: 2px solid var(--brand);
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
}

.ncr-pb-stage--in_progress .ncr-pb-link {
  padding: 9px 11px;
}

.ncr-pb-stage--in_progress .ncr-pb-mark {
  background: var(--brand);
  color: #fff;
}

.ncr-pb-stage--error {
  border-color: var(--danger);
}

.ncr-pb-stage--error .ncr-pb-mark {
  background: var(--danger);
  color: #fff;
}

.ncr-pb-stage--error .ncr-status-badge {
  color: var(--danger);
}

.ncr-pb-stage--not_started .ncr-pb-label,
.ncr-pb-stage--not_applicable .ncr-pb-label {
  color: var(--muted);
  font-weight: 500;
}

.ncr-pb-stage--not_applicable {
  border-style: dashed;
}

/* K-5877: the screen the reader is on -- an outline around the tile, no
   text; separate from the in-progress frame above. */
.ncr-pb-stage--current {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* K-5927: the compact variant (Finansai.png) -- one card, one 6px segment
   per stage (green done, brown in progress, grey not started) over its
   name; the reader's own screen outlined and its name dark. Four columns
   of two rows on a phone so every link keeps a 44px target. */
.ncr-pb--compact .ncr-pb-sequence {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

@container ncr-pb (max-width: 30rem) {
  .ncr-pb--compact .ncr-pb-sequence {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    row-gap: var(--space-2);
  }
}

.ncr-pb--compact .ncr-pb-stage,
.ncr-pb--compact .ncr-pb-stage--in_progress {
  border: 0;
  border-radius: 0;
  background: none;
}

.ncr-pb--compact .ncr-pb-link,
.ncr-pb--compact .ncr-pb-stage--in_progress .ncr-pb-link {
  align-items: stretch;
  min-height: 44px;
  padding: 0;
}

.ncr-pb-segment {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--line-strong);
}

.ncr-pb-stage--completed .ncr-pb-segment {
  background: var(--success);
}

.ncr-pb-stage--in_progress .ncr-pb-segment {
  background: var(--brand);
}

.ncr-pb-stage--error .ncr-pb-segment {
  background: var(--danger);
}

.ncr-pb-stage--not_applicable .ncr-pb-segment {
  border: 1px dashed var(--line-strong);
  background: none;
}

.ncr-pb--compact .ncr-pb-label,
.ncr-pb--compact .ncr-pb-stage--not_started .ncr-pb-label,
.ncr-pb--compact .ncr-pb-stage--not_applicable .ncr-pb-label {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ncr-pb--compact .ncr-pb-stage--current {
  outline: none;
}

.ncr-pb--compact .ncr-pb-stage--current .ncr-pb-segment {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.ncr-pb--compact .ncr-pb-stage--current .ncr-pb-label {
  color: var(--text);
  font-weight: 600;
}

.ncr-pb-side {
  flex: 0 1 10rem;
  border-style: dotted;
}

/* K-4906 requirement 5: validity and the verification side block share the
   row under the sequence (the sequence itself takes the full first row). */
.ncr-pb-validity {
  flex: 0 1 auto;
  align-self: center;
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.ncr-pb-validity-label {
  margin-right: 0.35rem;
}

/* The one status badge (K-4008): same words and colours on the bar, the
   investigation steps and the action stages. */
.ncr-status-badge {
  display: inline-block;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 0.05rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
  background: var(--bg);
  white-space: nowrap;
}

.ncr-status-badge::before {
  content: "○ ";
}

.ncr-status-badge--completed {
  border-color: var(--success);
  color: var(--success);
  background: var(--success-bg);
}

.ncr-status-badge--completed::before {
  content: "✓ ";
}

.ncr-status-badge--in_progress {
  border-color: var(--warning);
  color: var(--warning);
  background: var(--warning-bg);
}

.ncr-status-badge--in_progress::before {
  content: "● ";
}

.ncr-status-badge--error {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-bg);
}

.ncr-status-badge--error::before {
  content: "! ";
}

.ncr-status-badge--not_applicable {
  border-style: dashed;
}

.ncr-status-badge--not_applicable::before {
  content: "";
}

/* 390 px (K-45): the tiles go 2 columns (the container query above); the
   validity line under them wraps instead of scrolling sideways. */
@media (max-width: 720px) {
  /* `nowrap`: a column that wraps starts a second column beside the tiles
     whenever the parent gives the bar a definite height (the closure
     screen's grid `.page`). */
  .ncr-pb {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.35rem;
  }

  .ncr-pb-validity {
    align-self: stretch;
  }

  .ncr-pb-validity .ncr-status-badge,
  .ncr-pb-next .button {
    max-width: 100%;
    white-space: normal;
  }
}

/* Secondary NCR-card blocks fold (K-4008); the heading stays an <h2> for
   the document outline, the summary is the click target (44 px, K-45). */
.ncr-secondary > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.ncr-secondary > summary h2 {
  display: inline;
  margin: 0;
}

.ncr-secondary[open] > summary {
  margin-bottom: 0.75rem;
}

/* === Personalo operacijos (O2) === */
/* K-7114 (personnel operations design O2): Darbuotojų importas and its
   preview as saltiniai/personalo-operacijos-maketai/html/Importas.dc.html
   and Importo-perziura.dc.html draw them, on the library's `.drop`,
   `details.how`, `.filter-chip` and `.registry-badge`. Here only the
   preview's three summary numbers, the chip row beside the save button,
   a cell's grey second line, and a row's error or warning running across
   the full table width under the person. */
.emp-import-kpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.emp-import-kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px;
}

.emp-import-kpi > strong {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.emp-import-kpi > span {
  color: var(--muted);
  font-size: 12px;
}

.emp-import-kpi--danger > strong {
  color: var(--danger);
}

.emp-import-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

.emp-import-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.emp-import-sub {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

/* The real file input stays in the zone (keyboard focus, no-JS post) but
   the shared `input[type="file"]` width would stretch it past the zone. */
.emp-import-drop > input.visually-hidden {
  width: 1px;
}

.emp-import-file {
  color: var(--text);
  font-weight: 500;
}

/* K-7337 (O8): an upload's name is one unbroken word ("..._2026_09_28_...csv")
   -- it breaks where it must instead of widening the column (list) or the
   page (preview on a phone). */
.emp-import-file-link,
.emp-import-meta {
  overflow-wrap: anywhere;
}

.emp-import-file-link {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.emp-import-nowrap {
  white-space: nowrap;
}

/* K-7195 (design gate K-7168): at 1366 a long unbreakable e-mail and a
   result column wider than its badge squeezed the person and the
   department · position columns to a word per line. The login column
   gets a fixed width and breaks the address anywhere; the result
   column shrinks to its badge. Table layout only -- on a phone the
   `rt-cards` rows keep their label-left, value-right cells. */
@media (min-width: 721px) {
  .emp-import-table .emp-import-login {
    overflow-wrap: anywhere;
    width: 12rem;
  }

  .emp-import-table .emp-import-result {
    white-space: nowrap;
    width: 1%;
  }
}

.registry-table > thead > tr > th.emp-import-num,
.registry-table > tbody > tr > td.emp-import-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.emp-import-table > tbody > tr:has(+ .emp-import-note) > td {
  border-bottom: 0;
}

.emp-import-note > td {
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 12px;
  padding-bottom: 8px;
  padding-top: 8px;
}

.emp-import-note--warning > td {
  background: var(--warning-bg);
  color: var(--brand-dark);
}

@media (max-width: 720px) {
  .emp-import-kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .emp-import-drop > label.button {
    min-height: 44px;
  }

  .emp-import-note > td:first-child {
    display: none;
  }

  .registry-table.rt-cards > tbody > tr.emp-import-note > td {
    display: block;
    padding-top: var(--space-2);
    text-align: left;
  }
}

/* === Personalo operacijos (O3) === */
/* K-7115 (personnel operations design O3): Priėmimo radiniai as
   saltiniai/personalo-operacijos-maketai/html/Radiniai.dc.html and
   Radiniai-390.dc.html draw it, on the library's `.sel`, `.src`,
   `.filter-chip`, `.save-bar` and `.registry-table.rt-cards`. Here only the
   filter row, the ticked row's tint, the note's two-line clamp, the dismiss
   row that opens under its finding (`:target`), the bulk bar that shows
   once a row is ticked (its count is a CSS counter over the ticked boxes)
   and the phone card: name and date on one line, the step under it, no
   checkboxes, no bulk bar, chips instead of the dropdowns. */
.hf-list {
  counter-reset: hf-selected;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hf-card {
  padding: 8px 12px 12px;
}

.hf-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 8px 8px;
}

.hf-toolbar .sel {
  max-width: 100%;
  min-width: 0;
}

.hf-toolbar .sel select {
  max-width: 11rem;
  min-width: 0;
  text-overflow: ellipsis;
}

.hf-count {
  margin: 0 0 0 auto;
}

.hf-chips {
  display: none;
}

.hf-table .hf-check {
  width: 28px;
}

.hf-table .hf-check input {
  accent-color: var(--brand);
  height: 18px;
  margin: 0;
  width: 18px;
}

.hf-table input[name="finding_ids"]:checked {
  counter-increment: hf-selected;
}

.hf-table > tbody > tr.hf-row:has(input:checked) > td {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
}

.hf-who {
  width: 12.5rem;
}

.hf-who a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.hf-who a:hover {
  text-decoration: underline;
}

.hf-what {
  width: 11rem;
}

.hf-what .src {
  display: inline-block;
  margin-bottom: 2px;
}

.hf-problem {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

.hf-when {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}

.hf-note {
  color: var(--muted);
  font-size: var(--fs-field-value);
}

.hf-clamp {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
}

.hf-actions {
  text-align: right;
  white-space: nowrap;
}

.hf-actions .button-small.hf-dismiss-link {
  color: var(--danger);
}

.hf-table > tbody > tr.hf-dismiss {
  display: none;
}

.hf-table > tbody > tr.hf-dismiss:target {
  display: table-row;
}

.hf-table > tbody > tr.hf-row:has(+ tr.hf-dismiss:target) > td {
  border-bottom: 0;
}

.hf-dismiss > td {
  background: var(--bg);
  padding: 10px 12px 14px;
}

.hf-dismiss-form {
  align-items: flex-start;
  display: flex;
  gap: 10px;
}

.hf-dismiss-form textarea {
  flex: 1;
  min-height: 48px;
  min-width: 0;
}

.hf-hint {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 6px;
}

.hf-bulk {
  display: none;
}

.hf-list:has(input[name="finding_ids"]:checked) .hf-bulk {
  display: flex;
}

.hf-bulk-count::after {
  content: " " counter(hf-selected);
}

.hf-bulk input[name="reason"] {
  flex: 1;
  min-width: 0;
}

@media (max-width: 720px) {
  .hf-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
  }

  .hf-toolbar,
  .hf-table > thead,
  .hf-table .hf-check,
  .hf-list:has(input[name="finding_ids"]:checked) .hf-bulk {
    display: none;
  }

  .hf-card {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .registry-table.rt-cards.hf-table > tbody > tr.hf-row {
    background: var(--surface);
    display: grid;
    gap: 6px 12px;
    grid-template-areas:
      "who when"
      "what what"
      "note note"
      "act act";
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .registry-table.rt-cards.hf-table > tbody > tr > td {
    display: block;
    padding: 0;
    text-align: left;
  }

  .registry-table.rt-cards.hf-table > tbody > tr > td::before {
    content: none;
  }

  .registry-table.rt-cards.hf-table > tbody > tr > td.hf-check,
  .registry-table.rt-cards.hf-table > tbody > tr > td.hf-note--empty {
    display: none;
  }

  .hf-who {
    font-size: 1rem;
    grid-area: who;
    width: auto;
  }

  .hf-when {
    color: var(--muted);
    grid-area: when;
  }

  .hf-what {
    grid-area: what;
    width: auto;
  }

  .hf-what .src,
  .hf-problem {
    display: inline;
  }

  .hf-note {
    grid-area: note;
    width: auto;
  }

  .registry-table.rt-cards.hf-table > tbody > tr > td.hf-actions {
    display: flex;
    gap: 8px;
    grid-area: act;
    justify-content: flex-start;
  }

  .hf-actions .button-small {
    min-height: 44px;
  }

  .registry-table.rt-cards.hf-table > tbody > tr.hf-dismiss {
    display: none;
  }

  .registry-table.rt-cards.hf-table > tbody > tr.hf-dismiss:target {
    background: var(--bg);
    display: block;
  }

  .hf-dismiss-form {
    flex-wrap: wrap;
  }

  .hf-dismiss-form textarea {
    flex-basis: 100%;
  }
}

/* K-7119 (O7, mockup `Igaliojimai`): the grants list -- the permission's
   technical code grey under its name, the reason cut at two lines (whole
   text in the cell's `title`), the date on one line with the grantor under
   it; the additive-only note as small as the mockup's `.caution`. */
.card.grants-note {
  font-size: var(--fs-field-value);
  padding: 10px 12px;
}

.grants-note > p {
  margin: 0;
}

.grants-code {
  color: var(--muted);
  display: block;
  font-size: var(--fs-field-label);
}

.grants-reason {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.registry-table td.grants-when {
  white-space: nowrap;
}

.grants-when .grants-by {
  color: var(--muted);
  display: block;
}

/* K-7118 (personalo operacijų maketai O6, mockup `Masinos`): the machine
   classifier. The note under a machine's name is cut at two lines (full
   text in `title`) so a long reason never makes a row nine lines tall; the
   base sits right and never wraps; the linked equipment is a row of `.src`
   tags. */
.mc-note {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--muted);
  display: -webkit-box;
  font-size: 0.75rem;
  line-clamp: 2;
  line-height: 1.4;
  margin-top: 2px;
  overflow: hidden;
}

.mc-table .mc-base {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.mc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* A long registry name wraps inside its own tag instead of widening the
   table past <main>. */
.mc-tags .src {
  white-space: normal;
}

/* The name column holds the most text; without a floor the auto layout gives
   it the least room and a three-word name breaks over three lines. Desktop
   only -- below 720px the table is `rt-cards` cards. */
@media (min-width: 721px) {
  .mc-table th:first-child {
    min-width: 14rem;
  }
}

/* K-7117 (personalo operacijų maketai O5, `Priedai.png`): the bonus
   mechanism registry. A row opens its detail row underneath (the class, not
   `[hidden]`, holds it shut -- the table's search box sets `hidden` on every
   row it filters and clears it again); the selector outweighs `rt-cards`'
   own `tr { display: block }` on a phone. */
.registry-table > tbody > tr.bonus-mech-detail:not(.is-open) {
  display: none;
}

.bonus-mech-row {
  cursor: pointer;
}

.bonus-mech-row.is-open > td,
.bonus-mech-detail > td {
  background: color-mix(in srgb, var(--brand-tint) 20%, var(--surface));
}

/* The mockup's column shares: without them the longest source note sets its
   column and the names break word by word (plotis-matavimas n=12 at 1366). */
@media (min-width: 721px) {
  .bonus-mech-table {
    table-layout: fixed;
  }

  .bonus-mech-table > thead > tr > th:nth-child(1) {
    width: 44px;
  }

  /* A name under 34 characters stays on one line; the pill fits its column. */
  .bonus-mech-table > thead > tr > th:nth-child(2) {
    width: 27%;
  }

  .bonus-mech-table > thead > tr > th:nth-child(3) {
    width: 16%;
  }

  .bonus-mech-table > thead > tr > th:nth-child(4) {
    width: 18%;
  }

  .bonus-mech-table > thead > tr > th:nth-child(5),
  .bonus-mech-table > thead > tr > th:nth-child(6) {
    width: 17%;
  }
}

.bonus-mech-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  display: inline-flex;
  justify-content: center;
  min-height: 0;
  padding: 4px;
}

.bonus-mech-toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

/* Notes under the source and the status: two lines, the rest in `title`. */
.bonus-mech-clamp {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  font-size: 0.75rem;
  margin-top: 2px;
  overflow: hidden;
}

.bonus-mech-table .registry-badge {
  white-space: nowrap;
}

.bonus-mech-detail-title,
.bonus-mech-detail-meta {
  margin: 0;
}

.bonus-mech-detail-meta {
  font-size: 0.75rem;
  margin-top: var(--space-2);
}

.bonus-mech-scales {
  border-collapse: collapse;
  margin-top: 6px;
  max-width: 640px;
  width: 100%;
}

.bonus-mech-scales th,
.bonus-mech-scales td {
  background: transparent;
  font-size: 0.75rem;
  padding: 4px 8px;
}

.bonus-mech-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.bonus-mech-scales th.bonus-mech-num,
.bonus-mech-scales td.bonus-mech-num {
  text-align: right;
}

.bonus-mech-values {
  font-size: var(--fs-field-value);
  max-width: 480px;
  row-gap: 4px;
}

/* `Naujas-mechanizmas.png`: four numbered parts, the type and visibility as
   option cards (the brand frame on the picked one). */
.bonus-mech-form > .card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.bonus-mech-part {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bonus-mech-part + .bonus-mech-part {
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}

.bonus-mech-part > .task-meta {
  font-size: 0.75rem;
  margin: 0;
}

.bonus-mech-opts {
  border: 0;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  min-width: 0;
  padding: 0;
}

.bonus-mech-opts--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bonus-mech-opt {
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
}

.bonus-mech-opt input {
  flex: none;
  margin: 2px 0 0;
  width: auto;
}

.bonus-mech-opt b {
  display: block;
  font-size: var(--fs-control);
  font-weight: 600;
}

.bonus-mech-opt small {
  color: var(--muted);
  display: block;
  font-size: 0.75rem;
  line-height: 1.4;
  margin-top: 2px;
}

.bonus-mech-opt:has(input:checked) {
  background: color-mix(in srgb, var(--brand-tint) 35%, var(--surface));
  border: 2px solid var(--brand);
  padding: 11px 13px;
}

@media (max-width: 720px) {
  .bonus-mech-opts,
  .bonus-mech-opts--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .bonus-mech-toggle {
    min-height: 44px;
    min-width: 44px;
  }
}

/* === Zemelapis (Z1) === */
/* K-7298 (map design Z1): the process overview's cards, as
   saltiniai/kokybe-like-maketai/html/Z-Procesai.dc.html lays them out -- a
   14px semibold name on a tighter card, the count and the gap tag pinned to
   the card's foot. The grid is `.bi-grid--4`, the tag `.src--warning`. */
.zemelapis-process-card {
  gap: 6px;
  min-height: 84px;
  padding: 12px 14px;
}

.zemelapis-process-card > b {
  font-size: var(--fs-control);
  font-weight: 600;
  line-height: 1.3;
}

.zemelapis-process-card > span {
  align-items: center;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* K-7484: a process with no function yet -- the same colour and dashed
   outline as the picker schema's `TONE_GAP` (zemelapis/schema.py; its
   width and dash pattern differ), so the same state reads alike on both. */
.zemelapis-process-card--empty {
  border: 2px dashed #d9480f;
}

/* K-7484: the organisational structure tree's indent, one step per
   `data-depth` up to `slices.TREE_INDENT_STEPS` -- this screen's own class,
   no longer the warehouse location tree's with an inline style per row. */
.zemelapis-tree-label {
  display: inline-block;
}

.zemelapis-tree-label[data-depth="1"] {
  padding-inline-start: 1.25rem;
}

.zemelapis-tree-label[data-depth="2"] {
  padding-inline-start: 2.5rem;
}

.zemelapis-tree-label[data-depth="3"] {
  padding-inline-start: 3.75rem;
}

.zemelapis-tree-label[data-depth="4"] {
  padding-inline-start: 5rem;
}

.zemelapis-tree-label[data-depth="5"] {
  padding-inline-start: 6.25rem;
}

.zemelapis-tree-label[data-depth="6"] {
  padding-inline-start: 7.5rem;
}

/* === Bendra suvestine (K-7383) === */
/* V-Suvestine.png: a zero tile is muted as a whole -- the mockup draws it at
   60% opacity, so the fill sits between --surface and the page --bg, the
   frame fades and the label and "all clear" go grey -- and the non-zero
   "Open ->" tiles stand out at once. Scoped to this screen: the shared
   `.kpi--empty` above only greys the value, which is what the BI screens'
   "no export yet" tiles want. */
.company-attention .kpi--empty {
  background: color-mix(in srgb, var(--surface) 40%, var(--bg));
  border-color: color-mix(in srgb, var(--line) 60%, transparent);
}

/* K-7483: the label and "all clear" keep plain --muted -- mixed toward
   --surface they fell to ~2.6:1, under AA 4.5:1; the fill, frame and grey
   value above still mute the tile. */
.company-attention .kpi--empty .l,
.company-attention .kpi--empty .n {
  color: var(--muted);
}

/* K-7483: one group -- its label over its tiles -- spaced as the `.bi-main`
   it used to borrow, without nesting a second main column in the first. */
.company-attention > section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* === Mano (M15) === */
/* K-7411 (Mano design M15): the project portfolio as one card per project,
   as saltiniai/mano-likutis-maketai/html/P-Portfelis.dc.html lays it out.
   The grid is `.bi-grid--2`/`--3`, the stage bar `.progress-track`; a red
   project's card carries a pink frame. */
.portfolio-grid {
  align-items: stretch;
}

.portfolio-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
}

.portfolio-card--danger {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--surface));
}

.portfolio-card-head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
}

.portfolio-card-head .registry-badge {
  flex: none;
  white-space: nowrap;
}

.portfolio-card-head h2 {
  font-size: 1.0625rem;
  margin: 0;
  overflow-wrap: anywhere;
}

.portfolio-card-head h2 a {
  color: var(--text);
  text-decoration: none;
}

.portfolio-card-stages {
  display: flex;
  font-size: 0.75rem;
  gap: var(--space-2);
  justify-content: space-between;
  margin-bottom: 6px;
}

.portfolio-card-next {
  font-size: var(--fs-control);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.portfolio-card-stats {
  display: grid;
  font-size: 0.75rem;
  gap: var(--space-2);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.portfolio-card-stats dt {
  color: var(--muted);
}

.portfolio-card-stats dd {
  font-weight: 600;
  margin: 0;
}

.portfolio-card-stats dd.portfolio-card-overdue {
  color: var(--danger);
}

/* Three columns (more than six projects) and the phone: a narrower card,
   so the title steps down and the four numbers go two by two. */
.bi-grid--3 .portfolio-card-head h2 {
  font-size: 0.9375rem;
}

.bi-grid--3 .portfolio-card-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .portfolio-card-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* K-7426: the title is the card's only link -- a 44px touch target on
     the phone (mobile-guard measured 21px). */
  .portfolio-card-head h2 a {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
    min-width: 44px;
  }
}

/* === Pareigybiu turinys (O8) === */
/* K-7337 (personalo operaciju maketai O8, `Pareigybes.png`): the position's
   name is the row's bold title, not an underlined link, and "Edit" sits at
   the row's right edge; on a phone the door is a 44px target. */
.pc-table > tbody > tr > td:first-child a {
  color: var(--text);
  text-decoration: none;
}

.pc-table > tbody > tr > td:first-child a:hover,
.pc-table .pc-actions .link-button:hover {
  text-decoration: underline;
}

.pc-table .pc-actions .actions {
  justify-content: flex-end;
}

.pc-table .pc-actions .link-button {
  color: var(--text);
  text-decoration: none;
}

@media (max-width: 720px) {
  .pc-table .pc-actions .actions {
    justify-content: flex-start;
  }

  .pc-table .pc-actions .link-button {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
  }
}

/* K-7538 (saltiniai/prisijungimas-maketai, P-Prisijungimas): the signed-out
   frame `registration/_auth_base.html` -- no side menu, the logo on top, one
   380px card in the middle, the language switcher and the build line below.
   On a phone the card runs the full width with 16px edges, and every link
   and button is at least 44px tall (K-45). */
.auth-shell {
  background: var(--bg);
  margin: 0;
}

.auth-main {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-8) var(--space-4);
}

.auth-brand {
  align-items: center;
  display: flex;
  gap: var(--space-2);
}

.auth-main > .flash-stack,
.auth-card {
  box-sizing: border-box;
  max-width: 100%;
  width: 380px;
}

.auth-card {
  display: flex;
  flex-direction: column;
  gap: var(--gap-stack);
  padding: var(--space-6);
}

.auth-card h1 {
  font-size: 1.375rem;
  margin: 0;
  text-align: center;
}

.auth-card .field {
  margin-bottom: var(--gap-stack);
}

.auth-card .field > label:not(.checkbox-label) {
  color: var(--text);
  font-size: var(--fs-field-value);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.auth-card input:not([type="checkbox"]):not([type="radio"]) {
  box-sizing: border-box;
  width: 100%;
}

.auth-card button[type="submit"]:not(.link-button):not(.button-link):not(.task-row-button) {
  min-height: 44px;
  width: 100%;
}

.auth-alert {
  background: var(--danger-bg);
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: var(--radius-md);
  color: var(--danger);
  font-size: var(--fs-field-value);
  padding: var(--space-2) var(--gap-stack);
}

.auth-alert p {
  margin: 0;
}

.auth-alt {
  font-size: var(--fs-field-value);
  margin: 0;
  text-align: center;
}

.auth-alt a,
.auth-shopfloor a {
  color: var(--brand-dark);
  font-weight: 500;
  text-decoration: none;
}

.auth-shopfloor {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--gap-stack);
}

.auth-shopfloor p {
  color: var(--muted);
  font-size: var(--fs-field-label);
  margin: 0;
  text-align: center;
}

.auth-shopfloor-links {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-field-value);
  gap: var(--space-2) var(--space-4);
  justify-content: center;
}

.auth-lang {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.auth-lang .link-button {
  color: var(--muted);
  font-size: var(--fs-field-value);
  padding: 2px var(--space-2);
  text-decoration: none;
}

.auth-lang .link-button.is-current {
  color: var(--text);
  font-weight: 600;
}

.auth-version {
  color: var(--muted);
  font-size: var(--fs-field-label);
  margin: 0;
  text-align: center;
}

@media (max-width: 720px) {
  .auth-card {
    padding: var(--space-6) var(--space-4);
  }

  .auth-alt a,
  .auth-shopfloor a,
  .auth-lang .link-button {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }
}

/* K-8750 (T-Patvirtinimas): the phone's three numbers stay one row of three
   with the digit centred, on a 390px phone too -- "which of the three", not a
   list; `bi-grid--3` folds to one column there. The bottom margin keeps the
   confirm button off the last tile. */
.approval-number-row {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--space-4);
}

.approval-number-row > .link-button.choice-card {
  align-items: center;
  justify-content: center;
  min-height: 44px;
  text-align: center;
}

/* K-7669 (P-Gamybos): the kiosk, SMS-code and supervisor-code sign-ins in the
   same frame, sized for a tablet or phone used with gloves -- a 400px card,
   56px fields and buttons, 22px digits. `.auth-floor` is `display: contents`
   so its children stay in the card's flex column. The field rule repeats the
   global text-field `:not()` chain, (0,3,1); `.kiosk-form input` at (0,1,1)
   lost to it, which is why the kiosk fields rendered at 13px. */
.auth-card:has(> .auth-floor) {
  width: 400px;
}

.auth-floor {
  display: contents;
}

.auth-floor h1 {
  font-size: 1.25rem;
  text-align: left;
}

.auth-floor h2,
.auth-floor .auth-lead {
  font-size: var(--fs-control);
  line-height: 1.45;
  margin: 0;
}

.auth-floor .auth-hint {
  color: var(--muted);
  font-size: var(--fs-field-value);
  margin: 0;
  text-align: center;
}

.auth-floor input:not([type="checkbox"]):not([type="radio"]) {
  font-size: 1.375rem;
  min-height: 56px;
}

.auth-floor input.auth-code,
.auth-floor input[name="pin"] {
  letter-spacing: 0.3em;
}

.auth-floor button[type="submit"]:not(.link-button):not(.button-link):not(.task-row-button) {
  font-size: 1.125rem;
  min-height: 56px;
}

.auth-floor-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  justify-content: center;
}

.auth-floor .auth-alt a {
  align-items: center;
  display: inline-flex;
  min-height: 44px;
}

/* Error pages (404/403/500): narrow card with a large status code above the heading. */
.error-card {
  max-width: 640px;
}

.error-code {
  color: var(--brand-dark);
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}

.error-code--danger {
  color: var(--danger);
}

/* === Valdyba (V1) === */
/* K-8106 (Valdyba design V1): saltiniai/spaudos-sistema-valdyba-maketai
   V-Pokalbis and V-Naujas. The conversation reads as a chat: the owner's
   messages on the right on a light brand tint, the model's replies on the
   left on the surface, each no wider than 680px; a system notice (the AI
   degraded) sits on the left on the warning tint. The new-conversation form
   is one card no wider than 640px with its buttons at the foot, left. */
.valdyba-thread {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.valdyba-message {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(680px, 100%);
  padding: 12px var(--space-4);
}

.valdyba-message > p {
  margin: 0;
}

.valdyba-message--user {
  align-self: flex-end;
  background: color-mix(in srgb, var(--brand-tint) 60%, var(--surface));
}

.valdyba-message--assistant {
  align-self: flex-start;
  background: var(--surface);
}

.valdyba-message--system {
  align-self: flex-start;
  background: var(--warning-bg);
}

.valdyba-form {
  max-width: 640px;
}

.valdyba-form .form-screen-actions {
  border-top: 1px solid var(--line);
  gap: 10px;
  justify-content: flex-start;
  padding-top: var(--space-4);
}
/* === end Valdyba (V1) === */

/* K-8211: the phone app install page's one action -- full column width and
   a finger-sized target (saltiniai/programele-maketai T-Idiegimas-Android). */
.pwa-install-button {
  min-height: 44px;
  width: 100%;
}

/* K-8283 (PWA2): D-Nuostatos "Phone app" card -- one row per phone with its
   "Disconnect" button on the right. */
.push-device {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 0;
}

.push-device small {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

/* K-10679: finger-sized links at 390px (K-45 rule) -- the role matrix's
   "Permissions (N)" column link no longer breaks after every letter, and the
   LeoApp guide's in-text links grow to 44px without changing their text.
   K-10732: the team worklog's Export CSV / Export PDF links (40px buttons
   whose `.link-button` padding is 0) join them; two classes, so the rule
   outranks `.button.link-button`'s 40px floor. */
@media (max-width: 720px) {
  .role-permissions-link,
  .guide-links a,
  .worklog-exports .button {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
    min-width: 44px;
  }

  .role-permissions-link {
    white-space: nowrap;
  }
}