/* The map editor (pyrite, the dark theme): the map in 3D over the whole window and dark glass over
   it: a bar on top, the tools on the left, the chosen thing's fields on the right, the keys at the
   bottom. A tablet or a narrow window gets a rail of tool icons and bigger targets, the height at
   the bottom; a phone only looks at the map, with a sheet under it. The queries of the layouts are
   the same as RAIL and PHONE in src/editor/main.ts. */

body.ed {
  /* the glass off the window's edges, the bar's height, the widths of the tools and the panel */
  --ed-pad: 14px;
  --ed-top: 58px;
  --ed-tools: 232px;
  --ed-panel: 300px;
  /* the accent on the dark glass: for an icon, a word, a lit ground and its edge; amber for what is not saved or not quite right */
  --lime: oklch(0.92 0.2 128);
  --lime-ink: oklch(0.94 0.18 128);
  --lime-wash: oklch(0.9 0.21 128 / .16);
  --lime-edge: oklch(0.9 0.21 128 / .7);
  --amber: oklch(0.8 0.15 75);
  --amber-ink: oklch(0.86 0.13 80);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  overflow: hidden;
  background: #0c0f15;
  user-select: none;
  -webkit-user-select: none;
}
.ed-view { position: fixed; inset: 0; }
.ed-view canvas { display: block; touch-action: none; }
.ed-glass {
  background: rgba(12, 14, 22, .66);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--glass-edge);
}
body.ed kbd { font: 700 10px/12px var(--f-mono); }
/* numbers are stepped with the arrow keys, no spin buttons */
body.ed input[type=number] { appearance: textfield; -moz-appearance: textfield; }
body.ed input[type=number]::-webkit-inner-spin-button, body.ed input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* scroll bars as in the game's panels: a thin pill on no track, lit when the list is under the mouse, the accent when held */
body.ed *::-webkit-scrollbar { width: 12px; height: 12px; }
body.ed *::-webkit-scrollbar-track, body.ed *::-webkit-scrollbar-corner { background: transparent; }
body.ed *::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .1); border: 4px solid transparent; border-radius: 999px; background-clip: padding-box; min-height: 40px; }
body.ed *:hover::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .22); }
body.ed *::-webkit-scrollbar-thumb:hover { border-width: 3px; background-color: oklch(0.9 0.21 128 / .7); }
body.ed *::-webkit-scrollbar-thumb:active { border-width: 3px; background-color: var(--accent); }
body.ed *::-webkit-scrollbar-button { display: none; }
/* browsers without those (Firefox) get their own thin one; in Chrome these would switch the pill off */
@supports not selector(::-webkit-scrollbar) {
  body.ed * { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent; }
}

/* ---------- over the map: the marks' pins, the grips of the chosen part, the points of the outline ---------- */

