/* Layout: a register list on the left, a slippy map on the right (map first on phones).
   Embargo areas are drawn as hatched overprint, the way out-of-bounds areas appear on an orienteering map. */
:root{
  --bg:#ecefe8; --surface:#f8f9f5; --surface-2:#e2e7dd; --fg:#18211b; --muted:#566259; --line:#c9d1c3;
  --accent:#285f44; --accent-ink:#cfe6d7; --accent-soft:#dcebe2; --accent-text:#285f44; --link:#285f44;
  --highlight:#6b8c7a; /* Orienteering Australia's second green (a light green in dark mode): the selected and changed rows, the Following box, chosen options, the list-width handle */
  --active:#a3105a; --upcoming:#2a5aa8; --ended:#6b756e;
  --ok:#2b7a4b; --warn:#a5640c; --no:#b0302a; --focus:#2a5aa8;
  --m-route:#0f7a4a; --m-active:#b0135f; --m-upcoming:#2a5dad; --m-ended:#6b746d; --map-bg:#e7e6e0;
  --font-display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --font-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --radius:3px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121714; --surface:#1a211d; --surface-2:#243029; --fg:#e6ece7; --muted:#9aa89e; --line:#2f3a33;
    --accent:#285f44; --accent-ink:#cfe6d7; --accent-soft:#1c3327; --accent-text:#cfe6d7; --highlight:#cfe6d7; --link:#f0c11a;
    --active:#ff6aa8; --upcoming:#86aaff; --ended:#9aa59d;
    --ok:#5fcf8c; --warn:#e5a94d; --no:#ff7b72; --focus:#86aaff; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121714; --surface:#1a211d; --surface-2:#243029; --fg:#e6ece7; --muted:#9aa89e; --line:#2f3a33;
  --accent:#285f44; --accent-ink:#cfe6d7; --accent-soft:#1c3327; --accent-text:#cfe6d7; --highlight:#cfe6d7; --link:#f0c11a;
  --active:#ff6aa8; --upcoming:#86aaff; --ended:#9aa59d;
  --ok:#5fcf8c; --warn:#e5a94d; --no:#ff7b72; --focus:#86aaff; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.45 var(--font-body);
  padding-block:0;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mono{font-family:var(--font-mono);font-size:.86em;letter-spacing:0}
.lbl{display:block;font:600 11.5px/1.2 var(--font-body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}

.app{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;height:100%;padding-block:12px}
.top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px}
.brand{min-width:0}
h1{margin:2px 0 0;font:700 clamp(26px,4.4vw,36px)/1 var(--font-display);letter-spacing:.005em;text-wrap:balance}
.tally{margin:6px 0 0;color:var(--muted)}
.tools{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;gap:8px;flex:1 1 auto}   /* grows, so the administrator buttons stay at the right; when the buttons wrap, every row is right-aligned */
.admintools{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;gap:8px;margin-left:auto}
/* The header menu: on wide screens its buttons simply sit in the row; on narrow ones they fold behind the Menu button. */
.topmenu{display:contents}
.admintools .menubtn,.topmenu .narrowonly{display:none}   /* more specific than .btn, which comes later */
.menubtn svg{flex:none}
.menubadge{min-width:18px;padding:1px 5px;border-radius:9px;background:var(--accent);color:var(--accent-ink);font-size:11.5px;font-weight:700;line-height:16px}
@media (max-width:820px){
  .wideonly{display:none}
  .tools{width:100%}
  .admintools{position:relative;flex-wrap:nowrap}
  .admintools .menubtn,.topmenu .narrowonly{display:inline-flex}
  .topmenu{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:220px;flex-direction:column;gap:0;padding:6px;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.18)}
  .topmenu.open{display:flex}
  .topmenu .btn{justify-content:flex-start;width:100%;border-color:transparent;background:transparent}
  .topmenu .btn:hover{background:var(--surface-2)}
  .topmenu .btn[hidden]{display:none}
  .topmenu #btnAuth{margin-top:6px;border-top:1px solid var(--line)}
}
.asat{display:block}
.asat input{width:auto}

