/* ==========================================================================
   PulseIQ — Layout v2 and motion system.
   Loaded after styles.css. Three columns: nav · work · AI rail.

   The rail is structural rather than a panel a view can forget to render:
   the shell mounts it from the current route, so "AI insights in every
   section" is enforced by the layout instead of by discipline.
   ========================================================================== */

:root { --rail-w: 316px; }

main { position: relative; }
.work-area { flex: 1; display: flex; min-height: 0; }
.content { flex: 1; overflow-y: auto; padding: var(--s-5) var(--s-5) var(--s-7); scroll-behavior: smooth; }
/* content width lives in type.css */

/* ---------------------------------------------------------------- AI rail */
.ai-rail {
  width: var(--rail-w);
  flex: 0 0 var(--rail-w);
  border-left: 1px solid var(--line-soft);
  background: linear-gradient(180deg, color-mix(in srgb, var(--indigo) 5%, var(--surface)) 0%, var(--surface) 220px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: margin-right var(--t-base) var(--ease), opacity var(--t-fast);
}
body.rail-hidden .ai-rail { margin-right: calc(-1 * var(--rail-w)); opacity: 0; pointer-events: none; visibility: hidden; }

.ai-rail-head {
  display: flex; align-items: center; gap: var(--s-2h);
  padding: var(--s-3h) var(--s-3h); border-bottom: 1px solid var(--line-soft);
}
.ai-spark {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  color: var(--indigo); background: var(--indigo-ghost);
  animation: spark-pulse 3var(--t-slow) ease-in-out infinite;
}
@keyframes spark-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--indigo-ghost); }
  50%      { box-shadow: 0 0 0 5px transparent; }
}
.ai-title { font-size: var(--t-xs); font-weight: 640; letter-spacing: -.005em; }
.ai-sub { font-size: var(--t-xs); color: var(--ink-3); margin-top: -1px; }
.ai-rail-head > .btn:nth-of-type(1) { margin-left: auto; }
#ai-collapse svg { transition: transform var(--t-base); }
body.rail-hidden #ai-collapse svg { transform: rotate(180deg); }

.ai-rail-body { flex: 1; overflow-y: auto; padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2h); }
.ai-rail-foot { padding: var(--s-2h) var(--s-3h); border-top: 1px solid var(--line-soft); }
.ai-skel { height: 76px; flex: none; }

.ai-card {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--ink-3);
  border-radius: var(--r);
  padding: var(--s-3) var(--s-3);
  animation: ai-in var(--t-base) var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 65ms);
}
.ai-card.tone-good { border-left-color: var(--signal); }
.ai-card.tone-info { border-left-color: var(--indigo); }
.ai-card.tone-warn { border-left-color: var(--amber); }
.ai-card.tone-high { border-left-color: var(--coral); }
@keyframes ai-in { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: none; } }

.ai-card-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-1h); }
.ai-ico { display: grid; place-items: center; flex: none; }
.tone-good .ai-ico { color: var(--signal); }
.tone-info .ai-ico { color: var(--indigo); }
.tone-warn .ai-ico { color: var(--amber); }
.tone-high .ai-ico { color: var(--coral); }
.ai-card-title { font-size: 12px; font-weight: 620; line-height: 1.3; }
.ai-card-body { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.55; margin: 0 0 var(--s-2); }
.ai-metric {
  display: block; font-size: var(--t-xs); color: var(--ink-3);
  background: var(--surface-3); border-radius: 5px; padding: var(--s-1) var(--s-2);
  overflow-x: auto; white-space: nowrap;
}
.ai-actions { display: flex; flex-wrap: wrap; gap: var(--s-1h); margin-top: var(--s-2h); }
.ai-empty { text-align: center; padding: var(--s-6) var(--s-3h); color: var(--ink-3); }

/* ---------------------------------------------------------------- motion */
#view { animation: view-in var(--t-base) var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.stagger > * { animation: card-in var(--t-base) var(--ease) backwards; }
.stagger > *:nth-child(1) { animation-delay: 20ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 140ms; }
.stagger > *:nth-child(5) { animation-delay: 180ms; }
.stagger > *:nth-child(6) { animation-delay: 220ms; }
.stagger > *:nth-child(n+7) { animation-delay: 260ms; }
@keyframes card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.card { transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); }
.card.lift:hover { transform: translateY(-2px); border-color: var(--line); box-shadow: var(--shadow); }

