@import url('/tokens.css?v=632423bb');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Design tokens ──
   Colors, radii and fonts now come from the shared /tokens.css (imported
   at the top). Only app-shell-specific tokens remain local. */
:root {
  --sidebar-width: 220px;
}

body {
  font-family: var(--font-sans);
  background: var(--color-background-page);
  color: var(--color-text-primary);
  font-weight: var(--weight-body);
  line-height: var(--lh-tight);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Accessibility: visible keyboard focus ──
   Global focus ring for buttons, .btn anchors, nav links and any other
   focusable control. Inputs get their own ring in the Forms block below. */
:focus-visible {
  outline: 2px solid var(--color-text-primary);
  outline-offset: 2px;
  border-radius: var(--border-radius-md);
}

/* Screen-reader-only utility + skip link (revealed on focus) */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 12px; left: 12px;
  width: auto; height: auto;
  clip: auto;
  margin: 0;
  padding: 10px 16px;
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  z-index: 100;
}

/* ── App shell ── */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  background: var(--color-background-primary);
  border-right: 0.5px solid var(--color-border-tertiary);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 10;
}

.main {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-width: 0;
  /* Stretch to --content-max then centre in the area right of the sidebar.
     The gutter is computed from main's own width (100vw minus the sidebar, not
     100% which would resolve against the full-viewport .app box since the
     sidebar is position:fixed), so the cap is an exact, stable --content-max
     and the page is fully responsive down from it with no per-page quirks. */
  padding: 1.5rem max(2rem, (100vw - var(--sidebar-width) - var(--content-max)) / 2);
}

/* ── Sidebar ── */
.sidebar-header {
  padding: 1rem 1rem 0.85rem;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}

.sidebar-brand {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.2px;
}

.sidebar-nav {
  flex: 1;
  padding: 10px 8px;
  list-style: none;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--border-radius-md);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
}

.sidebar-nav i { font-size: 16px; flex-shrink: 0; }

.sidebar-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0;
  padding: 10px 10px 4px;
}

.sidebar-footer {
  padding: 10px 8px 14px;
  border-top: 0.5px solid var(--color-border-tertiary);
}

/* ── User pill ── */
.user-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--border-radius-md);
  cursor: default;
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--rs-lilac-mist);
  color: var(--rs-amethyst);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.user-info { flex: 1; min-width: 0; }

.user-name {
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-email {
  font-size: 11px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Buttons ── */
button, .btn {
  font-family: var(--font-sans);
  font-weight: var(--weight-label);
  font-size: 13px;
  cursor: pointer;
  border: 0.5px solid var(--color-border-secondary);
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  border-radius: var(--border-radius-md);
  padding: 6px 14px;
  line-height: 1.5;
  transition: background 0.1s;
}

button:hover { background: var(--color-background-secondary); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--rs-emphasis-fill);
  color: #fff;
  border-color: var(--rs-emphasis-fill);
}

.btn-full { width: 100%; text-align: center; }

.btn-sign-out {
  width: 100%;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--color-text-secondary);
  text-align: left;
  background: transparent;
  border-color: transparent;
  padding: 7px 10px;
}
.btn-sign-out:hover { background: var(--color-background-secondary); color: var(--color-text-primary); }

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.icon-btn i { font-size: 16px; color: var(--color-text-secondary); }
.icon-btn:hover { background: var(--color-border-secondary); }

/* ── Forms ── */
/* One input look for every text-like field. Keep this selector list and the
   two redesign overrides below in sync, or date/url/etc fields drift out of
   style (they did - the social-log date and deliverable URL looked different). */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="tel"],
input[type="search"],
select,
textarea {
  font-family: var(--font-sans);
  font-size: 13px;
  padding: 8px 10px;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  outline: none;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--color-text-primary);
  background: var(--color-background-primary);
  box-shadow: 0 0 0 2px var(--color-text-primary);
}

label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  display: block;
  margin-bottom: 5px;
}

.form-group { margin-bottom: 14px; }

/* ── Badges ── */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--border-radius-md);
  white-space: nowrap;
}

.badge-sm { font-size: 11px; padding: 1px 8px; }
/* badge colours are defined once, tokenised, in the design-system layer below */

/* ── Stat tiles ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 1.5rem;
}

.stat-tile {
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--border-radius-lg);
  padding: 15px 16px;
}

.stat-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 5px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  line-height: 1.2;
}

/* ── Cards ── */
.card {
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 1rem 1.25rem;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title i {
  font-size: 16px;   /* one inline-icon size everywhere */
  color: var(--color-text-secondary);
}

.card-title span {
  font-size: 14px;
  font-weight: 500;
}

.card-divider {
  border-top: 0.5px solid var(--color-border-tertiary);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Card rows ── */
.card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

.card-row-label { color: var(--color-text-secondary); }
.card-row-value { color: var(--color-text-primary);   }

/* ── Service area grid ── */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* ── List items (deliverables, requests) ── */
.list-items { display: flex; flex-direction: column; gap: 6px; }

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--color-background-secondary);
  border-radius: var(--border-radius-md);
}

.list-item-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.list-item-left i { font-size: 16px; color: var(--color-text-secondary); }

.list-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 1px;
}

.list-item-sub {
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* ── Two-column layout (consultant workspace) ── */
.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.col { display: flex; flex-direction: column; gap: 12px; }

/* ── Client avatars ── */
.client-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}

/* ── File drop zone ── */
.drop-zone {
  border: 0.5px dashed var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  padding: 20px;
  text-align: center;
  margin-bottom: 12px;
  cursor: pointer;
  transition: background 0.1s;
}

.drop-zone:hover,
.drop-zone.drag-over { background: var(--color-background-secondary); }

.drop-zone i { font-size: 24px; color: var(--color-text-secondary); }

.drop-zone p {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 8px 0 0;
}

.drop-zone .file-selected {
  font-size: 13px;
  color: var(--color-text-primary);
  font-weight: 500;
  margin: 6px 0 0;
}

/* ── Activity feed ── */
.activity-list { display: flex; flex-direction: column; gap: 8px; }

.activity-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.activity-text {
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* ── Page header ── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.page-header-text p:first-child {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}

.page-header-text p:last-child {
  font-size: 20px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Auth page ── */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-background-page);
  padding: 24px 16px;
}

.auth-card {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-xl);
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
}

.auth-logo { margin-bottom: 24px; }

.auth-logo h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin-bottom: 3px;
}

.auth-logo p {
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* ── Alerts ── */
.alert {
  display: none;
  padding: 9px 12px;
  border-radius: var(--border-radius-md);
  font-size: 13px;
  margin-bottom: 14px;
  border: 0.5px solid transparent;
}

.alert.visible     { display: block; }
/* alert colours are defined once, tokenised, in the design-system layer below */

/* ── Loading / empty states ── */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 180px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.spinner {
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

.spinner-lg {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Request buttons row ── */
.request-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Deliverable review ── */
.review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.file-preview-header {
  background: var(--color-background-secondary);
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-text-secondary);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.file-preview-body {
  background: var(--color-background-secondary);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-preview-footer {
  padding: 10px 14px;
  border-top: 0.5px solid var(--color-border-tertiary);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Comment thread ── */
.comment-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }

.comment { display: flex; gap: 8px; align-items: flex-start; }
.comment-reply { padding-left: 20px; }

.comment-body { flex: 1; }

.comment-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.comment-author { font-size: 12px; font-weight: 500; }
.comment-time   { font-size: 11px; color: var(--color-text-secondary); }
.comment-text   { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .workspace-grid { grid-template-columns: 1fr; }
  .review-grid    { grid-template-columns: 1fr; }
}

/* Mobile nav: hamburger toggles the sidebar as a slide-in drawer. The button +
   scrim are injected by initMobileNav() in js/auth.js on every .app page. */
.nav-toggle {
  display: none;
  position: fixed; top: 10px; left: 12px; z-index: 1100;
  width: 38px; height: 38px; border-radius: 10px;
  align-items: center; justify-content: center;
  background: var(--color-background-primary, #fff);
  border: 1px solid var(--color-border-secondary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.nav-toggle i { font-size: 20px; }
.nav-scrim { display: none; position: fixed; inset: 0; z-index: 1150; background: rgba(11,15,23,0.42); }
body.preview-mode .nav-toggle { top: 50px; }

@media (max-width: 768px) {
  .sidebar {
    width: min(82vw, 300px);
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 50px rgba(11,15,23,0.22);
    z-index: 1200;
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .nav-scrim { display: block; }
  .nav-toggle { display: inline-flex; }
  .main { margin-left: 0; padding: 1rem; padding-top: 58px; }
  body.preview-mode .main { padding-top: 98px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid { grid-template-columns: 1fr; }

  /* Header + its action pills stack one per line, full width. */
  .page-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-header-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .page-header-actions > * { width: 100%; justify-content: center; max-width: none; }
}

/* ════════════════════════════════════════════════════════════
   Landing page
   ════════════════════════════════════════════════════════════ */

.landing {
  background: var(--color-background-page);
  color: var(--color-text-primary);
}

.lp-container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Header ── */
.lp-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 243, 238, 0.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 0.5px solid var(--color-border-tertiary);
}

.lp-header-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.lp-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--color-text-primary);
  text-decoration: none;
  flex-shrink: 0;
}

.lp-brand .lp-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--color-text-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.lp-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.lp-nav a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: 7px 11px;
  border-radius: var(--border-radius-md);
  transition: color 0.1s, background 0.1s;
}

.lp-nav a:hover { color: var(--color-text-primary); background: var(--color-background-secondary); }

.lp-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.lp-header-actions .btn,
.lp-header-actions a.btn {
  font-size: 13px;
  text-decoration: none;
  padding: 7px 14px;
}

.lp-link-login {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  padding: 7px 11px;
  border-radius: var(--border-radius-md);
}
.lp-link-login:hover { background: var(--color-background-secondary); }

.lp-menu-btn {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-md);
  padding: 0;
}
.lp-menu-btn i { font-size: 18px; color: var(--color-text-primary); }

/* mobile dropdown */
.lp-mobile-nav {
  display: none;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  background: var(--color-background-primary);
  padding: 8px 24px 16px;
}
.lp-mobile-nav a {
  display: block;
  padding: 10px 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.lp-mobile-nav .lp-mobile-cta {
  margin-top: 12px;
  border-bottom: none;
}

/* ── Section scaffold ── */
.lp-section { padding: 72px 0; scroll-margin-top: 76px; }
.lp-section + .lp-section { padding-top: 0; }

.lp-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.lp-section-head { max-width: 560px; margin-bottom: 36px; }
.lp-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.lp-h2 {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin-bottom: 12px;
}

.lp-sub {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ── Hero ── */
.lp-hero {
  padding: 84px 0 64px;
  text-align: center;
}

.lp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-secondary);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 26px;
}
.lp-hero-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--status-ok-fg);
}

.lp-h1 {
  font-size: 46px;
  font-weight: 600;
  letter-spacing: -1.4px;
  line-height: 1.08;
  max-width: 760px;
  margin: 0 auto 20px;
}

.lp-hero .lp-sub {
  font-size: 17px;
  max-width: 600px;
  margin: 0 auto;
}

.lp-hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.lp-btn-lg {
  font-size: 14px;
  padding: 10px 20px;
  text-decoration: none;
}

.lp-hero-note {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  margin-top: 16px;
}

/* ── Product mock ── */
.lp-mock {
  margin: 56px auto 0;
  max-width: 940px;
  border: 0.5px solid var(--color-border-secondary);
  border-radius: var(--border-radius-xl);
  background: var(--color-background-primary);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.lp-mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
  background: var(--color-background-secondary);
}
.lp-mock-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border-primary); }
.lp-mock-bar .lp-mock-url {
  margin-left: 10px;
  font-size: 11.5px;
  color: var(--color-text-secondary);
}
.lp-mock-body { display: flex; min-height: 320px; }
.lp-mock-side {
  width: 168px;
  flex-shrink: 0;
  border-right: 0.5px solid var(--color-border-tertiary);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lp-mock-navitem {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500;
  color: var(--color-text-secondary);
  padding: 7px 10px; border-radius: var(--border-radius-md);
}
.lp-mock-navitem.active { background: var(--color-background-secondary); color: var(--color-text-primary); }
.lp-mock-navitem i { font-size: 15px; }
.lp-mock-main { flex: 1; padding: 18px; min-width: 0; }
.lp-mock-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.lp-mock-stat {
  background: var(--color-background-secondary);
  border-radius: var(--border-radius-md);
  padding: 11px;
}
.lp-mock-stat .l { font-size: 10.5px; color: var(--color-text-secondary); margin-bottom: 4px; }
.lp-mock-stat .v { font-size: 19px; font-weight: 500; }
.lp-mock-card {
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 14px;
}
.lp-mock-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 11px; background: var(--color-background-secondary);
  border-radius: var(--border-radius-md); margin-top: 8px;
}
.lp-mock-row:first-child { margin-top: 0; }
.lp-mock-row .t { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.lp-mock-row .t i { color: var(--color-text-secondary); font-size: 15px; }

/* ── Features grid ── */
.lp-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.lp-feature {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 22px;
}
.lp-feature-icon {
  width: 36px; height: 36px;
  border-radius: var(--border-radius-md);
  background: var(--color-background-secondary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.lp-feature-icon i { font-size: 19px; color: var(--color-text-primary); }
.lp-feature h3 { font-size: 14.5px; font-weight: 600; margin-bottom: 6px; }
.lp-feature p { font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.55; }

/* ── How it works ── */
.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  counter-reset: step;
}
.lp-step {
  position: relative;
  padding: 22px 18px;
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  background: var(--color-background-primary);
}
.lp-step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-text-primary);
  color: #fff;
  font-size: 12.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.lp-step h3 { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.lp-step p { font-size: 13px; color: var(--color-text-secondary); line-height: 1.5; }

/* ── Audience (two columns) ── */
.lp-audience {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lp-aud-card {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-xl);
  padding: 28px;
}
.lp-aud-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.lp-aud-head i { font-size: 20px; }
.lp-aud-head h3 { font-size: 16px; font-weight: 600; }
.lp-aud-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.lp-aud-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--color-text-secondary); line-height: 1.45; }
.lp-aud-list li i { font-size: 16px; color: var(--status-ok-fg); flex-shrink: 0; margin-top: 1px; }

