/* =====================================================================================
   realmap.css: the street map, its markers, the stop sheet and the add-a-stop sheet. Owner: REALMAP.
   Colours, type, motion and radii come from the tokens in site.css; nothing here defines a colour of its own.
   The map itself is recoloured from the same tokens in realmap.js (light and dark sets).
   ===================================================================================== */

.rm{position:absolute;inset:0;overflow:hidden;background:var(--zone);color:var(--ink);font-family:var(--text);line-height:1.45;container:rm / inline-size;-webkit-tap-highlight-color:transparent}
.rm .vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.rm .rm-map{position:absolute;inset:0;width:auto;height:auto}
.rm-map .maplibregl-canvas{outline:none}
.rm-map .maplibregl-canvas:focus-visible{outline:3px solid var(--iris);outline-offset:-3px}
.rm-map .maplibregl-canvas-container{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.rm[data-mode="add"] .maplibregl-canvas-container.maplibregl-interactive{cursor:crosshair}
.rm-loading{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:var(--muted);font-size:var(--s-small)}
.rm-loading span{background:var(--paper);border-radius:999px;padding:8px 16px}

/* ---------- top: the key and the controls ---------- */
.rm-top{position:absolute;top:12px;left:12px;right:12px;z-index:3;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;pointer-events:none}
.rm-top > *{pointer-events:auto}
.rm-key{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;background:var(--paper);border-radius:999px;padding:8px 16px;font-size:var(--s-small);line-height:1.2;min-width:0}
.rm-key span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.rm-k{position:relative;display:inline-block;width:24px;height:10px;border-radius:5px;background:var(--field);border:2.5px solid var(--ink);box-sizing:border-box}
.rm-k-pm{background:var(--iris)}
.rm-k-metro{background:var(--ink)}
.rm-k-metro::after{content:"";position:absolute;left:2px;right:2px;top:50%;margin-top:-1.5px;border-top:3px dotted var(--paper)}
@container rm (max-width: 430px){
  .rm-key{font-size:14px;gap:4px 10px;padding:8px 12px}
  .rm-key span{gap:5px}
  .rm-k{width:18px}
}
.rm-ctrls{display:flex;flex-direction:column;gap:8px;flex:none}
.rm-ctl{width:48px;height:48px;padding:0;border-radius:50%;border:var(--ink-line) solid var(--ink);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease}
.rm-ctl svg{width:22px;height:22px}
.rm-ctl:active{transform:scale(.94)}
.rm-ctl[disabled]{cursor:progress;opacity:.7}
.rm-locate{background:var(--field);color:var(--field-ink);border-color:var(--field)}
@media (hover:hover) and (pointer:fine){.rm-ctl:hover{background:var(--surface)}.rm-locate:hover{background:var(--field)}}
@media (hover:none){.rm-zoom{display:none}}

.rm.has-sheet .rm-key,.rm.has-note .rm-key{visibility:hidden}
.rm-note{position:absolute;z-index:3;top:12px;left:12px;margin:0;max-width:min(36ch,calc(100% - 84px));background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:12px;font-size:var(--s-small);line-height:1.35}

/* ---------- bottom: add a stop, credits ---------- */
.rm-addbtn{position:absolute;z-index:3;left:12px;bottom:12px;min-height:48px;padding:10px 20px 10px 14px;font-size:var(--s-small);transition:transform var(--t-hover) var(--ease),opacity var(--t-ui) ease,visibility 0s}
.rm-addbtn .rm-iris{width:24px;height:24px;color:var(--iris-ink)}
.rm.has-sheet .rm-addbtn{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--t-ui) ease,visibility 0s var(--t-ui)}
.rm-attr{position:absolute;z-index:2;right:8px;bottom:12px;display:flex;align-items:center;font-size:12px;line-height:1.3;color:var(--muted)}
.rm-attr a{color:inherit;text-decoration:none}
.rm-attr a:hover{text-decoration:underline}
.rm-attr-t{position:relative;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:var(--paper);color:var(--ink);font-size:15px;line-height:1;cursor:pointer}
.rm-attr-t::before{content:"";position:absolute;inset:-8px}
.rm-attr-x{display:none;position:absolute;right:0;bottom:38px;white-space:nowrap;background:var(--paper);border-radius:10px;padding:6px 10px}
.rm-attr.is-open .rm-attr-x{display:block}
@container rm (min-width: 640px){
  .rm-attr-t{display:none}
  .rm-attr-x{display:block;position:static;border-radius:999px;padding:3px 10px}
}