.nav-item.active::before {
  content: ""; position: absolute; left: -8px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 17px; border-radius: 0 3px 3px 0; background: var(--signal);
  animation: nav-mark var(--t-base) var(--ease);
}
@keyframes nav-mark { from { height: 0; opacity: 0; } to { height: 17px; opacity: 1; } }

/* chart entrances */
.chart-fade  { animation: view-in var(--t-base) var(--ease); }
.chart-scale { animation: chart-scale var(--t-slow) var(--ease); }
@keyframes chart-scale { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.chart-rise .wf-bar { animation: rise var(--t-slow) var(--ease) backwards; transform-origin: bottom; }
@keyframes rise { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: none; } }
.swarm-dot {
  animation: chart-scale var(--t-base) cubic-bezier(.3, 1.4, .5, 1) backwards;
  transform-box: fill-box; transform-origin: center;
}
.swarm-dot:nth-child(2n) { animation-delay: 40ms; }
.swarm-dot:nth-child(3n) { animation-delay: 80ms; }

/* live pulse on a running timer */
.pulse-ring { position: relative; }
.pulse-ring::after {
  content: ""; position: absolute; inset: -5px; border-radius: inherit;
  border: 1.5px solid var(--signal); opacity: 0;
  animation: ring 2var(--t-fast) cubic-bezier(.2, .6, .4, 1) infinite;
}
@keyframes ring {
  0%   { opacity: .55; transform: scale(.94); }
  70%  { opacity: 0;   transform: scale(1.12); }
  100% { opacity: 0; }
}

/* hero timer */
.timer-hero {
  background:
    radial-gradient(680px 200px at 8% -30%, color-mix(in srgb, var(--signal) 12%, transparent), transparent 70%),
    var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--s-4h) var(--s-5);
  position: relative;
  overflow: hidden;
}
.timer-hero.running { border-color: color-mix(in srgb, var(--signal) 34%, var(--line-soft)); }
.timer-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  opacity: 0; transition: opacity var(--t-base);
}
.timer-hero.running::after { opacity: .75; animation: sweep 2var(--t-slow) linear infinite; }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.big-clock {
  font-family: var(--mono); font-size: 46px; font-weight: 600;
  letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums;
}
.big-clock.live { color: var(--signal); }

/* section rule inside a view */
.sec-head { display: flex; align-items: center; gap: var(--s-2h); margin: 6px 0 -2px; }
.sec-title { font-size: var(--t-xs); font-weight: 640; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.sec-rule { flex: 1; height: 1px; background: var(--line-soft); }

/* chart frame */
.plot { display: flex; justify-content: center; padding: var(--s-1) 0; }
.plot svg { max-width: 100%; height: auto; }

/* responsive — the rail folds before the nav does */
@media (max-width: 1240px) {
  .ai-rail { position: absolute; right: 0; top: 0; bottom: 0; z-index: 20; box-shadow: var(--shadow); }
  /* The open/closed state is carried by body.rail-hidden alone — see system.css.
     This block previously keyed off a .rail-open class that nothing ever set,
     which pinned the rail shut below 1240px with no way to reopen it. */
}
@media (max-width: 900px) {
  .sidebar { --sidebar-w: 62px; }
  .sidebar .brand > div, .nav-item > span, .user-chip > div:not(.avatar), .state-label, .state-time { display: none; }
  .nav-item { justify-content: center; }
  .nav-divider { text-align: center; font-size: var(--t-xs); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* A partly-elapsed day should read as "barely started", not as a solid block. */
.ribbon i { flex: 1 1 auto; min-width: 1px; }
.ribbon i.ribbon-filler { background: var(--surface-3); border-radius: 1px; }

/* An almost-empty day clock deserves a hint rather than a blank dial. */
.plot .chart-animate { max-height: 300px; }