/* One shared control style, loaded after each page's component styles. */
:root {
  --control-bg:#d5ec93;
  --control-hover:#e7f6b5;
  --control-pressed:#bdd778;
  --control-text:#172318;
  --control-ring:#769444;
  --control-radius:12px;
}
html body :is(
  button:not(.map-marker),a.button,.tools-siblings a,
  .header #navigation>a,.header .nav-group>summary,
  .header #site-settings select,.header #site-settings button
) {
  background:var(--control-bg);
  color:var(--control-text);
  border:1px solid transparent;
  border-radius:var(--control-radius);
  font-family:var(--sans,Arial,sans-serif);
  font-size:var(--control-font-size,14px);
  font-weight:700;
  line-height:1.4;
  min-height:44px;
  padding:var(--control-padding,10px 16px);
  cursor:pointer;
  text-decoration:none;
  transition:background .16s,border-color .16s,box-shadow .16s;
}
html body :is(
  button:not(.map-marker),a.button,.tools-siblings a,
  .header #navigation>a,.header .nav-group>summary,
  .header #site-settings select,.header #site-settings button
):hover {
  background:var(--control-hover);
  color:var(--control-text);
  border-color:var(--control-ring);
}
html body :is(
  button:not(.map-marker),a.button,.tools-siblings a,
  .header #navigation>a,.header .nav-group>summary,
  .header #site-settings select,.header #site-settings button
):focus-visible {
  outline:2px solid var(--control-ring);
  outline-offset:3px;
  box-shadow:0 0 0 2px var(--bg);
}
html body :is(button:not(.map-marker),a.button,.tools-siblings a,.header #navigation>a,.header .nav-group>summary):active {
  background:var(--control-pressed);
}
html body :is(
  .header #navigation>a[aria-current=page],
  .header .nav-group.current>summary,.header .nav-group[open]>summary,
  .tools-siblings a[aria-current=page],button.active:not(.map-marker),button[aria-pressed=true],
  .header .menu-button[aria-expanded=true]
) {
  background:var(--control-hover);
  color:var(--control-text);
  border-color:var(--control-ring);
  box-shadow:inset 0 0 0 1px var(--control-ring);
}
html body :is(button:disabled,button[aria-disabled=true],a.button[aria-disabled=true],.header #site-settings button:disabled) {
  background:var(--control-bg);color:var(--control-text);
  opacity:.45;cursor:not-allowed;box-shadow:none;border-color:transparent;
}
html body a.button:hover {transform:none}
html body a.button>span {color:inherit}
html body .header #site-settings button {width:44px;min-width:44px;padding:10px}
html body .header #site-settings select {padding:10px 8px}
html body .header #site-settings select option {color:var(--control-text);background:#f3f8e8}
html body .header .nav-group>summary>span {color:inherit}
html body.builds-page .visual-build .rune-option {--control-padding:8px 6px;position:relative}
html body.builds-page .visual-build .rune-option[aria-pressed=true]::after {content:'✓';position:absolute;right:4px;top:2px;font-size:13px}
html body .delete-task {--control-padding:8px;min-width:44px;flex-shrink:0}
/* Map controls keep their geographic anchor and footprint. */
html body .map-marker span {border-radius:var(--control-radius);background:var(--control-bg);color:var(--control-text);border-color:var(--control-ring)}
html body .map-marker:hover span,html body .map-marker.active span {background:var(--control-hover);box-shadow:0 0 0 3px var(--control-ring)}
@media(max-width:540px) {
  html body .header .menu-button {--control-font-size:0px;--control-padding:10px;min-width:42px}
  html body .header #site-settings select {padding:8px 4px;min-width:90px}
  html body .header #site-settings button {width:38px;min-width:38px;padding:8px}
}
@media(prefers-reduced-motion:reduce) {
  html body :is(button,a.button,.tools-siblings a,.header .nav-group>summary) {transition:none}
}