/* One small stylesheet, no build step and no external requests — the page has to
   work from a fresh container with nothing but the bot's own dependencies. */

:root {
  --bg: #0f1216;
  --panel: #171b21;
  --panel-2: #1e242c;
  --line: #2a323c;
  --text: #e6eaf0;
  --muted: #9aa6b5;
  --accent: #5865f2;
  --accent-2: #4451d6;
  --ok: #3ba55d;
  --warn: #d9a441;
  --err: #e05260;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f7fa;
    --panel: #ffffff;
    --panel-2: #eef1f6;
    --line: #d8dee7;
    --text: #1b2027;
    --muted: #5d6874;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

a { color: inherit; }

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}

/* -- top bar ------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* Logos are square-ish but not guaranteed to be — contain keeps any aspect
   ratio intact instead of squashing it into the box. */
.brandlogo, .herologo { object-fit: contain; }
.brandlogo { width: 32px; height: 32px; }
.herologo { width: 96px; height: 96px; margin-bottom: 10px; }

.user { display: flex; align-items: center; gap: 10px; }
.avatar { border-radius: 50%; }
.user .name { color: var(--muted); }

.foot {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 32px;
  color: var(--muted);
  font-size: 13px;
}

/* -- type ---------------------------------------------------------------- */

h1 { font-size: 26px; margin: 0 0 6px; }
h2 { font-size: 18px; margin: 32px 0 12px; }
h3 { font-size: 15px; margin: 0 0 8px; }

.muted, .hint, .fineprint { color: var(--muted); }
.hint, .fineprint { font-size: 13px; }
.lead { font-size: 18px; color: var(--muted); max-width: 60ch; }
.crumbs { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.description { white-space: pre-wrap; }
.empty { color: var(--muted); padding: 18px 0; }

.pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.hero { padding: 48px 0; }
.hero .button { margin-top: 12px; }

/* -- buttons ------------------------------------------------------------- */

.button {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}

.button:hover { border-color: var(--muted); }
.button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.button.primary:hover { background: var(--accent-2); }
.button.danger { border-color: var(--err); color: var(--err); background: transparent; }
.button.danger:hover { background: rgba(224, 82, 96, 0.12); }
.button.big { padding: 12px 22px; font-size: 17px; }

.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.managebar { display: flex; gap: 10px; flex-wrap: wrap; }
.inlineform { margin-top: 40px; }

/* -- flashes ------------------------------------------------------------- */

.flash {
  padding: 11px 14px;
  border-radius: 8px;
  border-left: 3px solid var(--ok);
  background: var(--panel);
  margin-bottom: 18px;
}

.flash.warn { border-left-color: var(--warn); }
.flash.err { border-left-color: var(--err); }

/* -- cards / lists ------------------------------------------------------- */

.cards, .eventlist, .people { list-style: none; margin: 0; padding: 0; }
.cards { display: grid; gap: 12px; }

.card, .event {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.cardlink {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-decoration: none;
}

.cardbody { display: flex; flex-direction: column; }
.guildicon { border-radius: 12px; }

.guildicon.placeholder {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  font-weight: 700;
}

.eventlist { display: grid; gap: 10px; }

.event {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  flex-wrap: wrap;
}

.eventmain {
  display: grid;
  gap: 2px;
  text-decoration: none;
  flex: 1 1 320px;
  min-width: 0;
}

.eventmain .title { font-size: 17px; font-weight: 600; }
.eventmain .when { display: flex; gap: 10px; font-size: 13px; }
.eventmain .meta { color: var(--muted); font-size: 13px; }
.eventlist.quiet .event { opacity: 0.72; }

.counts { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 13px;
}

.status {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.status.scheduled { color: var(--ok); border-color: var(--ok); }
.status.cancelled { color: var(--err); border-color: var(--err); }
.status.completed { color: var(--muted); }

/* -- tabs ---------------------------------------------------------------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 18px 0 8px;
  border-bottom: 1px solid var(--line);
}

.tab {
  padding: 8px 14px;
  text-decoration: none;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  /* Past five tabs a flex row starts breaking the labels themselves instead of
     wrapping; this makes the row wrap and keeps each label on one line. */
  white-space: nowrap;
}

.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

/* The second row, for the pages inside one group. Quieter than the row above
   it — it is a sibling list, not another set of destinations to weigh up. */
.subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 16px;
}
.subtab {
  padding: 5px 11px;
  font-size: 13px;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 999px;
  white-space: nowrap;
}
.subtab:hover { border-color: var(--line); }
.subtab.active {
  color: var(--text);
  font-weight: 600;
  border-color: var(--line);
  background: var(--panel);
}

/* -- game roles ---------------------------------------------------------- */

.rolegrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}