/* ── Security ── */
.lp-security {
  background: var(--color-text-primary);
  color: #fff;
  border-radius: var(--border-radius-xl);
  padding: 48px 44px;
}
.lp-security .lp-eyebrow { color: rgba(255,255,255,0.6); }
.lp-security .lp-h2 { color: #fff; }
.lp-security .lp-sub { color: rgba(255,255,255,0.7); }
.lp-sec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 32px;
}
.lp-sec-item {
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: var(--border-radius-lg);
  padding: 18px;
}
.lp-sec-item i { font-size: 19px; color: #fff; margin-bottom: 12px; display: block; }
.lp-sec-item h4 { font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.lp-sec-item p { font-size: 12.5px; color: rgba(255,255,255,0.6); line-height: 1.5; }

/* ── Final CTA ── */
.lp-final {
  text-align: center;
  padding: 76px 0;
}
.lp-final .lp-h2 { font-size: 30px; }

/* ── Footer ── */
.lp-footer {
  border-top: 0.5px solid var(--color-border-tertiary);
  padding: 28px 0;
}
.lp-footer-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.lp-footer-inner p { font-size: 12.5px; color: var(--color-text-secondary); }
.lp-footer-links { display: flex; gap: 18px; }
.lp-footer-links a { font-size: 12.5px; color: var(--color-text-secondary); text-decoration: none; }
.lp-footer-links a:hover { color: var(--color-text-primary); }

/* ── Landing responsive ── */
@media (max-width: 860px) {
  .lp-features,
  .lp-steps,
  .lp-sec-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-audience { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .lp-nav { display: none; }
  .lp-header-actions .lp-link-login,
  .lp-header-actions .btn { display: none; }
  .lp-menu-btn { display: flex; }
  .lp-h1 { font-size: 34px; letter-spacing: -1px; }
  .lp-hero { padding: 56px 0 48px; }
  .lp-hero .lp-sub { font-size: 15.5px; }
  .lp-h2 { font-size: 23px; }
  .lp-section { padding: 56px 0; }
  .lp-security { padding: 36px 24px; }
  .lp-mock-side { display: none; }
  .lp-mock-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
  .lp-features,
  .lp-steps,
  .lp-sec-grid { grid-template-columns: 1fr; }
  .lp-mock-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ──────────────────────────────────────────────────────────────
   Public share view (view.html) + locked, view-only affordances
   ────────────────────────────────────────────────────────────── */
.public-view {
  background: var(--color-background-page);
  color: var(--color-text-primary);
  min-height: 100vh;
}

.public-shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 1.5rem 2rem 3rem;
}

/* Slim read-only banner - warm palette */
.share-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--status-warn-bg);
  border-bottom: 0.5px solid var(--status-warn-bd);
  color: var(--status-warn-fg);
  padding: 10px 2rem;
}

.share-banner-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
}

.share-banner-text i { font-size: 16px; flex-shrink: 0; }
.share-banner-text strong { font-weight: 600; }

.share-banner-btn {
  flex-shrink: 0;
  font-size: 12px;
  padding: 6px 14px;
  text-decoration: none;
}

.public-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 14px;
  border-top: 0.5px solid var(--color-border-tertiary);
  font-size: 12px;
  color: var(--color-text-secondary);
}

.public-footer a { color: var(--color-text-secondary); text-decoration: none; }
.public-footer a:hover { color: var(--color-text-primary); }
.public-footer .powered-by strong { color: var(--color-text-primary); font-weight: 600; }
.public-footer .powered-by:hover strong { color: var(--deep-cobalt, #0069e0); }

/* ── Danger zone (client detail) ── */
.danger-zone { border-color: var(--status-err-bd); }
.danger-zone .card-title i, .danger-zone .card-title span { color: var(--status-err-fg); }
.dz-head { cursor: pointer; margin-bottom: 0; user-select: none; }
.danger-zone #dz-body { margin-top: 12px; }
#dz-chevron { color: var(--status-err-fg); font-size: 18px; transition: transform 0.2s ease; }
.dz-desc { font-size: var(--text-sm); color: var(--rs-stone); line-height: 1.5; margin-bottom: 12px; }
.dz-trigger { background: var(--rs-paper-white); border: 1px solid var(--status-err-bd); color: var(--status-err-fg); }
.dz-trigger:hover { background: var(--status-err-bg); }
.dz-delete { background: var(--status-err-fg); border-color: var(--status-err-fg); color: #fff; }
.dz-delete:hover:not(:disabled) { filter: brightness(0.94); }
/* Disabled stays legible: light-red pill with red text (not white-on-faded). */
.dz-delete:disabled { background: var(--status-err-bg); border-color: var(--status-err-bd); color: var(--status-err-fg); opacity: 1; cursor: not-allowed; }

/* ── Onboarding checklist (consultant workspace) ── */
.onboarding-card { margin-bottom: 1.25rem; }
.onboarding-card .ob-step { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: var(--text-base); border-top: 1px solid var(--rs-hairline); }
.onboarding-card .ob-step:first-child { border-top: 0; }
.onboarding-card .ob-step i { font-size: 18px; color: var(--rs-fog-decor); }
.onboarding-card .ob-step.done i { color: var(--status-ok-fg); }
.onboarding-card .ob-step.done span { color: var(--rs-stone); text-decoration: line-through; }
.onboarding-card .ob-cta { margin-left: auto; font-size: var(--text-xs); font-weight: 600; color: var(--status-info-fg); text-decoration: none; background: var(--rs-morning-tint); border: 0; padding: 5px 12px; border-radius: 9999px; cursor: pointer; }

/* ── Billing (settings) ── */
.billing-toggle { display: inline-flex; gap: 4px; background: var(--rs-cloud-veil); border-radius: 9999px; padding: 4px; margin: 14px 0; }
.billing-toggle button { border: 0; background: transparent; padding: 6px 14px; border-radius: 9999px; font-size: var(--text-sm); font-weight: 600; color: var(--rs-stone); cursor: pointer; }
.billing-toggle button.active { background: var(--rs-paper-white); color: var(--rs-midnight-ink); box-shadow: var(--rs-shadow-sm); }
.billing-toggle .save-tag { color: var(--status-ok-fg); font-weight: 600; }
.billing-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; }
.plan-mini { border: 1px solid var(--rs-hairline); border-radius: var(--border-radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.plan-mini.current { border-color: var(--rs-pressed-charcoal); box-shadow: var(--rs-shadow-sm); }
.plan-mini .pm-name { font-weight: 600; font-size: var(--text-base); }
.plan-mini .pm-price { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; color: var(--rs-midnight-ink); }
.plan-mini .pm-price small { font-size: var(--text-xs); font-weight: 500; color: var(--rs-stone); }
.plan-mini .pm-cap { font-size: var(--text-xs); color: var(--rs-stone); flex: 1; }
.plan-mini .btn { width: 100%; justify-content: center; }
.billing-current { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; background: var(--rs-morning-tint); border-radius: var(--border-radius-md); font-size: var(--text-sm); }
@media (max-width: 720px) { .billing-plans { grid-template-columns: 1fr; } }

.list-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Locked action - blurred control with a centered lock + hover tip.
   Intentional and tidy, never actually performs the action. */
.locked-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--border-radius-md);
  background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border-secondary);
  cursor: not-allowed;
  text-decoration: none;
  flex-shrink: 0;
}

.locked-action-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  filter: blur(2px);
  opacity: 0.45;
  color: var(--color-text-secondary);
}

