/* =============================================================================
   ics-window — the dialog window (component: js/components/window.js).
   The whole window paint lives here: pre-mount hiding of window source divs,
   the wrapper, the brand title bar with its single close button, the body,
   the modal mask, the resize handles and the arrival motion.

   CLASSES OWNED: .ics-window .ics-window__header .ics-window__title
   .ics-window__close .ics-window__bodysrc .ics-window__mask .ics-window__rs
   (+ --n/--s/--e/--w/--ne/--nw/--se/--sw), the modifiers .ics-window--pre /
   --noshadow / --borderless and .ics-window__mask--pre, and the pre-mount hook
   `[data-ics="window"]:not([data-ics-mounted])`.

   COLOUR, TYPE AND MOTION are never defined here — every one of them reads the
   token tiers (css\tokens\): brand gold title bar with ink text, gold standard
   border, the panel radius, the window shadow, the font at the compact base
   size for the chrome, --motion-base for the arrival, the close-cancel glyph
   from the ics-icons set (lib-v2\ics-icons\ics-icons.css).
   CHROME GEOMETRY IS LITERAL BY DESIGN and is the exception: the close-chip box,
   the title-bar minimum height, the wrapper minimum width and all eight
   resize-handle hit zones are pixel values with no token behind them — they are
   hit targets, not design.
   ⚠ Never name a font here: the typeface is whatever css\tokens\fonts.css ships,
   and naming a font that is not shipped renders the dialog chrome in a fallback
   face.

   TOKENS read: --ics-surface · --ics-text · --ics-border · --ics-panel-radius ·
   --ics-window-shadow · --ics-window-header-bg · --ics-window-header-text ·
   --ics-window-mask · --ics-font · --ics-font-size · --fw-semibold · --font-400
   · --ics-btn-face-hover · --ics-focus-ring · --radius-1 · --space-2 · --space-3
   · --space-4 · --space-6 · --border-1 · --motion-base.

   LINK ORDER. Link after tokens.css and ics-icons.css. Linked by _Meta,
   _MobileLayout and _AuthMeta; messager.css builds on it and follows it.
   ============================================================================= */

/* ---- pre-mount: a window source div stays hidden from first paint until the
   component mounts it (mount stamps data-ics-mounted and moves the div into
   its wrapper) --------------------------------------------------------------- */
[data-ics="window"]:not([data-ics-mounted]) { display: none; }

/* ---- wrapper -------------------------------------------------------------- */
.ics-window {
  position: absolute;
  display: none;                                   /* open() shows it as a flex column: title bar + body */
  flex-direction: column;
  background: var(--ics-surface);
  color: var(--ics-text);
  border: var(--border-1) solid var(--ics-border);
  border-radius: var(--ics-panel-radius);
  box-shadow: var(--ics-window-shadow);
  box-sizing: border-box;
  min-width: 80px;
  max-width: calc(100vw - var(--space-6));         /* never wider/taller than the viewport: the body scrolls inside */
  max-height: calc(100vh - var(--space-6));
  transition: opacity var(--motion-base) ease-out, transform var(--motion-base) ease-out;
}
.ics-window--noshadow { box-shadow: none; }
.ics-window--borderless { border: 0; }

/* ---- arrival: transparent and slightly raised at open, settles into place ------ */
.ics-window--pre { opacity: 0; transform: translateY(-8px); }
.ics-window__mask--pre { opacity: 0; }

/* ---- title bar ---------------------------------------------------------------- */
.ics-window__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--ics-window-header-bg);        /* brand gold */
  color: var(--ics-window-header-text);
  font-family: var(--ics-font);
  font-size: var(--ics-font-size);
  line-height: 1.3;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--ics-panel-radius) var(--ics-panel-radius) 0 0;
  cursor: move;                                    /* the title bar is the drag handle */
  -webkit-user-select: none;
  user-select: none;
  min-height: 24px;
  box-sizing: border-box;
}
.ics-window__title {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;                         /* one line, ellipsis */
  font-weight: var(--fw-semibold);
}

/* the ONE tool: close (corner chip; the glyph is the close-cancel ics-icon) */
.ics-window__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: var(--radius-1);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  font-size: var(--font-400);                      /* icon box = 1.15em -> 16px */
  line-height: 1;
}
.ics-window__close:hover { background: var(--ics-btn-face-hover); }   /* hover cue beyond colour */
.ics-window__close:focus-visible {
  outline: 2px solid var(--ics-focus-ring);
  outline-offset: 1px;
}
.ics-window__close .ics-icon-close-cancel { display: block; vertical-align: 0; }

/* ---- body (= the source div): takes whatever height the frame leaves after the
   title bar - hugs its content when the window has no explicit height, scrolls
   inside the frame when the window is sized (options / handles) smaller ---- */
.ics-window__header { flex: 0 0 auto; }
.ics-window__bodysrc {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  box-sizing: border-box;
  margin: var(--space-3);                          /* body inset from the frame (the div's own padding stays its own) */
}

/* ---- modal mask: full-document dimmer; stacked modals = stacked masks ------- */
.ics-window__mask {
  position: absolute;
  display: none;
  left: 0; top: 0;
  background: var(--ics-window-mask);
  transition: opacity var(--motion-base) ease-out;
}

/* ---- resize handles: 8 directions, ~6px hit zones, directional cursors ------- */
.ics-window__rs { position: absolute; z-index: 1; }
.ics-window__rs--n  { top: -3px; left: 8px; right: 8px; height: 6px; cursor: n-resize; }
.ics-window__rs--s  { bottom: -3px; left: 8px; right: 8px; height: 6px; cursor: s-resize; }
.ics-window__rs--e  { right: -3px; top: 8px; bottom: 8px; width: 6px; cursor: e-resize; }
.ics-window__rs--w  { left: -3px; top: 8px; bottom: 8px; width: 6px; cursor: w-resize; }
.ics-window__rs--ne { top: -3px; right: -3px; width: 10px; height: 10px; cursor: ne-resize; }
.ics-window__rs--nw { top: -3px; left: -3px; width: 10px; height: 10px; cursor: nw-resize; }
.ics-window__rs--se { bottom: -3px; right: -3px; width: 10px; height: 10px; cursor: se-resize; }
.ics-window__rs--sw { bottom: -3px; left: -3px; width: 10px; height: 10px; cursor: sw-resize; }

/* ---- reduced motion: arrive instantly ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .ics-window, .ics-window__mask { transition: none; }
}