/* LRA Precision · MIKE — component styles. Colours, spacing, radii and sizes come from tokens.css. */
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 21px; line-height: 28px; }
.mk-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.mk-value { font-size: 44px; line-height: 48px; font-weight: 600; }
.mk-unit { font-size: 21px; color: var(--ink-muted); margin-left: var(--space-2); }
.mk-instruction { font-size: 30px; line-height: 36px; font-weight: 600; margin: 0 0 var(--space-4); }
.mk-secondary { font-size: 17px; line-height: 24px; color: var(--ink-muted); margin: var(--space-2) 0 0; }
.mk-text-attention { color: var(--attention); }
.mk-pad { padding: var(--space-6); }
.mk-stack > * + * { margin-top: var(--space-4); }

/* The 50° cut corner: the LRA logo's angle, on cards and progress fills. */
.mk-cut { } /* retired 2 Nov 2026: every box keeps all four 12px fillets */

/* Focus: a solid 3px ring in the focus token, on every control. */
.mk-btn:focus-visible, .mk-key:focus-visible, .mk-choice:focus-visible, .mk-help-btn:focus-visible, .mk-tile:focus-visible, .mk-media:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}

/* Header */
.mk-header { min-height: var(--header); box-sizing: border-box; background: var(--surface-raised); border-bottom: 1px solid var(--line); padding: var(--space-3) var(--space-6); display: flex; flex-direction: column; justify-content: center; gap: var(--space-1); }
.mk-header-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.mk-header-station { font-size: 21px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.mk-header-op { font-size: 21px; font-weight: 500; }
.mk-header-part { font-size: 17px; color: var(--ink-muted); }
.mk-sync { font-size: 17px; line-height: 24px; white-space: nowrap; }
.mk-sync-ok { color: var(--pass); }
.mk-sync-wait { color: var(--attention); }
.mk-sync-bad { color: var(--stop); font-weight: 600; }

/* Buttons */
.mk-btn-wrap { width: 100%; }
.mk-btn { font: inherit; font-size: 21px; line-height: 24px; font-weight: 600; width: 100%; min-height: var(--target-main); padding: 0 var(--space-6); border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; touch-action: manipulation; }
.mk-btn-main { background: var(--action); color: var(--on-action); }
.mk-btn-go { background: var(--pass); color: var(--on-pass); min-height: 120px; font-size: 30px; }
.mk-btn-danger { background: var(--danger); color: var(--on-danger); }
.mk-btn-attention { background: var(--attention); color: var(--on-attention); }
.mk-btn-secondary { min-height: var(--target-secondary); background: var(--surface-raised); color: var(--ink); border-color: var(--line-strong); }
.mk-btn:disabled { background: var(--surface); color: var(--ink-muted); border-color: var(--line); border-style: dashed; opacity: .6; cursor: not-allowed; }
.mk-btn-hint { margin: var(--space-2) 0 0; font-size: 17px; line-height: 24px; color: var(--ink-muted); text-align: center; }
.mk-station-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-3); }
.mk-btn-scrap, .mk-btn-tool { border-color: var(--stop); }

/* Field + ? help */
.mk-field { position: relative; }
.mk-field-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.mk-field-label { font-size: 21px; line-height: 28px; font-weight: 500; }
.mk-help-btn { flex: none; width: var(--target-secondary); height: var(--target-secondary); border-radius: var(--radius-md); border: 2px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 30px; font-weight: 600; cursor: pointer; }
.mk-help-btn.is-open { border-color: var(--focus); color: var(--focus); }
.mk-help-panel { position: fixed; left: var(--space-6); right: var(--space-6); bottom: var(--space-6); margin: 0 auto; max-width: 760px; max-height: 70vh; overflow: auto; box-sizing: border-box; padding: var(--space-4) var(--space-6) var(--space-6); background: var(--surface-raised); border: 1px solid var(--line-strong); border-top: 8px solid var(--focus); border-radius: var(--radius-md); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6); z-index: 20; }
.mk-help-panel .mk-btn { margin-top: var(--space-2); }
.mk-help-title { font-size: 17px; line-height: 24px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 var(--space-2); }
.mk-help-line { font-size: 21px; line-height: 28px; margin: 0 0 var(--space-3); }
.mk-help-typical { color: var(--pass); }
.mk-help-next { color: var(--ink-muted); }
.mk-help-img { background: var(--light-panel); border-radius: var(--radius-md); padding: var(--space-2); margin: 0 0 var(--space-4); }
.mk-help-img img { display: block; width: 100%; max-height: 220px; object-fit: contain; }