.locked-action-inner i { font-size: 15px; }

.locked-action-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
}

.locked-action-lock i { font-size: 12px; }

.locked-action-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  white-space: nowrap;
  background: var(--color-text-primary);
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 5;
}

.locked-action:hover .locked-action-tip,
.locked-action:focus .locked-action-tip { opacity: 1; }

/* ── Brand assets & social metrics ── */
.brand-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--border-radius-md);
  object-fit: cover;
  border: 0.5px solid var(--color-border-secondary);
  background: var(--color-background-secondary);
}

.social-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-background-secondary);
  border-radius: var(--border-radius-md);
}

.social-platform {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.social-metric-label {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.social-current {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.social-prev {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.social-change {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
}
.social-change i { font-size: 13px; }
.social-change.up   { color: var(--status-ok-fg); }
.social-change.down { color: var(--status-err-fg); }

.social-values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

@media (max-width: 768px) {
  .public-shell { padding: 1.25rem 1rem 2.5rem; }
  .share-banner { padding: 10px 1rem; }
  .stats-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid { grid-template-columns: 1fr; }
}

/* ── Landing: pricing ── */
.lp-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;
}
.lp-plan {
  position: relative;
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-xl);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.lp-plan.featured {
  border: 1px solid var(--color-text-primary);
  box-shadow: var(--shadow-lg);
}
.lp-plan-badge {
  position: absolute;
  top: -11px; left: 24px;
  background: var(--color-text-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 4px 11px;
  border-radius: 100px;
}
.lp-plan-name { font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.lp-plan-for {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  margin-top: 4px;
  min-height: 34px;
  line-height: 1.35;
}
.lp-plan-price { margin: 16px 0 12px; display: flex; align-items: baseline; gap: 4px; }
.lp-plan-price .amt { font-size: 34px; font-weight: 600; letter-spacing: -1px; }
.lp-plan-price .per { font-size: 13px; color: var(--color-text-secondary); }
.lp-plan-line {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  min-height: 60px;
}
.lp-plan-cta {
  margin: 4px 0 18px;
  text-decoration: none;
  text-align: center;
  font-size: 13.5px;
  padding: 9px 14px;
}
.lp-plan-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.lp-plan-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: var(--color-text-primary);
  line-height: 1.4;
}
.lp-plan-list li i { font-size: 16px; color: var(--status-ok-fg); flex-shrink: 0; margin-top: 1px; }
.lp-pricing-note {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-secondary);
  max-width: 620px;
  margin: 32px auto 0;
  line-height: 1.6;
}
@media (max-width: 860px) {
  .lp-pricing { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .lp-plan-for, .lp-plan-line { min-height: 0; }
}

/* ── File manager ── */
.fm-folders {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.fm-folder {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  white-space: nowrap;
}
.fm-folder:hover { background: var(--color-border-secondary); }
.fm-folder i { font-size: 16px; }

.fm-folder.active {
  background: var(--color-background-primary);
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

/* Selected-folder panel */
.fm-panel {
  margin-top: 14px;
  border-top: 0.5px solid var(--color-border-tertiary);
  padding-top: 14px;
}

.fm-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.fm-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.fm-panel-title i { font-size: 17px; color: var(--color-text-secondary); }

.fm-panel-actions { display: flex; gap: 8px; flex-shrink: 0; }

.fm-files { display: flex; flex-direction: column; gap: 6px; }

.fm-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-background-secondary);
  border-radius: var(--border-radius-md);
}

.fm-file-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.fm-file-left > i { font-size: 18px; color: var(--color-text-secondary); flex-shrink: 0; }

.fm-file-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fm-file-meta {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 1px;
}

.fm-file-actions { display: flex; gap: 6px; flex-shrink: 0; }
.fm-file-actions button { font-size: 12px; padding: 4px 10px; }

.fm-empty {
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 6px 0;
}

.fm-dragover {
  outline: 1.5px dashed var(--color-text-primary);
  outline-offset: 4px;
  border-radius: var(--border-radius-md);
}

/* =====================================================================
   RetainSpace design-system layer - applies the shared tokens to every
   app + auth component. Keeps all class names; restyles surfaces to the
   new homepage language (sky canvas, paper hairline cards, charcoal
   primary, tinted status, Geist + display fonts, 8/16/24/pill radii).
   ===================================================================== */

body { font-family: var(--rs-font-geist); letter-spacing: var(--tracking-body); }
body.app { background: var(--rs-sky-wash); }

/* ---- Sidebar ---- */
.sidebar { border-right: 1px solid var(--rs-hairline); background: var(--rs-paper-white); }
.sidebar-header, .sidebar-footer { border-color: var(--rs-hairline); }
.sidebar-brand { font-family: var(--rs-font-display); letter-spacing: -0.02em; font-size: 15px; }
.sidebar-nav a { border-radius: 8px; }
.sidebar-nav a.active { background: var(--rs-morning-tint); color: var(--rs-midnight-ink); }
.sidebar-nav a.active i { color: var(--rs-midnight-ink); }

/* ---- Cards ---- */
.card {
  background: var(--rs-paper-white);
  border: 1px solid var(--rs-hairline);
  border-radius: 16px;
  box-shadow: var(--rs-shadow-sm);
}
.card-title span { letter-spacing: -0.01em; }

/* ---- Stat tiles ---- */
.stats-grid { gap: 12px; }
.stat-tile {
  background: var(--rs-paper-white);
  border: 1px solid var(--rs-hairline);
  border-radius: 16px;
  padding: 16px;
}
.stat-value { font-family: var(--rs-font-display); font-weight: 600; letter-spacing: -0.02em; color: var(--rs-midnight-ink); }
.stat-label { color: var(--rs-stone); }

/* ---- Page header ---- */
.page-header-text p:last-child { font-family: var(--rs-font-display); font-weight: 500; letter-spacing: -0.02em; font-size: 24px; color: var(--rs-midnight-ink); }
.page-header-text p:first-child { color: var(--rs-stone); }
.icon-btn { background: var(--rs-paper-white); border: 1px solid var(--rs-hairline); border-radius: 9999px; }
.icon-btn:hover { background: var(--rs-cloud-veil); }

/* ---- Buttons ---- */
button, .btn {
  font-family: var(--rs-font-geist);
  border: 1px solid var(--rs-hairline-strong);
  background: var(--rs-paper-white);
  border-radius: 9999px;
  letter-spacing: -0.01em;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
button:hover { background: var(--rs-paper-white); border-color: var(--rs-stone); }
.btn-primary { background: var(--rs-emphasis-fill); color: #fff; border-color: var(--rs-emphasis-fill); }
.btn-primary:hover { background: var(--rs-emphasis-fill-hover); color: #fff; box-shadow: var(--rs-shadow-sm); }
.btn-sign-out { border-radius: 8px; border-color: transparent; background: transparent; }
.btn-sign-out:hover { background: var(--rs-cloud-veil); }

/* ---- Inputs ---- */
input[type="email"], input[type="password"], input[type="text"], input[type="number"], input[type="date"], input[type="url"], input[type="tel"], input[type="search"], select, textarea {
  background: var(--rs-pure-white);
  border: 1px solid var(--rs-hairline);
  border-radius: 16px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--rs-pressed-charcoal);
  background: var(--rs-pure-white);
  box-shadow: 0 0 0 3px rgba(24,29,39,0.12);
}

/* ---- List rows / chips ---- */
/* Flattened rows: the card provides the surface; rows divide, not box.
   (Was white-bordered boxes inside white cards: four nested surfaces.) */
.list-item { background: transparent; border: 0; border-radius: 0; }
.list-items { gap: 0; }
.list-items .list-item + .list-item { border-top: 1px solid var(--rs-hairline); }
/* Hover affordance ONLY on rows that are actually clickable. */
.list-item--link { border-radius: 8px; }
.list-item--link:hover { background: var(--rs-morning-tint); }
.list-item-left i { color: var(--rs-stone); }
.activity-text { color: var(--rs-stone); }

/* ---- Badges (tinted status pills) ---- */
.badge { border-radius: 9999px; border: 1px solid transparent; font-weight: 600; }
.badge-success { background: var(--status-ok-bg);   color: var(--status-ok-fg);   border-color: var(--status-ok-bd); }
.badge-warning { background: var(--status-warn-bg); color: var(--status-warn-fg); border-color: var(--status-warn-bd); }
.badge-error   { background: var(--status-err-bg);  color: var(--status-err-fg);  border-color: var(--status-err-bd); }
.badge-neutral { background: var(--rs-cloud-veil);  color: var(--rs-stone);       border-color: var(--rs-hairline); }
.badge-info    { background: var(--status-info-bg); color: var(--status-info-fg); border-color: var(--status-info-bd); }

/* ---- Drop zone (upload) ---- */
.drop-zone { border: 1.5px dashed var(--rs-hairline-strong); border-radius: 16px; background: var(--rs-cloud-veil); }
.drop-zone:hover, .drop-zone.drag-over { background: var(--rs-morning-tint); border-color: var(--rs-cornflower); }
.drop-zone i { color: var(--rs-stone); }

/* ---- Alerts ---- */
.alert { border-radius: var(--border-radius-md); }
.alert-error   { background: var(--status-err-bg); color: var(--status-err-fg); border-color: var(--status-err-bd); }
.alert-success { background: var(--status-ok-bg);  color: var(--status-ok-fg);  border-color: var(--status-ok-bd); }

.loading-state { color: var(--rs-stone); }

/* =====================================================================
   Auth pages (login / signup / set-password) - branded, two-column.
   ===================================================================== */
.auth-page { background: var(--rs-sky-wash); }

/* password field with show/hide toggle */
.pw-field { position: relative; }
.pw-field input { padding-right: 42px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 32px; height: 32px; display: grid; place-items: center;
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--rs-stone); font-size: 17px; border-radius: var(--border-radius-md);
}
.pw-toggle:hover { background: var(--rs-cloud-veil); color: var(--rs-midnight-ink); }

/* small contextual note under an auth form */
.auth-note {
  display: flex; align-items: flex-start; gap: 7px;
  margin-top: 16px; padding: 10px 12px;
  background: var(--rs-cloud-veil); border: 1px solid var(--rs-hairline);
  border-radius: var(--border-radius-md);
  font-size: var(--text-xs); line-height: 1.45; color: var(--rs-stone);
}
.auth-note i { font-size: 15px; margin-top: 1px; color: var(--status-info-fg); flex-shrink: 0; }
.auth-card { background: var(--rs-paper-white); border: 1px solid var(--rs-hairline); border-radius: 24px; box-shadow: var(--rs-shadow-lg); }
.auth-logo h1 { font-family: var(--rs-font-display); font-weight: var(--weight-heading); letter-spacing: var(--tracking-h2); color: var(--rs-midnight-ink); }
.auth-logo p { color: var(--rs-stone); }
.auth-brand {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 16px;
  background: var(--rs-grad-brand); color: #fff; font-size: 20px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
  margin-bottom: 16px;
}

/* two-column split: form on sky canvas, branded gradient panel beside it */
.auth-split { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.auth-split .auth-main { display: flex; align-items: center; justify-content: center; padding: 32px 24px; background: var(--rs-sky-wash); }
.auth-split .auth-main .auth-card { width: 100%; max-width: 400px; }
.auth-aside {
  position: relative; overflow: hidden;
  background: var(--rs-grad-brand); color: #fff;
  padding: 56px 48px; display: flex; flex-direction: column; justify-content: space-between;
}
.auth-aside .aside-brand { display: flex; align-items: center; gap: 10px; font-family: var(--rs-font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: #fff; text-decoration: none; }
.auth-aside .aside-brand .mk { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; font-size: 19px; }
.auth-aside .aside-headline { font-family: var(--rs-font-display); font-weight: var(--weight-display); font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: var(--tracking-display); max-width: 13ch; }
.auth-aside .aside-points { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.auth-aside .aside-points li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: rgba(255,255,255,.92); }
.auth-aside .aside-points li i { font-size: 18px; opacity: .95; }
.auth-aside .aside-glow { position: absolute; inset: auto -120px -140px auto; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); pointer-events: none; }

@media (max-width: 820px) {
  .auth-split { grid-template-columns: 1fr; min-height: auto; }
  .auth-split .auth-aside { display: none; }
}

/* full-bleed when the two-column split is used (single-card auth keeps centering) */
.auth-page:has(.auth-split) { padding: 0; display: block; }
.auth-split { width: 100%; }

/* =====================================================================
   Shared system components (audit pass): modal, empty state, filter tabs,
   icon tiles, deliverable actions, field hints. One definition each, so
   every page draws the same component instead of re-implementing inline.
   ===================================================================== */

/* ---- Modal ---- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: none; /* JS toggles to flex */
  align-items: flex-start; justify-content: center;
  padding: 24px 16px;
  background: rgba(10, 13, 18, 0.32);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal {
  background: var(--rs-paper-white);
  border: 1px solid var(--rs-hairline);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--rs-shadow-lg);
  padding: 24px;
  width: 100%;
  max-width: 440px;
  margin: auto;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal-title { font-family: var(--rs-font-display); font-weight: var(--weight-heading); font-size: var(--text-md); letter-spacing: var(--tracking-h3); color: var(--rs-midnight-ink); }
.modal-close {
  width: 32px; height: 32px; flex-shrink: 0;
  display: grid; place-items: center;
  border: none; background: none; padding: 0;
  border-radius: var(--border-radius-md);
  color: var(--rs-stone); font-size: 18px; line-height: 1; cursor: pointer;
}
.modal-close:hover { background: var(--rs-cloud-veil); color: var(--rs-midnight-ink); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
@media (max-width: 768px) {
  .modal { max-width: none; border-radius: 20px; }
}

/* ---- Filter tabs ---- */
.filter-tab {
  font-family: var(--rs-font-geist);
  font-size: var(--text-sm); font-weight: 600; letter-spacing: -0.01em;
  padding: 7px 16px;
  border-radius: 9999px;
  border: 1px solid var(--rs-hairline);
  background: var(--rs-paper-white);
  color: var(--rs-stone);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.filter-tab:hover  { background: var(--rs-morning-tint); color: var(--rs-midnight-ink); border-color: transparent; }
.filter-tab.active { background: var(--rs-emphasis-fill); color: #fff; border-color: var(--rs-emphasis-fill); }

/* ---- Icon tiles in front of list rows ---- */
.dl-ico, .deliv-file-ico, .rs-row-ico {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: var(--border-radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rs-morning-tint);
  color: var(--status-info-fg);
}
.dl-ico i, .deliv-file-ico i, .rs-row-ico i { font-size: 17px; }

/* ---- Empty state (one component: .rs-empty everywhere; .empty-state/.es-*
   kept for the richer clients-page hero empty state with its CTA) ---- */
.empty-state, .rs-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 10px; padding: 40px 24px;
}
.es-ico, .rs-empty-ico {
  width: 48px; height: 48px;
  border-radius: var(--border-radius-lg);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rs-morning-tint);
  color: var(--status-info-fg);
}
.es-ico i, .rs-empty-ico i { font-size: 24px; }
.es-title, .rs-empty-title { font-size: var(--text-base); font-weight: 600; color: var(--rs-midnight-ink); }
.es-sub, .rs-empty-sub { font-size: var(--text-sm); color: var(--rs-stone); max-width: 320px; }
.es-cta { margin-top: 6px; }
.empty-state.is-error .es-ico,
.rs-empty.is-error .rs-empty-ico { background: var(--status-err-bg); color: var(--status-err-fg); }
.empty-state.is-error .es-title,
.rs-empty.is-error .rs-empty-title { color: var(--status-err-fg); }

/* ---- Inline error rows ---- */
.rs-error, .deliv-error {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; font-size: var(--text-sm);
  color: var(--status-err-fg);
}

/* ---- Deliverable approve / request-changes actions ---- */
.deliv-action {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: 600;
  padding: 6px 12px; border-radius: 9999px;
  border: 1px solid var(--rs-hairline); background: var(--rs-paper-white);
  color: var(--rs-midnight-ink); cursor: pointer;
}
.deliv-action i { font-size: 15px; }
.deliv-action--approve { background: var(--rs-emphasis-fill); border-color: var(--rs-emphasis-fill); color: #fff; }
.deliv-action--approve:hover { background: var(--rs-emphasis-fill-hover); }
.deliv-action--changes:hover { border-color: var(--rs-stone); }
.deliv-action:disabled { opacity: 0.5; cursor: not-allowed; }
/* anchor variant - live preview link opens in a new tab */
a.deliv-action { text-decoration: none; }
.deliv-action--preview { color: var(--status-info-fg); border-color: var(--status-info-bd); background: var(--rs-morning-tint); }
.deliv-action--preview:hover { border-color: var(--status-info-fg); }
.deliv-note { margin-top: 4px; font-size: var(--text-sm); color: var(--rs-stone); }

/* ── Deliverable feedback thread + request-changes form ─────── */
/* Feedback + revision history read as light, labelled sub-sections of the
   deliverable row (divider-separated), NOT heavy grey boxes-in-a-box. */
.deliv-feedback {
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 0 0;
  background: transparent;
  border: 0; border-top: 1px solid var(--rs-hairline);
  border-radius: 0;
}
.deliv-feedback .fb-head { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-text-secondary); }
.fb-item .fb-who {
  margin: 0; font-size: 12px; font-weight: var(--weight-heading, 600);
  color: var(--color-text-primary);
}
.fb-item .fb-when { font-weight: 400; color: var(--color-text-secondary); margin-left: 8px; }
.fb-item .fb-body {
  margin: 2px 0 0; font-size: 13px; line-height: 1.5;
  color: var(--color-text-secondary); white-space: pre-wrap;
}
.changes-form { width: 100%; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.changes-form textarea { width: 100%; resize: vertical; font: inherit; }
.cf-actions { display: flex; gap: 8px; }
.btn-sm { font-size: 12px; padding: 6px 12px; }

/* ── Deliverable revision form + version history ────────────── */
.ver-tag {
  font-size: 11px; font-weight: 600; color: var(--rs-accent);
  background: var(--rs-accent-tint); padding: 1px 7px; border-radius: 9999px;
  vertical-align: middle; margin-left: 4px;
}
.revision-form { width: 100%; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.revision-form textarea,
.revision-form input[type="text"] { width: 100%; font: inherit; }
.revision-form textarea { resize: vertical; }
.rev-file-row { display: flex; align-items: center; gap: 10px; }
.rev-file-name { font-size: 12px; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.deliv-versions {
  margin-top: 10px; padding: 10px 0 0;
  background: transparent;
  border: 0; border-top: 1px solid var(--rs-hairline); border-radius: 0;
}
.deliv-versions .dv-head { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-text-secondary); }
.dv-item { padding: 7px 0; border-top: 1px solid var(--color-border-tertiary); }
.dv-item:first-of-type { padding-top: 0; border-top: 0; }
.dv-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dv-ver { font-size: 12.5px; font-weight: 600; color: var(--color-text-primary); }
.dv-when { font-size: 12px; color: var(--color-text-secondary); margin-left: auto; }
.dv-note { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); white-space: pre-wrap; }
.dv-file { margin-top: 6px; font-size: 12px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 5px; }

/* ---- Settings form helpers ---- */
.rs-field-hint { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--text-xs); color: var(--rs-stone); }
.rs-input-locked { background: var(--rs-cloud-veil); color: var(--rs-stone); cursor: not-allowed; }

/* ---- Touch targets on mobile ---- */
@media (max-width: 768px) {
  .icon-btn { width: 40px; height: 40px; }
  .filter-tab { padding: 9px 16px; }
}

/* =====================================================================
   App polish pass - brings every app screen up to the homepage's level.
   Refines the SHARED component layer (header, cards, lists, inputs,
   buttons, sidebar), so one block lifts all app screens at once.
   ===================================================================== */

/* Page header: a clear uppercase eyebrow + large title, with a divider rule. */
.page-header {
  margin-bottom: 1.75rem;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rs-hairline);
}
.page-header-text p:first-child {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--rs-stone);
  margin-bottom: 6px;
}
.page-header-text p:last-child {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--rs-midnight-ink);
}

/* Cards: a touch more room + crisp title; the title icon carries the accent. */
.card { padding: 18px 20px; }
.card-header { margin-bottom: 14px; }
.card-title i { color: var(--rs-accent); font-size: 17px; }
.card-title span { font-size: 14px; font-weight: var(--weight-heading); letter-spacing: var(--tracking-h3); }

/* List rows: divider-separated (no per-row boxes), calm hover on links only. */
.list-items { gap: 0; }
.list-item { padding: 11px 13px; }
.list-item--link:hover { background: var(--rs-accent-tint); }
.list-item-title { font-size: 13.5px; font-weight: 600; }

/* Inputs: crisper radius + a subtle accent focus ring (was a heavy dark ring). */
input[type="email"], input[type="password"], input[type="text"], input[type="number"], input[type="date"], input[type="url"], input[type="tel"], input[type="search"], select, textarea {
  border-radius: 10px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--rs-accent);
  box-shadow: 0 0 0 3px rgba(10, 108, 255, 0.14);
}

/* Buttons: crisp rounded-rect instead of full pills, to read more product-grade.
   (Status pills, filter tabs and the round icon button keep their own shape.) */
button, .btn { border-radius: 10px; }
.icon-btn { border-radius: 9999px; }

/* Stat tiles: display value a notch larger for hierarchy. */
.stat-value { font-size: 25px; }

/* Sidebar: refined spacing + an accent active state. */
.sidebar-header { padding: 16px 16px 12px; }
.sidebar-brand { font-size: 15px; letter-spacing: -0.02em; }
.sidebar-nav { padding: 12px 10px; }
.sidebar-nav a { padding: 8px 11px; border-radius: 9px; font-size: 13.5px; }
.sidebar-nav a:hover { background: var(--rs-cloud-veil); color: var(--rs-midnight-ink); }
/* Active = neutral surface + a thin cobalt left-bar (wayfinding accent), so the
   current page reads distinctly from a hovered item (which shares the surface). */
.sidebar-nav a.active { background: var(--rs-cloud-veil); color: var(--rs-midnight-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--rs-accent); }
.sidebar-nav a.active i { color: var(--rs-midnight-ink); }

/* Drop zone: align radius + a calm accent hover. */
.drop-zone { border-radius: 12px; }
.drop-zone:hover, .drop-zone.drag-over { border-color: var(--rs-accent); }

/* Settings: a consistent, comfortable column instead of ragged card widths. */
.settings-stack { max-width: 760px; display: flex; flex-direction: column; gap: var(--card-gap); }
.settings-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .settings-grid-2 { grid-template-columns: 1fr; } }

/* Settings page: four cards 2x2, Plan & billing full-width below. Fills the
   shared page width (--content-max) like every other app page. */
.settings-wrap { max-width: none; }
.settings-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-gap);
  align-items: stretch; margin-bottom: var(--card-gap);
}
.settings-grid > .card { margin-bottom: 0; }
@media (max-width: 720px) { .settings-grid { grid-template-columns: 1fr; } }

/* Clients shortcut card (links to /clients) */
.settings-nav-card {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  color: inherit; transition: border-color .15s, box-shadow .15s;
}
.settings-nav-card:hover { border-color: var(--rs-hairline-strong); box-shadow: var(--rs-shadow-sm); }
.settings-nav-card .snc-ico {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-card);
  display: grid; place-items: center; background: var(--rs-accent-tint); color: var(--rs-accent);
}
.settings-nav-card .snc-ico i { font-size: 20px; }
.settings-nav-card .snc-text { flex: 1; min-width: 0; }
.settings-nav-card .snc-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.settings-nav-card .snc-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--color-text-secondary); }
.settings-nav-card .snc-arrow { flex: none; font-size: 18px; color: var(--rs-fog); }

