/* ==========================================================================
   estimato — overlays: modals, toast, connection pill, room menu, FAQ, Support.
   Planning wall design system (docs/design/planning-wall.md §5 «Модалки»,
   «Тост», §6). Loaded last, after styles.css (tokens, buttons), room.css,
   table.css, landing.css and polls.css (poll modal content). States come from
   app.js — `.modal.show`, `.toast {type} show`, `.connection-status {state}
   show`, `.method-btn[aria-pressed]` — and ui-dialogs.js handles focus, Esc,
   inert.

   1. Modal frame: scrim, sheet, header, close button, body typography
   2. Toast
   3. Connection pill
   4. Room menu (<details class="room-menu">)
   5. FAQ (<details class="faq-item">)
   6. Support: method switch, addresses, QR
   7. Phones (≤ 640px): bottom sheet
   8. Motion (no-preference only) and reduced motion
   ========================================================================== */

/* 1. Modal frame ------------------------------------------------------------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  padding: var(--s-7) var(--s-4);
  overflow-y: auto;
  background: rgb(20 27 61 / 0.55);
}

[data-theme="dark"] .modal {
  background: rgb(0 0 0 / 0.6);
}

.modal.show {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.modal-content {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto var(--s-7);
  border-radius: var(--r-sheet);
  background: var(--sheet);
  color: var(--ink);
  box-shadow: var(--lift-2);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-5) var(--s-3);
  border-bottom: 1px dashed var(--rule);
}

.modal-title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.modal .logo-icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.modal .logo-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.modal-header h2 {
  margin: 0;
  font-size: var(--fs-3);
  overflow-wrap: anywhere;
}

.modal-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--muted);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.modal-close:hover {
  background: var(--tint);
  color: var(--cobalt);
}

.modal-body {
  padding: var(--s-5);
  line-height: 1.6;
}

.modal-body h3 {
  margin: var(--s-5) 0 var(--s-2);
  font-size: var(--fs-2);
}

.modal-body h3:first-child {
  margin-top: 0;
}

.modal-body p {
  margin: 0 0 var(--s-3);
}

.modal-body p:last-child {
  margin-bottom: 0;
}

.modal-body ul {
  margin: 0 0 var(--s-4);
  padding-left: 1.25em;
}

.modal-body li {
  margin-bottom: var(--s-1);
}

.modal-body a {
  color: var(--cobalt);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 2. Toast (§5: top centre, a sheet with a coloured bar on the left; §6: 220ms).
   At rest it is fully hidden — opacity, visibility and the lift all collapse. */
.toast {
  position: fixed;
  top: calc(var(--s-4) + env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 1100;
  width: max-content; /* left: 50% would otherwise cap the box at half the viewport */
  max-width: min(92vw, 420px);
  padding: var(--s-3) var(--s-4);
  border-left: 4px solid var(--cobalt);
  border-radius: var(--r-control);
  background: var(--sheet);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: var(--lift-2);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -12px);
  transition:
    opacity 220ms var(--ease-out),
    transform 220ms var(--ease-out),
    visibility 0s linear 220ms;
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
  pointer-events: auto;
}

.toast.success {
  border-left-color: var(--success);
}

.toast.error {
  border-left-color: var(--marker-red);
}

.toast.info {
  border-left-color: var(--cobalt);
}

.toast.warning {
  border-left-color: var(--highlighter);
}

/* 3. Connection pill: created by app.js on the first reconnect, a dot + words */
.connection-status {
  position: fixed;
  top: calc(var(--s-3) + env(safe-area-inset-top, 0px));
  left: 50%;
  z-index: 1050;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  width: max-content;
  min-height: 36px;
  padding: 0 var(--s-4) 0 var(--s-3);
  border-radius: var(--r-pill);
  background: var(--sheet);
  color: var(--ink);
  font-size: var(--fs-1);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--lift-2);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition:
    opacity var(--t-base) var(--ease-out),
    transform var(--t-base) var(--ease-out),
    visibility 0s linear var(--t-base);
  pointer-events: none;
}

.connection-status::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--control);
}

.connection-status.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.connection-status.warning::before {
  background: var(--highlighter);
  box-shadow: inset 0 0 0 1px rgb(20 27 61 / 0.3);
}

.connection-status.success::before {
  background: var(--success);
}

.connection-status.error::before {
  background: var(--marker-red);
}

/* 4. Room menu: theme, Leave room, Help proxies to the footer links.
   Esc / outside click: ui-dialogs.js. The header grid places .room-menu. */
.room-menu {
  position: relative;
}

.room-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-control);
  color: var(--ink);
  list-style: none;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}

