:root { --bg:#14171a; --panel:#1d2126; --fg:#d7dde3; --muted:#8a949e; --line:#2c3238; --ok:#4fd18b;
        --flash:#e5484d; --immediate:#f0a020; --priority:#3e9be8; --routine:#7c8a96; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.4 ui-monospace, Menlo, monospace; background:var(--bg); color:var(--fg); }
h2 { font-size:12px; letter-spacing:.08em; color:var(--muted); margin:16px 16px 8px; }
.meta { color:var(--muted); font-size:12px; }
.prec { font-weight:700; }
.FLASH { color:var(--flash); } .IMMEDIATE { color:var(--immediate); }
.PRIORITY { color:var(--priority); } .ROUTINE { color:var(--routine); }
.err { color:var(--flash); margin:0; }
button { font:inherit; padding:8px 12px; background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:6px; cursor:pointer; }
button.link { padding:2px 6px; font-size:11px; color:var(--muted); background:none; }
button.link:hover { color:var(--fg); border-color:var(--muted); }

/* Shell: tab bar + one visible panel. LiveView sets phx-connected / phx-disconnected on the root. */
.app { display:grid; grid-template-rows:auto 1fr; height:100vh; }
.tabs { display:flex; align-items:center; gap:4px; padding:0 16px; background:var(--panel); border-bottom:1px solid var(--line); }
/* Logo sits inside the tab row's height (tabs are 12px padding + one line of text). */
.tabs .logo { display:block; height:20px; width:auto; margin-right:16px; }
.login-logo { width:96px; height:96px; align-self:center; }
.tab { padding:12px 16px; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; }
.tab:hover { color:var(--fg); }
.tab.active { color:var(--fg); border-bottom-color:var(--ok); }
.flash { margin-left:16px; color:var(--ok); font-size:12px; cursor:pointer; }
.live { margin-left:16px; color:var(--ok); }
.phx-disconnected .live, .phx-loading .live { color:var(--flash); }
.panel { min-height:0; }
.panel.hidden { display:none; }

/* MAP tab: map only (OpenStreetMap), Leaflet controls in the dashboard colours. */
#map { height:100%; background:#0e1013; }
.leaflet-bar a, .leaflet-bar a:hover { background:var(--panel); color:var(--fg); border-bottom-color:var(--line); }
.leaflet-bar { border-color:var(--line) !important; }
.leaflet-control-attribution { background:rgba(20,23,26,.8) !important; color:var(--muted); }
.leaflet-control-attribution a { color:var(--muted); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background:var(--panel); color:var(--fg); box-shadow:0 2px 12px rgba(0,0,0,.6); }
.leaflet-popup-content { font:13px/1.45 ui-monospace, Menlo, monospace; }
.leaflet-container a.leaflet-popup-close-button { color:var(--muted); }
.leaflet-tooltip { background:var(--panel); color:var(--fg); border-color:var(--line); font:12px ui-monospace, Menlo, monospace; box-shadow:none; }
.leaflet-tooltip-right::before { border-right-color:var(--line); }

/* REPORT tab: channel tabs across the top, then the feed and report form, SETTINGS on the right. */
.report-panel { display:grid; grid-template-columns:1fr 300px; grid-template-rows:auto 1fr auto; }
.feed { grid-column:1; grid-row:2; overflow-y:auto; container:feed / inline-size; }
.compose-box { grid-column:1; grid-row:3; background:var(--panel); border-top:1px solid var(--line); }

/* Channel sub-tabs; the badge counts reports nobody has marked ✓ yet. */
.channel-tabs { grid-column:1 / -1; grid-row:1; display:flex; gap:2px; padding:0 12px; overflow-x:auto; background:var(--panel); border-bottom:1px solid var(--line); }
.ch-tab { display:flex; align-items:center; gap:6px; padding:7px 12px; font-size:12px; letter-spacing:.06em; white-space:nowrap;
          color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; }
.ch-tab:hover { color:var(--fg); }
.ch-tab.active { color:var(--fg); border-bottom-color:var(--ok); }
.ch-tab .badge { min-width:18px; padding:0 5px; border-radius:9px; background:#3a2a12; color:var(--immediate); font-size:11px; text-align:center; }


/* Collapsible side panels (REPORT tab). */
.panel-bar { display:flex; align-items:center; gap:8px; width:100%; padding:6px 16px; border:0; border-radius:0; background:none;
             color:var(--muted); font-size:11px; letter-spacing:.08em; text-align:left; }
.panel-bar:hover { color:var(--fg); }
.panel-bar .chev::before { content:"▾"; }
.report-panel.compose-hidden .panel-bar .chev::before { content:"▴"; }
.report-panel.compose-hidden .compose { display:none; }

.report, .unit { padding:8px 16px; border-bottom:1px solid var(--line); }
/* Report feed: one compact row per report, fields flow horizontally in DETAILS. */
.report-row { display:grid; grid-template-columns:52px 84px 136px 104px 88px 88px 1fr 232px; gap:12px; align-items:baseline; padding:5px 16px; }
.report-row > * { min-width:0; }
.feed-head { position:sticky; top:0; z-index:1; background:var(--bg); border-bottom:1px solid var(--line);
             font-size:11px; letter-spacing:.08em; color:var(--muted); padding-top:10px; padding-bottom:6px; }
.report-row .to { color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.report-row .type, .report-row .from { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.report-row .dtg { color:var(--muted); font-size:12px; }
.details { display:flex; flex-wrap:wrap; gap:2px 18px; font-size:12px; overflow-wrap:anywhere; }
.kv .k { color:var(--muted); }
/* Draft: type and position known, details still coming from the field. */
.awaiting { color:var(--immediate); font-weight:700; letter-spacing:.06em; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity:.35; } }
/* Withdrawn by the sender: kept for the record, struck through. */
.report.cancelled > span:not(.details):not(.actions):not(.seen-cell) { opacity:.45; text-decoration:line-through; }
.cancelled-tag { color:var(--muted); font-weight:700; letter-spacing:.06em; }

.report-row .actions { display:flex; gap:6px; justify-content:flex-end; align-items:center; }
/* Seen by HQ: unseen rows carry a bar in their precedence colour; ✓ toggles. */
.report-row { border-left:3px solid transparent; }
.report-row.unseen.prec-FLASH { border-left-color:var(--flash); }
.report-row.unseen.prec-IMMEDIATE { border-left-color:var(--immediate); }
.report-row.unseen.prec-PRIORITY { border-left-color:var(--priority); }
.report-row.unseen.prec-ROUTINE { border-left-color:var(--routine); }
/* ✓ (left column), kept low-contrast: grey = nobody, dim green = others, soft green tint = me. */
.seen-btn { min-width:40px; height:24px; padding:0 6px; font-size:12px; line-height:1; color:#5b646d; background:none;
            border-color:#262b30; display:inline-flex; align-items:center; justify-content:center; gap:3px; }
.seen-btn:hover { color:#8fbf9f; border-color:#3a4a40; }
.seen-btn.others { color:#6f9f80; border-color:#2e3a33; }
.seen-btn.mine { color:#8fcfa4; background:rgba(79,209,139,.12); border-color:#35503f; }
.seen-btn .count { font-size:11px; font-weight:700; }
.user { display:flex; align-items:center; gap:12px; margin-left:auto; font-size:12px; color:var(--muted); }
.user form { margin:0; }
.flash.error { color:var(--flash); }
.report:hover { background:#1a1e22; }
.unit-head { display:flex; align-items:center; gap:8px; }
.unit-head .meta { margin-left:auto; }
.unit-actions { display:flex; gap:6px; margin-top:6px; }
#reports > .empty { display:none; }
#reports > .empty:only-child { display:block; }
.report.fresh { animation: fresh 3s ease-out; }
@keyframes fresh { from { background:#3a3320; } to { background:transparent; } }

.compose { max-height:50vh; overflow-y:auto; padding:0 16px 12px; background:var(--panel); }
.compose-form { display:flex; flex-direction:column; gap:10px; }
.compose-top { display:grid; grid-template-columns:1fr 1.3fr 1fr 2fr 1fr 1fr 1fr; gap:8px; }
.compose-fields { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; }
.compose label { display:flex; flex-direction:column; gap:4px; min-width:0; font-size:12px; color:var(--muted); }
.compose label.invalid { color:var(--flash); }
/* Long labels wrap; keep the inputs of a row aligned at the bottom. */
.compose-fields label { justify-content:flex-end; }
.compose label.wide { grid-column:1 / -1; }
.compose textarea { resize:vertical; }
.compose input, .compose select, .compose textarea { box-sizing:border-box; width:100%; height:36px; margin:0; font:inherit; font-size:14px; line-height:18px; padding:8px; background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:6px; }
.compose select { padding:0 28px 0 8px; appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
.compose textarea { min-height:36px; }
.compose label.invalid input, .compose label.invalid select, .compose label.invalid textarea { border-color:var(--flash); }
.compose-actions { display:flex; align-items:center; gap:8px; }
.compose-actions .err { margin-right:auto; padding-left:18px; font-size:12px; }
.compose-actions button:first-of-type { margin-left:auto; }
.compose button.send { font-weight:700; border-color:currentColor; }

.login { max-width:320px; margin:20vh auto; display:flex; flex-direction:column; gap:12px; padding:0 16px; }
.login input, .login button { font:inherit; padding:10px; background:var(--panel); color:var(--fg); border:1px solid var(--line); border-radius:6px; }

/* Narrower feed (small window): the row buttons move under the details,
   and below that the row folds into the phone layout, so buttons never cover text. */
@container feed (max-width: 1000px) {
  .report-row { grid-template-columns:52px 84px 136px 104px 88px 88px 1fr; row-gap:4px; }
  .report-row .actions { grid-column:7; justify-content:flex-start; }
  .feed-head > span:last-child { display:none; }
}
@container feed (max-width: 720px) {
  .report-row { grid-template-columns:52px 84px 1fr auto; }
  .report-row .actions { grid-column:4; grid-row:1; justify-content:flex-end; }
  .report-row .dtg, .report-row .from, .report-row .to { display:none; }
  .report-row .details { grid-column:1 / -1; }
  .feed-head { display:none; }
}

@media (max-width: 800px) {
  .report-panel { display:flex; flex-direction:column; overflow-y:auto; }
  .feed { overflow:visible; }
  .compose { max-height:none; }
  .compose-top { grid-template-columns:1fr 1fr; }
  .report-row { grid-template-columns:52px 84px 1fr auto; }
  .report-row .actions { grid-column:4; grid-row:1; justify-content:flex-end; }
  .report-row .dtg, .report-row .from, .report-row .to { display:none; }
  .report-row .details { grid-column:1 / -1; }
  .feed-head { display:none; }
}

/* Admin: user management. */
.admin { min-height:100vh; }
.admin main { padding:8px 24px 32px; max-width:1100px; }
.users { width:100%; border-collapse:collapse; font-size:13px; }
.users th { text-align:left; font-size:11px; letter-spacing:.08em; color:var(--muted); font-weight:400; padding:6px 8px; border-bottom:1px solid var(--line); }
.users td { padding:8px; border-bottom:1px solid var(--line); vertical-align:middle; }
.users td.actions { text-align:right; white-space:nowrap; }
.users tr.editing td { background:var(--panel); }
.group { display:inline-block; padding:1px 8px; margin-right:4px; border:1px solid var(--line); border-radius:10px; font-size:11px; color:var(--ok); }
.user-form { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:8px 0 12px; }
.user-form label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); }
.user-form label.check { flex-direction:row; align-items:center; gap:6px; padding-bottom:8px; }
.user-form input:not([type=checkbox]) { font:inherit; padding:6px 8px; background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:6px; }
.user-form .err { width:100%; padding-left:18px; font-size:12px; }
button.link.danger { color:var(--flash); }

/* End-to-end encryption: lock marks, KEYS button, key dialogs, rows without a key. */
.lock { font-size:11px; margin-right:4px; opacity:.8; }
.panel-bar .lock { margin-left:auto; color:var(--ok); letter-spacing:.06em; opacity:1; }
.ok { color:var(--ok); } .bad { color:var(--flash); } .warn { color:var(--immediate); }
.report-row.locked .type { color:var(--muted); }
.lock-note { color:var(--muted); font-style:italic; }
.lock-note.bad { color:var(--flash); }
.compose-actions .lock-msg { color:var(--immediate); font-size:12px; }
.compose button.send:disabled { opacity:.4; cursor:not-allowed; }
.keys-dialog { width:min(640px, calc(100vw - 32px)); max-height:calc(100vh - 48px); padding:20px 24px; background:var(--panel);
               color:var(--fg); border:1px solid var(--line); border-radius:8px; }
.keys-dialog::backdrop { background:rgba(0,0,0,.6); }
.keys-dialog h3 { margin:0 0 8px; font-size:14px; letter-spacing:.08em; }
.keys-dialog h4 { margin:18px 0 6px; font-size:11px; letter-spacing:.08em; color:var(--muted); font-weight:400; }
.keys-dialog textarea { width:100%; font:inherit; font-size:13px; padding:8px; background:var(--bg); color:var(--fg);
                        border:1px solid var(--line); border-radius:6px; resize:vertical; }
.keys-dialog .dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.keys-dialog .qr { display:flex; justify-content:center; margin:12px 0; }
.keys-dialog .qr svg { width:min(260px, 70vw); height:auto; background:#fff; border-radius:6px; }
.keys-dialog .key-text { display:block; padding:8px; background:var(--bg); border:1px solid var(--line); border-radius:6px;
                         font-size:12px; overflow-wrap:anywhere; user-select:all; }
/* Decrypted fields are filled into .body; they flow like direct DETAILS items. */
.details .body { display:contents; }
/* An encrypted report this browser can't open shows nothing but the lock: no status,
   time, sender or ✓ (app.js adds .opened once it is decrypted). */
.report-row.sealed:not(.opened) .seen-cell > * { visibility:hidden; }
.report-row.sealed:not(.opened) .awaiting,
.report-row.sealed:not(.opened) .cancelled-tag,
.report-row.sealed:not(.opened) .actions { display:none; }
/* Same look whatever its status: no strike-through, colour bar or highlight. */
.report.report-row.sealed:not(.opened).cancelled > span:not(.details):not(.actions):not(.seen-cell) { opacity:1; text-decoration:none; }
.report-row.sealed:not(.opened) { border-left-color:transparent; }
/* No channel open in this browser (no keys): only the hint shows. */
.compose-box.hidden { display:none; }
.no-channels { padding:7px 4px; font-size:12px; color:var(--immediate); }
/* MAP: REPORTS / CALLSIGNS layer switch, and the callsign labels. */
.map-layers { display:flex; background:var(--panel); }
.map-layers button { border:0; border-radius:0; padding:6px 10px; font-size:11px; letter-spacing:.06em; color:var(--muted); background:var(--panel); }
.map-layers button + button { border-left:1px solid var(--line); }
.map-layers button.on { color:var(--fg); background:#2a3a30; }
/* Satellite photos: a light outline keeps black plan graphics readable on dark imagery. */
.base-sat .leaflet-plan-pane svg { filter:drop-shadow(0 0 1px rgba(255,255,255,.95)) drop-shadow(0 0 1px rgba(255,255,255,.95)); }
.base-sat .leaflet-planLabels-pane .plan-icon svg { filter:drop-shadow(0 0 1px #fff); }
.leaflet-tooltip.callsign-label { font-weight:700; }
.leaflet-tooltip.callsign-label .when { font-weight:400; color:var(--muted); margin-left:4px; }
/* SETTINGS column (REPORT tab): operator and keys; collapses to a thin strip. */
#settings { grid-column:2; grid-row:2 / span 2; overflow-y:auto; background:var(--panel); border-left:1px solid var(--line); }
.settings-head { display:flex; align-items:center; justify-content:space-between; padding-right:12px; }
.settings-head .link { font-size:16px; padding:0 8px; }
.settings-strip { display:none; }
.report-panel.settings-hidden { grid-template-columns:1fr 34px; }
.report-panel.settings-hidden #settings > :not(.settings-strip) { display:none; }
.report-panel.settings-hidden .settings-strip { display:block; width:100%; height:100%; padding:12px 0; border:0; border-radius:0;
                                               background:none; color:var(--muted); font-size:11px; letter-spacing:.1em; }
.report-panel.settings-hidden .settings-strip:hover { color:var(--fg); background:#22272c; }
.settings-strip span { writing-mode:vertical-rl; display:inline-block; }
.settings-section { padding:4px 16px 14px; border-bottom:1px solid var(--line); }
.settings-section h3 { margin:10px 0 8px; font-size:11px; letter-spacing:.08em; color:var(--muted); font-weight:400; }
.settings-section h4 { margin:14px 0 6px; font-size:11px; letter-spacing:.08em; color:var(--muted); font-weight:400; }
.settings-section p { margin:6px 0; font-size:12px; }
.settings-section label { display:flex; flex-direction:column; gap:4px; margin-bottom:8px; font-size:12px; color:var(--muted); }
.settings-section input, .settings-section textarea { box-sizing:border-box; width:100%; font:inherit; font-size:14px; padding:8px;
  background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:6px; }
.settings-section textarea { font-size:12px; resize:vertical; }
.key-row { display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-top:1px solid var(--line); font-size:12px; }
.key-actions { display:flex; flex-direction:column; gap:4px; align-items:flex-end; }
.key-add { display:flex; align-items:center; gap:8px; margin-top:6px; }
.key-add .key-msg { flex:1; }
.report-row .from small.op-name { display:block; font-weight:400; font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
@media (max-width: 800px) {
  #settings { border-left:none; border-top:1px solid var(--line); overflow:visible; }
  .settings-strip span { writing-mode:horizontal-tb; }
  .report-panel.settings-hidden .settings-strip { height:auto; }
}
.settings-section input[name=callsign], .compose input[name=callsign], .compose input[name=addressee] { text-transform:uppercase; }
/* Admin: channels listed by group. */
.channels tr.group-row td { padding-top:16px; font-size:11px; letter-spacing:.08em; color:var(--ok); border-bottom:1px solid var(--line); }
/* All map controls on the left as one panel: zoom, MAP / SAT / TOPO, REPORTS / CALLSIGNS /
   PLAN, PLAN LAYERS and the drawing palette are its sections, divided by a line. The panel is
   as tall as its contents, at most the map's height: the palette scrolls inside what is left. */
.leaflet-top.leaflet-left { top:10px; left:10px; bottom:auto; width:250px; max-height:calc(100% - 20px);
  display:flex; flex-direction:column; pointer-events:auto; overflow:hidden;
  background:var(--panel); border:1px solid var(--line); border-radius:6px; box-shadow:0 2px 12px rgba(0,0,0,.45); }
.leaflet-top.leaflet-left > .leaflet-control { flex:0 0 auto; float:none; clear:none; width:auto; margin:0;
  border:0 !important; border-radius:0; box-shadow:none; background:transparent; }
.leaflet-top.leaflet-left > .leaflet-control + .leaflet-control { border-top:1px solid var(--line) !important; }
.leaflet-top.leaflet-left > .plan-panel { max-height:40vh; } /* keeps its height (then scrolls); the palette gives way */
.leaflet-top.leaflet-left > .plan-bar { flex:0 1 auto; min-height:120px; }
/* Header: minimizes the panel to its ☰ MAP button. */
.leaflet-top.leaflet-left .map-toggle button { display:flex; justify-content:space-between; align-items:center; width:100%;
  padding:7px 12px; border:0; border-radius:0; background:transparent; color:var(--muted); font-size:11px; letter-spacing:.08em; }
.leaflet-top.leaflet-left .map-toggle button:hover { color:var(--fg); background:#22272c; }
.leaflet-top.leaflet-left .map-toggle .chev { font-size:15px; line-height:1; }
.leaflet-top.leaflet-left.minimized { width:auto; }
.leaflet-top.leaflet-left.minimized > .leaflet-control:not(.map-toggle) { display:none !important; }
.leaflet-top.leaflet-left.minimized .map-toggle button { color:var(--fg); padding:8px 14px; }
/* Zoom and the two switches: rows of equal buttons across the panel. */
.leaflet-top.leaflet-left .leaflet-control-zoom { display:flex; }
.leaflet-top.leaflet-left .leaflet-control-zoom a { flex:1; width:auto; height:32px; line-height:32px; border:0; border-radius:0 !important;
  background:transparent; font-size:18px; }
.leaflet-top.leaflet-left .leaflet-control-zoom a + a { border-left:1px solid var(--line); }
.leaflet-top.leaflet-left .leaflet-control-zoom a:hover { background:#22272c; }
.leaflet-top.leaflet-left .map-layers { background:transparent; }
.leaflet-top.leaflet-left .map-layers button { flex:1; padding:8px 4px; background:transparent; }
.leaflet-top.leaflet-left .map-layers button:hover { color:var(--fg); background:#22272c; }
.leaflet-top.leaflet-left .map-layers button.on { color:var(--fg); background:#2a3a30; }
.leaflet-top.leaflet-left .plan-panel, .leaflet-top.leaflet-left .plan-bar { width:auto; background:transparent; }
.leaflet-top.leaflet-left .plan-tools { grid-template-columns:repeat(5, 1fr); gap:4px; }
.leaflet-top.leaflet-left .plan-tools button { width:100%; }
/* MAP → PLAN: combat plan layers panel, drawing palette and graphics. */
.plan-panel { width:270px; max-height:40vh; overflow-y:auto; background:var(--panel); border:1px solid var(--line); border-radius:4px; font-size:12px; }
.plan-head { width:100%; border:0; border-radius:0; background:none; padding:6px 10px; text-align:left; font-size:11px; letter-spacing:.06em; }
.plan-body { padding:0 10px 8px; }
.plan-ch-head { display:flex; justify-content:space-between; align-items:center; margin:8px 0 4px; font-size:11px; letter-spacing:.06em; color:var(--ok); }
.plan-layer { display:flex; justify-content:space-between; align-items:center; gap:6px; padding:4px 0; border-top:1px solid var(--line); }
.plan-layer label { display:flex; align-items:center; gap:6px; min-width:0; cursor:pointer; }
.plan-layer .plan-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plan-layer.editing .plan-name { color:var(--immediate); }
.plan-actions { display:flex; gap:2px; flex-shrink:0; }
button.link.on { color:var(--immediate); border-color:var(--immediate); }
.plan-empty { padding:2px 0 4px; }
.plan-msg { margin-top:6px; color:var(--immediate); }
.plan-msg:empty { display:none; }
.plan-bar { width:206px; overflow-y:auto; padding:8px 10px; background:var(--panel); border:1px solid var(--line); border-radius:4px; font-size:12px; color:var(--fg); }
.plan-bar[hidden] { display:none; }
.plan-bar-head { display:flex; align-items:center; gap:6px; margin-bottom:6px; color:var(--muted); }
.plan-bar-head b { color:var(--fg); }
.plan-bar-head .link { margin-left:auto; }
.plan-bar-head { flex-wrap:wrap; }
.plan-bar .plan-style { flex-wrap:wrap; margin-top:10px; }
.plan-bar .plan-style input { flex-basis:100%; }
.plan-bar .plan-opts { flex-direction:column; }
.plan-bar .plan-opts label { justify-content:space-between; }
.plan-bar .plan-opts select { max-width:120px; }
.plan-group-title { margin:8px 0 4px; font-size:10px; letter-spacing:.08em; color:var(--muted); }
.plan-tools { display:grid; grid-template-columns:repeat(5, 34px); gap:3px; }
.plan-tools button { display:grid; place-items:center; width:34px; height:34px; padding:0; color:var(--fg); }
.plan-tools button:hover { border-color:var(--muted); }
.plan-style button, .plan-popup-actions button { padding:4px 9px; font-size:11px; letter-spacing:.04em; }
.plan-tools button.on { border-color:var(--ok); background:#2a3a30; color:var(--ok); }
.plan-style { display:flex; align-items:center; gap:8px; margin-top:6px; }
.plan-style input, .plan-popup input { flex:1; min-width:0; font:inherit; font-size:12px; padding:5px 8px; background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:4px; text-transform:uppercase; }
.plan-colors { display:flex; gap:4px; }
.plan-colors .swatch { width:20px; height:20px; padding:0; border:2px solid var(--line); border-radius:50%; }
.plan-colors .swatch.on { border-color:#fff; }
.plan-opts { display:flex; flex-wrap:wrap; gap:8px; }
.plan-opts:not(:empty) { margin-top:6px; }
.plan-opts label { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); }
.plan-opts select { font:inherit; font-size:12px; padding:4px 6px; background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:4px; }
.plan-popup .plan-opts { flex-direction:column; gap:4px; margin-bottom:8px; }
.plan-popup .plan-opts label { flex-direction:row; align-items:center; justify-content:space-between; gap:8px; margin:0; }
.plan-hint { margin-top:6px; }
.plan-desc { margin-top:10px; padding:8px; border-left:2px solid var(--ok); background:var(--bg); border-radius:0 4px 4px 0; }
.plan-desc b { color:var(--ok); font-size:12px; }
.plan-desc p { margin:4px 0 0; font-size:11.5px; line-height:1.45; color:var(--fg); }
.plan-popup-desc { max-width:260px; margin:6px 0 0; font-size:11.5px; line-height:1.45; color:var(--muted); }
.plan-popup label { display:flex; flex-direction:column; gap:3px; margin:8px 0 6px; font-size:11px; color:var(--muted); }
.plan-popup p { margin:6px 0 0; }
.plan-popup-actions { display:flex; justify-content:space-between; gap:6px; margin-top:8px; }
/* While drawing, clicks go to the map, not to markers or graphics. */
.leaflet-container.plan-drawing, .leaflet-container.plan-drawing.leaflet-grab { cursor:crosshair; }
.plan-drawing .leaflet-interactive, .plan-drawing .leaflet-pane > svg path.leaflet-interactive,
.plan-drawing .plan-text span { pointer-events:none; }
.plan-icon, .plan-label, .plan-text { background:none; border:0; }
.plan-icon svg { display:block; }
.plan-label span, .plan-text span { position:absolute; transform:translate(-50%, -50%); white-space:nowrap;
  font:700 12px ui-monospace, Menlo, monospace; text-shadow:0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; }
.plan-label span { pointer-events:none; }
.plan-label.right span { transform:translate(14px, -50%); }
.plan-label.right.wide span { transform:translate(24px, -50%); }
.plan-label.below span { transform:translate(-50%, 6px); }
.plan-text span { font-size:14px; cursor:pointer; }

/* An order's reporting points: green once a unit has sent a POSREP for it. */
.rp { display:inline-block; padding:0 5px; margin:1px 0; border:1px solid var(--line); border-radius:3px; white-space:nowrap; }
.rp.ok { border-color:var(--ok, #4fd18b); color:var(--ok, #4fd18b); }
.rp small { color:var(--muted); }
.compose-form .points-tools { display:flex; gap:8px; align-items:center; }