/* Public-link section toggles (client-setup share card) */
.ps-toggle { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--color-text-primary); cursor: pointer; }
.ps-toggle input { width: auto; margin: 2px 0 0; flex: none; }
.ps-toggle .ps-sub { color: var(--color-text-secondary); font-weight: 400; }

/* Help tooltip: a small "?" next to a label that reveals a short explainer on
   hover/focus. Reusable anywhere a field needs "where do I find this?" help. */
.help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  vertical-align: middle;
  cursor: help;
}
.help-tip > .ti { font-size: 15px; color: var(--rs-fog); }
.help-tip:hover > .ti, .help-tip:focus-visible > .ti { color: var(--rs-accent); }
.help-pop {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 250px;
  background: var(--rs-overlay-fill);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.005em;
  text-transform: none;
  white-space: normal;
  padding: 9px 11px;
  border-radius: 8px;
  box-shadow: var(--rs-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease;
  z-index: 60;
}
.help-pop::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--rs-midnight-ink);
}
.help-tip:hover .help-pop,
.help-tip:focus-within .help-pop { opacity: 1; visibility: visible; }

/* ── Analytics config (GA4 + Google reviews) - lives on Client setup ── */
.config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 640px) { .config-grid { grid-template-columns: 1fr; } }
.ga4-connected {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 11px 14px;
  background: var(--status-ok-bg);
  border: 1px solid var(--status-ok-bd);
  border-radius: 10px;
  font-size: 13px;
  color: var(--status-ok-fg);
}
.ga4-connected .ti { font-size: 16px; vertical-align: middle; }
.advanced-creds summary { list-style: revert; }

