/* =========================================================================
   redesign-skin.css — "Rugged Field / Blaze Night" skin for the REAL app.
   Loaded only by index-redesign.html (scoped under body.redesign).
   Pairs with redesign-adapter.js, which builds the shell and relocates the
   app's real controls into it. No app logic depends on this file.
   ========================================================================= */
body.redesign {
    --bg:#07090A; --surface:#121517; --elevated:#1B2023; --hairline:#2A3034;
    --text:#F4F6F5; --muted:#9AA4A6; --faint:#6B7476;
    --green:#36C26A; --green-dim:#103021; --blaze:#FF6A1A; --blaze-dim:#3A2113;
    --red:#FF5A5F; --amber:#F2B705; --sky:#4FA3E3;
    --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:999px;
    --shadow:0 8px 30px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.4);
    --tap:48px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
body.redesign { font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:var(--bg); overflow-x:hidden; }
body.redesign h1,body.redesign h2,body.redesign h3,body.redesign h4 { font-family:'Space Grotesk',sans-serif; letter-spacing:-.01em; }
body.redesign .leaflet-tile-pane { filter:saturate(.85) brightness(.82) contrast(1.04); }

/* Hide the original top-right control panel chrome (its content gets relocated) */
body.redesign .controls { display:none !important; }
/* The original weather panel is relocated into the top bar by the adapter */

/* ---------- Top bar ---------- */
.rs-topbar { position:fixed; z-index:1200; top:calc(8px + var(--safe-t)); left:12px; right:12px; display:flex; align-items:flex-start; gap:10px; pointer-events:none; }
.rs-topbar > * { pointer-events:auto; }
.rs-brand { display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md); padding:9px 13px; box-shadow:var(--shadow); min-width:0; flex:1; }
.rs-logo { width:34px; height:34px; flex:none; border-radius:10px; background:linear-gradient(150deg,var(--green),var(--green-dim)); display:grid; place-items:center; }
.rs-logo svg { width:20px; height:20px; }
.rs-brand .nm { font-family:'Space Grotesk'; font-weight:600; font-size:15px; line-height:1.1; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rs-brand .sub { font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.rs-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-dim); flex:none; }
/* Sync pill states — adapter sets data-s on #rsSync from real sync signals */
#rsSync { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#rsSync[data-s="saving"] .rs-dot { background:var(--amber); box-shadow:0 0 0 3px rgba(242,183,5,.15); animation:rsDotPulse 1.2s ease-in-out infinite; }
#rsSync[data-s="offline"] .rs-dot { background:var(--amber); box-shadow:0 0 0 3px rgba(242,183,5,.15); }
#rsSync[data-s="offline"] { color:var(--amber); }
#rsSync[data-s="error"] .rs-dot { background:var(--red); box-shadow:0 0 0 3px rgba(255,90,95,.15); }
#rsSync[data-s="error"] { color:var(--red); }
@keyframes rsDotPulse { 50% { opacity:.35; } }
/* Relocated weather panel restyled as a chip */
.rs-topbar #weatherPanel { position:static !important; margin:0 !important; min-width:0 !important; flex:none; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md); box-shadow:var(--shadow); max-width:180px; }
.rs-topbar #weatherPanel h4 { background:transparent; border:none; padding:8px 12px; font-family:'Space Grotesk'; }
.rs-topbar #weatherPanel .weather-content { padding:0 12px 8px; }

