/* GROWLMASTER V2'S UI KIT, ITS WINDOW (src/components/growlmaster-v2/ui/Window.astro, ui.js): the one centered modal
   and what the kit draws in it, out of ui.css (the kit's other parts). Tokens only (tokens.css). */
/* WINDOW: the one centered modal, a translucent blurred card over a dim; it grows in a touch as it opens. It sits in
   what is seen (--g-seen-*: above a phone's keyboard, wherever the page under it was scrolled), its box scrolling when
   that is short, so its field and its button are never behind the keyboard */
.g-window { --g-open: 0; --g-vis: hidden; position: fixed; inset-inline: 0; top: var(--g-seen-top); height: var(--g-seen-h); z-index: 50; display: grid; place-items: center; padding: var(--g-4);
  visibility: var(--g-vis); opacity: var(--g-open); pointer-events: var(--g-pe, none);
  /* seen at once as it opens (its field can take the keyboard), and kept seen while it fades as it shuts */
  transition: opacity var(--g-mid) var(--g-ease), visibility 0s linear calc((1 - var(--g-open)) * var(--g-mid)); }
.g-window.is-open { --g-open: 1; --g-vis: visible; --g-pe: auto; }
.g-window__scrim { position: absolute; inset: 0; background: var(--g-scrim); }
.g-window__box { position: relative; width: min(100%, var(--g-window)); max-height: calc(var(--g-seen-h) - 2 * var(--g-4)); overflow: auto; overscroll-behavior: contain; padding: var(--g-5);
  box-sizing: border-box; border-radius: var(--g-r); corner-shape: squircle; background: var(--g-window-material); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  color: var(--g-text);   /* its own words' colour, wherever it is drawn (over the table's parchment too) */
  box-shadow: var(--g-shadow-lift); transform: scale(calc(var(--g-press) + (1 - var(--g-press)) * var(--g-open))); transition: transform var(--g-mid) var(--g-ease); }
.g-window__head, .g-window .boxhead { display: flex; align-items: center; gap: var(--g-3); margin: calc(-1 * var(--g-2)) calc(-1 * var(--g-3)) var(--g-2) 0; }
.g-window__head h2.g-sr + .g-iconbtn { margin-inline-start: auto; }
.g-window__head h2, .g-window .boxhead h2 { flex: 1; margin: 0; font-family: inherit; font-weight: var(--g-w-bold); font-size: var(--g-t-title3); letter-spacing: var(--g-track-tight); }
.g-window .boxhead .spacer { display: none; }
.g-window__body { display: flex; flex-direction: column; gap: var(--g-4); }
/* the sign-in form inside it (GrowlMaster's one, gmAuth.js), in the kit's look and rhythm */
.g-window__body > .mini { margin: 0 !important; }   /* its own inline margin, from the form's other host */
.g-window__body > div:not([class]) { display: flex; flex-direction: column; gap: var(--g-4); }
.g-window .lform { display: flex; flex-direction: column; gap: var(--g-3); }
.g-window :is(.mini, .lhelp, .lterms, .offer__sub, .ltoggle) { margin: 0; color: var(--g-text-2); font-size: var(--g-t-sub); }
.g-window .lcheck { display: flex; align-items: center; gap: var(--g-3); min-height: var(--g-touch); cursor: pointer; }
.g-window .lcheck input { width: var(--g-icon-box); height: var(--g-icon-box); margin: 0; accent-color: var(--g-accent); }
.g-window .lcheck.is-bad { color: var(--g-danger); }
.g-window .lerr { margin: 0; color: var(--g-danger); font-size: var(--g-t-sub); }
.g-window .lerr.is-info { color: var(--g-text-2); }
.g-window .lerr[hidden] { display: none; }
.g-window .ldiv { display: flex; align-items: center; gap: var(--g-3); color: var(--g-text-3); font-size: var(--g-t-caption); }
.g-window .ldiv::before, .g-window .ldiv::after { content: ""; flex: 1; border-top: var(--g-hair) solid var(--g-separator); }
/* a link in the words: a 44pt tap that keeps the line's own height, no space around it */
.g-window :is(.gm-link, .lforgot) { display: inline-flex; align-items: center; min-height: var(--g-touch); margin-block: calc((1lh - var(--g-touch)) / 2); vertical-align: middle;
  padding: 0; border: 0; background: none; font: inherit; font-weight: var(--g-w-semibold); color: var(--g-accent); cursor: pointer; text-decoration: none; }
.g-window .lforgot { align-self: flex-start; }
.g-window .offer__alt { margin-top: var(--g-3); }
/* CONFIRM, GENERATE, PICKER (in the kit's window) */
.g-confirm, .g-generate, .g-picker { display: flex; flex-direction: column; gap: var(--g-4); }
.g-confirm__text { margin: 0; }
.g-confirm__btns { display: flex; flex-direction: column-reverse; gap: var(--g-2); }
.g-picker__list { max-height: 50dvh; overflow-y: auto; }