/* Release Notes (ai_reference/release_notes.md → "Surfaces").
 *
 * ONE stylesheet for the category chips, note cards, release cards and the
 * tenant feed / release page / navbar popover content; shared by the
 * super-admin release pages (they render the same partials). The navbar icon
 * itself lives in navbar_v2.css beside the bell.
 *
 * Category colours: ONLY the §2 table's existing design-system pairs (no new
 * colour tokens; the icon tells apart categories that share a tint). Keyed by
 * data-category, so the category list lives only in ReleaseNote::CATEGORIES.
 *
 *   forecast_change  ink / white            trending-up    (card: ink left edge)
 *   removed          Low Stock amber        minus-circle
 *   new_feature      Healthy green          plus-square
 *   improvement      Info / Active blue     arrow-up-right
 *   security         Dead Stock stone       shield
 *   fix              Monospace-pill grey    wrench
 *
 * Loaded by the layout's stylesheet_link_tag :app glob (never a view-level
 * link tag). No dark-mode rules (light-only app).
 */

/* ─── Category chip: §9 icon + label pill ─── */

.rn-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.rn-chip__icon,
.rn-filter__icon,
.rn-badge__icon,
.rn-see-it__icon,
.rn-back__icon {
  display: inline-flex;
  align-items: center;
}

.rn-chip[data-category="forecast_change"] { background: var(--ink); color: var(--surface); }
.rn-chip[data-category="removed"]         { background: var(--amber-tint); color: var(--amber); }
.rn-chip[data-category="new_feature"]     { background: var(--green-tint); color: var(--green); }
.rn-chip[data-category="improvement"]     { background: var(--blue-tint); color: var(--blue); }
.rn-chip[data-category="security"]        { background: var(--stone-tint); color: var(--stone); }
.rn-chip[data-category="fix"]             { background: #f0f0ee; color: var(--stone); }

/* ─── "Super admins only" badge: §9 info-badge shape, stone pair, lock icon ─── */

.rn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.rn-badge--super-admin {
  background: var(--stone-tint);
  color: var(--stone);
  border: 1px solid #e7e5e4;
}

/* "New" (published since the previous visit): Info / Active pair */
.rn-new {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-tint);
  border-radius: 4px;
  padding: 2px 8px;
  vertical-align: middle;
}

/* ─── Note card ─── */

.rn-note-card {
  padding: 22px 32px 24px;
  border-top: 1px solid var(--border-light);
}
.rn-note-card[data-category="forecast_change"] {
  background: var(--surface-alt);
  box-shadow: inset 4px 0 0 var(--ink);
}
.rn-note-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rn-note-card__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin: 9px 0 8px;
  max-width: 80ch;
  color: var(--ink);
}
.rn-note-card__body {
  font-size: 13px;
  line-height: 1.7;
  color: #2b2b2b;
  max-width: 85ch;
}
.rn-note-card__body p { margin: 0 0 10px; }
.rn-note-card__body p:last-child { margin-bottom: 0; }
.rn-note-card__body strong,
.rn-note-card__body b { color: var(--ink); font-weight: 700; }
.rn-note-card__body ul,
.rn-note-card__body ol { margin: 2px 0 12px; padding-left: 20px; }
.rn-note-card__body li { margin-bottom: 7px; }
.rn-note-card__body li::marker { color: var(--light); }
.rn-note-card__body a { color: var(--blue); }
.rn-note-card__body img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.rn-note-card__body figure { margin: 14px 0 4px; max-width: 640px; }
/* Images link to the full-size original (active_storage/blobs/_blob). */
.rn-note-card__body .attachment__zoom { display: inline-block; cursor: zoom-in; }
.rn-note-card__body .attachment__zoom:hover img { border-color: var(--border-hover); }
.rn-note-card__body .attachment__zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.rn-note-card__body figcaption {
  font-size: 11.5px;
  color: var(--muted);
  padding-top: 6px;
}

.rn-see-it {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue);
  background: var(--blue-tint);
  border: 1px solid #dbeafe;
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  text-decoration: none;
}
.rn-see-it:hover {
  text-decoration: none;
  border-color: #bfdbfe;
  background: #e0edff;
}