/* ---------- Map rail ---------- */
.rs-rail { position:fixed; z-index:1150; right:12px; top:calc(110px + var(--safe-t)); display:flex; flex-direction:column; gap:8px; }
.rs-rail button { width:var(--tap); height:var(--tap); border-radius:14px; background:var(--surface); border:1px solid var(--hairline); display:grid; place-items:center; box-shadow:var(--shadow); color:var(--text); }
.rs-rail button.on { background:var(--green-dim); border-color:var(--green); color:var(--green); }
.rs-rail button.locating { background:var(--sky); border-color:var(--sky); color:#07090A; animation:rs-locpulse 1s ease-in-out infinite; }
@keyframes rs-locpulse { 0%,100%{opacity:1;} 50%{opacity:.55;} }
.rs-rail svg { width:22px; height:22px; }
/* When the drawer is raised, the rail drops behind it and goes inert */
body.rs-drawer-open .rs-rail { z-index:1090; opacity:0; pointer-events:none; transition:opacity .2s; }
/* The Add button covers drawer content when the sheet is up — fade it out with the rail */
body.rs-drawer-open .rs-fab { opacity:0; pointer-events:none; }

/* ---------- FAB + Add menu ---------- */
.rs-fab { position:fixed; z-index:1250; right:16px; bottom:calc(96px + var(--safe-b)); height:54px; padding:0 20px 0 16px; border-radius:var(--r-pill); background:var(--blaze); color:#1a0e06; font-weight:700; font-size:15px; display:flex; align-items:center; gap:8px; box-shadow:0 10px 26px rgba(255,106,26,.4), var(--shadow); border:none; transition:transform .15s, bottom .3s, opacity .2s; }
.rs-fab:active { transform:scale(.95); }
.rs-fab svg { width:22px; height:22px; }
.rs-scrim { position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,.55); opacity:0; visibility:hidden; transition:opacity .2s; }
.rs-scrim.show { opacity:1; visibility:visible; }
.rs-sheetpop { position:fixed; z-index:1310; left:0; right:0; bottom:0; background:var(--surface); border-top:1px solid var(--hairline); border-radius:26px 26px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.6); padding:0 16px calc(16px + var(--safe-b)); transform:translateY(100%); transition:transform .26s cubic-bezier(.22,1,.36,1); }
.rs-sheetpop.show { transform:translateY(0); }
.rs-grab { width:40px; height:5px; border-radius:3px; background:var(--hairline); margin:9px auto 10px; }
.rs-pop-title { font-family:'Space Grotesk'; font-weight:600; font-size:16px; margin:2px 2px 12px; color:var(--text); }
.rs-add-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
/* relocated real add buttons, restyled as tiles */
.rs-add-grid .btn { display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:14px 8px !important; background:var(--elevated) !important; border:1px solid var(--hairline) !important; border-radius:var(--r-md) !important; color:var(--text) !important; font-size:12px !important; font-weight:600 !important; min-height:auto !important; box-shadow:none !important; }
.rs-add-grid .btn .rs-ai { width:30px; height:30px; color:var(--green); }
.rs-add-grid .btn .rs-ai svg { width:30px; height:30px; }

/* ---------- Bottom drawer ---------- */
.rs-sheet { position:fixed; z-index:1100; left:0; right:0; bottom:0; height:75vh; max-height:720px; background:var(--surface); border-top:1px solid var(--hairline); border-radius:22px 22px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.5); padding-bottom:var(--safe-b); display:flex; flex-direction:column; transform:translateY(var(--rs-y,0)); transition:transform .32s cubic-bezier(.22,1,.36,1); }
.rs-sheet.dragging { transition:none; }
.rs-handle { flex:none; padding:9px 16px 8px; display:flex; flex-direction:column; align-items:center; gap:7px; cursor:grab; touch-action:none; user-select:none; }
.rs-handle .rs-grab { margin:0; }
.rs-peek { display:flex; align-items:center; gap:10px; width:100%; font-size:13px; color:var(--muted); }
.rs-peek b { font-family:'Space Grotesk'; color:var(--text); font-size:15px; }
.rs-peek .sw { width:9px; height:9px; border-radius:50%; }
.rs-peek .sp { flex:1; }
.rs-peek .chev { color:var(--faint); transition:transform .32s; }
.rs-sheet[data-state="collapsed"] .rs-peek .chev { transform:rotate(180deg); }
.rs-peek .chev svg { width:20px; height:20px; }

.rs-seg-nav { display:flex; gap:4px; margin:2px 14px 10px; padding:4px; background:var(--bg); border:1px solid var(--hairline); border-radius:14px; flex:none; }
.rs-seg { flex:1; height:38px; border-radius:10px; font-size:13px; font-weight:500; color:var(--muted); display:flex; align-items:center; justify-content:center; gap:6px; border:none; background:none; }
.rs-seg svg { width:17px; height:17px; }
.rs-seg.active { background:var(--elevated); color:var(--text); }

.rs-scroll { overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 14px 16px; flex:1; }
.rs-pane { display:none; }
.rs-pane.active { display:block; }
/* relocated real tab panes: let .rs-pane control visibility, not the old .active rule */
body.redesign .rs-pane .tab-content { display:block !important; }

/* Bento + section labels */
.rs-bento { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:11px; }
.rs-stat { background:var(--elevated); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:11px 12px; }
.rs-stat .n { font-family:'Space Grotesk'; font-size:22px; font-weight:600; line-height:1; }
.rs-stat .n.green{color:var(--green);} .rs-stat .n.red{color:var(--red);} .rs-stat .n.blaze{color:var(--blaze);}
.rs-stat .l { font-size:11px; color:var(--muted); margin-top:5px; }
.rs-label { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin:4px 2px 9px; }

