/* ── RosettaMaps Design Tokens v2 — Bolder, more confident ─────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Color — same family, used with more confidence */
    --rm-forest:      #142019;
    --rm-forest-soft: #1f3327;
    --rm-parchment:   #f8f4ea;
    --rm-parchment-deep: #f0ead9;
    --rm-moss:        #3d6b4f;
    --rm-moss-dark:   #25462f;
    --rm-moss-bright: #4f8a64;
    --rm-clay:        #c9763a;
    --rm-clay-dark:   #9c5621;
    --rm-fog:         #6b7a72;
    --rm-fog-light:   #e2ddd0;
    --rm-dusk:        #2c5f7c;
    --rm-white:       #ffffff;
    --rm-danger:      #a13f2f;
    --rm-warn-bg:     #fdf3e3;
    --rm-warn-border: #e3b876;

    /* Type */
    --rm-font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* was Fraunces - retired sitewide per explicit direction, see project notes */
    --rm-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --rm-font-mono:    'JetBrains Mono', monospace;

    /* Spacing scale */
    --rm-space-1: 4px;
    --rm-space-2: 8px;
    --rm-space-3: 12px;
    --rm-space-4: 16px;
    --rm-space-5: 24px;
    --rm-space-6: 32px;
    --rm-space-7: 48px;
    --rm-space-8: 64px;
    --rm-space-9: 96px;

    --rm-radius-sm: 10px;
    --rm-radius-md: 16px;
    --rm-radius-lg: 24px;
    --rm-radius-full: 999px;

    /* Layered elevation — depth, not flat borders. Old names kept so every
       existing var(--rm-shadow-sm) reference across the codebase still works. */
    --rm-shadow-sm: 0 1px 2px rgba(20, 32, 25, 0.06), 0 1px 1px rgba(20, 32, 25, 0.04);
    --rm-shadow-md: 0 2px 8px rgba(20, 32, 25, 0.08), 0 4px 4px rgba(20, 32, 25, 0.04);
    --rm-shadow-lg: 0 8px 24px rgba(20, 32, 25, 0.12), 0 2px 8px rgba(20, 32, 25, 0.06);
    --rm-shadow-xl: 0 20px 50px rgba(20, 32, 25, 0.18), 0 6px 16px rgba(20, 32, 25, 0.08);

    --rm-transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--rm-font-body);
    color: var(--rm-forest);
    background: var(--rm-parchment);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--rm-font-display);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0 0 var(--rm-space-3);
    color: var(--rm-forest);
}

h1 { font-size: 3rem; font-weight: 700; font-optical-sizing: auto; }
h2 { font-size: 2rem; font-weight: 650; }
h3 { font-size: 1.3rem; }

p { margin: 0 0 var(--rm-space-3); }

a { color: var(--rm-dusk); text-decoration: none; transition: color var(--rm-transition); }
a:hover { text-decoration: underline; }

.rm-mono { font-family: var(--rm-font-mono); font-size: 0.85em; letter-spacing: -0.01em; }

button, input, select, textarea { font-family: inherit; }

/* Focus visibility — accessibility floor */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--rm-dusk);
    outline-offset: 2px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Topographic contour texture (used on auth/empty states) ───────────── */
.rm-topo-bg {
    background-color: var(--rm-parchment);
    background-image:
        repeating-radial-gradient(circle at 20% 30%, transparent 0, transparent 38px, rgba(20,32,25,0.045) 39px, rgba(20,32,25,0.045) 40px, transparent 41px, transparent 78px),
        repeating-radial-gradient(circle at 80% 70%, transparent 0, transparent 52px, rgba(20,32,25,0.04) 53px, rgba(20,32,25,0.04) 54px, transparent 55px, transparent 106px);
}

/* ── Buttons — bolder, with real lift on hover ──────────────────────────── */
.rm-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--rm-space-2);
    font-family: var(--rm-font-body);
    font-weight: 600;
    font-size: 0.92rem;
    padding: 11px 20px;
    border-radius: var(--rm-radius-sm);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform var(--rm-transition), box-shadow var(--rm-transition), background var(--rm-transition);
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
}
.rm-btn:active { transform: scale(0.97); }

.rm-btn--primary { background: var(--rm-moss); color: var(--rm-white); box-shadow: var(--rm-shadow-md); }
.rm-btn--primary:hover { background: var(--rm-moss-dark); box-shadow: var(--rm-shadow-lg); transform: translateY(-1px); }

.rm-btn--clay { background: var(--rm-clay); color: var(--rm-white); box-shadow: var(--rm-shadow-md); }
.rm-btn--clay:hover { background: var(--rm-clay-dark); box-shadow: var(--rm-shadow-lg); transform: translateY(-1px); }

