/* =============================================================================
mobile-app-shell.css — SMKK "feel like a native app, not a website" layer (2026-06-30)
Built from KK-Mobile-App-Standard/00-MOBILE-APP-ROADMAP.md (Phase-1 CSS-NOW items).
ADDITIVE + scoped to body.device-phone.app-mode (and @media <=760px). Fully reversible:
delete this file + its in _Layout. No markup/JS/endpoint changes.
Pairs with the 1-line viewport-fit=cover edit in _Layout (which activates the safe-area math).
============================================================================= */
/* --- R2: 8dp spacing token scale (additive; downstream rules can adopt) --- */
:root {
--smkk-space-1: 4px;
--smkk-space-2: 8px;
--smkk-space-3: 12px;
--smkk-space-4: 16px;
--smkk-space-5: 20px;
--smkk-space-6: 24px;
}
/* --- R9: cross-document View Transitions (progressive; no-op where unsupported) ---
Kills the white-flash full-reload feel with a subtle cross-fade. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 160ms; }
}
/* ============================ PHONE APP-SHELL ============================ */
/* Everything below only applies on the phone app surface. */
/* --- R8 (G1): persistent, sticky top chrome. Overrides the kk-layout-flow-guard
that forces all top chrome to position:static, so the title bar stays put like a
real app bar instead of scrolling away. Safe-area-aware (needs viewport-fit=cover). --- */
body.device-phone.app-mode .kk-mobile-appbar,
body.device-phone.app-mode .kk-app-header.kk-mobile-appbar {
position: sticky !important;
top: 0;
z-index: 40;
padding-top: max(8px, env(safe-area-inset-top));
background: var(--smkk-spx-surface, var(--smkk-surface, #fff));
}
/* --- R1: global touch-target floor. Conservative — CONTROL elements only (not bare
inline , to avoid stretching inline text links). min-height via padding-safe box. --- */
body.device-phone.app-mode :is(button, [role="button"], .app-btn, .pill, .chip,
.kk-mobile-appbar-action, .kk-mobile-dock-item, .btn) {
min-height: 44px;
}
/* icon-only controls also need width */
body.device-phone.app-mode :is(.kk-mobile-appbar-action, .kk-mobile-dock-item) {
min-width: 44px;
}
/* R1/R3: appbar action floor 40->48; dock label never below the 12px nav floor */
body.device-phone.app-mode .kk-mobile-appbar-action { min-height: 48px; }
body.device-phone.app-mode .kk-mobile-dock-item-label,
body.device-phone.app-mode .kk-mobile-dock-label { font-size: max(12px, 0.75rem); }
/* --- R5: edge-to-edge safe-area on the scroll container + bottom dock clearance --- */
body.device-phone.app-mode #main-content,
body.device-phone.app-mode main.app-main {
padding-left: max(0px, env(safe-area-inset-left));
padding-right: max(0px, env(safe-area-inset-right));
padding-bottom: calc(env(safe-area-inset-bottom) + var(--mobile-dock-height, 64px));
}
/* --- R13 (G6): kill website furniture on the app surface --- */
body.device-phone.app-mode .shell-footer { display: none !important; }
/* demoted overflow actions: hidden AND non-focusable (were tab-reachable) */
body.device-phone.app-mode .kk-mobile-appbar-overflow[hidden],
body.device-phone.app-mode .kk-mobile-appbar-overflow.is-hidden {
display: none !important;
}
/* --- R10: reusable skeleton primitive (wiring into pages is a later markup step) --- */
.smkk-skeleton {
position: relative;
overflow: hidden;
background: var(--smkk-spx-surface-sunken, rgba(120, 130, 145, 0.14));
border-radius: 8px;
}
.smkk-skeleton--text { height: 0.9em; margin: 4px 0; border-radius: 4px; }
.smkk-skeleton--row { height: 44px; margin: 6px 0; }
.smkk-skeleton--card { height: 96px; margin: 8px 0; }
@media (prefers-reduced-motion: no-preference) {
.smkk-skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
animation: smkk-skeleton-shimmer 1.25s infinite;
}
@keyframes smkk-skeleton-shimmer { 100% { transform: translateX(100%); } }
}
/* ============================ PER-PERSONA CSS-NOW ============================ */
/* --- Shop floor (R1/R5): coarse-pointer target floors + safe-area on standalone shop pages --- */
@media (pointer: coarse) {
.cutboard-shell .btn, .cutboard-shell .dialog-close,
.app-cnc .app-btn.sm,
.app-machines input, .app-machines select { min-height: 44px; }
}
body.device-phone .cutboard-shell, body.device-phone .app-cnc {
padding-left: max(1rem, env(safe-area-inset-left));
padding-right: max(1rem, env(safe-area-inset-right));
padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
/* --- Office (R3/R1): reflowed-table labels track the theme; KPI tiles are real tap targets --- */
body.device-phone .responsive-card-table td[data-label]::before { color: var(--smkk-spx-text-muted, #5b6b7a); }
body.device-phone.app-mode :is(.dashboard-kpi, .kpi-tile, .dashboard-stat) {
min-height: 48px;
}
body.device-phone.app-mode :is(.dashboard-kpi, .kpi-tile, .dashboard-stat) a:focus-visible {
outline: 2px solid var(--smkk-accent, #2f6d5a);
outline-offset: 2px;
}
/* ===================== GLOBAL APP-FEEL + A11Y (Experience-Excellence CSS-now) ===================== */
/* Anchored scroll / focus must clear the now-sticky app bar (WCAG 2.4.11 focus-not-obscured). */
body.device-phone.app-mode { scroll-padding-top: var(--mobile-appbar-height, 56px); }
/* Instant physical tap feel: no 300ms delay, no grey flash, subtle press give. */
body.device-phone.app-mode :is(a, button, [role="button"], .app-btn, .pill, .chip) {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
@media (prefers-reduced-motion: no-preference) {
body.device-phone.app-mode :is(button, [role="button"], .app-btn, .pill, .chip):active {
transform: scale(0.97);
transition: transform 0.06s ease;
}
}
/* Visible, consistent focus ring everywhere (WCAG 2.4.7) — uses the accent token. */
body.device-phone.app-mode :is(a, button, [role="button"], input, select, textarea, .app-btn, .pill, .chip):focus-visible {
outline: 2px solid var(--smkk-spx-accent, var(--smkk-accent, #2f6d5a));
outline-offset: 2px;
}
/* High-contrast / forced-colors: keep chrome edges visible. */
@media (forced-colors: active) {
body.device-phone.app-mode .kk-mobile-appbar,
body.device-phone.app-mode .kk-mobile-dock { border: 1px solid CanvasText; }
}
/* Perceived perf: stop layout shift from unsized media. */
body.device-phone.app-mode img:not([width]):not([height]) { max-width: 100%; height: auto; }
/* ===================== FIELD-SERVICE APP PRIMITIVES =====================
Reusable building blocks from KK-FieldService-Mobile/00-FIELDSERVICE-MASTER.md (C-G).
INERT until markup applies these classes — adding them changes no current rendering.
The build-loop wires them into the installer/shop/office pages. */
/* (C) Bottom tab bar — persistent thumb-zone, per-persona navigation. */
.smkk-tabbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
display: flex; justify-content: space-around; align-items: stretch;
min-height: 56px;
background: var(--smkk-spx-surface-elevated, #fff);
border-top: 1px solid var(--smkk-spx-border, rgba(120, 130, 145, 0.2));
padding-bottom: env(safe-area-inset-bottom);
}
.smkk-tabbar__item {
flex: 1 1 0; min-height: 56px; padding: 6px 4px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
color: var(--smkk-spx-text-muted, #5a626d); text-decoration: none;
font-size: 12px; font-weight: 700; -webkit-tap-highlight-color: transparent;
}
.smkk-tabbar__item[aria-current="page"], .smkk-tabbar__item.is-active {
color: var(--smkk-spx-accent, var(--smkk-accent, #2f6d5a));
}
.smkk-tabbar__icon { font-size: 22px; line-height: 1; }
/* (D) Status dot — status is NEVER color-only (WCAG 1.4.1): a shape prefix for pills/rows/toasts. */
.smkk-statusdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
margin-right: 6px; vertical-align: middle; background: currentColor; }
.smkk-statusdot--ok { color: #2f7a4f; }
.smkk-statusdot--warn { color: #9a661b; }
.smkk-statusdot--danger { color: #b3261e; }
.smkk-statusdot--info { color: #356ea3; }
.smkk-statusdot--idle { color: #687682; }
/* (E) Sticky bottom action bar — primary action (Save) pinned in the thumb zone, safe-area aware. */
.smkk-actionbar--sticky {
position: sticky; bottom: 0; z-index: 30;
display: flex; gap: 8px; align-items: center;
padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
background: var(--smkk-spx-surface-elevated, #fff);
border-top: 1px solid var(--smkk-spx-border, rgba(120, 130, 145, 0.2));
}
.smkk-actionbar--sticky > :is(.primary, [type="submit"], .app-btn.primary) { flex: 1 1 auto; min-height: 48px; }
/* (F) Tappable status card — whole card is the target; native control hidden; selected state via :has(). */
.smkk-status-card { position: relative; display: block; min-height: 56px; padding: 12px 14px;
border: 1.5px solid var(--smkk-spx-border, rgba(120, 130, 145, 0.3)); border-radius: 12px; cursor: pointer; }
.smkk-status-card :is(input[type="radio"], input[type="checkbox"]) { position: absolute; opacity: 0; pointer-events: none; }
.smkk-status-card:has(input:checked) {
border-color: var(--smkk-spx-accent, #2f6d5a);
background: color-mix(in srgb, var(--smkk-spx-accent, #2f6d5a) 8%, transparent);
}
.smkk-status-card:has(input:checked)::after {
content: "\2713"; position: absolute; top: 12px; right: 14px;
color: var(--smkk-spx-accent, #2f6d5a); font-weight: 800;
}
/* (F) Camera capture tile — turn the file input into a big, obvious "add photo" target. */
.smkk-camera-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
min-height: 88px; width: 100%; padding: 16px; cursor: pointer; font-weight: 700;
border: 1.5px dashed var(--smkk-spx-border, rgba(120, 130, 145, 0.4)); border-radius: 12px;
color: var(--smkk-spx-text-muted, #5a626d); }
.smkk-camera-tile:active { background: var(--smkk-spx-surface-subtle, #eef0f3); }
/* (G) List skeleton variant (wrap N children). */
.smkk-skeleton--list > * { height: 56px; margin: 6px 0; border-radius: 8px;
background: var(--smkk-spx-surface-subtle, rgba(120, 130, 145, 0.14)); }
/* iOS zoom-on-focus prevention (ticket audit C2): any input < 16px makes iPhones zoom the whole
page on focus — jarring on every create/edit form. Floor all phone text inputs at 16px. */
body.device-phone.app-mode :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
font-size: max(16px, 1rem);
}