/* ============================================================================
   Vibe Dashboard v2 — What's new (VIB-156)
   Panel: release highlight history (window.WhatsNewView). Toast: bottom-right
   news toast in the dashboard shell (app.jsx NewsToast). Builds on the shared
   v2-shell.css kit (.v2-card/.v2-card-head/.v2-empty) — every value below
   reads var(--v-*), no hardcoded hex.
   ============================================================================ */

/* ---- panel (dashboard refresh Sep 15, R2 A17–A23) ----
   ONE card: tab bar (Updates / Technical, mono count pills, caption right),
   release rows on a 150px / 1fr grid, footer count. Values are the mock's
   (docs/design/dashboard-refresh-sep15/mock/whats-new.html); alpha variants
   are color-mix over a --v-* token, never a literal. */
.wn-view {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.wn-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 6px;
}
.wn-head-text { flex: 1 1 260px; min-width: 0; }
.wn-head-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.6px;
  color: var(--v-heading);
}
.wn-head-sub { font-size: 14.5px; color: var(--v-text-2); margin-top: 5px; }
.wn-head-rail { text-align: right; flex-shrink: 0; }
.wn-head-rail-label {
  font-family: var(--v-font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  color: var(--v-text-2);
}
.wn-head-rail-value {
  font-family: var(--v-font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--v-text);
  margin-top: 3px;
}

.wn-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 0 22px;
  border-bottom: 1px solid var(--v-border-soft);
  flex-wrap: wrap;
}
.wn-tabs { display: flex; align-items: center; gap: 22px; }
.wn-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0 14px;
  margin-bottom: -1px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--v-text-2);
  cursor: pointer;
}
.wn-tab:hover { color: var(--v-text); }
.wn-tab.is-active { color: var(--v-text); border-bottom-color: var(--v-link); }
.wn-tab:focus-visible { outline: 2px solid var(--v-blue); outline-offset: 2px; border-radius: 4px; }
.wn-tab-count {
  font-family: var(--v-font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--v-r-pill);
  background: var(--v-border-soft);
  color: var(--v-text-2);
}
.wn-tab-caption { font-size: 12.5px; color: var(--v-text-2); padding: 8px 0; }

.wn-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px 28px;
  align-items: start;
  padding: 18px 22px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--v-white) 5%, transparent);
}
.wn-row-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wn-row-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wn-row-version {
  font-family: var(--v-font-mono);
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--v-text);
}
.wn-row-date { font-family: var(--v-font-mono); font-size: 11px; color: var(--v-text-3); }
.wn-badge {
  font-family: var(--v-font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  border-radius: 4px;
  padding: 2px 6px;
}
.wn-badge-latest {
  color: var(--v-green);
  border: 1px solid color-mix(in srgb, var(--v-green) 35%, transparent);
}
.wn-badge-tech {
  color: var(--v-text-2);
  border: 1px solid color-mix(in srgb, var(--v-text-2) 35%, transparent);
}
.wn-row-notes { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wn-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--v-text-table);
  overflow-wrap: anywhere;
}
.wn-dot {
  width: 5px;
  height: 5px;
  margin-top: 8px;
  flex-shrink: 0;
  border-radius: var(--v-r-pill);
  background: var(--v-link);
}
.wn-note-tech { color: var(--v-text-2); }
.wn-note-tech .wn-dot { background: var(--v-text-3); }
.wn-empty { padding: 18px 22px 20px; }

.wn-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 22px;
}
.wn-footer-count { font-size: 12.5px; color: var(--v-text-3); }
.wn-more {
  padding: 7px 13px;
  border: 1px solid var(--v-border-well);
  border-radius: var(--v-r-btn);
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--v-text);
  cursor: pointer;
}
.wn-more:hover { background: var(--v-border-soft); }
.wn-more:focus-visible { outline: 2px solid var(--v-blue); outline-offset: 2px; }

@media (max-width: 640px) {
  .wn-row { grid-template-columns: minmax(0, 1fr); }
  /* S7 P-WN-3: mock button 13px / #C6CBD6 / .1 border (pad already 7px 13px). */
  .wn-more { font-size: 13px; color: var(--v-text-table); border-color: rgba(255, 255, 255, .1); }
  /* S7 P-WN-4 (keep, re-skin): the full-empty state at row pad 18px 22px 20px. */
  .wn-view > .v2-empty { padding: 18px 22px 20px; }
}

/* S7 P-WN-1: below 560 the mock aligns the CURRENT VERSION rail left so the
   label and the value share one left edge under the subtitle. */
@media (max-width: 560px) {
  .wn-head-rail { text-align: left; }
}

/* ---- bottom-right news toast (S8 C43) ----
   A 300px card on --v-surface: .07 border, radius 12, mono uppercase kicker
   10.5px / .14em (≈1.5px) in the overline colour, link in --v-link. Shadow:
   the mock's card family (0 40px 90px -46px rgba(0,0,0,.75)) replaces the old
   0 12px 32px .35 — one elevation language across the app; the border carries
   the edge on the dark ground. It never sits on top of page controls for long:
   it auto-dismisses (app.jsx NewsToast, 12s, paused on hover/focus), only the
   card itself takes pointer events, and while it is mounted the content
   column reserves its footprint at the bottom (body.has-news-toast) so the
   page's last controls scroll clear of it. */
.wn-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  width: 300px;
  max-width: calc(100vw - 32px);
  padding: 14px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: auto;
  border: 1px solid var(--v-border);
  border-radius: var(--v-r-card);
  background: var(--v-surface);
  box-shadow: 0 40px 90px -46px rgba(0, 0, 0, .75);
}
body.has-news-toast .v2-main > .v2-content { padding-bottom: 152px; }
.wn-toast-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: var(--v-icon-btn);
  height: var(--v-icon-btn);
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--v-r-icon);
  background: transparent;
  color: var(--v-text-3);
  cursor: pointer;
  padding: 0;
}
.wn-toast-close:hover { color: var(--v-text-2); background: var(--v-border-row); }
.wn-toast-close:focus-visible { outline: 2px solid var(--v-blue); outline-offset: 1px; }
.wn-toast-kicker {
  font-family: var(--v-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--v-text-overline);
  padding-right: 22px;
}
.wn-toast-highlight {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--v-text);
}
.wn-toast-link {
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--v-link);
  text-decoration: none;
}
.wn-toast-link:hover { color: var(--v-link-hover); }

/* Mobile shell (≤900px): clear the bottom nav. */
@media (max-width: 900px) {
  .wn-toast { bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .wn-toast { left: 16px; right: 16px; width: auto; }
}