/* Approved B entry drawer and personal-map extension of Clear graphite. */
:root{--visited-hike:#A7C868;--visited-dive:#67AFC8;--visited-beach:#E5C35E;--entry-drawer-width:440px}
nav#rail{overflow:hidden}
.navBrand,.navSettings{flex:none}
.navSections{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.navSettings{margin-top:auto;border-top:1px solid var(--cg-rule);padding-top:12px}
#rail .navSettings button span{font-size:var(--cg-meta);letter-spacing:.04em}
#view-logbook{position:relative}
#view-logbook .pageWrap{max-width:1100px;margin:0 auto;padding:32px 40px 70px}
#view-logbook.drawerOpen{padding-right:var(--entry-drawer-width)}
#view-logbook .colHead{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:22px}
#view-logbook .colHead h1{margin-right:auto}
#logCount,.logEntryMeta,.logExamples,.logNotice{font:var(--cg-control)/1.65 var(--cg-interface);color:var(--cg-muted)}
#logCount{white-space:nowrap}
#logAdd{min-height:44px;font-size:var(--cg-control);text-transform:none}
.logExamples{max-width:65ch;margin:0 0 22px;padding:0 0 20px;border-bottom:1px solid var(--cg-rule)}
.logNotice:empty{display:none}
.logNotice{margin:12px 0 24px;color:var(--cg-ink)}
.logNotice button,.logEntryActions button,#removedList button{min-height:44px;padding:8px 4px;font:var(--cg-meta)/1.5 var(--cg-interface);text-decoration:underline;text-underline-offset:4px;color:var(--cg-focus);background:transparent;border:0}
.logEntries{list-style:none;padding:0;margin:0}
.logEntry{display:grid;grid-template-columns:54px minmax(0,1fr);gap:22px;padding:22px 0;border-bottom:1px solid var(--cg-rule)}
.logEntry time{display:flex;flex-direction:column;text-align:center;align-self:start;font:var(--cg-meta)/1.5 var(--cg-interface);color:var(--cg-muted);border-right:1px solid var(--cg-rule);padding-right:16px}
.logEntry time b{font:28px/1.2 var(--cg-prose);color:var(--cg-bright)}
.logEntry h2{font:24px/1.25 var(--cg-display);color:var(--cg-bright);margin:0 0 6px;text-wrap:balance}
.logEntryMeta{margin:0 0 8px;font-size:var(--cg-meta)}
.logEntryNote{font:var(--cg-body)/1.65 var(--cg-prose);white-space:pre-wrap;overflow-wrap:anywhere;max-width:65ch;margin:8px 0}
.logEntryActions{display:flex;align-items:center;flex-wrap:wrap;gap:18px}
.logEntryActions a{font:var(--cg-meta)/1.5 var(--cg-interface);color:var(--cg-focus);padding:10px 0;min-height:44px}
.logEntryActions button{color:var(--cg-muted)}
#removedEntries{margin-top:28px;font:var(--cg-control)/1.6 var(--cg-interface);color:var(--cg-muted)}
#removedEntries>summary{padding:12px 0;cursor:pointer;min-height:44px}
#removedList{list-style:none;padding:0}
#removedList li{display:flex;align-items:center;gap:18px;justify-content:space-between;padding:10px 0;border-top:1px solid var(--cg-rule)}
#removedList span{overflow-wrap:anywhere}
.logEmpty{padding:24px 0}.logEmpty h2{font:28px/1.3 var(--cg-display)}.logEmpty p{font:var(--cg-body)/1.65 var(--cg-prose)}
/* The desktop drawer is part of the page; it never puts a scrim over the list. */
#view-logbook #modalScrim{display:none;position:fixed;top:0;right:0;bottom:0;left:auto;width:var(--entry-drawer-width);z-index:750;padding:0;background:var(--cg-bg);backdrop-filter:none;align-items:stretch;justify-content:stretch;border-left:1px dashed var(--cg-rule)}
#view-logbook #modalScrim.on{display:flex}
#view-logbook #logModal{display:flex;flex-direction:column;width:100%;height:100%;max-height:none;max-width:none;min-width:0;margin:0;padding:0;overflow:hidden;border:0;border-radius:0;background:var(--cg-bg);box-shadow:none;color:var(--cg-ink)}
#logModal .hd{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 28px;border-bottom:1px solid var(--cg-rule);flex:none;background:none}
#logModal .hd h2{font:28px/1.25 var(--cg-display);margin:0;color:var(--cg-bright)}
#logModal #modalClose{width:auto;min-width:60px;min-height:44px;padding:8px;font:var(--cg-control)/1.4 var(--cg-interface);text-transform:none;border:0;background:none;color:var(--cg-ink)}
#logModal .bd{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:26px 28px}
#logModal .field{margin:0 0 24px;min-width:0}
#logModal label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 9px;font:var(--cg-control)/1.5 var(--cg-interface);text-transform:none;letter-spacing:0;color:var(--cg-ink)}
#logModal label span,#entryExtras summary span{font-size:var(--cg-meta);color:var(--cg-muted)}
#logModal :is(input,select,textarea){width:100%;min-width:0;min-height:48px;padding:12px;font:16px/1.5 var(--cg-interface);color:var(--cg-bright);background:var(--cg-surface);border:1px solid var(--cg-rule);border-radius:3px;color-scheme:dark}
#logModal textarea{min-height:170px;resize:vertical;font-family:var(--cg-prose);font-size:18px}
#logModal ::placeholder{color:var(--cg-muted);opacity:1}
#entryExtras{border-top:1px solid var(--cg-rule);border-bottom:1px solid var(--cg-rule)}
#entryExtras summary{cursor:pointer;padding:16px 0;min-height:48px;font:var(--cg-control)/1.5 var(--cg-interface);color:var(--cg-ink)}
#entryExtras summary span{margin-left:8px}
#entryExtras .fieldRow2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:12px}
#logModal .ft{display:block;flex:none;padding:18px 28px 26px;border-top:1px solid var(--cg-rule);background:var(--cg-bg)}
#draftStatus{font:var(--cg-meta)/1.6 var(--cg-interface);color:var(--cg-muted);margin:0 0 14px}
#logModal .ft>div{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#logModal .btn{min-height:48px;font:var(--cg-control)/1.4 var(--cg-interface);text-transform:none;letter-spacing:0}
#logModal .modalError{font:var(--cg-control)/1.6 var(--cg-interface);color:var(--orange-bright);margin:12px 0 0}
#logModal .modalError:empty{display:none}
/* My Map uses the same imagery, controls and ruled ledger as discovery maps. */
.myMapLayout{display:grid;grid-template-columns:minmax(0,1fr) 340px;height:100%;min-height:0;background:var(--cg-bg)}
.myMapStage{position:relative;min-width:0;min-height:0;background:var(--cg-bg)}
#myMapCanvas{height:100%;width:100%;background:var(--cg-bg)}
.myMapTools{position:absolute;z-index:500;right:16px;top:16px;display:flex;gap:8px}
.myMapTools button,.myMapTools select,#myMapListToggle{min-height:44px;padding:10px 12px;border:1px solid var(--cg-rule);border-radius:3px;font:var(--cg-meta)/1.5 var(--cg-interface);color:var(--cg-bright);background:var(--cg-bg);color-scheme:dark}
#myMapCanvas .leaflet-top.leaflet-left{top:16px;left:16px}
#myMapCanvas .leaflet-control{margin:0}
#myMapCanvas .leaflet-control-attribution{font-size:10px;max-width:100%;background:var(--cg-bg);color:var(--cg-muted)}
.myMapLedger{padding:28px 24px 20px;overflow-y:auto;min-width:0;border-left:1px solid var(--cg-rule)}
.myMapLedger header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.myMapLedger h1{font:34px/1.15 var(--cg-display);margin:0 0 22px;color:var(--cg-bright)}
#myMapListToggle{display:none}
.visitLegend{display:flex;flex-wrap:wrap;gap:12px 18px;margin:0 0 20px;font:var(--cg-meta)/1.5 var(--cg-interface)}
.visitLegendItem{display:flex;align-items:center;gap:8px}
.visitLegendMark{display:inline-block;width:12px;height:12px;flex:none}
.visitLegendMark--hike{width:16px;height:4px;background:var(--visited-hike)}
.visitLegendMark--dive{background:var(--visited-dive);transform:rotate(45deg);width:9px;height:9px}
.visitLegendMark--beach{background:var(--visited-beach);border-radius:50%}
.myMapNote,.myMapFootnote,#myMapStatus,#myMapEmpty p{font:var(--cg-meta)/1.6 var(--cg-interface);color:var(--cg-muted);margin:0 0 22px}
.myMapNote a,#myMapEmpty a{color:var(--cg-focus);text-underline-offset:4px}
.myMapFootnote{margin:20px 0 0}
#myMapList{list-style:none;margin:0;padding:0}
#myMapList button{display:flex;gap:12px;align-items:center;text-align:left;width:100%;padding:16px 0;min-height:76px;border:0;border-top:1px solid var(--cg-rule);background:transparent;color:var(--cg-ink)}
#myMapList button>span:nth-child(2){flex:1;min-width:0}
#myMapList strong{display:block;font:20px/1.3 var(--cg-display);color:var(--cg-bright)}
#myMapList small{display:block;margin-top:6px;font:var(--cg-meta)/1.4 var(--cg-interface);color:var(--cg-muted)}
#myMapList button:hover,#myMapList button[aria-pressed='true']{background:var(--cg-surface)}
.visitedListIcon{flex:none}.visitedListIcon .atlas-icon{width:24px;height:24px}
.visitedListIcon--hike{color:var(--visited-hike)}.visitedListIcon--dive{color:var(--visited-dive)}.visitedListIcon--beach{color:var(--visited-beach)}
.visitedMapIcon{background:none;border:0}
.visitMarker{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--cg-bg);border:2px solid currentColor;box-shadow:0 3px 9px #0009}
.visitMarker .atlas-icon{width:22px;height:22px;--atlas-icon-cell:transparent;--atlas-icon-frame:transparent;--atlas-icon-mark:currentColor}
.visitMarker--hike{color:var(--visited-hike);border-radius:5px}
.visitMarker--dive{color:var(--visited-dive);transform:rotate(45deg);border-radius:4px}
.visitMarker--dive .atlas-icon{transform:rotate(-45deg)}
.visitMarker--beach{color:var(--visited-beach);border-radius:50%}
#myMapCanvas .leaflet-popup-content-wrapper,#myMapCanvas .leaflet-popup-tip{background:var(--cg-bg);color:var(--cg-ink)}
.visitedPopup strong{font:22px/1.3 var(--cg-display)}.visitedPopup p,.visitedPopup a{font:var(--cg-meta)/1.6 var(--cg-interface)}.visitedPopup a{display:block;min-height:44px;color:var(--cg-focus);padding-block:12px}
@media(max-width:1100px) and (min-width:761px){:root{--entry-drawer-width:390px}.myMapLayout{grid-template-columns:minmax(0,1fr) 300px}#view-logbook .pageWrap{padding:26px 24px 60px}.logEntry{gap:14px;grid-template-columns:44px minmax(0,1fr)}.logEntry time{padding-right:10px}.logEntry h2{font-size:22px}}
@media(max-width:760px){
 #view-logbook .pageWrap{padding:22px 16px 40px}#view-logbook.drawerOpen{padding-right:0}
 #view-logbook .colHead{gap:12px}#view-logbook .colHead h1{flex:1}#logCount{font-size:12px}#logAdd{width:100%;justify-content:center}
 .logEntry{grid-template-columns:44px minmax(0,1fr);gap:16px;padding:20px 0}.logEntry time{padding-right:10px}.logEntry h2{font-size:23px}
 #view-logbook #modalScrim{inset:0;width:100%;height:100dvh;border:0;z-index:1000;padding-top:env(safe-area-inset-top)}
 #logModal .hd{padding:16px 20px}#logModal .bd{padding:22px 20px}#logModal .ft{padding:14px 20px calc(18px + env(safe-area-inset-bottom))}
 #logModal textarea{min-height:150px}#logModal .field{margin-bottom:20px}
 .myMapLayout{display:flex;flex-direction:column}.myMapStage{flex:1;min-height:220px}.myMapLedger{flex:none;max-height:185px;overflow:hidden;border-left:0;border-top:1px solid var(--cg-rule);padding:16px}
 .myMapLedger h1{font-size:28px;margin:0}.myMapLedger header{margin-bottom:12px}#myMapListToggle{display:block}
 .visitLegend{margin-bottom:10px;gap:8px 16px}.myMapNote{margin:0;font-size:12px}#myMapList,.myMapFootnote{display:none}
 #view-my-map.listExpanded .myMapLedger{max-height:58%;overflow-y:auto}#view-my-map.listExpanded #myMapList,#view-my-map.listExpanded .myMapFootnote{display:block}
 .myMapTools{top:12px;right:10px}.myMapTools button,.myMapTools select{font-size:12px;padding:9px}
 #myMapCanvas .leaflet-top.leaflet-left{top:12px;left:10px}#myMapEmpty{margin-top:12px}#myMapEmpty h2{font:22px/1.3 var(--cg-display)}
}
@media(prefers-reduced-motion:reduce){#modalScrim,#logModal,.visitMarker{transition:none;animation:none}}

/* Isolate the personal map from discovery-map overlay offsets. */
#myMapCanvas .leaflet-bottom{bottom:0!important}
#myMapList button,#myMapList strong,#myMapList small,.myMapTools button,.myMapTools select,#myMapListToggle,#logModal select,.logEntryActions button{letter-spacing:0;text-transform:none}
@media(max-width:760px){
 #view-logbook{scroll-padding-bottom:90px}
 #view-logbook :is(button,a,summary){scroll-margin-bottom:90px}
 #view-logbook .pageWrap{padding-bottom:110px}
 #myMapCanvas .leaflet-popup-content{max-width:calc(100vw - 84px)}
}