/* ============================================================================
 * Settings & Platform Refresh mockups - shared scaffolding. Review-only.
 * The real look comes from the LIVE /dashboard/css/theme.css + app.css
 * (linked via the _serve.mjs proxy). This file only styles the mock chrome:
 * the batch top-bar, the two-pane settings shell, and review annotations.
 * All colors reference DataRipple tokens - no hardcoded brand values.
 * ==========================================================================*/

* { box-sizing: border-box; }
/* The live app.css locks `html, body { height:100%; overflow:hidden }` for the
 * real dashboard (which scrolls an inner pane). These are standalone review
 * pages, so restore normal document scrolling. */
html, body { margin: 0; height: auto; min-height: 100%; overflow: visible; }
body {
  min-height: 100%;
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- batch top bar (mock-only, not product chrome) ---------- */
.mockbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 22px;
  background: var(--shell);
  border-bottom: 1px solid var(--shell-rule);
}
.mockbar .mb-mark {
  width: 26px; height: 26px; border-radius: 7px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--teal); color: #fff; font-size: 15px;
}
.mockbar .mb-kicker { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; opacity: .55; }
.mockbar h1 { font-family: var(--font-heading); font-size: 14px; margin: 0; color: #fff; white-space: nowrap; }
.mockbar .mb-desc { font-size: 12px; color: rgba(255,255,255,.55); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mockbar .mb-spacer { flex: 1; }
.mockbar .mb-nav { display: flex; gap: 5px; flex: 0 0 auto; flex-wrap: wrap; }
.mockbar .mb-nav a {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.62); text-decoration: none;
  padding: 5px 10px; border-radius: 7px; border: 1px solid rgba(255,255,255,.14); white-space: nowrap;
  transition: color .12s, border-color .12s, background .12s;
}
.mockbar .mb-nav a:hover { color: #fff; border-color: rgba(255,255,255,.34); }
.mockbar .mb-nav a.on { color: #fff; background: var(--teal); border-color: var(--teal); }

/* ---------- generic mock page column ---------- */
.mockpage { max-width: 1180px; margin: 0 auto; padding: 30px 28px 90px; }
.mockpage.wide { max-width: 1320px; }

/* ---------- review annotations (full border + tint, no side-stripe) ---------- */
.note {
  font-size: 12.5px; color: var(--fg-3); line-height: 1.62;
  border: 1px solid var(--border);
  background: var(--surface-1);
  border-radius: var(--radius-md);
  padding: 13px 16px; margin: 18px 0 0;
}
.note b { color: var(--fg-1); font-weight: 600; }
.note .accent { color: var(--teal); font-weight: 600; }
.note .note-h {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal); margin: 0 0 6px;
}

/* callout used to flag "why" rationale beside a proposal */
.why {
  border: 1px dashed var(--border-strong);
  background: transparent;
  border-radius: var(--radius-md);
  padding: 12px 15px; margin: 14px 0 0;
  font-size: 12.5px; color: var(--fg-3); line-height: 1.6;
}
.why b { color: var(--fg-1); font-weight: 600; }