.room-menu-btn::-webkit-details-marker {
  display: none;
}

.room-menu-btn:hover,
.room-menu[open] > .room-menu-btn {
  background: var(--tint);
  color: var(--cobalt);
}

.room-menu-panel {
  position: absolute;
  top: calc(100% + var(--s-1));
  right: 0;
  z-index: 20;
  min-width: 232px;
  padding: var(--s-2);
  border-radius: 12px;
  background: var(--sheet);
  box-shadow: var(--lift-2);
}

.room-menu-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.room-menu-item:hover {
  background: var(--tint);
  color: var(--cobalt);
}

.room-menu-group {
  margin-top: var(--s-1);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--rule);
}

.room-menu-heading {
  padding: var(--s-1) var(--s-3) 0;
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--muted);
}

/* 5. FAQ: a list of disclosures with a plus/minus in the margin */
.faq-item + .faq-item {
  border-top: 1px dashed var(--rule);
}

.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 44px;
  padding: var(--s-2) 0;
  list-style: none;
  font-weight: 600;
  cursor: pointer;
}

.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary:hover {
  color: var(--cobalt);
}

.faq-item > summary::after {
  content: "+";
  flex: none;
  width: 24px;
  color: var(--cobalt);
  font-family: var(--font-numerals);
  font-size: var(--fs-3);
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.faq-item[open] > summary::after {
  content: "−";
}

.faq-item > p {
  margin: 0 0 var(--s-3);
  color: var(--muted);
}

/* 6. Support: the method switch is a segmented control (like the room tabs)
   keyed on aria-pressed; app.js also swaps btn-primary/btn-secondary, which
   these rules override. Addresses wrap; the QR keeps a white backing. */
.method-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin: var(--s-2) 0 var(--s-5);
  padding: var(--s-1);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.method-toggle .method-btn {
  min-height: 44px;
  padding: 0 var(--s-3);
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  box-shadow: none;
}

.method-toggle .method-btn:hover:not(:disabled) {
  background: var(--tint);
  color: var(--cobalt);
  box-shadow: none;
}

.method-toggle .method-btn[aria-pressed="true"] {
  background: var(--tint);
  color: var(--cobalt);
  font-weight: 700;
}

.method-panel h3 {
  margin: 0 0 var(--s-3);
}

.method-panel p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
}

.method-panel code {
  flex: 1 1 200px;
  min-width: 0;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-note);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-1);
  overflow-wrap: anywhere;
}

.copy-btn {
  min-height: 40px;
  padding: 0 var(--s-3);
  font-size: var(--fs-1);
}

.qr-wrap {
  display: flex;
  justify-content: center;
  margin: var(--s-4) 0 var(--s-2);
}

.qr {
  display: block;
  width: 180px;
  height: auto;
  padding: var(--s-2);
  border-radius: var(--r-control);
  background: #fff; /* QR codes stay black on white in both themes */
  box-shadow: inset 0 0 0 1px var(--rule);
}

/* 7. Phones: every modal is a bottom sheet on the full width */
@media (max-width: 640px) {
  .modal.show {
    align-items: flex-end;
    padding: 0;
  }

  .modal-content {
    max-width: none;
    max-height: calc(100vh - var(--s-6));
    max-height: calc(100dvh - var(--s-6));
    margin: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-radius: var(--r-sheet) var(--r-sheet) 0 0;
    overflow-y: auto;
  }

  .modal-header {
    padding: var(--s-4) var(--s-4) var(--s-3);
  }

  .modal-body {
    padding: var(--s-4);
  }

  .toast {
    max-width: calc(100vw - var(--s-6));
  }
}

/* 8. Motion (§6: modal 180ms) — animations exist only without reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .modal.show {
    animation: overlay-scrim-in 180ms var(--ease-out);
  }

  .modal.show .modal-content {
    animation: overlay-sheet-in 180ms var(--ease-out);
  }

  @keyframes overlay-scrim-in {
    from {
      opacity: 0;
    }
  }

  @keyframes overlay-sheet-in {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.98);
    }
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 640px) {
  .modal.show .modal-content {
    animation: overlay-sheet-up 180ms var(--ease-out);
  }

  @keyframes overlay-sheet-up {
    from {
      transform: translateY(100%);
    }
  }
}

/* Reduced motion: the animations above do not exist; token durations collapse
   to 0 in styles.css; the literal 220ms of the toast is removed here. */
@media (prefers-reduced-motion: reduce) {
  .toast,
  .connection-status,
  .modal-close,
  .room-menu-btn {
    transition: none;
  }
}