.ed-labels, .ed-grips { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
/* a mark's pin: its name on a pill, a stem down to a dot on the point where it stands */
.ed-labels { --stem: 18px; }
.ed-labels span {
  position: absolute;
  transform: translate(-50%, calc(-100% - var(--stem)));
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--c);
  color: rgb(18, 20, 30);
  font: 800 10.5px/1 var(--f-text);
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.ed-labels span::before { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: var(--stem); margin-left: -1px; background: var(--c); }
.ed-labels span::after { content: ''; position: absolute; left: 50%; top: calc(100% + var(--stem) - 4px); width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--c); }
.ed-labels span.on { box-shadow: 0 0 0 2px rgb(18, 20, 30), 0 0 0 4px var(--accent), 0 4px 14px rgba(0, 0, 0, .35); }
.ed-labels span:is(.blue, .red) { color: #fff; }

/* the colors of the marks: their pins, their buttons on the left, the dot on the panel's head */
:is(.ed-labels span, .ed-mark, .ed-dot) { --c: #fff; }
:is(.ed-labels span, .ed-mark, .ed-dot).spawn { --c: #cbd5e1; }
:is(.ed-labels span, .ed-mark, .ed-dot):is(.base, .flag) { --c: var(--blue); }
:is(.ed-labels span, .ed-mark, .ed-dot).hill { --c: var(--accent); }
:is(.ed-labels span, .ed-mark, .ed-dot).pit { --c: oklch(0.7 0.17 50); }
:is(.ed-labels span, .ed-mark, .ed-dot).pad { --c: #7dd3fc; }
:is(.ed-labels span, .ed-mark, .ed-dot).perch { --c: #e879f9; }
:is(.ed-labels span, .ed-dot).blue, .ed-marks.blue .spawn { --c: var(--blue); }
:is(.ed-labels span, .ed-dot).red, .ed-marks.red :is(.spawn, .base, .flag) { --c: var(--red); }

/* the grips of the chosen part: knobs on its corners and sides, lit under the mouse, and a tag with its height on a stalk */
.ed-grips > i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgba(0, 0, 0, .45); transition: transform .08s, background .08s; }
.ed-grips > i.side { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.ed-grips > i.hot { background: var(--accent); transform: scale(1.3); }
.ed-grips > i.up {
  width: auto;
  height: 24px;
  margin: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: 800 11px/1 var(--f-mono);
  font-style: normal;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.ed-grips > i.up.hot { transform: translate(-50%, -50%); box-shadow: 0 0 0 2px rgb(18, 20, 30), 0 0 0 4px var(--accent), 0 4px 14px rgba(0, 0, 0, .35); }
.ed-grips > i.up svg { display: block; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ed-grips > b { position: absolute; width: 2px; margin-left: -1px; background: var(--accent); }
/* the points of the map's outline with its tool: round, the chosen one in the accent; those of a ring being drawn white */
.ed-grips .coast i { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid #e8eef8; border-radius: 50%; background: #12161f; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); transition: transform .08s, background .08s; }
.ed-grips .coast i.sel { border-color: var(--accent); background: var(--accent); }
.ed-grips .coast i.hot { transform: scale(1.4); }
.ed-grips .coast i.draw { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #fff; }
.ed-grips .coast i.draw.hot { border-color: var(--accent); background: var(--accent); transform: scale(1.6); }

/* ---------- the bar on top ---------- */

.ed-top {
  position: fixed;
  top: var(--ed-pad);
  left: var(--ed-pad);
  right: var(--ed-pad);
  z-index: 3;
  height: var(--ed-top);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.ed-top .grow { flex: 1; min-width: 0; }
.ed-home { flex: none; display: block; border-radius: 12px; }
.ed-home .mark { width: 38px; height: 38px; border-radius: 12px; background: rgba(255, 255, 255, .1); }
.ed-home:focus-visible { outline: none; box-shadow: var(--ring); }
/* the map's name, written right in its pill: it gives way only when the status has given all it can */
.ed-name { flex: 0 .1 auto; min-width: 72px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 12px; background: var(--wash); cursor: text; transition: box-shadow .15s; }
.ed-name input { flex: 0 1 auto; field-sizing: content; min-width: 0; max-width: 220px; height: 100%; padding: 0; border: 0; background: transparent; font: 700 14px/1 var(--f-text); color: var(--ink); outline: none; text-overflow: ellipsis; }
.ed-name .ic { width: 13px; height: 13px; color: var(--muted); }
.ed-name:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ed-sep { flex: none; width: 1px; height: 24px; margin: 0 2px; background: var(--line); }
/* the bar's own buttons: a rounded square each, lit when on */
.ed-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: var(--wash);
  color: var(--ink);
  font: 600 13px/1 var(--f-text);
  cursor: pointer;
  transition: background .15s, box-shadow .15s, opacity .15s;
}
.ed-chip:hover { background-color: var(--wash-2); }
.ed-chip:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent-edge), var(--ring); }
.ed-chip:disabled { opacity: .4; cursor: default; background-color: var(--wash); }
.ed-chip.sq { width: 38px; padding: 0; }
.ed-chip.sq .ic { width: 16px; height: 16px; }
.ed-chip.on { background-color: var(--lime-wash); box-shadow: inset 0 0 0 1.5px oklch(0.9 0.21 128 / .6); }
.ed-chip kbd { padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, .12); }
#top { padding-right: 8px; }
#check.on { background-color: rgba(255, 255, 255, .12); box-shadow: none; }
select.ed-chip { appearance: none; -webkit-appearance: none; padding: 0 30px 0 14px; outline: none; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 12px center; }
select.ed-chip option { background: #1b1e27; color: #fff; }
/* the mirror's list shows only its name when closed: no wider than that */
#mirror { width: 104px; }
/* the height new parts are built at */
.ed-height { flex: none; display: flex; align-items: center; gap: 2px; height: 38px; padding: 0 4px 0 12px; border-radius: 12px; background: var(--wash); }
.ed-height .cap { margin-right: 6px; font: 400 10px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ed-height button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .15s; }
.ed-height button:hover { background: var(--wash-2); }
.ed-height button:focus-visible, .ed-teams button:focus-visible, .ed-close:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent-edge), var(--ring); }
.ed-height button .ic { width: 14px; height: 14px; }
.ed-height b { min-width: 40px; text-align: center; font: 700 14px/1 var(--f-display); color: var(--lime); }
/* what the map is, a dot telling saved, not saved or wrong; shrinks to an ellipsis, all of it on hover */
.ed-status { flex: 0 1 auto; min-width: 110px; max-width: 380px; position: relative; padding-left: 15px; font: 600 12px/16px var(--f-text); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-status:empty { display: none; }
.ed-status::before { content: ''; position: absolute; left: 3px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--faint); }
.ed-status.saved::before { background: var(--accent); }
.ed-status:is(.dirty, .warn)::before { background: var(--amber); box-shadow: 0 0 0 3px oklch(0.8 0.15 75 / .25); }
.ed-status.warn { color: var(--amber-ink); }
.ed-status.bad { color: var(--danger-ink); }
.ed-status.bad::before { background: oklch(0.65 0.22 25); box-shadow: 0 0 0 3px oklch(0.65 0.22 25 / .3); }
.ed-pub { flex: none; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 12px; font: 600 13px/1 var(--f-text); color: var(--ink-2); cursor: pointer; }
.ed-pub.off { cursor: default; }
.ed-pub.off span { opacity: .45; }
.ed-top .btn { flex: none; height: 38px; padding: 0 16px; font-size: 13px; }
.ed-top .btn .ic { width: 11px; height: 11px; }
#play { padding: 0 18px; font-weight: 800; box-shadow: 0 0 22px oklch(0.9 0.21 128 / .4); }
#leave { padding: 0 14px; font-weight: 600; color: var(--ink-2); }
#leave:hover { color: var(--ink); }
#leave .ic { display: none; }

/* ---------- the tools on the left ---------- */

.ed-tools {
  position: fixed;
  top: calc(var(--ed-pad) * 2 + var(--ed-top));
  left: var(--ed-pad);
  bottom: var(--ed-pad);
  width: var(--ed-tools);
  z-index: 2;
  padding: 12px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow-x: hidden;
  overflow-y: auto;
}
body.ed :is(.ed-tools, .ed-fly, .ed-pane) .kicker { margin: 6px 2px 0; font-size: 10px; }
.ed-sec { display: flex; flex-direction: column; gap: 7px; }
.ed-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 2px 0; }
body.ed .ed-label .kicker { margin: 0; }
.ed-label span { font: 600 12px/1 var(--f-text); }
/* a tool: its icon, its name, its key; lit while in hand */
.ed-tool, .ed-tile, .ed-mark {
  border: 0;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  min-width: 0;
  transition: background .15s, box-shadow .15s;
}
:is(.ed-tool, .ed-tile, .ed-mark):hover { background: var(--wash-2); }
:is(.ed-tool, .ed-tile, .ed-mark).on { background: var(--lime-wash); box-shadow: inset 0 0 0 1.5px var(--lime-edge); color: var(--lime-ink); }
:is(.ed-tool, .ed-tile, .ed-mark):focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent-edge), var(--ring); }
:is(.ed-tool, .ed-tile) .ic { color: rgba(255, 255, 255, .75); }
:is(.ed-tool, .ed-tile).on .ic { color: var(--lime); }
.ed-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ed-pair .ed-tool { gap: 7px; padding: 0 7px 0 9px; }
.ed-tool { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px 0 10px; border-radius: 12px; font: 600 13px/1 var(--f-text); }
.ed-tool .ic { width: 16px; height: 16px; }
.ed-tool span { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.ed-tool kbd { flex: none; color: rgba(255, 255, 255, .45); }
.ed-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ed-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; height: 56px; padding: 0 9px; border-radius: 13px; font: 600 12px/14px var(--f-text); text-align: left; }
.ed-tile .ic { width: 18px; height: 18px; }
.ed-tile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-tile kbd { position: absolute; right: 7px; top: 7px; font-size: 9.5px; line-height: 1; color: rgba(255, 255, 255, .45); }
/* the materials: a swatch each, the one in hand ringed */
.ed-mats { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.ed-mats button { height: 22px; padding: 0; border: 0; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); cursor: pointer; transition: box-shadow .15s; }
.ed-mats button:hover:not(.on) { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6); }
.ed-mats button.on { box-shadow: 0 0 0 2px rgb(18, 20, 30), 0 0 0 4px var(--accent); }
.ed-mats button:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(18, 20, 30), 0 0 0 4px #fff; }
/* the thing to put: the list, and the tool that puts it */
.ed-put { display: flex; gap: 5px; }
.ed-put .ed-in { flex: 1; height: 34px; font-size: 12px; }
.ed-put .ed-tool { flex: none; height: 34px; gap: 6px; padding: 0 9px; border-radius: 11px; font-size: 12px; }
.ed-put .ed-tool .ic { display: none; }
/* the marks: the team they are put for, and a button each with the dot of its pin */
.ed-teams { display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: rgba(255, 255, 255, .05); }
.ed-teams button { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); font: 600 12px/1 var(--f-text); cursor: pointer; transition: background .15s, color .15s; }
.ed-teams button:hover:not(.on) { color: var(--ink); }
.ed-teams button.on { background: rgba(255, 255, 255, .14); color: #fff; }
.ed-teams i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; }
.ed-teams [data-team="0"] i { background: var(--blue); }
.ed-teams [data-team="1"] i { background: var(--red); }
.ed-marks { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ed-mark { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 8px; border-radius: 10px; font: 600 12px/1 var(--f-text); text-align: left; }
.ed-mark span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-mark i, .ed-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.ed-mark:is(.flag, .hill) i, .ed-dot:is(.flag, .hill) { border-radius: 2px; }
.ed-mark.pad i, .ed-dot.pad { border-radius: 3px; }

/* ---------- the fields of what is chosen, on the right ---------- */

.ed-panel {
  position: fixed;
  top: calc(var(--ed-pad) * 2 + var(--ed-top));
  right: var(--ed-pad);
  bottom: var(--ed-pad);
  width: var(--ed-panel);
  z-index: 2;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ed-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 16px; overflow-x: hidden; overflow-y: auto; }
/* its head: what it is, lit for what is chosen */
.ed-head { flex: none; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.ed-badge { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--wash); color: var(--ink-2); }
.ed-badge.lit { background: var(--lime-wash); box-shadow: inset 0 0 0 1px oklch(0.9 0.21 128 / .55); color: var(--lime); }
.ed-badge .ic { width: 18px; height: 18px; }
.ed-badge .ed-dot { width: 12px; height: 12px; }
.ed-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ed-head > div > b { font: 700 16px/1.2 var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-head > div > span { font: 400 11px/1.3 var(--f-mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* numbers on cards, the name over each */
.ed-cells { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; }
.ed-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 7px 10px; border-radius: 12px; background: var(--wash); cursor: text; transition: box-shadow .15s; }
.ed-cell > span { font: 400 10.5px/13px var(--f-text); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-cell:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent); }
/* a number only told, not set */
.ed-cell > b { font: 700 14px/18px var(--f-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-cell:has(> b) { cursor: default; }
body.ed .ed-cell .ed-in { height: 18px; padding: 0; border-radius: 0; background-color: transparent; box-shadow: none; font: 700 14px/18px var(--f-mono); }
body.ed .ed-cell select.ed-in { padding-right: 14px; background-position: right 0 center; font-family: var(--f-mono); cursor: pointer; }
/* a field with its name on the left; a wide one (JSON) with its name over it */
.ed-row { flex: none; display: grid; grid-template-columns: 86px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 34px; font: 400 13px/1.3 var(--f-text); }
.ed-row > span { color: var(--ink-3); }
.ed-row.wide { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.ed-row .switch { justify-self: start; width: 38px; height: 22px; }
.ed-row .switch::before { left: 2px; top: 2px; width: 18px; height: 18px; }
.ed-row .switch:checked::before { transform: translateX(16px); }
.ed-in {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 11px;
  background-color: var(--wash);
  color: var(--ink);
  font: 600 13px/1 var(--f-text);
  outline: none;
  transition: box-shadow .15s, opacity .15s;
}
.ed-in:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ed-in:disabled { opacity: .45; }
.ed-in::placeholder { color: var(--faint); font-weight: 600; }
.ed-in.num { font: 700 13px/1 var(--f-mono); }
select.ed-in { appearance: none; -webkit-appearance: none; padding-right: 28px; cursor: pointer; text-overflow: ellipsis; background-image: var(--chevron); background-repeat: no-repeat; background-position: right 11px center; }
select.ed-in option { background: #1b1e27; color: #fff; }
textarea.ed-in { field-sizing: content; height: auto; min-height: 34px; max-height: 180px; padding: 8px 10px; font: 500 11px/1.45 var(--f-mono); resize: none; user-select: text; -webkit-user-select: text; }
/* a choice of materials with the swatch of the one chosen */
.ed-sw { position: relative; display: block; min-width: 0; }
.ed-sw i { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); pointer-events: none; }
.ed-sw i:not([hidden]) + select { padding-left: 34px; }
/* a color: its swatch round, its value beside it */
.ed-color { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 11px; background: var(--wash); font: 600 12px/1 var(--f-mono); cursor: pointer; transition: box-shadow .15s; }
.ed-color input { flex: none; appearance: none; -webkit-appearance: none; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .2); cursor: pointer; overflow: hidden; }
.ed-color input::-webkit-color-swatch-wrapper { padding: 0; }
.ed-color input::-webkit-color-swatch { border: 0; border-radius: 50%; }
.ed-color input::-moz-color-swatch { border: 0; border-radius: 50%; }
.ed-color:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent); }
.ed-strength { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ed-strength .ed-in { flex: none; width: 84px; }
.ed-strength small { min-width: 0; font: 400 11.5px/1.25 var(--f-text); color: var(--muted); }
/* what the outline tool has in hand, with its own buttons */
.ed-group { flex: none; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.ed-group > b { font: 700 13px/1.3 var(--f-text); }
.ed-group .ed-row { grid-template-columns: 74px minmax(0, 1fr); }
.ed-group .ed-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
/* the keys, as key caps */
.ed-keylist { flex: none; display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: 7px 10px; font: 400 12px/1.35 var(--f-text); color: var(--ink-3); }
.ed-keylist > span:nth-child(odd) { display: flex; gap: 4px; }
.ed-keylist kbd { padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, .1); color: var(--ink-2); white-space: nowrap; }
/* the panel's buttons, kept at its foot: the name, the key under it, red when it destroys */
.ed-acts { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.ed-acts:empty { display: none; }
.ed-acts.foot { padding: 4px 16px 16px; }
.ed-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 48px; padding: 8px 6px; border: 0; border-radius: 13px; background: rgba(255, 255, 255, .07); color: var(--ink); font: 600 12px/1.2 var(--f-text); text-align: center; cursor: pointer; transition: background .15s; }
.ed-act:hover { background: rgba(255, 255, 255, .12); }
.ed-act:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent-edge), var(--ring); }
.ed-act kbd { font-size: 9.5px; line-height: 1; color: rgba(255, 255, 255, .45); }
.ed-act.bad { background: transparent; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .45); color: var(--danger-ink); }
.ed-act.bad:hover { background: var(--danger-soft); }
.ed-act.bad kbd { color: rgba(255, 155, 155, .6); }
/* the check's report: counted, each problem taking the view to it, then the modes */
.ed-report { flex: none; display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.ed-rhead { display: flex; align-items: center; gap: 6px; }
.ed-rhead b { flex: 1; min-width: 0; font: 700 16px/1.2 var(--f-display); }
.ed-counts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.ed-count { flex: none; display: flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font: 700 11px/1 var(--f-text); }
.ed-count.bad { background: oklch(0.65 0.22 25 / .2); color: #ffb0b0; }
.ed-count.warn { background: oklch(0.8 0.15 75 / .18); color: var(--amber-ink); }
.ed-count.ok { background: var(--lime-wash); color: var(--lime); }
.ed-close { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 8px; display: grid; place-items: center; background: transparent; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.ed-close:hover { background: var(--wash); color: var(--ink); }
.ed-close .ic { width: 14px; height: 14px; }
.ed-issue { display: flex; gap: 10px; padding: 11px 12px; border-radius: 14px; background: rgba(255, 255, 255, .05); transition: background .15s; }
.ed-issue.go { cursor: pointer; }
.ed-issue.go:hover { background: rgba(255, 255, 255, .09); }
.ed-issue > i { flex: none; width: 8px; height: 8px; margin-top: 5.5px; border-radius: 50%; background: var(--muted); }
.ed-issue.error { background: oklch(0.65 0.22 25 / .14); box-shadow: inset 0 0 0 1px oklch(0.65 0.22 25 / .45); }
.ed-issue.error.go:hover { background: oklch(0.65 0.22 25 / .22); }
.ed-issue.error > i { background: oklch(0.65 0.22 25); }
.ed-issue.warning > i { background: var(--amber); }
.ed-issue > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ed-issue b { font: 600 13px/1.4 var(--f-text); overflow-wrap: anywhere; }
.ed-issue small { font: 400 11.5px/1.4 var(--f-text); color: var(--muted); overflow-wrap: anywhere; }
body.ed .ed-report .kicker { margin-top: 8px; }
.ed-mode { display: grid; grid-template-columns: 18px 104px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 30px; font: 400 12.5px/1.3 var(--f-text); }
.ed-mode > i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 900 11px/1 var(--f-text); font-style: normal; }
.ed-mode > i .ic { width: 11px; height: 11px; }
.ed-mode.ok > i { background: oklch(0.9 0.21 128 / .2); color: var(--lime); }
.ed-mode.auto > i { background: rgba(255, 255, 255, .12); color: #fff; }
.ed-mode.no > i { background: oklch(0.8 0.15 75 / .22); color: var(--amber-ink); }
.ed-mode b { font-weight: 600; }
.ed-mode span { color: rgba(255, 255, 255, .6); }

/* ---------- the keys at the bottom ---------- */

.ed-hints {
  position: fixed;
  left: calc(var(--ed-pad) + var(--ed-tools) + 12px);
  right: calc(var(--ed-pad) + var(--ed-panel) + 12px);
  bottom: var(--ed-pad);
  z-index: 2;
  width: fit-content;
  max-width: calc(100vw - var(--ed-tools) - var(--ed-panel) - var(--ed-pad) * 2 - 24px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(12, 14, 22, .6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .1);
  overflow: hidden;
}
.ed-keys { display: flex; align-items: center; gap: 14px; font: 400 12px/1 var(--f-text); color: var(--ink-2); white-space: nowrap; }
.ed-keys > span { display: flex; align-items: center; gap: 6px; }
.ed-keys kbd { padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------- the dialogs: dark glass ---------- */

body.ed dialog.modal { background: rgba(12, 14, 22, .8); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--glass-edge); border-radius: 28px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); color: var(--ink); }
body.ed dialog.modal::backdrop { background: rgba(8, 10, 16, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body.ed .modal .mfoot { background: transparent; border-top-color: var(--line-2); }
/* asked on the way out with work not saved */
body.ed dialog.ask { width: min(560px, calc(100vw - 32px)); }
.ed-ask { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.ed-ask .glyph { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: oklch(0.8 0.15 75 / .2); color: var(--amber-ink); font: 900 20px/1 var(--f-display); }
.ed-ask h2 { font: 800 24px/1.2 var(--f-display); }
.ed-ask p:not(.bad-note) { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
body.ed .bad-note { margin: 0; }
.ed-ask .acts { display: flex; gap: 8px; margin-top: 6px; }
.ed-ask .btn { height: 46px; padding: 0 18px; font-size: 14px; }
.ed-ask .btn.drop { background: transparent; box-shadow: none; color: var(--danger-ink); font-weight: 600; }
.ed-ask .btn.drop:hover { background: var(--danger-soft); }
.ed-ask .btn.pri { flex: 1; font-weight: 800; }
/* a new map: its shape (a picture each) and its size */
body.ed dialog.ed-new { width: min(600px, calc(100vw - 32px)); }
.ed-new form { display: flex; flex-direction: column; min-height: 0; }
.ed-new .mbody { display: flex; flex-direction: column; gap: 10px; }
.ed-shapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.ed-shapes button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 11px; border: 0; border-radius: 16px; background: var(--wash); color: var(--ink-2); font: 600 13px/1.2 var(--f-text); cursor: pointer; transition: background .15s, box-shadow .15s, color .15s; }
.ed-shapes button:hover:not(.on) { background: var(--wash-2); color: var(--ink); }
.ed-shapes button.on { background: var(--lime-wash); box-shadow: inset 0 0 0 1.5px var(--lime-edge); color: var(--lime-ink); }
.ed-shapes button:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent-edge), var(--ring); }
.ed-shapes svg { display: block; width: 80px; height: 60px; }
.ed-shapes path { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .7); stroke-width: 1.875; stroke-linejoin: round; }
.ed-shapes button.on path { fill: oklch(0.9 0.21 128 / .28); stroke: var(--accent); }
.ed-shapes path.own { fill: none; stroke-dasharray: 5.625 4.375; }
.ed-new-size { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ed-new .field:disabled { opacity: .45; }

/* ---------- a phone: the map only looked at, a sheet under it ---------- */

.ed-sheet {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  flex-direction: column;
  gap: 12px;
  padding: 10px 20px max(24px, calc(10px + env(safe-area-inset-bottom)));
  border-radius: 30px 30px 0 0;
  background: rgba(14, 16, 24, .92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.ed-sheet .grab { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.ed-sheet .kicker { font-size: 10.5px; }
.ed-sheet h2 { margin-top: -4px; font: 700 22px/1.2 var(--f-display); overflow-wrap: anywhere; }
.ed-sheet p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .72); text-wrap: pretty; }
.ed-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ed-facts div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 14px; background: var(--wash); }
.ed-facts span { font-size: 11px; line-height: 1.3; color: var(--muted); }
.ed-facts b { font-size: 14px; line-height: 1.3; }
.ed-sheet .btn.pri { height: 52px; font-weight: 800; }
.ed-sheet .btn.sec { height: 48px; font-size: 14px; font-weight: 600; }
.ed-sheet .btn.sec span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- a window narrower or lower than the design's ---------- */

/* the bar: the height and the top view without their captions (both say them on hover), no pencil
   and no separators, the buttons closer; at the bottom the last key left out */
@media (max-width: 1360px) and (min-width: 1181px) and (pointer: fine) {
  .ed-height .cap, #top kbd, .ed-name .ic, .ed-top .ed-sep { display: none; }
  .ed-height { padding-left: 4px; }
  .ed-chip { padding: 0 12px; }
  select.ed-chip { padding-right: 28px; background-position: right 11px center; }
  .ed-pub { padding: 0 8px; }
  .ed-keys > span:nth-child(n+6) { display: none; }
}
/* the tools on a lower window: flatter tiles, closer rows */
@media (max-height: 890px) and (min-width: 1181px) and (pointer: fine) {
  .ed-tools, .ed-sec { gap: 5px; }
  body.ed .ed-tools .kicker, .ed-label { margin-top: 4px; }
  .ed-tile { height: 42px; gap: 3px; border-radius: 12px; }
  .ed-tile .ic { width: 16px; height: 16px; }
  .ed-tile kbd { top: 6px; }
  .ed-teams button { height: 26px; }
}
@media (max-height: 780px) and (min-width: 1181px) and (pointer: fine) {
  .ed-tile { height: 38px; }
  .ed-tile kbd { top: 5px; }
  .ed-mark { height: 30px; }
}

/* ---------- a tablet, or a window too narrow for both panels: a rail of tool icons, bigger targets ---------- */

@media (max-width: 1180px), (pointer: coarse) {
  body.ed { --ed-pad: 12px; --ed-top: 64px; --ed-tools: 72px; }
  .ed-top { gap: 8px; border-radius: 22px; }
  .ed-home .mark { width: 44px; height: 44px; border-radius: 14px; }
  /* the map's name keeps its room (up to 160 px); the status gives way down to its dot */
  .ed-name { flex: 0 0 auto; height: 44px; border-radius: 13px; }
  .ed-name input { max-width: 160px; }
  .ed-name .ic, .ed-top .ed-sep, #top kbd { display: none; }
  .ed-chip { height: 44px; padding: 0 16px; border-radius: 999px; font-size: 13.5px; }
  .ed-chip.sq { width: 48px; height: 48px; border-radius: 14px; background-color: rgba(255, 255, 255, .05); }
  .ed-chip.sq .ic { width: 20px; height: 20px; }
  #top { padding-right: 16px; }
  select.ed-chip { padding: 0 32px 0 16px; background-position: right 14px center; }
  .ed-status { min-width: 24px; font-size: 12.5px; }
  .ed-pub { height: 44px; padding: 0 4px 0 8px; }
  .ed-top .btn { height: 44px; padding: 0 16px; font-size: 13.5px; }
  #play { padding: 0 18px; }
  #leave { width: 48px; height: 48px; padding: 0; border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: none; color: var(--ink); }
  #leave .ic { display: block; width: 20px; height: 20px; }
  #leave span { display: none; }
  /* the rail: the tools as icons, the sections a button each, the material at the foot */
  .ed-tools { padding: 10px 0; align-items: center; gap: 6px; }
  body.ed .ed-tools > .kicker { display: none; }
  .ed-pair, .ed-parts { display: contents; }
  .ed-tools :is(.ed-tool, .ed-tile) { flex: none; width: 48px; height: 48px; padding: 0; border-radius: 14px; display: grid; place-items: center; }
  .ed-tools :is(.ed-tool, .ed-tile) :is(span, kbd) { display: none; }
  .ed-tools :is(.ed-tool, .ed-tile) .ic { width: 20px; height: 20px; color: rgba(255, 255, 255, .85); }
  .ed-tools :is(.ed-tool, .ed-tile).on .ic { color: var(--accent); }
  .ed-tools .ed-tile.open:not(.on) { background: var(--wash-2); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
  .ed-tools .ed-tile.swatch { margin-top: auto; box-shadow: 0 0 0 2px rgb(18, 20, 30), 0 0 0 4px var(--accent); }
  .ed-tools .ed-tile.swatch.open { box-shadow: 0 0 0 2px rgb(18, 20, 30), 0 0 0 4px #fff; }
  /* fourteen buttons on the rail: smaller on a lower screen, and it scrolls when even those don't fit */
  @media (max-height: 940px) {
    .ed-tools { gap: 5px; }
    .ed-tools :is(.ed-tool, .ed-tile) { width: 44px; height: 44px; border-radius: 13px; }
  }
  @media (max-height: 800px) {
    .ed-tools { gap: 4px; }
    .ed-tools :is(.ed-tool, .ed-tile) { width: 42px; height: 42px; border-radius: 12px; }
  }
  /* a section open beside the rail, with targets for a finger */
  .ed-fly { position: fixed; left: calc(var(--ed-pad) + var(--ed-tools) + 8px); z-index: 4; width: 252px; padding: 14px; border-radius: 22px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
  .ed-fly .ed-sec { gap: 10px; }
  body.ed .ed-fly .kicker, body.ed .ed-fly .ed-label { margin: 0 2px; }
  .ed-fly .ed-mats { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .ed-fly .ed-mats button { height: 36px; border-radius: 10px; }
  .ed-fly .ed-put .ed-in, .ed-fly .ed-put .ed-tool { height: 44px; border-radius: 13px; }
  .ed-fly .ed-teams button { height: 38px; }
  .ed-fly .ed-mark { height: 44px; padding: 0 10px; border-radius: 12px; font-size: 13px; }
  /* the panel: bigger fields, the buttons without their keys */
  .ed-pane { gap: 6px; }
  .ed-head > div > b { font-size: 17px; }
  .ed-cell { padding: 8px 10px; }
  body.ed .ed-cell .ed-in { height: 20px; font-size: 15px; line-height: 20px; }
  .ed-row { grid-template-columns: 100px minmax(0, 1fr); min-height: 44px; }
  .ed-in, .ed-color { height: 40px; border-radius: 12px; }
  .ed-row .switch { width: 48px; height: 30px; }
  .ed-row .switch::before { left: 3px; top: 3px; width: 24px; height: 24px; }
  .ed-row .switch:checked::before { transform: translateX(18px); }
  .ed-act { min-height: 48px; border-radius: 14px; font-size: 13px; }
  /* the bottom: the height and what fingers do */
  .ed-hints { bottom: 16px; height: auto; padding: 6px; border-radius: 22px; background: rgba(12, 14, 22, .7); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-color: var(--glass-edge); }
  .ed-hints .ed-height { height: 48px; padding: 0 4px 0 14px; border-radius: 16px; background: rgba(255, 255, 255, .06); }
  .ed-hints .ed-height button { width: 40px; height: 40px; border-radius: 12px; }
  .ed-hints .ed-height button .ic { width: 16px; height: 16px; }
  .ed-hints .ed-height b { min-width: 34px; }
  .ed-keys { gap: 8px; }
  .ed-keys > span:not(.ed-hint) { padding: 0 8px; }
  .ed-keys > span:not(.ed-hint):nth-child(n+4) { display: none; }
  .ed-hint { height: 48px; padding: 0 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); font: 600 13px/1 var(--f-text); color: #fff; }
}
/* fingers: no keys to tell */
@media (pointer: coarse) {
  .ed-act kbd, .ed-fly kbd, .ed-keylist { display: none; }
  /* knobs a finger can see under it */
  .ed-grips > :is(i.corner, i.side) { width: 18px; height: 18px; margin: -9px 0 0 -9px; box-shadow: 0 0 0 3px var(--accent), 0 2px 8px rgba(0, 0, 0, .4); }
  .ed-grips .coast i { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
  body.ed .ed-pane > .kicker:has(+ .ed-keylist) { display: none; }
}
@media (max-width: 1100px) and (min-width: 700px) {
  .ed-status { min-width: 24px; }
  .ed-pub span { display: none; }
  .ed-keys > span:first-child { display: none; }
}
@media (max-width: 920px) and (min-width: 700px) {
  body.ed { --ed-panel: 268px; }
  /* the bar scrolls sideways when even this is too wide for it */
  .ed-top { gap: 5px; padding: 0 8px; overflow-x: auto; scrollbar-width: none; }
  .ed-top::-webkit-scrollbar { display: none; }
  .ed-name { padding: 0 12px; }
  .ed-name input { max-width: 110px; }
  .ed-chip { padding: 0 10px; }
  .ed-chip.sq, #leave { width: 44px; height: 44px; }
  #top { padding-right: 10px; }
  #mirror { width: 96px; }
  select.ed-chip { padding: 0 26px 0 11px; background-position: right 10px center; }
  .ed-pub { padding: 0 2px; }
  .ed-top .btn { padding: 0 12px; }
  .ed-top #play .ic, .ed-status, .ed-keys { display: none; }
}

/* ---------- a phone ---------- */

@media (max-width: 699px) {
  .ed-tools, .ed-fly, .ed-panel, .ed-hints, .ed-grips { display: none !important; }
  /* the whole map on a small screen: smaller pins */
  .ed-labels { --stem: 10px; }
  .ed-labels span { height: 17px; padding: 0 6px; font-size: 8.5px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
  .ed-labels span::after { width: 6px; height: 6px; margin-left: -3px; top: calc(100% + var(--stem) - 3px); }
  .ed-top > :not(.ed-home, .ed-name, #leave) { display: none; }
  .ed-top { top: 14px; height: 56px; gap: 10px; padding: 0 8px; border-radius: 999px; }
  .ed-home .mark { width: 40px; height: 40px; border-radius: 12px; }
  .ed-name { flex: 1; height: 40px; padding: 0; background: none; cursor: default; }
  .ed-name:focus-within { box-shadow: none; }
  .ed-name input { field-sizing: fixed; width: 100%; max-width: none; font-size: 15px; pointer-events: none; }
  #leave { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
  #leave .ic { width: 15px; height: 15px; }
  .ed-sheet { display: flex; }
}
@media (max-width: 560px) {
  body.ed dialog.modal { width: 100vw; background: rgba(14, 16, 24, .96); border: 0; border-top: 1px solid var(--glass-edge); border-radius: 30px 30px 0 0; }
  body.ed dialog.modal::before { background: rgba(255, 255, 255, .2); }
  .ed-ask { padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); }
  .ed-ask .acts { flex-direction: column-reverse; }
  .ed-ask .btn { height: 52px; }
  .ed-ask .btn.pri { flex: none; }
}