/* SaaS UI. One set of design tokens, light and dark themes.
 * Every selector is prefixed .jsaas-/#jsaas-/.cx- so upstream styles are untouched.
 * Contrast: text on surfaces >= 4.5:1 in both themes (checked with the tokens below).
 * SPDX-License-Identifier: GPL-3.0-or-later */
/* Latin faces for the English UI (below). /jp/ and /us/ also link them; /cn/'s upstream page gets them here. */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;600;700&family=Inter:wght@400;500;600&display=swap");

/* Cherokee (ᏣᎳᎩ in us polity names): a subset of Noto Sans Cherokee (OFL, saas/fonts/), only the
   characters the packs use (NotoSansCherokee-subset.txt; tests/web/map-glyphs.test.js checks it).
   unicode-range: browsers load it only for a Cherokee character. Last in each stack, before the generic.
   After the @import: an @import below any other rule is ignored. */
@font-face {
  font-family: "Aom Cherokee";
  src: url("fonts/NotoSansCherokee-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+13A0-13FF, U+AB70-ABBF;
}

/* ---------------------------------------------------------------- tokens */
:root {
  --cx-font: "Inter", "Noto Sans JP", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", "Aom Cherokee", sans-serif;
  --cx-font-display: "Noto Serif SC", "Noto Serif JP", Georgia, "Aom Cherokee", serif;
  --cx-fs-xs: 12px; --cx-fs-sm: 13px; --cx-fs-md: 14px; --cx-fs-lg: 18px;
  --cx-sp-1: 4px; --cx-sp-2: 8px; --cx-sp-3: 12px; --cx-sp-4: 16px; --cx-sp-5: 24px;
  --cx-r-sm: 6px; --cx-r-md: 10px; --cx-r-pill: 999px;
  --cx-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
  /* light (matches the upstream parchment map) */
  --cx-bg: #f6f1e6;          /* surface */
  --cx-bg-raised: #fffdf8;   /* inputs, cards */
  --cx-bg-soft: rgba(246, 241, 230, 0.95);
  --cx-ink: #2c2219;         /* 14.6:1 on bg */
  --cx-ink-muted: #5c4b37;   /* 7.3:1 */
  --cx-line: rgba(90, 70, 40, 0.28);
  --cx-accent: #9a3324;      /* 6.6:1 on bg; white on it 7.0:1 */
  --cx-on-accent: #ffffff;
  --cx-link: #1b5a85;        /* 6.6:1 */
  --cx-danger: #a11a2c;      /* 6.9:1 */
  --cx-warn-bg: #f4e3bd; --cx-warn-ink: #5a3d06;
  --cx-ok-bg: #2f5d34;
  --cx-focus: #1b6fb0;
  --cx-backdrop: rgba(20, 14, 8, 0.55);
  color-scheme: light;
}
/* English UI: Latin letters from a Latin face first. A CJK face drew ō as o + a loose macron (Keicho¯) and
 * ’ at full width (Sun Quan’ s); CJK text still falls through to the CJK faces. Also the upstream /cn/ stacks. */
html:lang(en) { --cx-font: "Inter", "Noto Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans JP", "Noto Sans SC", "Aom Cherokee", sans-serif; --cx-font-display: "Noto Serif", Georgia, "Noto Serif JP", "Noto Serif SC", "Aom Cherokee", serif;
  --serif-stack: "Noto Serif", Georgia, "Noto Serif SC", "Songti SC", "SimSun", "Aom Cherokee", serif; --sans-stack: "Inter", "Noto Sans", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Aom Cherokee", sans-serif; }
html:lang(en) body.cx-country { --cx-font: "Inter", "Noto Sans", system-ui, "Noto Sans JP", "Aom Cherokee", sans-serif; --cx-font-display: "Noto Serif", Georgia, "Times New Roman", "Noto Serif JP", "Noto Serif SC", "Aom Cherokee", serif; }
:root[data-cx-theme="dark"] {
  --cx-bg: #1f1a15; --cx-bg-raised: #2a241d; --cx-bg-soft: rgba(31, 26, 21, 0.95);
  --cx-ink: #f2ebdf;         /* 14.9:1 */
  --cx-ink-muted: #c9bba6;   /* 9.0:1 */
  --cx-line: rgba(242, 235, 223, 0.22);
  --cx-accent: #e2725b;      /* 5.9:1 on bg; dark ink on it 7.8:1 */
  --cx-on-accent: #1f1a15;
  --cx-link: #8ec5f0;        /* 9.3:1 */
  --cx-danger: #ff8a95;      /* 7.6:1 */
  --cx-warn-bg: #4a3a12; --cx-warn-ink: #f6dfa4;
  --cx-focus: #8ec5f0;
  --cx-backdrop: rgba(0, 0, 0, 0.65);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base controls */
.jsaas-ui, .cx-ui { font-family: var(--cx-font); }
.jsaas-btn {
  cursor: pointer; border: 1px solid var(--cx-accent); background: var(--cx-accent); color: var(--cx-on-accent);
  border-radius: var(--cx-r-pill); padding: 5px 14px; font: inherit; font-size: var(--cx-fs-sm); line-height: 1.3;
  white-space: nowrap; flex-shrink: 0; min-height: 32px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.jsaas-btn:hover { filter: brightness(1.08); }
.jsaas-btn:disabled { opacity: 0.6; cursor: progress; }
.jsaas-btn-ghost { background: transparent; color: var(--cx-accent); }
.jsaas-ui :focus-visible, .cx-ui :focus-visible, #atlas-svg:focus-visible {
  outline: 3px solid var(--cx-focus); outline-offset: 2px; border-radius: 4px;
}
.cx-icon-btn {
  cursor: pointer; border: 1px solid var(--cx-line); background: var(--cx-bg-soft); color: var(--cx-ink);
  border-radius: var(--cx-r-pill); min-width: 34px; height: 34px; padding: 0 10px; font: inherit; font-size: var(--cx-fs-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; flex-shrink: 0;
}
.cx-icon-btn:hover { border-color: var(--cx-accent); }
.cx-icon-btn svg { width: 16px; height: 16px; }
.sr-only-cx { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- header cluster */
.cx-cluster { display: inline-flex; align-items: center; gap: var(--cx-sp-1); margin-left: var(--cx-sp-2); flex: 0 0 auto; }
#jsaas-open-drawer { margin-left: 0; }
#jsaas-account {
  display: inline-flex; align-items: center; gap: var(--cx-sp-2); max-width: 260px; min-width: 0;
  padding: 2px 3px 2px 10px; border-radius: var(--cx-r-pill); border: 1px solid var(--cx-line);
  background: var(--cx-bg-soft); color: var(--cx-ink); font-size: var(--cx-fs-sm);
}
#jsaas-account:not(.jsaas-inline) { position: fixed; left: 10px; bottom: 96px; z-index: 9000; }
#jsaas-account:has(> .jsaas-btn:only-child) { padding: 0; border-color: transparent; background: transparent; }
.jsaas-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* #188: signed in, the pill is one button (avatar, email, caret) that opens the account menu. */
#jsaas-account:has(> .jsaas-acct-btn) { padding: 0; }
.jsaas-acct-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; min-height: 30px; padding: 2px 10px; border-radius: var(--cx-r-pill); }
.jsaas-acct-btn:hover { background: var(--cx-bg-raised); }
.jsaas-acct-btn:focus-visible { outline: 3px solid var(--cx-focus); outline-offset: 1px; }
.jsaas-caret { font-size: 10px; color: var(--cx-ink-muted); }
.jsaas-menu-email { margin: 2px 10px 4px; color: var(--cx-ink-muted); font-size: var(--cx-fs-xs); overflow-wrap: anywhere; }
.cx-avatar { display: none; width: 22px; height: 22px; border-radius: 50%; background: var(--cx-accent); color: var(--cx-on-accent); font-weight: 700; font-size: 12px; align-items: center; justify-content: center; }
/* Our language menu replaces upstream's EN / 繁 pill (it got squeezed off narrow screens). */
#act-locale, #act-locale-hant { display: none !important; }
@media (max-width: 720px) {
  .cx-label { display: none; }
  #cx-country-btn { display: none; } /* narrow: Country is in the menu */
  #jsaas-account { max-width: none; padding: 2px; gap: 2px; }
  #jsaas-account .jsaas-email, #jsaas-account .jsaas-caret { display: none; }
  .jsaas-acct-btn { padding: 2px; }
  #jsaas-account .cx-avatar { display: inline-flex; }
  #jsaas-account .jsaas-btn { padding: 4px 9px; font-size: var(--cx-fs-xs); min-height: 30px; }
  .cx-cluster { margin-left: 2px; gap: 2px; }
  .cx-icon-btn { min-width: 32px; height: 32px; padding: 0 6px; }
}

/* ---------------------------------------------------------------- menu popover */
.cx-menu {
  position: fixed; z-index: 9700; min-width: 220px; max-width: calc(100vw - 16px); padding: var(--cx-sp-2);
  background: var(--cx-bg); color: var(--cx-ink); border: 1px solid var(--cx-line); border-radius: var(--cx-r-md); box-shadow: var(--cx-shadow);
  font-size: var(--cx-fs-sm); display: grid; gap: 2px;
}
.cx-menu h3 { margin: var(--cx-sp-2) var(--cx-sp-2) 2px; font-size: var(--cx-fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--cx-ink-muted); }
.cx-menu button { all: unset; box-sizing: border-box; cursor: pointer; padding: 7px 10px; border-radius: var(--cx-r-sm); display: flex; justify-content: space-between; gap: 12px; }
.cx-menu button:hover, .cx-menu button:focus-visible { background: var(--cx-bg-raised); }
.cx-menu button:focus-visible { outline: 3px solid var(--cx-focus); outline-offset: -2px; }
.cx-menu [aria-checked="true"]::after { content: "✓"; color: var(--cx-accent); font-weight: 700; }
.cx-menu hr { border: 0; border-top: 1px solid var(--cx-line); margin: 4px 0; width: 100%; }

/* ---------------------------------------------------------------- dialogs */
.jsaas-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: var(--cx-backdrop); padding: var(--cx-sp-4); }
.jsaas-dialog {
  position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--cx-bg); color: var(--cx-ink); border-radius: var(--cx-r-md); padding: 22px 22px 18px; box-shadow: var(--cx-shadow);
  font: var(--cx-fs-md)/1.5 var(--cx-font);
}
.jsaas-dialog h2 { margin: 0 28px 8px 0; font: 600 var(--cx-fs-lg)/1.3 var(--cx-font-display); }
.jsaas-dialog p { margin: 0 0 12px; }
.jsaas-dialog a, .jsaas-checks a { color: var(--cx-link); }
.jsaas-checks { display: grid; gap: 8px; margin: 4px 0 6px; }
.jsaas-checks label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.jsaas-checks input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--cx-accent); }
.jsaas-error { color: var(--cx-danger); min-height: 1.2em; font-size: var(--cx-fs-sm); margin: 0 0 8px; }
.jsaas-note { color: var(--cx-ink-muted); font-size: var(--cx-fs-sm); }
.jsaas-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.jsaas-close { position: absolute; top: 6px; right: 8px; border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: var(--cx-ink-muted); width: 36px; height: 36px; border-radius: 50%; }
.jsaas-close:hover { background: var(--cx-bg-raised); }
.jsaas-idps { margin-top: var(--cx-sp-3); }
.jsaas-idp { display: inline-flex; align-items: center; gap: 10px; }
.jsaas-idp-google { background: #fff; color: #1f1f1f; border: 1px solid #747775; font-family: Roboto, Arial, sans-serif; font-weight: 500; }
.jsaas-sso { margin-top: var(--cx-sp-3); padding-top: var(--cx-sp-3); border-top: 1px solid var(--cx-line); }
.jsaas-sso input { flex: 1 1 160px; }

/* ---------------------------------------------------------------- drawer */
#jsaas-drawer {
  position: fixed; top: 64px; right: 10px; bottom: 96px; z-index: 9500; width: min(390px, calc(100vw - 20px)); overflow: auto;
  background: var(--cx-bg); color: var(--cx-ink); border: 1px solid var(--cx-line); border-radius: var(--cx-r-md); box-shadow: var(--cx-shadow);
  font: var(--cx-fs-sm)/1.45 var(--cx-font);
}
.jsaas-tabs { position: sticky; top: 0; z-index: 1; display: flex; gap: 2px; padding: 8px 40px 0 8px; background: var(--cx-bg); border-bottom: 1px solid var(--cx-line); }
.jsaas-tabs [role="tab"] { border: 0; background: transparent; padding: 8px 10px; cursor: pointer; font: inherit; color: var(--cx-ink-muted); border-bottom: 3px solid transparent; }
.jsaas-tabs [aria-selected="true"] { color: var(--cx-accent); border-bottom-color: var(--cx-accent); font-weight: 600; }
.jsaas-tabs .jsaas-close { top: 4px; }
.jsaas-pane { padding: var(--cx-sp-3) var(--cx-sp-3) var(--cx-sp-4); display: grid; gap: var(--cx-sp-2); }
.jsaas-pane h3 { margin: 6px 0 0; font: 600 15px/1.3 var(--cx-font-display); }
.jsaas-pane h4 { margin: 8px 0 0; font-size: var(--cx-fs-sm); }
.jsaas-form { display: grid; gap: 6px; margin: 0; }
.jsaas-grid { padding: var(--cx-sp-2); border: 1px dashed var(--cx-line); border-radius: var(--cx-r-sm); }
.jsaas-ui input[type="text"], .jsaas-ui input[type="search"], .jsaas-ui input[type="number"], .jsaas-ui input[type="email"],
.jsaas-ui input[type="url"], .jsaas-ui input[type="password"], .jsaas-ui select {
  min-width: 0; flex: 1 1 80px; padding: 6px 8px; min-height: 32px; border: 1px solid var(--cx-line); border-radius: var(--cx-r-sm);
  background: var(--cx-bg-raised); color: var(--cx-ink); font: inherit;
}
.jsaas-year { flex: 0 0 76px !important; }
.jsaas-status { margin: 0; min-height: 1.2em; color: var(--cx-ink-muted); }
.jsaas-status[data-kind="error"] { color: var(--cx-danger); }
.jsaas-results, .jsaas-points { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.jsaas-results { list-style: none; padding-left: 0; }
.jsaas-era { color: var(--cx-ink-muted); font-weight: 600; }
.jsaas-link { border: 0; background: none; padding: 2px 0; color: var(--cx-link); cursor: pointer; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 2px; }
.jsaas-link:disabled { color: inherit; cursor: default; text-decoration: none; }
.jsaas-x { border: 0; background: none; color: var(--cx-danger); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; min-width: 24px; min-height: 24px; }
.jsaas-share input { flex: 1 1 100%; }
.jsaas-danger { color: var(--cx-danger) !important; border-color: var(--cx-danger) !important; justify-self: start; }
.jsaas-warn { margin: 0; padding: 6px 8px; border-radius: var(--cx-r-sm); background: var(--cx-warn-bg); color: var(--cx-warn-ink); }
.jsaas-members { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
body.jsaas-picking #atlas-svg { cursor: crosshair !important; }
@media (max-width: 600px) {
  #jsaas-drawer { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 72vh; border-radius: var(--cx-r-md) var(--cx-r-md) 0 0; }
}

/* ---------------------------------------------------------------- map overlay (world units, scaled by JS) */
.jsaas-pin { fill: #9a3324; stroke: #fff; }
.jsaas-route { fill: none; stroke: #9a3324; stroke-dasharray: 3 2; stroke-linejoin: round; opacity: 0.85; }
.jsaas-pin-label { fill: #2c2219; paint-order: stroke; stroke: rgba(246, 241, 230, 0.95); stroke-width: 0.6px; font-family: var(--cx-font); pointer-events: none; }

/* ---------------------------------------------------------------- share / embed / toast */
#jsaas-share-banner {
  position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 9400; max-width: min(560px, calc(100vw - 20px));
  padding: 6px 14px; border-radius: var(--cx-r-sm); background: var(--cx-bg-soft); color: var(--cx-ink); border: 1px solid var(--cx-line);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); font: var(--cx-fs-sm)/1.4 var(--cx-font); text-align: center;
}
#jsaas-share-banner[data-kind="error"] { color: var(--cx-danger); }
#jsaas-watermark {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-18deg); z-index: 9300; pointer-events: none; user-select: none;
  white-space: nowrap; font: 700 clamp(22px, 5vw, 54px)/1 var(--cx-font-display); color: rgba(154, 51, 36, 0.16); letter-spacing: 0.08em;
}
.jsaas-plan, .jsaas-export { align-items: center; }
.jsaas-locked { opacity: 0.8; }
.jsaas-photos { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.jsaas-photo { position: relative; display: inline-block; }
.jsaas-photo img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; display: block; }
.jsaas-photo .jsaas-x { position: absolute; top: -6px; right: -8px; background: var(--cx-bg); border-radius: 50%; }
.jsaas-photo-status { font-size: var(--cx-fs-xs); padding: 1px 6px; border-radius: var(--cx-r-pill); background: var(--cx-bg-raised); color: var(--cx-ink-muted); }
.jsaas-quarantined, .jsaas-rejected { color: var(--cx-danger); }
.jsaas-share-photos summary { cursor: pointer; }
#jsaas-toast {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); z-index: 9800; padding: 8px 14px; border-radius: var(--cx-r-sm);
  background: #2c2219; color: #f6f1e6; font: var(--cx-fs-sm)/1.4 var(--cx-font); box-shadow: var(--cx-shadow); max-width: calc(100vw - 30px);
}
#jsaas-toast[data-kind="ok"] { background: var(--cx-ok-bg); }
#jsaas-toast[data-kind="warn"] { background: #6b4d0e; }
body.jsaas-embed #jsaas-account, body.jsaas-embed #jsaas-open-drawer, body.jsaas-embed .cx-cluster, body.jsaas-embed .cx-tour { display: none !important; }
#jsaas-embed-blocked {
  position: fixed; inset: 0; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--cx-bg); color: var(--cx-ink); font: 15px/1.5 var(--cx-font); text-align: center; padding: 20px;
}

