/* Test layout, version 1: "light sidebar".
   Loaded last. Every rule is scoped to html[data-layout="test"], so nothing
   changes unless the captain switches it on in Settings > Test layout.
   To try another design, only this file needs to change. */

/* a small badge so a test screen is never mistaken for the normal one */
html[data-layout="test"] body::after,
html[data-layout="phone"][data-layout-badge] body::after {
  content: "TEST LAYOUT";
  position: fixed; top: 3px; left: 4px;
  z-index: 9999; pointer-events: none;
  padding: 1px 8px; border-radius: 999px;
  background: #b8873d; color: #fff;
  font: 600 9px/14px 'Barlow Condensed', sans-serif; letter-spacing: .16em;
}

/* sidebar: light instead of dark navy */
html[data-layout="test"] .desk-nav { background: #fbf8f2; color: #4a463c; border-right: 1px solid #e6dfcd; }
html[data-layout="test"] .desk-nav-brand { color: #061733; }
html[data-layout="test"] .desk-nav-brand-sub { color: #8a846f; }
html[data-layout="test"] .desk-nav-section-label { color: #8a6a2c; }
html[data-layout="test"] .desk-nav a { color: #3d3a32; }
html[data-layout="test"] .desk-nav a:hover { background: rgba(6,23,51,.05); color: #061733; }
html[data-layout="test"] .desk-nav a.active { background: #fff; color: #061733; box-shadow: inset 3px 0 0 #b8873d, 0 1px 2px rgba(6,23,51,.06); }
html[data-layout="test"] .desk-nav-list { scrollbar-color: rgba(138,106,44,.35) transparent; }
html[data-layout="test"] .desk-nav-outbox { background: #fff; border-color: #e6dfcd; color: #5d584a; }
html[data-layout="test"] .desk-nav-outbox .obx-h { color: #061733; }
html[data-layout="test"] .desk-nav-outbox .obx-acts button { color: #3d3a32; border-color: #d9d4c6; }
html[data-layout="test"] .desk-nav-outbox .obx-ok { color: #2f6f3a; }
html[data-layout="test"] .desk-nav-outbox .obx-warn { color: #8a5a00; }
html[data-layout="test"] .desk-nav-outbox .obx-err { color: #a12c3a; }
html[data-layout="test"] .desk-nav-user { border-top-color: #e6dfcd; color: #6f6a5a; }
html[data-layout="test"] .desk-nav-user strong { color: #061733; }
html[data-layout="test"] .desk-nav-user button { color: #3d3a32; border-color: #d9d4c6; }
html[data-layout="test"] .desk-nav-user button:hover { color: #8a6a2c; border-color: #b8873d; }

/* page: white canvas, softer cards, calmer header */
html[data-layout="test"] body.desktop-mode,
html[data-layout="test"] body.desktop-mode .stage,
html[data-layout="test"] body.desktop-mode .phone-screen { background: #f7f5f0; }
html[data-layout="test"] body.desktop-mode .appbar { background: #f7f5f0; border-bottom: 1px solid #e6dfcd; backdrop-filter: none; }
html[data-layout="test"] .card { border-color: #ece6d6; border-radius: 14px; box-shadow: 0 1px 2px rgba(6,23,51,.05), 0 6px 18px rgba(6,23,51,.04); }
html[data-layout="test"] body.desktop-mode .content { padding: 28px 44px 56px; }