/* © 2026 Kingsleigh Homes Limited. All rights reserved.
   Proprietary and confidential. Unauthorised copying, distribution, modification
   or use of this file or its contents, in whole or in part, via any medium, is
   strictly prohibited without the prior written permission of Kingsleigh Homes Limited. */
/* Kingsleigh mobile surface — tokens + shell chrome.
   Screens carry their design-lifted inline styles; this file owns the frame:
   safe areas, tab bar, sheets, toasts, skeletons, shared keyframes. */

:root {
  /* This surface is LIGHT by design — declare it so a dark-mode WKWebView
     (the native shell) never auto-darkens buttons into white-on-white
     (Jordan's 'blocked out' menu, 27 Aug — build-36 investigation). */
  color-scheme: light only;
  /* light surfaces */
  --m-bg: #F3F0E9;          /* warm bone */
  --m-bg-client: #F6F3EC;
  --m-card: #FFFFFF;
  --m-line: #E6E1D6;
  --m-tile: #EFEBE0;
  --m-skel-a: #E9E4D8;
  --m-skel-b: #F1EDE2;
  /* ink */
  --m-ink: #1A2130;
  --m-muted: #837D6F;
  --m-muted-navy: #55607A;
  --m-disabled: #98917F;
  /* navy */
  --m-navy: #1B2334;
  --m-navy-deep: #161D2B;
  --m-navy-screen: #141B2A;
  --m-navy-raised: #242E47;
  --m-navy-line: #2E3A54;
  --m-navy-muted: #8E99B3;
  --m-navy-body: #C6CEDF;
  --m-navy-rail: #3A465F;
  /* brass */
  --m-brass: #A97E22;
  --m-brass-dark: #D9A94A;
  --m-brass-tint: #F5EDDB;
  --m-brass-deep: #B98A2E;
  /* semantic */
  --m-green: #2E7D4F;
  --m-green-tint: #E8F1EB;
  --m-green-navy: #7FBF98;
  --m-amber: #B26A14;
  --m-amber-tint: #F8EFDE;
  --m-amber-line: #EBD9B4;
  --m-amber-deep: #7A5A1E;
  --m-red: #B3432E;
  --m-red-tint: #F7E8E4;
  --m-red-line: #EBCFC7;
  --m-red-deep: #8A3A28;
  --m-salmon: #E0A092;
  /* frame */
  --m-font: 'Archivo', system-ui, -apple-system, sans-serif;
  --m-mono: 'Spline Sans Mono', ui-monospace, monospace;
  --m-sat: max(env(safe-area-inset-top, 0px), 44px);   /* status-bar clearance: 44 + 22 = design's 66px */
  --m-sab: max(env(safe-area-inset-bottom, 0px), 18px); /* home-indicator clearance: 10 + 18 = design's 28px */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--m-bg);
  font-family: var(--m-font);
  color: var(--m-ink);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
body.m-dark { background: var(--m-navy-screen); }
body.m-client { background: var(--m-bg-client); }

/* ---- app frame ---- */
#m-app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; }
#m-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#m-view > main { flex: 1; padding: 14px 14px calc(84px + var(--m-sab)) 14px; display: flex; flex-direction: column; gap: 10px; }
body.m-client #m-view > main { padding-bottom: 24px; } /* client role has no tab bar */

/* screens the design gives a dark canvas */
.m-screen-dark { background: var(--m-navy-screen); color: #E7EBF3; }

/* ---- tab bar ---- */
#m-tabs {
  position: sticky; bottom: 0; z-index: 40;
  display: flex; background: var(--m-card); border-top: 1px solid var(--m-line);
  padding: 10px 6px calc(10px + var(--m-sab)) 6px;
}
#m-tabs .m-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--m-disabled); font-size: 10px; font-weight: 600; cursor: pointer;
  background: none; border: none; font-family: inherit; padding: 0; min-height: 44px; justify-content: flex-start;
}
#m-tabs .m-tab.on { color: var(--m-brass); font-weight: 700; }
#m-tabs .m-tab .m-glyph { font-size: 17px; line-height: 20px; }
#m-tabs .m-tab .m-glyph-pound { font-size: 16px; font-weight: 700; line-height: 20px; }
body.m-dark #m-tabs { background: var(--m-navy); border-top-color: var(--m-navy-line); }
body.m-dark #m-tabs .m-tab { color: #6B7690; }
body.m-dark #m-tabs .m-tab.on { color: var(--m-brass-dark); }

