/* Annotation tools and appearance inspector. */
.annotation-toolbar { position:absolute; bottom:38px; left:50%; transform:translateX(-50%); width:min(690px,calc(100% - 28px)); z-index:850; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:7px; }
.annotation-tool-row { display:flex; gap:4px; overflow-x:auto; align-items:center; }
.annotation-tool-row button { display:flex; align-items:center; justify-content:center; gap:7px; border:0; background:transparent; color:var(--muted); border-radius:8px; padding:10px; font-size:12px; white-space:nowrap; flex-shrink:0; }
.annotation-tool-row button:hover,.annotation-tool-row button[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); }
.annotation-tool-row button[aria-pressed="true"] { font-weight:650; }
.annotation-tool-row b { font-size:10px; background:var(--accent-soft); padding:2px 5px; border-radius:4px; }
.annotation-active-tool { font-size:11px; color:var(--accent); background:var(--accent-soft); border-radius:20px; padding:4px 9px; margin-right:auto; white-space:nowrap; }
.annotation-toolbar.is-menu-open { z-index:852; }
.annotation-menu { position:absolute; bottom:calc(100% + 10px); left:0; width:250px; max-height:min(540px,calc(100dvh - 260px)); overflow-y:auto; overscroll-behavior:contain; background:var(--surface); padding:10px 6px; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.annotation-menu-heading { color:var(--muted); font-size:10px; letter-spacing:1px; font-weight:650; padding:6px 12px 8px; }
.annotation-menu button { display:flex; width:100%; align-items:center; gap:12px; border:0; border-radius:6px; background:transparent; padding:9px 12px; text-align:left; font-size:13px; }
.annotation-menu button:hover,.annotation-menu button[aria-pressed="true"] { background:var(--accent-soft); color:var(--accent); }
.annotation-menu button i { width:16px; text-align:center; }
.annotation-menu kbd { margin-left:auto; font:inherit; font-size:10px; color:var(--muted); }
.annotation-menu details { border-top:1px solid var(--line); margin-top:5px; padding-top:5px; }
.annotation-menu summary { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; cursor:pointer; font-size:13px; list-style:none; }
.annotation-menu summary::-webkit-details-marker { display:none; }
.annotation-menu summary:hover { background:var(--paper); border-radius:6px; }
.annotation-menu details[open] summary { color:var(--accent); }
.annotation-menu details[open] summary i { transform:rotate(180deg); }
.annotation-open-link { display:inline-block; font-size:12px; color:var(--accent); margin:0 0 12px; }
.annotation-video-dialog { width:min(800px,calc(100% - 28px)); padding:0; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:var(--surface); }
.annotation-video-dialog::backdrop { background:#30292b99; }
.annotation-video-dialog video { display:block; width:100%; max-height:65dvh; background:#30292b; }
.annotation-video-dialog .helper { margin:12px 18px; font-size:12px; color:var(--muted); }
.annotation-command-row { display:flex; gap:7px; align-items:center; flex-wrap:wrap; border-top:1px solid var(--line); margin-top:5px; padding:7px 5px 1px; }
#annotation-status { font-size:11px; color:var(--muted); flex:1; min-width:170px; }
.annotation-command { border:0; border-radius:6px; background:var(--paper); padding:6px 8px; font-size:11px; color:var(--accent); }
#annotation-finish { background:var(--accent); color:#fff; font-weight:650; }
.annotation-command-row label { display:flex; gap:5px; align-items:center; font-size:11px; }
.annotation-command-row select { width:90px; margin:0; padding:4px; font-size:11px; }
.annotation-panel { position:absolute; right:12px; top:76px; bottom:155px; width:min(320px,calc(100% - 24px)); min-height:0; display:flex; flex-direction:column; overflow:hidden; z-index:851; border:1px solid var(--line); background:var(--surface); border-radius:14px; box-shadow:var(--shadow); }
.annotation-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:16px 18px; border-bottom:1px solid var(--line); flex-shrink:0; }
.annotation-panel h2 { font-size:18px; }
.annotation-panel h3 { font-size:13px; }
.annotation-panel-scroll { overflow-y:auto; overscroll-behavior:contain; min-height:0; flex:1; padding:16px 18px; }
.annotation-panel .helper { margin:8px 0 12px; font-size:11px; line-height:1.6; color:var(--muted); }
.annotation-selection-heading { display:flex; gap:8px; align-items:center; justify-content:space-between; }
.annotation-preview-badge { font-size:10px; color:var(--accent); background:var(--accent-soft); border-radius:20px; padding:3px 7px; white-space:nowrap; }
.annotation-list-section { border-top:1px solid var(--line); padding-top:16px; margin-top:18px; }
.annotation-list { display:grid; gap:5px; }
.annotation-list-item { padding:10px; font-size:12px; text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:8px; overflow-wrap:anywhere; }
.annotation-list-item:hover,.annotation-list-item.is-selected { border-color:var(--accent); background:var(--accent-soft); }
.annotation-properties label { display:block; font-size:12px; font-weight:500; }
.annotation-properties textarea,.annotation-properties input[type=number],.annotation-properties input[type=url] { width:100%; margin:6px 0 12px; border:1px solid var(--line); border-radius:7px; font:inherit; font-size:13px; padding:9px; color:var(--ink); background:var(--surface); }
.annotation-properties textarea { resize:vertical; min-height:65px; max-height:180px; }
.annotation-properties input[type=color] { display:block; margin:6px 0 12px; width:100%; height:36px; padding:3px; border:1px solid var(--line); border-radius:7px; background:var(--surface); cursor:pointer; }
.annotation-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; align-items:start; }
.annotation-properties .checkbox-label { display:flex; align-items:center; gap:6px; font-size:11px; margin-bottom:12px; }
.annotation-properties .checkbox-label input { accent-color:var(--accent); margin:0; }
.annotation-actions { display:flex; gap:6px; margin-top:12px; }
.annotation-delete { margin-left:auto; color:var(--danger); }
.annotation-edit-footer { padding:10px 18px 16px; border-top:1px solid var(--line); background:var(--surface); flex-shrink:0; }
.annotation-edit-footer .helper { margin:0; }
.annotation-edit-footer .annotation-actions { margin-top:8px; }
#annotation-apply { flex:1; }
.annotation-error { color:var(--danger); font-size:12px; padding:10px 18px; border-bottom:1px solid var(--line); background:#fff4f1; flex-shrink:0; }
.annotation-properties [aria-invalid="true"] { border-color:var(--danger); }
.annotation-properties textarea:focus-visible { outline:3px solid #e06878; outline-offset:2px; }
/* The capture SVG keeps the saved source; only the screen hides it for preview. */
.map-annotations-svg [data-annotation-previewed] { visibility:hidden; }
#draw-bar { bottom:155px; }
@media (max-width:700px) {
  .annotation-toolbar { bottom:35px; width:calc(100% - 18px); padding:5px; }
  .annotation-tool-row button { padding:9px 8px; font-size:11px; }
  .annotation-panel { top:65px; bottom:180px; }
  #annotation-status { flex-basis:100%; }
}
@media (max-height:600px) {
  .annotation-menu { max-height:calc(100dvh - 210px); }
  .annotation-panel { top:10px; bottom:135px; }
  .annotation-panel-heading { padding:8px 14px; }
  .annotation-panel-heading .eyebrow { display:none; }
  .annotation-edit-footer { padding:8px 14px; }
}