.route-note-zone-editor {
  position:relative;
  min-width:0;
  height:100dvh;
  overflow:hidden;
  color:var(--text);
  background:var(--panel2);
  color-scheme:light;
}
.route-note-zone-editor h2,.route-note-zone-editor h3,.route-note-zone-editor p { margin:0; }
.route-note-zone-editor h2 { font-size:var(--fs-title, 1.3rem); }
.route-note-zone-editor h3 { font-size:var(--fs-body-l, 1.06rem); }
.route-note-zone-intro,.route-note-zone-help { color:var(--muted); font-size:var(--fs-label, .9rem); line-height:1.5; }
.route-note-zone-topbar {
  position:absolute;
  z-index:5;
  top:max(12px,env(safe-area-inset-top));
  right:12px;
  left:12px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:var(--r-full);
  background:color-mix(in srgb,var(--panel) 92%,transparent);
  box-shadow:var(--shadow-card);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.route-note-zone-topbar-title { overflow:hidden; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.route-note-zone-topbar-tools { display:flex; gap:4px; }
.route-note-zone-topbar .route-note-zone-button { min-height:38px; padding:7px 10px; border:0; border-radius:var(--r-full); background:transparent; }
.route-note-zone-content {
  position:absolute;
  z-index:4;
  right:0;
  bottom:68px;
  left:0;
  display:grid;
  gap:10px;
  max-height:min(57dvh,520px);
  min-width:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:12px 14px 14px;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:var(--panel);
  box-shadow:var(--shadow-raise);
}
.route-note-zone-card { display:grid; gap:12px; min-width:0; padding:16px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); }
.route-note-zone-name-card { border-color:var(--primary-border, var(--line-strong)); }
.route-note-zone-name input { font-size:1.08rem; font-weight:700; }
.route-note-zone-options,.route-note-zone-group-options { min-width:0; }
.route-note-zone-options[open],.route-note-zone-group-options[open] { padding-bottom:4px; }
.route-note-zone-options summary,.route-note-zone-group-options summary { display:list-item; min-height:44px; line-height:44px; color:var(--gold); font-size:var(--fs-label, .9rem); font-weight:700; cursor:pointer; }
.route-note-zone-options summary:focus-visible,.route-note-zone-group-options summary:focus-visible { outline:3px solid color-mix(in srgb,var(--gold) 40%,transparent); outline-offset:2px; }
.route-note-zone-options > :not(summary),.route-note-zone-group-options > :not(summary) { margin-top:10px; }
.route-note-zone-field { display:grid; gap:6px; min-width:0; color:var(--text); font-size:var(--fs-label, .9rem); font-weight:600; }
.route-note-zone-field input,.route-note-zone-field textarea,.route-note-zone-ring-select { box-sizing:border-box; width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--panel2); color:var(--text); font:500 var(--fs-body, 1rem) var(--font-ui, inherit); }
.route-note-zone-field input[type="color"] { padding:5px; }
.route-note-zone-field textarea { min-height:88px; resize:vertical; }
.route-note-zone-postal-inputs { display:grid; gap:10px; }
.route-note-zone-part-list { display:grid; gap:8px; }
.route-note-zone-part { display:grid; gap:8px; min-width:0; padding:12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel2); }
.route-note-zone-part strong,.route-note-zone-part small { overflow-wrap:anywhere; }
.route-note-zone-part small { color:var(--muted); }
.route-note-zone-row-actions,.route-note-zone-map-tools,.route-note-zone-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.route-note-zone-map-card { position:absolute; inset:0; overflow:hidden; display:grid; background:var(--panel2); }
.route-note-zone-map { width:100%; height:100%; }
.route-note-zone-map-status { padding:8px 12px; color:var(--muted); }
.route-note-zone-map-status[hidden],.route-note-zone-error[hidden] { display:none; }
.route-note-zone-map-tools { position:absolute; z-index:3; right:12px; bottom:calc(min(57dvh,520px) + 82px); justify-content:flex-end; padding:0; }
.route-note-zone-button { min-height:44px; padding:9px 13px; border:1px solid var(--line-strong); border-radius:var(--r-md); background:var(--panel2); color:var(--text); font:600 var(--fs-label, .9rem) var(--font-ui, inherit); cursor:pointer; }
.route-note-zone-button.primary { border-color:var(--gold); background:var(--gold); color:var(--gold-ink); }
.route-note-zone-button.compact { min-height:36px; padding:6px 10px; border-radius:var(--r-full); font-size:var(--fs-caption,.78rem); }
.route-note-zone-button.danger { color:var(--red); }
.route-note-zone-button:disabled { opacity:.55; cursor:wait; }
.route-note-zone-button:focus-visible,.route-note-zone-field :focus-visible,.route-note-zone-ring-select:focus-visible { outline:3px solid color-mix(in srgb,var(--gold) 40%,transparent); outline-offset:2px; }
.route-note-zone-error { padding:10px 12px; border-radius:var(--r-md); background:var(--red-bg); color:var(--red); line-height:1.5; }
.route-note-zone-field-error { color:var(--red); font-size:var(--fs-label, .9rem); font-weight:600; line-height:1.4; }
.route-note-zone-actions { position:absolute; right:0; bottom:0; left:0; z-index:5; justify-content:flex-end; min-height:68px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--panel); }
.route-note-zone-coordinates { display:grid; gap:8px; }
.route-note-zone-add-actions,.route-note-zone-recent-codes { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.route-note-zone-recent-codes small { flex:0 0 100%; color:var(--muted); }
.route-note-zone-editor[data-mode="drawing"] .route-note-zone-content,
.route-note-zone-editor[data-mode="editing"] .route-note-zone-content { max-height:min(38dvh,330px); }
.route-note-zone-editor[data-mode="drawing"] .route-note-zone-map-tools,
.route-note-zone-editor[data-mode="editing"] .route-note-zone-map-tools { bottom:calc(min(38dvh,330px) + 82px); }
body:has(.route-note-zone-editor) .bottom-nav,
body:has(.route-note-zone-editor) .tab-header { display:none !important; }
@media (min-width:700px) {
  .route-note-zone-topbar { right:auto; left:16px; width:min(430px,calc(100% - 32px)); }
  .route-note-zone-content { right:16px; bottom:16px; left:auto; width:min(420px,calc(100% - 32px)); max-height:calc(100% - 32px); border-bottom:1px solid var(--line); border-radius:var(--r-xl); padding-bottom:84px; }
  .route-note-zone-actions { right:16px; bottom:16px; left:auto; width:min(420px,calc(100% - 32px)); border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r-xl) var(--r-xl); }
  .route-note-zone-map-tools { right:calc(min(420px,calc(100% - 32px)) + 32px); bottom:20px; }
  .route-note-zone-postal-inputs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .route-note-zone-coordinates { grid-template-columns:1fr 1fr auto; align-items:end; }
}
@media (max-width:699px) { .route-note-zone-actions .route-note-zone-button { flex:1 1 42%; } }
.route-note-zone-privacy { margin-top:12px; }