/* css/layout.css — layout-owned, FINAL.
   Chrome for the widget frames the layout engine positions. STRICT B&W:
   every color/size/timing here comes from design-tokens.css. Real color is
   forbidden — it belongs ONLY inside .widget-body (filled by each widget).

   Positioning contract: the engine sets left/top/width/height INLINE (px) on
   each .widget BEFORE running Web-Animations. FLIP glides use transforms only,
   so nothing here may set transform/transition on .widget — the engine owns
   motion. We keep the box flat and GPU-friendly (will-change on transform). */

/* The layer is click-transparent; each widget re-enables pointer events.
   (base.css already sets #widget-layer inset/z/pointer-events — restated here
   defensively so this sheet is self-describing without fighting the cascade.) */
#widget-layer {
  pointer-events: none;
}

.widget {
  position: fixed;               /* left/top/width/height set inline by engine */
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--widget-radius);
  color: var(--fg);
  /* Flat by design — no glow/shadow on the frame. */
  will-change: transform, opacity;
  /* transform-origin center so pulse/trash scaling stays visually centered. */
  transform-origin: center center;
  contain: layout paint;         /* isolate reflow/paint to each widget box */
  /* Assistant-controlled overrides (v3 #12), default = no-op. */
  opacity: var(--widget-opacity, 1);
}

/* Accent border tint when the assistant recolors a widget ("zrób zegar czerwony").
   Color lives on the frame edge + head divider — the body stays free for content. */
.widget.has-accent {
  border-color: var(--widget-accent, var(--line-strong));
}
.widget.has-accent .widget-head { border-bottom-color: var(--widget-accent, var(--line)); }

/* Aura / "podkreślenie" (v3 #12): a soft double glow around the frame. Uses the
   accent when set, else white. Animated with a gentle breathing pulse (opacity
   only → cheap). contain:paint is dropped while emphasized so the glow isn't clipped. */
.widget.is-emphasized {
  contain: layout;
  border-color: var(--widget-accent, var(--fg));
  box-shadow:
    0 0 0 1px var(--widget-accent, rgba(255,255,255,0.65)),
    0 0 22px 2px var(--widget-accent, rgba(255,255,255,0.32)),
    0 0 60px 8px var(--widget-accent, rgba(255,255,255,0.18));
  animation: widget-aura 2.4s var(--ease-in-out) infinite alternate;
}
@keyframes widget-aura {
  from { box-shadow:
    0 0 0 1px var(--widget-accent, rgba(255,255,255,0.55)),
    0 0 16px 2px var(--widget-accent, rgba(255,255,255,0.22)),
    0 0 44px 6px var(--widget-accent, rgba(255,255,255,0.12)); }
  to   { box-shadow:
    0 0 0 1px var(--widget-accent, rgba(255,255,255,0.80)),
    0 0 30px 4px var(--widget-accent, rgba(255,255,255,0.42)),
    0 0 78px 12px var(--widget-accent, rgba(255,255,255,0.24)); }
}
@media (prefers-reduced-motion: reduce) {
  .widget.is-emphasized { animation: none; }
}

/* Header — TITLE ONLY (v2 point 6: the user never manipulates widgets, so there
   are NO pin/close buttons and no controls cluster). Mono, uppercase, wide
   tracking, hairline divider under it. */
.widget-head {
  height: 28px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--line);
  color: var(--fg-dim);
  font: 500 var(--text-xs)/1 var(--font-mono);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  user-select: none;
}

/* Title text truncates instead of overflowing the frame. */
.widget-head .widget-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Pinned marker — small square before the title, B&W only. Pinning is an
   assistant-only API; this is a passive status glyph, not an interactive control. */
.widget.is-pinned .widget-head::before {
  content: '▪';
  margin-right: var(--space-1);
  color: var(--fg);
  flex: 0 0 auto;
}

/* Body — the ONLY place color is allowed. Chrome stays neutral. */
.widget-body {
  flex: 1 1 auto;
  min-height: 0;                 /* let flex child scroll instead of overflowing */
  overflow: auto;
  padding: var(--space-4);
  font-family: var(--font-mono);
  color: var(--fg);
}

/* Respect reduced-motion. All widget motion is driven by the layout engine via
   the Web Animations API, which already checks prefers-reduced-motion in JS and
   lands on the final frame without animating. The frame chrome itself carries no
   CSS transitions (no interactive controls remain), so there is nothing to
   neutralize here — the block is kept as the explicit home for any future
   chrome-level motion so it degrades honestly. */
@media (prefers-reduced-motion: reduce) {
  .widget { will-change: auto; }
}