/* ============================================================
   WINDOW — a window over the page: the /experts card dialog (ExpertDialog.astro) and a form's window (FormWindow.astro).
   One look for every window (from the /experts dialog):
   - the page behind dims to 60% black and blurs 0.75rem, as the phone menu's sheet (nav.css, .nav2m__blur);
   - it fades in over 200 ms, the window rising a little; closing plays it back;
   - white on light pages, Background/Grey on dark ones;
   - the corner radius 28 = the button bar's 20 + its 8 from the edge (sums of tokens: radius-md 12 + 8 + 8);
   - the close: the icon in a square 8 from the window's corner, stuck there while a long text scrolls; the square is
     filled only on hover — Surface on a white window, the page black on a dark one.
   Markup: <dialog class="window"> (shown modal: ::backdrop; shown in place: a .window-backdrop sibling) >
   .window__inner > button.window__close (first) + the content.
   Requires: tokens.css, button.css (--btn-h-xs)
   ============================================================ */

.window {
  --window-bar-radius: calc(var(--radius-md) + var(--space-xs)); /* 20: a 12 button + 8 */
  --window-radius: calc(var(--window-bar-radius) + var(--space-xs)); /* 28 */
  --window-pad: var(--pad-card-fluid);
  --window-close: calc(var(--btn-h-xs) + 2 * var(--space-xs)); /* = the action bar's height (/experts); a window with
     one button sets it to that button's height (the form window) */
  /* two widths: wide 40rem — text with a picture (the /experts card); narrow 30rem (.window--narrow)
     — a form, a short message */
  --window-w: 40rem;
  width: min(var(--window-w), calc(100vw - 2 * var(--pad-horizontal)));
  padding: 0; border: 0;
  border-radius: var(--window-radius);
  --window-bg: var(--color-bg-white);
  background: var(--window-bg); color: var(--color-text-inverted);
}
.theme-dark .window, .window.theme-dark { --window-bg: var(--color-bg-grey); background: var(--window-bg); color: var(--color-text); }
.window--narrow { --window-w: 30rem; }

/* the page behind */
.window::backdrop, .window-backdrop {
  background: color-mix(in oklab, var(--color-bg) 60%, transparent);
  -webkit-backdrop-filter: blur(0.75rem);
  backdrop-filter: blur(0.75rem);
}
.window-backdrop { position: fixed; inset: 0; z-index: 1100; }

/* opening and closing: in slower and settling (a decelerating curve, so a full-height sheet glides rather than
   jumps), out quicker; a transition is set on the state it goes to */
.window, .window::backdrop {
  --window-in: 420ms cubic-bezier(0.22, 1, 0.36, 1);
  --window-out: 240ms cubic-bezier(0.4, 0, 1, 1);
  transition: opacity var(--window-out), translate var(--window-out), overlay var(--window-out) allow-discrete, display var(--window-out) allow-discrete;
}
.window[open], .window[open]::backdrop {
  transition: opacity var(--window-in), translate var(--window-in), overlay var(--window-in) allow-discrete, display var(--window-in) allow-discrete;
}
.window:not([open]), .window:not([open])::backdrop { opacity: 0; }
.window:not([open]) { translate: 0 var(--space-md); }
@starting-style {
  .window[open], .window[open]::backdrop { opacity: 0; }
  .window[open] { translate: 0 var(--space-md); }
}
/* phones: every window is a sheet — up from the bottom at the screen's width, at most 90% of its height, scrolling
   inside, the top corners round; it slides in from under the screen's edge and back */
@media (max-width: 47.9375rem) {
  .window {
    inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; max-height: 90dvh;
    border-radius: var(--window-radius) var(--window-radius) 0 0;
  }
  .window:not([open]) { translate: 0 100%; }
  @starting-style { .window[open] { translate: 0 100%; } }
  .window__inner { padding-bottom: max(var(--window-pad), env(safe-area-inset-bottom)); } /* clear of an iPhone's home bar */
}
@media (prefers-reduced-motion: reduce) { .window, .window::backdrop { transition: none; } }

.window__inner { display: flex; flex-direction: column; gap: var(--window-gap, var(--space-sm)); min-height: 100%; padding: var(--window-pad); box-sizing: border-box; }
.window__inner :where(h2, p, ul) { margin: 0; }

/* the close: the first item of the inner column, pulled to the corner by negative margins and taking no room (its bottom
   margin cancels its height and the column's gap); sticky, so it stays in the corner while a long text scrolls */
.window__close {
  position: sticky; top: var(--space-xs); z-index: 2; align-self: flex-end; flex: none;
  margin: calc(var(--space-xs) - var(--window-pad)) calc(var(--space-xs) - var(--window-pad)) calc(-1 * var(--window-close) - var(--window-gap, var(--space-sm)) - var(--space-xs) + var(--window-pad)) 0;
  width: var(--window-close); height: var(--window-close);
  padding: 0; border: 0; border-radius: var(--window-bar-radius); cursor: pointer;
  background: var(--window-bg); color: var(--color-text-inverted); /* the window's own fill: unseen, yet a long text scrolls under it, not under the bare icon */
  transition: background-color var(--duration-hover) var(--ease-hover);
}
.theme-dark .window__close, .window.theme-dark .window__close { color: var(--color-text); }
/* the icon alone, its square filled only on hover (a filled square read as one
   more field): Surface on a white window, the page black on a dark one */
@media (hover: hover) {
  .window__close:hover { background: var(--color-surface); }
  .theme-dark .window__close:hover, .window.theme-dark .window__close:hover { background: var(--color-bg); }
}
.window__close::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: var(--space); height: var(--space); background: currentColor; /* the icon at its own 24 grid, centred */
  mask: url("../icons/close.svg") center / contain no-repeat;
}
.window__close:focus-visible { outline: var(--border-thick) solid var(--color-accent-indigo); outline-offset: var(--border-thin); }
/* the window's top row (a heading) sits beside the close and is centred on it: pulled up to the
   close's top, at least as tall as the close, its text centred in that height, clear of it on the right; what follows
   starts below the close. A picture at the top (the /experts card) needs none: it is narrower than the window. */
.window__clear-close {
  display: flex; align-items: center;
  min-height: var(--window-close);
  margin-top: calc(var(--space-xs) - var(--window-pad));
  padding-right: calc(var(--window-close) + 2 * var(--space-xs) - var(--window-pad));
}