/* ─── Release card ─── */

.rn-release {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 22px;
  overflow: hidden;
  scroll-margin-top: 80px;
}
.rn-release__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 20px 32px 16px;
  border-bottom: 1px solid var(--border-light);
}
.rn-release__title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}
.rn-release__link { color: var(--ink); text-decoration: none; }
.rn-release__link:hover { color: var(--blue); text-decoration: none; }
.rn-release__meta {
  font-size: 13px;
  color: var(--light);
  white-space: nowrap;
}
.rn-release__summary {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 12px 32px 0;
}
.rn-release__summary + .rn-note-card { border-top: none; }
.rn-mini {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  border-radius: 5px;
  padding: 1px 8px;
}

/* ─── Feed / release page layout ─── */

.rn-page {
  max-width: 1120px;
  margin: 0 auto;
}
/* Feed + "Updates" rail (release_notes/_rail): the feed column keeps its width,
   the rail sits beside it and sticks; below 960px the rail is hidden. */
.rn-page--rail { max-width: 1116px; }
.rn-layout--rail { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 36px; align-items: start; }
.rn-rail { position: sticky; top: 80px; }
/* 2-3 releases a week = 100+ a year: the rail scrolls inside its own box,
   capped to the window, so no entry ever hangs below the screen. */
.rn-rail__scroll { max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.rn-rail__month { margin: 0 0 6px; }
.rn-rail__month-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 8px; cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 700; color: var(--ink);
}
.rn-rail__month-head::-webkit-details-marker { display: none; }
.rn-rail__month-head:hover { background: var(--surface); }
.rn-rail__month-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rn-rail__month-meta { display: inline-flex; align-items: center; gap: 6px; }
.rn-rail__count { font-size: 11px; font-weight: 600; color: var(--light); }
.rn-rail__month .rn-rail__link { padding-left: 18px; }
.rn-rail__title {
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--light); margin: 0 0 8px 10px;
}
.rn-rail__link {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 8px; font-size: 13px; color: var(--muted); text-decoration: none;
}
.rn-rail__link:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.rn-rail__link.is-active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--border); }
.rn-rail__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rn-rail__new { width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; flex-shrink: 0; }
.rn-rail__new .rna-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
@media (max-width: 960px) {
  .rn-page--rail { max-width: 860px; }
  .rn-layout--rail { display: block; }
  .rn-rail { display: none; }
}
.rn-header { margin: 28px 0 20px; }
.rn-header h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
.rn-header__release-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rn-header p {
  font-size: 13.5px;
  color: var(--muted);
  margin: 4px 0 0;
  text-wrap: pretty;
}

.rn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 26px 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.rn-back:hover { color: var(--ink); text-decoration: none; }

/* Super admins only: Customer view / Super admin view (release_notes/_view_toggle).
   Segmented Pill Toggle per design-system.md §8. */