/* Keypad */
.mk-keypad { display: flex; flex-direction: column; gap: var(--space-4); }
.mk-keypad-display { display: flex; align-items: baseline; min-height: 72px; padding: var(--space-3) var(--space-4); background: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--radius-md); }
.mk-keypad-display .is-empty { color: var(--ink-muted); }
.mk-keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.mk-key { min-height: var(--target-key); min-width: var(--target-key); font: inherit; font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--surface); color: var(--ink); border: 2px solid var(--line-strong); border-radius: var(--radius-md); cursor: pointer; }
.mk-key:active { background: var(--surface-raised); }
.mk-key-back { color: var(--ink-muted); }

/* PIN */
.mk-pin-dots { display: flex; gap: var(--space-4); justify-content: center; margin: 0 0 var(--space-6); }
.mk-pin-dot { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line-strong); }
.mk-pin-dot.is-filled { background: var(--focus); border-color: var(--focus); }
.mk-pin-actions { display: grid; gap: var(--space-3); }

/* Choice buttons */
.mk-choices { display: grid; gap: var(--space-3); }
.mk-choice { min-height: var(--target-secondary); padding: var(--space-3) var(--space-4); font: inherit; font-size: 21px; font-weight: 500; text-align: left; background: var(--surface); color: var(--ink); border: 2px solid var(--line-strong); border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; gap: var(--space-3); }
.mk-choice.is-selected { border: 3px solid var(--focus); background: var(--surface-raised); }
.mk-choice-check { color: var(--focus); font-weight: 700; }

/* Progress */
.mk-progress-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.mk-progress-of { font-size: 30px; color: var(--ink-muted); }
.mk-pace { margin-left: auto; font-size: 21px; font-weight: 600; }
.mk-pace-green { color: var(--pass); }
.mk-pace-yellow { color: var(--attention); }
.mk-pace-red { color: var(--stop); }
.mk-progress-track { height: 24px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.mk-progress-fill { height: 100%; background: var(--focus); clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%); min-width: 20px; }

/* Status tile (dashboard) */
.mk-tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); width: 100%; min-height: 140px; padding: var(--space-4); box-sizing: border-box; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); border-top: 8px solid var(--line-strong); cursor: pointer; }
.mk-tile-name { font-size: 21px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.mk-tile-status { font-size: 21px; font-weight: 600; }
.mk-tile-count { font-size: 30px; font-weight: 600; }
.mk-tile-detail { font-size: 17px; line-height: 24px; color: var(--ink-muted); }
.mk-tile.is-green { border-top-color: var(--pass); } .mk-tile.is-green .mk-tile-status { color: var(--pass); }
.mk-tile.is-yellow { border-top-color: var(--attention); } .mk-tile.is-yellow .mk-tile-status { color: var(--attention); }
.mk-tile.is-red { border-top-color: var(--stop); background: var(--stop-panel); } .mk-tile.is-red .mk-tile-status { color: var(--stop); }

/* Stop panel */
.mk-stop { background: var(--stop-panel); border: 3px solid var(--stop); border-radius: var(--radius-md); padding: var(--space-6); }
.mk-stop-head { margin: 0; font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: 0.04em; color: var(--stop); }
.mk-stop-reason { margin: var(--space-2) 0 var(--space-4); font-size: 30px; line-height: 36px; font-weight: 600; color: var(--ink); }
.mk-stop-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); }
.mk-stop-facts dt { color: var(--ink-muted); }
.mk-stop-facts dd { margin: 0; font-weight: 600; color: var(--ink); }
.mk-stop-lock { margin: 0 0 var(--space-4); font-size: 21px; color: var(--ink); }
.mk-stop-actions { display: grid; gap: var(--space-3); }