.rm-btn--ghost { background: var(--rm-white); color: var(--rm-forest); border-color: var(--rm-fog-light); }
.rm-btn--ghost:hover { background: var(--rm-parchment-deep); border-color: var(--rm-fog); }

.rm-btn--danger { background: transparent; color: var(--rm-danger); border-color: var(--rm-danger); }
.rm-btn--danger:hover { background: var(--rm-danger); color: var(--rm-white); }

.rm-btn--sm { padding: 7px 14px; font-size: 0.82rem; }
.rm-btn--block { width: 100%; justify-content: center; }
.rm-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ── Form fields ─────────────────────────────────────────────────────────── */
.rm-field { margin-bottom: var(--rm-space-4); }
.rm-field label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--rm-fog);
    margin-bottom: var(--rm-space-2);
}
.rm-field input, .rm-field select, .rm-field textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid var(--rm-fog-light);
    border-radius: var(--rm-radius-sm);
    background: var(--rm-white);
    font-size: 0.95rem;
    color: var(--rm-forest);
    transition: border-color var(--rm-transition), box-shadow var(--rm-transition);
}
.rm-field input:focus, .rm-field select:focus, .rm-field textarea:focus {
    border-color: var(--rm-moss);
    outline: none;
    box-shadow: 0 0 0 4px rgba(61, 107, 79, 0.14);
}
.rm-field textarea { resize: vertical; min-height: 90px; }
.rm-field-hint { font-size: 0.78rem; color: var(--rm-fog); margin-top: var(--rm-space-1); }
.rm-field-error { font-size: 0.8rem; color: var(--rm-danger); margin-top: var(--rm-space-1); }
.rm-password-wrapper { position: relative; }
.rm-password-wrapper input { padding-right: 44px; }
.rm-password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rm-fog);
    cursor: pointer;
    border-radius: var(--rm-radius-sm);
}
.rm-password-toggle:hover { color: var(--rm-forest); background: rgba(61, 107, 79, 0.08); }

/* ── Cards — real elevation, not flat boxes ─────────────────────────────── */
.rm-card {
    background: var(--rm-white);
    border-radius: var(--rm-radius-md);
    box-shadow: var(--rm-shadow-md);
    padding: var(--rm-space-5);
}

