/* ============================================================================================ KUI — Kapdaa UI component kit (design-uplift Phase 1) -------------------------------------------------------------------------------------------- ONE stylesheet, ONE of each component. All classes are `.kui-*` and use ONLY kui-tokens.css, so light/dark + density come for free. Markup is emitted by public/js/kapdaa_ui.js. No screen uses these yet (Phase 3 migrates screens onto the kit); this file just defines the vocabulary. ============================================================================================ */ /* ---- Layout helpers ------------------------------------------------------------------------ */ .kui-stack { display: flex; flex-direction: column; gap: var(--kui-s3); } .kui-row { display: flex; align-items: center; gap: var(--kui-s2); flex-wrap: wrap; } .kui-spacer { flex: 1 1 auto; } .kui-muted { color: var(--kui-text-soft); } .kui-mono { font-family: var(--kui-mono); font-variant-numeric: tabular-nums; } /* ---- Page header (D2 canonical) — one structure, fixed zones: title/subtitle · switcher · search · filters ---- */ .kui-pageheader { display: flex; flex-direction: column; gap: var(--kui-s3); padding: var(--kui-s4) 0; border-bottom: 1px solid var(--kui-line); margin-bottom: var(--kui-s5); } .kui-ph-bar { display: flex; align-items: center; gap: var(--kui-s3); flex-wrap: wrap; } .kui-pageheader .kui-ph-main { flex: 1 1 auto; min-width: 0; } .kui-pageheader .kui-ph-eyebrow { font-size: var(--kui-fs-xs); color: var(--kui-accent); font-weight: var(--kui-fw-bold); } /* Purpose eyebrow on a control-led (no-title) header — a small strip above the control bar stating the page's job. A leading dot carries the page-kind tone (green cockpit = accent by default; --info = blue record). */ .kui-ph-eyebrow--strip { display: flex; align-items: center; gap: 7px; margin: 0 0 var(--kui-s2); } .kui-ph-eyebrow--strip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .kui-ph-eyebrow--info { color: var(--kui-info); } .kui-pageheader h1 { margin: 2px 0 0; font-size: var(--kui-fs-xl); line-height: var(--kui-lh-tight); font-weight: var(--kui-fw-bold); color: var(--kui-ink); letter-spacing: -.01em; } /* subtitle = the page's job, as a quiet small label (the one register across every header) */ .kui-pageheader .kui-ph-sub { margin: var(--kui-s1) 0 0; color: var(--kui-text-soft); font-size: var(--kui-fs-sm, 13px); font-weight: var(--kui-fw-med); } /* LEFT: collapse/hamburger toggle. RIGHT: the view-switcher group (pinned right via margin-left:auto, so it sits right even when there's no search to push it there). Search (below) grows to fill the middle. */ .kui-ph-menu { display: flex; align-items: center; flex: 0 0 auto; } .kui-ph-right { display: flex; align-items: center; gap: var(--kui-s3); flex-wrap: wrap; flex: 0 0 auto; margin-left: auto; } .kui-pageheader .kui-ph-actions { display: flex; gap: var(--kui-s2); flex-wrap: wrap; align-items: center; } /* search sits inline in the bar and grows to fill the middle (min-width lets it wrap under the switcher on phones) */ .kui-ph-search { flex: 1 1 200px; min-width: 200px; } /* basis = its floor, so a tablet keeps search and views on one row */ .kui-ph-search .kap-search { width: 100%; } .kui-ph-filters { display: flex; gap: var(--kui-s3); flex-wrap: wrap; align-items: center; } /* Standard filter control (kapdaa.ui.filterSelect) — one labelled dropdown, consistent across every page */ .kui-filter { display: inline-flex; align-items: center; gap: var(--kui-s2); font-size: 13px; color: var(--kui-text-soft); } .kui-filter__l { font-weight: 500; } .kui-filter__s { font: inherit; color: var(--kui-text); background: var(--kui-panel); border: 1px solid var(--kui-line-ctl); border-radius: var(--kui-r); padding: 7px 11px; cursor: pointer; } .kui-filter__s:hover { border-color: var(--kui-accent); } .kui-filter__s:focus-visible { outline: none; border-color: var(--kui-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--kui-accent) 35%, transparent); } /* Control-led header (no page-name title): the view-switcher leads, an informative subtitle sits inline. */ .kui-ph-lead { display: flex; align-items: center; gap: var(--kui-s3); flex-wrap: wrap; flex: 0 0 auto; } .kui-ph-subinline { /* as tall as the bar (centred in it), so the bar measures as the one row it is */ align-self: stretch; display: flex; align-items: center; font-size: var(--kui-fs-sm, 13px); color: var(--kui-text-soft); font-weight: var(--kui-fw-med); } .kui-ph-spacer { flex: 1 1 auto; } /* docs/23 §2b: the header is one row at least 56 px high and its controls are 44 px (the touch sizes stay as they are) */ .kui-ph-bar { min-height: var(--kui-ph-bar-h); } /* one bar height on every page: the search's own (66), so a page without one is as tall */ /* a page that hides its search (Production Control's Balance): on a phone the empty search row folds away */ @media (max-width: 640px) { .kui-ph-bar:has(> .kui-ph-search[style*="display: none"]) { min-height: 0; } } .kui-pageheader--bare .kui-ph-bar { align-items: flex-start; } /* a scan's reason under the field never moves the switcher */ .kui-pageheader .kap-search, .kui-pageheader .kui-btn, .kui-pageheader .kui-seg__b { min-height: var(--kui-ctl); } .kui-ph-search { max-width: min(640px, 100%); } /* a phone: the header's controls at the touch height, so the scan and the switcher take little before the work */ @media (max-width: 640px) { .kui-pageheader :is(.kap-search, .kui-btn, .kui-seg__b) { min-height: var(--kui-ctl-touch); } .kui-pageheader--bare { padding: var(--kui-s2) 0; margin-bottom: var(--kui-s3); } .kui-pageheader .kui-ph-bar { gap: var(--kui-s2); } .kui-pageheader.kui-pageheader .kui-ph-search .kap-search { padding-block: 0; margin-bottom: 0; } } /* a booth monitor's search never runs the switcher off to the far edge */ /* the page's name: ERPNext's navbar names the page at every width (the breadcrumb on a desk, the title on a phone), so here it is the heading screen readers land on and never a second visible name */ .kui-ph-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; font-size: var(--kui-fs-lg); font-weight: 600; color: var(--kui-ink); } /* Control-led (no-title) header: a single compact control row — tighter top/bottom space than a titled header. */ .kui-pageheader--bare { padding: var(--kui-s2) 0; margin-bottom: var(--kui-s3); } .kui-pageheader--bare .kui-ph-search .kap-search { padding-top: 6px; padding-bottom: 6px; } /* ---- Card ---------------------------------------------------------------------------------- */ .kui-card { background: var(--kui-panel); border: 1px solid var(--kui-panel-edge, var(--kui-line)); border-radius: var(--kui-r); box-shadow: var(--kui-panel-e, var(--kui-e1)); padding: var(--kui-s4); } .kui-card--flush { padding: 0; overflow: hidden; } .kui-card--raised { box-shadow: var(--kui-e2); } .kui-card--pad-lg { padding: var(--kui-s5); } .kui-card__head { display: flex; align-items: center; gap: var(--kui-s2); font-weight: var(--kui-fw-bold); color: var(--kui-ink); font-size: var(--kui-fs-lg); margin-bottom: var(--kui-s3); } .kui-card__head .kui-spacer { flex: 1; } .kui-card__head { flex-wrap: wrap; row-gap: var(--kui-s1); } /* a narrow card puts its chip under the title, never past its edge */ /* a coloured left accent (e.g. stage/line colour set inline via --kui-bar) */ .kui-card--barred { border-left: 3px solid var(--kui-bar, var(--kui-accent)); } /* ---- Button (one, with variants + sizes) --------------------------------------------------- */ .kui-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--kui-s2); height: var(--kui-control-h); min-height: var(--kui-control-h); padding: 0 var(--kui-s3); border-radius: var(--kui-r); font-size: var(--kui-fs-md); font-weight: 500; line-height: 1; border: 1px solid var(--kui-line-ctl); background: var(--kui-panel); color: var(--kui-ink); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--kui-t-fast) var(--kui-ease), border-color var(--kui-t-fast) var(--kui-ease), box-shadow var(--kui-t-fast) var(--kui-ease), transform var(--kui-t-fast) var(--kui-ease); } .kui-btn:hover { background: var(--kui-panel-2); border-color: var(--kui-text-soft); } /* press (design plan §6): a step darker and a hair smaller, at once; reduced motion keeps only the colour */ .kui-btn:active { transform: scale(var(--kui-m-scale)); } .kui-btn:not(.kui-btn--primary):not(.kui-btn--danger):active { background: var(--kui-panel-2); } .kui-btn:focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; } /* the one disabled look (docs/23 §2b): filled, no border, soft text; aria-disabled keeps it focusable (the kit swallows its clicks), and its reason sits on the line beneath */ .kui-btn[disabled], .kui-btn.is-disabled, .kui-btn[aria-disabled="true"], .kui-btn[disabled]:hover, .kui-btn[aria-disabled="true"]:hover, .kui-btn[aria-disabled="true"]:active { background: var(--kui-panel-2); border-color: transparent; color: var(--kui-text-soft); box-shadow: none; cursor: not-allowed; transform: none; } .kui-btn[disabled] { pointer-events: none; } /* a dialog's own primary waiting for its step (aria-disabled, still focusable): the same disabled look */ .modal .btn-primary[aria-disabled="true"], .modal .btn-primary[aria-disabled="true"]:hover { background: var(--kui-panel-2); border-color: transparent; color: var(--kui-text-soft); box-shadow: none; cursor: not-allowed; } .kui-btnwhy { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--kui-s1); min-width: 0; } .kui-btnwhy--block { display: flex; align-items: stretch; } .kui-btnwhy__r { font-size: var(--kui-fs-md); color: var(--kui-text-soft); } .kui-btn svg { width: 1.05em; height: 1.05em; } .kui-btn--primary { background: var(--kui-accent); border-color: var(--kui-accent); color: var(--kui-accent-ink); } .kui-btn--primary:hover, .kui-btn--primary:active { background: var(--kui-accent-hover); border-color: var(--kui-accent-hover); } /* a link drawn as a button keeps the button's ink (kapdaa.css's a:not(.btn) accent would paint it black on black) */ a.kui-btn--primary:not(.btn), a.kui-btn--primary:not(.btn):hover { color: var(--kui-accent-ink); text-decoration: none; } a.kui-btn:not(.btn):not(.kui-btn--primary) { color: var(--kui-ink); } .kui-btn--ghost { background: transparent; border-color: transparent; color: var(--kui-text); } .kui-btn--ghost:hover { background: var(--kui-panel-2); } /* destructive: outlined in red on a page; filled only as the primary of a confirm dialog */ .kui-btn--danger { background: transparent; border-color: var(--kui-alert); color: var(--kui-alert-text); } .kui-btn--danger:hover { background: var(--kui-alert-tint); border-color: var(--kui-alert); } .modal .kui-btn--danger { background: var(--kui-alert); border-color: var(--kui-alert); color: var(--kui-panel); } .kui-btn--lg { height: var(--kui-tap); min-height: var(--kui-tap); padding: 0 var(--kui-s4); font-size: var(--kui-fs-lg); } .kui-btn--sm { height: calc(26px * var(--kui-density)); padding: 0 var(--kui-s2); font-size: var(--kui-fs-sm); } .kui-btn--block { display: flex; width: 100%; } /* ---- Badge — status register (default) + journey (colour set inline via --kui-badge) -------- */ .kui-badge { display: inline-flex; align-items: center; gap: var(--kui-s1); padding: 2px var(--kui-s2); border-radius: var(--kui-r-pill); font-size: var(--kui-fs-xs); font-weight: var(--kui-fw-bold); line-height: 1.4; letter-spacing: .02em; white-space: nowrap; color: var(--kui-text); background: var(--kui-panel-2); border: 1px solid var(--kui-line); } .kui-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; } .kui-badge--good { color: var(--kui-good-text); background: var(--kui-good-tint); border-color: transparent; } .kui-badge--warn { color: var(--kui-warn-text); background: var(--kui-warn-tint); border-color: transparent; } .kui-badge--alert { color: var(--kui-alert-text); background: var(--kui-alert-tint); border-color: transparent; } .kui-badge--info { color: var(--kui-info-text); background: var(--kui-info-tint); border-color: transparent; } .kui-badge--plain::before { display: none; } /* journey/stage badge: JS sets `style="--kui-badge:"`; hue tints bg + text */ .kui-badge--stage { color: var(--kui-badge, var(--kui-text)); border-color: transparent; background: color-mix(in srgb, var(--kui-badge, var(--kui-line)) 14%, transparent); } /* ---- Chip (compact key/value or filter) ---------------------------------------------------- */ .kui-chip { display: inline-flex; align-items: center; gap: var(--kui-s1); padding: 2px var(--kui-s2); border-radius: var(--kui-r-sm); font-size: var(--kui-fs-sm); color: var(--kui-text-soft); background: var(--kui-panel-2); border: 1px solid var(--kui-line-ctl); } .kui-chip b { color: var(--kui-ink); font-weight: var(--kui-fw-med); } /* ---- KPI tile + grid ----------------------------------------------------------------------- */ .kui-kpigrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--kui-s3); } .kui-kpi { background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r); box-shadow: var(--kui-e1); padding: var(--kui-s4); border-top: 3px solid var(--kui-kpi-accent, var(--kui-line)); } .kui-kpi__label { font-size: var(--kui-fs-xs); color: var(--kui-text-soft); } .kui-kpi__value { font-size: var(--kui-fs-3xl); line-height: 1; font-weight: var(--kui-fw-bold); color: var(--kui-ink); margin-top: var(--kui-s2); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .kui-kpi__value .u { font-size: var(--kui-fs-lg); color: var(--kui-text-soft); font-weight: var(--kui-fw-med); margin-left: 3px; } .kui-kpi__sub { margin-top: var(--kui-s2); font-size: var(--kui-fs-sm); color: var(--kui-text-soft); } .kui-kpi__sub .kui-delta--up { color: var(--kui-good); } .kui-kpi__sub .kui-delta--down { color: var(--kui-alert); } /* ---- Board — journey-column lanes ---------------------------------------------------------- */ .kui-board { display: flex; gap: var(--kui-s3); overflow-x: auto; padding-bottom: var(--kui-s2); } .kui-lane { flex: 0 0 clamp(220px, 22vw, 300px); display: flex; flex-direction: column; background: var(--kui-panel-2); border: 1px solid var(--kui-line); border-radius: var(--kui-r); border-top: 3px solid var(--kui-lane-accent, var(--kui-line)); overflow: hidden; } .kui-lane__head { display: flex; align-items: center; gap: var(--kui-s2); padding: var(--kui-s3); font-weight: var(--kui-fw-bold); color: var(--kui-ink); } .kui-lane__head .count { margin-left: auto; font-family: var(--kui-mono); font-size: var(--kui-fs-sm); color: var(--kui-text-soft); background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r-pill); padding: 0 var(--kui-s2); } .kui-lane__body { display: flex; flex-direction: column; gap: var(--kui-s2); padding: 0 var(--kui-s3) var(--kui-s3); } .kui-lane__body:empty::after { content: "—"; color: var(--kui-text-soft); text-align: center; padding: var(--kui-s3); } /* ---- Toolbar ------------------------------------------------------------------------------- */ .kui-toolbar { display: flex; align-items: center; gap: var(--kui-s2); flex-wrap: wrap; padding: var(--kui-s2) var(--kui-s3); background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r); } /* ---- Empty state --------------------------------------------------------------------------- */ .kui-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--kui-s7) var(--kui-s4); color: var(--kui-text-soft); } .kui-empty__icon { color: var(--kui-line-strong); margin-bottom: var(--kui-s3); } .kui-empty__icon svg { width: 40px; height: 40px; } .kui-empty__title { font-size: var(--kui-fs-lg); font-weight: var(--kui-fw-bold); color: var(--kui-text); } .kui-empty__msg { margin-top: var(--kui-s1); max-width: 42ch; font-size: var(--kui-fs-base); } .kui-empty__action { margin-top: var(--kui-s4); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kui-s2); } /* ---- Focus & Disclosure kit (F0) ----------------------------------------------------------- */ /* Underline tabs — alternate views of ONE object */ /* the base line is an inset shadow, not a border: a scrolling strip clips anything drawn over its own border, which hid the selected tab's underline */ .kui-tabs { display: flex; gap: 2px; box-shadow: inset 0 -1.5px 0 var(--kui-line); overflow-x: auto; scrollbar-width: none; } .kui-tabs::-webkit-scrollbar { display: none; } .kui-tab { font: inherit; font-weight: var(--kui-fw-med, 600); font-size: var(--kui-fs-base, 14px); color: var(--kui-text-soft); background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 9px 14px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; transition: color var(--kui-t-fast), border-color var(--kui-t-fast); } .kui-tab:hover { color: var(--kui-ink); } .kui-tab.is-on { color: var(--kui-ink); border-bottom-color: var(--kui-accent); } .kui-tab__c { font-family: var(--kui-mono); font-size: 11px; color: var(--kui-text-soft); background: var(--kui-panel-2); border-radius: 999px; padding: 1px 7px; } .kui-tab.is-on .kui-tab__c { color: var(--kui-accent); } /* Phones (handheld checklist): the tabs share the width equally and wrap a label, never scroll out of sight. */ @media (max-width: 700px) { .kui-tab { flex: 1 1 0; min-width: 0; min-height: 44px; justify-content: center; padding: 8px 6px; white-space: normal; text-align: center; line-height: 1.2; } .kui-tab__c { display: none; } } /* Segmented — filter the SAME list */ .kui-seg { display: inline-flex; background: var(--kui-panel-2); border: 1px solid var(--kui-line-ctl); border-radius: var(--kui-r); padding: 3px; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .kui-seg::-webkit-scrollbar { display: none; } .kui-seg__b { font: inherit; font-weight: var(--kui-fw-med, 600); font-size: var(--kui-fs-md); color: var(--kui-text); background: transparent; border: 0; border-radius: var(--kui-r-sm); padding: 7px 13px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: background var(--kui-t-fast), color var(--kui-t-fast); } /* the selected part is a raised tint, never the ink of a primary action: a switch must not read as a button to press */ .kui-seg__b:hover { color: var(--kui-ink); } .kui-seg__b.is-on { background: var(--kui-accent-soft); color: var(--kui-ink); box-shadow: inset 0 0 0 1px var(--kui-line-strong); } /* the selected fill token */ .kui-seg__c { font-size: var(--kui-fs-xs); opacity: .8; } /* Phones: a switch spans the width in equal parts and drops its counts (handheld checklist), like the tabs. */ @media (max-width: 700px) { .kui-ph-right { margin-left: 0; width: 100%; } .kui-seg { display: flex; width: 100%; } .kui-seg__b { flex: 1 1 0; min-width: 0; justify-content: center; white-space: normal; text-align: center; line-height: 1.2; padding: 7px 6px; } .kui-seg__c { display: none; } .kui-seg--counts .kui-seg__c { display: inline; } /* a filter keeps its counts: they are what the chip is for */ } /* Folded section — supporting detail, collapsed by default */ .kui-section { border: 1px solid var(--kui-panel-edge, var(--kui-line)); box-shadow: var(--kui-panel-e, none); border-radius: var(--kui-r-lg); background: var(--kui-panel); overflow: hidden; } .kui-section + .kui-section { margin-top: 10px; } .kui-section__head { list-style: none; display: flex; align-items: center; gap: 10px; padding: 13px 15px; font-weight: var(--kui-fw-med, 600); font-size: var(--kui-fs-base, 14px); color: var(--kui-ink); cursor: pointer; background: var(--kui-panel-2); } .kui-section__head::-webkit-details-marker { display: none; } .kui-section__title { flex: 1; } .kui-section__c { font-family: var(--kui-mono); font-size: var(--kui-fs-sm); color: var(--kui-text-soft); } .kui-section__chev { display: inline-flex; color: var(--kui-accent); transition: transform var(--kui-t-fast); } .kui-section__chev svg { width: 16px; height: 16px; } .kui-section[open] .kui-section__chev { transform: rotate(90deg); } .kui-section__body { padding: 15px; } /* Shared top-bar shell */ .kui-topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 0 14px; } .kui-topbar__lead { margin-right: auto; min-width: 0; } .kui-topbar__eyebrow { font-size: 11px; color: var(--kui-text-soft); } .kui-topbar__title { font-weight: var(--kui-fw-bold, 700); font-size: var(--kui-fs-xl, 20px); color: var(--kui-ink); line-height: 1.1; } .kui-topbar__controls, .kui-topbar__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Sticky thumb-zone action — pins the one primary action to the bottom on phones */ .kui-sticky { display: contents; } @media (max-width: 640px) { .kui-sticky { display: block; position: sticky; bottom: 0; z-index: 5; margin: 12px -14px -14px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--kui-panel) 72%, transparent); } .kui-sticky .kui-btn { width: 100%; justify-content: center; } } /* Skeleton loader */ .kui-skel { display: flex; flex-direction: column; gap: 10px; } /* skeleton: a soft breath while loading, three times (4.2 s) then still: nothing moves for more than 5 s */ .kui-skel__line { height: 12px; border-radius: 6px; background: var(--kui-line); } .kui-skel__line, .kui-m-skeleton { animation: kui-skeleton 1.4s ease-in-out 3 alternate; } /* ---- Motion: the eleven named motions (design plan §6, D-83) --------------------------------------------------------- press · enter · update · tick · shake · attention · sheet · fill · count · live · skeleton. Each runs once (skeleton three breaths), on the duration and curve tokens; kapdaa.ui.motion(el, name) plays one again, kapdaa.ui.countUp the count. Every keyframe here is defined again under prefers-reduced-motion (the block at the end of this section) with no movement: opacity and colour still say what happened. Nothing loops (static test: test_ui_consistency). */ .kui-m-press:active { transform: scale(var(--kui-m-scale)); } .kui-m-enter { animation: kui-enter var(--kui-t) var(--kui-ease-out) 1 both; } /* update: a row or figure that changed by realtime glows "your attention" blue once, then fades */ .kui-pulse, .kui-m-update { animation: kui-update var(--kui-t-glow) var(--kui-ease-out) 1; } .kui-m-tick { stroke-dasharray: 24; animation: kui-tick 320ms var(--kui-ease-out) 1 both; } .kui-m-shake { animation: kui-shake 300ms var(--kui-ease) 1; } /* attention: two rings when an item first becomes overdue or blocking, then still for good (kapdaa.ui.motion keys it) */ .kui-m-attention { animation: kui-attention var(--kui-t-fill) var(--kui-ease-out) 2; } .kui-m-sheet { animation: kui-sheet var(--kui-t-sheet) var(--kui-ease-out) 1 both; } .kui-m-fill { transform-origin: left center; animation: kui-fill var(--kui-t-fill) var(--kui-ease-out) 1 both; } .kui-m-live { animation: kui-live var(--kui-t-fill) var(--kui-ease-out) 1; } @keyframes kui-enter { from { opacity: 0; transform: translate(var(--kui-enter-x, 0), var(--kui-enter-y, var(--kui-m-dist))); } to { opacity: 1; transform: translate(var(--kui-enter-x, 0), 0); } } @keyframes kui-update { from { background-color: var(--kui-info-tint); } to { background-color: transparent; } } @keyframes kui-tick { from { opacity: .4; stroke-dashoffset: 24; transform: scale(.9); } to { opacity: 1; stroke-dashoffset: 0; transform: none; } } @keyframes kui-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(calc(-1 * var(--kui-m-dist))); } 40%, 80% { transform: translateX(var(--kui-m-dist)); } } @keyframes kui-attention { from { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } to { box-shadow: 0 0 0 10px transparent; } } @keyframes kui-sheet { from { transform: translate(var(--kui-sheet-x, 0), var(--kui-sheet-y, 100%)); } to { transform: none; } } @keyframes kui-fill { from { transform: scaleX(0); } to { transform: none; } } @keyframes kui-live { from { opacity: .7; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } } @keyframes kui-skeleton { from { opacity: 1; } to { opacity: .6; } } /* reduced motion: the same names, no movement. The blanket in kapdaa.css shortens every animation to .01 ms; the kit's feedback keeps its pace in opacity and colour (an update still glows, an entering row still fades in). */ @media (prefers-reduced-motion: reduce) { :root { --kui-m-dist: 0px; --kui-m-scale: 1; } @keyframes kui-enter { from { opacity: 0; } to { opacity: 1; } } @keyframes kui-update { from { background-color: var(--kui-info-tint); } to { background-color: transparent; } } @keyframes kui-tick { from { opacity: 0; } to { opacity: 1; } } @keyframes kui-shake { 0%, 100% { outline: 2px solid transparent; } 30%, 70% { outline: 2px solid var(--kui-alert); outline-offset: 2px; } } @keyframes kui-attention { from { opacity: 1; } to { opacity: 1; } } @keyframes kui-sheet { from { opacity: 0; } to { opacity: 1; } } @keyframes kui-fill { from { opacity: 1; } to { opacity: 1; } } @keyframes kui-live { from { opacity: 0; } to { opacity: 0; } } @keyframes kui-skeleton { from { opacity: 1; } to { opacity: 1; } } :is(.kui-pulse, .kui-m-update, .kui-glance__v.is-tick) { animation-duration: var(--kui-t-glow) !important; } :is(.kui-m-enter, .kui-r.is-new, .kui-lead, .kui-m-sheet, .kui-toast, .kui-lead__done) { animation-duration: var(--kui-t) !important; } .modal:is(.kui-sheet--bottom, .kui-sheet--side).show .modal-dialog { animation-duration: var(--kui-t) !important; } /* a sheet fades in */ :is(.kui-m-tick, .kui-m-shake) { animation-duration: 300ms !important; } } /* Touch baselines (floor runs on gloves): 44 px on a phone, 48 px for the switches on any touch screen */ @media (max-width: 640px) { .kui-btn { min-height: 44px; } .kui-tab, .kui-seg__b { min-height: 44px; } } @media (pointer: coarse) { .kui-btn { min-height: 44px; } .kui-tab, .kui-seg__b { min-height: 48px; } } /* Visible focus for the kit */ .kui-tab:focus-visible, .kui-seg__b:focus-visible, .kui-section__head:focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { .kui-btn, .kui-tab, .kui-seg__b, .kui-section__chev { transition: none; } .kui-skel__line { animation: none; } /* a static skeleton */ } /* "Check rating": a measured figure the machine's rating can't explain (kapdaa.efficiency) */ .kap-rating-check { color: var(--kui-warn); font-weight: 600; font-size: .8em; white-space: nowrap; } /* ---- Steps (D-67): where a record is in its process. Done in the information green, the step in hand bold with its bar filling, to come grey.
  1. …
  2. …
  3. …
*/ .kui-stepsbox { min-width: 0; } .kui-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; font-size: var(--kui-fs-sm, 12px); color: var(--kui-text-soft); } .kui-steps > li { display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow-wrap: anywhere; } .kui-steps > li::before { content: ""; height: 6px; border-radius: 3px; background: var(--kui-line); } .kui-steps > li.is-done { color: var(--kui-viz-text); } .kui-steps > li.is-done::before { background: var(--kui-viz); } .kui-steps > li.is-now { color: var(--kui-ink); font-weight: 600; } /* the step in hand: half filled (told apart from a done step by more than its words), filling once (docs/23 §2b motion) */ .kui-steps > li.is-now::before { background: linear-gradient(90deg, var(--kui-viz) 0 50%, var(--kui-viz-soft) 50%); transform-origin: left center; animation: kui-fill var(--kui-t-fill) var(--kui-ease-out) 1 both; } /* passed without its own record: a dashed bar, told apart from a step to come (flat grey) at every width */ .kui-steps > li.is-skipped::before { background: repeating-linear-gradient(90deg, var(--kui-line-strong) 0 6px, transparent 6px 10px); } .kui-steps__b { display: grid; gap: 2px; width: 100%; min-height: var(--kui-target); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; } .kui-steps__b > b { font-weight: 600; font-size: var(--kui-fs-base); color: var(--kui-ink); } .kui-steps > li:not(.is-done):not(.is-now) .kui-steps__b > b { color: var(--kui-text-soft); font-weight: 500; } .kui-steps__b > span { font-size: var(--kui-fs-md); } button.kui-steps__b { cursor: pointer; border-radius: var(--kui-r-sm); } button.kui-steps__b:focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; } .kui-steps__go { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; color: var(--kui-ink); } @media (hover: hover) { button.kui-steps__b:hover .kui-steps__go { text-decoration: underline; text-underline-offset: 3px; } } .kui-steps__phone { display: none; margin: var(--kui-s2) 0 0; font-size: var(--kui-fs-md); color: var(--kui-text); } .kui-steps__phone b { color: var(--kui-ink); } /* a phone shows the bars, and the step in hand on its own line under them (nothing clipped, whatever the step count) */ @media (max-width: 640px) { .kui-steps > li { font-size: 0; } div.kui-steps__b { min-height: 0; } /* a step that opens its record keeps a target's height, laid over its bar, so it opens no gap above the line under */ .kui-steps > li { position: relative; } button.kui-steps__b { position: absolute; inset: calc((6px - var(--kui-target)) / 2) 0 auto; min-height: var(--kui-target); } .kui-steps__b > :is(b, span) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .kui-steps__phone { display: block; } } .kui-steps--compact { gap: 4px; } .kui-steps--compact > li::before { height: 5px; } .kui-steps.is-warn > li.is-now::before { background: var(--kui-warn); animation: none; } /* ---- Glance (docs/23 §2a; figures §2b, D-82): one strip of equal cells, each figure read before its label: the kind's symbol, the label, the figure with its unit or noun a step smaller, a bar against plan or capacity and what it is against, the change on yesterday, then context. Every cell's parts start at the top, so the figures of a row share one line; neutral ink, amber or red only with its word. */ .kui-glance { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); background: var(--kui-panel); border: 1px solid var(--kui-panel-edge, var(--kui-line)); box-shadow: var(--kui-panel-e, none); border-radius: 12px; overflow: hidden; margin-bottom: var(--kui-s4); } .kui-glance__c { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--kui-s1); padding: var(--kui-s4) 20px; min-width: 0; color: inherit; } .kui-glance__c + .kui-glance__c { border-left: 1px solid var(--kui-line); } a.kui-glance__c:hover { background: var(--kui-panel-2); text-decoration: none; color: inherit; } a.kui-glance__c:focus-visible { outline: 2px solid var(--kui-focus); outline-offset: -2px; } .kui-glance__h { display: flex; align-items: center; gap: var(--kui-s2); min-width: 0; font-size: var(--kui-fs-md); color: var(--kui-text-soft); } .kui-glance__k { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--kui-r-sm); background: var(--kui-panel-2); color: var(--kui-ink); } .kui-glance__l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kui-glance__c b { font: 600 var(--kui-fs-2xl)/1.15 "Bricolage Grotesque", Inter, system-ui, sans-serif; color: var(--kui-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .kui-glance__c b small { font: 500 var(--kui-fs-lg) Inter, system-ui, sans-serif; color: var(--kui-text-soft); } .kui-glance__e { font: 600 var(--kui-fs-lg)/1.3 Inter, system-ui, sans-serif; color: var(--kui-text); min-height: 30px; } .kui-glance__n { display: inline-flex; align-items: center; gap: 2px; font-size: var(--kui-fs-md); font-weight: 600; color: var(--kui-ink); } a.kui-glance__c:hover .kui-glance__n { text-decoration: underline; text-underline-offset: 3px; } .kui-glance__bar { display: block; height: 4px; margin-top: 2px; border-radius: 2px; background: var(--kui-line); overflow: hidden; } .kui-glance__bar > i { display: block; height: 100%; border-radius: inherit; background: var(--kui-viz); } .kui-glance__r, .kui-glance__s { font-size: var(--kui-fs-sm); color: var(--kui-text-soft); } .kui-glance__o { font-size: var(--kui-fs-sm); color: var(--kui-text); } /* the oldest item, the one to do first */ /* one encoding per fact (design plan §2b, D-83 fix round): only the word carries the state; the figure and its bar stay ink and information green, so a figure past a limit is one red (or amber) element, as the lead's timer is */ .kui-glance__c.is-warn .is-word { color: var(--kui-warn-text); } .kui-glance__c.is-alert .is-word { color: var(--kui-alert-text); } .kui-glance__c .is-word { font-weight: 600; } .kui-glance__c.is-warn .kui-glance__e { color: var(--kui-warn-text); } /* a gap to close is never read as the all-clear */ /* an older cell (label · figure · line, no kind yet): Storage, Reception, Capacity Planner until they move to the rules */ .kui-glance__c > :where(span:not([class])) { font-size: var(--kui-fs-sm, 12px); color: var(--kui-text-soft); } .kui-glance__c > :where(span:not([class]):first-child) { font-size: var(--kui-fs-md, 13px); } .kui-glance__c:not(:has(.kui-glance__h)) b small { font-size: var(--kui-fs-md, 13px); } @media (max-width: 820px) { .kui-glance { grid-template-columns: 1fr 1fr; } .kui-glance__c { padding: 10px 12px; } .kui-glance__c:nth-child(odd) { border-left: 0; } .kui-glance__c:nth-child(n + 3) { border-top: 1px solid var(--kui-line); } } /* ---- Work list (a station's rows): kind · who (loud) with its reference quiet · where it is · one action. Full-width rows on one grid, so every edge lines up from the first row to the last. */ .kui-wl { margin-bottom: var(--kui-s4); } .kui-wl__h { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--kui-s2); font: 600 var(--kui-fs-lg) "Bricolage Grotesque", Inter, system-ui, sans-serif; color: var(--kui-ink); } .kui-wl__h b { font: 600 var(--kui-fs-md) Inter, system-ui, sans-serif; color: var(--kui-text-soft); } .kui-wl > ul { list-style: none; margin: 0; padding: 0; background: var(--kui-panel); border: 1px solid var(--kui-panel-edge, var(--kui-line)); box-shadow: var(--kui-panel-e, none); border-radius: 12px; } .kui-wl__row { display: grid; grid-template-columns: 96px minmax(0, 1.2fr) minmax(0, 1.4fr) 184px; align-items: center; gap: var(--kui-s4); padding: 12px var(--kui-s4); } .kui-wl__row + .kui-wl__row { border-top: 1px solid var(--kui-line); } .kui-wl__kind { justify-self: start; padding: 2px 9px; border-radius: 999px; font-size: var(--kui-fs-sm, 12px); font-weight: 600; background: var(--kui-accent-soft); color: var(--kui-text); } .kui-wl__who { display: flex; flex-direction: column; min-width: 0; } .kui-wl__who b { font-weight: 600; color: var(--kui-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kui-wl__who > span { font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--kui-text-soft); } .kui-plate { padding: 0 5px; border: 1px solid var(--kui-line-strong); border-radius: 4px; color: var(--kui-ink); font: var(--kui-fs-sm) var(--kui-mono); } /* one plate chip everywhere: tiles, rows and a record's identity */ .kui-wl__where { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .kui-wl__note { font-size: var(--kui-fs-md, 13px); color: var(--kui-text); } .kui-wl__note.is-warn { color: var(--kui-warn); font-weight: 600; } .kui-wl__row > .kui-btn { width: 100%; min-height: 44px; justify-content: center; } /* a station's touch target */ .kui-wl__empty { margin: 0; padding: var(--kui-s4); background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: 12px; color: var(--kui-text-soft); } .kui-wl--foot { display: flex; align-items: center; justify-content: space-between; gap: var(--kui-s3); padding: 12px var(--kui-s4); background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: 12px; font-weight: 600; color: var(--kui-ink); } @media (max-width: 820px) { .kui-wl__row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "kind who" "where where" "act act"; gap: 8px 12px; } .kui-wl__row > .kui-wl__kind { grid-area: kind; } .kui-wl__row > .kui-wl__who { grid-area: who; } .kui-wl__row > .kui-wl__where { grid-area: where; } .kui-wl__row > .kui-btn, .kui-wl__row > span:last-child:empty { grid-area: act; } } /* ---- Toolbar (docs/23 §2b), under the header of a list or board: quick filters · More filters · Sort · the applied filters with Clear all · the result count on the right. On a phone one "Filters (n)" button opens them as a sheet. Chip borders are the control edge (--kui-line-ctl, ≥ 3:1, WCAG 1.4.11): a chip must read as a control. */ .kui-tb { display: flex; align-items: center; gap: var(--kui-s2) var(--kui-s4); flex-wrap: wrap; margin: 0 0 var(--kui-s4); } .kui-tb__quick, .kui-tb__set { display: flex; align-items: center; gap: var(--kui-s2); flex-wrap: wrap; min-width: 0; } .kui-tb__chip, .kui-tb__more, .kui-tb__applied, .kui-tb__clear, .kui-tb__phone, .kui-tb__sort select { display: inline-flex; align-items: center; gap: 6px; min-height: var(--kui-ctl); padding: 0 var(--kui-s3); border-radius: var(--kui-r-pill); font: inherit; font-size: var(--kui-fs-md); font-weight: 500; color: var(--kui-text); background: var(--kui-panel); border: 1px solid var(--kui-line-ctl); cursor: pointer; white-space: nowrap; transition: background var(--kui-t-fast) var(--kui-ease), border-color var(--kui-t-fast) var(--kui-ease); } /* a station's chips at its buttons' height (--kui-control-h: 44 px), not its 56 px primary */ .kui-density-station :is(.kui-tb__chip, .kui-tb__more, .kui-tb__applied, .kui-tb__clear, .kui-tb__phone, .kui-tb__sort select) { min-height: var(--kui-control-h); } .kui-tb__sort { display: inline-flex; align-items: center; gap: var(--kui-s2); font-size: var(--kui-fs-md); color: var(--kui-text-soft); } .kui-tb__sort select { border-radius: var(--kui-r); padding-right: var(--kui-s2); } /* a chosen filter: the selected fill and an ink border, never the primary's ink fill */ .kui-tb__chip.is-on { background: var(--kui-accent-soft); color: var(--kui-ink); border-color: var(--kui-ink); font-weight: 600; } .kui-tb__applied { background: var(--kui-accent-soft); color: var(--kui-ink); } .kui-tb__clear { border-color: transparent; background: transparent; color: var(--kui-text-soft); text-decoration: underline; } .kui-tb__phone { display: none; } .kui-tb__count { margin-left: auto; font-size: var(--kui-fs-md); color: var(--kui-text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .kui-tb :is(button, select):focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; } @media (hover: hover) { .kui-tb__chip:hover, .kui-tb__more:hover, .kui-tb__applied:hover, .kui-tb__phone:hover { border-color: var(--kui-ink); } } @media (max-width: 640px) { .kui-tb__quick, .kui-tb__set { display: none; } .kui-tb__phone { display: inline-flex; } } /* the same fold wherever the toolbar is too narrow for its chips (a tablet beside the sidebar), so nothing wraps */ .kui-tb { container: kui-tb / inline-size; } @container kui-tb (max-width: 720px) { .kui-tb__quick, .kui-tb__set { display: none; } .kui-tb__phone { display: inline-flex; } } /* the filter sheet: frappe.ui.Dialog docked to the right edge; on a phone, a bottom sheet the width of the screen */ .modal.kui-sheet .modal-dialog { margin: 0 0 0 auto; height: 100%; width: 420px; max-width: 100%; } .modal.kui-sheet .modal-content { height: 100%; border-radius: 0; border: 0; border-left: 1px solid var(--kui-line); } .modal.kui-sheet .modal-body { overflow-y: auto; display: grid; gap: var(--kui-s4); align-content: start; } .modal.kui-sheet .modal-body :is(.frappe-control, .form-group) { margin: 0; } .modal.kui-sheet .modal-footer .btn { height: auto; min-height: var(--kui-target-touch); padding-inline: var(--kui-s4); } @media (max-width: 640px) { .modal.kui-sheet .modal-dialog { display: flex; align-items: flex-end; width: 100%; margin: 0; } .modal.kui-sheet .modal-content { height: auto; max-height: 90vh; border-left: 0; border-radius: var(--kui-r-lg) var(--kui-r-lg) 0 0; } } /* ---- Rows (docs/23 §2b): one grid per list (--kui-rcols, set by kapdaa.ui.rowList) so every row lines up; the row's height follows the page's density. The row's link stretches over the whole row; the action sits above it. */ .kui-rows { list-style: none; margin: 0 0 var(--kui-s4); padding: 0; background: var(--kui-panel); border: 1px solid var(--kui-panel-edge, var(--kui-line)); box-shadow: var(--kui-panel-e, none); border-radius: var(--kui-r-lg); overflow: hidden; container: kui-rows / inline-size; } .kui-r { position: relative; display: grid; grid-template-columns: var(--kui-rcols); align-items: center; gap: var(--kui-s4); min-height: var(--kui-row-list); padding: var(--kui-s3) var(--kui-s4); transition: background var(--kui-t-fast) var(--kui-ease); } .kui-r + .kui-r { border-top: 1px solid var(--kui-line); } .kui-rows--empty > :is(.kap-state, .kui-empty) { padding: var(--kui-s5) var(--kui-s4); } @media (hover: hover) { .kui-r:not(:has(.kui-r__open.is-static)):hover { background: var(--kui-accent-soft); } } /* a visible tint, only where a pointer hovers and the row opens */ .kui-r:has(.kui-r__open:focus-visible) { outline: 2px solid var(--kui-focus); outline-offset: -2px; } .kui-r__open { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; text-decoration: none; } .kui-r__open:hover, .kui-r__open:focus { text-decoration: none; color: inherit; } .kui-r__open:focus-visible { outline: none; } .kui-r__open::after { content: ""; position: absolute; inset: 0; } /* the whole row opens the record */ .kui-r__ic { display: inline-flex; color: var(--kui-text-soft); } .kui-r__id { min-width: 0; overflow: clip; overflow-clip-margin: 4px; } /* nothing in the cell spills into the next */ /* a name is real-world data (a visitor and their reason, a council's full name): it wraps between words, never clipped */ .kui-r__client { max-width: 100%; white-space: normal; overflow-wrap: break-word; font-size: var(--kui-fs-base); font-weight: 600; color: var(--kui-ink); } /* the ID and the plate each stay whole (never cut, never broken): the plate drops under the ID when the column is narrow */ .kui-r__ref { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--kui-s2); max-width: 100%; font: var(--kui-fs-sm) var(--kui-mono); color: var(--kui-text-soft); } .kui-r__ref > *, .kui-plate, .kui-tile__ref { white-space: nowrap; } /* an ID is never cut or broken (owner rule): it wraps only as a whole token onto its own line under the name, and on a narrow list it steps down the type scale rather than end in an ellipsis */ .kui-r__ref > span:not(.kui-plate) { min-width: 0; } @container kui-rows (max-width: 480px) { .kui-r__ref { font-size: var(--kui-fs-xs); } } .kui-tile__l .kui-plate { margin-inline-end: var(--kui-s1); } .kui-r__st { display: flex; flex-direction: column; align-items: flex-start; gap: var(--kui-s1); min-width: 0; } .kui-r__chips { display: flex; gap: var(--kui-s1); min-width: 0; } .kui-r__chips .kui-badge { white-space: normal; max-width: 100%; } /* a long state wraps in its column, never into the next */ /* the line under the chip: two lines before it is cut, so a step's words are read whole in a narrow status column */ .kui-r__note { max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--kui-fs-md); color: var(--kui-text); } .kui-r__fig { text-align: right; font-size: var(--kui-fs-base); font-weight: 600; color: var(--kui-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .kui-r__fig small { font-size: var(--kui-fs-base); font-weight: 500; color: var(--kui-text-soft); } .kui-r__tm { font-size: var(--kui-fs-md); color: var(--kui-text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .kui-r__tm b { font-weight: 600; color: var(--kui-text); } /* the action cell fills its column and lies over the row's link; only its button takes the pointer */ .kui-r__act { position: relative; z-index: 1; display: flex; justify-content: flex-end; pointer-events: none; } .kui-r__act > .kui-btn { pointer-events: auto; min-height: var(--kui-ctl); width: 100%; } .kui-r__go { display: inline-flex; align-items: center; justify-content: center; width: 44px; color: var(--kui-text-soft); } /* narrow (a phone, a tablet with its sidebar open, a side panel): identity and the action, then the chip and its line, then the figure and the time. By the list's own width, not the window's. */ @container kui-rows (max-width: 880px) { .kui-r { grid-template-columns: minmax(0, 1fr) max(112px, var(--kui-ract-own, var(--kui-ract, 44px))); grid-template-areas: "id act" "st st" "fig tm"; gap: var(--kui-s1) var(--kui-s3); } /* the client is the loudest identity: two lines before it is cut */ .kui-r__client { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere; } .kui-rows--icon .kui-r { grid-template-columns: 24px minmax(0, 1fr) max(112px, var(--kui-ract-own, var(--kui-ract, 44px))); grid-template-areas: "ic id act" "ic st st" "ic fig tm"; } .kui-r__ic { grid-area: ic; align-self: start; } .kui-r__id { grid-area: id; } .kui-r__st { grid-area: st; } .kui-r__fig { grid-area: fig; text-align: left; } .kui-r__tm { grid-area: tm; } .kui-r__act { grid-area: act; } } /* ---- Tiles (docs/23 §2b), a bay or dock: title and status chip, two lines, one action at the bottom. They fill the row at 260 px or more each and share one height; on a phone they become one grouped list. */ .kui-tiles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-auto-rows: 1fr; gap: var(--kui-s4); margin: 0 0 var(--kui-s4); } .kui-tile { display: flex; flex-direction: column; gap: var(--kui-s1); min-width: 0; padding: var(--kui-s4); background: var(--kui-panel); border: 1px solid var(--kui-panel-edge, var(--kui-line)); box-shadow: var(--kui-panel-e, none); border-radius: var(--kui-r-lg); } .kui-tile__head { display: flex; align-items: center; justify-content: space-between; gap: var(--kui-s2); min-width: 0; margin-bottom: var(--kui-s1); } .kui-tile__t { flex: none; white-space: nowrap; font-size: var(--kui-fs-lg); font-weight: 600; color: var(--kui-ink); } .kui-tile__head > .kui-badge { min-width: 0; white-space: normal; } /* a long state wraps its own words, never the bay's name */ .kui-tile__l { min-height: 1.5em; overflow-wrap: anywhere; font-size: var(--kui-fs-md); color: var(--kui-text); } .kui-tile__l + .kui-tile__l { color: var(--kui-text-soft); } .kui-tile__act { margin-top: auto; padding-top: var(--kui-s3); } .kui-tile__act .kui-btn { min-height: var(--kui-ctl); } @media (max-width: 640px) { .kui-tiles { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 0; background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); overflow: hidden; } .kui-tile { border: 0; border-radius: 0; padding: var(--kui-s3) var(--kui-s4); } .kui-tile + .kui-tile { border-top: 1px solid var(--kui-line); } } /* four tiles: two by two until all four fit on one row (4 × 260 + 3 gaps), never three and one alone */ .kui-tilebox { container: kui-tiles / inline-size; } @media (min-width: 641px) { @container kui-tiles (max-width: 1087px) { .kui-tiles[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* six (a gate's checks): three by two until all six fit (6 × 260 + 5 gaps), two by three below three a row */ @container kui-tiles (max-width: 1639px) { .kui-tiles[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container kui-tiles (max-width: 811px) { .kui-tiles[data-n="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } } /* a tile that opens its record: the title is the link, stretched over the tile; the action sits above it */ .kui-tile--open { position: relative; transition: background var(--kui-t-fast) var(--kui-ease); } @media (hover: hover) { .kui-tile--open:hover { background: var(--kui-panel-2); } } .kui-tile__open { color: var(--kui-ink); text-decoration: none; } .kui-tile__open:hover, .kui-tile__open:focus { color: var(--kui-ink); text-decoration: none; } .kui-tile__open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .kui-tile__open:focus-visible { outline: none; } .kui-tile--open:has(.kui-tile__open:focus-visible) { outline: 2px solid var(--kui-focus); outline-offset: 2px; } .kui-tile--open .kui-tile__act { position: relative; z-index: 1; } .kui-tile__ref { font: var(--kui-fs-md) var(--kui-mono); color: var(--kui-ink); } .kui-tile__flag { display: flex; } /* ---- The record ID under a record's identity (pageHeader `id`): mono 13, never cut */ .kui-pageheader .kui-ph-id { margin-top: 2px; overflow-wrap: anywhere; font: var(--kui-fs-md) var(--kui-mono); color: var(--kui-text-soft); } /* ---- Forms on a station (kapdaa.ui.field / choiceField / stepper / facts / saveState / toast) ------------------- */ .kui-field { display: grid; gap: var(--kui-s2); min-width: 0; } .kui-field__l { margin: 0; font-weight: 600; font-size: var(--kui-fs-base); color: var(--kui-ink); } .kui-field__hint { margin-left: 6px; font-weight: 400; font-size: var(--kui-fs-md); color: var(--kui-text-soft); } .kui-field__hint.is-warn { color: var(--kui-warn-text); font-weight: 600; } @media (max-width: 700px) { .kap-step.current .kap-step-l { display: inline; } } /* a phone keeps the step in hand named */ .kui-field .kui-scan__why { position: static; display: block; margin-top: var(--kui-s1); } /* in a form the reason flows */ .kui-input { width: 100%; min-height: var(--kui-ctl); padding: var(--kui-s2) var(--kui-s3); border: 1px solid var(--kui-line-ctl); border-radius: var(--kui-r); background: var(--kui-panel); color: var(--kui-text); font: inherit; font-size: var(--kui-fs-base); } textarea.kui-input { resize: vertical; } /* the removal sheet and Arrival QC (kapdaa.removalDialog / arrivalQC): a strip of photos, the camera tile first; the entries */ .kui-photos { display: flex; gap: var(--kui-s2); overflow-x: auto; padding-bottom: 2px; } .kui-photo { flex: none; width: 112px; height: 96px; border-radius: var(--kui-r); overflow: hidden; background: var(--kui-panel-2); } .kui-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .kui-photo--add { display: grid; place-content: center; justify-items: center; gap: var(--kui-s1); border: 1.5px dashed var(--kui-line-strong); color: var(--kui-ink); font: inherit; font-weight: 600; cursor: pointer; } .kui-photo--add:focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; } .kui-rm { display: grid; gap: var(--kui-s3); } .kui-rm-lead { color: var(--kui-text-2); margin: 0 0 var(--kui-s3); } .kui-rm-list { list-style: none; margin: 0; padding: 0; } .kui-rm-entry { display: flex; align-items: center; gap: var(--kui-s2); padding: var(--kui-s2) 0; border-top: 1px solid var(--kui-line); } .kui-rm-entry > span { flex: 1; display: grid; } .kui-rm-entry > span > span { color: var(--kui-text-2); font-size: var(--kui-fs-sm); } .kui-rm-entry.is-voided { opacity: .6; } .kui-input:focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; } /* a choice: equal cells in one row; the chosen in the selection green (D-67); on a phone one option per line */ .kui-choice { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--kui-s1); padding: var(--kui-s1); background: var(--kui-panel-2); border: 1px solid var(--kui-line-ctl); border-radius: var(--kui-r); } .kui-choice__o { display: grid; gap: 2px; align-content: center; min-height: var(--kui-ctl); padding: var(--kui-s1) var(--kui-s3); border: 2px solid transparent; border-radius: var(--kui-r-sm); background: none; color: var(--kui-text); font: inherit; font-size: var(--kui-fs-base); font-weight: 500; text-align: center; cursor: pointer; transition: background var(--kui-t-fast) var(--kui-ease); } .kui-choice__o > span { font-size: var(--kui-fs-sm); font-weight: 400; color: var(--kui-text-soft); } @media (hover: hover) { .kui-choice__o:hover { background: var(--kui-panel); } } .kui-choice__o[aria-checked="true"] { background: var(--kui-viz-tint); border-color: var(--kui-viz); color: var(--kui-viz-text); font-weight: 600; } .kui-choice__o:focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; } @media (max-width: 640px) { .kui-choice { grid-template-columns: minmax(0, 1fr); } .kui-choice__o { text-align: left; } } /* stacked at every width: a list of reasons reads down, one per line, never squeezed into a row */ .kui-choice--stack { grid-template-columns: minmax(0, 1fr); } .kui-choice--stack .kui-choice__o { text-align: left; } /* a count: − n + at the density's control size */ .kui-stepper { display: inline-grid; grid-template-columns: var(--kui-ctl) minmax(64px, 1fr) var(--kui-ctl); align-items: center; width: min(100%, 280px); padding: var(--kui-s1); background: var(--kui-panel-2); border: 1px solid var(--kui-line-ctl); border-radius: var(--kui-r); } .kui-stepper button { height: var(--kui-ctl); border: 0; border-radius: var(--kui-r-sm); background: none; color: var(--kui-ink); cursor: pointer; } @media (hover: hover) { .kui-stepper button:hover { background: var(--kui-panel); } } .kui-stepper input { min-width: 0; height: var(--kui-ctl); border: 0; background: none; text-align: center; color: var(--kui-ink); font: 600 var(--kui-fs-xl) var(--kui-font); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; } .kui-stepper input::placeholder { font-size: var(--kui-fs-md); font-weight: 400; color: var(--kui-text-soft); } .kui-stepper input::-webkit-inner-spin-button, .kui-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .kui-stepper :is(button, input):focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 1px; } /* facts: a read-only record, label · value */ .kui-facts { display: grid; margin: 0; } .kui-facts__r { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(0, 3fr); gap: var(--kui-s3); padding: var(--kui-s3) 0; } .kui-facts__r + .kui-facts__r { border-top: 1px solid var(--kui-line); } .kui-facts dt { font-weight: 400; font-size: var(--kui-fs-md); color: var(--kui-text-soft); } .kui-facts dd { margin: 0; font-size: var(--kui-fs-base); color: var(--kui-ink); overflow-wrap: anywhere; } .kui-facts .kui-field__hint { margin-left: 0; display: block; } /* save as you go */ .kui-save { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kui-fs-md); color: var(--kui-text-soft); white-space: nowrap; } .kui-save.is-ok svg { color: var(--kui-viz-text); } .kui-save.is-warn { color: var(--kui-warn-text); font-weight: 600; } /* the toast: what just happened, with Undo */ .kui-toast { position: fixed; left: 50%; bottom: var(--kui-s6); transform: translateX(-50%); z-index: 1060; display: flex; align-items: center; gap: var(--kui-s3); max-width: calc(100vw - 32px); padding: var(--kui-s2) var(--kui-s2) var(--kui-s2) var(--kui-s4); border-radius: var(--kui-r); background: var(--kui-ink); color: var(--kui-panel); box-shadow: var(--kui-e3); font-size: var(--kui-fs-base); --kui-enter-x: -50%; animation: kui-enter var(--kui-t) var(--kui-ease-out) 1; } .kui-toast[hidden] { display: none; } .kui-toast.is-error { background: var(--kui-alert-tint); color: var(--kui-alert-text); border: 1px solid var(--kui-alert); } .kui-toast .kui-btn { min-height: var(--kui-target-touch); } /* ---- Page width: none here. Every page follows Toggle Full Width the same way (kui-shell.css §5): full width by default, one cap (--kui-page-w) when it is off; a page mode never lifts or narrows it, so headers sit at one place. */ /* ---- Station parts (kapdaa.ui.banner / panels / figure / bar / scanResult / rowGroup), docs/23 §2b -------------- */ /* a banner across a region: the page's state or something to pass on; a tint with its -text words, never a block */ .kui-banner { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: var(--kui-s3); margin: 0 0 var(--kui-s4); padding: var(--kui-s3) var(--kui-s4); border-radius: var(--kui-r-lg); font-size: var(--kui-fs-base); background: var(--kui-panel-2); color: var(--kui-text); border: 1px solid var(--kui-line); } .kui-banner > svg { flex: none; } .kui-banner b { font-weight: 600; } .kui-banner--warn { background: var(--kui-warn-tint); color: var(--kui-warn-text); border-color: transparent; } .kui-banner--alert { background: var(--kui-alert-tint); color: var(--kui-alert-text); border-color: transparent; } .kui-banner--good { background: var(--kui-good-tint); color: var(--kui-good-text); border-color: transparent; } .kui-banner--info { background: var(--kui-info-tint); color: var(--kui-info-text); border-color: transparent; } .kui-banner__a { display: flex; gap: var(--kui-s2); } .kui-banner__a .kui-btn { min-height: var(--kui-ctl); } .kui-banner:empty { display: none; } @media (max-width: 640px) { .kui-banner { grid-template-columns: 20px minmax(0, 1fr); } .kui-banner__a { grid-column: 1 / -1; } .kui-banner__a .kui-btn { flex: 1; } } /* panels side by side share one height; one column on a phone */ .kui-panels { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: var(--kui-s4); align-items: stretch; margin: 0 0 var(--kui-s4); } .kui-panels > .kui-card { display: flex; flex-direction: column; gap: var(--kui-s2); min-width: 0; } .kui-panels > .kui-card > .kui-card__head { margin-bottom: 0; } @media (max-width: 640px) { .kui-panels { grid-template-columns: minmax(0, 1fr); } } /* the figure a panel is about: the hero size, tabular, its unit soft */ .kui-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--kui-s2); min-width: 0; } .kui-figure b { font: 600 var(--kui-fs-3xl)/1.1 var(--kui-display); color: var(--kui-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .kui-figure small { font-size: var(--kui-fs-lg); color: var(--kui-text-soft); } .kui-figure.is-muted b { color: var(--kui-text-soft); } .kui-figure.is-none b { font: 600 var(--kui-fs-xl)/1.4 var(--kui-font); } /* "Not recorded" in words, not a hero figure */ /* the bar: on screen at the foot of its region; one primary right (56 px on a station), its reason beneath; a secondary left */ .kui-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kui-s5); padding: var(--kui-s3) var(--kui-s4) calc(var(--kui-s3) + env(safe-area-inset-bottom, 0px)); background: var(--kui-panel); border-top: 1px solid var(--kui-line); } .kui-bar__sec, .kui-bar__prim { display: flex; gap: var(--kui-s2); align-items: center; min-width: 0; } .kui-bar__prim { margin-left: auto; } .kui-bar__sec:empty, .kui-bar__prim:empty { display: none; } .kui-bar .kui-btn { height: auto; min-height: var(--kui-ctl); } .kui-bar .kui-bar__prim .kui-btn { min-height: var(--kui-ctl); } /* the primary at the page's control height: 56 px on a station */ .kui-bar .kui-btn--primary { min-width: min(280px, 100%); } .kui-bar .kui-btnwhy { align-items: flex-end; text-align: right; } /* on a desk the reason sits inline, left of the primary, so the bar is one control high: the primary (56 px on a station) and 4 px above and below it, the bar's own breathing room; the reason on one line */ @media (min-width: 641px) { .kui-bar { align-items: center; padding-block: var(--kui-s1) calc(var(--kui-s1) + env(safe-area-inset-bottom, 0px)); } .kui-bar .kui-btnwhy { width: max-content; max-width: 100%; flex-direction: row-reverse; align-items: center; gap: var(--kui-s3); } .kui-bar .kui-btnwhy__r { white-space: nowrap; } .kui-bar .kui-btn--primary { flex: none; } } @media (max-width: 640px) { .kui-bar { flex-direction: column-reverse; align-items: stretch; gap: var(--kui-s2); padding-inline: var(--kui-s3); } .kui-bar__prim, .kui-bar__sec { margin: 0; } .kui-bar__prim > *, .kui-bar__prim .kui-btn, .kui-bar__sec > .kui-btn { flex: 1; width: 100%; } .kui-bar .kui-btnwhy { align-items: stretch; text-align: left; } } /* a scan: a match flashes the field, a miss shakes it and says why beneath (docs/23 §2b scanning) */ .kui-ph-search { position: relative; } .kap-search.is-hit { box-shadow: 0 0 0 3px var(--kui-viz-tint); border-color: var(--kui-viz); } .kap-search.is-miss { border-color: var(--kui-alert); animation: kui-shake 300ms var(--kui-ease) 1; } .kui-scan__why { display: flex; align-items: center; gap: var(--kui-s1); margin-top: var(--kui-s2); max-width: 100%; font-size: var(--kui-fs-md); font-weight: 600; color: var(--kui-alert-text); } .kui-scan__why::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--kui-alert-tint); color: var(--kui-alert-text); font-size: var(--kui-fs-sm); font-weight: 700; } .kui-scan__why:empty { display: none; } /* what a find returned when it was not one record: a pick list under the field (kapdaa.openFound) */ .kap-found { margin-top: var(--kui-s2); border: 1px solid var(--kui-line); border-radius: var(--kui-r); background: var(--kui-panel); overflow: hidden; } .kap-found__h { padding: var(--kui-s2) var(--kui-s3); font: 600 var(--kui-fs-md) var(--kui-font); color: var(--kui-text-soft); border-bottom: 1px solid var(--kui-line); } .kap-found__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--kui-s1) var(--kui-s3); padding: var(--kui-s3); min-height: 48px; color: var(--kui-text); text-decoration: none; border-bottom: 1px solid var(--kui-line); } .kap-found__row:last-child { border-bottom: 0; } .kap-found__row:hover, .kap-found__row:focus-visible { background: var(--kui-panel-2); } .kap-found__row b { color: var(--kui-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .kap-found__row span { color: var(--kui-text-soft); } .kap-found__lists { display: flex; flex-wrap: wrap; gap: var(--kui-s3); padding: var(--kui-s2) var(--kui-s3); } /* a titled group of rows on a station (rowGroup) */ .kui-rgroup__h { display: flex; align-items: baseline; gap: var(--kui-s2); margin: 0 0 var(--kui-s2); font: 600 var(--kui-fs-lg) var(--kui-display); color: var(--kui-ink); } .kui-rgroup__h > span:not(.kui-rgroup__t), .kui-rgroup__t > span { font: 600 var(--kui-fs-md) var(--kui-font); color: var(--kui-text-soft); font-variant-numeric: tabular-nums; } .kui-rgroup__sub { margin-left: auto; font: 500 var(--kui-fs-sm) var(--kui-font); color: var(--kui-text-soft); } /* a caption over the figure column: the heading on the rows' own grid (border and padding as a row's) */ .kui-rgroup--cols { container: kui-rgroup / inline-size; } .kui-rgroup--cols > .kui-rgroup__h { display: grid; grid-template-columns: var(--kui-rcols); column-gap: var(--kui-s4); padding-inline: calc(var(--kui-s4) + 1px); } .kui-rgroup--cols .kui-rgroup__t { grid-column: 1 / var(--kui-rfig); display: flex; align-items: baseline; gap: var(--kui-s2); min-width: 0; margin-inline-start: calc(-1 * var(--kui-s4) - 1px); } .kui-rgroup--cols .kui-rgroup__sub { grid-column: var(--kui-rfig); margin: 0; text-align: right; } @container kui-rgroup (max-width: 880px) { /* the rows stack: the caption goes back beside the title */ .kui-rgroup--cols > .kui-rgroup__h { display: flex; padding-inline: 0; } .kui-rgroup--cols .kui-rgroup__t { margin: 0; } .kui-rgroup--cols .kui-rgroup__sub { margin-left: auto; } } /* an empty group: one quiet line under its heading (what's fine), no box */ .kui-rgroup__none > :is(.kap-state, .kui-empty) { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: var(--kui-s2); padding: 0; min-height: 0; text-align: left; } .kui-rgroup__none :is(.kap-state__icon, .kui-empty__icon) { display: none; } .kui-rgroup__none :is(.kap-state__msg, .kui-empty__title) { flex: 1 1 auto; font-size: var(--kui-fs-md); font-weight: 400; color: var(--kui-text-soft); } /* the line spans the column */ .kui-rgroup > .kap-state { margin: 0 0 var(--kui-s4); } /* a confirm dialog whose primary is destructive: filled red, the one place red fills (frappe.ui.Dialog + this class) */ .kui-dialog--danger .btn-modal-primary, .kui-dialog--danger .btn-modal-primary:hover { background-color: var(--kui-alert) !important; border-color: var(--kui-alert) !important; color: var(--kui-panel) !important; } .kui-dialog--danger .btn-modal-primary:is(:disabled, [aria-disabled="true"]), .kui-sheet .btn-modal-primary[aria-disabled="true"] { background-color: var(--kui-panel-2) !important; border-color: transparent !important; color: var(--kui-text-soft) !important; opacity: 1; } /* a card's actions at its foot: in panels of one height they line up along the bottom (kapdaa.ui.card body) */ .kui-card__foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--kui-s2) var(--kui-s3); margin-top: auto; padding-top: var(--kui-s2); } /* ---- The gate's visual language (docs/23 §2b; Gate & Bays brief 2026-10-22): kind tiles, step pips, the wait timer, the site strip, bay tiles and parking slots, the phone tab bar, the live weight. Colour is the state only (D-67). */ .kui-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } :root { --kui-kind: 32px; } :is(.kui-density-station, .kui-density-gloved) { --kui-kind: 40px; } /* a kind tile: a vehicle a rounded square with what it carries, a person a circle with initials, staff a count */ .kui-kind { position: relative; flex: none; display: inline-grid; place-items: center; width: var(--kui-kind); height: var(--kui-kind); border-radius: var(--kui-r); background: var(--kui-neutral-tint); color: var(--kui-ink); font: 700 var(--kui-fs-sm)/1 var(--kui-font); letter-spacing: .02em; font-variant-numeric: tabular-nums; } .kui-kind > svg { width: 55%; height: 55%; } .kui-kind--person { border-radius: 50%; background: color-mix(in srgb, var(--kui-people) 14%, var(--kui-panel)); color: var(--kui-people); } .kui-kind--staff { border-radius: 50%; } .kui-kind.is-now { background: var(--kui-ink); color: var(--kui-panel); } /* one encoding per fact (design plan §2b, D-83): a kind tile says what the thing is, never its status. The timer or the one chip says the status; .is-warn / .is-alert / .is-good stay in the markup (the tile's accessible name says the state) but draw nothing. Only "in hand" (ink) and "your turn" (blue) tint a tile. */ .kui-kind.is-info { background: var(--kui-info-tint); color: var(--kui-info-text); } /* blue: your turn (owner 2026-10-22) */ /* the corner badge: which way material moves (into the site, or out of it) */ .kui-kind__dir { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--kui-ink); color: var(--kui-panel); box-shadow: 0 0 0 2px var(--kui-panel); } .kui-kind__dir svg { width: 14px; height: 14px; stroke-width: 2.5; } /* big enough to read which way it points */ /* step pips: done green, in hand half filled, to come grey */ .kui-pips { display: inline-flex; gap: 3px; width: 64px; flex: none; vertical-align: middle; } .kui-pips > i { flex: 1; height: 5px; border-radius: 3px; background: var(--kui-line-strong); } .kui-pips > i.is-done { background: var(--kui-viz); } .kui-pips > i.is-now { background: linear-gradient(90deg, var(--kui-viz) 50%, var(--kui-viz-soft) 50%); } .kui-r__pips { display: flex; align-items: center; min-width: 0; } /* the wait: neutral, amber from 75 % of its limit, red past it */ .kui-wait { display: inline-flex; align-items: center; gap: 5px; font-size: var(--kui-fs-md); color: var(--kui-text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .kui-wait > svg { flex: none; } .kui-wait.is-warn { color: var(--kui-warn-text); font-weight: 600; } .kui-wait.is-alert { color: var(--kui-alert-text); font-weight: 700; } /* narrow rows with pips: the pips beside the chip, under the action */ @container kui-rows (max-width: 880px) { .kui-rows--pips .kui-r { grid-template-areas: "id act" "st pips" "fig tm"; } .kui-rows--pips.kui-rows--icon .kui-r { grid-template-areas: "ic id act" "ic st pips" "ic fig tm"; } .kui-r__pips { grid-area: pips; justify-content: flex-end; } .kui-rows--icon .kui-r:has(.kui-kind) { grid-template-columns: var(--kui-kind) minmax(0, 1fr) max(112px, var(--kui-ract-own, var(--kui-ract, 44px))); } } /* a phone: every row the same anatomy. Left, who (one line, the ID and plate under it) then the chip and its line; right, the wait, the stops and the kg; the row's verb on a line of its own across the foot, only where it has one */ @container kui-rows (max-width: 599px) { /* one fixed right column, so every row's wait, stops and kg sit on the same edge, row after row */ .kui-rows--pips.kui-rows--icon .kui-r { grid-template-columns: var(--kui-kind) minmax(0, 1fr) 104px; grid-template-areas: "ic id tm" "ic st pips" "ic st fig" "act act act"; align-items: start; } .kui-rows--pips .kui-r__client { display: block; -webkit-line-clamp: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kui-rows--pips .kui-r__chips .kui-badge { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kui-rows--pips :is(.kui-r__tm, .kui-r__fig) { text-align: right; } .kui-rows--pips .kui-r__tm .kui-wait { justify-content: flex-end; width: 100%; } .kui-rows--pips .kui-r__pips { justify-content: flex-end; } /* no verb: the whole row opens it, so its foot line is empty (no chevron column) */ .kui-rows--pips .kui-r__act:not(:has(.kui-btn)) { height: 0; margin-top: calc(-1 * var(--kui-s1)); overflow: hidden; } .kui-rows--pips .kui-r__act > .kui-btn { width: 100%; } } /* the site strip: the places in order, one row that fits a 390 px phone */ .kui-strip { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: var(--kui-s1); margin: 0 0 var(--kui-s4); container: kui-strip / inline-size; } .kui-stn { display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; min-height: max(56px, var(--kui-target)); padding: var(--kui-s2) var(--kui-s1); border: 0; border-radius: var(--kui-r); background: var(--kui-panel); color: var(--kui-text-soft); font: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px var(--kui-line); transition: background var(--kui-t-fast) var(--kui-ease); } .kui-stn > b { font: 700 var(--kui-fs-lg)/1 var(--kui-display); color: var(--kui-ink); font-variant-numeric: tabular-nums; } .kui-stn > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--kui-fs-sm); } .kui-stn__s { display: none; } .kui-stn__x { margin-inline-start: .3em; font: 500 var(--kui-fs-sm) var(--kui-font); color: var(--kui-text-soft); white-space: nowrap; } .kui-stn.is-now { box-shadow: inset 0 0 0 2px var(--kui-ink); color: var(--kui-ink); } /* near or past a limit: the symbol, the count and an edge take the tone, the tile stays calm, so a bad shift still ranks its stations instead of reading as one alarm wall */ .kui-stn.is-warn { box-shadow: inset 0 -3px 0 var(--kui-warn); color: var(--kui-warn-text); } .kui-stn.is-alert { box-shadow: inset 0 -3px 0 var(--kui-alert); color: var(--kui-alert-text); } .kui-stn:is(.is-warn, .is-alert) > b { color: inherit; } @media (hover: hover) { .kui-stn:hover { background: var(--kui-panel-2); } } .kui-stn:focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; } @container kui-strip (max-width: 560px) { .kui-stn__l { display: none; } .kui-stn__s { display: block; font-size: var(--kui-fs-xs); } .kui-stn > b { font-size: var(--kui-fs-base); } } @container kui-strip (min-width: 900px) { .kui-stn > b { font-size: var(--kui-fs-xl); } } /* a bay tile: the state as its top edge, the plate, the kg on the bay, the time on it */ .kui-tile--edge { border-top: 4px solid var(--kui-line-strong); } .kui-tile--edge.is-now { border-top-color: var(--kui-ink); } .kui-tile--edge.is-warn { border-top-color: var(--kui-warn); } .kui-tile--edge.is-good { border-top-color: var(--kui-good); } .kui-tile--edge.is-alert { border-top-color: var(--kui-alert); } .kui-tile__plate { display: flex; } .kui-tile__since { display: flex; } .kui-meter { display: grid; gap: var(--kui-s1); margin-top: var(--kui-s1); } .kui-meter__bar { height: 6px; border-radius: 3px; background: var(--kui-line); overflow: hidden; } .kui-meter__bar > i { display: block; height: 100%; background: var(--kui-viz); } .kui-meter__l { display: flex; justify-content: space-between; gap: var(--kui-s2); font-size: var(--kui-fs-sm); color: var(--kui-text-soft); font-variant-numeric: tabular-nums; } .kui-meter__l > span:first-child { color: var(--kui-ink); font-weight: 600; } .kui-meter__l > .kui-meter__unset { font-style: italic; } /* no capacity recorded: said, so the gap shows */ /* bay tiles stay cards on a phone, two by two (a set of bays is read as a place, not a list) */ @media (max-width: 640px) { .kui-tiles:has(> .kui-tile--edge) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--kui-s2); background: none; border: 0; border-radius: 0; overflow: visible; } .kui-tiles > .kui-tile--edge { border: 1px solid var(--kui-line); border-top: 4px solid var(--kui-line-strong); border-radius: var(--kui-r-lg); padding: var(--kui-s3); } .kui-tiles > .kui-tile--edge.is-now { border-top-color: var(--kui-ink); } .kui-tiles > .kui-tile--edge.is-warn { border-top-color: var(--kui-warn); } .kui-tiles > .kui-tile--edge.is-good { border-top-color: var(--kui-good); } .kui-tiles > .kui-tile--edge.is-alert { border-top-color: var(--kui-alert); } } /* parking slots: a dashed outline, tinted by the wait */ .kui-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--kui-s2); margin: 0 0 var(--kui-s4); } .kui-slot { display: grid; gap: var(--kui-s1); align-content: start; min-width: 0; padding: var(--kui-s2) var(--kui-s3); border: 1.5px dashed var(--kui-line-strong); border-radius: var(--kui-r-lg); } .kui-slot > .kui-plate { justify-self: start; } .kui-slot__n { font-size: var(--kui-fs-sm); font-weight: 700; color: var(--kui-text-soft); } .kui-slot__free { font-size: var(--kui-fs-md); color: var(--kui-text-soft); } .kui-slot.is-warn { border-color: var(--kui-warn); background: var(--kui-warn-tint); } .kui-slot.is-alert { border-color: var(--kui-alert); background: var(--kui-alert-tint); } /* the phone tab bar: the page's views at the foot (icon over word, a badge count), above the safe area; wider, the same buttons stay the segmented control (their icons hidden) */ .kui-seg__i { display: none; } /* the circle grows with its number (18 px at 11 px; floor screens raise small text to 14 px, so 21 px there) */ .kui-seg__badge { display: inline-grid; place-items: center; min-width: calc(1em + 7px); height: calc(1em + 7px); padding: 0 calc(.25em + 2px); border-radius: var(--kui-r-pill); background: var(--kui-info); color: var(--kui-panel); font-size: var(--kui-fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; /* the digit centred on its own height, never on an inherited line box (it sat low under the page header) */ line-height: calc(1em + 7px); } /* a count of your turns: blue */ @media (max-width: 640px) { .kui-seg.kui-seg--tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1010; display: flex; width: auto; max-width: none; gap: 0; padding: var(--kui-s1) var(--kui-s1) calc(var(--kui-s1) + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid var(--kui-line); border-radius: 0; background: var(--kui-panel); overflow: visible; } .kui-seg--tabbar .kui-seg__b { position: relative; flex: 1 1 0; flex-direction: column; gap: 2px; min-height: 56px; padding: var(--kui-s1) 2px; border-radius: var(--kui-r-sm); background: none; box-shadow: none; color: var(--kui-text-soft); font-size: var(--kui-fs-xs); font-weight: 500; } .kui-seg--tabbar .kui-seg__b.is-on { background: none; box-shadow: none; color: var(--kui-ink); font-weight: 700; } .kui-seg--tabbar .kui-seg__i { display: inline-flex; } .kui-seg--tabbar .kui-seg__badge { position: absolute; top: 2px; left: calc(50% + 6px); } /* the page's own content and its pinned primary stay above the bar */ .page-container:has(.kui-seg--tabbar) { --kui-tabbar-h: calc(64px + env(safe-area-inset-bottom, 0px)); } .page-container:has(.kui-seg--tabbar) .page-body { padding-bottom: var(--kui-tabbar-h); } .page-container:has(.kui-seg--tabbar) :is(.kui-bar, .kui-sticky) { bottom: var(--kui-tabbar-h); } } /* the live weight: the reading huge, its state beside the kind and plate */ .kui-lw { display: grid; gap: var(--kui-s2); align-content: start; min-width: 0; padding: var(--kui-s4); background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); box-shadow: var(--kui-e2); } .kui-lw__top { display: flex; align-items: center; gap: var(--kui-s2); flex-wrap: wrap; } .kui-lw__kind { font-size: var(--kui-fs-md); font-weight: 600; color: var(--kui-text-soft); } .kui-lw__st { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: var(--kui-fs-md); font-weight: 600; color: var(--kui-text-soft); } .kui-lw__st > i { width: 8px; height: 8px; border-radius: 50%; background: var(--kui-line-strong); } .kui-lw.is-steady .kui-lw__st { color: var(--kui-good-text); } /* the steady dot rings once when the reading settles, then rests (live, design plan §6) */ .kui-lw.is-steady .kui-lw__st > i { background: var(--kui-good); box-shadow: 0 0 0 0 var(--kui-good); animation: kui-attention var(--kui-t-fill) var(--kui-ease-out) 1; } .kui-lw.is-down .kui-lw__st { color: var(--kui-alert-text); } .kui-lw.is-down .kui-lw__st > i { background: var(--kui-alert); } .kui-lw__who { display: flex; align-items: baseline; gap: var(--kui-s2); flex-wrap: wrap; min-width: 0; } .kui-lw__who > b { font-size: var(--kui-fs-lg); font-weight: 650; color: var(--kui-ink); overflow-wrap: anywhere; } .kui-lw__who > span { font: var(--kui-fs-md) var(--kui-mono); color: var(--kui-text-soft); } .kui-lw__sub { font-size: var(--kui-fs-md); color: var(--kui-text-soft); } .kui-lw__fig { display: flex; align-items: baseline; gap: var(--kui-s2); margin: var(--kui-s1) 0; } .kui-lw__fig > b { font: 750 min(calc(var(--kui-fs-3xl) + 3vw), var(--kui-wall-figure))/1 var(--kui-display); color: var(--kui-ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .kui-lw__fig > b.is-none { font: 600 var(--kui-fs-xl)/1.4 var(--kui-font); color: var(--kui-text-soft); } .kui-lw__fig > small { font-size: var(--kui-fs-xl); color: var(--kui-text-soft); } .kui-lw__down { margin: 0; font-size: var(--kui-fs-md); color: var(--kui-text-soft); } .kui-lw__act { display: grid; gap: var(--kui-s2); margin-top: auto; } .kui-lw__act .kui-btn { min-height: max(var(--kui-ctl), 48px); } @media (prefers-reduced-motion: reduce) { .kui-stn { transition: none; } } /* ---- Consolidated from the Gatehouse and Tipping Bays pages (2026-10-22) ---------------------------------------- */ /* a phone-only view (the tab bar's Scan): wider, the header's scan field does it */ @media (min-width: 641px) { .kui-seg__b--phone { display: none; } } /* the sheet's header status (Saved) beside its title */ .modal.kui-sheet .kui-sheet__status { margin: 0 var(--kui-s3) 0 auto; } .modal.kui-sheet .modal-header:has(.kui-sheet__status) .modal-title { flex: none; } /* icon choice tiles: the symbol over the word, one row at every width */ .kui-choice--icons { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); } .kui-choice--icons .kui-choice__o { justify-items: center; gap: var(--kui-s1); min-height: max(80px, var(--kui-ctl)); padding: var(--kui-s2) var(--kui-s1); text-align: center; } .kui-choice__ic { display: grid; place-items: center; color: var(--kui-text-soft); } .kui-choice__o[aria-checked="true"] > .kui-choice__ic { color: var(--kui-viz-text); } /* the steps as the page (steps({ vertical })): an inset list, a 32 px marker per step, the step's line, Open at the right */ .kui-steps__h { display: flex; justify-content: space-between; gap: var(--kui-s3); padding-bottom: var(--kui-s2); font-size: var(--kui-fs-md); font-weight: 600; color: var(--kui-text-soft); } .kui-steps--v { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; } .kui-steps--v > li { display: block; font-size: var(--kui-fs-base); border-top: 1px solid var(--kui-line); } .kui-steps--v > li::before { content: none; } .kui-steps--v .kui-steps__b { position: static; display: grid; grid-template-columns: 32px minmax(0, 1fr) 72px; column-gap: var(--kui-s3); align-items: center; min-height: var(--kui-ctl); padding: var(--kui-s2) 0; } .kui-steps--v .kui-steps__b > .kui-steps__n { grid-row: 1 / span 2; grid-column: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--kui-panel); box-shadow: inset 0 0 0 2px var(--kui-line-strong); color: var(--kui-text-soft); font: 700 var(--kui-fs-md)/1 var(--kui-font); font-variant-numeric: tabular-nums; } .kui-steps--v .kui-steps__n > svg { width: 18px; height: 18px; stroke-width: 3; } .kui-steps--v > li.is-done .kui-steps__n { background: var(--kui-viz); box-shadow: none; color: var(--kui-panel); } .kui-steps--v > li.is-now .kui-steps__n { box-shadow: inset 0 0 0 3px var(--kui-ink); color: var(--kui-ink); } .kui-steps--v > li.is-skipped .kui-steps__n { box-shadow: none; outline: 2px dashed var(--kui-line-strong); outline-offset: -2px; } .kui-steps--v .kui-steps__b > b { grid-column: 2; font-size: var(--kui-fs-base); } .kui-steps--v .kui-steps__b > span:not(.kui-steps__n):not(.kui-steps__go) { grid-column: 2; color: var(--kui-text-soft); font-size: var(--kui-fs-md); font-weight: 400; } .kui-steps--v > li.is-done .kui-steps__b > span:not(.kui-steps__n):not(.kui-steps__go) { color: var(--kui-viz-text); } .kui-steps--v .kui-steps__go { grid-column: 3; grid-row: 1 / span 2; display: flex; justify-content: flex-end; font-size: var(--kui-fs-md); } @media (max-width: 640px) { /* the list says every step: none of the bar's phone folding */ .kui-steps--v > li { position: static; font-size: var(--kui-fs-base); } .kui-steps--v .kui-steps__b > :is(b, span) { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; } .kui-steps--v button.kui-steps__b { position: static; inset: auto; } .kui-steps--v div.kui-steps__b { min-height: var(--kui-ctl); } } /* a tablet's rows (a list 600–880 px wide): two lines, the figures (kg, pips, wait) at the right of the identity and the status under it, never stacked four or five deep; a phone's narrower list still stacks. Fixed figure columns, so every row of a list shares one grid. */ @container kui-rows (min-width: 600px) and (max-width: 880px) { .kui-r, .kui-rows--pips .kui-r { grid-template-columns: minmax(0, 1fr) 88px 64px 96px var(--kui-ract-own, var(--kui-ract, 44px)); grid-template-areas: "id fig pips tm act" "st st st st act"; column-gap: var(--kui-s3); } .kui-rows--icon .kui-r, .kui-rows--pips.kui-rows--icon .kui-r { grid-template-columns: 24px minmax(0, 1fr) 88px 64px 96px var(--kui-ract-own, var(--kui-ract, 44px)); grid-template-areas: "ic id fig pips tm act" "ic st st st st act"; } .kui-rows--icon .kui-r:has(.kui-kind) { grid-template-columns: var(--kui-kind) minmax(0, 1fr) 88px 64px 96px var(--kui-ract-own, var(--kui-ract, 44px)); } .kui-r__client { display: block; -webkit-line-clamp: none; white-space: normal; overflow: visible; } .kui-r__fig { text-align: right; } .kui-r__act { align-self: center; } .kui-r__st { flex-direction: row; align-items: center; } .kui-r__chips { flex: none; } .kui-r__note { flex: 1 1 auto; min-width: 0; -webkit-line-clamp: 1; } } /* ---- Tipping Bays fix round 1 (2026-10-22) ------------------------------------------------------------------------ */ /* a thing, not a vehicle (a Lot, a bay or dock): an outlined square with its symbol; its tint is still the state's */ .kui-kind--thing { background: var(--kui-panel); box-shadow: inset 0 0 0 1.5px var(--kui-line-strong); color: var(--kui-text); } .kui-kind--thing:is(.is-now, .is-info) { box-shadow: none; } /* a station's controls reach its page's target (critique P1-3): the shells' own 44 px floors (kapdaa.css .kap-gate-page, the touch baselines) never hold a control under it. Gatehouse keeps the station's 44 px target; the bays set theirs to the station control (56 px, gloved hands), so every button, view switch and tab, step, choice and the scan field and its camera are at least that. The rows' and tiles' links stretch over the whole row or tile. */ .page-container:is(.kui-density-station, .kui-density-gloved) :is(.kui-btn, .kui-seg__b, .kui-steps__b, .kui-choice__o, .kap-search, .kap-search input, .kap-cam-btn) { min-height: var(--kui-target); } .page-container:is(.kui-density-station, .kui-density-gloved) .kap-cam-btn { min-width: var(--kui-target); } /* the same phone anatomy for a row with a kind tile and no pips (the bays' Lots, bays and collections): who on the left with the kg and the wait stacked at the right, then the chip and its line across the row (a chip stays on one line), the verb across the foot only where there is one; nothing floats to a corner (critique P2-4) */ @container kui-rows (max-width: 599px) { .kui-rows--icon:not(.kui-rows--pips) .kui-r:has(.kui-kind) { grid-template-columns: var(--kui-kind) minmax(0, 1fr) 112px; grid-template-areas: "ic id fig" "ic id tm" "ic st st"; align-items: start; } .kui-rows--icon:not(.kui-rows--pips) .kui-r:has(.kui-kind):has(.kui-r__act > .kui-btn) { grid-template-areas: "ic id fig" "ic id tm" "ic st st" "act act act"; } .kui-rows--icon:not(.kui-rows--pips) .kui-r:has(.kui-kind) .kui-r__client { display: block; -webkit-line-clamp: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kui-rows--icon:not(.kui-rows--pips) .kui-r:has(.kui-kind) .kui-r__chips .kui-badge { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kui-rows--icon:not(.kui-rows--pips) .kui-r:has(.kui-kind) :is(.kui-r__tm, .kui-r__fig) { justify-self: stretch; text-align: right; } .kui-rows--icon:not(.kui-rows--pips) .kui-r:has(.kui-kind) .kui-r__act:not(:has(.kui-btn)) { display: none; } .kui-rows--icon:not(.kui-rows--pips) .kui-r:has(.kui-kind) .kui-r__act > .kui-btn { width: 100%; } } /* ---- A row's subline in parts (kapdaa.ui.row note as a list, Gate & Bays polish 2026-10-22): each part whole or left out whole, at most two lines, so the last parts (the kg booked) give way first and a figure or a blocker is never cut. After the tablet rows' one-line clamp, which it replaces. */ .kui-r__note.kui-r__note--parts { display: block; -webkit-line-clamp: none; line-height: 1.45; max-height: calc(2 * 1.45em); overflow: hidden; white-space: normal; text-overflow: clip; } .kui-r__part { display: inline-block; max-width: 100%; vertical-align: top; } /* a phone row is a card whose subline shares a ~200 px column with the wait, stops and kg: there it shows every part (a clamp would cut a part that wraps within itself), so a blocker, an owner or a count is never lost */ @container kui-rows (width < 600px) { .kui-r__note.kui-r__note--parts { max-height: none; } } .kui-r__part:not(:last-child) { margin-inline-end: .3em; } /* the gap trails with its "·", so a wrapped line starts flush */ /* the separator ends the part before it, so a wrap never starts a line with "·" (step 4 review P1-2) */ .kui-r__part:not(:last-child)::after { content: "\00a0·"; } /* ---- Wave 1 (Inbox & Intake, 2026-10-22): needs and their sheet, tasks, people, the kiosk, the day's room. Colour is the state only (neutral normal, amber someone must act, red stopped or over a limit, green done). ----------------- */ /* a row's plain line under the name (a person's organisation) and a row done by someone, greyed */ .kui-r__sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--kui-fs-md); color: var(--kui-text-soft); } .kui-r.is-done .kui-r__client { color: var(--kui-text-soft); font-weight: 500; } /* a need's tile: the kind's symbol in a rounded square (the vehicle's shape without a way), tinted for whose move it is */ .kui-kind--need > svg { width: 55%; height: 55%; } /* a person waiting for reception: the people circle as at rest; the wait timer beside it says how long (one encoding) */ /* "and 12 more · open the list", under a need group's rows */ .kui-more { display: inline-flex; align-items: center; gap: var(--kui-s1); min-height: var(--kui-target); margin: calc(-1 * var(--kui-s2)) 0 var(--kui-s4); padding: 0 var(--kui-s1); border: 0; background: none; font: 600 var(--kui-fs-md) var(--kui-font); color: var(--kui-ink); cursor: pointer; text-decoration: none; } .kui-more:hover { color: var(--kui-ink); text-decoration: underline; text-underline-offset: 3px; } .kui-more:focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; border-radius: var(--kui-r-sm); } /* place chips: where from and where to, as large as the words beside them */ .kui-places { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--kui-s1) var(--kui-s2); min-width: 0; max-width: 100%; } .kui-place { display: inline-flex; align-items: center; gap: var(--kui-s1); padding: 1px var(--kui-s2); border: 1.5px solid var(--kui-ink); border-radius: var(--kui-r-sm); font-weight: 600; color: var(--kui-ink); white-space: nowrap; } .kui-place > svg { flex: none; color: var(--kui-text-soft); } .kui-places__to { display: inline-flex; color: var(--kui-text-soft); } .kui-places--lg { font-size: var(--kui-fs-xl); } .kui-places--lg .kui-place { padding: var(--kui-s1) var(--kui-s3); border-width: 2px; border-radius: var(--kui-r); } .kui-places--lg svg { width: 20px; height: 20px; } .kui-r__st .kui-places { font-size: var(--kui-fs-md); } /* the need sheet: the record at its top, what holds, what to decide, what acting does */ .kui-ns { display: grid; gap: var(--kui-s4); min-width: 0; } .kui-ns__head { display: flex; align-items: center; gap: var(--kui-s3); min-width: 0; } .kui-ns__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .kui-ns__id > b { font: 600 var(--kui-fs-lg)/1.3 var(--kui-font); color: var(--kui-ink); overflow-wrap: anywhere; } .kui-ns__ref { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--kui-s2); font: var(--kui-fs-sm) var(--kui-mono); color: var(--kui-text-soft); } .kui-ns__ref > * { white-space: nowrap; } .kui-ns__sub { font-size: var(--kui-fs-md); color: var(--kui-text-soft); } .kui-ns__wait { flex: none; align-self: flex-start; } .kui-ns__blocker { display: flex; align-items: flex-start; gap: var(--kui-s2); margin: 0; font-weight: 600; color: var(--kui-warn-text); } .kui-ns__blocker > svg { flex: none; margin-top: 1px; } .kui-ns__note { margin: 0; font-size: var(--kui-fs-md); color: var(--kui-text-soft); } .kui-ns__status { margin: 0; } .kui-ns__body { min-width: 0; } .kui-rs { display: grid; gap: var(--kui-s4); } .kui-rs__note { width: 100%; min-height: var(--kui-target-touch); resize: vertical; } /* a task: the next one as the page, and its stepped finish */ .kui-tc { display: grid; gap: var(--kui-s3); min-width: 0; padding: var(--kui-s4) var(--kui-s4) 0; background: var(--kui-panel); border: 1px solid var(--kui-panel-edge, var(--kui-line)); box-shadow: var(--kui-panel-e, none); border-radius: var(--kui-r-lg); overflow: clip; } .kui-tc__h { display: flex; align-items: center; justify-content: space-between; gap: var(--kui-s3); } .kui-tc__k { font-size: var(--kui-fs-md); font-weight: 600; color: var(--kui-text-soft); } .kui-tc__id { display: flex; align-items: center; gap: var(--kui-s3); min-width: 0; } .kui-tc__w { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .kui-tc__t { font: 600 var(--kui-fs-xl)/1.25 var(--kui-font); color: var(--kui-ink); overflow-wrap: anywhere; } .kui-tc__sub { font-size: var(--kui-fs-base); color: var(--kui-text); } .kui-tc__why { margin: 0; font-size: var(--kui-fs-base); color: var(--kui-text); } .kui-tc__why > b { color: var(--kui-ink); } .kui-tc > .kui-bar { margin: var(--kui-s1) calc(-1 * var(--kui-s4)) 0; } /* "Can't do it" is a real button, never a link: 48 px, more where the page's controls are taller (gloved) */ .kui-tc .kui-bar__sec .kui-btn { min-height: max(48px, var(--kui-ctl)); } /* contractor checks: OK to a date, green; expired or not done, red */ .kui-checks .kui-badge { white-space: normal; } .kui-pc { display: grid; gap: var(--kui-s3); min-width: 0; } /* the kiosk: full screen over the Desk, one column, huge type, 64 px targets; space for the on-screen keyboard */ .kui-kiosk { position: fixed; inset: 0; z-index: 1040; overflow-y: auto; display: grid; justify-items: center; align-content: start; padding: var(--kui-s7) var(--kui-s5) max(var(--kui-s7), env(keyboard-inset-height, 0px)); background: var(--kui-bg); color: var(--kui-text); font: var(--kui-fw) var(--kui-fs-xl)/1.4 var(--kui-font); --kui-ctl: 64px; --kui-target: 64px; --kui-control-h: 64px; } .kui-ks { display: grid; gap: var(--kui-s5); width: min(640px, 100%); text-align: center; } .kui-ks__t { margin: 0; font: 600 var(--kui-kiosk-title)/1.15 var(--kui-display); color: var(--kui-ink); } .kui-ks__sub, .kui-ks__foot { margin: 0; font-size: var(--kui-fs-xl); color: var(--kui-text); } .kui-ks__foot { font-size: var(--kui-fs-lg); color: var(--kui-text-soft); } .kui-ks__body { display: grid; gap: var(--kui-s4); text-align: left; } .kui-ks__acts { display: grid; gap: var(--kui-s3); } .kui-kiosk .kui-btn { min-height: 64px; height: auto; padding: var(--kui-s2) var(--kui-s5); border-radius: var(--kui-r-lg); font-size: var(--kui-fs-2xl); font-weight: 600; justify-content: center; } .kui-ks__langs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kui-s2); } .kui-ks__lang { min-height: 64px; min-width: 64px; padding: 0 var(--kui-s4); border: 1.5px solid var(--kui-line-ctl); border-radius: var(--kui-r-lg); background: var(--kui-panel); color: var(--kui-ink); font: 500 var(--kui-fs-xl)/1.2 var(--kui-font); cursor: pointer; } .kui-ks__lang[aria-pressed="true"] { border-color: var(--kui-ink); background: var(--kui-accent-soft); font-weight: 700; } .kui-ks__lang:focus-visible, .kui-ks__input:focus-visible { outline: 3px solid var(--kui-focus); outline-offset: 2px; } .kui-ks__tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--kui-s3); } .kui-ks__tile { display: grid; justify-items: center; align-content: start; gap: var(--kui-s3); padding: var(--kui-s5) var(--kui-s3); background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); font-size: var(--kui-fs-xl); font-weight: 600; color: var(--kui-ink); text-align: center; } .kui-ks__pic { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--kui-neutral-tint); color: var(--kui-ink); } .kui-ks__field { display: grid; gap: var(--kui-s2); margin: 0; text-align: left; } .kui-ks__field > span { font-size: var(--kui-fs-lg); font-weight: 600; color: var(--kui-text-soft); } .kui-ks__input { width: 100%; min-height: 64px; padding: 0 var(--kui-s4); border: 1.5px solid var(--kui-line-ctl); border-radius: var(--kui-r-lg); background: var(--kui-panel); color: var(--kui-ink); font: 500 var(--kui-fs-2xl)/1.2 var(--kui-font); } .kui-ks__badge { display: grid; justify-items: center; gap: var(--kui-s1); } .kui-ks__badge > span { font-size: var(--kui-fs-xl); color: var(--kui-text-soft); } .kui-ks__badge > b { font: 700 var(--kui-kiosk-figure)/1 var(--kui-display); color: var(--kui-ink); font-variant-numeric: tabular-nums; } .kui-ks__badge--person > b { display: grid; place-items: center; width: 128px; height: 128px; border-radius: 50%; font-size: var(--kui-kiosk-initials); background: color-mix(in srgb, var(--kui-people) 14%, var(--kui-panel)); color: var(--kui-people); } @media (max-width: 640px) { .kui-kiosk { padding-inline: var(--kui-s4); } .kui-ks__t { font-size: var(--kui-fs-3xl); } .kui-ks__badge > b { font-size: calc(var(--kui-kiosk-figure) * .75); } } /* a day's room: confirmed in the information green (red only past the limit), waiting hatched apart */ .kui-daymeter { display: grid; gap: var(--kui-s1); min-width: 0; } .kui-daymeter__bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; background: var(--kui-line); overflow: hidden; } .kui-daymeter__bar > i { display: block; height: 100%; flex: none; } .kui-daymeter__c { background: var(--kui-viz); } .kui-daymeter.is-over .kui-daymeter__c { background: var(--kui-alert); } .kui-daymeter__w { background: repeating-linear-gradient(-45deg, var(--kui-viz) 0 2px, var(--kui-viz-tint) 2px 5px); } .kui-daymeter__l { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--kui-s2); font-size: var(--kui-fs-sm); color: var(--kui-text-soft); font-variant-numeric: tabular-nums; } .kui-daymeter__l b { color: var(--kui-ink); font-weight: 600; } .kui-daymeter.is-over .kui-daymeter__l b { color: var(--kui-alert-text); } /* a month: one 7-column grid, Monday first, every day the same height */ .kui-month { display: grid; gap: var(--kui-s2); min-width: 0; } .kui-month__wd, .kui-month__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--kui-s2); } .kui-month__wd > span { font-size: var(--kui-fs-sm); font-weight: 600; color: var(--kui-text-soft); padding-inline: var(--kui-s2); } .kui-month__days { list-style: none; margin: 0; padding: 0; grid-auto-rows: 1fr; } .kui-month__d { display: flex; flex-direction: column; gap: var(--kui-s1); min-width: 0; min-height: 96px; padding: var(--kui-s2); background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r); } .kui-month__d[aria-current="date"] { border-color: var(--kui-ink); } .kui-month__n { font-size: var(--kui-fs-md); font-weight: 600; color: var(--kui-ink); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .kui-month__days, .kui-month__wd { gap: var(--kui-s1); } .kui-month__d { min-height: 64px; padding: var(--kui-s1); } } /* Wave 1 kit fix (Reception): the people circle's tint as a token (the people hue at 14 % on the panel), so it is part of the palette the layout checks read; the circle draws from it at rest and ringed amber at the door */ :root { --kui-people-tint: #ece6ec; } :root[data-theme="dark"] { --kui-people-tint: #2f2a34; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kui-people-tint: #2f2a34; } } .kui-kind--person { background: var(--kui-people-tint); } /* Expect a visitor (kapdaa.expectVisitor, public/js/kapdaa_visitors.js): the one sheet Home and Reception open. A host is often on a phone, so its controls keep the 44 px touch target. */ .kxv-sheet { display: grid; gap: var(--kui-s4); min-width: 0; } .kxv-when { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--kui-s3); } .kxv-locked { margin: 0; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--kui-ink); } .modal.kui-sheet.kxv-dialog :is(.form-control, .modal-footer .btn) { min-height: 44px; height: auto; } @media (max-width: 640px) { .kxv-when { grid-template-columns: minmax(0, 1fr); } } /* Wave 2 kit (Bale Labels): the printer strip and the one label sheet (kapdaa.ui.printerStrip, kapdaa.labelSheet). Calm at rest: a ready printer is a grey band with a green chip; the band takes the red edge only when it stops. */ .kui-printer { display: flex; align-items: center; gap: var(--kui-s3); min-width: 0; padding: var(--kui-s3) var(--kui-s4); border: 1px solid var(--kui-line); border-left: 4px solid var(--kui-line-strong); border-radius: var(--kui-r); background: var(--kui-panel); color: var(--kui-ink); } .kui-printer.is-red { border-left-color: var(--kui-alert); } .kui-printer.is-none { border-left-color: var(--kui-warn); } .kui-printer__id { display: grid; min-width: 0; flex: 1 1 160px; } .kui-printer__id b { font-size: var(--kui-fs-md); overflow-wrap: anywhere; } .kui-printer__id span { color: var(--kui-text-soft); font-size: var(--kui-fs-sm); } .kui-printer__st { flex: none; } .kui-printer .kui-btn { flex: none; } .kui-labelsheet .kui-ns__head { margin-bottom: var(--kui-s3); } .kui-labelsheet .kui-printer { margin-bottom: var(--kui-s4); } .kui-labelsheet__last { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--kui-s2); padding: var(--kui-s2) 0; border-bottom: 1px solid var(--kui-line); margin-bottom: var(--kui-s3); color: var(--kui-text-soft); } .kui-labelsheet__acts { display: flex; flex-wrap: wrap; gap: var(--kui-s2); margin: var(--kui-s3) 0; } .kui-labelsheet__msg { margin: 0 0 var(--kui-s3); font-weight: var(--kui-fw-med); } .kui-labelsheet__msg.is-red { color: var(--kui-alert-text); } .kui-labelsheet__msg.is-amber { color: var(--kui-warn-text); } .kui-labelsheet__lead { margin: 0 0 var(--kui-s3); color: var(--kui-text); } .kui-labelsheet__wrong { display: inline-flex; align-items: center; min-height: var(--kui-target, 44px); margin-top: var(--kui-s3); padding: 0; border: 0; background: none; color: var(--kui-ink); font-weight: var(--kui-fw-med); text-decoration: underline; cursor: pointer; } .kui-labelsheet__printers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kui-s2); } .kui-labelsheet__p { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; border-radius: var(--kui-r); cursor: pointer; } .kui-labelsheet__p.is-on .kui-printer { outline: 2px solid var(--kui-ink); outline-offset: -2px; } .kui-labelsheet__p:focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; } .kui-labelsheet__sent { display: flex; gap: var(--kui-s3); align-items: flex-start; } .kui-labelsheet__sent > div { display: grid; gap: var(--kui-s1); justify-items: start; min-width: 0; } .kui-labelsheet__sent p { margin: 0; color: var(--kui-text); } /* in a sheet or on a phone the strip wraps: the printer on its own line, then its state and Change printer */ .kui-labelsheet .kui-printer { flex-wrap: wrap; } .kui-labelsheet .modal-body { overflow-wrap: anywhere; } @media (max-width: 640px) { .kui-printer { flex-wrap: wrap; } .kui-printer__id { flex-basis: calc(100% - 40px); } } /* ==== Wave 2 · Storage (D-79): the store tile's fire meter, aisle rows, material dots, the rack elevation ========== */ .kui-sdot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--kui-sdot, var(--kui-text-soft)); } .kui-fmeter { display: grid; gap: var(--kui-s1); margin-top: var(--kui-s1); } .kui-fmeter__bar { position: relative; height: 8px; border-radius: 4px; background: var(--kui-line); } .kui-fmeter__bar > i { display: block; height: 100%; border-radius: 4px; background: var(--kui-viz); } .kui-fmeter.is-warn .kui-fmeter__bar > i { background: var(--kui-warn); } .kui-fmeter.is-alert .kui-fmeter__bar > i { background: var(--kui-alert); } .kui-fmeter__tick { position: absolute; left: 90%; top: -3px; bottom: -3px; width: 2px; background: var(--kui-ink); opacity: .55; } .kui-fmeter__l { display: flex; justify-content: space-between; gap: var(--kui-s2); font-size: var(--kui-fs-sm); color: var(--kui-text-soft); font-variant-numeric: tabular-nums; } .kui-fmeter__l > span:first-child { color: var(--kui-ink); font-weight: 600; } .kui-fmeter.is-warn .kui-fmeter__l > span:last-child { color: var(--kui-warn-text); font-weight: 700; } .kui-fmeter.is-alert .kui-fmeter__l > span:last-child { color: var(--kui-alert-text); font-weight: 700; } .kui-fmeter__unset { font-style: italic; } /* a store's top edge is colour only when it means something (amber near its fire limit, red over it): a store within its limit has the plain hairline, the 3 px kept as padding so every tile in the row is the same height */ .kui-store { border-top: 1px solid var(--kui-line); padding-top: calc(var(--kui-s4) + 3px); } .kui-store.is-warn, .kui-store.is-alert { border-top-width: 4px; padding-top: var(--kui-s4); } .kui-store.is-warn { border-top-color: var(--kui-warn); } .kui-store.is-alert { border-top-color: var(--kui-alert); } .kui-store.is-on { box-shadow: inset 0 0 0 2px var(--kui-ink); } .kui-store__t { all: unset; cursor: pointer; font-size: var(--kui-fs-lg); font-weight: 600; color: var(--kui-ink); min-height: var(--kui-target); display: inline-flex; align-items: center; } .kui-store__t::after { content: ""; position: absolute; inset: 0; } .kui-store { position: relative; } .kui-store__t:focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; border-radius: 4px; } /* the tonnes lead the tile at the glance's figure size (screen map §2b); the meter under them is their reference */ .kui-store__fig { display: block; font: 600 var(--kui-fs-2xl)/1.15 "Bricolage Grotesque", Inter, system-ui, sans-serif; color: var(--kui-ink); font-variant-numeric: tabular-nums; } .kui-store__fig small { font: 500 var(--kui-fs-lg) Inter, system-ui, sans-serif; color: var(--kui-text-soft); } /* the materials one under the other (and "+n"), each the column's whole width: a material can be a recipe code (KR-DEMO-01, D-44), so it is never cut; a long name wraps between words */ .kui-mats { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 2px; min-width: 0; font-size: var(--kui-fs-md); } .kui-mats.is-empty { display: block; color: var(--kui-text-soft); } .kui-mats__m { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 6px; min-width: 0; } /* every count on one edge */ .kui-mats__m > span:not(.kui-sdot) { min-width: 0; overflow-wrap: break-word; } .kui-mats__m small, .kui-mats__more { font-size: var(--kui-fs-md); color: var(--kui-text-soft); font-variant-numeric: tabular-nums; } .kui-aisles { list-style: none; margin: 0; padding: 0; border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); background: var(--kui-panel); overflow: hidden; } .kui-aisle { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 1.6fr) 150px 88px minmax(0, 1fr) 24px; align-items: center; gap: var(--kui-s3); min-height: var(--kui-row-list); padding: 0 var(--kui-s4); } .kui-aisle + .kui-aisle { border-top: 1px solid var(--kui-line); } .kui-aisle--h { min-height: 36px; font-size: var(--kui-fs-sm); font-weight: 600; color: var(--kui-text-soft); background: var(--kui-panel-2); } .kui-aisle.is-off { background: repeating-linear-gradient(135deg, transparent 0 8px, var(--kui-panel-2) 8px 16px); } .kui-aisle__open { all: unset; cursor: pointer; display: flex; flex-direction: column; min-width: 0; min-height: var(--kui-target); justify-content: center; } .kui-aisle__open.is-static { cursor: default; } .kui-aisle__open b { color: var(--kui-ink); font-weight: 600; } .kui-aisle__open small { color: var(--kui-text-soft); font-size: var(--kui-fs-md); } .kui-aisle__open:focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; border-radius: 4px; } .kui-aisle__cap { display: grid; gap: 2px; font-size: var(--kui-fs-sm); color: var(--kui-text-soft); font-variant-numeric: tabular-nums; } .kui-aisle__bar { height: 6px; border-radius: 3px; background: var(--kui-line); overflow: hidden; } .kui-aisle__bar > i { display: block; height: 100%; background: var(--kui-viz); } .kui-aisle__cap.is-full .kui-aisle__bar > i { background: var(--kui-warn); } .kui-aisle--h > span:nth-child(4) { text-align: right; } .kui-aisle__kg { text-align: right; font-variant-numeric: tabular-nums; color: var(--kui-text-soft); } /* an aisle's bales lead the row (the figure, its noun a step smaller); the weight and the capacity bar are context */ .kui-aisle__n b { font-size: var(--kui-fs-lg); font-weight: 600; color: var(--kui-ink); } .kui-aisle__n small { font-size: var(--kui-fs-sm); color: var(--kui-text-soft); } .kui-aisle__marks { display: flex; flex-wrap: wrap; gap: var(--kui-s1); justify-content: flex-end; min-width: 0; } .kui-aisle__go { color: var(--kui-text-soft); display: flex; justify-content: flex-end; } /* a narrow list (a phone, or a tablet beside the sidebar) stacks each row: name and weight, materials, capacity, marks */ .kui-aisles { container: kui-aisles / inline-size; } @container kui-aisles (max-width: 760px) { .kui-aisle--h { display: none; } .kui-aisle { grid-template-columns: minmax(0, 1fr) 72px 20px; grid-template-areas: "n kg go" "m m m" "c c c" "k k k"; row-gap: var(--kui-s1); padding: var(--kui-s3) var(--kui-s4); } .kui-aisle__open { grid-area: n; } .kui-mats { grid-area: m; } .kui-aisle__cap { grid-area: c; } .kui-aisle__kg { grid-area: kg; } .kui-aisle__marks { grid-area: k; justify-content: flex-start; } .kui-aisle__go { grid-area: go; } } .kui-elev { display: flex; flex-wrap: wrap; gap: var(--kui-s4); } .kui-elev__rack { flex: 1 1 280px; min-width: 0; padding: var(--kui-s3); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); background: var(--kui-panel); } .kui-elev__rack h3 { margin: 0 0 var(--kui-s2); font-size: var(--kui-fs-base); font-weight: 600; color: var(--kui-ink); } .kui-elev__lv { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--kui-s2); align-items: stretch; } .kui-elev__lv + .kui-elev__lv { margin-top: var(--kui-s1); } .kui-elev__ln { position: relative; display: flex; align-items: center; justify-content: center; font-size: var(--kui-fs-sm); font-weight: 600; color: var(--kui-text-soft); border-left: 4px solid var(--kui-line); overflow: hidden; } .kui-elev__ln > i { position: absolute; left: -4px; bottom: 0; width: 4px; background: var(--kui-viz); } .kui-elev__row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--kui-s1); } .kui-slot { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 56px; padding: 6px 8px; border: 1px solid var(--kui-line); border-radius: var(--kui-r-sm); background: var(--kui-panel); color: var(--kui-text); font: inherit; font-size: var(--kui-fs-sm); text-align: left; cursor: pointer; } .kui-slot:focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; } .kui-slot.is-free { background: var(--kui-panel-2); color: var(--kui-text-soft); } .kui-slot.is-used { border-color: var(--kui-line-strong); } .kui-slot.is-check, .kui-slot.is-reserved { box-shadow: inset 0 0 0 2px var(--kui-warn); } .kui-slot.is-old { border-left: 4px solid var(--kui-alert); } .kui-slot.is-off { background: repeating-linear-gradient(135deg, var(--kui-panel-2) 0 6px, var(--kui-line) 6px 8px); color: var(--kui-text-soft); } .kui-slot__p { font-weight: 600; color: var(--kui-text-soft); } .kui-slot__w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; font-variant-numeric: tabular-nums; } .kui-slot > .kui-sdot { position: absolute; } .kui-slot { position: relative; } .kui-slot > .kui-sdot { top: 8px; right: 8px; } .kui-elevkey { display: flex; flex-wrap: wrap; gap: var(--kui-s2) var(--kui-s4); margin-top: var(--kui-s3); font-size: var(--kui-fs-sm); color: var(--kui-text-soft); } .kui-elevkey > span { display: inline-flex; align-items: center; gap: 6px; } .kui-elevkey i.kui-slot { display: inline-block; width: 16px; min-height: 12px; height: 12px; padding: 0; } /* ---- One header on every page (owner 2026-10-22: Gatehouse and Bays header rows differed) ----------------------- */ /* The page header is navigation chrome: the same height on every page and density, like a platform's nav bar. A page's own density (station 56 px, gloved 64 px) sizes the controls in its CONTENT, never the header's search, scan camera, view switch or actions, which stay at the touch height (44 px, Apple's minimum) everywhere. */ .page-container .kui-pageheader.kui-pageheader :is(.kap-search, .kap-search input, .kap-cam-btn, .kui-btn, .kui-seg__b) { min-height: var(--kui-ctl-touch); } .page-container .kui-pageheader.kui-pageheader .kap-cam-btn { min-width: var(--kui-ctl-touch); } /* the page's size variables stop at the header, so every rule inside it (the phone tab bar, the scan camera) sizes the same */ .page-container .kui-pageheader.kui-pageheader { --kui-target: var(--kui-ctl-touch); --kui-tap: var(--kui-ctl-touch); --kui-control-h: var(--kui-ctl-touch); } /* The one exception (owner 2026-10-24, D-85): on a gloved touch station the header's controls take the glove target too, since a gloved hand can't hit 44 px. A gloved page is never beside an office page on the same device. */ .page-container.kui-density-gloved .kui-pageheader.kui-pageheader :is(.kap-search, .kap-search input, .kap-cam-btn, .kui-btn, .kui-seg__b) { min-height: var(--kui-ctl-gloved); } .page-container.kui-density-gloved .kui-pageheader.kui-pageheader .kap-cam-btn { min-width: var(--kui-ctl-gloved); } .page-container.kui-density-gloved .kui-pageheader.kui-pageheader { --kui-target: var(--kui-ctl-gloved); --kui-tap: var(--kui-ctl-gloved); --kui-control-h: var(--kui-ctl-gloved); } /* ---- Wave 2 labels (2026-10-22, P2-7): the label sheet is used with gloves at the station, the baler and the lines: its buttons, chips and fields at the station's 56 px whatever page opens it, with a mouse too. */ .modal.kui-labelsheet { --kui-target: var(--kui-ctl-station); --kui-target-touch: var(--kui-ctl-station); --kui-ctl: var(--kui-ctl-station); --kui-control-h: var(--kui-ctl-station); } .modal.kui-labelsheet :is(.modal-footer .btn, .kui-btn, .kui-choice__o, .kui-input, .form-control) { min-height: var(--kui-ctl-station); } /* ==== Home (rebuild, 2026-10-22): the day band, the lead need, the counted tiles, the live dot, the done line, the More menu. Full-width parts on the page's one column; cells in a row share one height. Colour is meaning only: red past its limit, amber near it, green done, blue your turn. Motion (docs/23 §2b): a new row slides in (200 ms), a figure that changed ticks once, the live dot pulses once per update, a need done ticks and folds away; reduced motion keeps only the colour and opacity (kapdaa.css's blanket). ================================================================ */ /* the day band: the greeting and the day's state, then the figures, one row of equal cells */ .kui-day { display: grid; grid-template-columns: minmax(280px, 1.4fr) repeat(var(--n, 4), minmax(0, 1fr)); background: var(--kui-panel); border: 1px solid var(--kui-panel-edge, var(--kui-line)); box-shadow: var(--kui-panel-e, none); border-radius: var(--kui-r-lg); overflow: hidden; } .kui-day__cells { display: contents; } .kui-day__hi { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 20px var(--kui-s5); } .kui-day__t { margin: 0; font: 600 var(--kui-fs-2xl)/1.15 var(--kui-display); color: var(--kui-ink); } .kui-day__d { margin: 0; font-size: var(--kui-fs-md); color: var(--kui-text-soft); } .kui-day__s { margin: var(--kui-s1) 0 0; font-size: var(--kui-fs-base); color: var(--kui-text); } .kui-day__s b { color: var(--kui-ink); font-weight: 600; } .kui-day__hi .kui-live { margin-top: var(--kui-s2); } .kui-day .kui-glance__c { justify-content: flex-start; padding: 20px; border-left: 1px solid var(--kui-line); border-top: 0; } .kui-glance__v { display: inline-block; } .kui-glance__v.is-tick { border-radius: var(--kui-r-sm); animation: kui-update var(--kui-t-glow) var(--kui-ease-out) 1; } /* a changed figure glows once */ .kui-daybox { container: kui-day / inline-size; min-width: 0; } @container kui-day (max-width: 1179px) { /* the greeting over the figures, its state to the right (no empty half row) */ .kui-day { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); } .kui-day__hi { grid-column: 1 / -1; border-bottom: 1px solid var(--kui-line); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--kui-s5); align-items: center; padding: var(--kui-s4) var(--kui-s5); } .kui-day__hi > .kui-day__t, .kui-day__hi > .kui-day__d { grid-column: 1; } .kui-day__hi > .kui-day__s, .kui-day__hi > :last-child:not(.kui-day__d):not(.kui-day__t) { grid-column: 2; justify-self: end; text-align: right; } .kui-day__hi > .kui-day__s { grid-row: 1; margin: 0; } .kui-day__cells > .kui-glance__c:first-child { border-left: 0; } } @container kui-day (max-width: 639px) { /* the figures two by two */ .kui-day { grid-template-columns: 1fr 1fr; } .kui-day__hi { display: flex; padding: var(--kui-s3) var(--kui-s4); } .kui-day__hi > .kui-day__s { margin: var(--kui-s1) 0 0; text-align: left; } .kui-day__t { font-size: var(--kui-fs-xl); } .kui-day .kui-glance__c { padding: 10px var(--kui-s3); } .kui-day .kui-glance__c:nth-child(odd) { border-left: 0; } .kui-day .kui-glance__c:nth-child(n + 3) { border-top: 1px solid var(--kui-line); } .kui-day[style*="--n:1"] .kui-glance__c, .kui-day[style*="--n:3"] .kui-glance__c:last-child { grid-column: 1 / -1; } } /* the live dot: still; one ring when new figures arrive */ .kui-live { display: inline-flex; align-items: center; gap: var(--kui-s2); font-size: var(--kui-fs-sm); color: var(--kui-text-soft); white-space: nowrap; } .kui-live > i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--kui-line-strong); } .kui-live.is-on > i { background: var(--kui-good); } .kui-live > i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--kui-good); opacity: 0; } .kui-live.is-pulse > i::after { animation: kui-live var(--kui-t-fill) var(--kui-ease-out) 1; } /* stale (design plan §6b): the dot goes grey; after 5 min of no figures it turns amber */ .kui-live.is-stale > i { background: var(--kui-text-soft); } .kui-live.is-old > i { background: var(--kui-warn); } .kui-live.is-old { color: var(--kui-warn-text); } /* the lead need: the one raised surface on the page */ .kui-lead { position: relative; display: grid; gap: var(--kui-s3); padding: 20px var(--kui-s5); background: var(--kui-lead-bg, var(--kui-panel)); border: 1px solid var(--kui-lead-edge, var(--kui-line)); border-radius: var(--kui-r-lg); box-shadow: var(--kui-lead-e, var(--kui-e2)); animation: kui-enter var(--kui-t) var(--kui-ease-out) 1; } /* the floor's lead block: the one heavy line on the page (design plan §3) */ .kui-reg-floor .kui-lead { border-width: 2px; } .kui-lead__top { display: flex; align-items: center; gap: var(--kui-s3); min-width: 0; } .kui-lead__kind { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kui-s2); margin: 0; min-width: 0; font-size: var(--kui-fs-md); color: var(--kui-text-soft); } .kui-lead__kind b { font-size: var(--kui-fs-base); font-weight: 600; color: var(--kui-ink); } .kui-lead__wait { margin-left: auto; flex: none; } .kui-lead__who { margin: 0; font: 600 var(--kui-fs-xl)/1.25 var(--kui-display); color: var(--kui-ink); overflow-wrap: anywhere; } .kui-lead__ref { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--kui-s2); margin: calc(-1 * var(--kui-s2)) 0 0; font: var(--kui-fs-sm) var(--kui-mono); color: var(--kui-text-soft); } .kui-lead__ref > * { white-space: nowrap; } .kui-lead__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--kui-s3) var(--kui-s5); margin: 0; padding: var(--kui-s3) 0; border-block: 1px solid var(--kui-line); } .kui-lead__facts > div { display: grid; gap: 2px; min-width: 0; } .kui-lead__facts > .is-wide { grid-column: 1 / -1; } .kui-lead__facts dt { font-size: var(--kui-fs-sm); font-weight: 500; color: var(--kui-text-soft); } .kui-lead__facts dd { margin: 0; font-size: var(--kui-fs-base); font-weight: 600; color: var(--kui-ink); font-variant-numeric: tabular-nums; } .kui-lead__facts q { font-weight: 400; color: var(--kui-text); } .kui-lead__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kui-s2) var(--kui-s3); } .kui-lead__open { display: inline-flex; align-items: center; gap: var(--kui-s1); min-height: var(--kui-target); font: 600 var(--kui-fs-md) var(--kui-font); color: var(--kui-ink); text-decoration: none; } .kui-lead__open:hover { color: var(--kui-ink); text-decoration: underline; text-underline-offset: 3px; } .kui-lead__then { flex: 1 1 240px; margin: 0; font-size: var(--kui-fs-md); color: var(--kui-text-soft); } /* done: a tick over the card, then it folds away */ .kui-lead__done { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: var(--kui-panel); color: var(--kui-good-text); font: 600 var(--kui-fs-lg) var(--kui-font); --kui-enter-y: 0px; animation: kui-enter var(--kui-t) var(--kui-ease-out) 1; } .kui-lead__done > span { display: inline-flex; align-items: center; gap: var(--kui-s2); } .kui-lead.is-done { animation: kui-enter var(--kui-t-fill) var(--kui-ease-in) 400ms 1 reverse forwards; overflow: hidden; } /* folds away */ @media (max-width: 640px) { .kui-lead { padding: var(--kui-s3); } /* phone lead padding 12 px (handheld checklist: 12–14) */ .kui-lead__acts > .kui-btn--primary { flex: 1 1 100%; min-height: 48px; justify-content: center; } .kui-lead__acts > .kui-btn:not(.kui-btn--primary) { flex: 1 1 0; justify-content: center; } .kui-lead__then { flex-basis: 100%; } } /* a row that just arrived slides in */ .kui-r.is-new { animation: kui-enter var(--kui-t) var(--kui-ease-out) 1; } /* counted queues: one row of equal tiles; a grouped list on a phone */ .kui-qtiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--kui-s3); } .kui-qtiles > li { display: flex; min-width: 0; } .kui-qtile { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: var(--kui-s2); align-content: start; min-width: 0; min-height: var(--kui-target); padding: var(--kui-s4); background: var(--kui-panel); border: 1px solid var(--kui-panel-edge, var(--kui-line)); box-shadow: var(--kui-panel-e, none); border-radius: var(--kui-r-lg); font: inherit; text-align: left; color: var(--kui-text); text-decoration: none; cursor: pointer; transition: border-color var(--kui-t-fast) var(--kui-ease), box-shadow var(--kui-t-fast) var(--kui-ease); } .kui-qtile:hover, .kui-qtile:focus { color: var(--kui-text); text-decoration: none; border-color: var(--kui-ink); } .kui-qtile:focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; } .kui-qtile__n { grid-column: 1; font: 600 var(--kui-fs-2xl)/1.15 var(--kui-display); color: var(--kui-ink); font-variant-numeric: tabular-nums; } .kui-qtile > svg { grid-column: 2; grid-row: 1; align-self: center; color: var(--kui-text-soft); } .kui-qtile__l { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: var(--kui-s2); font-size: var(--kui-fs-base); font-weight: 600; color: var(--kui-ink); } .kui-qtile__k { display: inline-flex; flex: none; padding-top: 2px; color: var(--kui-text-soft); } /* the kind's symbol (glanceCell's) */ .kui-qtile__s { grid-column: 1 / -1; font-size: var(--kui-fs-md); color: var(--kui-text-soft); overflow-wrap: anywhere; } .kui-qtile.is-warn .kui-qtile__n { color: var(--kui-warn-text); } .kui-qtile.is-alert .kui-qtile__n { color: var(--kui-alert-text); } .kui-qtile--more .kui-qtile__n { color: var(--kui-text-soft); } @media (max-width: 640px) { .kui-qtiles { grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); overflow: hidden; } .kui-qtiles > li + li { border-top: 1px solid var(--kui-line); } .kui-qtile { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-rows: auto auto; padding: var(--kui-s3); border: 0; border-radius: 0; } .kui-qtile__n { grid-row: 1 / span 2; align-self: center; font-size: var(--kui-fs-xl); } .kui-qtile__l, .kui-qtile__s { grid-column: 2; } .kui-qtile > svg { grid-column: 3; grid-row: 1 / span 2; } } /* "4 done today · Show" */ .kui-doneline { display: flex; align-items: center; gap: var(--kui-s2); margin: 0; font-size: var(--kui-fs-md); color: var(--kui-text-soft); } .kui-doneline > svg { flex: none; color: var(--kui-good); } .kui-doneline b { color: var(--kui-ink); font-variant-numeric: tabular-nums; } .kui-doneline .kui-more { margin: 0 0 0 auto; } /* a panel holding a list: the list runs to the panel's edges, under its heading */ .kui-card--flush > .kui-card__head { margin: 0; padding: var(--kui-s3) var(--kui-s4); } .kui-card--flush > .kui-rows { margin: 0; border: 0; border-top: 1px solid var(--kui-line); border-radius: 0; } .kui-card--flush > .kui-card__foot { padding: var(--kui-s2) var(--kui-s4) var(--kui-s3); } /* the header's More menu: ERPNext's dropdown, our button */ .kui-menu { position: relative; display: inline-flex; } .kui-menu .dropdown-item { min-height: var(--kui-target); display: flex; align-items: center; font-size: var(--kui-fs-base); } /* ---- The shared timeline (screen map §5): activity mode — time · dot on a rail · what happened, its record, who ---- */ .kui-tl { list-style: none; margin: 0; padding: 0; display: grid; } .kui-tl__i { display: grid; grid-template-columns: 48px 16px minmax(0, 1fr); column-gap: var(--kui-s2); align-items: start; min-height: var(--kui-target); padding-block: var(--kui-s1); position: relative; } .kui-tl__t { font: 600 var(--kui-fs-md) var(--kui-font); color: var(--kui-text-soft); font-variant-numeric: tabular-nums; line-height: 24px; } .kui-tl__dot { width: 8px; height: 8px; margin: 8px auto 0; border-radius: 50%; background: var(--kui-line-strong); position: relative; z-index: 1; } /* the rail between the dots */ .kui-tl__i:not(:last-child)::before { content: ""; position: absolute; left: calc(48px + var(--kui-s2) + 7px); top: 20px; bottom: -8px; width: 2px; background: var(--kui-line); } .kui-tl__i.is-good .kui-tl__dot { background: var(--kui-good); } .kui-tl__i.is-warn .kui-tl__dot { background: var(--kui-warn); } .kui-tl__i.is-alert .kui-tl__dot { background: var(--kui-alert); } .kui-tl__b { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--kui-s2); row-gap: 0; min-width: 0; line-height: 24px; font-size: var(--kui-fs-base); color: var(--kui-text); } .kui-tl__v { font-weight: 600; color: var(--kui-ink); } .kui-tl__ref { font: var(--kui-fs-md) var(--kui-mono); color: var(--kui-text); white-space: nowrap; } /* the record link is a real target (44 px), centred on the line */ a.kui-tl__ref { display: inline-flex; align-items: center; min-height: var(--kui-target); min-width: var(--kui-target); margin-block: -10px; text-decoration: underline; text-underline-offset: 2px; } .kui-tl__w { color: var(--kui-text); } .kui-tl__who { color: var(--kui-text-soft); font-size: var(--kui-fs-md); } .kui-tl__who::before { content: "· "; } .kui-daylog { display: grid; gap: var(--kui-s5); min-width: 0; } .modal.kui-daylog-sheet .modal-dialog { width: 520px; } /* the day log's open items and people: one row each on shared columns (ID whole · what · time) */ .kui-dl { list-style: none; margin: 0; padding: 0; background: var(--kui-panel); border: 1px solid var(--kui-line); border-radius: var(--kui-r-lg); display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; container: kui-dl / inline-size; } /* the rows share the list's columns (subgrid), so every ID, text and time lines up */ .kui-dl__r { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; column-gap: var(--kui-s3); min-height: var(--kui-target, 44px); padding: var(--kui-s2) var(--kui-s3); font-size: var(--kui-fs-base); color: var(--kui-text); } .kui-dl__r + .kui-dl__r { border-top: 1px solid var(--kui-line); } .kui-dl__id { white-space: nowrap; font-weight: 600; color: var(--kui-ink); } .kui-dl__id.is-mono { font: 600 var(--kui-fs-md) var(--kui-mono); } .kui-dl__id a { display: inline-flex; align-items: center; min-height: var(--kui-target, 44px); margin-block: calc(-1 * var(--kui-s2)); color: inherit; text-decoration: underline; text-underline-offset: 2px; } .kui-dl__w { min-width: 0; overflow-wrap: break-word; color: var(--kui-text-soft); } /* never cut: on a phone it wraps in its own column */ .kui-dl__tm { white-space: nowrap; font-size: var(--kui-fs-md); color: var(--kui-text-soft); font-variant-numeric: tabular-nums; text-align: right; } @container kui-dl (max-width: 440px) { .kui-dl__since { display: none; } } /* a phone: "16 Oct", the heading says it is open */ /* ---- The line skeleton (Wave 3, kapdaa.LineStation): Sorting, Tearing and Blending, one shape. Gloved: every target at the station size (56 px), the bar's at 64. Colour is meaning only: the state band red when stopped, amber when someone must act; the line's own stage colour is the small dot by its name. ---------------------------------- */ .kls { display: grid; gap: var(--kui-s4); min-width: 0; --kui-target: var(--kui-ctl, var(--kui-ctl-station)); --kui-tap: var(--kui-ctl, var(--kui-ctl-station)); padding-bottom: calc(var(--kui-ctl-gloved) + 2 * var(--kui-s3)); } .kls .kui-pageheader { margin-bottom: 0; } .kls .kui-ph-name::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: var(--kui-s2); background: var(--kls-line, var(--kui-ink)); vertical-align: middle; } #kls-conn:empty { display: none; } #kls-body { display: grid; gap: var(--kui-s4); min-width: 0; } #kls-body > .kui-panels { margin: 0; } /* the state band: the line's state as one word, at the hero size */ .kls-band { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kui-s2) var(--kui-s4); min-height: var(--kui-ctl-gloved); padding: var(--kui-s3) var(--kui-s4); border-radius: var(--kui-r-lg); background: var(--kui-panel); border: 1px solid var(--kui-line); } .kls-band__w { display: inline-flex; align-items: center; gap: var(--kui-s2); font: 750 var(--kui-fs-3xl)/1 var(--kui-display); color: var(--kui-ink); } .kls-band__w i { width: 12px; height: 12px; border-radius: 50%; background: var(--kui-ink); } .kls-band__t { flex: 1 1 240px; min-width: 0; font-size: var(--kui-fs-lg); color: var(--kui-text); } .kls-band__t b { font-family: var(--kui-mono); white-space: nowrap; } .kls-band__c { margin-left: auto; } .kls-band.is-red { background: var(--kui-alert-tint); border-color: var(--kui-alert); } .kls-band.is-red .kls-band__w { color: var(--kui-alert-text); } .kls-band.is-red .kls-band__w i { background: var(--kui-alert); } .kls-band.is-amber { background: var(--kui-warn-tint); border-color: var(--kui-warn); } .kls-band.is-neutral .kls-band__w i { background: var(--kui-text-soft); } /* the recipe code: a code with a lock, amber while it waits for its release (codes only, D-44) */ .kls-code { display: inline-flex; align-items: center; gap: var(--kui-s1); padding: var(--kui-s1) var(--kui-s3); border-radius: var(--kui-r); background: var(--kui-panel-2); border: 1px solid var(--kui-line); font: 600 var(--kui-fs-md) var(--kui-mono); white-space: nowrap; } .kls-code.is-amber { background: var(--kui-warn-tint); border-color: var(--kui-warn); color: var(--kui-warn-text); } /* ④ the run figure and its loss gauge (D-40) */ .kls-run { display: grid; gap: var(--kui-s2); } .kls-run__k, .kls-run__s, .kls-run__w { margin: 0; color: var(--kui-text-soft); font-size: var(--kui-fs-md); } .kls-run__w { color: var(--kui-text); font-size: var(--kui-fs-lg); } .kls-run__fig { margin: 0; display: flex; align-items: baseline; gap: var(--kui-s2); } /* the run's kg at the figure size (§4 station: 26): the next step leads the page, not this number (purpose card, D-83) */ .kls-run__fig b { font: 750 var(--kui-fs-2xl)/1 var(--kui-display); color: var(--kui-ink); font-variant-numeric: tabular-nums; } .kls-run__fig small { font-size: var(--kui-fs-xl); color: var(--kui-text-soft); } .kls-run.is-amber .kls-run__fig b, .kls-run.is-amber .kls-run__w { color: var(--kui-warn-text); } .kls-run.is-red .kls-run__fig b, .kls-run.is-red .kls-run__w { color: var(--kui-alert-text); } .kls-gauge { position: relative; height: 12px; border-radius: var(--kui-r-pill); background: var(--kui-neutral-tint); overflow: visible; } .kls-gauge i { display: block; height: 100%; border-radius: inherit; background: var(--kui-ink); } .kls-run.is-amber .kls-gauge i { background: var(--kui-warn); } .kls-run.is-red .kls-gauge i { background: var(--kui-alert); } .kls-gauge__tick { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--kui-text); } .kui-panels > .kui-card > .kls-run { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--kui-s2); } .kls-run__a { margin-top: auto; padding-top: var(--kui-s2); } .kls-band .kui-seg__b { min-width: var(--kui-ctl-station); } .kui-panels > .kui-card > .kls-tiles--bins { flex: 1 1 auto; grid-auto-rows: minmax(var(--kui-ctl-gloved), 1fr); } /* equal rows; each tile fills its row */ .kls-tiles > li { display: flex; } .kls-tiles > li > .kls-tile { height: 100%; } @media (max-width: 1099px) { #kls-body > .kui-panels { grid-template-columns: minmax(0, 1fr); } /* a tablet: the panels stack */ .kls-band__t { flex-basis: 100%; order: 3; } } /* and the run's line under the state word, on its own line */ .kls .kap-hold-fill { background: var(--kui-accent-hover); } /* the bar's and the card's held buttons */ .kls .kui-btn:not(.kui-btn--primary) > .kap-hold-fill { background: var(--kui-neutral-tint); border-right: 0; } /* an outlined one keeps its words readable */ /* the operator's next step: under the state band, the first thing read after it */ .kls-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--kui-s1) var(--kui-s3); margin: 0; } .kls-next > span { font-size: var(--kui-fs-md); font-weight: 600; color: var(--kui-text-soft); } .kls-next > b { flex: 1 1 320px; min-width: 0; font: 650 var(--kui-fs-xl)/1.25 var(--kui-display); color: var(--kui-ink); } /* one headline: the band's word */ @media (max-width: 640px) { .kls-next > b { font-size: var(--kui-fs-xl); } .kls .kui-card { padding: var(--kui-s3); } } /* phone: one padding, not two */ .kls-big { margin: 0; font: 700 var(--kui-fs-2xl)/1.15 var(--kui-mono); color: var(--kui-ink); overflow-wrap: normal; word-break: keep-all; } .kls-h { margin: var(--kui-s3) 0 var(--kui-s2); font-size: var(--kui-fs-sm); font-weight: 600; color: var(--kui-text-soft); } /* tap tiles (bins, by-products, additives): one grid of equal cells */ .kls-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-rows: 1fr; gap: var(--kui-s2); } /* one tile height: a long bin name never makes a taller row */ .kls-tile { width: 100%; min-height: var(--kui-ctl-gloved); display: grid; grid-template-rows: 1fr auto; gap: 2px; text-align: left; padding: var(--kui-s2) var(--kui-s3); border-radius: var(--kui-r); border: 1px solid var(--kui-line); background: var(--kui-panel-2); color: var(--kui-ink); cursor: pointer; } .kls-tile b { font-size: var(--kui-fs-base); font-weight: 600; } .kls-tile span { font-variant-numeric: tabular-nums; color: var(--kui-text-soft); } .kls-tile:hover:not([aria-disabled="true"]) { border-color: var(--kui-ink); } .kls-tile[aria-disabled="true"] { cursor: default; opacity: .6; } .kls-lock { display: flex; gap: var(--kui-s2); align-items: center; margin: var(--kui-s3) 0 0; color: var(--kui-text-soft); font-size: var(--kui-fs-md); } /* the bar: Scan · the one primary · Pause · Hold, at the thumb */ /* built from the buttons that apply: they share the row, the primary takes the most (no fixed, empty slots) */ .kls-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: var(--kui-s3); padding: var(--kui-s3) 0; background: var(--kui-bg); } .kls-bar:empty { display: none; } .kls-bar > * { flex: 1 1 0; min-width: 0; } .kls-bar > .kls-bar__p { flex-grow: 2.4; display: grid; } .page-container .kls-bar :is(.kui-btn, .kui-btnwhy) { width: 100%; min-height: var(--kui-ctl-gloved); justify-content: center; } /* beats the density floor */ .kls-bar .kui-btnwhy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; } .kls-bar .kui-btnwhy > .kui-btn { width: 100%; } .kls-bar .kui-btnwhy__r { text-align: center; font-size: var(--kui-fs-sm); color: var(--kui-text-soft); } .kls-bar [data-tone="amber"]:not([aria-disabled="true"]) { color: var(--kui-warn-text); border-color: var(--kui-warn); } @media (max-width: 640px) { .kls-bar { position: fixed; left: 0; right: 0; bottom: 0; padding: var(--kui-s2) var(--kui-s3); grid-template-columns: 1fr 1fr 1fr; border-top: 1px solid var(--kui-line); } .kls-bar > .kls-bar__p { flex-basis: 100%; order: -1; } .kls { padding-bottom: calc(2 * var(--kui-ctl-gloved) + 4 * var(--kui-s3)); } .kls-band__w { font-size: var(--kui-fs-2xl); } } /* who is signed in (initials only, D-58) and the sign-in with its PIN pad */ /* nothing to scan, view or switch until signed in: the header keeps only its (screen-reader) name, no band of empty space */ .kls.is-out .kui-pageheader :is(.kui-ph-search, .kui-ph-right) { display: none; } .kls.is-out :is(.kui-pageheader, .kui-ph-bar) { padding: 0; margin: 0; border: 0; min-height: 0; } /* a station: the bar's gloved Scan opens the camera, so the header's 44 px inline camera goes; no Desk sidebar around the line */ .kls-station .kls .kui-pageheader .kap-cam-btn--inline { display: none; } body.kls-station .body-sidebar-container { display: none; } .kls-who { display: inline-flex; align-items: center; gap: var(--kui-s2); } .kls-who__i { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--kui-ink); color: var(--kui-accent-ink); font-weight: 700; } .kls-signin { padding: var(--kui-s5); } .kls-signin__in-wrap { max-width: 420px; margin: 0 auto; display: grid; gap: var(--kui-s3); } .kls-signin__t { margin: 0; font: 600 var(--kui-fs-2xl)/1.15 var(--kui-display); color: var(--kui-ink); } .kls-signin__s { margin: 0; color: var(--kui-text-soft); } .kls-signin__in, .kls-pad__in { min-height: var(--kui-ctl-gloved); font-size: var(--kui-fs-xl); } .kls-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--kui-s2); } .kls-pad__k { min-height: var(--kui-ctl-gloved); border-radius: var(--kui-r); border: 1px solid var(--kui-line); background: var(--kui-panel); font: 600 var(--kui-fs-xl) var(--kui-font); color: var(--kui-ink); } .modal.kls-sheet { --kui-ctl: var(--kui-ctl-station); --kui-target: var(--kui-ctl-station); } .modal.kls-sheet :is(.modal-footer .btn, .kui-btn, .kui-choice__o, .form-control) { min-height: var(--kui-ctl-station); } .kls-sheet__lead { margin: 0 0 var(--kui-s3); color: var(--kui-text); } /* ==== The kit, step 2 (design plan D-83): registers, icons, press, safeguards, states ============================== */ /* icons: stroke 1.5 at row sizes, 2 from 24 px and on the floor (--kui-icon-stroke); :where keeps it under any page rule */ :where(.kap-ic:not(.kap-ic--lg)) { stroke-width: var(--kui-icon-stroke, 1.5); } /* press on a row or tile that opens something: a step darker (the buttons' own press is with .kui-btn) */ .kui-r:has(.kui-r__open:not(.is-static)):active, .kui-tile--open:active, .kui-qtile:active { background: var(--kui-panel-2); } .kui-tile--open:active, .kui-qtile:active { transform: scale(var(--kui-m-scale)); } .kui-tile--open, .kui-qtile { transition: background var(--kui-t-fast) var(--kui-ease), transform var(--kui-t-fast) var(--kui-ease), box-shadow var(--kui-t-fast) var(--kui-ease), border-color var(--kui-t-fast) var(--kui-ease); } /* office: a card that opens lifts on hover (e1 → e2), pointer devices only */ @media (hover: hover) { .kui-reg-office :is(.kui-qtile, .kui-tile--open):hover { box-shadow: var(--kui-hover-e, var(--kui-e2)); } } /* ---- Sheets: office a 480 px side sheet; floor a bottom sheet, the full width, at most 60 % of the height ---------- */ .modal.kui-sheet.kui-sheet--side .modal-dialog { width: 480px; } .modal.kui-sheet.kui-sheet--bottom .modal-dialog { display: flex; align-items: flex-end; width: 100%; max-width: none; height: 100%; margin: 0; } .modal.kui-sheet.kui-sheet--bottom .modal-content { height: auto; max-height: 60vh; border: 0; border-top: 1px solid var(--kui-line); border-radius: var(--kui-r-lg) var(--kui-r-lg) 0 0; box-shadow: var(--kui-e3); } .modal.kui-sheet.kui-sheet--bottom .modal-body { overflow-y: auto; } /* a bottom sheet on a wide screen keeps a readable measure: centred, at most 760 px (step 4 review P1-1) */ .modal.kui-sheet.kui-sheet--bottom .modal-content { width: 100%; max-width: 760px; margin-inline: auto; } /* a sheet's close is a whole target */ .modal.kui-sheet .modal-header .btn-modal-close { min-width: 44px; min-height: 44px; } .modal.kui-sheet.kui-sheet--bottom .modal-footer .btn { min-height: var(--kui-ctl-gloved); min-width: 160px; font-size: var(--kui-fs-lg); } /* the sheet motion: up from the foot, in from the side; a fade under reduced motion (the kit's keyframes) */ .modal.kui-sheet--bottom.show .modal-dialog { --kui-sheet-y: 100%; animation: kui-sheet var(--kui-t-sheet) var(--kui-ease-out) 1 both; } .modal.kui-sheet--side.show .modal-dialog { --kui-sheet-x: 100%; --kui-sheet-y: 0; animation: kui-sheet var(--kui-t-sheet) var(--kui-ease-out) 1 both; } @media (max-width: 640px) { .modal.kui-sheet.kui-sheet--side .modal-dialog { width: 100%; } } /* T1: before → after, and who is told */ .kui-cq { display: grid; gap: var(--kui-s4); min-width: 0; } .kui-cq__lead, .kui-pchk__lead, .kui-pin__lead { margin: 0; max-width: 72ch; color: var(--kui-text); } .kui-cq__rows { display: grid; margin: 0; } .kui-cq__r { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--kui-s3); padding: var(--kui-s2) 0; } .kui-cq__r + .kui-cq__r { border-top: 1px solid var(--kui-line); } /* a desk: the value beside its label, not across the sheet */ @media (min-width: 900px) { .kui-cq__r { grid-template-columns: minmax(140px, 240px) minmax(0, 1fr); } } .kui-cq__r dt { font-weight: 400; font-size: var(--kui-fs-md); color: var(--kui-text-soft); } .kui-cq__r dd { display: inline-flex; align-items: baseline; gap: var(--kui-s2); margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; } .kui-cq__b { color: var(--kui-text-soft); } .kui-cq__to { display: inline-flex; align-self: center; color: var(--kui-text-soft); } .kui-cq__a { font-weight: 600; color: var(--kui-ink); } .kui-reg-floor .kui-cq__r dd { font: 600 var(--kui-fs-xl)/1.2 var(--kui-display); } .kui-reg-floor .kui-cq__b { font-weight: 500; } .kui-cq__told { display: flex; align-items: flex-start; gap: var(--kui-s2); margin: 0; font-size: var(--kui-fs-md); color: var(--kui-text); } .kui-cq__told > svg { flex: none; margin-top: 2px; color: var(--kui-text-soft); } @media (max-width: 640px) { .kui-cq__r { grid-template-columns: minmax(0, 1fr); gap: var(--kui-s1); } .kui-cq__r dd { white-space: normal; flex-wrap: wrap; } } /* a 480 px side sheet is narrow whatever the window: label over value, and the before → after wraps, never clipped */ .kui-sheet--side .kui-cq__r { grid-template-columns: minmax(0, 1fr); } .kui-sheet--side .kui-cq__r dd { white-space: normal; flex-wrap: wrap; } @media (pointer: coarse) { .modal.kui-sheet.kui-cq-sheet .modal-footer .btn { min-height: 44px; } } /* office sheets under a finger */ /* T2: the checks the system fills, then the hold bar (floor) or the two-step primary (office) */ .kui-pchk-box { display: grid; gap: var(--kui-s3); min-width: 0; } .kui-pchk { list-style: none; margin: 0; padding: 0; display: grid; } .kui-pchk__r { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--kui-s3); align-items: start; min-height: var(--kui-target); padding: var(--kui-s2) 0; } .kui-pchk__r + .kui-pchk__r { border-top: 1px solid var(--kui-line); } .kui-pchk__ic { display: inline-flex; padding-top: 1px; color: var(--kui-text-soft); } .kui-pchk__r.is-pass .kui-pchk__ic { color: var(--kui-good-text); } .kui-pchk__r.is-block .kui-pchk__ic, .kui-pchk__r.is-block .kui-pchk__why { color: var(--kui-alert-text); } .kui-pchk__r.is-warn .kui-pchk__ic { color: var(--kui-warn-text); } /* a note that never blocks */ .kui-pchk__t { display: grid; gap: 2px; min-width: 0; } .kui-pchk__t > b { font-weight: 600; color: var(--kui-ink); } .kui-pchk__why { font-size: var(--kui-fs-md); color: var(--kui-text-soft); max-width: 72ch; } .kui-pchk__fix { font-size: var(--kui-fs-md); color: var(--kui-text); } .kui-pchk__sum { margin: 0; font-weight: 600; color: var(--kui-text-soft); } .kui-pchk__sum.is-ok { color: var(--kui-good-text); } .kui-holdbar { min-height: var(--kui-ctl-gloved); font-size: var(--kui-fs-lg); } .kui-pchk-sheet .modal-footer > .kui-holdbar { flex: 1 1 100%; } /* the hold, full width in the footer, above Cancel */ @media (min-width: 900px) { .modal.kui-pchk-sheet.kui-sheet--bottom .modal-content { max-width: 720px; margin-inline: auto; } } .kui-holdbar.kap-hold .kap-hold-fill { background: var(--kui-accent-hover); border-right: 0; } .kui-holdbar[aria-disabled="true"] .kap-hold-fill { display: none; } /* the badge + PIN sheet holds a 72 px keypad: taller than a T1 sheet's 60 % */ .modal.kui-sheet.kui-pin-sheet.kui-sheet--bottom .modal-content { max-height: 94vh; } /* a record's ID in a sheet's title stays whole (owner rule: an ID is never broken) */ .kui-nowrap { white-space: nowrap; } /* T3 on the floor: scan the badge, then the PIN on 72 px keys */ .kui-pin-box { display: grid; gap: var(--kui-s4); min-width: 0; } .kui-pin__ask { display: flex; align-items: center; gap: var(--kui-s2); margin: 0; font: 600 var(--kui-fs-xl)/1.2 var(--kui-display); color: var(--kui-ink); } .kui-pin__badge { min-height: var(--kui-ctl-gloved); font-size: var(--kui-fs-xl); } .kui-pin__who { margin: 0; color: var(--kui-text-soft); } .kui-pin__strip { display: flex; align-items: center; flex-wrap: wrap; gap: var(--kui-s2) var(--kui-s3); margin: 0; padding: var(--kui-s2) var(--kui-s4); border-radius: var(--kui-r); background: var(--kui-shell); color: var(--kui-shell-muted); } .kui-pin__strip > b { font: 600 var(--kui-fs-lg) var(--kui-mono); color: var(--kui-shell-text); } .kui-pin__strip > .kui-btn { margin-left: auto; color: var(--kui-shell-text); } .kui-pin { display: grid; justify-items: center; gap: var(--kui-s4); } .kui-pin__dots { display: flex; gap: var(--kui-s3); } .kui-pin__dots > i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--kui-line-ctl); } .kui-pin__dots > i.is-on { background: var(--kui-ink); box-shadow: none; } .kui-pin__pad { display: grid; grid-template-columns: repeat(3, minmax(72px, 112px)); gap: var(--kui-s2); width: min(100%, 352px); } .kui-pin__k { min-height: 72px; border: 1px solid var(--kui-line-ctl); border-radius: var(--kui-r-lg); background: var(--kui-panel); color: var(--kui-ink); font: 600 var(--kui-fs-2xl)/1 var(--kui-display); font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--kui-t-fast) var(--kui-ease), transform var(--kui-t-fast) var(--kui-ease); } .kui-pin__k:active { background: var(--kui-panel-2); transform: scale(var(--kui-m-scale)); } .kui-pin__k:focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; } .kui-pin__k--fn { display: inline-grid; place-items: center; color: var(--kui-text-soft); } .kui-pin__k--go { background: var(--kui-accent); border-color: var(--kui-accent); color: var(--kui-accent-ink); font: 600 var(--kui-fs-lg) var(--kui-font); } .kui-pin__k--go:active { background: var(--kui-accent-hover); } .kui-pin__msg { margin: 0; font-weight: 600; color: var(--kui-alert-text); } /* T3 in the office: the request went to the approver */ .kui-req { display: flex; align-items: center; flex-wrap: wrap; gap: var(--kui-s2) var(--kui-s3); padding: var(--kui-s3) var(--kui-s4); border-radius: var(--kui-r-lg); background: var(--kui-panel-2); color: var(--kui-text); } .kui-req > svg { flex: none; color: var(--kui-text-soft); } .kui-req__t { display: grid; gap: 2px; min-width: 0; flex: 1 1 200px; } .kui-req__t > b { font-weight: 600; color: var(--kui-ink); } .kui-req__t > span { font-size: var(--kui-fs-md); color: var(--kui-text-soft); } /* the empty groups' one quiet line */ .kui-allclear { display: flex; align-items: flex-start; gap: var(--kui-s2); margin: 0 0 var(--kui-s4); font-size: var(--kui-fs-md); color: var(--kui-text-soft); } .kui-allclear > svg { flex: none; margin-top: 2px; } .kui-allclear b { font-weight: 600; color: var(--kui-text); } /* ==== The kit, D-83 step 3 (the Tipping Bays pilot): the station strip, pick tiles, a tile's figure and waits line ==== */ /* the station strip: one ink line under a floor page's header, the place and who is on it (brand ink, design plan §2a) */ .kui-sstrip { display: flex; align-items: center; flex-wrap: wrap; gap: var(--kui-s1) var(--kui-s3); min-height: 48px; min-width: 0; padding: var(--kui-s2) var(--kui-s4); border-radius: var(--kui-r-lg); background: var(--kui-shell); color: var(--kui-shell-muted); } :root[data-theme="dark"] .kui-sstrip { box-shadow: inset 0 0 0 1px var(--kui-shell-line); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kui-sstrip { box-shadow: inset 0 0 0 1px var(--kui-shell-line); } } .kui-sstrip__ic { display: inline-flex; color: var(--kui-shell-muted); } .kui-sstrip__p { font: 680 var(--kui-fs-xl)/1.2 var(--kui-display); color: var(--kui-shell-text); } .kui-sstrip__p.is-unset { font: 600 var(--kui-fs-lg)/1.25 var(--kui-font); color: var(--kui-shell-text); } .kui-sstrip__sub { font-size: var(--kui-fs-md); color: var(--kui-shell-muted); } .kui-sstrip__who { margin-left: auto; font-size: var(--kui-fs-md); color: var(--kui-shell-text); } /* pick tiles: a few places as big tiles, each one whole button; at most four across, one height */ .kui-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kui-s4); grid-auto-rows: 1fr; grid-template-columns: repeat(auto-fit, minmax(max(260px, calc((100% - 3 * var(--kui-s4)) / 4)), 1fr)); } .kui-pick > li { display: grid; min-width: 0; } .kui-pick__t { display: flex; flex-direction: column; align-items: flex-start; gap: var(--kui-s2); min-width: 0; min-height: var(--kui-ctl-gloved); padding: var(--kui-s4); border: 1px solid var(--kui-panel-edge, var(--kui-line)); border-radius: var(--kui-r-lg); background: var(--kui-panel); box-shadow: var(--kui-panel-e, none); color: var(--kui-text); font: inherit; text-align: left; cursor: pointer; transition: background var(--kui-t-fast) var(--kui-ease), transform var(--kui-t-fast) var(--kui-ease); } .kui-pick__h { display: flex; align-items: center; justify-content: space-between; gap: var(--kui-s2); width: 100%; min-width: 0; } .kui-pick__n { font: 680 var(--kui-fs-2xl)/1.1 var(--kui-display); color: var(--kui-ink); white-space: nowrap; } .kui-pick__l { font-size: var(--kui-fs-lg); font-weight: 600; color: var(--kui-text); overflow-wrap: anywhere; } .kui-pick__l.is-soft { font-size: var(--kui-fs-md); font-weight: 400; color: var(--kui-text-soft); } @media (hover: hover) { .kui-pick__t:hover { background: var(--kui-panel-2); } } .kui-pick__t:active { background: var(--kui-panel-2); transform: scale(var(--kui-m-scale)); } .kui-pick__t:focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; } .kui-pick__t.is-on { background: var(--kui-viz-tint); border-color: var(--kui-viz); box-shadow: inset 0 0 0 1px var(--kui-viz); } @media (max-width: 640px) { .kui-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kui-s2); } .kui-pick__t { padding: var(--kui-s3); } } /* a tile's one figure at the page-figure size (26), and its waits-on line in the verb's place, at the verb's height */ .kui-tile__fig .kui-figure b { font-size: var(--kui-fs-2xl); } .kui-tile__fig .kui-figure small { font-size: var(--kui-fs-base); } .kui-tile__waits { display: flex; align-items: center; min-height: var(--kui-ctl); margin: auto 0 0; padding-top: var(--kui-s3); font-size: var(--kui-fs-md); color: var(--kui-text-soft); } /* ==== D-83 step 3, the Home pilot (office register, "rich, not loud"): capped row tracks, the ink day band, the stage bar. Append-only. ==================================================================================================== */ /* rowList({ cap: true }): from a wide list the row's parts stop at --kui-row-span; the row keeps the list's edges */ @container kui-rows (min-width: 1160px) { .kui-rows--cap > .kui-r { padding-inline-end: calc(100% - var(--kui-row-span) - var(--kui-s4)); } } /* dayBand({ ink: true }): the brand ink band, the one rich surface on the Desk. Its parts keep their own rules; only the tokens they read change, so a figure, its unit, its word and its bar stay one component */ .kui-daybox--ink { --kui-panel: var(--kui-shell); --kui-panel-2: var(--kui-shell-2); --kui-line: var(--kui-shell-line); --kui-line-strong: var(--kui-shell-line); --kui-ink: var(--kui-shell-paper); --kui-text: var(--kui-shell-text); --kui-text-soft: var(--kui-shell-muted); --kui-alert: var(--kui-shell-alert); --kui-alert-text: var(--kui-shell-alert); --kui-warn: var(--kui-shell-warn); --kui-warn-text: var(--kui-shell-warn); --kui-good: var(--kui-shell-good); --kui-good-text: var(--kui-shell-good); --kui-info-text: var(--kui-shell-info); --kui-viz: var(--kui-shell-viz); --kui-focus: var(--kui-shell-focus); --kui-panel-edge: transparent; --kui-panel-e: var(--kui-e1); color-scheme: dark; } .kui-daybox--ink .kui-glance__c b { font-size: var(--kui-fs-3xl); } /* the hero figures: 34, 40 at wide (§4) */ .kui-daybox--ink .kui-glance__c b small { font-size: var(--kui-fs-lg); } .kui-wide .kui-daybox--ink .kui-day__t { font-size: 34px; } /* the greeting: 26, 34 at wide (§8a) */ .kui-daybox--ink .kui-live > i { background: var(--kui-shell-muted); } .kui-daybox--ink .kui-live.is-on > i { background: var(--kui-good); } .kui-day__pill { display: inline-flex; align-items: center; padding: 1px 10px; border-radius: var(--kui-r-pill); background: var(--kui-shell-pill); color: var(--kui-shell-pill-text); font-weight: 600; font-variant-numeric: tabular-nums; } .kui-daybox--ink .kui-day__s b.kui-day__pill { color: var(--kui-shell-pill-text); } @container kui-day (max-width: 639px) { .kui-daybox--ink .kui-glance__c b { font-size: var(--kui-fs-2xl); } } /* phone: 2 × 2 at 26 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kui-daybox--ink { --kui-panel-edge: var(--kui-shell-line); --kui-panel-e: none; } } :root[data-theme="dark"] .kui-daybox--ink { --kui-panel-edge: var(--kui-shell-line); --kui-panel-e: none; } /* stageBar: tonnes by stage in one bar, the stage hues as data (each part a [data-stage] marker), then its key */ .kui-sbar { display: grid; gap: var(--kui-s3); min-width: 0; } .kui-sbar__t { margin: 0; display: flex; align-items: baseline; gap: var(--kui-s2); font-size: var(--kui-fs-md); color: var(--kui-text-soft); } .kui-sbar__t b { font: 600 var(--kui-fs-2xl)/1.15 var(--kui-display); color: var(--kui-ink); font-variant-numeric: tabular-nums; } .kui-sbar__bar { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; background: var(--kui-line); } /* the bar is drawn soft (the pastel register of a stage), its key dots keep the full hue: a stage that is most of the material (Received, orange-red at 78%) must not read as an alert across the whole bar */ .kui-sbar__bar > i { display: block; min-width: 4px; flex-basis: 0; background: color-mix(in srgb, var(--c) 58%, var(--kui-panel)); } .kui-sbar__key { list-style: none; margin: 0; padding: 0; display: grid; } .kui-sbar__k { display: grid; grid-template-columns: 10px minmax(0, 1fr) 88px 88px; /* fixed: every key row's columns line up */ align-items: center; gap: var(--kui-s3); min-height: 44px; border-top: 1px solid var(--kui-line); color: var(--kui-text); text-decoration: none; font-size: var(--kui-fs-base); } .kui-sbar__key > li:first-child .kui-sbar__k { border-top: 0; } a.kui-sbar__k:hover { color: var(--kui-ink); text-decoration: none; } a.kui-sbar__k:hover .kui-sbar__l { text-decoration: underline; text-underline-offset: 3px; } a.kui-sbar__k:focus-visible { outline: 2px solid var(--kui-focus); outline-offset: 2px; border-radius: var(--kui-r-sm); } .kui-sbar__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); } .kui-sbar__l { min-width: 0; overflow-wrap: anywhere; } .kui-sbar__v { font-weight: 600; color: var(--kui-ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; } .kui-sbar__n { font-size: var(--kui-fs-sm); color: var(--kui-text-soft); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .kui-sbar__none { margin: 0; font-size: var(--kui-fs-md); color: var(--kui-text-soft); } /* ---- D-83 step 3 pilot, review round 2: a tile never draws an empty line (tiles in a row share one height through the grid, so the padding line is not needed for alignment); a pick tile's chip wraps under the name, never past it */ .kui-tile__l:empty { display: none; } .kui-pick__h { flex-wrap: wrap; } .kui-pick__n { min-width: 0; } /* D-83 Home fix round 2: a figure's next step wraps as text, its last word and chevron together; a figure's label wraps on a phone rather than being cut ("Delivered on contract" in a half-width cell) */ .kui-glance__n { display: inline; } .kui-glance__n > .kui-nowrap { display: inline-flex; align-items: center; gap: 2px; } @media (max-width: 640px) { .kui-glance__l { white-space: normal; overflow: visible; text-overflow: clip; } } /* … and each label keeps two lines' room there, so the figures of a row of cells still start on one line */ @media (max-width: 640px) { .kui-glance__h { align-items: flex-start; min-height: calc(2 * 1.3em); } .kui-glance__l { line-height: 1.3; } } .kui-pick__plate { display: flex; min-height: 1.6em; } /* kept empty when a tile has no plate: the lines stay in line */ /* a floor sheet (kui-reg-floor on the modal) sits outside the page's density, so it carries the floor's 14 px type floor itself (docs/23 §2b; the station and gloved pages' rule in kui-tokens.css) */ .modal.kui-reg-floor { --kui-fs-xs: 14px; --kui-fs-sm: 14px; --kui-fs-md: 14px; } /* ---- Line stations, step 4 fix round: chips whole, bag meters neutral until full, the T2 sheet's floor title ------ */ .kls .kui-tile .kui-badge { white-space: nowrap; } .kls .kui-meter__bar > i { background: var(--kui-text-soft); } .kls .kui-tile:has(.kui-badge--warn) .kui-meter__bar > i { background: var(--kui-warn); } .modal.kui-pchk-sheet.kui-reg-floor .modal-title { font-size: var(--kui-fs-xl); line-height: 1.25; } .kui-pchk-sheet .modal-footer > .kui-pchk__sum { flex: 1 1 100%; margin: 0; } /* a gloved line tablet (D-85, as the bays): the Desk's sidebar toggle and every view switch take the glove target too */ body:has(.page-container.kui-density-gloved .kls) .sidebar-toggle-btn { min-width: var(--kui-ctl-gloved); min-height: var(--kui-ctl-gloved); } .page-container.kui-density-gloved .kls .kui-seg__b { min-width: var(--kui-ctl-gloved); } /* ---- D-83 wave B: a line's day on a time axis (kapdaa.ui.dayTimeline). Neutral work, ink for what runs now; amber only for the part past the shift, always with its words; the hour labels sit under the track, never over a block --- */ .kui-dtl { display: grid; gap: var(--kui-s2); min-width: 0; } .kui-dtl__track { position: relative; height: 24px; margin-bottom: 20px; border-radius: var(--kui-r-sm); background: var(--kui-panel-2); box-shadow: inset 0 0 0 1px var(--kui-line); } .kui-dtl__tick { position: absolute; top: 0; bottom: -4px; width: 0; border-left: 1px solid var(--kui-line); } .kui-dtl__tick > span { position: absolute; top: 30px; transform: translateX(-50%); font-size: var(--kui-fs-xs); color: var(--kui-text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .kui-dtl__tick.is-first > span { transform: none; } .kui-dtl__tick.is-last > span { transform: translateX(-100%); } .kui-dtl__b { position: absolute; top: 3px; bottom: 3px; border-radius: var(--kui-r-sm); background: var(--kui-text-soft); box-shadow: 0 0 0 1px var(--kui-panel); } /* planned work: 3:1 and more against the track (text-soft on panel-2) */ .kui-dtl__b.is-now { background: var(--kui-ink); top: 1px; bottom: 1px; } .kui-dtl__b.is-done { background: var(--kui-panel); box-shadow: inset 0 0 0 2px var(--kui-text-soft); } .kui-dtl__past { position: absolute; top: 0; bottom: 0; right: 0; border-radius: 0 var(--kui-r-sm) var(--kui-r-sm) 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--kui-warn) 30%, transparent) 0 4px, transparent 4px 9px); box-shadow: inset 2px 0 0 var(--kui-warn); } @media (max-width: 480px) { .kui-dtl__tick.is-odd > span { display: none; } } /* a phone labels every second hour */ .kui-dtl__now { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--kui-focus); border-radius: 1px; } .kui-dtl__over { display: flex; align-items: center; gap: var(--kui-s1); margin: 0; font-size: var(--kui-fs-sm); color: var(--kui-warn-text); } /* the chips run as text (inline, wrapping), so a short last line is not a block short of the column */ .kui-dtl__stops { display: block; margin: 0; padding: 0; list-style: none; } .kui-dtl__stop { display: inline-flex; align-items: center; gap: var(--kui-s1); min-height: 28px; padding: 2px var(--kui-s2); margin: 0 var(--kui-s2) var(--kui-s1) 0; border-radius: var(--kui-r-pill); background: var(--kui-neutral-tint); color: var(--kui-text); font-size: var(--kui-fs-sm); } .kui-dtl__stop.is-stop { background: var(--kui-alert-tint); color: var(--kui-alert-text); } /* the baler with AI4Fibres heard: bins to bale and the lot side by side on a wide screen, stacked below it */ .kls-stack { display: grid; gap: var(--kui-s4); align-items: start; min-width: 0; } .kui-wide .kls-stack { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .kls-point__l { font-size: var(--kui-fs-md); font-weight: 600; color: var(--kui-text-soft); margin-right: var(--kui-s2); } @media (max-width: 640px) { .kls-band__c { flex-basis: 100%; margin-left: 0; display: flex; align-items: center; } } body:has(.page-container.kui-density-gloved .kls) .modal :is(.btn-modal-close, .modal-header .close) { min-width: var(--kui-ctl-gloved); min-height: var(--kui-ctl-gloved); } /* Frappe's own "Connection lost" toast rises above the thumb bar (the page's offline banner says it in place) */ body:has(.kls) #alert-container { bottom: calc(var(--kui-ctl-gloved) + 3 * var(--kui-s3)); } /* a gloved tablet: the page fills the screen and the bar sits at the thumb even on a short page */ .page-container.kui-density-gloved .kls { min-height: calc(100dvh - 112px); grid-template-rows: auto auto 1fr auto; } .page-container.kui-density-gloved .kls > .kls-bar { align-self: end; } @media (max-width: 640px) { .modal.kui-pchk-sheet .modal-title { flex: 1; max-width: none; } } .kui-glance__bar.is-over > i { background: var(--kui-warn); } /* over its reference: amber, with the words beside it */ /* wave B r4: on a tablet a list without figure, pips or time columns (the Day plan's prompt rows) does not keep their tracks: its identity and status take the row */ @container kui-rows (min-width: 600px) and (max-width: 880px) { .kui-rows:not(:has(.kui-r__fig, .kui-r__pips, .kui-r__tm)) > .kui-r { grid-template-columns: minmax(0, 1fr) var(--kui-ract-own, var(--kui-ract, 44px)); grid-template-areas: "id act" "st act"; } .kui-rows--icon:not(:has(.kui-r__fig, .kui-r__pips, .kui-r__tm)) > .kui-r { grid-template-columns: 24px minmax(0, 1fr) var(--kui-ract-own, var(--kui-ract, 44px)); grid-template-areas: "ic id act" "ic st act"; } } @container kui-rows (min-width: 600px) and (max-width: 880px) { .kui-rows--icon:not(:has(.kui-r__fig, .kui-r__pips, .kui-r__tm)) > .kui-r:has(.kui-kind) { grid-template-columns: var(--kui-kind) minmax(0, 1fr) var(--kui-ract-own, var(--kui-ract, 44px)); } } /* kapdaa.ui.navBar (owner 2026-10-26): the phone's navigation bar, Home · Tasks · Scan on every page that shows it, drawn by the tab bar's rules above; links look like its buttons; wider than a phone it is not drawn */ @media (min-width: 641px) { .kui-seg.kui-nav { display: none; } } .kui-nav a.kui-seg__b { text-decoration: none; justify-content: center; } .kui-nav a.kui-seg__b:hover { text-decoration: none; } /* the header family at one height on a phone (owner 2026-10-26: My Work, Gatehouse and Reception sat 4 px under Bays and Storage, whose "Needs you 3" takes two lines): the views row holds a two-line label on every page, so no header grows */ @media (max-width: 700px) { .page-container .kui-pageheader.kui-pageheader .kui-ph-right .kui-seg__b { min-height: max(var(--kui-target, 44px), 48px) !important; } } /* over the phone tap floor (kapdaa.css) */ /* a view switch in the header is as tall as the buttons beside it: its outline is a ring, not padding (it was 8 px taller) */ .kui-pageheader .kui-seg { padding: 0; border: 0; box-shadow: inset 0 0 0 1px var(--kui-line-ctl); } .kui-pageheader .kui-seg__b { border-radius: var(--kui-r); }