.rolecard {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.rolecard:hover { border-color: var(--muted); }
.rolecard.held { border-color: var(--accent); }
.rolecard input { width: auto; margin-top: 3px; }
.rolebody { display: grid; gap: 2px; font-size: 14px; min-width: 0; }

.rolelist { width: 100%; border-collapse: collapse; margin-top: 8px; }

.rolelist td {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
  font-size: 14px;
}

.rowactions {
  text-align: right;
  white-space: nowrap;
}

.rowactions form {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.rowactions .check { font-size: 13px; color: var(--muted); }

/* A section heading inside a form, for grouping fields without a new <form>. */
.form h3 { margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }

/* -- voice leaderboard --------------------------------------------------- */

.periods { display: flex; gap: 4px; flex-wrap: wrap; border: 0; }

.ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.rank {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

/* The bar sits behind the text rather than next to it, so long names never
   squeeze it out of the row. */
.rankbar {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  opacity: 0.14;
}

.rank.me { border-color: var(--accent); }
.ranknum { position: relative; width: 2ch; color: var(--muted); font-variant-numeric: tabular-nums; }
.rankname { position: relative; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ranktime { position: relative; font-variant-numeric: tabular-nums; font-weight: 600; }

/* -- embed builder ------------------------------------------------------- */

.epcontent { white-space: pre-wrap; margin: 0 0 8px; }

.embedpreview {
  position: relative;
  display: grid;
  gap: 8px;
  max-width: 540px;
  padding: 13px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
}

.epauthor, .epfooter { display: flex; align-items: center; gap: 8px; }
.epauthor { font-size: 14px; font-weight: 600; }
.epauthor img, .epfooter img { width: 20px; height: 20px; border-radius: 50%; }
.eptitle { font-weight: 700; }
.epdesc, .epfieldvalue { white-space: pre-wrap; font-size: 14px; }
.epfooter { font-size: 12px; color: var(--muted); }

.epfields { display: flex; flex-wrap: wrap; gap: 10px; }
.epfield { flex: 1 1 100%; }
.epfield.inline { flex: 1 1 28%; min-width: 130px; }
.epfieldname { font-weight: 600; font-size: 14px; margin-bottom: 2px; }

.epimage { max-width: 100%; border-radius: 6px; }

.epthumb {
  position: absolute;
  top: 13px;
  right: 16px;
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 6px;
}

.fieldrow {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: 8px;
  align-items: start;
  margin-bottom: 8px;
}

@media (max-width: 620px) {
  .fieldrow { grid-template-columns: 1fr; }
}

/* -- facts / columns ----------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 18px 0;
}

.facts dt { color: var(--muted); font-size: 14px; }
.facts dd { margin: 0; }

.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.column {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}

.people { display: grid; gap: 4px; font-size: 14px; }

.rsvp { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.rsvpbtn.chosen { border-color: var(--accent); background: var(--accent); color: #fff; }

/* -- forms --------------------------------------------------------------- */

.form { display: grid; gap: 16px; margin-top: 18px; max-width: 720px; }
.cancelform { margin-top: 24px; }

/* align-content keeps each row at its natural height — without it, a field
   sitting next to a taller one stretches its input to match. */
.field { display: grid; gap: 6px; align-content: start; border: 0; padding: 0; margin: 0; }
.field > span, .field > legend { font-size: 14px; color: var(--muted); }

input[type='text'], input:not([type]), input[type='number'],
input[type='datetime-local'], textarea, select {
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.checkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.check input { width: auto; }

.note {
  color: var(--muted);
  font-size: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

code {
  background: var(--panel-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 13px;
}

@media (max-width: 620px) {
  .row { grid-template-columns: 1fr; }
}

/* -- ORBATs -------------------------------------------------------------- */

.pad { padding: 16px 18px; }
.card h3 { margin-top: 0; }
.card h3.bad, .bad { color: var(--err); }
.card h3.warnish { color: var(--warn); }
.nospace { margin-top: 0; }

/* The editor and its preview need more room than the 900px main column. The
   whole page steps outside it rather than just the two columns, so the headings
   stay lined up with them. */
.widepage {
  width: min(1500px, 100vw - 32px);
  margin-left: 50%;
  transform: translateX(-50%);
}
.orbatsplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 940px) { .orbatsplit { grid-template-columns: 1fr; } }

.orbateditor textarea {
  min-height: 520px;
  font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  tab-size: 2;
}
.orbatside { display: grid; gap: 14px; align-content: start; }
.formathelp { padding: 12px 16px; }
.formathelp pre {
  margin: 10px 0 0;
  white-space: pre-wrap;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--muted);
}
.confirmlead { margin: 10px 0 4px; }
.confirmform { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

/* The board, rendered the way the Discord embed is. */
.orbatboard {
  background: var(--panel-2);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 14px 16px;
}
.orbatboard h3 { margin: 0 0 6px; font-size: 16px; }
.orbatboard .counts { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.orbatfields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
@media (max-width: 560px) { .orbatfields { grid-template-columns: 1fr; } }
.squadname { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.squadradio {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.squadslots { font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; }
.squadslots .off { color: var(--muted); }
.nocount { color: var(--muted); font-weight: 400; font-size: 12px; }
.squadunit {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 4px;
  margin-left: 4px;
  vertical-align: 1px;
}

/* The shared net list, laid out like the table people already keep by hand. */
.netsblock { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
table.nets { border-collapse: collapse; font-size: 13px; margin-top: 4px; }
table.nets td { padding: 2px 14px 2px 0; }
table.nets td:last-child {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
tr.netoff td { text-decoration: line-through; opacity: .55; }

.netsfield {
  min-height: 0 !important;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.issues { margin: 0; padding-left: 18px; }
.issues li { margin: 3px 0; }
.lineno {
  font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 5px;
}

.difflist { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.difflist li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.difflist li:last-child { border-bottom: 0; }
.tag { display: inline-block; min-width: 88px; font-size: 12px; font-weight: 600; }
.tag.added { color: var(--ok); }
.tag.removed { color: var(--err); }
.tag.renamed { color: var(--warn); }
.tag.kept { color: var(--muted); }

/* -- slot approvals ------------------------------------------------------ */

.chip.contested { border-color: var(--warn); color: var(--warn); }

/* The ORBAT backing the operation running right now. */
.chip.live { border-color: var(--err); color: var(--err); }
.denyrow { display: flex; gap: 8px; margin-top: 10px; }
.denyrow input { flex: 1; }

/* -- the operation page -------------------------------------------------- */

/* An action folded away until it is wanted. Native <details>, so it works with
   scripting off, which is the rule for everything else on this site too. */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-top: 10px;
}
.panel > summary {
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary::before { content: '▸'; color: var(--muted); }
.panel[open] > summary::before { content: '▾'; }
.panel > summary .note { font-weight: 400; font-size: 13px; color: var(--muted); }
.panel > summary:hover { color: var(--accent); }
.panelbody { padding: 0 16px 16px; }
.panelbody .form { margin-top: 0; }

/* The running operation, above the fold: what it is, then its numbers. */
.opstatus { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; }
.opstatus .counts { color: var(--muted); font-size: 14px; }

/* The raw slot dump can be wider than the column; it scrolls on its own rather
   than making the whole page scroll sideways. */
.tablewrap { overflow-x: auto; margin-top: 10px; }

table.rawslots { border-collapse: collapse; font-size: 13px; width: 100%; }
table.rawslots th, table.rawslots td {
  padding: 5px 14px 5px 0;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
table.rawslots th { color: var(--muted); font-weight: 600; }
table.rawslots tr:last-child td { border-bottom: 0; }

/* One booked slot, with its Release button pushed to the far edge. */
.slotrow {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.slotrow:last-of-type { border-bottom: 0; }

/* The Assign form: who, which slot, go — on one line where there is room. */
.assignrow { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.assignrow .field { flex: 1 1 220px; }

/* -- the tactical map ----------------------------------------------------- *
   The editor is the one page with scripting behind it, so it is also the one
   place with a toolbar. Everything here degrades to "an SVG on a page", which
   is exactly what somebody with scripting off gets. */

.tmapp {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
  margin-bottom: 20px;
}

.tmbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}

.tmtools, .tmpick, .tmdo { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tmpick { gap: 12px; }
.tmpick label { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.tmpick select { padding: 5px 8px; }

.tmtool {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.tmtool:hover { border-color: var(--muted); }
.tmtool.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.tmstatus { font-size: 13px; color: var(--muted); min-width: 120px; }
.tmstatus.ok { color: var(--ok); }
.tmstatus.warn { color: var(--warn); }
.tmstatus.err { color: var(--err); }

.tmstage { display: grid; grid-template-columns: 1fr 250px; gap: 0; }
.tmcanvas { background: #10141a; min-width: 0; position: relative; }

/* A square terrain is limited by height, not width, so the sheet gets as much
   of the window as the page chrome leaves — and the full-screen button gets
   the rest of it when that is still not enough. */
svg.tacmap {
  display: block;
  width: 100%;
  height: auto;
  max-height: max(420px, calc(100vh - 210px));
  /* The wheel zooms and a drag pans, so the browser must not also scroll. */
  touch-action: none;
}

.tmfull {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 20, 26, 0.82);
  color: #e6eaf0;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.tmfull:hover { border-color: var(--muted); }

/* Full screen, and the fallback for a browser that refuses it. */
.tmapp:fullscreen { background: #10141a; display: flex; flex-direction: column; }
.tmapp:fullscreen .tmstage { flex: 1; min-height: 0; }
.tmapp:fullscreen svg.tacmap { max-height: 100vh; }
.tmapp:fullscreen .tmside { max-height: 100vh; }
.tmapp.tm-tall svg.tacmap { max-height: 94vh; }
svg.tacmap.tm-drawing { cursor: crosshair; }
.tm-item { cursor: move; }
.tm-ring {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-dasharray: 7 5;
  pointer-events: none;
}

.tmside {
  border-left: 1px solid var(--line);
  padding: 12px;
  display: grid;
  gap: 12px;
  align-content: start;
  max-height: max(420px, calc(100vh - 210px));
  overflow-y: auto;
}
.tmpanel {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--panel-2);
  display: grid;
  gap: 10px;
}
.tmpanel h3 { margin: 0; font-size: 15px; }
.tmpanel summary { cursor: pointer; font-size: 14px; }
.tmpanel .field > span { font-size: 13px; }
.tmpanel .row { grid-template-columns: 1fr 1fr; gap: 10px; }
.tmcheck { display: flex; gap: 8px; align-items: center; }
/* A row of colour buttons. Small, square and wrapping, so ten of them fit on
   the tool row without pushing anything off it. */
.tmswatches { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tmswatches .tmswatch {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
}
/* The first one hands the item back to its side's colour, so it shows the
   absence of a choice rather than a colour: a diagonal through an empty box. */
.tmswatches .tmswatch-side {
  background:
    linear-gradient(to top right, transparent 45%, var(--muted) 45%,
                    var(--muted) 55%, transparent 55%),
    var(--panel);
}
.tmswatches .tmswatch.active {
  outline: 2px solid var(--accent, #6b8afd);
  outline-offset: 1px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.tmhelp { font-size: 13px; color: var(--muted); }
.tmhelp ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
/* Sits under the tool row rather than in the side panel: it names the one
   gesture that is not a button, so it has to be where the buttons are. */
.tmhint {
  margin: 0;
  flex-basis: 100%;
  font-size: 12px;
  color: var(--muted);
}
.tmhint kbd,
.tmhelp kbd {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0 4px;
  background: var(--panel);
  font-size: 12px;
}

/* The two Arma exports, side by side rather than one hidden behind the other:
   which to use is the question, so both have to be on screen to be compared. */
.tmexport {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 14px;
}
.tmexport h3 { margin: 0 0 8px; font-size: 15px; }
.tmexport h3 .note { font-weight: 400; }

.tmsection { margin-bottom: 14px; }
.tmsection summary { cursor: pointer; font-weight: 600; }
.tmsection h3 { margin: 18px 0 6px; font-size: 15px; }

@media (max-width: 900px) {
  .tmstage { grid-template-columns: 1fr; }
  .tmside { border-left: 0; border-top: 1px solid var(--line); max-height: none; }
}

/* The export script: monospaced, and tall enough to see a plan's worth of it
   without the panel growing past the fold. */
.sqfbox {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

/* One switch per layer, for whoever is looking at the map — the editor also
   gets the name and a way to remove one. */
.tmlayerlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tmlayer { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tmlayer .tmlayername {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  font-size: 13px;
}
.tmaddlayer { display: flex; gap: 6px; }
.tmaddlayer input { flex: 1; min-width: 0; padding: 5px 8px; font-size: 13px; }

/* A line's own colour, and the way back to its side's. */
.tmcolour { display: flex; align-items: center; gap: 10px; }
.tmcolour input[type="color"] {
  width: 46px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

/* The editor hides whatever doesn't apply to the current tool or selection.
   Every panel and field here sets `display`, which would otherwise beat the
   browser's own rule for [hidden] and leave them all on screen at once. */
.tmapp [hidden] { display: none; }

/* A second, quieter script inside the Arma panel — the variant whose markers
   can be picked up in game. It is folded away because it is the exception. */
.subpanel { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.subpanel > summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.subpanel[open] > summary { margin-bottom: 10px; color: var(--text); }

/* A one-line form inside a panel — the channel picker beside its button. */
.form.inline { display: flex; align-items: flex-end; gap: 10px; margin: 12px 0; }
.form.inline .field { margin: 0; }