:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; min-height: 100%; font: 16px/1.45 system-ui, sans-serif; color: #e7f2de; background: #0b100d; }
header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #284335; background: #0b100d; }
.eyebrow { margin: 0; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: #9bb09a; }
h1 { margin: 2px 0 0; font-size: 22px; font-weight: 650; }
button, .signin { font: inherit; font-weight: 650; border-radius: 8px; border: 0; padding: 10px 14px; cursor: pointer; text-decoration: none; display: inline-block; }
button[type="submit"], .signin { background: #c4f284; color: #0b100d; }
#clear, header button { background: transparent; color: #c4f284; border: 1px solid #c4f284; }
.layout { display: grid; grid-template-columns: 340px 1fr; flex: 1; min-height: 0; }
aside { overflow: auto; padding: 18px 20px 32px; border-right: 1px solid #284335; background: #101612; }
html, body, aside { scrollbar-width: thin; scrollbar-color: #c4f284 #0b100d; }
html::-webkit-scrollbar, body::-webkit-scrollbar, aside::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track, aside::-webkit-scrollbar-track { background: #0b100d; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb, aside::-webkit-scrollbar-thumb { background: #c4f284; border: 2px solid #0b100d; border-radius: 8px; }
#map { height: 100%; min-height: 420px; background: #0b100d; }
label { display: block; font-weight: 650; margin-bottom: 6px; }
input { width: 100%; font: inherit; color: #e7f2de; background: #0b100d; padding: 10px 12px; border: 1px solid #284335; border-radius: 8px; margin-bottom: 10px; }
input::placeholder { color: #6d7f72; }
.row, .dates { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.stay { margin: 0 0 12px; padding: 10px; border: 1px solid #284335; border-radius: 8px; }
.stay input { margin-bottom: 8px; }
.date-field { flex: 1; min-width: 0; }
.date-caption { display: block; margin: 0; color: #9bb09a; font-size: 13px; font-weight: 650; }
.stay .date-trigger { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #e7f2de; font: inherit; font-size: 16px; font-weight: 650; text-align: left; cursor: pointer; touch-action: manipulation; }
.date-shown { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border: 1px solid #284335; border-radius: 8px; background: #0b100d; color: #e7f2de; }
.date-shown.is-placeholder { color: #6d7f72; }
.date-trigger:hover .date-shown, .date-trigger:focus-visible .date-shown { border-color: #c4f284; }
.date-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, 0.55); }
.date-panel { position: fixed; z-index: 1001; width: 292px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; padding: 12px; border: 1px solid #284335; border-radius: 12px; background: #171e19; color: #e7f2de; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.date-panel button { font: inherit; font-weight: 650; color: #e7f2de; background: transparent; border: 0; border-radius: 8px; cursor: pointer; touch-action: manipulation; }
.date-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.date-nav button { flex: none; min-height: 44px; min-width: 44px; padding: 8px 10px; }
.date-nav button:disabled { color: #3d4d42; cursor: default; }
.date-title { flex: 1; min-width: 0; text-align: center; font-weight: 650; }
.date-week, .date-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.date-week span { text-align: center; font-size: 11px; color: #9bb09a; padding: 2px 0 6px; }
.date-grid { margin-bottom: 8px; }
.date-grid button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 36px; padding: 0; border-radius: 6px; }
.date-grid button:hover:not(:disabled), .date-grid button:focus-visible:not(:disabled) { background: #1c382c; }
.date-grid button.is-today { box-shadow: inset 0 0 0 1px #c4f284; }
.date-grid button.is-selected { background: #c4f284; color: #0b100d; }
.date-grid button.is-selected:hover:not(:disabled), .date-grid button.is-selected:focus-visible { background: #c4f284; color: #0b100d; }
.date-grid button:disabled { color: #3d4d42; background: transparent; box-shadow: none; cursor: default; }
.date-actions { display: flex; gap: 8px; }
.date-actions button { flex: 1; min-height: 44px; padding: 8px 10px; border: 1px solid #284335; }
.actions { display: flex; gap: 10px; margin: 2px 0 12px; }
.actions button { flex: 1; }
.stay button, #add-stay { background: transparent; color: #c4f284; border: 1px solid #284335; }
.stay button { border: 0; padding: 0; font-size: 13px; color: #9bb09a; }
.when { margin: 0; color: #c4f284; font-size: 13px; }
.pin-note { margin: 2px 0 0; }
#message { min-height: 1.4em; color: #c4f284; }
.note { color: #9bb09a; font-size: 14px; }
.account { display: flex; align-items: center; gap: 10px; min-width: 0; }
.account form { margin: 0; }
.account-photo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #1c382c; display: block; flex: none; }
.account-name { color: #e7f2de; font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
ul.note { margin: 12px 0 0; padding-left: 18px; }
ul.note li { margin: 6px 0; }
.note code { font-family: ui-monospace, monospace; font-size: 13px; color: #c4f284; }
#list h2 { font-size: 16px; margin: 16px 0 4px; }
#list ul { margin: 0; padding-left: 18px; }
#list li { margin: 2px 0; }
.empty { color: #9bb09a; }
.signin-wrap { max-width: 560px; margin: 10vh auto; padding: 0 20px; }
.signin-wrap p { font-size: 18px; }
.pin { z-index: 3; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 3px solid #c4f284; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.65); background: #1c382c; cursor: pointer; }
.pin-photo { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.pin-upcoming { z-index: 1; border-color: rgba(102, 112, 104, 0.5); background: transparent; box-shadow: none; }
.pin-upcoming .pin-photo { opacity: 0.5; filter: none; }
.pin-upcoming .pin-date { background: none; color: rgba(231, 242, 222, 0.5); }
.pin-date { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 2px 4px; text-align: center; font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: 0.01em; color: rgba(231, 242, 222, 0.92); background: linear-gradient(transparent, rgba(11, 16, 13, 0.78)); pointer-events: none; }
.pin-stale { z-index: 2; opacity: 0.62; border-color: #c4a15a; filter: none; }
.pin-yours:not(.pin-upcoming):not(.pin-stale) { box-shadow: 0 0 0 2px #0b100d, 0 0 0 5px #c4f284; }
.pin-stale.pin-yours { box-shadow: 0 0 0 2px #0b100d, 0 0 0 5px #c4a15a; }
.person-copy { flex: 1; min-width: 0; }
.person-copy .when, .person-copy .pin-note { margin: 2px 0 0; }
#list li { display: flex; gap: 8px; align-items: flex-start; border-radius: 6px; padding: 4px 6px; }
#list .section-title { margin: 48px 0 8px; font-size: 16.9px; letter-spacing: 0.06em; text-transform: uppercase; color: #c4f284; }
#list section + section .section-title { margin-top: 48px; }
#list h3 { margin: 12px 0 4px; font-size: 15px; }
.who { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #1c382c; display: block; }
.list-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #1c382c; }
.maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right, .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { z-index: 4; }
.maplibregl-ctrl-group { background: #121814; border: 1px solid #284335; box-shadow: none; }
.maplibregl-ctrl-group button { width: 36px; height: 36px; }
.maplibregl-ctrl-group button + button { border-top-color: #284335; }
.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon,
.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon { background-image: none; position: relative; }
.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon::before,
.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon::before,
.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon::after { content: ""; position: absolute; left: 50%; top: 50%; background: #e7f2de; transform: translate(-50%, -50%); }
.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon::before,
.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon::before { width: 14px; height: 2px; }
.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon::after { width: 2px; height: 14px; }
.maplibregl-ctrl-attrib { background: rgba(11, 16, 13, 0.88); color: #9bb09a; font-size: 6px; line-height: 10px; opacity: 0.7; }
.maplibregl-ctrl-attrib a { color: #c4f284; }
.maplibregl-popup { z-index: 5; }
.maplibregl-popup-content { background: #171e19; color: #e7f2de; border-radius: 8px; padding: 10px 12px; max-width: 240px; }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: #171e19; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: #171e19; }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #171e19; }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #171e19; }
:focus-visible { outline: 3px solid #c4f284; outline-offset: 2px; }
@media (max-width: 800px) {
  html, body { height: auto; }
  body { display: block; }
  header { flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; }
  header > div:first-child { flex: 1 1 140px; min-width: 0; }
  h1 { font-size: 20px; }
  .account { flex: 0 0 auto; margin-left: auto; }
  header button { white-space: nowrap; padding: 8px 12px; }
  .layout { display: flex; flex-direction: column; height: auto; min-height: 0; }
  #map { order: 1; display: block; width: 100%; height: 54vh; min-height: 260px; flex: 0 0 auto; position: relative; }
  aside { order: 2; display: block; overflow: visible; border-right: 0; border-top: 1px solid #284335; padding: 14px 14px 28px; }
  .dates { flex-direction: column; }
  .date-field { min-width: 0; width: 100%; }
  .actions button { min-width: 0; }
  body.date-open { overflow: hidden; }
  .date-panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; max-height: 85vh; overflow: auto; overscroll-behavior: contain; border-radius: 16px 16px 0 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .date-grid button { min-height: 44px; }
}
@media (max-width: 520px) {
  .account-name { display: none; }
}