/* ── Service-area icon picker (consultant) ──────────────────── */
.icon-picker { display: flex; align-items: stretch; gap: 8px; }
.icon-picker .icon-preview {
  flex: 0 0 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rs-hairline);
  border-radius: 14px;
  background: var(--rs-accent-tint);
  color: var(--rs-accent);
}
.icon-picker .icon-preview i { font-size: 20px; }
.icon-picker input { flex: 1; }
.icon-suggest {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.icon-tile {
  aspect-ratio: 1 / 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--rs-hairline);
  border-radius: 12px;
  background: var(--rs-pure-white);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s, transform .06s;
}
.icon-tile i { font-size: 18px; }
.icon-tile:hover { border-color: var(--rs-accent); color: var(--rs-accent); }
.icon-tile:active { transform: scale(0.94); }
.icon-tile.active {
  border-color: var(--rs-accent);
  background: var(--rs-accent-tint);
  color: var(--rs-accent);
}
.field-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.field-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  background: var(--rs-accent-tint);
  color: var(--rs-accent);
  padding: 1px 5px;
  border-radius: 5px;
}
.field-hint a { color: var(--rs-accent); }
@media (max-width: 560px) {
  .icon-suggest { grid-template-columns: repeat(6, 1fr); }
}

/* ── Consultant: updates pill + rich activity rows ──────────── */
.updates-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 9999px;
  background: var(--rs-accent-tint); color: var(--rs-accent);
  border: 1px solid transparent; font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.updates-pill:hover { border-color: var(--rs-accent); }
.updates-pill i { font-size: 16px; }   /* one inline-icon size everywhere */

