/* =============================================================================
   ics-window - the ESimSol 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.
   COLOUR, TYPE AND MOTION are never defined here - every one of them reads the
   theme's token tiers (css/tokens/): brand gold title bar with ink text, gold
   standard border, the panel radius, the window shadow, the theme 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 theme. (This paragraph used to read "Nothing is defined or
   hard-coded here", which was false of about fifteen values; a header that lies
   is a defect in this codebase.)
   ⚠ It also used to name "Inter" as the chrome font. Never name a font here: the
   typeface is whatever css/tokens/fonts.css ships, and naming an unshipped font
   is what once rendered these dialogs in dingbats.
   Class names are the component's own (.ics-window, .ics-window__*, .ics-window--*).
   Load after tokens.css + ics-icons.css (app.css order, or the shell's links).
   ============================================================================= */

/* ---- 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; }
}