.rn-view-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: -6px 0 18px; }
.rn-view-toggle {
  display: inline-flex;
  padding: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.rn-view-toggle__opt {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--light);
  text-decoration: none;
}
.rn-view-toggle__opt:hover { color: var(--ink); text-decoration: none; }
.rn-view-toggle__opt.is-on { background: var(--ink); color: #fff; }
.rn-view-toggle__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rn-view-note { margin: 0; font-size: 12.5px; color: var(--muted); }

/* Category filter: loose pill group with counts (links; ?category[]=) */
.rn-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.rn-filters__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--light);
  margin-right: 4px;
}
.rn-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 18px;
  border: 1px solid var(--border-hover);
  background: var(--surface);
  color: #5f5a54;
  text-decoration: none;
  white-space: nowrap;
}
.rn-filter:hover { color: var(--ink); border-color: #b8b5af; text-decoration: none; }
.rn-filter[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.rn-filter[aria-disabled="true"]:hover { color: #5f5a54; border-color: var(--border-hover); }
.rn-filter.is-on { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.rn-filter.is-on:hover { color: var(--surface); }
.rn-filter__count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--light);
}
.rn-filter.is-on .rn-filter__count { color: var(--border-hover); }
/* Icon tint per category (text stays neutral; the pill is not the chip) */
.rn-filter[data-category="forecast_change"] .rn-filter__icon { color: var(--ink); }
.rn-filter[data-category="removed"] .rn-filter__icon         { color: var(--amber); }
.rn-filter[data-category="new_feature"] .rn-filter__icon     { color: var(--green); }
.rn-filter[data-category="improvement"] .rn-filter__icon     { color: var(--blue); }
.rn-filter[data-category="security"] .rn-filter__icon,
.rn-filter[data-category="fix"] .rn-filter__icon             { color: var(--stone); }
.rn-filter.is-on .rn-filter__icon { color: var(--surface); }
.rn-filters__clear {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Load older / end of feed */
.rn-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 8px 0 30px;
}
.rn-more__count { font-size: 12.5px; color: var(--light); }
.rn-end {
  text-align: center;
  font-size: 13px;
  color: var(--light);
  margin: 6px 0 36px;
}

/* Newer / Older on the release page */
.rn-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 4px 0 40px;
}
.rn-pager__link {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--ink);
  text-decoration: none;
}
.rn-pager__link:hover { border-color: var(--border-hover); text-decoration: none; }
.rn-pager__link--older { grid-column: 2; text-align: right; }
.rn-pager__dir {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--light);
}
.rn-pager__title { font-size: 14px; font-weight: 700; }

/* Empty states */
.rn-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
  padding: 64px 24px 68px;
}
.rn-empty__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--light);
  margin-bottom: 14px;
}
.rn-empty h2 { font-size: 17px; margin: 0 0 6px; }
.rn-empty p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 auto 16px;
  max-width: 46ch;
}

/* ─── Navbar popover content (the panel box lives beside the icon) ─── */

.rn-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: -8px;
  width: 290px;
  background: var(--surface);
  border: 1px solid var(--nav-border, #e5e2dc);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: 12px 14px;
  z-index: 130;
  font-size: 13px;
  text-align: left;
}
.rn-pop[hidden] { display: none; }
/* Hover bridge across the gap between the icon and the panel */
.rn-pop::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.rn-pop__head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--light);
}
.rn-pop__title {
  display: block;
  font-weight: 700;
  margin: 3px 0 1px;
  color: var(--ink);
  text-decoration: none;
}
.rn-pop__title:hover { color: #1d4ed8; text-decoration: underline; text-underline-offset: 2px; }
.rn-pop__sub { font-size: 12px; color: var(--muted); }
.rn-pop__sub strong { color: #1d4ed8; }
.rn-pop__error { font-size: 12.5px; color: var(--muted); }
.rn-pop__all {
  display: block;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border-light);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue);
}
.rn-pop__shim {
  height: 10px;
  border-radius: 4px;
  margin: 6px 0;
  background: linear-gradient(90deg, var(--border-light) 25%, #e6e3dd 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: rn-pop-shim 1s linear infinite;
}
.rn-pop__shim--w1 { width: 45%; }
.rn-pop__shim--w2 { width: 80%; height: 13px; }
.rn-pop__shim--w3 { width: 60%; }
@keyframes rn-pop-shim {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rn-pop__shim { animation: none; }
}

/* ─── Phone width ─── */

@media (max-width: 767px) {
  .rn-header { margin: 20px 0 14px; }
  .rn-header h1 { font-size: 18px; }
  .rn-header p { font-size: 13px; }
  .rn-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .rn-filters__label { display: none; }
  .rn-release__head { padding: 16px 18px 12px; }
  .rn-release__summary { padding: 10px 18px 0; }
  .rn-release__title { font-size: 16px; }
  .rn-note-card { padding: 18px 18px 20px; }
  .rn-note-card__title { font-size: 15px; }
  .rn-note-card__body { font-size: 13px; }
  .rn-pager { grid-template-columns: 1fr; }
  .rn-pager__link--older { grid-column: 1; }
  .rn-pop { display: none; }
}