/* Stand cards */
.rs-card { display:flex; align-items:center; gap:12px; background:var(--elevated); border:1px solid var(--hairline); border-left:3px solid var(--hairline); border-radius:var(--r-sm); padding:11px; margin-bottom:7px; min-height:var(--tap); cursor:pointer; }
.rs-card[data-st="available"]{border-left-color:var(--green);}
.rs-card[data-st="occupied"]{border-left-color:var(--red);}
.rs-card[data-st="conflict"]{border-left-color:var(--amber);}
.rs-ci { width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; background:var(--green-dim); color:var(--green); }
.rs-card[data-st="occupied"] .rs-ci{background:#3a1b1c;color:var(--red);}
.rs-card[data-st="conflict"] .rs-ci{background:#3a3206;color:var(--amber);}
.rs-ci svg{width:21px;height:21px;}
.rs-cm{flex:1;min-width:0;}
.rs-cm .t{font-weight:700;font-size:15px;color:var(--text);display:flex;align-items:center;gap:8px;}
.rs-cm .m{font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rs-badge{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);flex:none;}
.rs-badge.available{background:var(--green-dim);color:var(--green);}
.rs-badge.occupied{background:#3a1b1c;color:var(--red);}
.rs-badge.conflict{background:#3a3206;color:var(--amber);}
.rs-chevr{color:var(--faint);flex:none;} .rs-chevr svg{width:18px;height:18px;}
.rs-empty{text-align:center;color:var(--faint);font-size:13px;padding:24px 10px;}

/* Reco banner wraps the real Get Recommendations button */
.rs-reco{margin-bottom:14px;}
.rs-reco .btn{width:100%;background:linear-gradient(135deg,var(--blaze-dim),var(--elevated)) !important;border:1px solid #4a2c18 !important;color:var(--text) !important;border-radius:var(--r-md) !important;display:flex;align-items:center;justify-content:center;gap:9px;min-height:50px;}

/* ---------- Restyle relocated real content (To-Do / Stats / More) ---------- */
body.redesign .tab-content{padding:0 !important;}
body.redesign .btn{border-radius:12px;min-height:46px;font-weight:600;}
body.redesign .btn-primary,body.redesign .btn-recommendations{background:var(--blaze);color:#1a0e06;}
body.redesign .btn-success{background:var(--green-dim);color:var(--green);border:1px solid #2C5740;}
body.redesign .btn-success.active{background:var(--green);color:#07090A;}
body.redesign .btn-danger{background:var(--red);}
body.redesign .todo-input{background:var(--bg);border:1px solid var(--hairline);color:var(--text);border-radius:12px;}
body.redesign .todo-add-btn{background:var(--blaze);color:#1a0e06;border-radius:12px;}
body.redesign .stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
body.redesign .stat-item{background:var(--elevated);border:1px solid var(--hairline);border-radius:var(--r-sm);padding:12px;}
body.redesign .stat-value{font-family:'Space Grotesk';color:var(--green);}
body.redesign .stat-row{padding:8px 2px;border-bottom:1px solid var(--hairline);}
body.redesign .marker-legend{border-top:1px solid var(--hairline);}
body.redesign .legend-color{border-color:var(--hairline) !important;}

/* ---------- Map pins (built by app.js when body.redesign) ---------- */
.rs-pin{display:grid;place-items:center;width:38px;height:38px;border-radius:50% 50% 50% 4px;transform:rotate(45deg);border:2.5px solid #07090A;box-shadow:0 4px 10px rgba(0,0,0,.5);}
.rs-pin > *{transform:rotate(-45deg);}
.rs-pin svg{width:18px;height:18px;}
.rs-pin.available{background:var(--green);} .rs-pin.occupied{background:var(--red);} .rs-pin.conflict{background:var(--amber);}
.rs-pin.square{border-radius:9px 9px 9px 4px;}

/* ---------- Detail sheet ---------- */
.rs-detail{position:fixed;z-index:1310;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--hairline);border-radius:26px 26px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.6);padding:0 16px calc(18px + var(--safe-b));transform:translateY(100%);transition:transform .26s cubic-bezier(.22,1,.36,1);}
.rs-detail.show{transform:translateY(0);}
.rs-dhead{display:flex;align-items:center;gap:13px;margin-bottom:16px;}
.rs-dhead .rs-ci{width:50px;height:50px;border-radius:14px;} .rs-dhead .rs-ci svg{width:26px;height:26px;}
.rs-dhead h2{font-size:21px;color:var(--text);} .rs-dhead .m{font-size:13px;color:var(--muted);margin-top:2px;}
.rs-dgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px;}
.rs-dchip{background:var(--elevated);border:1px solid var(--hairline);border-radius:var(--r-sm);padding:11px 12px;}
.rs-dchip .k{font-size:11px;color:var(--muted);} .rs-dchip .v{font-family:'Space Grotesk';font-size:16px;margin-top:4px;color:var(--text);}
.rs-cta-row{display:flex;gap:10px;}
.rs-cta{flex:1;height:var(--tap);border-radius:14px;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:9px;border:none;}
.rs-cta svg{width:20px;height:20px;}
.rs-cta.primary{background:var(--blaze);color:#1a0e06;} .rs-cta.primary.out{background:var(--red);color:#fff;}
.rs-cta.ghost{background:var(--elevated);border:1px solid var(--hairline);color:var(--text);flex:0 0 var(--tap);}

/* ---------- Info-sheet action layout (camera / parking / todo markers) ---------- */
/* Vertical stack: prominent primary, a comfortable grid of ghosts, then danger.
   Larger tap targets (>=54px) and clear spacing so 4 actions never crowd. */
.rs-iactions{flex-direction:column;gap:10px;margin-top:4px;}
.rs-iactions .rs-iact-primary,
.rs-iactions .rs-iact-grid,
.rs-iactions .rs-iact-danger{display:grid;gap:10px;width:100%;}
.rs-iactions .rs-iact-grid[data-n="2"]{grid-template-columns:1fr 1fr;}
.rs-iactions .rs-cta{flex:none;width:100%;height:auto;min-height:54px;font-size:16px;padding:0 16px;}
.rs-iactions .rs-iact-primary .rs-cta{min-height:58px;font-size:17px;}
.rs-iactions .rs-cta.ghost{flex:none;}
.rs-iactions .rs-cta.danger{background:var(--red);color:#fff;}

/* ---------- Restyle the app's real modals to match ---------- */
body.redesign .compass-content,
body.redesign .recommendations-content,
body.redesign #standModal > div,
body.redesign #occupyStandModal > div,
body.redesign #sightingModal > div,
body.redesign #cameraModal > div,
body.redesign #locationSharingModal > div,
body.redesign #todoCompletionModal > div { border-radius:var(--r-lg) !important; }
body.redesign .stand-label{background:rgba(18,21,23,.92) !important;border:1px solid var(--hairline) !important;color:var(--text) !important;}
/* Declutter: hide stand-name labels when zoomed out or toggled off (rail labels button) */
body.redesign.rs-hide-labels .stand-label{display:none !important;}
body.redesign .leaflet-popup-content-wrapper,body.redesign .leaflet-popup-tip{background:var(--surface) !important;color:var(--text) !important;}

/* ---------- Modal Manager (hunt complete, alerts, confirms, prompts) ---------- */
body.redesign .custom-modal { background:var(--surface) !important; border:1px solid var(--hairline) !important; border-radius:var(--r-lg) !important; box-shadow:var(--shadow) !important; }
body.redesign .custom-modal-title { color:var(--text) !important; font-family:'Space Grotesk',sans-serif !important; }
body.redesign .custom-modal-body { color:var(--muted) !important; }
body.redesign .custom-modal-input,
body.redesign .custom-modal-textarea { background:var(--bg) !important; border-color:var(--hairline) !important; color:var(--text) !important; border-radius:10px !important; }
body.redesign .custom-modal-input:focus,
body.redesign .custom-modal-textarea:focus { border-color:var(--green) !important; }
body.redesign .custom-modal-btn { border-radius:10px !important; font-weight:600 !important; min-height:42px !important; padding:0 20px !important; }
body.redesign .custom-modal-btn-primary { background:var(--blaze) !important; color:#1a0e06 !important; }
body.redesign .custom-modal-btn-secondary { background:var(--elevated) !important; color:var(--text) !important; border:1px solid var(--hairline) !important; }
body.redesign .custom-modal-btn-danger { background:var(--red) !important; color:#fff !important; }
body.redesign .custom-modal-btn-success { background:var(--green) !important; color:#07090A !important; }

@media (prefers-reduced-motion:reduce){ body.redesign *{transition:none !important;} }
@media (min-width:620px){
    .rs-sheet,.rs-detail,.rs-sheetpop{left:50%;right:auto;width:460px;transform:translateX(-50%);}
    .rs-sheet{transform:translate(-50%,var(--rs-y,0));}
    .rs-detail,.rs-sheetpop{transform:translate(-50%,100%);}
    .rs-detail.show,.rs-sheetpop.show{transform:translate(-50%,0);}
    .rs-fab{right:calc(50% - 230px + 16px);}
}