/* ---- shared bits ---- */
@keyframes khPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.m-pulse { animation: khPulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .m-pulse { animation: none; } }

.m-skel { border-radius: 14px; background: linear-gradient(100deg, var(--m-skel-a) 40%, var(--m-skel-b) 50%, var(--m-skel-a) 60%); background-size: 200% 100%; animation: mShimmer 1.4s linear infinite; }
@keyframes mShimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .m-skel { animation: none; background: var(--m-skel-a); } }

/* striped placeholder tiles (photo / map / AR slots on demo data) */
.m-stripe { background: repeating-linear-gradient(45deg, var(--m-skel-a) 0 10px, var(--m-skel-b) 10px 20px); }
.m-stripe-dark { background: repeating-linear-gradient(45deg, var(--m-navy) 0 10px, #20283C 10px 20px); }

/* honest empty state */
.m-empty { border: 1px dashed var(--m-line); border-radius: 14px; padding: 18px 16px; color: var(--m-muted); font-size: 12.5px; line-height: 1.5; text-align: center; background: rgba(255,255,255,.5); }

/* demo chip — sits just above the tab bar, out of the design frame's way */
#m-demo-chip {
  position: fixed; bottom: calc(78px + var(--m-sab)); left: 10px; z-index: 60;
  background: var(--m-navy); color: var(--m-brass-dark); border: 1px solid var(--m-navy-line);
  font-family: var(--m-mono); font-size: 9px; padding: 2px 7px; border-radius: 6px; letter-spacing: .08em;
  opacity: .85; pointer-events: none;
}

/* offline banner */
#m-offline {
  display: none; align-items: center; gap: 9px; margin: 0 14px;
  background: var(--m-navy); color: var(--m-navy-body); border-radius: 12px; padding: 10px 13px; font-size: 12px; line-height: 1.45;
}
#m-offline.show { display: flex; }
#m-offline .m-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--m-brass-dark); flex: none; }

/* toast + undo */
#m-toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(16px);
  bottom: calc(84px + var(--m-sab)); z-index: 70; opacity: 0; pointer-events: none;
  background: var(--m-navy); color: #E7EBF3; border-radius: 12px; padding: 11px 16px;
  font-size: 12.5px; display: flex; gap: 14px; align-items: center; max-width: 86vw;
  transition: opacity .18s, transform .18s; box-shadow: 0 10px 30px rgba(10,14,24,.35);
}
#m-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
#m-toast button { background: none; border: none; color: var(--m-brass-dark); font-weight: 700; font-size: 12.5px; font-family: inherit; cursor: pointer; padding: 0; }

/* bottom sheet */
#m-sheet-wrap { position: fixed; inset: 0; z-index: 80; display: none; }
#m-sheet-wrap.show { display: block; }
#m-sheet-wrap .m-scrim { position: absolute; inset: 0; background: rgba(15,19,28,.45); }
#m-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto;
  background: var(--m-card); border-radius: 18px 18px 0 0; padding: 10px 16px calc(18px + var(--m-sab)) 16px;
  max-width: 520px; margin: 0 auto;
}
#m-sheet::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 999px; background: var(--m-line); margin: 2px auto 12px auto; }

/* buttons reset */
button { font-family: inherit; }
a { color: inherit; }

/* login gate (unauthenticated, non-demo) */
.m-gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.m-gate-card { max-width: 380px; width: 100%; background: var(--m-card); border: 1px solid var(--m-line); border-radius: 16px; padding: 30px 26px; text-align: center; }