.activity-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.activity-row:last-child { border-bottom: 0; }
.activity-ico {
  flex: 0 0 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-border-tertiary); color: var(--color-text-secondary);
}
.activity-ico i { font-size: 18px; }
.activity-main { flex: 1; min-width: 0; }
.activity-title {
  margin: 0; font-size: 14px; font-weight: 500; color: var(--rs-midnight-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.activity-sub {
  margin: 2px 0 0; font-size: 12px; color: var(--color-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Audit trail ─────────────────────────────────────────────── */
.audit-ico.is-approve { background: var(--status-ok-bg); }
.audit-ico.is-approve i { color: var(--status-ok-fg); }
.audit-ico.is-changes { background: var(--status-err-bg); }
.audit-ico.is-changes i { color: var(--status-err-fg); }
.audit-ico.is-request { background: var(--status-info-bg); }
.audit-ico.is-request i { color: var(--rs-cornflower, #4f6bed); }
.audit-ico.is-comment { background: #f1edfb; } /* no system token -- intentional purple */
.audit-ico.is-comment i { color: #6b4ec9; } /* no system token -- intentional purple */

.audit-locked { display: flex; gap: 14px; align-items: flex-start; padding: 6px 2px 4px; }
.audit-locked-ico {
  flex: 0 0 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px;
  background: var(--color-border-tertiary); color: var(--color-text-secondary);
}
.audit-locked-title { margin: 1px 0 0; font-size: 14px; font-weight: 600; color: var(--rs-midnight-ink); }
.audit-locked-sub { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); max-width: 56ch; }
.audit-upgrade-btn { display: inline-flex; margin-top: 12px; padding: 7px 14px; font-size: 13px; }

/* ── Client setup: two-column Info / Access ─────────────────── */
.setup-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--card-gap);
  align-items: stretch;   /* side-by-side cards match the tallest */
  margin-bottom: var(--card-gap);
}
.setup-cols > .card { margin-bottom: 0; }
@media (max-width: 720px) {
  .setup-cols { grid-template-columns: 1fr; }
}

/* ── Client access: the client's team (multi-user) ──────────── */
.team-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
}
.team-title { font-size: 13px; font-weight: 600; color: var(--rs-midnight-ink); }
.team-count { font-size: 12px; color: var(--color-text-secondary); }
.team-list { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; }
.team-member {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 2px;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}
.team-member:last-child { border-bottom: 0; }
.tm-avatar {
  flex: 0 0 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
  background: var(--rs-accent-tint); color: var(--rs-accent);
}
.tm-info { flex: 1; min-width: 0; }
.tm-name {
  margin: 0; font-size: 14px; font-weight: 500; color: var(--rs-midnight-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-email {
  margin: 1px 0 0; font-size: 12.5px; color: var(--color-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tm-meta { margin: 2px 0 0; font-size: 12px; color: var(--color-text-secondary); }
.tm-pending { display: inline-flex; align-items: center; gap: 4px; color: var(--status-warn-fg); font-weight: 500; }
.tm-pending i { font-size: 13px; }
.tm-actions { flex: 0 0 auto; }
.tm-action { font-size: 12px; padding: 6px 12px; white-space: nowrap; }
.tm-action:hover { border-color: var(--rs-accent); color: var(--rs-accent); }
.tm-add {
  margin-top: 12px; width: 100%; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.tm-add i { font-size: 16px; }
.tm-form { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.tm-form input { margin: 0; width: 100%; }
.tm-form-actions { display: flex; gap: 8px; }
.tm-empty { font-size: 13px; color: var(--color-text-secondary); padding: 8px 2px; }

/* ── Consultant workspace: scope selector + clickable client rows ── */
/* A form CONTROL, not a pill: white + bordered so it cannot be confused with
   the accent-tint notification pill beside it. */
.scope-select {
  max-width: 200px;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 9999px;
  background: var(--rs-pure-white);
  color: var(--color-text-primary);
  border: 1px solid var(--rs-hairline-strong);
  cursor: pointer;
}
.scope-select:hover { border-color: var(--rs-accent); }
a.client-row {
  display: flex; align-items: center; justify-content: space-between;
  transition: background .12s;
}
a.client-row:hover { background: var(--color-border-tertiary); }

/* ── Request attachment chips ───────────────────────────────── */
.att-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.att-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; padding: 3px 9px;
  border-radius: 9999px;
  background: var(--rs-accent-tint); color: var(--rs-accent);
  border: 1px solid transparent; cursor: pointer;
  max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.att-chip:hover { border-color: var(--rs-accent); }
.att-chip i { font-size: 13px; }

/* ── Consultant workspace layout (redesign) ─────────────────── */
/* Equal-width row system: full width, 50/50, or the 4-up stats band.
   Every row holds one type of card, labelled with .ws-section-label. */
.ws-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--card-gap);
  align-items: stretch;   /* side-by-side cards match the tallest */
  margin-bottom: var(--card-gap);
}
.ws-2col > .card { margin-bottom: 0; }

.ws-section-label {
  font-size: 13px; font-weight: var(--weight-heading, 600); letter-spacing: -0.01em;
  color: var(--color-text-primary);
  /* More air above than below: a section label belongs to what FOLLOWS it. */
  margin: 28px 0 12px;
}
.ws-card-link { font-size: 12px; font-weight: 500; color: var(--rs-accent); }

/* Inline "log a social metric" entry bar (full-width quick action) */
.social-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.social-bar > select,
.social-bar > input { flex: 1 1 130px; min-width: 0; margin: 0; }
.social-bar > #social-client { flex: 1 1 180px; }
.social-bar > #social-date { flex: 0 1 150px; }
.social-bar > button { flex: 0 0 auto; padding: 8px 20px; font-size: 13px; }

/* "Needs your attention" grouped lists */
.attn-group-label {
  font-size: 12px; font-weight: 600; color: var(--color-text-secondary);
  margin: 0 0 8px; padding: 0 2px;
}
.attn-group + .attn-group {
  margin-top: 18px; padding-top: 16px;
  border-top: 0.5px solid var(--color-border-tertiary);
}
.attn-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; padding: 26px 14px;
}
.attn-empty .ti { font-size: 28px; color: var(--rs-accent); }
.attn-empty p { margin: 0; font-size: 13px; color: var(--color-text-secondary); max-width: 280px; line-height: 1.5; }

@media (max-width: 980px) {
  .ws-2col { grid-template-columns: 1fr; }
}

/* ── Add-deliverable form grid (consultant deliverables page) ── */
.add-deliv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.add-deliv-grid > * { margin: 0; min-width: 0; }
@media (max-width: 560px) { .add-deliv-grid { grid-template-columns: 1fr; } }

/* ── "View as client" read-only preview ─────────────────────── */
.preview-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 16px;
  background: #0b0f17; color: #fff;
  font-size: 13px;
}
.preview-banner-text { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.preview-banner-text i { font-size: 15px; }
.preview-banner-text strong { font-weight: 600; }
.preview-banner-exit {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  color: #fff; text-decoration: none; font-weight: 500;
  padding: 4px 11px; border-radius: 9999px; border: 1px solid rgba(255,255,255,0.35);
}
.preview-banner-exit:hover { background: rgba(255,255,255,0.12); }
/* Reserve space for the fixed banner across the fixed sidebar + main column. */
body.preview-mode .sidebar { top: 40px; height: calc(100vh - 40px); }
body.preview-mode .main { padding-top: calc(1.5rem + 40px); }
/* Hide client-only write controls while previewing. */
body.preview-mode [data-preview-hide],
body.preview-mode .deliv-action--approve,
body.preview-mode .deliv-action--changes { display: none !important; }

/* Workspace "View as client" button */
.view-as-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; padding: 8px 14px; border-radius: 9999px;
  border: 1px solid var(--color-border-secondary);
  white-space: nowrap; flex-shrink: 0;
}
.view-as-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Header action pills never squish onto two lines; wrap as whole pills instead.
   The select + view-as pair wraps as ONE unit so neither orphans onto its own row. */
.page-header-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
.page-header-actions .updates-pill,
.page-header-actions .scope-select { flex-shrink: 0; }
.scope-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }

/* ── Social media trend cards (sparkline bars) ──────────────── */
.social-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.social-card { border: 1px solid var(--rs-hairline); border-radius: 14px; padding: 16px; }
.social-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.social-ico {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rs-accent-tint); color: var(--rs-accent);
}
.social-ico i { font-size: 19px; }
.social-card .social-platform { margin: 0; font-size: 14px; font-weight: 600; color: var(--rs-midnight-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-card .social-metric-label { margin: 0; font-size: 12px; color: var(--color-text-secondary); }
.trend-pill {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 9999px; white-space: nowrap;
}
.trend-pill i { font-size: 13px; }
.trend-up   { background: var(--success-soft); color: var(--success); }
.trend-down { background: #fdecec; color: var(--status-err-fg); }
.trend-flat { background: var(--color-border-tertiary); color: var(--color-text-secondary); }
.social-card .social-current {
  margin: 0; font-family: var(--font-display); letter-spacing: -0.02em;
  font-size: 30px; line-height: 1.05; color: var(--rs-midnight-ink);
}
.social-since-line { margin: 4px 0 0; font-size: 12.5px; color: var(--color-text-secondary); }
.social-since { font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.social-since.up { color: var(--success); }
.social-since.down { color: var(--status-err-fg); }
.social-since i { font-size: 13px; }
.spark { display: flex; align-items: flex-end; gap: 6px; height: 56px; margin-top: 14px; }
.spark-bar { flex: 1; min-width: 0; background: var(--rs-spark-prev); border-radius: 6px 6px 4px 4px; }
.spark-bar.is-last { background: var(--rs-accent); }
@media (max-width: 640px) { .social-grid { grid-template-columns: 1fr; } }

/* ── Service-type monthly progress (X of Y shipped) ─────────── */
.svc-progress { margin-bottom: 4px; }
.svc-progress + .card-row { margin-top: 12px; }
.svc-progress-text {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5px; color: var(--color-text-secondary); margin-bottom: 8px;
}
.svc-progress-text strong { color: var(--rs-midnight-ink); font-weight: 600; }
.svc-bar { height: 8px; border-radius: 9999px; background: var(--color-border-tertiary); overflow: hidden; }
.svc-bar-fill { display: block; height: 100%; border-radius: 9999px; background: var(--rs-accent, #0a6cff); transition: width .3s ease; }

/* Service-type template chips + monthly-target inputs (editor) */
.tpl-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; padding: 5px 11px; border-radius: 9999px;
  border: 1px solid var(--rs-hairline); background: var(--rs-pure-white, #fff);
  color: var(--color-text-secondary); cursor: pointer;
}
.tpl-chip:hover { border-color: var(--rs-accent); color: var(--rs-accent); }
.tpl-chip i { font-size: 14px; }
.progress-fields { display: flex; align-items: center; gap: 8px; }
.progress-fields input[type="number"] { flex: 1 1 70px; min-width: 0; }
.progress-fields #area-prog-unit { flex: 1 1 110px; }
.progress-fields .pf-sep { font-size: 13px; color: var(--color-text-secondary); flex: none; }

/* ── GA4 period-over-period delta chip ──────────────────────── */
.delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; margin-top: 6px; }
.delta i { font-size: 13px; }
.delta.up { color: var(--success); }
.delta.down { color: var(--status-err-fg); }

/* Section label with a trailing action (e.g. "See full report") */
.ws-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ws-label-row a { text-transform: none; letter-spacing: 0; }

/* ══ Phase 1: toasts, deep-link flash, request detail ══════════ */

/* Toast stack (created by ui.js rsToast) */
#rs-toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 1200;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.rs-toast {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: min(420px, calc(100vw - 36px));
  padding: 10px 14px; border-radius: 10px; cursor: pointer;
  background: var(--rs-overlay-fill, #181d27); color: #fff;
  font-size: 13px; line-height: 1.45;
  box-shadow: 0 8px 24px rgba(10, 13, 18, 0.18);
  opacity: 0; transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: auto;
}
.rs-toast.is-in { opacity: 1; transform: translateY(0); }
.rs-toast i { font-size: 16px; flex: none; }
.rs-toast--success i { color: #4ade80; } /* intentionally light for dark toast bg */
.rs-toast--error   i { color: #f87171; } /* intentionally light for dark toast bg */

/* Emailed deep links: flash the item the hash points at */
@keyframes rs-flash-fade {
  0%   { background: #e3efff; box-shadow: 0 0 0 2px var(--rs-accent, #0a6cff); }
  100% { background: var(--rs-pure-white, #fff); box-shadow: none; }
}
.rs-flash { animation: rs-flash-fade 2.2s ease forwards; }

/* Clickable list rows (workspace request queue) */
.list-item--link { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.list-item--link:hover { border-color: var(--rs-accent, #0a6cff); }
.list-item--link:focus-visible { outline: 2px solid var(--rs-accent, #0a6cff); outline-offset: 1px; }

/* Request detail (modal body) */
.req-detail-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--color-text-secondary); margin-bottom: 10px; }
.req-detail-body {
  font-size: 13.5px; line-height: 1.6; color: var(--color-text-primary);
  background: var(--rs-cloud-veil, #f6f8fb); border: 1px solid var(--rs-hairline);
  border-radius: 8px; padding: 10px 12px; margin: 0 0 10px;
  white-space: pre-wrap; word-break: break-word;
}
.req-status-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.req-status-row .req-status-hint { font-size: 12px; color: var(--color-text-secondary); flex-basis: 100%; }

/* Who decided + when (approval meta on deliverable rows) */
.decided-note { font-size: 12px; color: var(--color-text-secondary); margin: 2px 0 0; }
.decided-note i { font-size: 13px; vertical-align: -2px; }

/* ══ Phase 2: nav badge, threads, fulfils-request chips ════════ */

/* Sidebar nav count badges: amber = needs attention, neutral = plain count.
   .sidebar-nav a is already display:flex with gap, so margin-left:auto right-aligns. */
.nav-count {
  margin-left: auto;
  flex-shrink: 0;
  min-width: 18px;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  background: var(--rs-cloud-veil);
  color: var(--rs-stone);
}
.nav-count--warn {
  background: var(--status-warn-bg);
  color: var(--status-warn-fg);
}
/* Keep a neutral badge legible against the neutral active-nav surface. */
.sidebar-nav a.active .nav-count:not(.nav-count--warn) {
  background: var(--rs-paper-white);
  color: var(--rs-stone);
}

/* Free-plan build-window banner (countdown, then soft lock). Injected at the
   top of .app-main by initFreeLock() in shared.js on consultant pages. */
.free-lock-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin-bottom: 20px;
  border: 1px solid var(--rs-accent-tint); border-radius: 12px;
  background: var(--rs-accent-tint); color: var(--color-text-primary);
  font-size: 14px; line-height: 1.4;
}
.free-lock-banner i { font-size: 18px; color: var(--rs-accent); flex: 0 0 auto; }
.free-lock-banner span { flex: 1 1 auto; }
.free-lock-banner .btn { flex: 0 0 auto; white-space: nowrap; }
.free-lock-banner.is-locked {
  border-color: var(--status-warn-bd);
  background: var(--status-warn-bg);
}
.free-lock-banner.is-locked i { color: var(--status-warn-fg); }

/* Request thread (reuses the deliverable feedback look) */
.req-thread { margin-top: 10px; }
.req-reply-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.req-reply-form textarea { width: 100%; }

/* "Fulfils request" / "Delivered as" linkage chips */
.link-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; padding: 3px 9px; margin-top: 4px;
  border-radius: 9999px; border: 1px solid var(--rs-hairline);
  background: var(--rs-cloud-veil, #f6f8fb); color: var(--color-text-secondary);
  text-decoration: none;
}
a.link-chip:hover, button.link-chip:hover { border-color: var(--rs-accent, #0a6cff); color: var(--rs-accent, #0a6cff); cursor: pointer; }
.link-chip i { font-size: 13px; }

/* Auth-card brand logo (replaces the old gradient .auth-brand tile) */
.auth-brand-img { width: 40px; height: 40px; display: inline-block; margin-bottom: 16px; }

/* Logo chip on the blue auth aside: white backing so the blue tile reads */
.auth-aside .aside-brand .mk--logo { background: #fff; }
.auth-aside .aside-brand .mk--logo img { width: 24px; height: 24px; display: block; }

/* White-label: consultant's practice logo beside the brand name in the
   client sidebar (prepended by applyPortalBranding in shared.js) */
.sidebar-brand-logo {
  width: 22px; height: 22px; border-radius: 6px; object-fit: contain;
  display: inline-block; vertical-align: -5px; margin-right: 8px;
  background: #fff;
}

/* ══ Phase 4 polish ════════════════════════════════════════════ */

/* Remove-access button on the client team list: ghost at rest so a
   destructive action never carries the same weight as a routine one. */
.tm-remove { color: var(--rs-stone); border-color: transparent; background: transparent; }
.tm-remove:hover { color: var(--status-err-fg); border-color: var(--status-err-fg); }

/* Bulk social quick-update zone (workspace Quick actions card). A divider above
   separates it from the single-entry form so the two interactions don't bleed. */
.social-recent { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rs-hairline); }
.sb-head { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--color-text-primary); }
.sb-sub  { margin: 0 0 10px; font-size: 12px; color: var(--color-text-secondary); }
.sb-hint { margin: 0; font-size: 12.5px; color: var(--color-text-secondary); }
.social-bulk { display: flex; flex-direction: column; gap: 0; }
.sb-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 8px 0; }
.sb-row + .sb-row { border-top: 1px solid var(--rs-hairline); }
.sb-label { flex: 1; min-width: 0; color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-cur { font-weight: 600; flex: none; min-width: 56px; text-align: right; color: var(--color-text-primary); }
.sb-cur-empty { color: var(--color-text-secondary); opacity: 0.6; }
/* Specificity must beat the base `input[type="number"] { width: 100% }` rule
   (added for the retainer field) or these bulk-log inputs go full-width and
   crush the platform labels to zero. */
.social-bulk .sb-input { width: 110px; flex: none; padding: 5px 8px; font-size: 12.5px; }
.sb-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* Mobile deliverable cards: clients approve from phones. Actions become a
   full-width row of even, thumb-sized buttons; dense sub-blocks tighten. */
@media (max-width: 640px) {
  .deliv-actions { width: 100%; gap: 8px; }
  .deliv-actions .deliv-action {
    flex: 1 1 calc(50% - 8px); justify-content: center;
    padding: 10px 8px; font-size: 13.5px;
  }
  .deliv-actions .badge,
  .deliv-actions .status-dot { order: -1; flex-basis: 100%; }
  .deliv-feedback, .deliv-versions { max-width: 100%; }
  .dv-row { flex-wrap: wrap; row-gap: 2px; }
  .changes-form textarea, .revision-form textarea { font-size: 16px; } /* stop iOS zoom-on-focus */
}

/* ══ Visual audit fixes (status dots, tall-card alignment) ═════ */

/* Status next to BUTTONS renders as a dot + label, so only interactive
   elements look like pills. Reuses the badge-* class names for colour. */
.status-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.status-dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: none;
}
.status-dot.badge-success { color: var(--status-ok-fg); }
.status-dot.badge-warning { color: var(--status-warn-fg); }
.status-dot.badge-error   { color: var(--status-err-fg); }
.status-dot.badge-neutral { color: var(--rs-stone); }

/* Expanded deliverable/request rows grow tall (threads, history): anchor the
   icon tile and the action cluster to the title row, not the vertical centre. */
#deliverables-list .list-item,
#requests-list .list-item { align-items: flex-start; }
#deliverables-list .dl-ico,
#deliverables-list .deliv-file-ico { margin-top: 2px; }
#deliverables-list .deliv-actions { margin-top: 4px; }

/* Any deliverable row with a feedback thread or revision history grows tall;
   top-align the icon, content and actions to the title on EVERY surface
   (consultant, client portal, public view) so nothing floats mid-row. */
.list-item:has(.deliv-feedback),
.list-item:has(.deliv-versions),
.list-item-left:has(.deliv-feedback),
.list-item-left:has(.deliv-versions) { align-items: flex-start; }

/* Post-signup subscribe CTA (workspace) - accent-tinted so it stands out */
.subscribe-cta { border-color: var(--rs-accent); background: var(--rs-accent-tint); }
.subscribe-cta .card-title i { color: var(--rs-accent); }

/* Danger-zone delete button: higher specificity than the redesign button base
   (was white text on a white .btn background = invisible when enabled). */
.danger-zone .dz-delete { background: var(--status-err-fg); border-color: var(--status-err-fg); color: #fff; }
.danger-zone .dz-delete:hover:not(:disabled) { background: var(--status-err-fg); filter: brightness(0.94); }
.danger-zone .dz-delete:disabled { background: var(--status-err-bg); border-color: var(--status-err-bd); color: var(--status-err-fg); opacity: 1; cursor: not-allowed; }

/* ══ Card vertical rhythm (single source of truth) ════════════════════
   One gap between cards everywhere. Stacked cards use margin-bottom;
   gap-containers (grids / flex stacks) zero it and use their own gap.
   Do NOT add inline margin-bottom to cards in markup anymore. */
.card { margin-bottom: var(--card-gap); }
.card:last-child { margin-bottom: 0; }
.setup-cols > .card,
.ws-2col > .card,
.settings-stack > .card,
.analytics-grid > .card { margin-bottom: 0; }

/* ── Search Console: performance tables, quick wins, focus-next note ── */
.gsc-table-wrap { overflow-x: auto; }
.gsc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.gsc-table th, .gsc-table td { padding: 7px 8px; text-align: right; white-space: nowrap; }
.gsc-table th:first-child, .gsc-table td:first-child { text-align: left; }
.gsc-table thead th { font-size: 11px; font-weight: 600; color: var(--rs-stone); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--rs-hairline); }
.gsc-table tbody tr + tr td { border-top: 0.5px solid var(--rs-hairline); }
.gsc-table td.gsc-key { max-width: 220px; overflow: hidden; text-overflow: ellipsis; color: var(--color-text-primary); }

.gsc-opps { border: 1px solid var(--accent-tint); }
.gsc-opp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gsc-opp-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.gsc-opp-kw { font-weight: 600; font-size: 13.5px; color: var(--color-text-primary); }
.gsc-opp-meta { font-size: 12px; color: var(--rs-stone); }

.focus-next-card { box-shadow: inset 3px 0 0 var(--rs-accent); }
.focus-next-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-text-primary); }

/* ══ Dashboard upgrade: hero metric, trend pill, secondary stats, skeletons ══ */

/* Hero metric: a full-width lead card with one big display number, an optional
   trend pill and a small sparkline. Lives on a .card element (.card.hero-metric)
   so card rhythm / --card-gap still apply; never hand-set its margin. */
.hero-metric { display: flex; flex-direction: column; gap: 6px; }
.hero-metric-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-metric-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-label);
  color: var(--rs-stone);
  margin: 0;
}
.hero-metric-value {
  font-family: var(--rs-font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  color: var(--rs-midnight-ink);
  margin: 0;
}
.hero-metric .spark { margin-top: 10px; }
@media (max-width: 560px) { .hero-metric-value { font-size: var(--text-xl); } }

/* Trend pill: success = up (green, status-only), error = down, neutral = flat. */
.metric-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.metric-trend i { font-size: 13px; }
.metric-trend--up   { background: var(--status-ok-bg);  color: var(--status-ok-fg);  border-color: var(--status-ok-bd); }
.metric-trend--down { background: var(--status-err-bg); color: var(--status-err-fg); border-color: var(--status-err-bd); }
.metric-trend--flat { background: var(--rs-cloud-veil); color: var(--rs-stone);      border-color: var(--rs-hairline); }
/* The [hidden] attribute must win: .metric-trend (inline-flex) and .spark (flex)
   set display in author CSS, which would otherwise override UA [hidden]. */
.metric-trend[hidden], .spark[hidden] { display: none; }

/* Secondary stat row under the hero: 3 equal tiles (the 4th metric is promoted). */
.stats-grid--secondary { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: var(--card-gap); }
@media (max-width: 640px) { .stats-grid--secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Skeleton loaders: replace the boot spinner with shapes that mirror the layout. */
@keyframes rs-skeleton-shimmer {
  0%   { background-position: -160px 0; }
  100% { background-position: 160px 0; }
}
.skeleton {
  background: var(--rs-cloud-veil);
  background-image: linear-gradient(90deg, var(--rs-cloud-veil) 0, var(--rs-paper-white) 50%, var(--rs-cloud-veil) 100%);
  background-size: 320px 100%;
  background-repeat: no-repeat;
  animation: rs-skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: var(--r-inner);
}
.skeleton-bar { height: 12px; width: 100%; }
.skeleton-bar.sk-sm { height: 10px; }
.skeleton-bar.w-40 { width: 40%; }
.skeleton-bar.w-60 { width: 60%; }
.skeleton-bar.w-80 { width: 80%; }
.skeleton-card {
  border-radius: var(--r-card);
  border: 1px solid var(--rs-hairline);
  background: var(--rs-cloud-veil);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.skeleton-hero { min-height: 96px; }
.skeleton-tile { min-height: 64px; }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background-image: none; }
}

/* ══ Theme controls: sidebar quick toggle + Settings appearance segmented ══ */
.theme-toggle { display: flex; align-items: center; gap: 8px; }
.theme-toggle i { font-size: 16px; }
.theme-seg {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--rs-cloud-veil);
  border: 1px solid var(--rs-hairline);
  border-radius: var(--r-pill);
}
.theme-seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; cursor: pointer;
  font-size: var(--text-sm); font-weight: 500; color: var(--rs-stone);
  padding: 7px 16px; border-radius: var(--r-pill);
  background: transparent;
}
/* Explicit hover backgrounds so the bare button:hover rule cannot blank these. */
.theme-seg-opt:hover { background: transparent; color: var(--rs-midnight-ink); }
.theme-seg-opt.is-active,
.theme-seg-opt.is-active:hover { background: var(--rs-emphasis-fill); color: #fff; }

/* ══ Deliverables board (Kanban) ══════════════════════════════════════ */
/* Desktop: the 4 stages fill the width (no horizontal scroll); each column is
   tall and scrolls its own cards vertically. Narrow screens fall back to a
   horizontal-scroll flex row (see the media queries below). */
.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--card-gap);
  align-items: start;
  padding-bottom: 8px;
  margin-bottom: var(--card-gap);
}
.board-col {
  background: var(--rs-cloud-veil);
  border: 1px solid var(--rs-hairline);
  border-radius: var(--r-card);
  padding: 12px; display: flex; flex-direction: column;
  max-height: calc(100vh - 200px);
  min-height: 220px;
}
.board-col-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding: 0 4px; }
.board-col-label { font-size: var(--text-sm); font-weight: 600; letter-spacing: -0.01em; color: var(--rs-midnight-ink); }
.board-col-count {
  font-size: var(--text-xs); font-weight: 600; color: var(--rs-stone);
  background: var(--rs-paper-white); border-radius: var(--r-pill); padding: 1px 8px; min-width: 22px; text-align: center;
}
.board-col-body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.board-col-empty { font-size: 12.5px; color: var(--rs-fog); text-align: center; padding: 14px 8px; }

.board-card {
  background: var(--rs-paper-white);
  border: 1px solid var(--rs-hairline);
  border-radius: var(--r-img);
  overflow: hidden; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.board-card:hover { border-color: var(--rs-hairline-strong); box-shadow: var(--rs-shadow-sm); }
.board-card:active { transform: translateY(1px); }
.board-card:focus-visible { outline: 2px solid var(--rs-accent); outline-offset: 2px; }
.board-card-thumb { width: 100%; height: 116px; background: var(--rs-cloud-veil); display: grid; place-items: center; overflow: hidden; }
.board-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.board-card-thumb-ph { color: var(--rs-fog-decor); font-size: 24px; }
.board-card-body { padding: 12px 13px; }
.board-card-title { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--rs-midnight-ink); display: flex; gap: 6px; align-items: flex-start; }
.board-card-title i { color: var(--rs-stone); font-size: 15px; margin-top: 1px; flex: none; }
.board-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.board-card-chip {
  font-size: 11px; color: var(--rs-stone); background: var(--rs-cloud-veil);
  border-radius: var(--r-pill); padding: 2px 8px; display: inline-flex; align-items: center; gap: 4px;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board-card-meta { margin: 8px 0 0; font-size: 12px; color: var(--rs-fog); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.board-card-meta-item { display: inline-flex; align-items: center; gap: 3px; }

/* Card-detail modal */
.board-modal { max-width: 560px; }
.board-modal-body { display: flex; flex-direction: column; gap: 12px; }
.board-modal-meta { margin: 0; font-size: 12.5px; color: var(--rs-stone); }
.board-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.board-decision { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--rs-hairline); padding-top: 12px; }
.board-changes-form { display: flex; flex-direction: column; gap: 8px; }
.board-attachments { display: flex; flex-direction: column; gap: 6px; }

/* ── Tags (chips on cards + the in-card editor) ── */
.board-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; line-height: 1;
  padding: 3px 8px; border-radius: 999px;
  background: var(--rs-cloud-veil); color: var(--rs-midnight-ink);
}
.board-tag--info   { background: var(--status-info-bg); color: var(--status-info-fg); }
.board-tag--warn   { background: var(--status-warn-bg); color: var(--status-warn-fg); }
.board-tag--ok     { background: var(--status-ok-bg);   color: var(--status-ok-fg);   }
.board-tag--accent { background: var(--accent-tint);    color: var(--rs-accent);      }
.board-tag-x {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: 14px; line-height: 1; color: inherit; opacity: 0.55;
}
.board-tag-x:hover { opacity: 1; }
.board-tagsec { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--rs-hairline); padding-top: 12px; }
.board-tagsec-head { margin: 0; font-size: 12px; font-weight: 600; color: var(--rs-stone); text-transform: uppercase; letter-spacing: 0.04em; }
.board-taglist { display: flex; flex-wrap: wrap; gap: 6px; }
.board-tag-empty { font-size: 12.5px; color: var(--rs-stone); }
.board-tagadd { display: flex; gap: 6px; flex-wrap: wrap; }
.board-tagadd #board-tag-input { flex: 1 1 140px; min-width: 0; }
.board-tagadd #board-tag-color { flex: 0 0 auto; }

/* ── Add a card (bottom of the In progress column, consultant only) ── */
.board-add-card {
  width: 100%; text-align: left; margin-top: 8px;
  border: 1px dashed var(--color-border-tertiary); background: transparent;
  border-radius: var(--r-inner); padding: 9px 12px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--rs-stone);
  display: inline-flex; align-items: center; gap: 6px;
}
.board-add-card:hover { border-color: var(--rs-accent); color: var(--rs-accent); }
.board-add-form {
  margin-top: 8px; display: flex; flex-direction: column; gap: 8px;
  background: var(--color-background-primary);
  border: 1px solid var(--rs-accent); border-radius: var(--r-inner); padding: 10px;
}
.board-add-form input, .board-add-form select { width: 100%; }
.board-add-actions { display: flex; gap: 8px; }

/* ── In-card draft editor (consultant) ── */
.board-edit .form-group { margin-bottom: 10px; }
.board-edit .form-group:last-of-type { margin-bottom: 0; }
.board-edit .rev-file-row { margin: 10px 0; }

/* ── Board columns editor (client-setup, per client) ── */
.bc-list { display: flex; flex-direction: column; gap: 8px; }
.bc-row { display: flex; align-items: center; gap: 10px; }
.bc-row .bc-label { flex: 1 1 auto; min-width: 0; }
.bc-key { flex: 0 0 auto; font-size: 11px; color: var(--rs-stone); min-width: 92px; }
@media (max-width: 560px) { .bc-key { display: none; } }

/* The board shares the standard --content-max page width; only the
   add-deliverable form is held to a readable single-column width. */
.main--wide #add-deliverable { max-width: 920px; }

/* Below ~1040px the four columns get cramped, so switch to a horizontal-scroll
   row of fixed-width columns (still tall, but the page scrolls vertically). */
@media (max-width: 1040px) {
  .board { display: flex; overflow-x: auto; align-items: flex-start; }
  .board-col { flex: 0 0 290px; max-height: none; }
  .board-col-body { overflow-y: visible; }
}
@media (max-width: 560px) {
  .board-col { flex-basis: 82vw; }
}

/* Drag-and-drop (consultant board). Cards take touch so a drag is not stolen by
   scroll; the column background still scrolls. */
.board--draggable .board-card { cursor: grab; touch-action: none; }
.board--draggable .board-card:active { cursor: grabbing; }
.board-card.is-dragging { box-shadow: var(--rs-shadow-lg); border-color: var(--rs-accent); opacity: 0.96; }
.board-card.is-grabbed { outline: 2px solid var(--rs-accent); outline-offset: 2px; }
.board-card-placeholder {
  border: 1px dashed var(--rs-accent);
  border-radius: var(--r-img);
  background: var(--rs-accent-tint);
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  .board-card.is-dragging { box-shadow: none; }
}

/* ══ Collapsible sidebar (desktop): icon rail by default, expands to labels ══ */
.sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar-collapse {
  background: none; border: 0; cursor: pointer; color: var(--rs-stone);
  padding: 6px; border-radius: var(--border-radius-md); line-height: 0; flex: none;
}
.sidebar-collapse:hover { background: var(--rs-cloud-veil); color: var(--rs-midnight-ink); }
.sidebar-collapse i { font-size: 18px; }

@media (min-width: 769px) {
  .sidebar, .main { transition: width .16s ease, margin-left .16s ease; }
  html.rs-sidebar-collapsed { --sidebar-width: 66px; }
  html.rs-sidebar-collapsed .sidebar-header { justify-content: center; }
  html.rs-sidebar-collapsed .sidebar-brand { display: none; }
  html.rs-sidebar-collapsed .sidebar-section-label { display: none; }
  /* font-size:0 hides the bare text-node labels; the icons restore their size */
  html.rs-sidebar-collapsed .sidebar-nav a { justify-content: center; gap: 0; font-size: 0; padding: 9px 0; position: relative; }
  html.rs-sidebar-collapsed .sidebar-nav a i { font-size: 18px; }
  html.rs-sidebar-collapsed .nav-count {
    position: absolute; top: 5px; right: 13px; min-width: 0; width: 8px; height: 8px;
    padding: 0; font-size: 0; line-height: 0; border-radius: 50%;
    background: var(--rs-stone);   /* a solid dot reads as an indicator at 8px */
  }
  html.rs-sidebar-collapsed .nav-count--warn { background: var(--status-warn-fg); }
  html.rs-sidebar-collapsed .user-pill { justify-content: center; }
  html.rs-sidebar-collapsed .user-info { display: none; }
  html.rs-sidebar-collapsed .btn-sign-out { justify-content: center; gap: 0; font-size: 0; text-align: center; }
  html.rs-sidebar-collapsed .btn-sign-out i { font-size: 16px; }
}
/* The mobile drawer always shows full labels - no collapse control there. */
@media (max-width: 768px) { .sidebar-collapse { display: none; } }