:root{
    --navy:#0d2a5e;
    --blue:#1565C0;
    --bg:#f5f7fb;
    --ok:#2e7d32;
    --warn:#c77700;
    --danger:#c62828;
    --radius:12px;
}
*{box-sizing:border-box}
html{overflow-x:hidden; width:100%}
body{
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    margin:0; background:var(--bg); color:#1a2233;
    overflow-x:hidden; width:100%;
    /* Keeps the page at least one full screen tall even with little content
       (e.g. an empty "Nothing here" moderation queue) — otherwise, on
       mobile, the browser's own address/toolbar stays expanded since there's
       nothing to scroll, and it can visually cover the bottom of things like
       the open hamburger dropdown. min-height on its own is enough on most
       browsers; the dvh line is a progressive enhancement that additionally
       accounts for that toolbar's height on browsers that support it. */
    min-height: 100vh;
    min-height: 100dvh;
}
.rm-header{
    background:var(--navy); color:#fff; padding:.9rem 1rem;
    display:flex; align-items:center; gap:.6rem;
    position:sticky; top:0; z-index:1000;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    max-width:100vw;
}
.rm-header img{height:36px; max-width:150px; width:auto; object-fit:contain; flex-shrink:0}
.rm-logo-link{display:flex; align-items:center; flex-shrink:0; line-height:0}
.rm-header h1{font-size:1.05rem; margin:0; font-weight:700; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rm-header .rm-sub{font-size:.72rem; opacity:.85; font-weight:400; white-space:nowrap}
.rm-header nav{margin-left:auto; flex-shrink:0}

/* ---- hamburger menu (replaces the old always-visible link row) ---- */
.rm-menu-wrap{display:flex; align-items:center; gap:.5rem; position:relative}
.rm-menu-btn{
    background:rgba(255,255,255,.15); border:none; color:#fff;
    width:44px; height:44px; border-radius:10px; font-size:1.35rem; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.rm-menu-btn:hover{background:rgba(255,255,255,.25)}
.rm-menu-dropdown{
    position:absolute; top:calc(100% + .6rem); right:0; background:#fff;
    border-radius:12px; box-shadow:0 10px 28px rgba(0,0,0,.2); min-width:210px;
    padding:.4rem; z-index:200; display:none; border:1px solid #e0e4ec;
}
.rm-menu-dropdown.open{display:block}
.rm-menu-dropdown a{
    display:flex; align-items:center; justify-content:space-between; gap:.6rem;
    padding:.85rem .9rem; border-radius:8px; color:var(--navy); text-decoration:none;
    font-size:.95rem; font-weight:600; min-height:44px;
}
.rm-menu-dropdown a:hover{background:#f0f5ff}
.rm-menu-dropdown .rm-menu-divider{height:1px; background:#eef1f4; margin:.35rem .4rem}
.rm-menu-dropdown a.admin-link{color:#889}

.rm-nav-badge{
    display:none; background:#e85d5d; color:#fff; font-size:.68rem; font-weight:800;
    border-radius:10px; padding:.05rem .4rem; margin-left:.25rem; vertical-align:middle;
}
.rm-nav-badge.show{display:inline-block}

.rm-wrap{max-width:560px; margin:0 auto; padding:1rem; width:100%}
.rm-card{
    background:#fff; border-radius:var(--radius); padding:1.1rem;
    box-shadow:0 1px 4px rgba(13,42,94,.08); margin-bottom:1rem;
    max-width:100%; overflow-wrap:break-word;
}
.rm-card h2{font-size:1rem; margin:0 0 .7rem; color:var(--navy)}

label{display:block; font-weight:600; font-size:.9rem; margin-bottom:.35rem; color:#1a2233}
input,select,textarea{
    width:100%; padding:.85rem; margin-bottom:1rem; border:1.5px solid #d8dee8;
    border-radius:9px; font-size:1rem; font-family:inherit; background:#fff;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue)}
textarea{resize:vertical; min-height:70px}
.rm-hint{font-size:.78rem; color:#667; margin-top:-.7rem; margin-bottom:1rem; overflow-wrap:break-word}
.rm-honeypot{position:absolute; left:-9999px; opacity:0}

.rm-radio-inline{
    display:flex; align-items:center; gap:.5rem; font-weight:400; font-size:.95rem;
    background:#f5f7fb; border:1.5px solid #d8dee8; border-radius:9px; padding:.75rem .9rem;
    cursor:pointer; margin:0; min-height:44px;
}
.rm-radio-inline input{width:auto; margin:0; padding:0; accent-color:var(--blue); flex-shrink:0}
.rm-radio-inline:has(input:checked), .rm-radio-inline.is-checked{
    background:#e8f0fe; border-color:var(--blue); color:var(--navy); font-weight:700;
}

.rm-btn{
    display:inline-block; width:100%; padding:1rem; border:none; border-radius:9px;
    font-size:1.05rem; font-weight:700; cursor:pointer; text-align:center;
    background:var(--blue); color:#fff; min-height:52px;
}
.rm-btn:hover{background:#0d4c9e}
.rm-btn:disabled{opacity:.6; cursor:not-allowed}
.rm-btn.secondary{background:#e8edf7; color:var(--navy)}
.rm-btn.secondary:hover{background:#dbe3f3}
.rm-btn.danger{background:var(--danger)}
.rm-btn.success{background:var(--ok)}
.rm-btn.small{width:auto; padding:.9rem 1.2rem; font-size:.92rem; min-height:48px}

.rm-loc-btn{
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    background:#e8f0fe; color:var(--navy); border:1.5px solid #b6d0f7;
    border-radius:9px; padding:.9rem; font-weight:700; cursor:pointer; margin-bottom:.7rem; width:100%;
    min-height:52px;
}
.rm-loc-btn.active{background:#e3f6e5; border-color:#8fd39a; color:#1e5c26}
#rm-map{height:220px; border-radius:9px; margin-bottom:.5rem; overflow:hidden; border:1.5px solid #d8dee8; max-width:100%}
.rm-map-hint{font-size:.78rem; color:#667; margin-bottom:1rem}

.rm-autocomplete{position:relative; max-width:100%}
.rm-suggestions{
    position:absolute; left:0; right:0; top:calc(100% - .9rem); z-index:20;
    background:#fff; border:1.5px solid #d8dee8; border-top:none; border-radius:0 0 9px 9px;
    max-height:220px; overflow-y:auto; box-shadow:0 6px 14px rgba(0,0,0,.1); display:none;
    max-width:100%;
}
.rm-suggestions.show{display:block}
.rm-suggestion{padding:.9rem .9rem; cursor:pointer; border-bottom:1px solid #f0f2f6; overflow-wrap:break-word; min-height:44px}
.rm-suggestion:last-child{border-bottom:none}
.rm-suggestion:hover, .rm-suggestion.active{background:#f0f5ff}
.rm-suggestion .sci{font-size:.78rem; color:#889; font-style:italic}
.rm-suggestion .cat{font-size:.7rem; color:#1565C0; background:#e8f0fe; padding:.1rem .4rem; border-radius:4px; margin-left:.4rem; white-space:nowrap}

.rm-photo-preview{max-width:100%; border-radius:9px; margin-bottom:1rem; display:none}
.rm-row{display:flex; gap:.7rem; max-width:100%}
.rm-row > div{flex:1; min-width:0}

.rm-disclaimer{
    background:#fff3cd; border:1px solid #ffeeba; padding:.85rem 1rem;
    border-radius:9px; font-size:.85rem; margin-bottom:1rem; overflow-wrap:break-word;
}
.rm-disclaimer a{color:#8a5a00; font-weight:700}

.rm-badge-chip{
    display:inline-flex; align-items:center; gap:.4rem; background:#e8f0fe; color:var(--navy);
    padding:.35rem .7rem; border-radius:20px; font-weight:700; font-size:.85rem; max-width:100%;
}

.rm-footer{text-align:center; padding:1.5rem 1rem 2.5rem; font-size:.82rem; color:#667}
.rm-footer a{color:var(--blue); text-decoration:none; font-weight:600; display:inline-block; padding:.3rem 0}

.rm-success{text-align:center; padding:1rem}
.rm-success .icon{font-size:3rem; margin-bottom:.5rem}
.rm-success h2{color:var(--ok); margin:0 0 .5rem}
.rm-progress{background:#eef1f6; border-radius:20px; height:14px; overflow:hidden; margin:.6rem 0}
.rm-progress-fill{background:var(--blue); height:100%; transition:width .4s}

/* ---- quick-save FAB + toast + pending queue ---- */
.rm-fab{
    position:fixed; right:1rem; bottom:1.3rem; z-index:100;
    width:64px; height:64px; border-radius:50%;
    background:var(--danger); color:#fff; border:none;
    box-shadow:0 4px 14px rgba(198,40,40,.45);
    font-size:1.7rem; display:flex; align-items:center; justify-content:center;
    cursor:pointer;
}
.rm-fab:active{transform:scale(.93)}
.rm-fab.saving{background:#a83232; animation:rm-pulse 1s infinite}
@keyframes rm-pulse{0%{box-shadow:0 0 0 0 rgba(198,40,40,.6)}70%{box-shadow:0 0 0 16px rgba(198,40,40,0)}100%{box-shadow:0 0 0 0 rgba(198,40,40,0)}}

.rm-toast{
    position:fixed; left:50%; bottom:6.2rem; transform:translateX(-50%) translateY(20px);
    background:var(--navy); color:#fff; padding:.8rem 1.3rem; border-radius:30px;
    font-weight:700; font-size:.92rem; box-shadow:0 4px 14px rgba(0,0,0,.25);
    opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:110;
    max-width:88vw; text-align:center;
}
.rm-toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.rm-toast.error{background:var(--danger)}

.rm-pending-item{
    background:#fff; border-radius:12px; padding:.9rem 1rem; margin-bottom:.7rem;
    box-shadow:0 1px 4px rgba(13,42,94,.08); display:flex; align-items:center; gap:.8rem;
    max-width:100%;
}
.rm-pending-item .info{flex:1; min-width:0}
.rm-pending-item .time{font-weight:700; color:var(--navy); overflow-wrap:break-word}
.rm-pending-item .coords{font-size:.78rem; color:#889; overflow-wrap:break-word}
.rm-pending-item .actions{display:flex; gap:.5rem; flex-shrink:0}
.rm-pending-item .actions button{
    border:none; border-radius:8px; padding:.7rem .95rem; font-weight:700; font-size:.85rem; cursor:pointer;
    min-height:44px; min-width:44px;
}
.rm-pending-empty{text-align:center; color:#889; padding:2rem 1rem; font-size:.9rem}

/* ---- first-run intro overlay ----
   Must render above .rm-header (z-index:1000), since the header is a
   sibling later in paint order with its own stacking context — otherwise
   the header shows through on top of this overlay. */
.rm-intro-overlay{
    position:fixed; inset:0; z-index:2000; background:var(--navy);
    display:flex; flex-direction:column; color:#fff;
    animation:rm-intro-fade .25s ease;
    max-width:100vw; overflow-x:hidden;
}
@keyframes rm-intro-fade{from{opacity:0}to{opacity:1}}
.rm-intro-skip{
    position:absolute; top:1rem; right:1rem; z-index:2;
    background:rgba(255,255,255,.12); border:none; color:#fff;
    font-size:.8rem; font-weight:700; padding:.7rem 1rem; border-radius:20px; cursor:pointer;
    min-height:40px;
}
.rm-intro-body{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:2.5rem 1.6rem 1rem; max-width:420px; width:100%; margin:0 auto;
    box-sizing:border-box;
}
.rm-intro-icon{font-size:3.6rem; margin-bottom:1rem; line-height:1}
.rm-intro-logo{max-width:230px; width:78%; margin-bottom:1.2rem}
.rm-intro-body h2{font-size:1.4rem; margin:0 0 .7rem; font-weight:800}
.rm-intro-body p{font-size:1rem; opacity:.92; line-height:1.5; margin:0; overflow-wrap:break-word}
.rm-intro-dots{display:flex; justify-content:center; gap:.4rem; padding:1rem 0}
.rm-intro-dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3)}
.rm-intro-dot.active{background:#fff; width:22px; border-radius:5px; transition:width .2s}
.rm-intro-nav{padding:0 1.6rem 2.2rem; max-width:420px; width:100%; margin:0 auto; box-sizing:border-box}
.rm-intro-nav .rm-btn{margin-bottom:.6rem}
.rm-intro-nav .rm-btn.secondary{background:rgba(255,255,255,.14); color:#fff}
.rm-intro-nav .rm-btn.secondary:hover{background:rgba(255,255,255,.22)}

/* ---- profile picture crop/rotate editor ---- */
.rm-avatar-editor-overlay{
    position:fixed; inset:0; z-index:2000; background:rgba(13,42,94,.78);
    display:none; align-items:center; justify-content:center; padding:1rem;
}
.rm-avatar-editor-card{
    background:#fff; border-radius:16px; padding:1.3rem; max-width:340px; width:100%;
    text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.rm-avatar-editor-card h2{font-size:1.05rem; color:var(--navy); margin:0 0 1rem; font-weight:800}
.rm-avatar-canvas-wrap{
    width:240px; height:240px; border-radius:50%; overflow:hidden; margin:0 auto 1rem;
    background:#111; touch-action:none; box-shadow:0 0 0 4px #e8f0fe;
}
.rm-avatar-canvas-wrap canvas{display:block; cursor:grab; touch-action:none}
#rm-avatar-zoom{width:100%; margin:0 0 1.1rem}
.rm-avatar-editor-actions{display:flex; gap:.6rem}
.rm-avatar-editor-actions .rm-btn{flex:1}

/* ---- joey urgent-alert popup ----
   Appears the instant "joey present? Yes" is selected. Kept minimal and
   red/urgent on purpose — the goal is getting someone to the phone fast,
   not explaining anything. Sits above every other overlay. */
.rm-joey-overlay{
    position:fixed; inset:0; z-index:3000; background:rgba(90,10,10,.82);
    display:none; align-items:center; justify-content:center; padding:1rem;
}
.rm-joey-overlay.show{display:flex}
.rm-joey-card{
    background:#fff; border-radius:16px; padding:1.6rem 1.4rem; max-width:340px; width:100%;
    text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.rm-joey-icon{font-size:3rem; margin-bottom:.3rem; line-height:1}
.rm-joey-card h2{font-size:1.3rem; margin:0 0 .5rem; color:var(--danger); font-weight:800}
.rm-joey-card p{font-size:1rem; margin:0 0 1.2rem; color:#333}
.rm-joey-card .rm-btn{margin-bottom:.6rem; text-decoration:none}
.rm-joey-card .rm-btn.danger{font-size:1.15rem}

@media (max-width:420px){
    .rm-wrap{padding:.7rem}
    .rm-card{padding:.9rem}
}