/* ============================================================================ ULE Reports — design system (wwwroot/css/ule.css) Vanilla CSS, mobile-first, no framework, no CDN, system Cyrillic font stack. Sections 1 tokens (light) · 2 base/reset · 3 utilities · 4 layout (appbar, rail, tabbar, page) 5 buttons · 6 chips/pills/badges/kbd · 7 fields (text, num+unit, date, textarea, search) 8 cards, lists, tables · 9 Fill (secstrip, sec, item, seg, cat, defect, prevdef, rows, photos, sig, fillbar, revrail) 10 progress, savechip, banner, outcome · 11 sheet, toast, empty, login 12 breakpoints (600 / 1024 / 1280) · 13 dark · 14 field ("Гадаа") mode · 15 motion, print Naming: BEM-ish (block__elem--mod), state classes is-*, data-state / data-cat on items. ========================================================================== */ /* 1. TOKENS ---------------------------------------------------------------- */ :root { /* neutrals — cool grey, blue-leaning */ --canvas: #F3F4F6; --surface: #FFFFFF; --sunken: #E8EAEE; --line: #D3D8E0; --line-2: #A9B2BF; /* ink-3 is the muted token; it must clear 4.5:1 on --sunken, not just on --surface */ --ink-1: #14181F; --ink-2: #465061; --ink-3: #5B6371; --ink-on: #FFFFFF; /* the one accent — actions, links, focus, active nav; never data */ --accent: #1B5FA8; --accent-2: #164E8A; --accent-tint: #E4EEF9; --focus: #1B5FA8; /* result semantics */ --ok: #1E7F4F; --ok-tint: #E1F3E8; --ok-strong: #16653E; /* -strong = text ON the tint (AA) */ --na: #6B7384; --na-tint: #ECEEF2; /* severity = defect colour (Not OK borrows the category colour) */ --cat-a: #B3261E; --cat-a-tint: #FBE7E5; --cat-b: #9A5B00; --cat-b-tint: #FDF0D8; --cat-c: #2F5F9E; --cat-c-tint: #E5EDF8; --defect: var(--cat-a); /* templates without categories fall back to A */ /* messaging */ --warn: #9A5B00; --warn-tint: #FDF0D8; --danger: #B3261E; --danger-tint: #FBE7E5; --info: #2F5F9E; --info-tint: #E5EDF8; /* type */ --font: "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, "Roboto Mono", "Noto Sans Mono", monospace; --t-xs: 12px; --t-sm: 13px; --t-md: 16px; --t-lg: 18px; --t-xl: 22px; --t-num: 20px; --t-display: 28px; --lh: 1.4; /* space, radius, sizes */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --r-1: 6px; --r-2: 10px; --r-pill: 999px; --ctl: 48px; /* inputs, buttons */ --seg: 56px; /* answer segments (phone) */ --tap: 48px; /* minimum hit target */ --bar: 56px; /* app bar */ --gutter: 16px; --stroke: 1px; /* control stroke; 2px in field mode */ --shadow-sticky: 0 1px 0 var(--line), 0 6px 16px rgba(20,24,31,.06); --shadow-sheet: 0 -8px 32px rgba(20,24,31,.16); --dur: 120ms; --ease: cubic-bezier(.2,0,0,1); color-scheme: light dark; } /* 2. BASE ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--canvas); color: var(--ink-1); font: 400 var(--t-md)/var(--lh) var(--font); font-variant-numeric: tabular-nums; min-height: 100dvh; overflow-x: hidden; } h1, h2, h3, p { margin: 0; } h1 { font-size: var(--t-xl); font-weight: 600; line-height: 1.25; } h2 { font-size: var(--t-lg); font-weight: 600; line-height: 1.3; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } a { color: var(--accent); } fieldset { border: 0; padding: 0; margin: 0; min-width: 0; } img, svg { max-width: 100%; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } ::placeholder { color: var(--ink-3); opacity: 1; } .i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .i--sm { width: 16px; height: 16px; } /* 3. UTILITIES ------------------------------------------------------------- */ .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .mono { font-family: var(--mono); letter-spacing: .04em; white-space: nowrap; } .muted { color: var(--ink-3); } .small { font-size: var(--t-sm); } .tiny { font-size: var(--t-xs); } .strong { font-weight: 600; } .num-t { font-variant-numeric: tabular-nums; } .row-flex { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } .stack { display: flex; flex-direction: column; gap: var(--s-3); } .stack--lg { gap: var(--s-5); } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .right { text-align: right; } .c-ok { color: var(--ok); } .c-warn { color: var(--warn); } .c-danger { color: var(--danger); } .c-a { color: var(--cat-a); } .c-b { color: var(--cat-b); } .c-c { color: var(--cat-c); } .show-desktop { display: none !important; } .grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--s-3); } .grid-hdr { display: grid; grid-template-columns: 1fr; gap: var(--s-3); } .section-title { display: flex; align-items: baseline; gap: var(--s-2); margin: var(--s-5) 0 var(--s-2); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); } .section-title:first-child { margin-top: 0; } .section-title > a { margin-left: auto; font-weight: 600; text-decoration: none; } .cols > * { min-width: 0; } .empty .btn { white-space: normal; height: auto; padding-top: var(--s-3); padding-bottom: var(--s-3); } /* 4. LAYOUT ---------------------------------------------------------------- */ .app { min-height: 100dvh; display: flex; flex-direction: column; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .appbar { position: sticky; top: 0; z-index: 30; height: var(--bar); display: flex; align-items: center; gap: var(--s-1); padding: 0 var(--s-2) 0 var(--s-1); background: var(--surface); border-bottom: 1px solid var(--line); } .appbar__title { flex: 1; min-width: 0; font-weight: 600; font-size: var(--t-md); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: var(--s-2); } .appbar__sub { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .appbar__actions { display: flex; align-items: center; gap: var(--s-1); } .appbar__nav { display: none; } .brand { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; color: var(--ink-1); text-decoration: none; } .logo { width: 36px; height: 36px; border-radius: var(--r-1); background: var(--accent); color: var(--ink-on); display: grid; place-items: center; font: 700 14px/1 var(--font); letter-spacing: .02em; flex: none; } .logo--lg { width: 56px; height: 56px; border-radius: var(--r-2); font-size: 20px; } .rail { display: none; } .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1.4fr 1fr; align-items: stretch; background: var(--surface); border-top: 1px solid var(--line-2); padding-bottom: env(safe-area-inset-bottom); } .tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); text-decoration: none; } .tabbar__item.is-active { color: var(--accent); } .tabbar__item--primary { margin: 6px var(--s-2); min-height: 52px; border-radius: var(--r-2); background: var(--accent); color: var(--ink-on); flex-direction: row; gap: var(--s-2); font-size: var(--t-sm); } .page { flex: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--s-4) var(--gutter) calc(96px + env(safe-area-inset-bottom)); } .page--narrow { max-width: 680px; } .page--form { max-width: 520px; } .stepper { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--ink-3); margin-bottom: var(--s-4); flex-wrap: wrap; } .stepper__step { display: inline-flex; align-items: center; gap: 6px; } .stepper__step.is-on { color: var(--ink-1); font-weight: 600; } .stepper__step.is-done { color: var(--ok); } .stepper__n { width: 22px; height: 22px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font-size: var(--t-xs); font-weight: 600; } .stepper__step.is-on .stepper__n { background: var(--ink-1); color: var(--ink-on); border-color: var(--ink-1); } .stepper__sep { flex: none; width: 24px; height: 1px; background: var(--line-2); } /* 5. BUTTONS --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--ctl); padding: 0 var(--s-4); border: var(--stroke) solid var(--line-2); border-radius: var(--r-1); background: var(--surface); color: var(--ink-1); font-weight: 600; font-size: var(--t-sm); line-height: 1.2; text-decoration: none; white-space: nowrap; user-select: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .btn:hover { background: var(--sunken); } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--ink-on); } .btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); } .btn--danger { color: var(--danger); border-color: var(--danger); } .btn--danger:hover { background: var(--danger-tint); } .btn--danger.btn--solid { background: var(--danger); color: var(--ink-on); } .btn--ok.btn--solid { background: var(--ok); border-color: var(--ok); color: var(--ink-on); } .btn--ghost { border-color: transparent; background: transparent; color: var(--ink-2); } .btn--link { border: 0; background: none; color: var(--accent); padding: 0 var(--s-1); min-height: var(--tap); } .btn--link:hover { background: none; text-decoration: underline; } .btn--lg { min-height: 56px; font-size: var(--t-md); padding: 0 var(--s-5); } .btn--sm { min-height: 36px; padding: 0 var(--s-3); font-size: var(--t-xs); } .btn--icon { width: var(--tap); min-width: var(--tap); padding: 0; } .btn--icon.btn--sm { width: 36px; min-width: 36px; } .btn--block { display: flex; width: 100%; } .btn--dashed { border-style: dashed; color: var(--ink-2); } .btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; } .btn.is-loading .i { animation: spin 1s linear infinite; } .btn-row { display: flex; gap: var(--s-2); flex-wrap: wrap; } .btn-row--fill > .btn { flex: 1; } .fab { position: fixed; right: var(--s-4); bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); z-index: 25; min-height: 64px; border-radius: var(--r-pill); padding: 0 var(--s-5); box-shadow: 0 6px 16px rgba(20,24,31,.24); } /* 6. CHIPS, PILLS, BADGES, KBD --------------------------------------------- */ .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } .chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); } .chips--scroll::-webkit-scrollbar { display: none; } .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--s-3); border: var(--stroke) solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: pointer; text-decoration: none; } .chip:hover { background: var(--sunken); } .chip.is-on { background: var(--ink-1); border-color: var(--ink-1); color: var(--ink-on); } .chip--quick { font-weight: 400; min-height: 36px; color: var(--ink-1); } .chip--tmpl { min-height: 44px; } .chip--sm { min-height: 32px; font-size: var(--t-xs); padding: 0 var(--s-2); } .tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; background: var(--sunken); color: var(--ink-2); white-space: nowrap; vertical-align: middle; } .tag--ghost { border: 1px dashed var(--line-2); background: transparent; color: var(--ink-3); } .tag--warn { background: var(--warn-tint); color: var(--warn); } .tag--danger { background: var(--danger-tint); color: var(--danger); } .tag--ok { background: var(--ok-tint); color: var(--ok-strong); } /* --ok on --ok-tint is 4.33:1 (harness README) */ .tag--info { background: var(--info-tint); color: var(--info); } .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 700; letter-spacing: .01em; white-space: nowrap; border: 1px solid transparent; } .pill--draft { background: var(--warn-tint); color: var(--warn); } .pill--completed { background: var(--info-tint); color: var(--info); } .pill--issued { background: var(--ok-tint); color: var(--ok-strong); } .pill--void { background: var(--sunken); color: var(--ink-3); text-decoration: line-through; } .badge { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 700; color: var(--ink-on); font-variant-numeric: tabular-nums; white-space: nowrap; } .badge--a { background: var(--cat-a); } .badge--b { background: var(--cat-b); } .badge--c { background: var(--cat-c); } .badge--ok { background: var(--ok); } .badge--na { background: var(--na); } .badge.is-zero { background: var(--sunken); color: var(--ink-2); } /* ink-3 on sunken is 3.95:1 — below AA */ .badges { display: inline-flex; gap: 4px; } .kbd { display: inline-block; min-width: 18px; padding: 0 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); font: 600 11px/16px var(--mono); color: var(--ink-2); text-align: center; } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); flex: none; } .dot--a { background: var(--cat-a); } .dot--b { background: var(--cat-b); } .dot--c { background: var(--cat-c); } .dot--unsent { background: var(--warn); box-shadow: 0 0 0 2px var(--warn-tint); } /* 7. FIELDS ---------------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; } .field__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); } .field__mn { font-weight: 600; font-size: var(--t-sm); color: var(--ink-1); } .field__en { font-size: var(--t-xs); color: var(--ink-3); } .field__req { color: var(--danger); } .field__hint { font-size: var(--t-xs); color: var(--ink-3); } .field__err { font-size: var(--t-xs); color: var(--danger); font-weight: 600; } .field__row { display: flex; gap: var(--s-2); align-items: center; } .field__row > .fld { flex: 1; min-width: 0; } .fld { width: 100%; min-height: var(--ctl); padding: 0 var(--s-3); border: var(--stroke) solid var(--line-2); border-radius: var(--r-1); background: var(--surface); color: var(--ink-1); font-size: var(--t-md); line-height: 1.3; } .fld:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); } .fld[readonly], .fld--readonly { background: var(--sunken); color: var(--ink-2); } .fld--id { font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; } .fld.is-invalid { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); } textarea.fld { min-height: 96px; padding: var(--s-2) var(--s-3); resize: vertical; line-height: 1.45; } textarea.fld--line { min-height: var(--ctl); } select.fld { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .num { display: flex; align-items: stretch; min-height: var(--ctl); border: var(--stroke) solid var(--line-2); border-radius: var(--r-1); background: var(--surface); overflow: hidden; } .num:focus-within { border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus); } .num__input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 var(--s-3); font-size: var(--t-num); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; outline: none; } .num__unit { display: flex; align-items: center; padding: 0 var(--s-3); background: var(--sunken); color: var(--ink-2); font-family: var(--mono); font-size: var(--t-sm); border-left: 1px solid var(--line); min-width: 44px; justify-content: center; } .num__na { border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 0 var(--s-3); font-size: var(--t-xs); font-weight: 600; min-width: var(--tap); } .num__na.is-on { background: var(--na); color: var(--ink-on); } .num.is-na .num__input { color: var(--ink-3); } .num__prev { display: flex; gap: var(--s-2); align-items: center; font-size: var(--t-xs); color: var(--ink-3); flex-wrap: wrap; } .num__prev button { font-size: var(--t-xs); min-height: 32px; } .num__delta { color: var(--ok); font-weight: 600; } .num__delta.is-neg { color: var(--warn); } .date { display: flex; gap: var(--s-2); } .date .fld { flex: 1; min-width: 0; } input[type=date].fld { appearance: none; -webkit-appearance: none; } .check, .radio { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); cursor: pointer; } .check input, .radio input { width: 24px; height: 24px; margin: 0; accent-color: var(--accent); flex: none; } .radios { display: flex; gap: var(--s-4); flex-wrap: wrap; } .search { position: relative; } .search .fld { padding-left: 44px; padding-right: 48px; } .search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; } .search__clear { position: absolute; right: 0; top: 0; height: 100%; border: 0; } /* The app draws its own 44 px clear button; WebKit/Blink would add a second, tiny native × inside type=search. */ input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .pw { position: relative; } .pw .fld { padding-right: 88px; } .pw__toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); min-height: 40px; } .readonly-id { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: var(--ctl); padding: 0 var(--s-3); border-radius: var(--r-1); background: var(--sunken); color: var(--ink-2); } .readonly-id .mono { color: var(--ink-1); font-weight: 600; overflow: hidden; text-overflow: ellipsis; } /* 8. CARDS, LISTS, TABLES -------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-4); min-width: 0; } .card--link { display: block; color: inherit; text-decoration: none; transition: border-color var(--dur); } .card--link:hover { border-color: var(--line-2); } .card--draft { border-left: 4px solid var(--accent); } .card--stale { border-left-color: var(--warn); } .card--danger { border-color: var(--danger); } .card--disabled { opacity: .55; } .card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-2); } .card__head > * { min-width: 0; } .card__meta.mono { white-space: normal; } .card__title { font-weight: 600; font-size: var(--t-md); line-height: 1.3; } .card__meta { font-size: var(--t-sm); color: var(--ink-2); margin-top: 2px; } .card__meta--en { color: var(--ink-3); font-size: var(--t-xs); } .card__actions { display: flex; gap: var(--s-2); margin-top: var(--s-3); flex-wrap: wrap; align-items: center; } .card__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); margin-top: var(--s-3); font-size: var(--t-xs); color: var(--ink-3); flex-wrap: wrap; } .cards { display: grid; grid-template-columns: 1fr; gap: var(--s-3); } .list { display: flex; flex-direction: column; gap: var(--s-2); } .list--tight { gap: 0; border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; background: var(--surface); } .list--tight > * + * { border-top: 1px solid var(--line); } .lrow { display: flex; align-items: center; gap: var(--s-3); min-height: 64px; padding: var(--s-2) var(--s-3); color: inherit; text-decoration: none; background: var(--surface); } .lrow:hover { background: var(--sunken); } .lrow__main { flex: 1; min-width: 0; } .lrow__title { font-weight: 600; font-size: var(--t-sm); display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; } .lrow__meta { font-size: var(--t-xs); color: var(--ink-2); margin-top: 2px; } .lrow__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: var(--t-xs); color: var(--ink-3); flex: none; } .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); } .table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); } .table th, .table td { padding: var(--s-2) var(--s-3); text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; } .table th { background: var(--sunken); font-weight: 600; color: var(--ink-2); font-size: var(--t-xs); white-space: nowrap; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: var(--sunken); } .table td.right, .table th.right { text-align: right; } .table--stack thead { display: none; } .table--stack tr { display: block; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); } .table--stack td { display: block; padding: 2px 0; border: 0; } .table--stack td[data-label]::before { content: attr(data-label) " "; color: var(--ink-3); font-size: var(--t-xs); } .table--stack td.td-title { font-weight: 600; font-size: var(--t-md); } .table--stack td.td-title::before { content: none; } .cols { display: grid; gap: var(--s-5); grid-template-columns: 1fr; } .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s-3); font-size: var(--t-sm); } .kv dt { color: var(--ink-3); } .kv dd { margin: 0; font-weight: 600; } .ledger { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sm); } .ledger li { display: flex; gap: var(--s-2); } .ledger time { color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 92px; } /* 9. FILL ------------------------------------------------------------------ */ .secstrip { position: sticky; top: var(--bar); z-index: 20; display: flex; gap: var(--s-1); padding: var(--s-1) var(--gutter); background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } .secstrip::-webkit-scrollbar { display: none; } .secstrip__chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); text-decoration: none; scroll-snap-align: start; } .secstrip__chip.is-active { background: var(--ink-1); color: var(--ink-on); } .secstrip__chip.is-done { color: var(--ok); } .secstrip__chip.is-active.is-done { color: var(--ink-on); } .fill { display: grid; gap: var(--s-4); } .sec { scroll-margin-top: calc(var(--bar) + 56px); min-width: 0; } .sec__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-2) 0; border-bottom: 2px solid var(--line-2); } .sec--cat-a .sec__head { border-color: var(--cat-a); } .sec--cat-b .sec__head { border-color: var(--cat-b); } .sec--cat-c .sec__head { border-color: var(--cat-c); } .sec__title { flex: 1 1 200px; min-width: 0; } .sec__summary { display: none; flex-basis: 100%; font-size: var(--t-sm); color: var(--ink-2); } .sec.is-collapsed .sec__summary { display: block; } .sec__mn { display: block; font-size: var(--t-lg); font-weight: 600; line-height: 1.25; } .sec__en { display: block; font-size: var(--t-xs); color: var(--ink-3); } .sec__law { display: block; font-size: var(--t-xs); color: var(--ink-2); margin-top: 2px; } .sec__count { font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; } .sec__count.is-done { color: var(--ok); font-weight: 600; } .sec__toggle { color: var(--ink-3); } .sec__toggle .i { transition: transform var(--dur); } .sec.is-collapsed .sec__toggle .i { transform: rotate(-90deg); } .sec__body { display: flex; flex-direction: column; gap: var(--s-2); padding-top: var(--s-3); } .sec.is-collapsed .sec__body, .sec.is-collapsed .sec__confirm { display: none; } .sec__confirm { display: none; margin-top: var(--s-3); padding: var(--s-3); gap: var(--s-2) var(--s-3); flex-wrap: wrap; align-items: center; border: 2px solid var(--accent); border-radius: var(--r-2); background: var(--accent-tint); font-size: var(--t-sm); } .sec.is-confirm .sec__confirm { display: flex; } .sec--cat-a .sec__confirm { border-color: var(--cat-a); background: var(--cat-a-tint); } .sec__confirm ul { margin: 0; padding-left: 20px; flex-basis: 100%; } .sec__confirm .btn-row { flex-basis: 100%; } .sec__prefill { font-size: var(--t-xs); color: var(--ink-3); flex-basis: 100%; } .sec--pair { display: grid; gap: var(--s-4); } /* item */ .item { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); min-width: 0; scroll-margin-top: calc(var(--bar) + 64px); } .item::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; border-radius: var(--r-2) 0 0 var(--r-2); background: transparent; } .item[data-state=ok]::before { background: var(--ok); } .item[data-state=na]::before { background: var(--na); } .item[data-state=notok] { --defect: var(--cat-a); } .item[data-state=notok][data-cat=B] { --defect: var(--cat-b); } .item[data-state=notok][data-cat=C] { --defect: var(--cat-c); } .item[data-state=notok]::before { background: var(--defect); } .item.is-skipped { outline: 2px dashed var(--warn); outline-offset: -2px; } .item.is-focus { box-shadow: 0 0 0 3px var(--focus); } .item.is-flash { animation: flash 300ms var(--ease); } .item.is-pending { opacity: .85; } .item.is-error { border-color: var(--danger); } .item__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "no label prev cm" "seg seg seg seg"; align-items: start; gap: var(--s-1) var(--s-2); } .item__no { grid-area: no; font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 1.4em; padding-top: 3px; } .item__label { grid-area: label; display: flex; flex-direction: column; min-width: 0; } .item__mn { font-weight: 600; font-size: var(--t-md); line-height: 1.35; } .item__en { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.35; } .item__prev { grid-area: prev; display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; padding-top: 3px; } .item__prev--defect { color: var(--warn); font-weight: 700; } .item__cm { grid-area: cm; padding-top: 2px; } .item__pc { display: none; } .seg { grid-area: seg; display: grid; grid-template-columns: 44fr 30fr 26fr; gap: var(--s-2); margin-top: var(--s-2); } .seg--bool { grid-template-columns: 1fr 1fr; } .seg--num { display: flex; } .seg__opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--seg); padding: 4px; border: var(--stroke) solid var(--line-2); border-radius: var(--r-1); background: var(--surface); color: var(--ink-2); font-size: var(--t-xs); font-weight: 600; line-height: 1.1; text-align: center; cursor: pointer; user-select: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .seg__opt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; } .seg__opt .i { width: 24px; height: 24px; } .seg__opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; } .seg__opt:hover { background: var(--sunken); } .seg__opt--ok:has(input:checked), .seg__opt--ok.is-checked { background: var(--ok); border-color: var(--ok); color: var(--ink-on); } .seg__opt--notok:has(input:checked), .seg__opt--notok.is-checked { background: var(--defect); border-color: var(--defect); color: var(--ink-on); } .seg__opt--na:has(input:checked), .seg__opt--na.is-checked { background: var(--na); border-color: var(--na); color: var(--ink-on); } .item[data-state]:not([data-state=unanswered]) .seg__opt:not(:has(input:checked)):not(.is-checked) { border-color: var(--line); color: var(--ink-3); } .seg__key { display: none; } .item__tools { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-1); } /* defect panel */ .defect { display: none; flex-direction: column; gap: var(--s-3); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--line); } .item[data-state=notok] .defect, .item.has-remark .defect { display: flex; } .defect__label { font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); } .cat { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; } .cat__opt { --c: var(--na); position: relative; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--c); color: var(--c); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--t-md); cursor: pointer; } .cat__opt--a { --c: var(--cat-a); } .cat__opt--b { --c: var(--cat-b); } .cat__opt--c { --c: var(--cat-c); } .cat__opt input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; } .cat__opt:has(input:checked), .cat__opt.is-checked { background: var(--c); color: var(--ink-on); } .cat__opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; } .cat__law { flex-basis: 100%; font-size: var(--t-sm); font-weight: 600; color: var(--defect); } .cat__law span { display: none; } .item[data-cat=A] .cat__law [data-for=A], .item[data-cat=B] .cat__law [data-for=B], .item[data-cat=C] .cat__law [data-for=C] { display: inline; } .prevdef { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); align-items: center; margin-top: var(--s-3); padding: var(--s-2) var(--s-3); border-left: 4px solid var(--warn); border-radius: var(--r-1); background: var(--warn-tint); font-size: var(--t-sm); } .prevdef__text { flex: 1 1 200px; } .photos { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; } .photos__tile { position: relative; width: 72px; height: 72px; border-radius: var(--r-1); overflow: hidden; background: var(--sunken); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-3); } .photos__tile img { width: 100%; height: 100%; object-fit: cover; } .photos__tile.is-failed { border: 2px solid var(--danger); } .photos__tile.is-uploading::after { content: ""; position: absolute; left: 0; right: 30%; bottom: 0; height: 3px; background: var(--accent); } .photos__retry { position: absolute; inset: 0; border: 0; background: rgba(20,24,31,.55); color: #fff; font-size: var(--t-xs); font-weight: 700; } /* repeat rows */ .rows { display: flex; flex-direction: column; gap: var(--s-2); } .rows__head { display: none; } .rows__row { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); padding: var(--s-3) var(--s-3) var(--s-3) 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); } .rows__no { position: absolute; left: 12px; top: 14px; font-size: var(--t-sm); font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; } .rows__cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rows__cell--wide { grid-column: 1 / -1; } .rows__cell::before { content: attr(data-label); font-size: var(--t-xs); color: var(--ink-3); font-weight: 600; } .rows__cell--calc { justify-content: flex-end; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .rows__cell--calc .rows__val { min-height: var(--ctl); display: flex; align-items: center; justify-content: flex-end; } .rows__del { position: absolute; right: 4px; top: 4px; } .rows__row .fld, .rows__row .num { min-height: var(--ctl); } .rows__total { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-top: 2px solid var(--line-2); font-weight: 600; } .rows__total .num-t { font-size: var(--t-lg); } .rows__row--tpl { display: none !important; } .rows__foot { padding: var(--s-1) 0; } .fill__main { min-width: 0; } .card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } /* row tools (+ Тайлбар · Хариулт арилгах) appear only under the row just touched (phone) or focused (desktop) */ .item__tools { display: none; } .item.is-touched:not([data-state=unanswered]):not([data-state=notok]) .item__tools { display: flex; } @media (max-width: 599px) { .savechip--saved span { display: none; } .savechip--saved { padding: 0 10px; } } @media (max-width: 379px) { .seg__opt { font-size: 11px; } } /* signatures */ .sig { display: grid; grid-template-columns: 1fr; gap: var(--s-3); } .sig__role { display: grid; grid-template-columns: 1fr; gap: var(--s-2); } .sig__note { display: flex; gap: var(--s-2); align-items: center; font-size: var(--t-xs); color: var(--ink-3); } /* sticky bars */ .fillbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line-2); } .fillbar__prog { flex: 1; min-width: 0; } .fillbar__sub { font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-hand=left] .fillbar { flex-direction: row-reverse; } html[data-hand=left] .fab { right: auto; left: var(--s-4); } .filltop { display: none; } .revrail { display: none; } .hint-kbd { display: none; } .rev-issue { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); text-decoration: none; color: inherit; } .rev-issue:last-child { border-bottom: 0; } .rev-issue__body { flex: 1; min-width: 0; } .rev-issue__sub { color: var(--ink-3); font-size: var(--t-xs); } .ans { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 700; color: var(--ink-on); } .ans--ok { background: var(--ok); } .ans--na { background: var(--na); } .ans--a { background: var(--cat-a); } .ans--b { background: var(--cat-b); } .ans--c { background: var(--cat-c); } .ans--none { background: transparent; color: var(--warn); border: 1px dashed var(--warn); } .rendition { display: grid; grid-template-columns: 1fr; gap: var(--s-3); } /* 10. PROGRESS, SAVE CHIP, BANNER, OUTCOME --------------------------------- */ .progress { display: flex; align-items: center; gap: var(--s-2); min-width: 0; } .progress__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; min-width: 40px; } .progress__fill { height: 100%; width: var(--p, 0%); background: var(--accent); border-radius: 3px; transition: width 200ms var(--ease); } .progress--ok .progress__fill { background: var(--ok); } .progress__text { font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .progress--sm .progress__bar { height: 4px; } .savechip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-pill); font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); background: var(--sunken); white-space: nowrap; } .savechip--saved { color: var(--ok-strong); background: var(--ok-tint); } .savechip--saving .i { animation: pulse 800ms ease-in-out infinite; } .savechip--offline { color: var(--warn); background: var(--warn-tint); } .savechip--error { color: var(--danger); background: var(--danger-tint); } .banner { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-2); background: var(--surface); font-size: var(--t-sm); } .banner__body { flex: 1; min-width: 0; } .banner__title { font-weight: 700; } .banner__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-2); } .banner--info { border-color: var(--info); background: var(--info-tint); } .banner--warn { border-color: var(--warn); background: var(--warn-tint); } .banner--danger { border-color: var(--danger); background: var(--danger-tint); } .banner--ok { border-color: var(--ok); background: var(--ok-tint); } .banner--solid { background: var(--danger); border-color: var(--danger); color: var(--ink-on); } .banner--strip { border-radius: 0; border-left-width: 1px; padding: var(--s-2) var(--gutter); } .outcome { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-4); border-radius: var(--r-2); color: var(--ink-on); } .outcome .i { width: 32px; height: 32px; } .outcome--a { background: var(--cat-a); } .outcome--b { background: var(--cat-b); } .outcome--ok { background: var(--ok); } .outcome--incomplete { background: var(--na); } .outcome__title { font-size: var(--t-xl); font-weight: 700; line-height: 1.15; } .outcome__sub { font-size: var(--t-sm); opacity: .95; margin-top: 2px; } /* 11. SHEET, TOAST, EMPTY, LOGIN ------------------------------------------- */ dialog.sheet { border: 0; padding: 0; width: 100%; max-width: 100%; margin: auto 0 0; max-height: 88dvh; overflow: auto; background: var(--surface); color: var(--ink-1); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-sheet); } dialog.sheet::backdrop { background: rgba(20,24,31,.5); } .sheet__head { padding: var(--s-4) var(--s-4) 0; font-size: var(--t-lg); font-weight: 600; line-height: 1.3; } .sheet__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); font-size: var(--t-sm); } .sheet__body ul { margin: 0; padding-left: 20px; } .sheet__actions { display: flex; gap: var(--s-2); padding: 0 var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); } .sheet__actions .btn { flex: 1; } .toasts { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: var(--s-2); width: calc(100% - 32px); max-width: 440px; pointer-events: none; } .toast { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-2); background: var(--ink-1); color: var(--ink-on); font-size: var(--t-sm); box-shadow: var(--shadow-sheet); pointer-events: auto; } .toast__text { flex: 1; } .toast .btn--link { color: #9CC4F5; min-height: 36px; } .empty { text-align: center; padding: var(--s-6) var(--s-4); color: var(--ink-2); display: flex; flex-direction: column; align-items: center; gap: var(--s-3); } .empty__title { font-weight: 600; color: var(--ink-1); } .skel { background: var(--sunken); border-radius: var(--r-1); min-height: 1em; } .login { min-height: 100dvh; display: grid; place-items: center; padding: var(--s-4); } .login__card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--s-4); } .login__brand { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); text-align: center; } .login__foot { font-size: var(--t-xs); color: var(--ink-3); text-align: center; } /* 12. BREAKPOINTS ---------------------------------------------------------- */ @media (min-width: 600px) { .grid-2, .cards, .sig, .rendition { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-hdr { grid-template-columns: repeat(2, minmax(0, 1fr)); } .seg__opt { flex-direction: row; gap: var(--s-2); font-size: var(--t-sm); } .sig__role { grid-template-columns: 1fr 160px; } dialog.sheet { margin: auto; max-width: 520px; border-radius: var(--r-2); } .rows__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } .rows__cell--wide { grid-column: span 2; } .table--stack thead { display: table-header-group; } .table--stack tr { display: table-row; padding: 0; } .table--stack td { display: table-cell; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); } .table--stack td[data-label]::before { content: none; } .table--stack td.td-title { font-size: var(--t-sm); } } @media (min-width: 1024px) { :root { --ctl: 40px; --seg: 32px; --t-sm: 12px; --t-md: 14px; --t-lg: 16px; --t-xl: 20px; --t-num: 16px; --gutter: 24px; } .hide-desktop { display: none !important; } .show-desktop { display: block !important; } .show-desktop.stack { display: flex !important; } .btn.show-desktop { display: inline-flex !important; } .date .btn { padding: 0 var(--s-2); } .app { flex-direction: row; } .rail { display: flex; flex-direction: column; width: 64px; flex: none; position: sticky; top: 0; height: 100dvh; background: var(--surface); border-right: 1px solid var(--line); } .rail__logo { height: var(--bar); display: grid; place-items: center; border-bottom: 1px solid var(--line); } /* the rail holds both and