/* ---------- markers (as on the drawn map: ink ring, iris for food, square for home) ---------- */
.rm-mk{width:44px;height:44px;padding:0;margin:0;border:0;background:none;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.rm-dot{position:relative;z-index:1;display:grid;place-items:center;width:22px;height:22px;box-sizing:border-box;border-radius:50%;background:var(--paper);border:3px solid var(--ink);transition:transform var(--t-hover) var(--ease-out),background-color var(--t-hover) ease}
.rm-food .rm-dot{background:var(--iris);border-color:var(--iris-ink)}
.rm-home .rm-dot{border-radius:4px;background:var(--ink)}
.rm-extra .rm-dot{width:30px;height:30px;background:var(--field);border-color:var(--ink);color:var(--iris)}
.rm-extra .rm-iris{width:20px;height:20px;display:block}
.rm.is-far .rm-dot{width:16px;height:16px;border-width:2.5px}
.rm.is-far .rm-extra .rm-dot{width:24px;height:24px}
.rm.is-far .rm-extra .rm-iris{width:15px;height:15px}
.rm-mk.is-done .rm-dot{background:var(--done);border-color:var(--done)}
.rm-mk::before{content:"";position:absolute;left:3px;top:3px;width:38px;height:38px;border-radius:50%;background:var(--iris);opacity:0;transform:scale(.6);transition:opacity var(--t-ui) ease,transform var(--t-ui) var(--ease-out)}
.rm-mk.is-sel::before{opacity:.9;transform:none}
.rm-mk.is-sel{z-index:2}
.rm-mk:focus{outline:none}
.rm-mk:focus-visible .rm-dot{outline:3px solid var(--iris);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.rm-mk:hover .rm-dot{transform:scale(1.15)}}
.rm-badge{position:absolute;z-index:2;top:-2px;right:-4px;min-width:22px;height:22px;padding:0 6px;box-sizing:border-box;border-radius:11px;background:var(--ink);color:var(--bg);font:600 14px/22px var(--text);text-align:center;font-variant-numeric:tabular-nums}

/* the new stop's pin, and the blue dot */
.rm-draft{width:48px;height:60px;cursor:grab;touch-action:none}
.rm-draft:active{cursor:grabbing}
.rm-draft svg{display:block;width:100%;height:100%;overflow:visible;transform:translateY(-18px);opacity:0;transition:transform .5s var(--ease),opacity .2s ease}
.rm-draft.is-down svg{transform:none;opacity:1}
.rm-pin-body{fill:var(--iris);stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.rm-pin-iris{fill:var(--iris-ink)}
.rm-me{width:20px;height:20px;border-radius:50%;background:var(--field);border:4px solid var(--field-ink);outline:3px solid var(--field);box-sizing:content-box}

/* ---------- the sheet: a bottom sheet in a narrow map, a card on the left in a wide one ---------- */
.rm-sheet{position:absolute;z-index:5;left:0;right:0;bottom:0;max-height:min(66%,600px);display:flex;flex-direction:column;background:var(--paper);color:var(--ink);border-radius:18px 18px 0 0;overflow:hidden;box-shadow:var(--shadow-float);transform:translateY(104%);transition:transform .42s var(--ease)} /* taste-skill-ignore: the sheet floats over the map */
.rm-sheet[data-kind="add"]{max-height:min(70%,680px)}
@media (max-width:760px){.rm-sheet[data-kind="add"]{max-height:min(78%,680px)}}
.rm-sheet.is-in{transform:none}
.rm-sheet.is-drag{transition:none}
.rm-grab{flex:none;height:22px;display:grid;place-items:center;cursor:grab;touch-action:none}
.rm-grab::before{content:"";width:44px;height:5px;border-radius:3px;background:var(--surface)}
.rm-sh{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px 16px 20px;display:flex;flex-direction:column;gap:14px}
/* the add sheet's actions: pinned under the scroller, a tone step down, always in reach */
.rm-sheet-foot{flex:none;display:flex;flex-direction:column;gap:8px;padding:10px 16px 12px;background:var(--bg)}
.rm-sheet-foot .rm-acts{flex-wrap:nowrap}
.rm-sheet-foot .rm-acts .btn[data-save]{flex:1 1 auto}
.rm-form-more{display:flex;flex-direction:column;gap:14px}
.rm-sh-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.rm-x{flex:none;width:44px;height:44px;margin:-2px -4px 0 auto;padding:0;border:0;border-radius:50%;background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform var(--t-press) var(--ease-out)}
.rm-x svg{width:20px;height:20px}
.rm-x:active{transform:scale(.92)}
.rm-h{font-family:var(--display);font-weight:400;font-size:var(--s-lead);line-height:1.04;letter-spacing:-.015em;margin:0;overflow-wrap:anywhere}
.rm-sh-head .rm-h{padding-top:6px}
.rm-h:focus,.rm-h:focus-visible{outline:none}
.rm-sub{margin:-8px 0 0;color:var(--muted);font-size:var(--s-small);font-style:italic}
.rm-time{font-style:normal;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.rm-notep{margin:0;max-width:56ch;overflow-wrap:anywhere}

.rm-plate{display:inline-flex;flex-direction:column;align-self:flex-start;max-width:100%;min-width:0;background:var(--field);color:var(--field-ink);border-radius:var(--r-plate);padding:10px 18px;outline:2px solid var(--field-ink);outline-offset:-6px;line-height:1.2}
.rm-plate b{font-weight:600;font-size:var(--s-body);overflow-wrap:anywhere}
.rm-plate span{font-size:var(--s-small)}
.rm-xmark{flex:none;width:44px;height:44px;border-radius:50%;background:var(--field);border:var(--ink-line) solid var(--ink);color:var(--iris);display:grid;place-items:center}
.rm-xmark .rm-iris{width:28px;height:28px}
.rm-sh-head .rm-xmark + .rm-h{flex:1 1 auto;min-width:0;padding-top:8px}

.rm-seg{display:inline-flex;align-self:flex-start;gap:4px;padding:4px;border-radius:999px;background:var(--bg)}
.rm-seg button{min-height:40px;padding:6px 14px;border:0;border-radius:999px;background:transparent;color:var(--ink);font-weight:600;font-size:var(--s-small);font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color var(--t-hover) ease,color var(--t-hover) ease}
.rm-seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

.rm-photos{display:flex;flex-direction:column;gap:4px}
.rm-thumbs{list-style:none;margin:0;padding:0 0 2px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.rm-thumbs::-webkit-scrollbar{display:none}
.rm-thumbs li{flex:none;scroll-snap-align:start}
.rm-thumb{display:block;width:76px;height:76px;padding:0;border:var(--ink-line) solid var(--ink);border-radius:0;background:var(--surface);color:var(--ink);overflow:hidden;cursor:pointer;transition:transform var(--t-press) var(--ease-out)}
.rm-thumb:active{transform:scale(.96)}
.rm-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.rm-thumb.is-pending img{opacity:.55}
.rm-more{font-family:var(--display);font-size:22px}
.rm-none{margin:0;color:var(--muted);font-size:var(--s-small)}
.rm-link{align-self:flex-start;min-height:44px;padding:8px 0;border:0;background:none;color:var(--ink);font-weight:600;font-size:var(--s-small);text-decoration:underline;text-decoration-thickness:.07em;text-underline-offset:.22em;cursor:pointer}
.rm-saved{margin:0;align-self:flex-start;background:var(--iris);color:var(--iris-ink);padding:8px 14px;border-radius:10px;font-size:var(--s-small);font-weight:600}

.rm-acts{display:flex;flex-wrap:wrap;gap:10px}
.rm .rm-acts .btn,.rm-search .btn,.rm-gps{min-height:46px;padding:8px 18px;font-size:var(--s-small)}
.rm-acts .btn svg,.rm-gps svg{width:20px;height:20px}
.rm-del{margin-top:-4px}
.rm-danger{color:var(--muted)}
.rm-confirm{display:flex;flex-direction:column;gap:12px;background:var(--bg);border-radius:12px;padding:14px 16px}
.rm-confirm p{margin:0}
.rm .rm-btn-danger{background:var(--ink);color:var(--bg)}

/* ---------- add a stop ---------- */
.rm-where{margin:-6px 0 0;font-size:var(--s-small);color:var(--muted)}
.rm-search{display:flex;gap:8px;align-items:stretch}
.rm-search input{flex:1 1 auto;min-width:0}
.rm-gps{align-self:flex-start}
.rm-sh input[type="search"],.rm-sh input[type="text"],.rm-sh input[type="time"],.rm-sh textarea{display:block;width:100%;min-height:48px;margin:0;padding:10px 14px;border:0;border-radius:10px;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:max(16px,var(--s-body));line-height:1.3;-webkit-appearance:none;appearance:none}
.rm-sh textarea{resize:vertical;min-height:48px}
.rm-sh input::placeholder,.rm-sh textarea::placeholder{color:var(--muted);opacity:1}
.rm-sh input:focus,.rm-sh textarea:focus{outline:none}
.rm-sh input:focus-visible,.rm-sh textarea:focus-visible{outline:3px solid var(--iris);outline-offset:1px}
.rm-sh [aria-invalid="true"]{outline:3px solid var(--ink);outline-offset:1px}
.rm-sh input[type="time"]{max-width:9em;font-variant-numeric:tabular-nums;-webkit-appearance:auto;appearance:auto;color-scheme:inherit}
.rm-sh input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
.rm-form{display:flex;flex-direction:column;gap:14px;margin:0}
.rm-f{display:flex;flex-direction:column;gap:6px}
.rm-f label{font-weight:600;font-size:var(--s-small)}
.rm-opt{font-weight:400;color:var(--muted)}
.rm-err{font-size:var(--s-small);font-weight:600}
.rm-err:empty,.rm-status:empty{display:none}
.rm-status{margin:0;font-size:var(--s-small)}
.rm-results:empty{display:none}
.rm-res{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rm-res button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:48px;padding:10px 14px;border:0;border-radius:10px;background:var(--bg);color:var(--ink);text-align:left;font-size:var(--s-body);line-height:1.25;cursor:pointer;transition:background-color var(--t-hover) ease}
.rm-res button span{font-size:var(--s-small);color:var(--muted)}
@media (hover:hover) and (pointer:fine){.rm-res button:hover{background:var(--surface)}}
.rm-msg{margin:0 0 6px;font-size:var(--s-small);color:var(--muted)}

/* ---------- when the map can't draw ---------- */
.rm-fail{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:28px max(20px,6%);max-width:44ch}
.rm-fail p{margin:0}
.rm-fail-h{font-family:var(--display);font-size:var(--s-lead);line-height:1.08}
.rm.is-failed .rm-top,.rm.is-failed .rm-addbtn,.rm.is-failed .rm-attr,.rm.is-failed .rm-loading{display:none}

/* ---------- a wide map: the sheet becomes a card on the left ---------- */
@container rm (min-width: 640px){
  .rm-sheet{left:12px;right:auto;top:12px;bottom:auto;width:min(390px,48%);max-height:calc(100% - 24px);border-radius:16px;transform:translateX(-14px);opacity:0;transition:transform .34s var(--ease),opacity .2s ease}
  .rm-sheet[data-kind="add"]{max-height:calc(100% - 24px)}
  .rm-sheet.is-in{transform:none;opacity:1}
  .rm-grab{display:none}
  .rm-sh{padding:18px 20px 22px}
  .rm-sheet-foot{padding:12px 20px 16px}
}

@media (prefers-reduced-motion: reduce){
  .rm-sheet,.rm-sheet.is-in{transform:none;transition:opacity .2s ease}
  .rm-sheet:not(.is-in){opacity:0}
  .rm-draft svg{transform:none;opacity:1;transition:none}
  .rm-mk::before,.rm-dot,.rm-ctl,.rm-x,.rm-thumb,.rm-addbtn{transition:none}
}
@container rm (min-width: 640px){
  .rm.has-sheet .rm-note{left:auto;right:72px}
}