/* Native replacements for the Node site's Arc drawer and accordion, using Arc's own tokens from
   site.css (foundation) so they look the same: <dialog> for the drawer, <details> for the FAQ. */

/* Drawer: a modal dialog anchored to the right edge. */
dialog.drawer {
  --drawer-size: min(30rem, calc(100vw - var(--space-4)));
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  position: fixed;
  inset: 0 0 0 auto;
  width: var(--drawer-size);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-width: 1px 0 1px 1px;
  border-radius: 22px 0 0 22px;
  background: var(--surface-raised);
  color: var(--foreground);
  box-shadow: var(--shadow-floating);
}
dialog.drawer[open] { display: flex; flex-direction: column; }
dialog.drawer:focus { outline: none; }
dialog.drawer::backdrop { background: oklch(10% 0 0 / 0.38); backdrop-filter: blur(4px); }
/* Slides in from its edge and back out; the closing state is animated where allow-discrete is supported. */
dialog.drawer, dialog.drawer::backdrop {
  transition:
    transform var(--duration-considered) var(--ease-drawer),
    opacity var(--duration-standard) var(--ease-standard),
    overlay var(--duration-standard) allow-discrete,
    display var(--duration-standard) allow-discrete;
}
dialog.drawer:not([open]) { transform: translateX(100%); }
dialog.drawer:not([open])::backdrop { opacity: 0; }
@starting-style {
  dialog.drawer[open] { transform: translateX(100%); }
  dialog.drawer[open]::backdrop { opacity: 0; }
}
/* site.css squares the menu's corners, but on the Node site Arc's stylesheet loaded later and kept them round. */
dialog.drawer.algo-navigation-drawer[data-side='right'] { border-radius: 22px 0 0 22px; }

.drawer-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-6);
  border-bottom: 1px solid var(--border);
}
.drawer-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-body);
}
.drawer-description {
  max-width: 32rem;
  margin: var(--space-2) 0 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
/* Centred on the first line of the title rather than its top edge. */
.drawer-close {
  display: grid;
  flex: 0 0 auto;
  width: var(--space-8);
  height: var(--space-8);
  margin-top: calc((var(--text-lg) * var(--leading-body) - var(--space-8)) / 2);
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: color-mix(in oklab, var(--surface-muted) 65%, transparent);
  color: var(--text-secondary);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-spring) var(--ease-spring);
}
@media (hover: hover) and (pointer: fine) {
  .drawer-close:hover { background: var(--surface-muted); color: var(--foreground); }
}
.drawer-close:active { transform: scale(0.96); }
.drawer-body {
  min-height: 0;
  overflow: auto;
  padding: var(--space-6);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
@media (max-width: 40rem) {
  dialog.drawer { --drawer-size: calc(100vw - var(--space-3)); border-radius: 18px 0 0 18px; }
  /* The menu keeps site.css's width, as on the Node site; only its corners tighten. */
  dialog.drawer.algo-navigation-drawer[data-side='right'] { border-radius: 18px 0 0 18px; }
  .drawer-header, .drawer-body { padding: var(--space-5); }
}

/* City form: applied at once by site.js; the button is only rendered for visitors without JavaScript. */
.city-form { margin: 0; }
.city-apply {
  margin-top: 14px;
  padding: 10px 16px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* FAQ: native disclosure widgets in one exclusive group. */
.faq { width: 100%; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-trigger {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding-block: var(--space-5);
  color: var(--foreground);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-body);
  line-height: var(--leading-body);
  list-style: none;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}
.faq-trigger::-webkit-details-marker { display: none; }
.faq-trigger:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.faq-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring);
}
.faq-item[open] .faq-icon { color: var(--foreground); transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .faq-trigger:hover { color: var(--text-secondary); }
  .faq-trigger:hover .faq-icon { color: var(--foreground); }
}
.faq-panel {
  max-width: 62ch;
  padding: 0 var(--space-12) var(--space-6) 0;
  color: var(--text-secondary);
  font-size: var(--text-base);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
/* Opening grows the panel smoothly where the browser can animate to an automatic height. */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    height: 0;
    overflow: clip;
    opacity: 0;
    transition: height var(--duration-standard) var(--ease-standard), opacity var(--duration-standard) var(--ease-standard),
      content-visibility var(--duration-standard) allow-discrete;
  }
  .faq-item[open]::details-content { height: auto; opacity: 1; }
}
@media (max-width: 520px) {
  .faq-trigger { min-height: 68px; font-size: var(--text-base); }
  .faq-panel { padding-right: var(--space-6); font-size: var(--text-sm); }
}

/* The network waits for the mosaic; showing it again restarts its draw-in animation. */
.hero.is-building .hero-network { display: none; }

@media (prefers-reduced-motion: reduce) {
  dialog.drawer, dialog.drawer::backdrop, .drawer-close, .faq-trigger, .faq-icon, .faq-item::details-content { transition: none; }
}