/* Media */
.mk-media { display: block; width: 100%; padding: 0; font: inherit; text-align: left; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; }
.mk-media-frame { display: block; background: var(--light-panel); padding: var(--space-2); }
.mk-media-frame img { display: block; width: 100%; height: 200px; object-fit: contain; }
.mk-media-cap { display: block; padding: var(--space-3) var(--space-4); font-size: 17px; line-height: 24px; }
.mk-media-kind { font-weight: 600; color: var(--focus); }
.mk-media-full { position: fixed; inset: 0; background: var(--light-panel); z-index: 30; display: flex; flex-direction: column; padding: var(--space-4); box-sizing: border-box; gap: var(--space-4); }
.mk-media-full img { flex: 1; min-height: 0; width: 100%; object-fit: contain; }
.mk-media-close { flex: none; }

/* Scrollbars: a fallback only. Screens are laid out so nothing scrolls; if text ever overflows a box, the bar stays thin, rounded and inside the box's corners. */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }
*::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }

/* ------------------------------------------------------------------------
   MIKE app layout (Phase 2). The rules from docs/design/phase2/docs/
   mike-ui-layout-rules.md: fit the screen, frame every column, fillets only,
   the help card, buttons not links.
   ------------------------------------------------------------------------ */
html, body { height: 100%; }
body { overflow: hidden; -webkit-tap-highlight-color: transparent; }
* { box-sizing: border-box; }
button { font-family: inherit; }
.mk-screen { width: 100vw; height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); overflow: hidden; }

/* Master nav bar (MIKE 3) */
.mk-nav { height: 72px; flex: none; padding: 0 12px 0 16px; display: flex; align-items: center; gap: 0; background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.mk-nav-logo { width: 40px; height: auto; margin-right: 8px; }
[data-theme="light"] .mk-nav-logo { filter: invert(0.85); }
.mk-nav-role { font-size: 15px; font-weight: 600; letter-spacing: 0.14em; color: var(--ink-muted); margin-right: 6px; }
.mk-nav-item { display: flex; align-items: center; height: 56px; padding: 0 6px; border: 0; border-radius: var(--radius-md); background: transparent; font-size: 17px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; cursor: pointer; }
.mk-nav-item.is-on { color: var(--ink); background: var(--surface); box-shadow: inset 0 -3px 0 var(--focus); }
.mk-nav-badge { margin-left: 6px; color: var(--stop); }
.mk-nav-sync { margin-left: auto; font-size: 17px; color: var(--pass); white-space: nowrap; }
.mk-nav-sync.is-bad { color: var(--stop); font-weight: 600; }
.mk-nav-person { margin-left: 8px; }

/* Page area and framed panels */
.mk-page { flex: 1; min-height: 0; padding: 24px; display: grid; gap: 20px; }
.mk-page-1 { grid-template-columns: minmax(0, 1fr); }
.mk-page-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.mk-page-3 { grid-template-columns: 280px minmax(0, 1fr) 300px; }
.mk-panel { background: var(--surface); border: 1px solid var(--line); border-top: 8px solid var(--line-strong); border-radius: var(--radius-md); padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; min-height: 0; min-width: 0; overflow: hidden; }
.mk-panel.is-primary { border-top-color: var(--focus); }
.mk-panel.is-stop { border-top-color: var(--stop); }
.mk-panel-head { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.mk-panel-title { font-size: 21px; line-height: 28px; font-weight: 600; }
.mk-panel-status { margin-left: auto; font-size: 17px; color: var(--ink-muted); white-space: nowrap; }
.mk-panel-foot { margin-top: auto; display: grid; gap: 12px; }
/* Start screen: each choice has a short line under it saying what it is for. */
.mk-start-choices { gap: 20px; }
.mk-start-choice { display: grid; gap: 6px; }
.mk-page-heading { font-size: 30px; line-height: 36px; font-weight: 600; margin: 0; }
.mk-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 16px; }
.mk-row-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 8px 16px; font: inherit; font-size: 19px; text-align: left; color: var(--ink); background: var(--surface-raised); border: 2px solid var(--line); border-radius: var(--radius-md); cursor: pointer; }
.mk-row-btn.is-selected { border: 3px solid var(--focus); }
.mk-row-btn .mk-row-meta { font-size: 17px; color: var(--ink-muted); text-align: right; }
.mk-row-btn > span { min-width: 0; overflow-wrap: anywhere; }
.mk-btn-compact { width: auto; min-height: 48px; padding: 0 16px; font-size: 17px; white-space: nowrap; }
.mk-btn-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.mk-btn-row .mk-btn { padding: 0 10px; }
.mk-pager .mk-btn { font-size: 17px; padding: 0 6px; }
/* Buttons side by side are the same height (rule 7): beside a main button, all are 80px. */
.mk-btn-row:has(.mk-btn-main) .mk-btn { min-height: var(--target-main); }
.mk-note { font-size: 17px; line-height: 24px; color: var(--ink-muted); margin: 0; }
.mk-ok { color: var(--pass); }
.mk-error { color: var(--stop); font-weight: 600; }
.mk-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }

/* Text inputs: 64px, one line; side-by-side boxes are the same size (rule 2). */
.mk-input { width: 100%; height: 64px; padding: 0 16px; font: inherit; font-size: 21px; color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--radius-md); }
.mk-input:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.mk-textarea { width: 100%; padding: 10px 14px; font: inherit; font-size: 19px; line-height: 26px; color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--radius-md); resize: none; overflow: hidden; }
.mk-textarea:focus { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Field help: the ? sits right of the label, on the label row (no extra row). */
.mk-field-head { margin-bottom: 8px; min-height: 64px; }
.mk-help-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 19; border: 0; padding: 0; }
.mk-help-panel { max-height: none; overflow: visible; box-shadow: none; }

/* Keypad sizes on the master tablet */
.mk-keypad-grid .mk-key { height: 72px; }
.mk-keypad-display { justify-content: space-between; min-height: 64px; padding-top: 6px; padding-bottom: 6px; align-items: center; }

/* Centred single-task screens (sign-in, pairing) */
.mk-center { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.mk-center-box { width: 560px; max-width: 100%; }
.mk-pair-code { font-size: 96px; line-height: 104px; font-weight: 600; letter-spacing: 0.12em; text-align: center; margin: 16px 0; }
.mk-qr { background: var(--light-panel); border-radius: var(--radius-md); padding: 12px; width: 220px; height: 220px; }
.mk-qr img { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------------------
   The web (a web login, not a paired tablet): the layout adapts to the
   window (layout rule 1, Jason 3 Nov). From 1024 px wide upwards panels
   stretch and narrow; there is never a sideways scroll; the nav collapses
   into a Menu button when it doesn't fit; a window shorter than the content
   lets the page scroll down, and panels still never get scroll boxes.
   Tablets keep their fixed 1280 x 800 layout (html[data-mode="tablet"]).
   ------------------------------------------------------------------------ */
html[data-mode="web"] body { overflow-x: hidden; overflow-y: auto; }
html[data-mode="web"] .mk-screen { width: 100%; height: auto; min-height: 100vh; overflow: visible; }
html[data-mode="web"] .mk-page { flex: 1 0 auto; }
html[data-mode="web"] .mk-center { flex: 1 0 auto; }
html[data-mode="web"] .mk-page-3 { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(220px, 300px); }
html[data-mode="web"] .mk-nav { position: sticky; top: 0; z-index: 10; }

/* The nav's natural width is measured from a hidden copy. */
.mk-nav-measure { position: fixed; left: 0; top: 0; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
.mk-nav-measure .mk-nav { width: max-content; }
.mk-nav-menu-btn { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; font-size: 17px; font-weight: 600; color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; }
.mk-nav-menu-btn.is-open { border-color: var(--focus); }
.mk-menu-backdrop { position: fixed; inset: 72px 0 0 0; background: rgba(0, 0, 0, 0.5); z-index: 11; border: 0; padding: 0; }
.mk-menu { position: fixed; top: 80px; left: 16px; width: min(560px, calc(100vw - 32px)); z-index: 12; background: var(--surface-raised); border: 1px solid var(--line-strong); border-top: 8px solid var(--focus); border-radius: var(--radius-md); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.mk-menu .mk-row-btn { font-weight: 600; }
.mk-menu-foot { grid-column: span 2; display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }