:root{--blue:#0b5394;--bg:#f4f6f9;--line:#d9dee6;--red:#c62828;--green:#2e7d32;--amber:#e08a00}
*{box-sizing:border-box}body{margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:#1c2733}
.topbar{background:var(--blue);color:#fff;display:flex;align-items:center;gap:16px;padding:10px 16px;flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:1px}.brand span{font-weight:300}
.nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.nav a{color:#fff;text-decoration:none;padding:6px 10px;border-radius:6px}
.nav a:hover{background:rgba(255,255,255,.15)}.nav .user{opacity:.85;font-size:13px}
.container{max-width:1200px;margin:18px auto;padding:0 14px}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:16px}
h1{font-size:22px;margin:6px 0 14px}h2{font-size:17px;margin:4px 0 10px}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:#eef2f7;font-weight:600;white-space:nowrap}
tr:hover td{background:#f8fafc}
.num{text-align:right;font-variant-numeric:tabular-nums}
.btn{display:inline-block;background:var(--blue);color:#fff;border:0;border-radius:7px;padding:9px 16px;font-size:14px;cursor:pointer;text-decoration:none}
.btn.secondary{background:#5c6b7a}.btn.danger{background:var(--red)}.btn:disabled{opacity:.5}
input,select{padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:14px;width:100%}
form.inline{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
form.inline .fld{display:flex;flex-direction:column;gap:4px;min-width:160px;flex:1}
label{font-size:12.5px;color:#4a5a6a}
.flash{background:#e8f2e9;border:1px solid #b8d8bc;color:#215c27;padding:10px 14px;border-radius:8px;margin-bottom:14px}
.badge{display:inline-block;padding:2px 9px;border-radius:12px;font-size:12px;font-weight:600}
.badge.ok{background:#e2f2e4;color:var(--green)}.badge.warn{background:#fdf1dc;color:var(--amber)}
.badge.err{background:#fbe4e4;color:var(--red)}.badge.info{background:#e3edf8;color:var(--blue)}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tile{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;text-decoration:none;color:inherit}
.tile b{display:block;font-size:15px;margin-bottom:4px;color:var(--blue)}
.tile small{color:#5a6b7c}
.scroll{overflow-x:auto}
/* Pipeline summary tiles — shared by cards/index.php, dashboard.php,
   gate/index.php, dncn/index.php: a row of clickable count tiles that
   drill down into that module's own filtered list. */
.pipeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px}
.pipeline a{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  text-decoration:none;color:inherit;text-align:center;cursor:pointer;position:relative;
  transition:box-shadow .1s,border-color .1s}
.pipeline a:hover{border-color:#0b5394;box-shadow:0 2px 8px rgba(11,83,148,.15)}
.pipeline .n{display:block;font-size:26px;font-weight:700;line-height:1.2}
.pipeline .lbl{display:block;font-size:12px;color:#5a6b7c;margin-top:2px}
.pipeline .warn .n{color:#c0392b}
.pipeline .ok .n{color:#2e7d32}
.pipeline a::after{content:"view all →";display:block;font-size:12px;color:#0b5394;margin-top:5px}
/* visually hidden but NOT display:none/hidden — iOS Safari can silently refuse to open the
   file picker via JS .click() on a truly hidden input; this keeps it clickable-by-script */
.vh-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ocr-progress-fill{animation:ocrslide 1.4s ease-in-out infinite}
@keyframes ocrslide{0%{margin-left:-30%}50%{margin-left:70%}100%{margin-left:-30%}}
.foot{text-align:center;color:#63707f;font-size:12.5px;padding:24px}
.login-wrap{max-width:380px;margin:60px auto}
@media(max-width:640px){th,td{padding:6px}}

/* ---------- PWA / Mobile UI (v14) ---------- */
.bottomnav{display:none}
.navToggle{display:none}
/* Top-nav dropdown groups (Data Entry / Registers / Reports / Master &
   Settings) — native <details>/<summary>, so open/close and keyboard access
   work with no JS required; a small script elsewhere just makes only one
   open at a time and closes on an outside click, both purely cosmetic. */
.navgroup{position:relative;display:inline-block}
.navgroup summary{cursor:pointer;list-style:none;color:#fff;padding:6px 10px;border-radius:6px;user-select:none}
.navgroup summary::-webkit-details-marker{display:none}
.navgroup summary::after{content:" ▾";font-size:10px;opacity:.8}
.navgroup summary:hover{background:rgba(255,255,255,.15)}
.navgroup[open] summary{background:rgba(255,255,255,.2)}
.navpanel{display:flex;flex-direction:column;min-width:220px;background:#fff;border-radius:8px;
  box-shadow:0 8px 20px rgba(0,0,0,.2);padding:6px;margin-top:4px;position:absolute;left:0;top:100%;z-index:60}
.navpanel a{color:#1c2733;text-decoration:none;padding:9px 12px;border-radius:6px;font-size:14px;white-space:nowrap}
.navpanel a:hover{background:#eef2f7}
@media (max-width: 820px){
  body{padding-bottom:74px}
  .topbar{position:sticky;top:0;z-index:50}
  /* Full link list (Dashboard/Masters/.../Logout) would otherwise just wrap
     onto its own row per link and push all page content off-screen below the
     fold — collapse it behind a ☰ toggle; the bottomnav below still covers
     the 5 most-used links without opening this menu at all. */
  .navToggle{display:block;background:none;border:none;color:#fff;font-size:22px;
    padding:6px 10px;cursor:pointer;margin-left:auto;line-height:1}
  .nav{display:none;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;background:var(--blue);
    box-shadow:0 8px 16px rgba(0,0,0,.2);padding:6px 0;z-index:55}
  .nav.open{display:flex}
  .nav a,.nav .user{border-radius:0;width:100%;padding:12px 16px;box-sizing:border-box}
  .nav a{font-size:14.5px}
  /* On mobile the whole .nav is already the dropdown overlay — a group's own
     panel must expand inline within it, not float as a second absolute layer
     (which would clip/overlap on a narrow screen). */
  .navgroup{position:static;display:block;width:100%}
  .navgroup summary{padding:12px 16px;color:#fff;font-size:14.5px}
  .navpanel{position:static;box-shadow:none;background:rgba(0,0,0,.12);border-radius:0;margin:0;padding:0 0 6px;min-width:0}
  .navpanel a{color:#fff;padding:10px 16px 10px 30px;font-size:13.5px}
  .navpanel a:hover{background:rgba(255,255,255,.1)}
  input, select, button, .btn{min-height:44px;font-size:16px}
  .btn{padding:12px 18px}
  table{font-size:13.5px}
  .card{padding:14px}
  .bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:#fff;border-top:1px solid #d9dee6;justify-content:space-around;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -2px 10px rgba(0,0,0,.06)}
  .bottomnav a{display:flex;flex-direction:column;align-items:center;gap:2px;
    text-decoration:none;color:#5a6b7c;font-size:12.5px;min-width:56px;padding:4px 6px;border-radius:10px}
  .bottomnav a span{font-size:22px;line-height:1}
  .bottomnav a.scanbtn{background:#0b5394;color:#fff;margin-top:-18px;border-radius:16px;
    padding:10px 14px;box-shadow:0 4px 12px rgba(11,83,148,.35)}
  .bottomnav a.scanbtn span{font-size:26px}
  .inline{flex-direction:column}
  .fld{max-width:100% !important;width:100%}
}

/* ---------- UX polish (audit 2026-10-05) ---------- */
/* keyboard focus is always visible */
a:focus-visible,button:focus-visible,.btn:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid #ffb300;outline-offset:2px}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
textarea{padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:14px;width:100%;font-family:inherit}
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;accent-color:var(--blue);vertical-align:middle}
/* buttons react to hover / press, and show when they are working */
.btn{transition:filter .12s,transform .05s}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:translateY(1px)}
.btn:disabled,.btn.is-busy{opacity:.6;cursor:not-allowed;filter:none}
.btn.is-busy{pointer-events:none}
/* readable contrast (WCAG AA) for badges and hint text */
.badge.ok{color:#1f6b24}.badge.warn{color:#8a5200}.badge.err{color:#b3261e}
.foot{color:#63707f}
/* messages: green = done, amber = done with a warning, red = not done */
.flash{overflow-wrap:anywhere}
.flash.warn{background:#fdf1dc;border-color:#f0d8ab;color:#7a4a00}
.flash.err{background:#fbe4e4;border-color:#f0b4b4;color:#8f1d1d;font-weight:600}
.flash .x{float:right;margin-left:10px;background:none;border:0;font-size:18px;line-height:1;cursor:pointer;color:inherit;opacity:.6;min-height:0;padding:0 4px}
.flash .x:hover{opacity:1}
/* where am I: current page highlighted in the menus */
.nav a.active,.navgroup.active > summary{background:rgba(255,255,255,.22);font-weight:600}
.navpanel a.active{background:#e3edf8;color:var(--blue);font-weight:600}
@media (max-width:820px){
  .navpanel a.active{background:rgba(255,255,255,.18);color:#fff}
  .bottomnav a.active{color:var(--blue);font-weight:700}
  .bottomnav a.scanbtn.active{color:#fff}
  .scroll{-webkit-overflow-scrolling:touch}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
label small{font-size:inherit;color:#63707f}

/* Header, one row: brand · menu groups in working order · (right) search + user menu. */
.topbar{flex-wrap:nowrap;gap:10px;padding:8px 16px}
.nav{flex:1;gap:2px;flex-wrap:nowrap;min-width:0}
.nav > a,.navgroup > summary{white-space:nowrap;font-size:14.5px;padding:7px 11px}
.navhead{display:block;padding:8px 12px 3px;font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#5a6b7c}
.navpanel{max-height:calc(100vh - 70px);overflow-y:auto}
.navright{margin-left:auto;display:flex;align-items:center;gap:6px}
.gsearch{display:flex;margin:0}
.gsearch input{padding:6px 10px;font-size:13px;width:170px;border-radius:6px;border:none;min-height:0}
.navuser .navpanel{left:auto;right:0;min-width:200px}
.navuser .navpanel a.logout{color:#b3261e;font-weight:600}
@media (max-width:1180px) and (min-width:821px){
  .nav > a,.navgroup > summary{font-size:13.5px;padding:7px 8px}
  .gsearch input{width:120px}
}
@media (max-width:820px){
  .topbar{flex-wrap:wrap}
  .nav{flex:none;flex-wrap:nowrap}
  .navright{margin:0;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid rgba(255,255,255,.18)}
  .gsearch{padding:10px 16px}.gsearch input{width:100%;min-height:42px;font-size:16px}
  .navhead{color:rgba(255,255,255,.65);padding:8px 16px 2px 30px}
  .navpanel{max-height:none;overflow:visible}
  .navuser .navpanel a.logout{color:#fff}
}
.navcount{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:#fff;color:var(--blue);font-size:11px;font-weight:700;line-height:18px;text-align:center;margin-left:2px}

/* UX audit 2026-10-06 — tap targets, text size, contrast, disabled states */
.navhead{color:#5a6b7c}
.bottomnav a{font-size:12.5px}
.flash .x{min-width:32px;min-height:32px;margin:-6px -8px -6px 10px;padding:0 6px;border-radius:6px}
.flash .x:hover{background:rgba(0,0,0,.06)}
.btn:disabled,button:disabled{cursor:not-allowed}
details > summary{padding:8px 0;min-height:36px;display:flex;align-items:center;gap:6px}
.navgroup > summary{min-height:0;padding:7px 11px;display:inline-block}
h1 a,h2 a,h3 a,p > a.back,.card > p:first-child > a{display:inline-block;padding:4px 6px;margin:-4px -6px;border-radius:6px}
table .btn{min-height:32px;padding:6px 12px}
@media (max-width:820px){
  table .btn{min-height:40px}
  .bottomnav a{font-size:12.5px}
}

/* ===================== Design system (UI/UX audit 2026-10-14) =====================
   One font, one type scale, one button family and one table/filter style for every page.
   Inter is self-hosted (SIL OFL, assets/fonts/Inter-OFL.txt); icons are Lucide SVGs (kdms-icons.js). */
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans',sans-serif;
  --text:#1c2733;--muted:#5a6b7c;--primary:#0b5394;--primary-600:#094579;--primary-50:#eef4fb;
  --border:#d9dee6;--field:#c5d0dc;--head:#f1f4f8;--danger:#c62828;--danger-600:#a61f1f;
  --r:8px;--shadow-sm:0 1px 2px rgba(16,24,40,.08);--ring:0 0 0 3px rgba(11,83,148,.18)}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:14px;line-height:1.5;color:var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'cv11'}
/* form controls never fall back to the browser's own 13.3px font */
button,input,select,textarea{font-family:inherit;font-size:14px;line-height:1.35;color:inherit}
h1{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
h2{font-size:17px;font-weight:650;line-height:1.35}
h3{font-size:15px;font-weight:650}
td,th,.num,.pipeline .n{font-variant-numeric:tabular-nums}
.ic{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.18em;flex-shrink:0}

/* ---- buttons: one family. primary = filled blue, secondary = white with blue outline (never grey —
   grey looked switched off), danger = red. Same height everywhere; .sm and in-table buttons are compact. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 14px;
  font-size:14px;font-weight:600;line-height:1.25;text-align:center;vertical-align:middle;
  background:var(--primary);color:#fff;border:1px solid var(--primary);border-radius:var(--r);
  box-shadow:var(--shadow-sm);cursor:pointer;text-decoration:none;user-select:none;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;transition:background-color .15s,border-color .15s,box-shadow .15s,transform .08s}
.btn:hover{background:var(--primary-600);border-color:var(--primary-600);filter:none;text-decoration:none}
.btn:active{transform:scale(.97)}
.btn.secondary{background:#fff;color:var(--primary);border-color:#b9c7d8}
.btn.secondary:hover{background:var(--primary-50);border-color:var(--primary)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger:hover{background:var(--danger-600);border-color:var(--danger-600)}
.btn[style*="background"]{border-color:transparent}
.btn[style*="background"]:hover{filter:brightness(.92)}
.btn.sm,table .btn{min-height:30px;padding:4px 10px;font-size:13px;gap:5px}
.btn:disabled,.btn.is-busy,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
/* plain <button>s inside pages look like secondary buttons instead of the browser default */
main button:not(.btn):not(.x):not(.tt-clear):not([class*=nav]),
main input[type=submit]:not(.btn),main input[type=button]:not(.btn){
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 14px;
  font-weight:600;background:#fff;color:var(--primary);border:1px solid #b9c7d8;border-radius:var(--r);
  box-shadow:var(--shadow-sm);cursor:pointer;touch-action:manipulation;transition:background-color .15s,border-color .15s}
main button:not(.btn):not(.x):not(.tt-clear):not([class*=nav]):hover,
main input[type=submit]:not(.btn):hover,main input[type=button]:not(.btn):hover{background:var(--primary-50);border-color:var(--primary)}
main table button:not(.btn):not(.x):not(.tt-clear){min-height:30px;padding:4px 10px;font-size:13px}

/* ---- links inside tables: clearly tappable, with a hit area (was 16px-tall plain text) */
main td a:not(.btn){display:inline-block;padding:3px 5px;margin:-3px -5px;border-radius:6px;font-weight:500;
  text-decoration:none;color:var(--primary);min-height:24px}
main td a:not(.btn):hover{background:var(--primary-50);text-decoration:underline}

/* ---- form fields */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{
  min-height:36px;padding:7px 10px;border:1px solid var(--field);border-radius:var(--r);background-color:#fff;
  transition:border-color .15s,box-shadow .15s}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:var(--ring);outline:none}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
input::placeholder,textarea::placeholder{color:#8794a3}
select{cursor:pointer}
input[type=file]{font-size:13px;max-width:100%}
input[type=file]::file-selector-button{font:inherit;font-weight:600;color:var(--primary);background:#fff;border:1px solid #b9c7d8;
  border-radius:6px;padding:6px 10px;margin-right:8px;cursor:pointer}
input[type=file]::file-selector-button:hover{background:var(--primary-50)}
label{font-size:13px;font-weight:600;color:#3d4b5c}
label small{font-weight:400}
form.inline{gap:12px}
form.inline .fld{gap:5px}

/* ---- tables: quiet header, clear rows, numbers lined up */
table{font-size:14px}
th{background:var(--head);color:#3d4b5c;font-size:13px;font-weight:600;border-bottom:1px solid #cfd8e3;padding:9px 10px}
td{padding:9px 10px}
tr:hover td{background:#f7f9fc}
/* sortable headers (kdms-tables.js): faint up/down = can sort, blue arrow = sorted this way */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable:hover{background:#e6ecf3;color:var(--text)}
th.sortable::after{content:"";display:inline-block;width:12px;height:12px;margin-left:5px;vertical-align:-1px;
  background-color:currentColor;opacity:.35;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E") center/contain no-repeat}
th.sortable[aria-sort=ascending],th.sortable[aria-sort=descending]{color:var(--primary)}
th.sortable[aria-sort=ascending]::after,th.sortable[aria-sort=descending]::after{opacity:1;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E")}
th.sortable[aria-sort=descending]::after{transform:rotate(180deg)}
th.sortable:focus-visible{outline:3px solid #ffb300;outline-offset:-3px}
/* table toolbar: search box, column-filter switch, row count, clear */
.tt-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
input.tt-search{width:280px;max-width:100%;padding-left:34px !important;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b7c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 11px 50%/16px no-repeat}
.tt-toggle[aria-pressed=true]{background:var(--primary-50);border-color:var(--primary)}
.tt-count{font-size:13px;color:var(--muted)}
.tt-clear{background:none;border:0;padding:6px 4px;color:var(--primary);font-size:13px;font-weight:600;cursor:pointer;text-decoration:underline}
.kdms-filterrow th{background:#f8fafc;padding:5px 6px;border-bottom:1px solid var(--border)}
.kdms-filterrow input{width:100%;min-width:60px;max-width:160px;font-size:13px;font-weight:400}
.kdms-filterrow input:not([type=checkbox]){min-height:30px !important;padding:4px 8px !important}

/* ---- surfaces */
.card{border-radius:12px;box-shadow:var(--shadow-sm)}
.pipeline a{border-radius:12px;box-shadow:var(--shadow-sm)}
.pipeline .lbl{font-size:13px}
.pipeline a::after{font-size:12px;font-weight:600}
.tile{box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
.tile:hover{border-color:var(--primary);box-shadow:0 2px 8px rgba(11,83,148,.15)}
.badge{font-size:12px;line-height:18px}
.nav > a,.navgroup > summary{font-size:14px;font-weight:500}
.navpanel a{font-size:14px}

@media (max-width:820px){
  body{font-size:15px}
  .btn,main button:not(.btn):not(.x):not(.tt-clear):not([class*=nav]),main input[type=submit]{min-height:44px;font-size:15px}
  .btn.sm,table .btn,main table button:not(.btn):not(.x):not(.tt-clear){min-height:40px;font-size:14px}
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{min-height:44px;font-size:16px}
  input.tt-search{width:100%}
  .kdms-filterrow input:not([type=checkbox]){min-height:36px !important}
  main td a:not(.btn){min-height:32px;padding:6px}
}
@media print{.tt-bar,.kdms-filterrow{display:none !important}th.sortable::after{display:none}}
/* status tab rows scroll sideways on a phone, but wrap onto a second line on a PC */
@media (min-width:821px){.statusrow{flex-wrap:wrap;overflow:visible !important}}
/* server-sorted headers (Cards list): the whole label is the link, arrow drawn like the others */
th.sortable > a{display:inline-block;padding:5px 0;color:inherit;text-decoration:none}
small{font-size:12px}
p > a.back,a.back{font-size:14px}
/* wrapped rows of buttons never touch each other */
main .btn{margin-block:3px}
/* every standalone link gets at least a 24px-tall tap area without moving the text (zero specificity,
   so components with their own padding keep it) */
:where(main) :where(a:not(.btn)){padding-block:4px}
main td a:not(.btn){min-width:24px;text-align:center}
th.sortable > a{min-width:24px}
/* badges used as links (search result jumps) are chips with a proper tap area */
a.badge{padding:4px 12px;margin-block:2px;text-decoration:none}
a.badge:hover{filter:brightness(.95)}