/* ── Alert / banner ──────────────────────────────────────────────────────── */
.rm-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--rm-space-3);
    padding: var(--rm-space-4);
    border-radius: var(--rm-radius-sm);
    font-size: 0.9rem;
}
.rm-alert--warn { background: var(--rm-warn-bg); border: 1px solid var(--rm-warn-border); color: #6b4a1a; }
.rm-alert--danger { background: #fbeae7; border: 1px solid #e0a99a; color: var(--rm-danger); }
.rm-alert--info { background: #eaf1f5; border: 1px solid #b7cdd9; color: var(--rm-dusk); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.rm-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 11px;
    border-radius: var(--rm-radius-full);
}
.rm-badge--moss { background: rgba(61,107,79,0.13); color: var(--rm-moss-dark); }
.rm-badge--clay { background: rgba(201,118,58,0.16); color: var(--rm-clay-dark); }
.rm-badge--fog  { background: var(--rm-fog-light); color: var(--rm-fog); }
.rm-badge--danger { background: rgba(161,63,47,0.13); color: var(--rm-danger); }

.rm-public-lands-label {
    background: rgba(255,255,255,0.92);
    border: none;
    box-shadow: 0 1px 3px rgba(20,32,25,.25);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 6px;
    color: #2c2c2a;
}
.rm-public-lands-label::before {
    display: none;
}

/* ── Skeleton loading state ──────────────────────────────────────────────── */
@keyframes rm-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.rm-skeleton {
    background: linear-gradient(90deg, var(--rm-fog-light) 25%, #ededdf 37%, var(--rm-fog-light) 63%);
    background-size: 400% 100%;
    animation: rm-shimmer 1.4s ease infinite;
    border-radius: var(--rm-radius-sm);
}


/* Font direction: Inter throughout, no Fraunces in the Admin portal (matches
   static pages / spot detail / add-place / upgrade) */
.rm-admin-page h1,
.rm-admin-page h2,
.rm-admin-page h3,
.rm-admin-page h4 {
    font-family: var(--rm-font-body);
}

/* Duplicate review */
.rm-dupes-page { max-width: 1240px; }
.rm-dupes-heading { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:24px; }
.rm-dupes-heading h1 { margin-bottom:6px; }
.rm-dupe-stats { display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; margin:24px 0; }
.rm-dupe-stats button { border:1px solid rgba(38,68,52,.14); border-radius:14px; background:var(--rm-white); padding:14px 16px; text-align:left; color:var(--rm-forest); cursor:pointer; box-shadow:var(--rm-shadow-sm); }
.rm-dupe-stats span { display:block; color:var(--rm-fog); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.rm-dupe-stats strong { display:block; font-size:1.65rem; margin-top:3px; }
.rm-dupe-toolbar { display:flex; gap:16px; align-items:flex-end; padding:16px; margin-bottom:18px; background:rgba(255,255,255,.65); border:1px solid rgba(38,68,52,.1); border-radius:14px; }
.rm-dupe-toolbar label, .rm-dupe-notes { display:flex; flex-direction:column; gap:6px; color:var(--rm-fog); font-size:.76rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.rm-dupe-toolbar select, .rm-dupe-toolbar input, .rm-dupe-notes textarea { min-height:42px; border:1px solid rgba(38,68,52,.22); border-radius:9px; padding:8px 11px; background:white; color:var(--rm-forest); font:inherit; text-transform:none; letter-spacing:normal; }
.rm-dupe-search { flex:1; }
.rm-dupe-candidate { background:var(--rm-white); border-radius:18px; box-shadow:var(--rm-shadow-md); margin-bottom:22px; overflow:hidden; border:1px solid rgba(38,68,52,.08); }
.rm-dupe-candidate-head { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 20px; background:rgba(235,238,229,.7); border-bottom:1px solid rgba(38,68,52,.1); }
.rm-dupe-candidate-head > div { display:flex; align-items:center; gap:12px; }
.rm-dupe-status { text-transform:capitalize; font-size:.8rem; color:var(--rm-fog); font-weight:700; }
.rm-dupe-confidence--high { background:rgba(61,107,79,.15); color:var(--rm-moss-dark); }
.rm-dupe-confidence--review { background:rgba(201,118,58,.17); color:var(--rm-clay-dark); }
.rm-dupe-confidence--low { background:rgba(110,121,114,.14); color:var(--rm-fog); }
.rm-dupe-map-wrap { position:relative; border-bottom:1px solid rgba(38,68,52,.12); }
.rm-dupe-map { width:100%; height:430px; background:#d9ded7; }
.rm-dupe-map-key { display:flex; gap:22px; align-items:center; padding:10px 20px; background:#f6f4eb; border-top:1px solid rgba(38,68,52,.1); font-size:.82rem; font-weight:700; }
.rm-dupe-map-key span { display:flex; align-items:center; gap:8px; min-width:0; }
.rm-dupe-map-dot { display:grid; place-items:center; width:25px; height:25px; flex:0 0 auto; border-radius:50%; color:#fff; font-style:normal; font-size:.78rem; box-shadow:0 1px 5px rgba(0,0,0,.25); }
.rm-dupe-map-dot--a { background:#c17a3f; }
.rm-dupe-map-dot--b { background:#2c5f7c; }
.rm-dupe-map-marker { background:transparent; border:0; }
.rm-dupe-map-marker span { position:relative; display:grid; place-items:center; width:38px; height:38px; border:3px solid #fff; border-radius:50% 50% 50% 0; transform:rotate(-45deg); color:#fff; font-weight:900; font-size:1rem; box-shadow:0 3px 9px rgba(0,0,0,.38); }
.rm-dupe-map-marker span { text-shadow:0 1px 2px rgba(0,0,0,.35); font-size:0; }
.rm-dupe-map-marker--a span { background:#c17a3f; }
.rm-dupe-map-marker--b span { background:#2c5f7c; }
.rm-dupe-map-marker--a span::before, .rm-dupe-map-marker--b span::before { display:block; transform:rotate(45deg); font-size:1rem; }
.rm-dupe-map-marker--a span::before { content:'A'; }
.rm-dupe-map-marker--b span::before { content:'B'; }
.rm-dupes-page > .rm-users-pagination { margin:0 0 14px; padding:10px 14px; background:rgba(255,255,255,.72); border:1px solid rgba(38,68,52,.1); border-radius:12px; }
.rm-dupe-pair { display:grid; grid-template-columns:1fr 1fr; }
.rm-dupe-spot { padding:22px; min-width:0; }
.rm-dupe-spot + .rm-dupe-spot { border-left:1px solid rgba(38,68,52,.12); }
.rm-dupe-spot-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rm-dupe-letter { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--rm-forest); color:white; font-weight:800; }
.rm-dupe-spot h3 { margin:14px 0 4px; font-size:1.25rem; }
.rm-dupe-spot h3 a { color:var(--rm-forest); text-decoration-thickness:1px; text-underline-offset:3px; }
.rm-dupe-coords { margin:0 0 14px; color:var(--rm-dusk); font-family:monospace; }
.rm-dupe-description { color:var(--rm-fog); line-height:1.5; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; min-height:7.5em; }
.rm-dupe-meta { margin:16px 0 0; }
.rm-dupe-meta div { display:grid; grid-template-columns:120px 1fr; gap:12px; padding:7px 0; border-top:1px solid rgba(38,68,52,.08); }
.rm-dupe-meta dt { color:var(--rm-fog); font-size:.78rem; font-weight:700; }
.rm-dupe-meta dd { margin:0; font-size:.85rem; overflow-wrap:anywhere; }
.rm-dupe-sources { display:flex; flex-direction:column; gap:3px; }
.rm-dupe-source-note { color:var(--rm-fog); font-size:.76rem; }
.rm-dupe-evidence { display:flex; gap:32px; padding:16px 22px; background:#faf9f3; border-top:1px solid rgba(38,68,52,.1); font-size:.85rem; }
.rm-dupe-evidence ul { margin:6px 0 0; padding-left:18px; color:var(--rm-fog); }
.rm-dupe-risk { display:inline-block; margin:6px 6px 0 0; padding:4px 8px; border-radius:6px; background:#fbeae7; color:var(--rm-danger); font-size:.75rem; font-weight:700; }
.rm-dupe-review-note { padding:0 22px; color:var(--rm-fog); }
.rm-dupe-actions { display:flex; flex-wrap:wrap; gap:8px; padding:16px 22px; border-top:1px solid rgba(38,68,52,.1); }
.rm-dupe-dialog { width:min(1080px, calc(100vw - 32px)); max-height:92vh; padding:0; border:0; border-radius:18px; color:var(--rm-forest); box-shadow:0 28px 80px rgba(12,25,18,.35); }
.rm-dupe-dialog::backdrop { background:rgba(9,20,14,.68); backdrop-filter:blur(3px); }
.rm-dupe-dialog-shell { padding:24px; }
.rm-dupe-dialog-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.rm-dupe-dialog-head h2 { margin:8px 0 16px; }
.rm-dupe-dialog-close { border:0; background:transparent; font-size:2rem; cursor:pointer; color:var(--rm-fog); }
.rm-dupe-canonical { display:flex; gap:24px; padding:14px 16px; border:1px solid rgba(38,68,52,.16); border-radius:12px; margin-bottom:16px; }
.rm-dupe-photo-compare { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; font-size:.82rem; }
.rm-dupe-photo-strip { display:flex; gap:6px; min-height:66px; margin-top:7px; padding:7px; overflow-x:auto; border-radius:10px; background:#f6f4eb; color:var(--rm-fog); align-items:center; }
.rm-dupe-photo-strip img { width:76px; height:58px; border-radius:7px; object-fit:cover; flex:0 0 auto; }
.rm-dupe-canonical legend { font-weight:800; padding:0 6px; }
.rm-dupe-field-table-wrap { max-height:48vh; overflow:auto; border:1px solid rgba(38,68,52,.14); border-radius:12px; }
.rm-dupe-field-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.rm-dupe-field-table th, .rm-dupe-field-table td { text-align:left; vertical-align:top; padding:9px 10px; border-bottom:1px solid rgba(38,68,52,.09); overflow-wrap:anywhere; }
.rm-dupe-field-table thead { position:sticky; top:0; background:var(--rm-forest); color:white; z-index:1; }
.rm-dupe-field-table tbody th { width:130px; background:#f6f4eb; }
.rm-dupe-field-table td { width:calc((100% - 130px)/2); }
.rm-dupe-field-table label { display:flex; gap:7px; cursor:pointer; }
.rm-dupe-field-table input { flex:0 0 auto; }
.rm-dupe-notes { margin:16px 0; }
.rm-dupe-dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

@media (max-width: 800px) {
    .rm-dupes-heading, .rm-dupe-toolbar { flex-direction:column; align-items:stretch; }
    .rm-dupe-stats { grid-template-columns:repeat(2, 1fr); }
    .rm-dupe-pair { grid-template-columns:1fr; }
    .rm-dupe-map { height:330px; }
    .rm-dupe-map-key { align-items:flex-start; flex-direction:column; gap:7px; }
    .rm-dupe-spot + .rm-dupe-spot { border-left:0; border-top:1px solid rgba(38,68,52,.12); }
    .rm-dupe-evidence { flex-direction:column; gap:12px; }
    .rm-dupe-canonical { flex-direction:column; gap:8px; }
    .rm-dupe-photo-compare { grid-template-columns:1fr; }
}