.main{display:grid;grid-template-columns:var(--side-w,minmax(330px,410px)) 12px minmax(0,1fr);gap:0;min-height:0}
.side{background:var(--surface);border:1px solid var(--line);overflow:auto;min-height:0;min-width:0}
.mapwrap{position:relative;border:1px solid var(--line);overflow:hidden;min-height:0;min-width:0;background:var(--map-bg)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:6px 12px;text-decoration:none;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:var(--radius);font-weight:600;cursor:pointer;line-height:1.2}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--no);border-color:var(--no);background:transparent}
.btn.ghost{background:transparent}
.btn.small{min-height:28px;padding:3px 8px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
/* Text links (not buttons): Orienteering Australia's yellow in dark mode; their green in light mode, where yellow would be too faint to read. */
a:not(.btn):not(.chip){color:var(--link)}
.link{background:none;border:0;padding:0;color:var(--link);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

input,select,textarea{width:100%;min-height:36px;padding:6px 9px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius)}
input[type=checkbox],input[type=radio]{width:auto;min-height:0;padding:0}
input[type=color]{width:64px;padding:2px;cursor:pointer}
/* Every dropdown has the same arrow, the browser's own and the several-choice ones alike. */
select{appearance:none;-webkit-appearance:none;padding-right:28px;text-overflow:ellipsis;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat}
textarea{resize:vertical;min-height:64px}
input[readonly]{opacity:.75}

/* Map */
.map{position:absolute;inset:0;background:var(--map-bg);touch-action:none;cursor:grab;overflow:hidden;user-select:none;-webkit-user-select:none}
.map.drawing{cursor:crosshair}
.map.dragging{cursor:grabbing}
.tiles{position:absolute;inset:0;overflow:hidden}
img.tile{position:absolute;left:0;top:0;max-width:none;pointer-events:none;user-select:none;opacity:0;transition:opacity .15s}
img.tile.in{opacity:1}
img.tile.ov{z-index:1}
#overlay{position:absolute;inset:0;width:100%;height:100%}
.poly{stroke-width:1.6;stroke-linejoin:round;cursor:pointer}
.poly.s-active{stroke:var(--m-active);fill:url(#h-active)}
.poly.s-upcoming{stroke:var(--m-upcoming);stroke-dasharray:7 4;fill:url(#h-upcoming)}
.poly.s-ended{stroke:var(--m-ended);stroke-dasharray:2 3;fill:url(#h-ended)}
.poly.is-draft{stroke:var(--muted);stroke-dasharray:3 3;fill:rgba(120,130,125,.12)}
.poly.hov{stroke-width:2.8}
.poly.sel{stroke-width:3.4}
.halo{fill:none;stroke:#fff;stroke-width:7;stroke-opacity:.85;stroke-linejoin:round;pointer-events:none}
.poly.draft{stroke:#111;stroke-dasharray:5 4;fill:rgba(255,255,255,.4);pointer-events:none}
.pin{stroke:#fff;stroke-width:2;cursor:pointer}
.pin.s-active{fill:var(--m-active)} .pin.s-upcoming{fill:var(--m-upcoming)} .pin.s-ended{fill:var(--m-ended)}
.plabel{font:600 12px var(--font-body);fill:#1c1c1c;paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round;pointer-events:none}
.vtx{fill:#fff;stroke:#111;stroke-width:2;pointer-events:none}
.vtx.first{fill:#111}
.gline{stroke:#9a9a92;stroke-width:1;stroke-dasharray:2 4}
.glab{font:11px var(--font-mono);fill:#5d5d56}

.ctrl{position:absolute;z-index:3}
.zoom{top:10px;left:10px;display:grid;gap:0;border:1px solid var(--line);background:var(--surface)}
.zoom button{width:36px;height:34px;background:transparent;border:0;border-bottom:1px solid var(--line);font:600 18px var(--font-body);cursor:pointer;color:var(--fg)}
.zoom button:last-child{border-bottom:0;font:700 11px var(--font-body);letter-spacing:.05em}
.zoom button:hover{background:var(--surface-2)}
.legend{left:10px;bottom:10px;background:var(--surface);border:1px solid var(--line);padding:7px 10px;display:grid;gap:5px;font-size:12.5px}
.legend div{display:flex;align-items:center;gap:8px}
.sw{display:inline-block;width:22px;height:13px}
.sw.active{border:2px solid var(--m-active);background:repeating-linear-gradient(-45deg,rgba(176,19,95,.6) 0 2px,rgba(176,19,95,.1) 2px 6px)}
.sw.upcoming{border:2px dashed var(--m-upcoming);background:repeating-linear-gradient(-45deg,rgba(42,93,173,.5) 0 2px,rgba(42,93,173,.08) 2px 6px)}
.sw.ended{border:2px dotted var(--m-ended);background:repeating-linear-gradient(-45deg,rgba(107,116,109,.4) 0 1px,rgba(107,116,109,.06) 1px 6px)}
.attrib{position:absolute;right:0;bottom:0;z-index:3;background:rgba(255,255,255,.85);color:#222;font-size:11px;padding:2px 6px;text-decoration:none;max-width:70%;text-align:right}
.attrib a{color:inherit;text-decoration:none}
.attrib a:hover{text-decoration:underline}
.drawbar{top:52px;left:56px;right:10px;background:var(--surface);border:1px solid var(--accent);padding:8px 10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.drawbar p{margin:0;font-size:13.5px;flex:1 1 200px}
.drawbar div{display:flex;gap:8px}
.notice{left:56px;right:10px;bottom:10px;background:var(--surface);border:1px solid var(--warn);padding:7px 10px;font-size:12.5px;max-width:520px;margin-inline:auto}
.notice+.attrib{z-index:3}
.tip{position:absolute;z-index:4;pointer-events:none;background:var(--surface);border:1px solid var(--line);padding:6px 9px;font-size:12.5px;line-height:1.35;max-width:240px}
.tip strong{display:block}

/* Side panel */
.pad{padding:14px}
.filters{padding:12px 14px;border-bottom:1px solid var(--line);display:grid;gap:8px;position:sticky;top:0;background:var(--surface);z-index:2}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:480px){.three{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:4px 9px;border:1px solid var(--line);background:transparent;border-radius:var(--radius);font-weight:600;font-size:13px;cursor:pointer}
.chip[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.sortrow{display:flex;align-items:center;gap:8px}
.sortrow .lbl{margin:0;white-space:nowrap}
.sortrow select{flex:0 1 auto;width:auto;max-width:11em;min-width:0}
.sortrow .btn{min-width:36px;min-height:36px;padding-left:8px;padding-right:8px;font-size:16px;line-height:1}
.count{margin:0;color:var(--muted);font-size:13px}
.note{margin:0;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--surface-2);font-size:13px;color:var(--muted)}
ul.list{list-style:none;margin:0;padding:0}
.row{display:grid;gap:3px;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--line);padding:12px 14px;cursor:pointer}
.row:hover{background:var(--surface-2)}
.row[aria-current=true]{background:var(--accent-soft);box-shadow:inset 4px 0 0 var(--highlight)}
.row-top{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.row-name{font:700 21px/1.1 var(--font-display);letter-spacing:.005em}
.row-event,.row-meta,.row-mod{color:var(--muted);font-size:13.5px}
.row-mod{font-size:12.5px}
.row-now{font-size:13.5px}
.pill{display:inline-block;font:500 11px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;padding:3px 6px;border-radius:var(--radius);border:1px solid currentColor}
.pill.s-active{background:var(--active);border-color:var(--active);color:#fff}
.pill.s-upcoming{color:var(--upcoming)}
.pill.s-draft{color:var(--muted);border-style:dotted}
.pill.s-ended{color:var(--ended);border-style:dashed}
.tag{display:inline-block;font:600 11px/1 var(--font-body);letter-spacing:.05em;text-transform:uppercase;padding:3px 6px;border:1px solid var(--line);color:var(--muted);border-radius:var(--radius)}
.tag.warn{border-color:var(--no);color:var(--no)}
/* A result that went through, and one that did not: the same two colours wherever a result is shown. */
.tag.ok{color:var(--ok);border-color:var(--ok)}
.tag.bad{color:var(--no);border-color:var(--no)}
.empty{padding:26px 16px;text-align:center;color:var(--muted)}
.empty p{margin:0 0 10px}

.back{margin-bottom:10px}
h2{margin:0;font:700 28px/1.05 var(--font-display);text-wrap:balance}
h3{margin:0 0 8px;font:600 12px/1.2 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.sec{padding:14px;border-top:1px solid var(--line)}
.head{padding:14px}
.head .sub{margin:6px 0 0;color:var(--muted)}
.head .pills{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.callout{margin:0;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line)}
.callout strong{display:block;margin-bottom:2px}
.callout p{margin:4px 0 0}
.callout.warn{border-color:var(--no);border-left-width:4px;border-radius:0}
.callout.warn strong{color:var(--no)}
/* Checking who someone is, before a role or a reset (People). */
.idcheck{display:grid;gap:8px;margin:8px 0}
.idcheck p{margin:0}
.idcheck.callout p strong{display:inline;color:inherit}
.idcheck .chk{display:flex;align-items:flex-start;gap:8px;font-weight:600;border:0;padding:0}
.idcheck .chk input{margin-top:3px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.facts dt{color:var(--muted);font-size:13px}
.facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.copyrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 16px 24px}
.timeline li::before{content:"";position:absolute;left:5px;top:16px;bottom:-2px;width:1px;background:var(--line)}
.timeline li:last-child{padding-bottom:0}
.timeline li:last-child::before{display:none}
.timeline .when{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.timeline .when strong{font:700 18px/1.15 var(--font-display)}
.timeline p{margin:3px 0 0;font-size:14.5px}
.tablewrap{overflow-x:auto;border:1px solid var(--line)}
table.matrix{border-collapse:collapse;width:100%;font-size:13.5px}
.matrix th,.matrix td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.matrix thead th{background:var(--surface-2);font-weight:600;vertical-align:bottom;min-width:96px}
.matrix thead th span{display:block}
.matrix thead th span.mono{color:var(--muted);font-weight:400}
.matrix th[scope=row]{text-align:left;font-weight:400;min-width:150px}
.matrix tbody tr:last-child th,.matrix tbody tr:last-child td{border-bottom:0}
.matrix th:first-child{position:sticky;left:0;background:var(--surface);z-index:1}
.matrix thead th:first-child{background:var(--surface-2)}
.c-y{color:var(--ok);font-weight:700}
.c-l{color:var(--warn);font-weight:700}
.c-n{color:var(--no);font-weight:700}
.keyline{margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.actions{display:flex;flex-wrap:wrap;gap:8px;padding:14px;border-top:1px solid var(--line)}

/* Form */
form fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:14px;display:grid;gap:10px;min-width:0}
form legend{padding:0;float:left;width:100%;font:600 12px/1.2 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
form legend+*{clear:both}
.stage{border:1px solid var(--line);padding:10px;background:var(--bg)}
.stage-b{display:grid;gap:10px}
.stage>summary .stage-t{flex:1}
/* Collapsible sections of the embargo form */
.fsec{border-top:1px solid var(--line);padding:12px 14px}
.fsec>summary .fsec-t{flex:1;font:600 12px/1.2 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
form .fsec>fieldset{border:0;padding:0;margin:0}
.linkrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:6px;align-items:center;margin-bottom:6px}
.linkrow.maprow{grid-template-columns:minmax(0,1.3fr) 5em minmax(0,1.3fr) auto}
@media (max-width:480px){.linkrow,.linkrow.maprow{grid-template-columns:1fr 1fr}.linkrow input:first-child{grid-column:1/-1}}
.stage-h{display:flex;justify-content:space-between;align-items:center;gap:8px}
/* One row per activity: the label, with its dropdown beside it */
.acts{display:grid;border:1px solid var(--line);background:var(--surface)}
.act{display:grid;grid-template-columns:minmax(0,1fr) 8.5rem;gap:10px;align-items:center;padding:6px 8px;border-top:1px solid var(--line)}
.act:first-child{border-top:0}
.act label{font-size:13.5px;line-height:1.3}
.act select{width:100%}
@media (max-width:480px){.act{grid-template-columns:1fr;gap:4px}}
.cls{display:flex;flex-wrap:wrap;gap:6px}
.cls label{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--line);background:var(--bg);cursor:pointer;font-size:13.5px}
.cls label:has(input:checked){background:var(--accent-soft);border-color:var(--highlight)}
.err{margin:0;padding:10px 14px;background:transparent;color:var(--no);border-top:1px solid var(--no);font-size:14px}
.err ul{margin:4px 0 0;padding-left:18px}
.formactions{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:10px 14px;display:flex;gap:8px;z-index:2}
.hint{margin:0;font-size:13px;color:var(--muted)}
.hint:empty,.err:empty{display:none}
.secret{display:block;font-family:var(--font-mono);font-size:16px;word-break:break-all;user-select:all;margin:6px 0}   /* a temporary password, shown once */   /* a message line takes no room until it says something */
details summary{cursor:pointer;font-weight:600}
code.inline{font-family:var(--font-mono);font-size:.9em}

.wholine{margin:4px 0 0;font-size:13.5px}
.wholine .link{text-align:left;font-weight:600}
ul.plain{list-style:none;margin:0;padding:0}
.sec.flush{padding:14px 0 0}
.sec.flush>h3{padding:0 14px}
.sec.flush.fold>summary{margin:-4px 10px}
.sec.flush.fold:not([open]){padding-bottom:14px}
.sec.flush.fold[open]>summary{margin-bottom:12px}
.sec.flush .secbody>.hint,.sec.flush>.hint{padding:0 14px}
.sec.flush .secbody>:last-child:not(ul){margin-bottom:14px}
.sec.flush ul{border-top:1px solid var(--line)}
.sec.flush ul>li:last-child{border-bottom:0}
.person,.req{padding:12px 14px;border-bottom:1px solid var(--line);display:grid;gap:8px;list-style:none}
.pname{font:700 19px/1.1 var(--font-display)}
.gchips{display:flex;flex-wrap:wrap;gap:6px}
.gchip{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);padding:3px 8px;font-size:13px;background:var(--bg)}
.gchip.sys{border-color:var(--accent);color:var(--accent-text);font-weight:600}
.gchip button{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:0 0 0 6px;margin:0;font:600 17px/1 var(--font-body)}
.gchip button:hover{color:var(--no)}
.gform{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:8px}
details.adder{font-size:13.5px}
details.adder[open]>summary{margin-bottom:2px}
.reqorg{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:space-between}
.reqorg .btns{display:flex;gap:8px}
.rolehelp{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.rolehelp li{display:grid;gap:1px}
.rolehelp strong{font-weight:700}
.stack{display:grid;gap:10px}
@media (max-width:480px){.gform{grid-template-columns:minmax(0,1fr)}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;background:var(--fg);color:var(--bg);padding:8px 14px;font-weight:600;font-size:14px}

@media (max-width:820px){
  html,body{height:auto}
  .app{height:auto;display:block}
  .top{margin-bottom:12px}
  .main{display:flex;flex-direction:column;gap:12px}
  .splitter{display:none}
  .mapwrap{order:-1;height:46vh;min-height:280px;position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
  .app.nomap .mapwrap{display:none}   /* views that do not use the map (see MAP_VIEWS in app.js) */
  .side{overflow:visible}
  .filters{position:static}
  .formactions{position:sticky;bottom:0}
  .drawbar{left:10px;top:54px}
  .notice{left:10px;bottom:34px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Standalone page: the publishing skeleton is no longer there, so supply its reset. */
[hidden]{display:none!important}
img{max-width:100%}
:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs{display:flex;border:1px solid var(--line);margin-bottom:14px}
.tabs button{flex:1;padding:8px 10px;background:transparent;border:0;font-weight:600;cursor:pointer;color:var(--muted)}
.tabs button[aria-selected=true]{background:var(--fg);color:var(--bg)}
.authform{display:grid;gap:10px}
.err.inline{border:1px solid var(--no);padding:8px 10px}
.mailline{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.person .row-top{display:flex;gap:6px 8px;flex-wrap:wrap;align-items:center}
.person-actions{display:flex;flex-wrap:wrap;gap:8px}

/* Change history */
.hist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.hist>li{padding:10px 0;border-top:1px solid var(--line)}
.hist>li:first-child{border-top:0;padding-top:0}
.hist-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.hist-top time{color:var(--muted)}
.hist-by{font-size:13px;color:var(--muted);margin-top:2px}
.hist-changes{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.hist-changes li{display:grid;gap:2px;font-size:13.5px;overflow-wrap:anywhere}
.hist-changes .hk{color:var(--muted);font-size:12.5px}
.hist-changes .from{text-decoration:line-through;text-decoration-color:var(--muted);color:var(--muted)}
.hist-changes .to{font-weight:600}

/* Recently deleted */
.del-list{list-style:none;margin:0;padding:0}
.del-item{padding:12px 14px;border-top:1px solid var(--line);display:grid;gap:8px}
.del-main{display:grid;gap:2px}
.del-main strong{font:700 19px/1.1 var(--font-display)}
.del-main .sub{font-size:13.5px;color:var(--muted)}
.del-actions{display:flex;gap:8px;flex-wrap:wrap}
.del-history{padding-top:4px}

/* Permitted routes and per-stage shapes */
.rcase{fill:none;stroke:#fff;stroke-width:6.5;stroke-opacity:.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.route{fill:none;stroke:var(--m-route);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;cursor:pointer}
.route.hov{stroke-width:4.6}
.route.sel{stroke-width:4.4}
.route.draft{stroke:#111;stroke-dasharray:6 4;pointer-events:none}
.rlabel{font:600 11.5px var(--font-body);fill:var(--m-route);paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round;pointer-events:none}
.sw.route{height:0;border-top:4px solid var(--m-route);width:22px;align-self:center;border-radius:2px;box-shadow:0 0 0 1px #fff}
.shape{display:grid;gap:6px;padding-top:6px;border-top:1px dashed var(--line)}
.shape .hint{margin:0}
.btnrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.route-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto auto;gap:6px;align-items:center}
.route-row input{min-width:0}
@media (max-width:480px){.route-row{grid-template-columns:1fr 1fr}.route-row input{grid-column:1/-1}}
.paste{display:grid;gap:8px;margin-top:8px}
.shapeline{margin:4px 0 0;font-size:13px;color:var(--muted)}
.routes{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.routes li{display:flex;align-items:flex-start;gap:8px}
.rsw{display:inline-block;width:22px;border-top:4px solid var(--m-route);border-radius:2px;flex:none}
.defs{display:grid;gap:10px;margin-top:12px}
.defrow{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:8px;padding-top:8px;border-top:1px solid var(--line)}
.deflabel{grid-column:1/-1;font-size:13.5px;font-weight:600}
.defrow select{width:100%;min-width:0}

/* Timeline markers: hollow until reached, filled once in force or passed */
.mk{position:absolute;left:-3px;top:3px;width:16px;height:16px;overflow:visible}
.mk path,.mk circle{fill:var(--surface);stroke:var(--muted);stroke-width:1.7;stroke-linejoin:round}
.mk.past path,.mk.past circle{fill:var(--muted)}
.mk.current path,.mk.current circle{fill:var(--active);stroke:var(--active)}
.mk .o,.mk.past .o,.mk.current .o{fill:none}
.mk.inline{position:static;display:inline-block;vertical-align:-3px;margin-right:2px}
.keyline.marks{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 16px}
.keyline.marks>span{white-space:nowrap}
/* Activity symbols: the same size and stroke weight for all three */
.sym{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.keyline .sym{width:16px;height:16px;margin-right:2px}

/* Event organisers panel */
.orgs{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.orgs li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.addorg .btnrow{flex-wrap:nowrap}
.addorg .btnrow input{flex:1;min-width:0}

.routes .rsw{margin-top:9px}
.rtext{min-width:0}
.rdesc{display:block;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.route-row .rdesc-in{grid-column:1/-1}

/* Collapsible sections of the embargo panel */
details.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;margin:-4px -4px;padding:4px;border-radius:var(--radius)}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::before{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .12s;margin:0 4px 2px 2px}
details.fold[open]>summary::before{transform:rotate(45deg);margin-bottom:4px}
details.fold>summary h3{margin:0;flex:1}
details.fold>summary:hover{background:var(--surface-2)}
details.fold>summary:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
details.fold[open]>summary{margin-bottom:8px}
@media (prefers-reduced-motion:reduce){details.fold>summary::before{transition:none}}

/* Basemap switcher */
.layers{top:10px;right:10px;display:flex;border:1px solid var(--line);background:var(--surface)}
.layers button{border:0;background:transparent;color:var(--fg);padding:7px 10px;font:inherit;font-size:13px;cursor:pointer;border-right:1px solid var(--line)}
.layers button:last-child{border-right:0}
.layers button:hover{background:var(--surface-2)}
.layers button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.layers button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
@media (max-width:480px){.layers button{padding:6px 7px;font-size:12px}}

/* Marks a permitted route that has a description */
.info{display:inline-block;width:14px;height:14px;line-height:13px;margin-left:3px;border:1.5px solid var(--muted);border-radius:50%;font:italic 700 10px/12px var(--font-body);text-align:center;color:var(--muted);cursor:help;vertical-align:1px}
.info:hover,.info:focus-visible{border-color:var(--accent);color:var(--accent-text)}
.legend div[hidden]{display:none}

/* Reshaping an area or route */
.vtx.mid{fill:rgba(255,255,255,.55);stroke-width:1.5}
.map.reshaping{cursor:default}
.map.reshaping.dragging{cursor:grabbing}

/* Collapsible filters */
.ffold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font:600 11.5px/1.2 var(--font-body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:2px 0}
.ffold>summary::-webkit-details-marker{display:none}
.ffold>summary::before{content:"";flex:none;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .12s;margin:0 4px 1px 2px}
.ffold[open]>summary::before{transform:rotate(45deg);margin-bottom:3px}
.ffold>summary:hover{color:var(--fg)}
.ffold>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.fcount{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:600;color:var(--accent-text)}
.fbody{display:grid;gap:10px;margin-top:8px}
.ffold+.count{margin-top:8px}
@media (prefers-reduced-motion:reduce){.ffold>summary::before{transition:none}}

/* Access: cross-hatch where all access is restricted, single hatch where some activities are permitted */
.poly.s-active.acc-none{fill:url(#h-active-closed)}
.poly.s-upcoming.acc-none{fill:url(#h-upcoming-closed)}
.poly.s-ended.acc-none{fill:url(#h-ended-closed)}
.pin.acc-some{stroke-width:3}
.pin.s-active.acc-some{fill:var(--surface);stroke:var(--m-active)}
.pin.s-upcoming.acc-some{fill:var(--surface);stroke:var(--m-upcoming)}
.pin.s-ended.acc-some{fill:var(--surface);stroke:var(--m-ended)}
.legend-rule{border-top:1px solid var(--line);padding-top:5px}
.sw.closed{border:2px solid var(--muted);background:repeating-linear-gradient(45deg,rgba(86,98,89,.75) 0 2px,transparent 2px 6px),repeating-linear-gradient(-45deg,rgba(86,98,89,.75) 0 2px,rgba(86,98,89,.12) 2px 6px)}
.sw.partial{border:2px solid var(--muted);background:repeating-linear-gradient(-45deg,rgba(86,98,89,.55) 0 1.5px,rgba(86,98,89,.05) 1.5px 8px)}
.acc{display:inline-block;font:500 11px/1 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;padding:3px 6px;border-radius:var(--radius);border:1px solid var(--muted);color:var(--muted)}
.acc.none{background:var(--fg);border-color:var(--fg);color:var(--bg)}

.check{display:flex;gap:8px;align-items:flex-start;font-weight:600;line-height:1.35}
.check input{margin-top:3px}

.consent{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;max-width:min(440px,calc(100vw - 32px));background:var(--bg);color:var(--fg);border:2px solid var(--fg);padding:14px 16px;box-shadow:0 4px 18px rgba(0,0,0,.25)}
.consent[hidden]{display:none}
.consent h2{margin:0 0 6px;font:700 20px/1.1 var(--font-display)}
.consent p{margin:0 0 10px;font-size:14px;line-height:1.4}
.consent .btn[aria-pressed=true]{outline:2px solid var(--focus);outline-offset:1px}

.row.changed{box-shadow:inset 4px 0 0 var(--highlight)}
.tag.chg{color:var(--accent-text);border-color:var(--accent)}
.chnote{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}

.list.compact .row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;padding:7px 14px}
.list.compact .row-name{order:-1;flex:1 1 auto;min-width:0;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list.compact .row-top{flex:0 0 auto;justify-content:flex-end;margin-left:auto}
.list.compact .row-event,.list.compact .row-meta,.list.compact .row-now,.list.compact .row-mod{display:none}

.listopts{display:flex;gap:8px;margin-bottom:8px}
.listopts>.chip{flex:1 1 0;min-width:0;min-height:30px;text-align:center;line-height:1.2;overflow-wrap:anywhere}
.fhead .ffold>summary{min-height:30px}
.selbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.selbar[hidden]{display:none}
.selcount{font-weight:700;margin-right:auto}
.list .selli{display:flex;align-items:stretch}
.list .selli .row{flex:1;min-width:0}
.selbox{margin:0;width:20px;flex:none;align-self:center;margin-left:14px}
/* Editing several: each thing that can be changed is a form section like any other, opened by its tick box. */
.bgroup legend{margin-bottom:0}
.bgroup .bbody{display:grid;gap:10px}
.bgroup .chk{border:0;padding:0;gap:6px}
.bgroup .chk legend{margin-bottom:6px}

.splitter{cursor:col-resize;touch-action:none;position:relative;outline:0}
.splitter::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:transparent;transition:background .12s}
.splitter:hover::before,.splitter:focus-visible::before,.splitter.dragging::before{background:var(--highlight)}
body.resizing{cursor:col-resize;user-select:none}
body.resizing .map{pointer-events:none}

.docked{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0!important;padding:0!important;border:0!important}
.errdock{position:sticky;bottom:0;z-index:6;background:var(--surface);border-top:2px solid var(--line);box-shadow:0 -6px 14px rgba(0,0,0,.14);cursor:pointer}
.dockmsg{margin:0;padding:9px 14px;font-size:14px;font-weight:600;border-top:1px solid var(--line)}
.dockmsg:first-child{border-top:0}
.dockmsg.bad{color:var(--no)}

/* Multi-select filter dropdowns */
.msel{position:relative;min-width:0}
.msel .lbl{display:block}
.mdrop>summary{list-style:none;cursor:pointer;min-height:36px;padding:6px 28px 6px 9px;font-weight:400;line-height:22px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative}
.mdrop>summary::-webkit-details-marker{display:none}
.mdrop>summary::after{content:"";position:absolute;right:10px;top:50%;margin-top:-2.5px;border:5px solid transparent;border-bottom:0;border-top-color:var(--muted)}
.mdrop>summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mopts{position:absolute;left:0;min-width:100%;width:max-content;max-width:min(22em,80vw);max-height:15em;overflow:auto;z-index:8;background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 16px rgba(0,0,0,.16);padding:6px 4px;margin-top:2px}
.mopts .check{display:flex;align-items:center;gap:8px;padding:4px 8px;font-weight:500;font-size:14px;cursor:pointer}
.mopts .check input{width:auto;margin:0}

/* Small screens: the basemap choice and the key open from one icon button each. */
.mapbtn{display:none}
@media (max-width:820px){
  .mapbtn{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer}
  .mapbtn[aria-expanded=true]{background:var(--accent);color:var(--accent-ink)}
  .mapbtn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  .layersbtn{top:10px;right:10px}
  .keybtn{left:10px;bottom:10px}
  .layers,.legend{display:none}
  .layers.open{display:flex;top:54px;right:10px;flex-wrap:wrap;max-width:calc(100% - 20px);justify-content:flex-end;box-shadow:0 4px 12px rgba(0,0,0,.18)}
  .legend.open{display:grid;z-index:4;bottom:54px;box-shadow:0 4px 12px rgba(0,0,0,.18)}
  .notice{bottom:54px}
}

/* A hidden file input whose label is styled as a button: show the focus on the label. */
.filepick:focus-visible+label{outline:2px solid var(--focus);outline-offset:2px}
.geopick{display:grid;gap:6px;padding:8px;border:1px solid var(--accent);background:var(--surface);margin-top:8px}

/* Two-factor sign-in */
.codein{font-size:20px;letter-spacing:.15em;max-width:11em}
.steps{margin:0;padding-left:20px;display:grid;gap:12px}
.steps .btnrow{margin-top:6px;align-items:center}
.secret{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0;padding:8px;background:var(--surface-2);font-size:16px;letter-spacing:.06em;word-break:break-all}
.rcodes{columns:2;margin:8px 0;padding-left:24px;font-size:15px}
.factlist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
a.ext{color:var(--link);overflow-wrap:anywhere}

/* CSV import */
.csvgroup{margin-top:10px}
.csvgroup .sub-h{margin:14px 0 4px;font:600 12px/1.2 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.csvmap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2px 10px;align-items:center;padding:4px 0}
.csvmap .lbl{margin:0}
.csvmap .csvex{grid-column:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.csvrows{margin:10px 0;padding-left:28px;display:grid;gap:8px}
.csvrow-t{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.csvnotes{margin:4px 0 0;padding-left:16px;font-size:13px;color:var(--muted)}
.csvnotes .bad{color:var(--no)}
.csvfix{grid-column:2}
.csvfixlist{font-size:13px}

/* Following embargoes */
.followbox{margin:8px 14px 0;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--highlight);background:var(--surface)}
.fb-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.fb-sub{margin:8px 0 4px;font-size:13px;color:var(--muted)}
.fb-list{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:6px}
.fb-list li{display:grid;gap:1px}
.fb-name{font-weight:600;text-align:left}
.fb-why{font-size:13px;color:var(--muted)}
.followbox .hint{margin:6px 0 0}
.followrow{margin-top:8px}
.tag.follow{color:var(--accent-text)}

/* Email alerts */
.alertlist{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.alertlist li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.alertlist li.editing{display:block;padding:10px 0}
.alertlist .btnrow{flex:none;margin:0;flex-wrap:nowrap}
.afedit{display:grid;gap:10px;margin:10px 0}
.afedit .hint{margin:0}
.emailpreview{border:1px solid var(--line);background:#f4f4f1;max-height:520px;overflow:auto;color:#1f2422}
.emailpreview a{color:inherit}
.previewbox:empty{display:none}
.previewbox{margin-top:10px}
.previewhead{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px;font-size:13px}

.muted{color:var(--muted)}
.bullets{margin:0;padding-left:18px}
.span2{grid-column:1/-1}
.note.top{border-top:1px solid var(--line);border-bottom:0}
.btnrow.nowrap{flex-wrap:nowrap}
.btnrow.nowrap>input{flex:1;min-width:0}
.sec.flush .flushpad{padding:0 14px}
.hist .hint{margin-top:4px}
.hist+.hint{margin-top:8px}
.req p{margin:0}

/* ---------- Shared rhythm ----------
   Inside a section, blocks sit 10px apart (the same gap the forms use), so no view needs spacing of its own. */
.secbody>*+*,.sec:not(.fold)>*+*{margin-top:10px}
.secbody>.lbl+*,.sec:not(.fold)>.lbl+*{margin-top:0}
.secbody>h3+*,.sec:not(.fold)>h3+*{margin-top:0}

/* Every part that opens and closes has the same arrow: sections, form sections, stages, filters and the small ones inside them. */
.side details:not(.fold):not(.ffold):not(.mdrop)>summary{list-style:none;display:flex;align-items:center;gap:8px}
.side details:not(.fold):not(.ffold):not(.mdrop)>summary::-webkit-details-marker{display:none}
.side details:not(.fold):not(.ffold):not(.mdrop)>summary::before{content:"";flex:none;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);transition:transform .12s;margin:0 4px 1px 2px}
.side details[open]:not(.fold):not(.ffold):not(.mdrop)>summary::before{transform:rotate(45deg);margin-bottom:3px}
.side details[open]:not(.fold):not(.ffold):not(.mdrop)>summary{margin-bottom:8px}

/* ---------- The small pages that links in emails open (served without the script) ---------- */
body.page{height:auto;padding-block:40px}
.page main{max-width:520px;margin:0 auto;padding:22px;background:var(--surface);border:1px solid var(--line)}
.page h1{margin:0 0 12px;font-size:30px}
.page p{margin:0 0 12px}
.page form{margin:0 0 12px}
.page .foot{margin:18px 0 0;padding-top:12px;border-top:1px solid var(--line)}
