/* =============================================================================
   ics-window - the ESimSol dialog window (spec: component-specs/ics-window.md
   section 7; 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. Everything reads
   the theme's token tiers (css/tokens/): brand gold title bar with ink text,
   gold standard border, the panel radius, the window shadow, Inter 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).
   Nothing is defined or hard-coded here. 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; }
}