/*
 * KD-CMMS — Copyright (c) 2026 Kevin Dennis. All rights reserved.
 * Proprietary and confidential. Not open source. See LICENSE.
 */
/* interaction.css - what a mouse is told before it commits to a click. */

/* Native controls the browser leaves with an arrow. */
select,
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="range"],
input[type="color"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="image"],
summary {
  cursor: pointer;
}

/* Anything announcing itself as interactive to assistive technology is
   interactive to a mouse as well; the two must not disagree. */
[role="button"],
[role="link"],
[role="tab"],
[role="menuitem"],
[role="option"],
[role="switch"],
[role="checkbox"],
[role="radio"] {
  cursor: pointer;
}

/* A label wired to a tick box is a click target for that box - clicking the word toggles it - so it takes the same cursor. */
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]),
label:has(> select) {
  cursor: pointer;
}

/* Disabled means disabled, and it outranks everything above. Only the two
   forms that actually say so are matched: a page's own .is-disabled class is
   used for gap markers and spacers as well as for spent controls, and
   "not allowed" over an ellipsis in a pager is a smaller lie than no cursor
   at all but a lie all the same. */
:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

/* ========================================================================= * ON A TOUCH SCREEN The complaint was that the app "moves around all over. */
@media (pointer: coarse) and (max-width: 1024px) {
  html {
    /* Stops iOS inflating text of its own accord when the phone turns. */
    -webkit-text-size-adjust: 100%;
  }

  body {
    /* Pan and pinch, but no double-tap zoom. */
    touch-action: manipulation;
    /* No rubber-band chaining to the page behind, and no accidental
       pull-to-refresh part-way through filling a form. */
    overscroll-behavior-y: contain;
  }

  /* 16px is the exact threshold Safari uses. At 15.9px it zooms; at 16px it
     does not. Tick boxes, radios, sliders, colour wells and file pickers are
     excluded because they never trigger it and sizing them here would only
     disturb layouts that are already right.

     !important, deliberately, and this is the case that earns it. Almost every
     control in the product is sized by a utility class - `text-sm`, `.rq-field` - and a class beats a bare element selector, so without it the rule was
     applied and simply lost: the text inputs came up to 16px and all 56 of the
     user list's dropdowns stayed at 12px, which is most of the problem. This
     is not a design preference being forced over a page's own; it is the floor
     below which the browser takes the screen away from the person using it.
     Verified before reaching for it that no control anywhere in the product is
     already larger than 16px, so nothing is being shrunk. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ---- Sideways movement belongs to the thing you are touching --------- The page must not slide; the wide things inside it must. */
  html, body {
    overscroll-behavior-x: none;
  }

  /* The content area of every page. */
  main {
    overflow-x: hidden;
  }

  /* Wide things scroll within themselves and stop there, rather than handing
     the gesture up to whatever is behind them once they reach their end. */
  .db-strip,
  .wo-scroll, .as-scroll, .pt-scroll, .pm-scroll, .us-scroll, .dp-scroll,
  .db-scroll, .db-tab-row {
    overscroll-behavior-x: contain;
  }
}

