/* skill aideamaker-menu: the AideaMaker sites menu (the globe menu). Copy unchanged.
   Adapted from the site-menu skill's site-menu.css (the Trailhead look), trimmed.
   Dark applies only through :root[data-theme="dark"] (light by default, never the OS preference; standing-rules).
   The only colours are the tokens in the two :root blocks below; a site maps them onto its own theme by redefining them
   after this file (e.g. --am-menu-surface: var(--c-surface)). The rules use tokens only, never a colour literal.
   No outline, ring, border, plate or shadow is ever drawn around a site icon.
   Author: Jeremiah Buttler */
:root {
  --am-menu-surface: #FFFFFF;
  --am-menu-text: #1F1B16;
  --am-menu-muted: #6B5F52;
  --am-menu-rule: #D9D1C4;
  --am-menu-hover: #F1ECE3;
  --am-menu-accent: #C4553C;
  --am-menu-radius: 6px;
}
:root[data-theme="dark"] {
  --am-menu-surface: #22201C;
  --am-menu-text: #EDE7DD;
  --am-menu-muted: #B5AA9B;
  --am-menu-rule: #3A352E;
  --am-menu-hover: #2E2A25;
  --am-menu-accent: #E8886F;
}

.am-sites { position: relative; }
.am-sites > summary { list-style: none; cursor: pointer; }
.am-sites > summary::-webkit-details-marker { display: none; }
.am-sites > summary::marker { content: ""; }
.am-sites-trigger {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: var(--am-menu-radius);
  color: var(--am-menu-text);
}
.am-sites-trigger:hover, .am-sites[open] > .am-sites-trigger { background: var(--am-menu-hover); }
.am-sites-trigger:focus-visible { outline: 2px solid var(--am-menu-accent); outline-offset: 2px; }
.am-sites-icon { display: block; }
.am-sites-route { stroke: var(--am-menu-accent); stroke-width: 1.4; }
.am-sites-dot { fill: var(--am-menu-accent); stroke: none; }
.am-sites-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 19rem;
  max-width: calc(100vw - 1rem);
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  background: var(--am-menu-surface);
  border: 1px solid var(--am-menu-rule);
  border-top: 2px solid var(--am-menu-accent);
  border-radius: var(--am-menu-radius);
  z-index: 200;
  padding: 0.4rem;
}
.am-sites-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--am-menu-radius);
  color: var(--am-menu-text); text-decoration: none;
}
.am-sites-item:hover, .am-sites-item:focus-visible { background: var(--am-menu-hover); }
.am-sites-item:focus-visible { outline: 2px solid var(--am-menu-accent); outline-offset: -2px; }
.am-sites-mark {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: var(--am-menu-radius);
  background: var(--am-menu-hover); color: var(--am-menu-text);
  font-weight: 700; font-size: 0.75rem; line-height: 1;
}
/* Just the icon: no border, no plate, no radius, no shadow. */
.am-sites-mark--icon { padding: 0; overflow: hidden; background: none; border: 0; border-radius: 0; box-shadow: none; }
.am-sites-mark--icon img { display: block; width: 100%; height: 100%; object-fit: contain; border: 0; box-shadow: none; }
.am-sites-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.am-sites-name { font-size: 0.9rem; font-weight: 600; line-height: 1.2; }
.am-sites-host { font-size: 0.78rem; line-height: 1.2; color: var(--am-menu-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-sites-out { flex: none; opacity: 0.45; }
.am-sites-item:hover .am-sites-out, .am-sites-item:focus-visible .am-sites-out { opacity: 1; }

@media (max-width: 860px) {
  .am-sites-trigger { width: 2.75rem; height: 2.75rem; }
  .am-sites-item { min-height: 44px; }
}
@media (max-width: 560px) {
  /* At phone width the list hangs from the whole bar, so it stays on screen wherever the globe sits. */
  .am-sites { position: static; }
  .am-sites-menu { left: 0.5rem; right: auto; top: 100%; min-width: 0; width: min(20rem, calc(100vw - 1rem)); }
}
@media print { .am-sites { display: none; } }