/* winmgr.css — chrome for WN_WIN managed windows + WN_TIP tooltips.
 *
 * Uses the shared design tokens (--bg/--panel/--card/--line/--text/--muted/
 * --accent/--shadow) web-core defines on :root, plus --font-display and
 * --font-mono (also web-core-owned); every font-family/shadow/color below
 * falls back to a sane literal so this file still renders correctly before
 * those tokens land. No other hardcoded hex values — the tooltip bubble is
 * the one deliberate exception (see note below), per AESTHETICS.md §2.1. */

:root {
  --wn-font-display: var(--font-display, 'Nunito', -apple-system, 'Segoe UI', Roboto, sans-serif);
  --wn-font-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace);
  --wn-shadow: var(--shadow, 0 6px 24px rgba(184, 101, 46, 0.14));
}

.wn-win {
  position: absolute;
  /* Never let a window claim more room than the surface it floats over —
     this is the belt to the placement/reflow logic's suspenders at the
     1180/1040/820/560px check widths (AESTHETICS.md §2.7). */
  max-width: min(420px, calc(100% - 16px));
  max-height: calc(100% - 16px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--wn-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 1100;
  font-family: var(--wn-font-display);
  animation: wn-rise-in .22s ease-out;
  transition: height .15s ease, box-shadow .15s ease;
}
.wn-win.wn-dragging { box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28); transition: none; animation: none; }
.wn-win.wn-collapsed { overflow: hidden; }
.wn-win[hidden] { display: none; }

@keyframes wn-rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── header: identical layout on every window — title left, actions right,
   28px hit targets (AESTHETICS.md §2.3 hard minimum) ── */
.wn-win-head {
  flex: none;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px 0 6px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.wn-win.wn-dragging .wn-win-head { cursor: grabbing; }
.wn-win.wn-collapsed .wn-win-head { border-bottom: none; }

.wn-win-handle {
  flex: none;
  width: 10px;
  height: 14px;
  background-image:
    linear-gradient(var(--muted) 1.5px, transparent 1.5px),
    linear-gradient(var(--muted) 1.5px, transparent 1.5px);
  background-size: 3px 3px;
  background-position: 0 0, 3px 0;
  background-repeat: repeat-y;
  opacity: .45;
  flex-shrink: 0;
}

.wn-win-title {
  flex: 1;
  min-width: 0; /* required so this can shrink/ellipsize instead of forcing the header to overflow (AESTHETICS.md §2.6) */
  font-family: var(--wn-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wn-win-btns { display: flex; align-items: center; gap: 2px; flex: none; }
.wn-win-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  font-family: var(--wn-font-display);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.wn-win-btn:hover { background: var(--card); color: var(--text); }
.wn-win-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wn-win-btn:active { background: var(--line); }
.wn-win-btn.wn-win-close:hover { color: var(--err); }
.wn-win-btn.wn-win-close:active { background: var(--err); color: #fff; }

.wn-win-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  /* theme-matched scrollbar (owner feedback: dark is the default theme, and
     scrollbars inside windows must follow it) — color-scheme is also set
     per-instance from JS (winmgr.js applyTheme()) to track the live
     data-theme toggle; this is the CSS-only fallback/initial state. */
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) var(--panel);
}
:root[data-theme="light"] .wn-win-body { color-scheme: light; }
.wn-win-body::-webkit-scrollbar { width: 10px; height: 10px; }
.wn-win-body::-webkit-scrollbar-track { background: var(--panel); }
.wn-win-body::-webkit-scrollbar-thumb {
  background: var(--line); border-radius: 999px; border: 2px solid var(--panel);
}
.wn-win-body::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.wn-win.wn-collapsed .wn-win-body { display: none; }

/* ── minimize dock strips ── */
.wn-dock-strip {
  position: absolute;
  top: 44px;
  bottom: calc(24px + 8px);
  width: 30px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding: 6px 0;
  z-index: 1090;
  pointer-events: none;
}
.wn-dock-strip:not(.wn-dock-empty) { pointer-events: auto; }
.wn-dock-left { left: 0; }
.wn-dock-right { right: 0; }

.wn-dock-tab {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  border-radius: 10px;
  font-family: var(--wn-font-display);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
  min-height: 28px;
  min-width: 28px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  box-shadow: var(--wn-shadow);
  max-height: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wn-dock-left .wn-dock-tab { writing-mode: vertical-lr; }
.wn-dock-tab:hover { color: var(--text); border-color: var(--accent); }
.wn-dock-tab:active { background: var(--card); }
.wn-dock-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── mobile: bottom sheets (one open at a time; others in the tab strip
   below — this, plus the default <640px mobile breakpoint, is what keeps
   windows from ever overlapping at the 560px check width) ── */
.wn-mobile .wn-win.wn-sheet {
  position: fixed;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: 100vw !important;
  max-width: 100vw;
  max-height: min(70vh, calc(100vh - 56px));
  height: auto !important;
  border-radius: 16px 16px 0 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  z-index: 1500;
}
.wn-mobile .wn-win.wn-sheet.wn-collapsed { max-height: 36px; }
.wn-mobile .wn-win.wn-sheet .wn-win-body { max-height: calc(min(70vh, calc(100vh - 56px)) - 36px); }
.wn-mobile .wn-win.wn-sheet .wn-win-head { cursor: default; }
/* only the front-most (non-minimized) sheet shows; others are reachable via the tab strip */
.wn-mobile .wn-win.wn-sheet[hidden] { display: none; }

.wn-sheet-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1400;
  display: none;
  gap: 6px;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--panel);
  border-top: 1px solid var(--line);
  overflow-x: auto;
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) var(--panel);
}
:root[data-theme="light"] .wn-sheet-tabs { color-scheme: light; }
.wn-sheet-tabs::-webkit-scrollbar { height: 8px; }
.wn-sheet-tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.wn-sheet-tabs.wn-sheet-tabs-show { display: flex; }
.wn-sheet-tab {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  border-radius: 999px;
  font-family: var(--wn-font-display);
  font-size: 12px;
  padding: 6px 12px;
  min-height: 28px;
  white-space: nowrap;
  cursor: pointer;
  flex: none;
}
.wn-sheet-tab:hover { color: var(--text); border-color: var(--accent); }
.wn-sheet-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.wn-sheet-tab.wn-sheet-tab-active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }

/* ── tooltips (WN_TIP) ──
   Deliberately the same dark bubble in both themes (native-OS tooltip
   convention; keeps contrast high over map imagery of any brightness) —
   the one place this file still uses literal hex rather than a token,
   same exception style.css documents implicitly for status colors. */
.wn-tip {
  position: fixed;
  z-index: 4000;
  max-width: 280px;
  background: #1b2330;
  color: #f2f5f9;
  font-family: var(--wn-font-display);
  font-size: 12.5px;
  line-height: 1.4;
  padding: 7px 10px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.wn-tip[hidden] { display: none; }
.wn-tip-text {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.wn-tip-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: rotate(45deg);
}
.wn-tip[data-side="top"] .wn-tip-arrow { bottom: -5px; left: 50%; margin-left: -5px; }
.wn-tip[data-side="bottom"] .wn-tip-arrow { top: -5px; left: 50%; margin-left: -5px; }
.wn-tip[data-side="left"] .wn-tip-arrow { right: -5px; top: 50%; margin-top: -5px; }
.wn-tip[data-side="right"] .wn-tip-arrow { left: -5px; top: 50%; margin-top: -5px; }

@media (prefers-reduced-motion: reduce) {
  .wn-win, .wn-win-btn, .wn-dock-tab, .wn-sheet-tab { transition: none !important; animation: none !important; }
}