/* ---- No bare browser date or time control anywhere ----
   A native date input in default chrome is the one control that most
   reliably reads as unfinished, and until now each page styled its own or
   did not. One rule, on the theme tokens, for every page. A page that
   already styles its own control keeps it: this is lower specificity than
   any class selector. */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
  background: var(--db-surface, #fff); color: var(--db-text, #0f172a);
  border: 1px solid var(--db-border-strong, #cbd5e1); border-radius: .5rem;
  padding: .4rem .6rem; font-size: .84rem; font-variant-numeric: tabular-nums;
  font-family: inherit; line-height: 1.25;
}
input[type="date"]:focus, input[type="time"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus {
  outline: none; border-color: var(--db-accent, #4f46e5); box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
}
html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="datetime-local"], html[data-theme="dark"] input[type="month"] { color-scheme: dark; }

/* ---- The one Back control ----
   The same button on every screen: the app header, the Job Safety page, the
   request form and its status page. It used to be drawn three ways - a lucide
   arrow with a label, a text "← Back", and a pill reading "Back to My Day" - which looked like three products. One rule, here, because this sheet is the
   one every page loads. A page with its own colour tokens maps them onto the
   --db-* names the rule reads. On a phone the arrow carries it alone. */
.kd-back {
  display: inline-flex; align-items: center; gap: .4rem; flex: none;
  padding: .34rem .7rem .34rem .55rem; border-radius: .7rem;
  font: inherit; font-size: .8rem; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none;
  color: var(--db-text-2, #475569);
  background: var(--db-surface, #fff);
  border: 1px solid var(--db-border, #e2e8f0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  transition: border-color .16s, color .16s, background .16s;
  -webkit-tap-highlight-color: transparent;
}
.kd-back:hover { border-color: #a5b4fc; color: var(--db-text, #0f172a); }
.kd-back:focus-visible { outline: 2px solid var(--db-accent, #4f46e5); outline-offset: 2px; }
.kd-back .kd-back-icon { width: 16px; height: 16px; flex: none; }
@media (max-width: 640px) {
  .kd-back-label { display: none; }
  .kd-back { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: .75rem; }
  .kd-back .kd-back-icon { width: 18px; height: 18px; }
}

/* ---- The photo viewer (public/js/kd-lightbox.js) ---- A photo opens here, in place. */
.kd-lightbox {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  background: rgba(5, 7, 12, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 3.5rem 0 3rem;
}
.kd-lightbox[hidden] { display: none; }
.kd-lightbox img { max-width: 100vw; max-height: calc(100vh - 6.5rem); object-fit: contain; border-radius: 6px; background: #000; }
.kd-lightbox-back { position: absolute; top: calc(.75rem + env(safe-area-inset-top)); left: .75rem; }
.kd-lightbox .kd-back { --db-surface: rgba(255, 255, 255, .1); --db-border: rgba(255, 255, 255, .18); --db-text-2: #f1f5f9; --db-text: #fff; box-shadow: none; }
.kd-lightbox-cap {
  position: absolute; left: 0; right: 0; bottom: calc(.9rem + env(safe-area-inset-bottom)); text-align: center;
  color: #cbd5e1; font-size: .8rem; padding: 0 1rem;
}
.kd-lightbox-cap[hidden] { display: none; }
body.kd-lightbox-open { overflow: hidden; }

/* ---- One page header, one heading, one button set ----
   Every list and detail page used to spell its own: five h1 classes, four
   subtitle classes, a button class per page (as-btn, pt-btn, pd-btn, cx-btn,
   db-btn) and a dozen hand-typed indigo utility strings. These are the ones.
   Colours are tokens, so dark mode follows without a per-page override. */
.kd-h1 { font-size: 1.5rem; line-height: 2rem; font-weight: 700; letter-spacing: -.01em; color: var(--db-text, #0f172a); margin: 0; }
.kd-h1.is-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-sub { font-size: .875rem; line-height: 1.25rem; color: var(--db-text-2, #64748b); margin: .25rem 0 0; }
.kd-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.kd-page-head > .kd-page-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.kd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem .85rem; border-radius: .6rem; font: inherit; font-size: .84rem; font-weight: 600; line-height: 1.25;
  color: var(--db-text-2, #475569); background: var(--db-surface, #fff); border: 1px solid var(--db-border, #e2e8f0);
  cursor: pointer; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .15s, color .15s, background .15s, filter .15s;
}
.kd-btn:hover { border-color: var(--db-accent, #4f46e5); color: var(--db-accent-fg, #4f46e5); }
.kd-btn:focus-visible { outline: 2px solid var(--db-accent, #4f46e5); outline-offset: 2px; }
.kd-btn:disabled { opacity: .5; cursor: default; }
.kd-btn svg, .kd-btn i { width: .95rem; height: .95rem; flex: none; }
.kd-btn.is-primary { background: var(--db-accent, #4f46e5); border-color: var(--db-accent, #4f46e5); color: var(--db-on-accent, #fff); }
.kd-btn.is-primary:hover { filter: brightness(1.08); color: #fff; }
.kd-btn.is-danger { background: var(--db-bad-soft, #fff1f2); border-color: #fecdd3; color: #b91c1c; }
.kd-btn.is-danger:hover { background: #ffe4e6; color: #9f1239; border-color: #fda4af; }
.kd-btn.is-quiet { background: transparent; border-color: transparent; box-shadow: none; }
.kd-btn.is-quiet:hover { background: var(--db-surface-2, #f1f5f9); }
.kd-btn.is-sm { padding: .35rem .65rem; font-size: .78rem; }
html[data-theme="dark"] .kd-btn.is-danger { background: rgba(225, 29, 72, .12); border-color: rgba(225, 29, 72, .35); color: #fda4af; }

/* ---- Form controls, once ----
   Every text field, select, textarea, tick box and file picker takes the
   same shape and the theme tokens, so a page never ships the browser's own
   chrome and dark mode never shows a white box. Sizes stay with the page;
   this is colour, radius, arrow, focus and file button only. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]), select, textarea) {
  background-color: var(--db-surface, #fff); color: var(--db-text, #0f172a);
  border-color: var(--db-border-strong, #cbd5e1); border-radius: .6rem;
  font-family: inherit;
}
:where(input, select, textarea)::placeholder { color: var(--db-text-3, #64748b); opacity: 1; }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea):focus-visible {
  outline: none; border-color: var(--db-accent, #4f46e5); box-shadow: 0 0 0 3px rgba(99, 102, 241, .18);
}
:where(input, select, textarea):disabled { opacity: .55; }
select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: .8rem;
  padding-right: 2rem;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--db-accent, #4f46e5); width: 1rem; height: 1rem; }
input[type="file"] { font-size: .8rem; color: var(--db-text-2, #64748b); }
input[type="file"]::file-selector-button {
  font: inherit; font-size: .8rem; font-weight: 600; margin-right: .6rem; cursor: pointer;
  padding: .4rem .75rem; border-radius: .55rem; border: 1px solid var(--db-border, #e2e8f0);
  background: var(--db-surface, #fff); color: var(--db-text-2, #475569);
}
input[type="file"]::file-selector-button:hover { border-color: var(--db-accent, #4f46e5); color: var(--db-accent-fg, #4f46e5); }
html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
  background-color: var(--db-surface, #111827); color: var(--db-text, #e5e7eb); border-color: var(--db-border-strong, #334155);
}
html[data-theme="dark"] input[type="file"]::file-selector-button { background: var(--db-surface-2, #0f1626); color: var(--db-text-2, #cbd5e1); border-color: var(--db-border, #26314a); }
html[data-theme="dark"] :is(input, select, textarea) { color-scheme: dark; }

/* ---- One table ----
   The storeroom's table was the best of five; this is that table for every
   list. Pages keep their own row extras (a safety stripe, a pointer cursor). */
.kd-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.kd-table th {
  position: sticky; top: 0; z-index: 3; text-align: left; white-space: nowrap;
  background: var(--db-surface-2, #f8fafc); border-bottom: 1px solid var(--db-border, #e9edf3);
  padding: .5rem .8rem; font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--db-text-2, #64748b);
}
.kd-table th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.kd-table th a:hover { color: var(--db-accent-fg, #4f46e5); }
.kd-table th.num, .kd-table td.num { text-align: right; }
.kd-table td { padding: .5rem .8rem; border-bottom: 1px solid var(--db-border, #f1f5f9); color: var(--db-text-2, #64748b); vertical-align: middle; }
.kd-table tbody tr:hover td { background: var(--db-surface-2, #f8fafc); }
.kd-table tbody tr:last-child td { border-bottom: 0; }

/* ---- Motion that confirms ----
   Small, fast, and only on the thing that was touched: a ticked task pops,
   a saved row flashes, a dropped tile settles, a new row fades in. */
@keyframes kd-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
@keyframes kd-flash { 0% { background-color: var(--db-accent-soft, #eef2ff); } 100% { background-color: transparent; } }
@keyframes kd-settle { 0% { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(15, 23, 42, .18); } 100% { transform: translateY(0); box-shadow: none; } }
@keyframes kd-fade-in { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
input[type="checkbox"]:checked { animation: kd-pop .28s cubic-bezier(.22, 1, .36, 1); }
.kd-flash, .kd-flash > td { animation: kd-flash 1s ease-out; }
.kd-settle { animation: kd-settle .35s cubic-bezier(.22, 1, .36, 1); }
.kd-fade-in { animation: kd-fade-in .25s ease-out; }
.jb-task .jb-task-label { transition: color .25s, text-decoration-color .25s; }
.kd-btn, .kd-empty-btn, .as-tab, .tp-chip, .cc-room { transition: transform .12s, border-color .15s, color .15s, background .15s; }
.kd-btn:active, .kd-empty-btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"]:checked, .kd-flash, .kd-flash > td, .kd-settle, .kd-fade-in { animation: none; }
  .kd-btn:active, .kd-empty-btn:active { transform: none; }
}

/* ---- Icons and headings, one weight ---- */
.kd-h1 > svg, .kd-h1 > i { width: 1.25rem; height: 1.25rem; flex: none; color: var(--db-accent-fg, #4f46e5); }
.kd-sub { max-width: 72ch; }

/* A hidden button is hidden, whatever display the button class sets. */
.kd-btn[hidden], .kd-empty-btn[hidden] { display: none; }

/* A field has an edge. Tailwind's border-slate-300 sets a colour and no
   width, so twenty-five fields on the PM builder had no border at all; the
   element rule gives every field one and a page that wants none says
   border-0 as before. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"])), select, textarea { border-width: 1px; border-style: solid; }
/* Translucent white panels follow the surface in dark mode too. */
html[data-theme="dark"] :is(.bg-white\/90, .bg-white\/80, .bg-white\/70) { background-color: color-mix(in srgb, var(--db-surface, #111827) 90%, transparent); border-color: var(--db-border, #26314a); }
/* And room inside it. A page's own padding utilities still win. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"])), select, textarea { padding: .45rem .65rem; line-height: 1.3; }



/* ---- A list page is a workspace --------------------------------------
   Above 1024px the page is exactly one screen tall: what sits above the list
   keeps its size, the list takes the rest and scrolls inside its own frame,
   and its footer stays at the bottom. Whatever a filter leaves, the frame is
   the same size. A page showing cards instead of a list keeps its natural
   height. */
@media (min-width: 1024px) {
  /* height: 100%, not calc(100vh - 8rem). The frame has to be exactly as tall
     as the box it sits in: a pixel either way is the difference between one
     scroller and two, and two scrollers is what a wheel feels as the screen
     jumping. Subtracting the header and main's padding from the viewport is
     right at 100% zoom on a whole-pixel window and wrong by a fraction
     anywhere else. main is flex-1 in a column that runs up to html.h-full, so
     its height is definite and 100% resolves against its content box exactly. */
  .kd-workspace.has-list { display: flex; flex-direction: column; height: 100%; }
  .kd-workspace.has-list > * { flex: none; }
  .kd-workspace.has-list > .kd-ws-list { flex: 1 1 auto; min-height: 9rem; display: flex; flex-direction: column; }
  .kd-workspace.has-list > .kd-ws-list > * { flex: none; }
  .kd-workspace.has-list .kd-ws-scroll { flex: 1 1 auto; min-height: 0 !important; max-height: none !important; overflow: auto; }
  .kd-ws-foot { margin-top: auto; }
}
.kd-ws-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .6rem 1rem; border-top: 1px solid var(--db-border, #e9edf3);
  background: var(--db-surface-2, #f8fafc); font-size: .76rem; color: var(--db-text-2, #475569); font-variant-numeric: tabular-nums; }
.kd-ws-foot strong { color: var(--db-text, #0f172a); }

/* ---- The numbers above a list. Each one is a filter; the lit one is where
   you are standing. Same tiles on every list page. ---------------------- */
.kd-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: .7rem; margin-bottom: 1rem; }
@media (max-width: 1200px) { .kd-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .kd-kpis { grid-template-columns: repeat(2, 1fr); } }
.kd-kpi { display: block; text-decoration: none; background: var(--db-surface, #fff); border: 1px solid var(--db-border, #e9edf3);
  border-radius: .85rem; padding: .7rem .95rem; transition: border-color .15s, transform .15s; }
a.kd-kpi:hover { border-color: var(--db-accent, #4f46e5); transform: translateY(-1px); }
.kd-kpi.is-on { border-color: var(--db-accent, #4f46e5); box-shadow: 0 0 0 1px var(--db-accent, #4f46e5); }
.kd-kpi-l { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--db-text-3, #64748b); }
.kd-kpi-v { font-size: 1.5rem; font-weight: 800; color: var(--db-text, #0f172a); line-height: 1.15; margin-top: .15rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kd-kpi-v.is-bad { color: var(--db-bad-fg, #e11d48); }
.kd-kpi-v.is-warn { color: var(--db-warn-fg, #d97706); }
.kd-kpi-n { font-size: .66rem; color: var(--db-text-3, #64748b); margin-top: .2rem; }

/* ---- A person is a face, not only a name -------------------------------
   Initials in a circle whose hue comes from the name, so the same person is
   the same colour on the job, the list and the people page. */
.kd-av { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.65rem; height: 1.65rem; border-radius: 50%;
  font-size: .6rem; font-weight: 800; letter-spacing: .02em; line-height: 1; vertical-align: middle; user-select: none;
  background: color-mix(in oklab, hsl(var(--av-h, 220) 70% 50%) 18%, var(--db-surface, #fff)); color: hsl(var(--av-h, 220) 55% 34%); }
.kd-av.is-lg { width: 2.25rem; height: 2.25rem; font-size: .78rem; }
.kd-av.is-none { background: transparent; border: 1.5px dashed var(--db-border-strong, #cbd5e1); }
html[data-theme="dark"] .kd-av { background: color-mix(in oklab, hsl(var(--av-h, 220) 70% 60%) 24%, var(--db-surface, #111827)); color: hsl(var(--av-h, 220) 85% 80%); }
html[data-theme="dark"] .kd-av.is-none { background: transparent; }
.kd-av-row { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; max-width: 100%; vertical-align: middle; }

/* ---- Row actions show themselves when the row is looked at ------------
   A remove button on every row is forty remove buttons. On a touch screen
   there is no hover, so there they stay visible. */
.kd-table .row-acts { opacity: 0; transition: opacity .12s; }
.kd-table tr:hover .row-acts, .kd-table tr:focus-within .row-acts { opacity: 1; }
@media (hover: none) { .kd-table .row-acts { opacity: 1; } }

/* ---- A machine's photo beside its name --------------------------------- */
.kd-thumb { width: 2.25rem; height: 2.25rem; border-radius: 8px; object-fit: cover; flex: none; background: var(--db-surface-3, #f1f5f9); border: 1px solid var(--db-border, #e9edf3); }

/* ---- A long settings page carries its own index ------------------------
   Sits to the left of the centred column on a wide screen and follows the
   scroll. On anything narrower it is simply not there. */
.st-wrap { position: relative; }
.kd-index { display: none; }
@media (min-width: 1400px) {
  .kd-index { display: block; position: absolute; left: -14rem; top: 0; bottom: 0; width: 12rem; }
  .kd-index-in { position: sticky; top: .25rem; display: flex; flex-direction: column; gap: .1rem; padding-top: .35rem; }
  .kd-index-in a { display: block; padding: .38rem .65rem; border-radius: 8px; font-size: .78rem; font-weight: 600; color: var(--db-text-2, #475569);
    text-decoration: none; border-left: 2px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kd-index-in a:hover { color: var(--db-text, #0f172a); background: var(--db-surface-2, #f8fafc); }
  .kd-index-in a.is-on { color: var(--db-accent-fg, #4f46e5); border-left-color: var(--db-accent, #4f46e5); border-radius: 0 8px 8px 0; }
  .st-wrap h2 { scroll-margin-top: 1rem; }
}

/* ---------------------------------------------------------------------
   Something you can actually hit with a glove on.

   .kd-btn is .5rem of padding around 13.4px of text, which comes out about
   31px tall. That is fine for a mouse and too small for a thumb; a
   technician is using this on a phone, in a plant, often wearing gloves.

   Scoped to a coarse pointer so the desk stays as dense as it is. Scoped to
   the button component and to form controls rather than to every <button>,
   because some of those are 12px icon buttons sitting inside a card corner
   and a 44px floor would break the layout they are positioned in.
   --------------------------------------------------------------------- */
@media (pointer: coarse) {
  .kd-btn,
  .kd-seg > *,
  select,
  textarea,
  input[type="text"], input[type="search"], input[type="number"],
  input[type="date"], input[type="time"], input[type="email"],
  input[type="password"], input[type="tel"] {
    min-height: 44px;
  }
  /* A tick box is not made bigger by padding around it, so it is sized
     directly. 24px is the AA floor for a target that cannot be enlarged. */
  input[type="checkbox"], input[type="radio"] { min-width: 24px; min-height: 24px; }
}

/* ---------------------------------------------------------------------
   Past the menu, for somebody on a keyboard.

   Every page put the whole sidebar in front of the content, so reaching the
   first thing on a page meant tabbing through every menu entry, on every
   page. WCAG 2.4.1, and the fix is one link that is only visible while it
   holds focus.
   --------------------------------------------------------------------- */
.kd-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .6rem 1rem; border-radius: 0 0 .6rem 0;
  font-size: .85rem; font-weight: 600; text-decoration: none;
  background: var(--db-accent, #4f46e5); color: var(--db-on-accent, #fff);
}
.kd-skip:focus { left: 0; }