/* assets/ronnie-ui/shell.css — V1066 RONNIE DESIGN SYSTEM · SHELL
 *
 * Page background, top header, primary navigation and responsive page
 * grid for new-language Ronnie pages. Routes stay the canonical five
 * (customer-nav.js target truth) — this file only dresses them.
 * Presentation-only. */

.rn-page {
  margin: 0;
  background: var(--rn-bg);
  color: var(--rn-text);
  font-family: var(--rn-font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
.rn-page *, .rn-page *::before, .rn-page *::after { box-sizing: border-box; }

.rn-shell { max-width: 1240px; margin: 0 auto; padding: 0 var(--rn-s5) var(--rn-s7); }

/* ── top header ────────────────────────────────────────────────── */
.rn-topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rn-border);
}
.rn-topbar__inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--rn-s4);
  padding: var(--rn-s3) var(--rn-s5);
}
.rn-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--rn-blue-deep); }
.rn-logo strong { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.rn-logo .rn-logo__product { color: var(--rn-text-mute); font-weight: 600; font-size: 13px; margin-left: 2px; }

.rn-nav { display: flex; align-items: center; gap: var(--rn-s1); margin-left: var(--rn-s4); flex-wrap: wrap; }
.rn-nav a {
  color: var(--rn-text-mute); text-decoration: none; font-weight: 600; font-size: 14px;
  padding: 7px 12px; border-radius: var(--rn-radius-md);
}
.rn-nav a:hover { color: var(--rn-text); background: var(--rn-surface-soft); }
.rn-nav a[aria-current="page"] { color: var(--rn-blue); background: var(--rn-blue-soft); }
.rn-nav a:focus-visible, .rn-page a:focus-visible, .rn-page button:focus-visible {
  outline: 2px solid var(--rn-blue); outline-offset: 2px;
}

.rn-topbar__spacer { flex: 1; }
.rn-account { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rn-account__who { text-align: right; line-height: 1.25; min-width: 0; }
.rn-account__who .rn-account__name { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rn-account__who .rn-account__biz { color: var(--rn-text-mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── page grid ─────────────────────────────────────────────────── */
.rn-grid { display: grid; gap: var(--rn-s5); }
.rn-grid--main { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.rn-grid--metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rn-s4); }
.rn-grid--loop { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rn-s4); }

@media (max-width: 1020px) {
  .rn-grid--main { grid-template-columns: 1fr; }
  .rn-grid--metrics, .rn-grid--loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .rn-shell { padding: 0 var(--rn-s4) var(--rn-s6); }
  .rn-topbar__inner { padding: var(--rn-s3) var(--rn-s4); }
  .rn-grid--metrics, .rn-grid--loop { grid-template-columns: 1fr; }
  .rn-account__who { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rn-page *, .rn-page *::before, .rn-page *::after { animation: none !important; transition: none !important; }
}