/* The Kirkland Gold phone app, /m (owner 2026-11-04, "greatly simplify it"; Pages/M/Index.cshtml, m.js).
   Rules for every screen: taps at least 44 px, text at least 15 px, one sheet at a time. The one sideways row is the area chips
   (Stage A, owner 2026-11-04 "Yes, build Stage A" on the mock-up). */
:root { --navy:#1f2d3a; --navy2:#2b3d4e; --gold:#fac11c; --ink:#1f2d3a; --muted:#5a6672; --line:#e3e7eb; --bg:#f6f7f8;
        --top:calc(52px + env(safe-area-inset-top)); --tabs:calc(60px + env(safe-area-inset-bottom)); --chips:56px; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; overflow:hidden; background:var(--navy); color:var(--ink);
             font:16px/1.45 "Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; }
[hidden] { display:none !important; }
.m-fab svg, .m-tabs svg { width:24px; height:24px; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:currentColor; }   /* (our icons only – never Leaflet's drawing layer) */

/* ---- top bar */
.m-top { position:fixed; top:0; left:0; right:0; height:var(--top); padding:env(safe-area-inset-top) 12px 0 12px; z-index:1000;
         display:flex; align-items:center; justify-content:space-between; background:var(--navy); color:#fff; }
.m-brand { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:700; font-size:17px; min-height:44px; }
.m-kg { background:var(--gold); color:var(--navy); border-radius:8px; padding:3px 7px; font-size:15px; font-weight:800; }
.m-signin { color:var(--gold); font-weight:700; text-decoration:none; min-height:44px; display:flex; align-items:center; padding:0 6px; }
.m-me { width:44px; height:44px; border-radius:50%; border:2px solid var(--gold); background:var(--navy2); color:var(--gold); font-weight:800; cursor:pointer; }

/* ---- the area chips (Stage A, owner 2026-11-04): the one row that scrolls sideways, the rail's areas */
.m-chips { position:fixed; top:var(--top); left:0; right:0; height:var(--chips); z-index:1000; display:flex; gap:8px; align-items:center;
           padding:0 12px; background:#16222d; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.m-chips::-webkit-scrollbar { display:none; }
.m-chip { flex:none; position:relative; min-height:44px; display:flex; align-items:center; gap:6px; padding:0 14px; border:0; border-radius:22px;
          background:#26394a; color:#e3e9ee; font-size:15px; font-weight:700; cursor:pointer; white-space:nowrap; }
.m-chip i { font-style:normal; opacity:.85; }
.m-chip.on { background:var(--gold); color:var(--navy); }
.m-chip.m-has::after { content:""; position:absolute; top:6px; right:6px; width:8px; height:8px; border-radius:50%; background:var(--gold); }
.m-chip.on.m-has::after { background:var(--navy); }

/* ---- the map */
#m-map { position:fixed; top:calc(var(--top) + var(--chips)); bottom:var(--tabs); left:0; right:0; background:#2b3a2b; }
.leaflet-container { font:15px/1.4 "Open Sans", system-ui, sans-serif; }
.leaflet-control-attribution { font-size:11px; max-width:70vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-fabs { position:fixed; right:12px; bottom:calc(var(--tabs) + 16px); z-index:900; display:flex; flex-direction:column; gap:12px; }
.m-fab { width:52px; height:52px; border-radius:50%; border:0; background:#fff; color:var(--navy); box-shadow:0 2px 10px rgba(0,0,0,.35);
         display:flex; align-items:center; justify-content:center; cursor:pointer; }
.m-fab svg { fill:none; }
.m-fab[aria-pressed="true"] { background:#1a73e8; color:#fff; }
.m-fab.m-gold { background:var(--gold); }
.m-mk { display:flex; align-items:center; justify-content:center; }   /* (44 px to tap, a 24 px pin to see) */
.m-pin { width:24px; height:24px; border-radius:50%; background:var(--gold); border:3px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.6); }
.m-pin.m-note { background:#ff7043; }
.m-pin.m-mine { background:#7e57c2; }
.m-label { background:none; border:0; box-shadow:none; color:#fff; font-weight:700; font-size:13px; text-shadow:0 1px 3px #000, 0 0 2px #000; padding:0; }
.m-label::before { display:none; }
.m-far .m-label { display:none; }   /* (names only once zoomed in: they pile up further out) */

/* ---- the strip above the tabs (my location, saving, a sent note) */
.m-strip { position:fixed; left:12px; right:76px; bottom:calc(var(--tabs) + 16px); z-index:910; background:var(--navy); color:#fff;
           border-radius:12px; padding:10px 12px; box-shadow:0 2px 12px rgba(0,0,0,.4); font-size:15px; display:flex; gap:10px; align-items:center; }
.m-strip b { color:var(--gold); }
.m-strip a, .m-strip button.m-link { color:var(--gold); font-weight:700; background:none; border:0; padding:0 4px; min-height:44px; text-decoration:none;
                                     display:inline-flex; align-items:center; cursor:pointer; }
.m-strip .m-sx { margin-left:auto; flex:none; width:44px; height:44px; background:none; border:0; color:#fff; font-size:24px; cursor:pointer; }
.m-strip .m-st { flex:1; min-width:0; }

/* ---- the sheet: one at a time, at most half the screen */
.m-sheet { position:fixed; left:0; right:0; bottom:var(--tabs); z-index:1100; max-height:50vh; overflow:auto; background:#fff; color:var(--ink);
           border-radius:16px 16px 0 0; box-shadow:0 -4px 20px rgba(0,0,0,.35); padding:6px 16px 16px; overscroll-behavior:contain; }
.m-sheet.m-tall { max-height:72vh; }
.m-grab { width:44px; height:5px; border-radius:3px; background:#c8cdd2; margin:4px auto 6px; }
.m-x { position:absolute; top:4px; right:6px; width:44px; height:44px; border:0; background:none; font-size:28px; color:var(--muted); cursor:pointer; }
.m-sheet h2 { margin:2px 44px 2px 0; font-size:19px; line-height:1.3; }
.m-sheet .m-sum { margin:4px 0 8px; color:var(--muted); font-size:15px; }
.m-sheet .m-grade { display:inline-block; margin:2px 0 8px; background:#fff4cc; color:#6b4e00; border-radius:8px; padding:4px 10px; font-weight:700; font-size:15px; }
.m-sheet .m-photo { width:100%; max-height:22vh; object-fit:cover; border-radius:10px; display:block; margin:6px 0 8px; background:var(--bg); }
.m-sheet .m-by { color:var(--muted); font-size:15px; margin:0 0 8px; }
.m-acts { display:flex; gap:8px; margin-top:8px; }
.m-acts > * { flex:1 1 0; min-height:48px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--ink); font-weight:700;
              font-size:15px; display:flex; align-items:center; justify-content:center; text-decoration:none; padding:0 6px; text-align:center; cursor:pointer; }
.m-acts > .m-main { background:var(--gold); border-color:var(--gold); color:var(--navy); }
.m-wide { width:100%; margin-top:8px; min-height:48px; border-radius:10px; border:1px solid var(--line); background:var(--bg); font-weight:700; cursor:pointer; }

/* Layers: at most six switches */
.m-sheet .m-sw { display:flex; align-items:center; gap:12px; min-height:52px; margin:0; border-bottom:1px solid var(--line); cursor:pointer; font-size:16px; font-weight:400; }
.m-sheet .m-sw:last-child { border-bottom:0; }
.m-sw .m-dot { width:16px; height:16px; border-radius:4px; flex:none; }
.m-sw span { flex:1; }
.m-sw input { width:24px; height:24px; accent-color:var(--navy); flex:none; }
.m-seg { display:flex; gap:0; margin:6px 0 4px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.m-seg button { flex:1; min-height:48px; border:0; background:var(--bg); font-weight:700; cursor:pointer; }
.m-seg button[aria-pressed="true"] { background:var(--navy); color:#fff; }

/* an area's sheet: title + ★ Recommended, tabs, switches, a colour key, a note */
.m-sheet.m-area { max-height:60vh; }
.m-ah { display:flex; align-items:center; gap:10px; margin-right:44px; flex-wrap:wrap; }
.m-ah h2 { margin:2px 0; flex:1; }
.m-star { min-height:44px; padding:0 12px; border-radius:22px; border:1px solid #ecd68a; background:#fbf3d6; color:#6a520a; font-weight:700; font-size:15px; cursor:pointer; }
.m-star[aria-pressed="true"] { background:var(--navy); border-color:var(--navy); color:var(--gold); }
.m-atabs { display:flex; gap:4px; margin:8px 0 4px; padding:3px; border-radius:12px; background:#eef1f4; }
.m-atabs button { flex:1; min-height:44px; border:0; border-radius:9px; background:none; font-size:15px; font-weight:700; color:#4f5c68; cursor:pointer; }
.m-atabs button[aria-selected="true"] { background:#fff; color:var(--navy); box-shadow:0 1px 3px rgba(0,0,0,.15); }
.m-sw small { display:block; color:var(--muted); font-size:13px; }
.m-sw .m-st { color:#b48600; font-size:14px; }
.m-key { display:grid; gap:4px; margin:8px 0 2px; font-size:15px; }
.m-key span { display:flex; align-items:center; gap:8px; }
.m-key i { width:14px; height:14px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #1f2d3a; flex:none; }
.m-note { margin:10px 0 0; font-size:15px; color:var(--muted); }
.m-note a { color:#0b5cad; font-weight:700; display:inline-flex; min-height:44px; align-items:center; }
/* pictures (Stage B): a list, one on at a time, and the controls under the one that is on */
.m-ph { margin:14px 0 4px; font-size:15px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.m-ph small { text-transform:none; letter-spacing:0; font-weight:600; }
.m-pic { display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:6px 0; border:0; border-bottom:1px solid var(--line); background:none;
         text-align:left; font-size:16px; cursor:pointer; }
.m-pic > span { flex:1; min-width:0; }
.m-pic small { display:block; color:var(--muted); font-size:13px; }
.m-rd { width:20px; height:20px; border-radius:50%; border:2px solid #9aa6b1; flex:none; }
.m-pic[aria-pressed="true"] .m-rd { border-color:var(--navy); background:radial-gradient(var(--navy) 0 5px, #fff 6px); }
.m-pc { display:grid; gap:8px; padding:8px 0 12px; border-bottom:1px solid var(--line); }
.m-pc .m-seg { margin:0; }
.m-depths { display:flex; gap:6px; flex-wrap:wrap; }
.m-depths button { min-height:44px; min-width:56px; padding:0 10px; border-radius:22px; border:1px solid var(--line); background:var(--bg); font-weight:700; font-size:15px; cursor:pointer; }
.m-depths button[aria-pressed="true"] { background:var(--navy); border-color:var(--navy); color:#fff; }
.m-sheet label.m-fade { display:flex; align-items:center; gap:10px; margin:0; font-size:15px; font-weight:700; min-height:44px; }
.m-fade input { flex:1; accent-color:var(--navy); height:32px; }
.m-fade span { width:44px; text-align:right; font-weight:400; color:var(--muted); }
.m-bar { height:10px; border-radius:5px; background:linear-gradient(90deg, #30123b, #4686fb, #1ae4b6, #a2fc3c, #fabb39, #e4460a, #7a0403); }
.m-barl { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin-top:-4px; }
/* Stage C: the hole card's gold strip and core photos, the target walk, Ask */
.m-hl { margin:10px 0 4px; font-size:15px; }
.m-strip2 { width:100%; height:auto; display:block; background:#f4f6f8; border-radius:8px; }
.m-ax { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin-top:2px; }
.m-thumbs { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.m-thumbs button { position:relative; border:0; padding:0; background:#ddd; border-radius:8px; overflow:hidden; aspect-ratio:4/3; cursor:pointer; min-height:44px; }
.m-thumbs img { width:100%; height:100%; object-fit:cover; display:block; }
.m-thumbs span { position:absolute; left:4px; bottom:4px; background:rgba(0,0,0,.65); color:#fff; font-size:13px; border-radius:4px; padding:0 4px; }
.m-core { width:100%; max-height:46vh; object-fit:contain; background:#111; border-radius:10px; display:block; }
.m-walk { display:flex; align-items:center; gap:8px; margin:0 44px 6px 0; font-weight:700; font-size:15px; }
.m-walk span { flex:1; text-align:center; }
.m-walk button { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--bg); font-size:22px; cursor:pointer; }
.m-why { margin:0 0 6px; padding-left:20px; font-size:15px; }
.m-ask { background:#fff; }
.m-err { color:#b3261e; font-weight:700; font-size:15px; margin:8px 0 0; }
.m-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.m-acts > button[disabled] { opacity:.45; cursor:default; }

.m-rockmode .leaflet-tile-pane { filter:grayscale(.85) brightness(.55); }
.m-picimg { position:absolute; left:0; top:0; max-width:none !important; transform-origin:0 0; pointer-events:none; user-select:none; }

.m-num span { display:inline-block; transform:translate(-50%, -50%); white-space:nowrap; color:#fff; font:700 12px/1 "Open Sans", system-ui, sans-serif;
              background:rgba(211,47,47,.85); border-radius:4px; padding:2px 4px; }
.m-far .m-num { display:none; }

/* a note */
.m-sheet label { display:block; font-weight:700; font-size:15px; margin:8px 0 4px; }
.m-sheet input[type=text], .m-sheet textarea { width:100%; font:16px/1.4 inherit; border:1px solid #b9c1c9; border-radius:10px; padding:10px 12px; }
.m-sheet textarea { min-height:90px; resize:vertical; }

/* ---- the tabs that cover the map (Places, Story, More) */
.m-panel { position:fixed; top:var(--top); bottom:var(--tabs); left:0; right:0; z-index:1050; overflow:auto; background:var(--bg); padding:14px 16px 24px;
           overscroll-behavior:contain; }
.m-panel h1 { font-size:22px; margin:2px 0 12px; }
.m-muted { color:var(--muted); font-size:15px; margin:4px 0 8px; }
#m-search { width:100%; font-size:16px; min-height:48px; border:1px solid #b9c1c9; border-radius:12px; padding:0 14px; background:#fff; }
.m-group { margin:16px 0 6px; font-size:15px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.m-row { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:8px 12px; background:#fff; border:0; border-bottom:1px solid var(--line);
         text-align:left; text-decoration:none; color:var(--ink); font-size:16px; cursor:pointer; }
.m-row:last-child, .m-form:last-child .m-row { border-bottom:0; }
.m-panel > .m-row { border-radius:12px; margin-top:10px; }
.m-row > span:nth-child(2) { flex:1; min-width:0; }
.m-row small { display:block; color:var(--muted); font-size:15px; line-height:1.3; }
.m-row .m-ic { width:28px; text-align:center; font-size:20px; flex:none; color:var(--navy); }
.m-row .m-d { color:var(--muted); font-size:15px; flex:none; }
.m-list { border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.m-places-g { border-radius:12px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.m-form { margin:0; }
.m-who { cursor:default; }

/* Story */
.m-facts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.m-fact { background:var(--navy); color:#fff; border-radius:12px; padding:12px; }
.m-fact b { display:block; color:var(--gold); font-size:22px; line-height:1.2; }
.m-fact span { font-size:15px; line-height:1.3; display:block; margin-top:2px; }
.m-q { background:#fff; border-radius:12px; padding:14px; margin-bottom:10px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.m-q h2 { font-size:18px; margin:0 0 6px; display:flex; gap:10px; align-items:flex-start; }
.m-q h2 i { font-style:normal; color:#b48600; flex:none; }
.m-q p { margin:0 0 10px; font-size:16px; }
.m-q .m-links a { display:inline-flex; align-items:center; min-height:44px; margin-right:14px; color:#0b5cad; font-weight:700; }
.m-q button { width:100%; min-height:48px; border-radius:10px; border:0; background:var(--gold); color:var(--navy); font-weight:800; cursor:pointer; }

/* ---- the tab bar */
.m-tabs { position:fixed; left:0; right:0; bottom:0; height:var(--tabs); padding-bottom:env(safe-area-inset-bottom); z-index:1200; display:flex;
          background:var(--navy); border-top:1px solid #34495c; }
.m-tabs button { flex:1; border:0; background:none; color:#c4cdd5; display:flex; flex-direction:column; align-items:center; justify-content:center;
                 gap:2px; font-size:13px; font-weight:700; cursor:pointer; min-height:56px; }
.m-tabs button svg { fill:none; }
.m-tabs button[data-tab="more"] svg { fill:currentColor; stroke:none; }
.m-tabs button.on { color:var(--gold); }
@media (min-width:700px) { .m-sheet, .m-strip { left:50%; right:auto; width:560px; transform:translateX(-50%); } .m-panel > * { max-width:640px; margin-left:auto; margin-right:auto; } }