:root {
  color-scheme: light; /* no dark theme: a dark system draws its selects, pickers and scrollbars light too */
  --ink: #1f2c36; --soft: #5d6d79; --line: #d5dde3; --line2: #e9eef2; --bg2: #f5f7f9; --sel: #dcebf9; --hover: var(--line2);
  --accent: #1f5f86; --magenta: #b0127a; --err: #b42318; --warn: #b54708;
  /* --sel: what is selected or current, a pale blue; --hover: what the pointer is over where a click
     does something; --accent: what is pressed, and the focus */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --row: 44px;          /* menu rows and targets: 44 px for fingers, 36 px with a mouse */
  --tap: 32px;          /* the icon buttons over the map and in the bar: 32 px with a mouse, 44 px for fingers */
  --bar-h: 39px;        /* the bar across the top (its edge inside it) */
  --lw: 260px; --rw: 320px; --sheet-h: 52vh; /* the panels' widths, a phone's sheet's height: frame.js */
  --status-h: 36px;     /* height of the bottom row (credits, scale), kept current by app.js */
  --shadow: 0 1px 4px rgba(20, 30, 40, .14);
  /* z-index, lowest first: dbox 2, edge 3, status 5, foot 6, search 7, panels 8, bar, dock 9, nostart 10, dnote 12, dmenu 20 */
  accent-color: var(--accent); /* a box ticked, a slider: in the colour of what is pressed */
}
@media (pointer: fine) { :root { --row: 36px; } }
@media (pointer: coarse) { :root { --bar-h: 49px; --tap: 44px; } } /* a finger's targets: 44 px */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { font: 13px/1.4 var(--font); color: var(--ink); background: #f1ebdc; overflow: hidden; } /* the land's colour (style.js) until the map draws */
button:disabled { opacity: .35; cursor: default; } /* every button that does nothing now: the bar's, a pager's, a form's Create */
/* the map not started: said after a few seconds, unless app.js has removed it by then */
.nostart { visibility: hidden; animation: nostart 0s 8s forwards; } /* a warning in the note's chip (.dnote, below), a few seconds in */
@keyframes nostart { to { visibility: visible; } }
/* a button read as a link (About's Reload) */
.linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
#map { position: absolute; inset: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
svg { flex: none; }
/* what floats over the map (a box, a menu, the map's controls): a white card */
:is(.mapctl, .search, .results, .kinds, .dmenu) { background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
/* a name or a value on one line, cut with "…" */
:is(.drow .dname, .vrow .flabel, .vcell .fvalue, .vcell .funit, button.small.link, .drawings .dname, .dinsphead .ititle) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Layout (drawing-ui.md §1, frame.js): the bar across the top; over the map, the left panel
   (Elements, Layers) and the right one (Properties), each as wide as dragged; between them the map's
   foot (legends, touch row, the map's controls) and the bottom row (credits, the scale).
   On a phone the panels are one bottom sheet at a time. */
.mapctl { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 4px; }
.mapctl button[aria-expanded="true"] { background: var(--sel); color: var(--accent); }
@media (pointer: coarse) { #zoom-in, #zoom-out { display: none; } } /* a finger pinches */
/* the map's foot (drawing-ui.md §1): one strip above the bottom row, between the panels; at its left,
   stacked, the legends, the touch row; at its right the map's controls. Nothing else there. */
.foot { position: absolute; z-index: 6; left: 0; right: 0; bottom: var(--status-h); display: flex; align-items: flex-end; gap: 8px; padding: 0 8px 8px 10px; pointer-events: none; }
.footl { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footl > :not(.legends), .mapctl { pointer-events: auto; }
/* the panels: one look, each a column of a head and its body; the edge to drag inside the inner side */
.side, .props { position: absolute; z-index: 8; top: var(--bar-h); bottom: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.side { left: 0; width: var(--lw); border-right: 1px solid var(--line); }
.props { right: 0; width: var(--rw); border-left: 1px solid var(--line); }
@media (pointer: fine) { .side, .props { --row: 24px; } } /* dense rows with a mouse (a grid of cells), 44 with a finger */
.side > .dview, .side > #menu { flex: 1 1 auto; min-height: 0; }
:is(.side, .props) > .edge { position: absolute; z-index: 3; top: 0; bottom: 0; width: 7px; cursor: col-resize; touch-action: none; }
:is(.side, .props) > .edge.left { right: -4px; } :is(.side, .props) > .edge.right { left: -4px; }
:is(.side, .props) > .edge:is(:hover, :active) { background: linear-gradient(90deg, transparent 2px, var(--accent) 2px 5px, transparent 5px); }
.grip { display: none; }
@media (min-width: 720px) { /* between the panels: the map's foot, its bottom row, find a place */
  body.has-left .foot { left: var(--lw); }
  body.has-right .foot { right: var(--rw); }
  body.has-left .status { left: var(--lw); }
  body.has-right .status { right: var(--rw); }
  body.has-right > .search { right: calc(var(--rw) + 8px); } /* behind its lens (COMPACT, a child of body): beside Properties; in the bar it stays where it is */
}
/* a boxed field outside the inspector's grids: the data menus, a variant, the tree's filter, a dialog's */
:is(.pick, .controls, .dfilter, dialog) :is(input, select) { min-height: var(--row); border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.spin { position: absolute; right: 2px; top: 2px; box-sizing: border-box; width: 9px; height: 9px; border: 1.5px solid var(--line); border-top-color: var(--accent); border-radius: 50%; visibility: hidden; } /* the Layers tab's corner while sources load */
body.loading .spin { visibility: visible; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { transition: none !important; animation-duration: .01ms !important; } } /* the map's flights: dom.js animate */
.x { margin-left: auto; font-size: 16px; line-height: 1; } /* an icon button (below), at a row's end */
#menu { overflow-y: auto; flex: 0 1 auto; min-height: 0; padding-bottom: 6px; overscroll-behavior: contain; }
/* a band's heading: a Layers group's, the inspector's sections', About's, the Totals' sections */
:is(#menu summary, .dinspect h3, dialog h3, .lgrid.plain tr.sec td) { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--soft); }

/* a group's heading: a band, as the inspector's */
#menu summary {
  display: flex; align-items: center; gap: 8px; min-height: var(--row); padding: 0 8px 0 12px; cursor: pointer; user-select: none; background: var(--bg2); border-bottom: 1px solid var(--line2);
  list-style: none;
}
#menu summary::-webkit-details-marker { display: none; }
/* the fold caret: a group of layers, a block of properties, a group's row */
:is(#menu summary, .dinspect h3.folds, .dfold)::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(-45deg); transition: transform .15s; flex: none; }
:is(#menu details[open] > summary, .dinspect h3.folds.open, .dfold[aria-expanded="true"])::after { transform: rotate(45deg); }
#menu summary .gname { flex: 1; }
#menu summary .count { font-weight: 600; font-size: 11px; letter-spacing: 0; color: var(--accent); background: var(--sel); border-radius: 9px; padding: 0 7px; line-height: 18px; }
#menu summary .count:empty { display: none; }
#menu ul { list-style: none; margin: 0; padding: 0 0 4px; }

/* base: two cards; the satellite source and the provenance below them */
.bases { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 12px 8px; }
.basecard { border: 2px solid var(--line); background: #fff; border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 4px; font-weight: 600; text-align: left; min-height: 44px; }
.basecard .thumb { height: 44px; border-radius: 5px; }
.basecard[data-base="chart"] .thumb { background: linear-gradient(115deg, #f1ebdc 0 38%, #2b3a46 38% 39%, #cfe6f7 39% 62%, #a5cdec 62% 80%, #86b9e2 80%); }
.basecard[data-base="sat"] .thumb { background: linear-gradient(115deg, #4d6b3c 0 30%, #8a8f6a 30% 40%, #1d3550 40% 75%, #13263b 75%); }
.basecard span { padding: 0 4px 2px; }
.basecard[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* a layer row: name (the whole row toggles), status hint, details button, switch on the right */
.item { padding: 0 8px 0 12px; }
.item .line { display: flex; align-items: center; gap: 6px; min-height: var(--row); }
/* Ocean data: a menu for colours, one for arrows */
.pick .line { gap: 8px; padding-right: 8px; }
.pick .name { flex: none; width: 60px; }
.pick select { flex: 1; min-width: 0; padding: 2px 8px; }
.item label.name { flex: 1; cursor: pointer; align-self: stretch; display: flex; align-items: center; gap: 8px; }
.item .hint { font-size: 11px; color: var(--warn); font-family: var(--mono); }
.item.dim label.name { color: var(--soft); }
.item.error .name { color: var(--err); }
.item.error .hint::after, .item.partial .hint::after { content: "⚠"; margin-left: 4px; color: var(--err); }
.item.partial .hint::after { color: var(--warn); }
.switch {
  appearance: none; -webkit-appearance: none; margin: 0 4px 0 0; flex: none; cursor: pointer;
  width: 34px; height: 20px; border-radius: 10px; background: var(--line); position: relative; transition: background .15s;
}
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(14px); }
/* an icon button (an eye, a fold, an action, ⓘ, ×): no box until pointed at; as tall as a row */
:is(.more, .deye, .hact, .x, .dfold) { flex: none; width: var(--row); height: var(--row); border: 0; padding: 0; border-radius: 6px; background: none; display: grid; place-items: center; color: var(--soft); }
:is(.more, .deye, .hact, .x, .dfold:not(.none)):hover { background: var(--hover); color: var(--ink); } /* .dfold.none: the room of a fold, not a button */
:is(.more, .deye, .hact, .x) svg { width: 16px; height: 16px; }
.more[aria-expanded="true"] { background: var(--sel); color: var(--accent); }
.controls { display: grid; gap: 6px; padding: 0 8px 8px 0; }
.controls select { width: 100%; padding: 2px 8px; }
.seg { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; background: #fff; min-height: var(--row); min-width: var(--row); padding: 0 6px; font-size: 12px; display: grid; place-items: center; }
.seg svg { width: 16px; height: 16px; }
.seg button + button { border-left: 1px solid var(--line); }

.opacity { display: flex; align-items: center; gap: 8px; color: var(--soft); font-size: 12px; }
.opacity span { flex: none; min-width: 52px; }
.opacity input[type=range] { flex: 1; height: var(--row); margin: 0; }
.info { margin: 0 8px 8px 0; padding: 6px 8px; background: var(--bg2); border-left: 2px solid var(--accent); font-size: 12px; color: var(--soft); }
.info p { margin: 2px 0; }
.info .opacity { margin: 0 0 4px; }
.info b { color: var(--ink); font-weight: 600; }
.info a { color: var(--accent); }

.note { margin: 2px 4px; font-size: 11px; color: var(--soft); }

/* ---- the drawing: its tree (the left panel's Elements), its inspector (the right panel) ---- */
.dview { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; position: relative; }
.dlistbox { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.dfilter { flex: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px; }
.dfilter input { flex: 1 1 140px; min-width: 0; padding: 0 8px; }
.dlist { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.drow { display: flex; align-items: center; gap: 2px; min-height: var(--row); padding: 0 4px 0 2px; }
.drow:hover { background: var(--hover); }
.drow.sel { background: var(--sel); }
.drow.droot { flex: none; padding-left: 6px; border-bottom: 1px solid var(--line2); }
.drow.droot .dname { font-weight: 600; }
.drow.drop { box-shadow: inset 0 2px 0 var(--accent); } /* dropped here: just before this row, or into its group */
.drow.dim .dname, .drow.dim .kind { color: var(--soft); }
.drow .kind { flex: none; color: var(--accent); display: grid; place-items: center; }
.drow .kind svg { width: 16px; height: 16px; }
:is(.drow, .drawings) .dname { flex: 1; min-width: 0; border: 0; background: none; text-align: left; min-height: var(--row); }
.drawings .dname { padding: 0 8px; }
.drow .dname { padding: 0 4px; min-width: 44px; } /* a finger's target even beside a long value, which gives way (below) */
.drow input.dname { border: 1px solid var(--accent); border-radius: 6px; background: #fff; }
:is(.drow, .drawings) .val { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 11px; color: var(--soft); white-space: nowrap; }
.dlist .empty { padding: 8px 12px; color: var(--soft); }
.dinspect { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 0 16px; overscroll-behavior: contain; display: flex; flex-direction: column; }
/* a property grid (docs/drawing-ui.md §5): rows ruled across the panel, a label column, fields
   without a box until pointed at or typed in; headings as bands; what is not a row inset */
.dinspect > :not(.vrow, h3, .lgridbox, .fblock) { margin-left: 12px; margin-right: 12px; }
.dinspect > :is(.frow:not(.vrow), .note, .fbuttons) { padding: 4px 0; }
.dinspect > * { flex-shrink: 0; } /* a row as tall as what it holds, the inspector scrolling */
/* a section's head, as a group's in Layers (#menu summary): a band, its buttons after the title, and
   where it folds the arrow at its right (the whole head the target, its title a button for keys) */
.dinspect h3 { display: flex; align-items: center; gap: 8px; margin: 0; min-height: var(--row); padding: 0 8px 0 12px; background: var(--bg2); border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.dinspect h3 .hbtns { display: flex; align-items: center; gap: 6px; margin-left: auto; text-transform: none; letter-spacing: 0; }
.dinspect h3.folds { cursor: pointer; user-select: none; }
.dinspect h3 .hfold { flex: 1; border: 0; background: none; padding: 0; min-height: var(--row); color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.frow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.flabel { flex: none; color: var(--soft); font-size: 12px; }
.frow > input:not([type]), .frow > textarea, .frow > input[spellcheck] { flex: 1; min-width: 0; }
.dinspect input:not([type=checkbox]):not([type=radio]):not([type=color]), .dinspect textarea, .dinspect select {
  min-height: var(--row); border: 1px solid transparent; border-radius: 0; padding: 0 8px; background: transparent; min-width: 0;
}
.dinspect :is(input:not([type=checkbox]):not([type=radio]):not([type=color]), textarea, select):hover { background: var(--hover); }
.dinspect :is(input, textarea, select):focus { outline: 2px solid var(--accent); outline-offset: -2px; background: #fff; }
/* outside a grid (the filter, a form's own fields) a field keeps its box */
.dinspect > :is(input, textarea, select), .dinspect :is(.frow:not(.vrow), .lbar) > :is(input, textarea, select) { border-color: var(--line); border-radius: 6px; }
.dinspect textarea { resize: vertical; padding: 6px 8px; }
input.bad { border-color: var(--err) !important; background: #fdf3f2 !important; } /* a value not applied (fields.js); !important: the grid's rules above (the transparent border, the hover's background) are more specific */
.dinspect input.num { font-family: var(--mono); font-size: 12px; } /* a coordinate, distance, angle or number (fields.js); its width: the cell's (below) */
.dinspect input[type=color] { width: var(--row); height: var(--row); padding: 4px; border: 0; background: none; }
/* a value grid's row (docs/drawing-ui.md §5): label, cell, last column (× or ↺); it never wraps.
   A cell holds one value or a pair, its fields sharing the width; text too long ends in … */
.frow.vrow { display: grid; grid-template-columns: 96px minmax(0, 1fr) var(--row); gap: 0; align-items: stretch; min-height: var(--row); border-bottom: 1px solid var(--line2); }
.vrow .flabel { display: flex; align-items: center; padding: 0 8px 0 12px; border-right: 1px solid var(--line2); }
.vrow .vcell, .vrow .vpair { gap: 0; align-items: stretch; }
.vrow .vcell > :is(.fvalue, .funit, .link, .fcheck), .vrow .vcell > span:not(.vpair), .vrow .vsep { align-self: center; }
.vrow .vcell > .fvalue, .vrow .vcell > .funit { padding: 0 8px; }
.vrow .vcell > button:not(.x) { align-self: center; margin: 0 2px; }
.vrow :is(.vlast, .vcell) > .x, .lgrid .x { border-radius: 0; }
.vcell, .vpair { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vpair { flex: 1 1 0; gap: 4px; }
.vcell > :is(input:not([type=checkbox]):not([type=color]), select, textarea, .seg),
.vpair > :is(input:not([type=checkbox]):not([type=color]), select, .seg) { flex: 1 1 0; width: auto; min-width: 0; }
.vsep { flex: none; color: var(--soft); font-size: 12px; padding: 0 2px; }
.vsep:empty { display: none; }
.vcell .fvalue, .vcell .funit { min-width: 0; }
.vcell .fvalue { flex: 1 1 auto; }
.vcell > button.small, .vcell > .link { flex: none; }
.vlast { display: grid; place-items: center; }
.vcell > .fcheck, .vpair > .fcheck { flex: none; min-width: var(--row); justify-content: center; padding: 0; } /* a box alone: a whole target */
.funit { color: var(--soft); font-size: 12px; }
.mixed { font-size: 11px; color: var(--warn); }
/* the box being dragged (Shift-drag), on the map */
.dbox { position: absolute; border: 1.5px solid #ffc400; background: rgba(255, 196, 0, .1); /* the marks' yellow (draw/layers.js MARK) */ pointer-events: none; z-index: 2; }
/* a group's row: a caret folds its members (an icon button, above) */
.dfold.none::after { display: none; } /* the room of a fold, so that icons line up */
.drow.dgroup { padding-left: 0; font-weight: 600; }
/* how far in the tree a row is: what is in a group, one step further than the group */
.drow.d1 { padding-left: 12px; }
.drow.d2 { padding-left: 24px; }
.drow.d3 { padding-left: 36px; }
.drow.d4 { padding-left: 48px; }
.drow.d5 { padding-left: 60px; }
.drow.dgroup .dname { font-weight: 600; }
.fvalue { font-family: var(--mono); font-size: 12px; }
button.small.link { border-color: transparent; background: none; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; padding: 0 4px; max-width: 100%; }
button.small.link:hover { border-color: var(--line); }
/* a list grid (docs/drawing-ui.md §5): fixed columns; the first ones kept in place while it
   scrolls sideways; the current row marked; its actions in the bar under it */
.lgridbox { display: flex; flex-direction: column; }
.lgridbox > :not(.lscroll) { margin: 0 12px; }
.lscroll { overflow: auto; max-width: 100%; max-height: min(60vh, 640px); overscroll-behavior: contain; scroll-padding-top: 24px; } /* a long one in its own box, its head kept */
.lgrid { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12px; min-width: 100%; }
.lgrid :is(th, td) { border-bottom: 1px solid var(--line2); border-right: 1px solid var(--line2); }
.lgrid :is(th, td):last-child { border-right: 0; }
.lgrid thead th { background: var(--bg2); height: 24px; position: sticky; top: 0; z-index: 2; }
.lgrid th { font-weight: 400; font-size: 11px; color: var(--soft); text-align: left; padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lgrid td { padding: 0; height: var(--row); vertical-align: middle; white-space: nowrap; }
.lgrid td.num { padding: 0 4px; font-family: var(--mono); font-size: 12px; text-align: right; }
.lgrid th.num { text-align: right; }
.lgrid td :is(input:not([type=checkbox]):not([type=color]), select) { width: 100%; min-width: 0; }
.lgrid td .vpair { width: 100%; }
.lgrid td .fvalue { color: var(--soft); }
.lgrid tbody tr:not(.cur, .ladd):hover td { background: var(--hover); } /* a row a click makes current */
.lgrid tr.cur td { background: var(--sel); }
.lgrid tr.warn td { color: var(--warn); }
.lgrid tr.ladd td { opacity: .75; }
/* a plain grid (the totals): sections (Lines, Areas, Points) naming their columns, a group's row with
   its lines under it (folded by its name), the sums */
.lgrid.plain td { padding: 0 4px; }
.lgrid.plain td:first-child { padding-left: 12px; }
.lgrid.plain tr.sec td { background: var(--bg2); }
.lgrid.plain tr.grp td { font-weight: 600; }
.lgrid.plain tr:is(.part, .item) td:first-child { padding-left: 24px; color: var(--soft); }
.lgrid.plain tr.top td:first-child { padding-left: 12px; }
.lgrid.plain tr.all td { font-weight: 600; border-bottom: 2px solid var(--line); }
.lgrid.plain .link { padding: 0; margin: 0; min-height: var(--row); }
.lgrid.plain .tfold { text-decoration: none; color: var(--ink); }
.lgrid .fcheck { justify-content: center; padding: 0; min-width: var(--row); }
.lbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; } /* the current row's actions (its name, how far along); hidden while no row is */
.lbar > input { flex: 1 1 80px; min-width: 60px; width: auto; }
/* a column of numbers (cls n): right-aligned, in figures of one width, to read down */
.dinspect .lgrid td.n input:not([type=checkbox]) { text-align: right; font-family: var(--mono); font-size: 12px; padding: 0 3px; }
.lgrid td.n .fvalue { display: block; padding: 0 4px; text-align: right; font-family: var(--mono); }
.lgrid th.n { text-align: right; }
.fsummary { color: var(--ink); background: var(--bg2); border-radius: 6px; padding: 6px 8px; }
.fblock { display: flex; flex-direction: column; }
.fcheck { display: flex; align-items: center; gap: 6px; min-height: var(--row); padding-right: 6px; cursor: pointer; }
.fbuttons { display: flex; gap: 6px; flex-wrap: wrap; }
/* a boxed button: a form's, a small one in a row or a band's heading (.hbtns resets its case), the touch row's */
:is(.fbuttons, .touchbar) button, button.small { border: 1px solid var(--line); background: #fff; border-radius: 6px; min-height: var(--row); padding: 0 12px; }
:is(:is(.fbuttons, .touchbar) button, button.small):not(:disabled):hover { border-color: var(--accent); }
button.small { min-width: var(--row); padding: 0 8px; font-size: 12px; color: var(--ink); font-weight: 400; }
/* the drawings in this browser: the open one marked */
.drawings { list-style: none; margin: 0; padding: 0; }
.drawings li { display: flex; align-items: center; gap: 4px; border-radius: 6px; }
.drawings li.open { background: var(--sel); }
.drawings li.open .dname { font-weight: 600; color: var(--ink); }
.note.warn { color: var(--warn); }
/* the note (menu.js): a chip under the bar, at the centre, as tall as the bar's buttons, for a few seconds */
.dnote, .nostart { position: fixed; top: calc(var(--bar-h) + 6px); left: 8px; right: 8px; width: fit-content; margin: 0 auto; min-height: 28px; display: flex; align-items: center; text-align: center;
  background: var(--ink); color: #fff; border-radius: 6px; padding: 4px 12px; box-shadow: var(--shadow); font-size: 12px; line-height: 1.3; } /* centred on the window, over the panels if need be; a long one wraps */
.dnote { z-index: 12; }
.dnote:empty { display: none; }
.dnote .linkbtn { color: inherit; margin-left: 4px; min-height: 28px; } /* a new version's Reload, on the dark chip */
@media (pointer: coarse) { .dnote .linkbtn { min-height: var(--tap); } } /* a finger's target */
.nostart { background: var(--warn); z-index: 10; }
#update:not([hidden]) ~ .dnote { top: calc(var(--bar-h) + 48px); } /* a note while a new version is ready: under its chip, not over its Reload */
@media (pointer: coarse) { #update:not([hidden]) ~ .dnote { top: calc(var(--bar-h) + 64px); } }
dialog.dreport { max-width: min(560px, calc(100vw - 32px)); }
dialog.dreport ul { max-height: 40vh; overflow-y: auto; margin: 0; padding-left: 18px; font-size: 12px; }
dialog .fbuttons { margin-top: 14px; }
dialog .fbuttons button { min-height: 44px; padding: 0 14px; } /* a dialog's (About's Close, the offline dialog's): a finger's height with a mouse too */

/* ---- find a place (a place or coordinates): beside the map's controls, shown while it is used ---- */
.search {
  position: absolute; z-index: 7; top: calc(var(--bar-h) + 8px); right: 8px; width: min(360px, calc(100vw - 16px));
  display: none; align-items: center; gap: 6px; padding: 0 0 0 10px; min-height: calc(var(--tap) + 2px);
  color: var(--soft);
}
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; height: var(--tap); color: var(--ink); }
.search .x { width: var(--tap); height: var(--tap); }
.search > svg { width: 18px; height: 18px; } /* the lens, lighter than a button's icon */
@media (pointer: coarse) { .search input { font-size: 14px; } }
.search input::-webkit-search-cancel-button { display: none; }
.search:focus-within { border-color: var(--accent); }
body.finding .search { display: flex; }
/* a computer's: in the bar, always shown; the lens not needed */
.bar > .search { position: relative; top: auto; right: auto; display: flex; flex: 0 1 320px; min-width: 160px; width: auto; margin: 0 4px; box-shadow: none; }
@media (min-width: 720px) and (max-width: 899px) { .bar > .search { min-width: 100px; } } /* a narrow window: the tools first */
@media (min-width: 720px) and (pointer: fine), (min-width: 1280px) { #b-find { display: none; } }
.results { position: absolute; top: calc(100% + 4px); left: -1px; right: -1px; padding: 4px; max-height: 60vh; overflow-y: auto; }
.results ul { list-style: none; margin: 0; padding: 0; }
.results li { min-height: var(--row); padding: 5px 10px; border-radius: 6px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; color: var(--ink); }
.results li small { color: var(--soft); font-size: 11px; }
.results li:hover { background: var(--hover); }
.results li[aria-selected="true"] { background: var(--sel); }
.results li.none { cursor: default; color: var(--soft); background: none; }
.pin { width: 18px; height: 18px; border-radius: 50%; background: var(--magenta); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
/* the depth at a clicked point */
.depthpop .maplibregl-popup-content { padding: 8px 26px 8px 10px; font: 13px/1.35 var(--font); color: var(--ink); }
.depthpop b { font-size: 14px; margin-right: 8px; }
.depthpop .at { font-size: 11px; color: var(--soft); white-space: nowrap; }
.depthpop small { display: block; color: var(--soft); }


/* ---- legends, stacked bottom left above the credits ---- */
.legends { margin-bottom: 3px; /* the outline drawn outside the canvases */ display: flex; flex-direction: column; align-items: flex-start; gap: var(--legend-gap, 6px); pointer-events: none; }
.legends:empty { display: none; }
.legends canvas { display: block; outline: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); } /* an outline, not a border: it moves no pixel of the canvas */
.legends canvas:not([aria-label]) { display: none; } /* not painted yet (its data loading), or failed */

/* ---- bottom row: credits left; the time and depth shown, position and scale right. No bar: the row is
   transparent (clicks reach the map) and each item carries its own light backing. ---- */
.status {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; pointer-events: none;
  display: flex; align-items: flex-end; gap: 4px 12px; padding: 0 10px 6px;
  font-size: 11px; color: var(--soft);
}
.status > *, .readout > *, .credits > * { pointer-events: auto; }
.status :is(.readout > *, .credits) { background: rgba(255,255,255,.85); border-radius: 4px; } /* each on its own backing over the map */
.status #scale { border-radius: 0; } /* a ruler: its ends square, as a map's scale bar */
.pos { padding: 1px 6px; font: 11px var(--mono); color: var(--ink); white-space: nowrap; }
.pos:empty { display: none; }
.readout { display: flex; align-items: flex-end; gap: 8px; margin-left: auto; flex: none; }
/* credits: always on screen, on one line; what does not fit scrolls sideways, faded at the end while
   some of it is out of sight (.cut, app.js) */
.credits { flex: 0 1 auto; min-width: 0; padding: 1px 6px;
  white-space: nowrap; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.credits.cut { -webkit-mask-image: linear-gradient(to left, transparent, #000 18px); mask-image: linear-gradient(to left, transparent, #000 18px); }
.credits::-webkit-scrollbar { display: none; }
.credits a { color: var(--ink); text-decoration: none; }
.credits a:hover { text-decoration: underline; }
.maplibregl-ctrl-scale { border-color: var(--ink); color: var(--ink); font: 11px var(--font); }
#scale.varies { color: var(--warn); border-color: var(--warn); } /* the scale varies across the view: "≈" beside it */
.scalemark { margin-right: -4px; padding: 0 4px; font-size: 13px; color: var(--warn); cursor: default; }

/* ---- about ---- */
dialog { border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 30px rgba(20,30,40,.25); max-width: min(460px, calc(100vw - 32px)); padding: 16px 20px; color: var(--ink); }
dialog::backdrop { background: rgba(20,30,40,.35); }
dialog h2 { margin: 0 0 8px; font-size: 16px; }
dialog h3 { margin: 12px 0 4px; }
dialog .keys { margin: 0; padding-left: 18px; }
kbd { font: 11px var(--mono); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--bg2); }

/* with a finger (drawing-ui.md §1): Done, Back, Delete, Duplicate, over the map's foot, at its left */
.touchbar { display: none; }
@media (pointer: coarse) {
  .touchbar:not([hidden]) { align-self: stretch; display: flex; flex-wrap: wrap; gap: 6px; }
  .touchbar button { min-height: var(--tap); padding: 0 14px; box-shadow: var(--shadow); } /* over the map, as its controls */
}
/* a line's elevation profile (draw/panel.js profileBlock) */
svg.profile { width: 100%; height: auto; display: block; background: var(--bg2); border-radius: 6px; touch-action: none; }
svg.profile .psurface { stroke: var(--soft); stroke-dasharray: 3 3; stroke-width: 1; }
svg.profile .pline { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
svg.profile .pend { fill: var(--accent); }
svg.profile .pcursor { stroke: var(--magenta); stroke-width: 1; }

/* ---- the bar (drawing-ui.md §1): the file group, Layers and Elements, Undo and Redo, the tools; at its
   end find a place, About and Properties' toggle ---- */
.bar { position: absolute; z-index: 9; left: 0; right: 0; top: 0; height: var(--bar-h); display: flex; align-items: center; gap: 2px; padding: 0 6px 1px;
  background: var(--bg2); box-shadow: inset 0 -1px var(--line); } /* its edge drawn inside: the buttons centred in what is seen */
.dock { display: none; } /* a phone's (below) */
/* an icon button of the bar, the dock, the map's controls and a tool's kinds: --tap (32 px, 44 with a finger), a 20 px icon */
:is(.bar, .dock) > button, :is(.mapctl, .kinds) button { width: var(--tap); height: var(--tap); flex: none; padding: 0; border: 0; border-radius: 6px; background: none; display: grid; place-items: center; color: var(--ink); }
:is(.bar, .dock) > button { position: relative; }
:is(:is(.bar, .dock) > button, :is(.mapctl, .kinds) button):not(:disabled):hover { background: var(--hover); }
/* what is pressed, everywhere: the accent, white on it */
:is(.bar, .dock) > button[aria-pressed="true"], :is(.mapctl, .kinds, .touchbar, .seg) button[aria-pressed="true"], button.small[aria-pressed="true"], .vrow .x[aria-pressed="true"], button.done {
  background: var(--accent); border-color: var(--accent); color: #fff; }
.seg button[aria-pressed="true"], button.done { font-weight: 600; }
.bar > :is(.ptoggle, #b-find)[aria-pressed="true"], .bar > #b-find[aria-expanded="true"] { background: var(--sel); color: var(--accent); }
/* the file group: Open (a phone's ☰: the second icon), Download, Copy link */
.bar > .filebtn svg + svg { display: none; }
/* COMPACT (dom.js: a phone, or a finger's buttons under 1,280 px): the file group and About in Open's
   menu, its ☰; the search behind its lens */
@media (max-width: 719px), (pointer: coarse) and (max-width: 1279px) {
  .bar > :is(.dlbtn, .cplbtn, .aboutbtn) { display: none; }
  .bar > .filebtn svg:first-child { display: none; }
  .bar > .filebtn svg + svg { display: block; }
}
/* a tool with kinds (draw/tools.js): a mark in its button's corner */
:is(.bar, .dock) > button.haskinds::after { content: ""; position: absolute; right: 3px; bottom: 3px; border: 2.5px solid transparent; border-right-color: currentColor; border-bottom-color: currentColor; opacity: .55; }
/* dividers between the tools' groups: short, centred */
.tsep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; flex: none; }
.bar > .grow { flex: 1; }
/* a tool's kinds: a row under its button, over the panel while they are picked */
.kinds { position: absolute; display: flex; gap: 2px; padding: 4px; }
.kinds button { width: auto; min-width: var(--tap); padding: 0 4px; } /* a kind's initials take their room */
.kinds .initials { font-size: 12px; font-weight: 600; }
/* a phone: the bar ☰, find a place, Layers, Elements; the dock along the bottom, Undo and the tools (while
   one is on: Back, it, Done), its kinds in a row above it; the panels a bottom sheet over the dock, as
   tall as dragged at its grip, the map's foot above it; Properties, while off, its head alone (a peek) */
@media (max-width: 719px) {
  .pos:not(.shown, .depthchip) { display: none; } /* no cursor position; the time and depth shown stay */
  :root { --sheet: min(var(--sheet-h), calc(100vh - 2 * var(--bar-h) - 160px)); } /* the sheet as tall as dragged, the map's foot and some map left */
  .bar > :is(.tsep, .grow, .urbtn, .pright, .selbtn, .boxbtn), #b-find { display: none; } /* find a place: the bar's field */
  .bar > .search { order: 1; flex: 1 1 auto; min-width: 0; }
  .bar > .ptab { order: 2; }
  .dock { position: absolute; z-index: 9; left: 0; right: 0; bottom: 0; height: var(--bar-h); display: flex; align-items: center; justify-content: space-evenly; gap: 2px; padding: 1px 6px 0;
    background: var(--bg2); box-shadow: inset 0 1px var(--line); }
  .dock > button:not(:has(svg)) { width: auto; padding: 0 12px; } /* Back, Done: words */
  .dock > .kinds { left: 6px; right: 6px; bottom: calc(100% + 4px); overflow-x: auto; } /* one row, sideways */
  .dock > .kinds button { flex: none; }
  .status { bottom: var(--bar-h); }
  .foot { bottom: calc(var(--bar-h) + var(--status-h)); }
  .side, .props { top: auto; bottom: var(--bar-h); left: 0; right: 0; width: auto; height: var(--sheet); border: 0; border-top: 1px solid var(--line); border-radius: 12px 12px 0 0; box-shadow: 0 -4px 16px rgba(20, 30, 40, .14); }
  .props.peek { height: auto; cursor: pointer; }
  .props.peek > :not(.grip, .dinsphead) { display: none; }
  .props.peek > .dinsphead { border-bottom: 0; }
  :is(.side, .props) > .edge { display: none; }
  .grip { display: grid; place-items: center; flex: none; height: 20px; cursor: row-resize; touch-action: none; }
  .grip::after { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--line); }
  body:is(.has-left, .has-right) .foot { bottom: calc(var(--bar-h) + var(--sheet-now, var(--sheet))); }
  body:is(.has-left, .has-right) .legends { display: none; } /* the map left is small: its legends with the panel shut */
}
.dinsphead { flex: none; display: flex; align-items: center; gap: 2px; min-height: 30px; padding: 0 4px 0 6px; border-bottom: 1px solid var(--line); background: #fff; }
.dinsphead .ititle { flex: 1; min-width: 0; padding: 0 6px; font-weight: 600; line-height: 1.2; }
.dinsphead .iacts { display: inline-flex; align-items: center; gap: 0; }
/* the bar's Open and Download menus (a phone's ☰ both): + New, the drawings in this browser, a file; what is downloaded */
.dmenu { position: fixed; z-index: 20; width: min(360px, calc(100vw - 16px)); max-height: 60vh; overflow-y: auto; padding: 4px; }
.drawings .del:hover { color: var(--err); } /* Delete */
.dmenu .dnew { color: var(--accent); }
.drawings .dname:not(:disabled):hover { background: var(--hover); }
.dmenu .dsep { height: 1px; background: var(--line2); margin: 4px 0; }
.dmenu > button[role="menuitem"] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--row); padding: 0 8px; border: 0; border-radius: 6px; background: none; text-align: left; font: inherit; color: var(--ink); }
.dmenu > button[role="menuitem"]:hover { background: var(--hover); }
.dmenu > button[aria-busy="true"] { cursor: progress; color: var(--accent); }
/* a long list's pager: ‹ rows a–b of n › (drawing-ui.md §5) */
.lpager { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 12px; border-bottom: 1px solid var(--line2); }
/* the scale switches the units; the time a chip */
:is(#scale, .pos.shown, .depthchip) { cursor: pointer; }
.depthchip { border: 0; height: auto; } /* a chip as the time's, its list the browser's (its arrow says it opens, as the time's ▾) */
@media (pointer: coarse) { .pos.shown, .depthchip { min-height: var(--tap); display: inline-flex; align-items: center; } } /* a finger's targets: the one way to the calendar and the depth */
.pos.shown::after { content: " ▾"; color: var(--soft); }
/* the time chip is its date field: the field covers the chip unseen, so the browser's calendar hangs from the chip (a browser without a picker: the field itself, .raw) */
.pos.shown { position: relative; }
.pos.shown input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.pos.shown:has(input:not(.raw):focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; } /* the field focused, unseen: the chip shows it */
.pos.shown input.raw { position: static; width: auto; height: auto; opacity: 1; pointer-events: auto; font: inherit; background: none; }
:is(.pos.shown, .depthchip):hover { background: #fff; }

/* ---- offline areas (offline.js): the view saved, the areas saved ---- */
dialog.offline { width: min(560px, calc(100vw - 32px)); max-width: none; } /* the import report's width */
dialog.offline .orow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0; }
dialog.offline .orow label { display: flex; align-items: center; gap: 6px; }
dialog.offline .ostatus { margin: 6px 0; }
dialog.offline .ostatus:empty { margin: 0; } /* nothing to say: no gap (kept, a live region) */
dialog.offline .ostatus.warn { color: var(--warn); } /* a failure */
dialog.offline .drawings { max-height: 40vh; overflow-y: auto; }
/* an area's row: its name over its value, the buttons beside both, at every width */
dialog.offline .drawings li { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 4px; padding: 2px 0; }
dialog.offline .drawings li > button:not(.dname) { grid-row: 1 / 3; }
dialog.offline .drawings .dname { grid-area: 1 / 1; }
dialog.offline .drawings .val { grid-area: 2 / 1; padding: 0 8px; white-space: normal; } /* very narrow: wrapped rather than lose the size */
dialog.offline .drawings + .note { margin-top: 8px; }