/* ---------------------------------------------------------------- attribution footer (GPL) */
.cx-attrib { margin: 8px 0 0; font: var(--cx-fs-xs)/1.4 var(--cx-font); color: var(--cx-ink-muted); }
.cx-attrib a, .cx-attrib button { color: var(--cx-link); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
/* #156: the licence and version line is small print at the bottom right (shell.js placeFooter): the muted
   ink of the map-data line (7.3:1), not the link blue; links keep a thin underline. */
#cx-attrib { margin: 0; font-size: 11px; line-height: 1.4; color: var(--cx-ink-muted); white-space: nowrap; }
#cx-attrib a, #jp-attrib #cx-attrib a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
#jp-attrib #cx-attrib { flex: 0 0 auto; }
.cx-attrib-float { position: fixed; right: 8px; bottom: 2px; z-index: 8000; padding: 1px 6px; border-radius: 4px; background: var(--cx-bg-soft); }

/* ---------------------------------------------------------------- tour */
.cx-tour {
  position: fixed; z-index: 9900; width: min(340px, calc(100vw - 24px)); padding: var(--cx-sp-4);
  background: var(--cx-bg); color: var(--cx-ink); border: 2px solid var(--cx-accent); border-radius: var(--cx-r-md); box-shadow: var(--cx-shadow);
  font: var(--cx-fs-md)/1.5 var(--cx-font);
}
.cx-tour h2 { margin: 0 0 6px; font: 600 16px/1.3 var(--cx-font-display); }
.cx-tour p { margin: 0 0 12px; }
.cx-tour .cx-step { font-size: var(--cx-fs-xs); color: var(--cx-ink-muted); margin-bottom: 4px; }
.cx-tour-ring { position: fixed; z-index: 9890; pointer-events: none; border: 3px solid var(--cx-accent); border-radius: 12px; box-shadow: 0 0 0 4px rgba(154, 51, 36, 0.2); transition: all .25s; }
@media (prefers-reduced-motion: reduce) { .cx-tour-ring { transition: none; } }

/* ---------------------------------------------------------------- admin page */
body.cx-admin { margin: 0; padding: 20px; background: var(--cx-bg); color: var(--cx-ink); font: var(--cx-fs-md)/1.5 var(--cx-font); }
body.cx-admin h1 { font: 600 20px/1.3 var(--cx-font-display); margin: 0 0 12px; }
body.cx-admin a { color: var(--cx-link); }
body.cx-admin #queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
body.cx-admin .card { background: var(--cx-bg-raised); border: 1px solid var(--cx-line); border-radius: var(--cx-r-md); padding: 10px; display: grid; gap: 6px; }
body.cx-admin .card img { width: 100%; height: 180px; object-fit: contain; background: rgba(127, 127, 127, 0.15); border-radius: 4px; }
body.cx-admin .card ul { margin: 0; padding-left: 18px; }
body.cx-admin .severe { color: var(--cx-danger); font-weight: 600; }

/* ---------------------------------------------------------------- menu groups, about */
.cx-menu-group { display: grid; gap: 2px; }
.cx-about-links { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 4px; }
#cx-menu-btn .cx-label { font-size: var(--cx-fs-xs); }

/* ---------------------------------------------------------------- dark theme for the upstream map
 * Upstream ships one parchment theme. Dark = colour inversion with hue kept (hue-rotate),
 * photos/raster images inverted back. Our own UI inside the header is inverted back too
 * and then uses the dark tokens. */
:root[data-cx-theme="dark"] body { background: #14110e; }
:root[data-cx-theme="dark"] #atlas-shell { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.95); }
:root[data-cx-theme="dark"] #atlas-shell img,
:root[data-cx-theme="dark"] #atlas-shell image,
:root[data-cx-theme="dark"] #atlas-shell .cx-cluster,
:root[data-cx-theme="dark"] #atlas-shell .cx-attrib { filter: contrast(1.053) brightness(1.087) hue-rotate(180deg) invert(1); }
/* The upstream EN/繁 group is empty now; drop it so it takes no gap. */
.locale-pill-group:not(:has(:not(#act-locale):not(#act-locale-hant))) { display: none !important; }
@media (max-width: 380px) {
  /* Very narrow phones: music toggle goes, so the account button stays on screen. */
  #nav-bar .music-pill-group { display: none !important; }
  #nav-bar { padding-left: 8px; padding-right: 8px; }
}
/* Phones: the about link stays while the line fits (390 px), its separator goes with it below that (it
   was left at the end, so the line looked cut off at the screen edge). */
@media (max-width: 379px) { .cx-attrib-float button, .cx-attrib-float .cx-attrib-sep { display: none; } }
@media (max-width: 600px) { .cx-attrib-float { right: 4px; max-width: calc(100% - 8px); box-sizing: border-box; } }
/* Phones: the map-data line is full (/jp/ ja runs to 342 of 382 px) and the /cn/ float wraps onto the
   timeline ticks: no version there (#91); the About dialog and /changelog show it. */
@media (max-width: 600px) { #cx-version, .cx-ver-sep { display: none; } }
:root[data-cx-theme="dark"] #atlas-shell { color-scheme: light; }
:root[data-cx-theme="dark"] #atlas-shell .cx-cluster, :root[data-cx-theme="dark"] #atlas-shell .cx-attrib { color-scheme: dark; }
/* Upstream #271: the author's GitHub Star and its ▾ menu (making-of notes, the author's links) are
   upstream's own header; on our site they go, at every width. The GPL notice is on the licence page
   (saas/licence.html, a small footer link, #155). */
#nav-bar .github-pill-group, #more-popover { display: none !important; }

/* ---------------------------------------------------------------- word mark (saas/logo.svg, inlined) */
/* Sized like the text it replaces: 100 logo units = 1em of the seal's font size, so it follows
 * upstream's breakpoints. viewBox runs from 0.837em above the baseline to 0.393em below it;
 * the negative vertical-align puts the glyph baseline on the text baseline the tagline uses. */
#txt-seal .cx-logo { display: inline-block; height: 1.23em; width: auto; vertical-align: -0.393em; overflow: visible; }
/* The seal's box is one line either way: the logo's taller box made the header 1.6 px taller when it
 * replaced the text name, after the map and the chronicle had been laid out (event callout 2 px off its
 * pin, chronicle scrolled 1 px off; cn-pack e2e runway 20261109-171604). */
#txt-seal { display: inline-block; height: 1em; }

/* Campaign overlay (saas/campaign-layer.js): card above the timeline, bottom left */
#aom-campaign { position: fixed; left: 12px; bottom: 96px; z-index: 40; width: min(360px, calc(100% - 24px)); max-height: 52vh; overflow: auto; box-sizing: border-box; padding: 10px 12px 12px;
  background: var(--cx-bg, #fff); color: var(--cx-ink, #222); border: 2px solid #8a1f1f; border-radius: var(--cx-r-md, 10px); box-shadow: var(--cx-shadow, 0 4px 18px rgba(0,0,0,.18)); font-size: var(--cx-fs-sm, 13px); }
#aom-campaign[hidden] { display: none; }
#aom-campaign h4 { margin: 8px 0 3px; font-size: 13px; }
#aom-campaign ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
#aom-campaign .jsaas-close { position: absolute; top: 4px; right: 6px; }
.aom-cmp-head { padding-right: 28px; }
.aom-cmp-controls { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; }
.aom-cmp-controls .cx-icon-btn { min-width: 32px; height: 30px; justify-content: center; }
.aom-cmp-step { color: var(--cx-ink-muted, #666); }
.aom-cmp-swatch { display: inline-block; width: 18px; height: 4px; border-radius: 2px; vertical-align: 3px; }
.aom-cmp-sides { margin: 4px 0; font-weight: 600; } /* format 1.7: the two camps, as upstream's story-camp legend */
.aom-cmp-vs { color: #7f0000; }
.aom-cmp-forces li.is-later { opacity: .55; }
.aom-cmp-battles li.is-now { background: var(--cx-warn-bg, #fff3d6); border-radius: 4px; }
.aom-cmp-romance { display: inline-block; font-size: 11px; line-height: 1.5; padding: 0 6px; border-radius: 999px; border: 1px dotted #7b3fa0; color: #7b3fa0; white-space: nowrap; }
.aom-cmp-key { margin: 6px 0 0; }
.aom-cmp-line { display: inline-block; width: 22px; height: 0; border-top: 3px solid #555; vertical-align: 3px; }
.aom-cmp-line.is-retreat { border-top-style: dashed; }
.aom-cmp-line.is-romance { border-top: 3px dotted #7b3fa0; }
.aom-campaign-layer { pointer-events: none; }
.aom-cmp-label { font-weight: 600; }
@media (max-width: 600px) { #aom-campaign { bottom: 110px; max-height: 40vh; } }
.aom-cmp-now { margin: 6px 0; padding: 4px 6px; border-left: 3px solid #8a1f1f; background: var(--cx-bg-raised, #faf6ee); }
.aom-cmp-now p { margin: 0 0 4px; }
.aom-cmp-novels li { border: 1px dotted #7b3fa0; border-radius: 6px; padding: 4px 6px; }
.aom-cmp-novels p { margin: 2px 0; }
.aom-cmp-src { font-size: 12px; }
.aom-cmp-src-kind { font-weight: 600; }
.aom-cmp-src.is-novel .aom-cmp-src-kind { color: #7b3fa0; }
.aom-cmp-src.is-history .aom-cmp-src-kind { color: #2c5e2e; }
.aom-cmp-outcome { margin: 6px 0 0; }
/* narrow screens: bottom drawer (folded = title + controls + current move) */
#aom-campaign.is-drawer { left: 0; right: 0; bottom: 0; width: 100%; max-height: 46vh; border-radius: 14px 14px 0 0; border-width: 2px 0 0; box-shadow: 0 -4px 16px rgba(0,0,0,.18); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
#aom-campaign.is-drawer .aom-cmp-head { display: flex; align-items: center; gap: 6px; }
#aom-campaign.is-folded > :not(.aom-cmp-head):not(.aom-cmp-controls) { display: none; }
#aom-campaign.is-folded { max-height: none; }
.aom-cmp-fold { flex: 0 0 auto; min-width: 32px; height: 28px; border: 1px solid var(--cx-line, #ccc); border-radius: 999px; background: var(--cx-bg-raised, #faf6ee); color: inherit; font-size: 14px; }
.aom-cmp-label.is-current { font-weight: 700; }


/* Content list (内容清单, saas/catalog.js): the look of the China atlas panels (#genealogy-card). */
.aom-catalog { --cat-ink: #2b2622; --cat-ink2: #5d554c; --cat-muted: #8d847a; --cat-red: #b5452f; --cat-line: rgba(43, 38, 34, 0.12);
  position: absolute; top: 14px; right: 14px; width: 336px; max-height: calc(100% - 64px); box-sizing: border-box; display: flex; flex-direction: column;
  background: rgba(250, 246, 237, 0.97); color: var(--cat-ink); border: 1px solid var(--cat-line); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(43, 38, 34, 0.14), 0 1px 2px rgba(43, 38, 34, 0.08); padding: 12px 14px; z-index: 12; backdrop-filter: blur(8px);
  font-family: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans', 'Microsoft YaHei', sans-serif; font-size: 12.5px; }
.aom-catalog[hidden] { display: none; }
.aom-catalog.is-fixed { position: fixed; top: 64px; }
.aom-cat-head { flex: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.aom-cat-heading { min-width: 0; flex: 1; }
.aom-cat-tag { font-size: 11px; color: var(--cat-red); font-weight: 600; letter-spacing: 0.08em; }
.aom-cat-title { font-family: 'Noto Serif SC', 'Songti SC', 'Hiragino Mincho ProN', 'SimSun', serif; font-size: 18px; font-weight: 700; margin-top: 2px; }
.aom-cat-close { position: static; }
.aom-catalog input.aom-cat-filter { flex: none; box-sizing: border-box; width: 100%; min-height: 0; height: 30px; margin: 8px 0 6px; padding: 5px 10px; border: 1px solid rgba(181, 69, 47, 0.28); border-radius: 999px; background: #fffdf8; color: var(--cat-ink); font: inherit; font-size: 12px; outline: none; }
.aom-catalog input.aom-cat-filter:focus { border-color: var(--cat-red); box-shadow: 0 0 0 2px rgba(181, 69, 47, 0.15); }
.aom-cat-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-top: 1px dashed var(--cat-line); padding-top: 4px; }
.aom-cat-list, .aom-cat-items { list-style: none; margin: 0; padding: 0; }
.aom-cat-row { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 7px; border: 0; border-radius: 7px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.aom-cat-row:hover, .aom-cat-item:hover { background: rgba(181, 69, 47, 0.09); }
.aom-cat-caret { color: var(--cat-red); width: 10px; flex: none; }
.aom-cat-label { flex: 1; font-family: 'Noto Serif SC', 'Songti SC', 'Hiragino Mincho ProN', serif; font-weight: 700; font-size: 13px; }
.aom-cat-n { color: var(--cat-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.aom-cat-cat.is-open > .aom-cat-row { color: var(--cat-red); }
.aom-cat-items { display: flex; flex-direction: column; gap: 2px; margin: 0 0 6px 10px; padding-left: 6px; border-left: 2px solid rgba(181, 69, 47, 0.25); }
.aom-cat-item { display: grid; grid-template-columns: 52px 1fr; gap: 8px; width: 100%; padding: 5px 7px; border: 0; border-radius: 7px; background: none; color: inherit; font: inherit; font-size: 12px; line-height: 1.35; text-align: left; cursor: pointer; }
.aom-cat-item .t-era { font-family: 'Noto Serif SC', 'Songti SC', serif; font-weight: 700; color: var(--cat-ink2); font-variant-numeric: tabular-nums; }
.aom-cat-item .t-val { min-width: 0; overflow-wrap: anywhere; }
.aom-cat-item .t-sub { display: block; color: var(--cat-muted); font-size: 11px; }
.aom-cat-more { padding: 4px 7px 6px; }
.aom-cat-note { color: var(--cat-muted); margin: 8px 4px; }
.aom-catalog.is-drawer { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 72vh; border-radius: 14px 14px 0 0; border-width: 1px 0 0;
  box-shadow: 0 -6px 20px rgba(43, 38, 34, 0.18); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 45; }
.aom-catalog.is-drawer::before { content: ''; display: block; width: 36px; height: 4px; margin: -4px auto 8px; border-radius: 2px; background: rgba(43, 38, 34, 0.2); }
.aom-cmp-catalog { margin: 8px 0 0; padding-top: 6px; border-top: 1px dashed rgba(0, 0, 0, 0.15); }
.aom-cat-csub { color: var(--cat-muted); font-size: 11px; padding: 2px 7px 4px; }
.aom-cat-item.is-static { cursor: default; }
.aom-cat-item.is-static:hover { background: none; }
.aom-cat-q { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; font-family: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans', sans-serif; font-weight: 400; }
.aom-cat-qm { font-size: 10px; line-height: 1.5; padding: 0 5px; border-radius: 4px; border: 1px solid var(--cat-line); color: var(--cat-ink2); white-space: nowrap; }
.aom-cat-qm.is-draft { border-style: dashed; color: #8a5a00; }
.aom-cat-qm.is-quote { color: var(--cat-red); border-color: rgba(181, 69, 47, 0.3); }
.aom-cat-qm.is-ocr { color: #4a5f7a; }
.aom-cat-label { display: flex; flex-direction: column; }

/* Reader layer (format 1.5): region picker, provenance mark, perspectives box (saas/reader-layer.js). */
.cx-menu-region { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px; font-size: var(--cx-fs-xs); color: var(--cx-ink-muted); }
.cx-menu-region select { font: inherit; color: var(--cx-ink); background: var(--cx-bg-raised); border: 1px solid var(--cx-line); border-radius: var(--cx-r-sm); padding: 2px 4px; max-width: 12em; }
.aom-prov { display: inline-block; margin-left: 4px; padding: 0 4px; border: 1px solid currentColor; border-radius: 3px; font-size: 10px; line-height: 14px; opacity: .7; vertical-align: 1px; cursor: help; white-space: nowrap; }
.aom-persp-btn { margin: 4px 4px 0 0; padding: 1px 8px; font: inherit; font-size: 12px; color: #7a3d00; background: #fff6e8; border: 1px solid #d8a35a; border-radius: 10px; cursor: pointer; }
.aom-persp-btn:hover, .aom-persp-btn:focus-visible { background: #ffe9c7; }
.t-dispute { display: block; margin-top: 4px; color: #7a3d00; }
.aom-persp { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(20, 14, 8, .45); }
.aom-persp-panel { width: min(1080px, 94vw); max-height: 86vh; overflow: auto; padding: 14px 18px 18px; background: #fffaf2; color: #2c2219; border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }
.aom-persp-panel header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.aom-persp-panel h2 { margin: 0; font-size: 17px; }
.aom-persp-close { font-size: 22px; line-height: 1; background: none; border: 0; cursor: pointer; color: inherit; }
.aom-persp-note { margin: 4px 0 12px; font-size: 12px; color: #6b5a48; }
.aom-persp-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.aom-persp-col { padding: 10px 12px; background: #fff; border: 1px solid #e6d8c3; border-radius: 8px; font-size: 13px; }
.aom-persp-col.is-own { border-color: #c4281c; box-shadow: inset 0 3px 0 #c4281c; }
.aom-persp-col h3 { margin: 0 0 4px; font-size: 14px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.aom-persp-own { font-size: 11px; font-weight: 400; color: #c4281c; }
.aom-persp-name { margin: 0 0 6px; font-weight: 600; }
.aom-persp-text { margin: 0 0 8px; }
.aom-persp-orig { color: #8a7a66; font-size: 11px; }
.aom-persp-col h4 { margin: 8px 0 2px; font-size: 12px; color: #6b5a48; }
.aom-persp-figs ul, .aom-persp-srcs { margin: 0; padding-left: 18px; }
.aom-persp-src { margin: 2px 0; }
.aom-persp-src a { color: #233b8e; }
.aom-persp-unverified { margin-left: 6px; padding: 0 4px; font-size: 10px; color: #8e1f14; border: 1px solid #e3a59e; border-radius: 3px; }
.aom-persp-quote { display: block; margin: 2px 0 0; font-size: 11px; color: #6b5a48; }
.aom-persp-scope { color: #8a7a66; }

/* ---------------------------------------------------------------- Explore (saas/explore-hub.js): one button, one panel, three tabs */
.aom-merged { display: none !important; }
.aom-explore {
  position: fixed; top: 76px; right: 12px; bottom: 96px; z-index: 9500; width: min(380px, calc(100vw - 24px)); box-sizing: border-box;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--cx-bg); color: var(--cx-ink); border: 1px solid var(--cx-line); border-radius: var(--cx-r-md); box-shadow: var(--cx-shadow);
  font: var(--cx-fs-sm)/1.45 var(--cx-font);
}
.aom-explore[hidden] { display: none; }
.aom-ex-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 4px 14px; }
.aom-ex-title { margin: 0; font: 600 16px/1.3 var(--cx-font-display, var(--cx-font)); }
.aom-ex-head .jsaas-close { position: static; }
.aom-ex-tabs { flex: none; display: flex; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--cx-line); overflow-x: auto; }
.aom-ex-tabs [role="tab"] { flex: 0 0 auto; border: 0; background: transparent; padding: 8px 10px; cursor: pointer; font: inherit; color: var(--cx-ink-muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.aom-ex-tabs [aria-selected="true"] { color: var(--cx-accent); border-bottom-color: var(--cx-accent); font-weight: 600; }
.aom-ex-tabs [role="tab"]:focus-visible { outline: 2px solid var(--cx-accent); outline-offset: -2px; }
.aom-ex-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.aom-ex-body:focus { outline: none; }
.aom-ex-body.is-catalog { overflow: hidden; display: flex; flex-direction: column; }
/* One search / filter field for the three tabs. */
.aom-explore input[type="search"], .aom-explore .aom-catalog input.aom-cat-filter {
  box-sizing: border-box; width: 100%; height: 32px; min-height: 32px; margin: 0; padding: 5px 12px; border: 1px solid var(--cx-line); border-radius: 999px;
  background: var(--cx-bg-raised); color: var(--cx-ink); font: inherit; outline: none;
}
.aom-explore input[type="search"]:focus, .aom-explore .aom-catalog input.aom-cat-filter:focus { border-color: var(--cx-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cx-accent) 20%, transparent); }
.aom-explore .jsaas-row input[type="search"] { flex: 1 1 120px; width: auto; }
/* The modules' own panels, moved in: no frame, no title or close button of their own. */
.aom-explore #jsaas-drawer { position: static; inset: auto; width: auto; max-height: none; overflow: visible; z-index: auto; border: 0; border-radius: 0; box-shadow: none; background: none; }
.aom-explore #jsaas-drawer > .jsaas-tabs { position: static; padding: 6px 8px 0; border-bottom: 1px dashed var(--cx-line); }
.aom-explore #jsaas-drawer > .jsaas-tabs > .jsaas-close { display: none; }
.aom-explore #jsaas-drawer .jsaas-tabs [role="tab"] { padding: 6px 8px; font-size: 12px; }
.aom-explore .aom-catalog, .aom-explore .aom-catalog.is-drawer { position: static; inset: auto; width: auto; max-height: none; flex: 1; min-height: 0; margin: 0; padding: 10px 14px 12px; border: 0; border-radius: 0; box-shadow: none; background: none; backdrop-filter: none; color: var(--cx-ink); z-index: auto; }
.aom-explore .aom-catalog.is-drawer::before { display: none; }
.aom-explore .aom-cat-head { display: none; }
.aom-explore .aom-catalog input.aom-cat-filter { margin: 0 0 8px; }
.aom-ex-pane { display: grid; gap: 8px; padding: 10px 14px 12px; }
.aom-ex-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.aom-ex-item { display: grid; gap: 1px; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.aom-ex-item:hover, .aom-ex-item:focus-visible { background: var(--cx-bg-raised); }
.aom-ex-item-t { font-weight: 600; }
.aom-ex-item-s { color: var(--cx-ink-muted); font-size: 12px; }
.aom-ex-tag { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #efe1f5; color: #6b2f8a; font-size: 11px; font-weight: 600; }
.aom-ex-note { color: var(--cx-ink-muted); padding: 6px 8px; }
/* Too narrow for a gap: the panel takes the event list's column, which steps aside meanwhile. */
body.aom-explore-docked #jp-side, body.aom-explore-docked #jp-side-btn, body.aom-explore-docked #chronicle-pane { visibility: hidden; }
/* Phones: a bottom drawer. */
.aom-explore.is-drawer { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 72vh; height: 72vh; border-radius: 14px 14px 0 0; border-width: 1px 0 0;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18); padding-bottom: env(safe-area-inset-bottom, 0px); }
.aom-explore.is-drawer::before { content: ''; flex: none; display: block; width: 36px; height: 4px; margin: 6px auto 0; border-radius: 2px; background: var(--cx-line); }
/* Picking a point on the map (My maps): the panel goes to the right edge, as the old drawer sat, so the map is free. */
body.jsaas-picking .aom-explore:not(.is-drawer) { left: auto !important; right: 10px !important; }
/* cn's year balloon cannot be moved: hidden while the Explore panel covers it. */
body.aom-explore-nob #milestone-balloon { visibility: hidden !important; }

/* /cn/: Taiwan and the South China Sea as the cn pack draws them (saas/cn-sensitive.js). */
/* No nine-dash line: the upstream modern provinces include it as code 100000_JD (UPSTREAM-PATCHES.md, overrides). */
#atlas-svg .province-shape.maritime-dash { display: none !important; }
/* /cn/ ja: no source line under the milestone yet (upstream #386 writes it in Chinese; O13). */
html[lang="ja"] #milestone-list .ev-src { display: none; }
.aom-cn-sensitive .aom-cn-taiwan { pointer-events: fill; }
.aom-cn-sensitive .is-explained { cursor: pointer; }
.aom-cn-sensitive .aom-cn-label { fill: #2b2622; stroke: rgba(250, 246, 237, 0.92); paint-order: stroke; font-family: var(--cx-font, sans-serif); font-weight: 600; pointer-events: none; }
.aom-cn-sensitive .aom-cn-label.is-point.is-explained { pointer-events: auto; }
.aom-cn-sensitive .aom-cn-label.is-under-control { visibility: hidden; }
.aom-cn-sensitive .aom-cn-point { vector-effect: non-scaling-stroke; }
#camera-rig text.aom-cn-hidden { display: none; }

/* /cn/ gesture hint (upstream #gesture-guide, top right) starts after the search box (#map-search-box,
   left 14px, 248px wide) instead of running under it when the text is long (ja: two lines). */
#gesture-guide { left: calc(14px + 248px + 10px); right: calc(14px + 32px + 10px); text-align: right; }
/* One line, in the row of the search box and the full-screen button (saas/cn-sensitive.js fitHint keeps
   the whole items that fit); the map's names under it give way while it shows (offControls). */
#gesture-guide { top: 14px; white-space: nowrap; overflow: hidden; box-sizing: border-box; }
#camera-rig text.aom-cn-under-hint { visibility: hidden; }

/* /cn/ below 1100px: the licence line floats at the bottom right (shell.js placeFooter) and covered the
   last timeline ticks (1644, 1912, 現代): the dock leaves it a line of its own. From 1100px up the year
   box ends the timeline row and the line fits under it. */
@media (max-width: 1099px) { body:has(> #cx-attrib.cx-attrib-float) #scrubber-dock { padding-bottom: 34px; } }

/* /cn/ map controls as on /jp/ and /us/ (cn-layout.js, O12): reset view an icon button at the top
   right, the scale bar in upstream's dock at the bottom right of the map (#156), labels under them hidden. */
#cn-map-ctrls { position: absolute; top: 12px; right: 14px; z-index: 9; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
#cn-map-ctrls .canvas-reset-btn { width: 32px; height: 32px; padding: 0; justify-content: center; }
#cn-map-ctrls .canvas-reset-btn .btn-svg { width: 16px; height: 16px; }
#cn-map-ctrls #lbl-reset-camera { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) { #cn-map-ctrls { top: 8px; right: 8px; } }
#atlas-svg text.aom-under-control { visibility: hidden; }