/*
  56-campaign-bar.css — v45.7 the campaign bar and its three sheets
  (design/shell/Main, Day, Switch; design/shared/Sync; icons from design/icons).

  The bar keeps .topbar (the easter-egg themes in 05 and styles.css key off
  it) and #shipTitle (07 writes the name there). The sheets sit under the bar:
  backdrop 140, sheet 145, bar 150, all below app dialogs (260) and above the
  bottom nav (20).
*/

.topbar.campaign-bar {
  /* 43 pins .topbar static with !important. v45.8.1: the bar stays put
     (sticky, D13) and stacks above its own sheet's backdrop. */
  position: sticky !important; top: 0 !important; z-index: 150;
  display: flex; align-items: center; gap: 8px;
  min-height: 56px; padding: 0 12px;
  background: #1f1712; border-bottom: 1px solid #3a2a1d;
  backdrop-filter: none; box-shadow: none;
}
.campaign-bar .cb-title { flex: 1 1 auto; min-width: 0; margin: 0; font: inherit; text-shadow: none; }
.campaign-bar .cb-name {
  display: flex; align-items: center; gap: 6px; max-width: 100%;
  min-height: 44px; padding: 0 4px; border: 0; background: none;
  color: #e8c069; font-size: 19px; font-weight: 700; text-align: left; cursor: pointer;
}
.campaign-bar #shipTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.campaign-bar .cb-chev { flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.campaign-bar .cb-name[aria-expanded="true"] .cb-chev { transform: rotate(180deg); }

.campaign-bar .cb-day {
  flex: 0 0 auto; position: relative;
  display: flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid #6e5b40; background: #2a1e15; color: #f1e4c4;
  font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}
.campaign-bar .cb-day-icon { display: inline-flex; color: #e8c069; }
.campaign-bar .cb-day[aria-expanded="true"] { background: #c18a2a; border-color: #c18a2a; color: #1f1712; font-weight: 700; }
.campaign-bar .cb-day[aria-expanded="true"] .cb-day-icon { color: #1f1712; }
/* Two or more days passed in 24 real hours (v40.27's mistake detector). */
.campaign-bar .cb-day.cb-warn::after {
  content: ""; position: absolute; top: -2px; right: -2px;
  width: 10px; height: 10px; border-radius: 999px; background: #e0a43a; box-shadow: 0 0 0 2px #1f1712;
}

.campaign-bar .cb-anchor,
.campaign-bar .cb-sync {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0; border-radius: 12px;
  border: 1px solid #4a3a28; background: #2a1e15; color: #bfae8c; cursor: pointer;
}
.campaign-bar .cb-anchor[hidden] { display: none; }
.campaign-bar .cb-anchor[aria-pressed="true"] { background: #c18a2a; border-color: #c18a2a; color: #1f1712; }
.campaign-bar .cb-sync[aria-expanded="true"] { border: 1.5px solid #e8c069; }
.campaign-bar .cb-cloud { display: inline-flex; }
.campaign-bar .cb-sync[data-state="live"] { color: #4fb06b; }
.campaign-bar .cb-sync[data-state="saving"] { color: #e0a43a; }
.campaign-bar .cb-sync[data-state="remote"] { color: #6aa8de; }
.campaign-bar .cb-sync[data-state="offline"],
.campaign-bar .cb-sync[data-state="local"] { color: #9a8f7c; }
.campaign-bar .cb-sync[data-state="error"] { color: #ec7a64; }
.campaign-bar .cb-sync[data-state="saving"] .cb-cloud { animation: cb-pulse 1.2s ease-in-out infinite; }
@keyframes cb-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .campaign-bar .cb-sync[data-state="saving"] .cb-cloud { animation: none; } }

.campaign-bar #topSummary { display: none; }
.campaign-bar #topSummary:not([hidden]) { display: block; position: absolute; left: 12px; right: 12px; top: 100%; margin-top: 6px; }

/* ---------- the sheets ---------- */
.cb-backdrop { position: fixed; inset: 0; z-index: 140; background: rgba(20,14,9,.62); }
.cb-backdrop[hidden], .cb-sheet[hidden] { display: none; }
.cb-sheet {
  position: fixed; z-index: 145; left: 0; right: 0; bottom: 0;
  max-width: 560px; margin: 0 auto; box-sizing: border-box;
  max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 14px;
  padding: 10px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  border-radius: 22px 22px 0 0; background: #f4ecd8; color: #231a10;
  box-shadow: 0 -10px 30px rgba(0,0,0,.35);
}
.cb-sheet h2 { margin: 0; color: #231a10; text-shadow: none; letter-spacing: 0; }
.cb-grabber { align-self: center; width: 44px; height: 5px; border-radius: 999px; background: #cdbd95; }
.cb-kicker { font-size: 13px; font-weight: 600; color: #5c4a30; }
.cb-date { margin-top: 2px !important; font-size: 24px; font-weight: 700; }
.cb-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cb-actions:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.cb-btn {
  min-height: 52px; padding: 0 12px; border-radius: 14px;
  border: 1px solid #b9a77f; background: transparent; color: #231a10;
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.cb-btn.cb-primary { border: 0; background: #c18a2a; color: #1f1712; font-weight: 700; }
.cb-anchored {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 14px; border: 1px solid #ddd0ab; background: #efe4c3; cursor: pointer; color: #845c0f;
}
.cb-anchored-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; color: #231a10; }
.cb-anchored-name { font-size: 15px; font-weight: 700; }
.cb-anchored-sub { font-size: 13px; font-weight: 400; color: #5c4a30; }
/* The app's labels are bold (800); this label holds a whole row. */
.cb-anchored, .cb-anchored-name { font-weight: 700; }
.cb-anchored { font-size: 15px; }
.cb-anchored input { width: 22px; height: 22px; margin: 0; accent-color: #845c0f; }
.cb-lines { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 1.45; color: #3d2f1d; }
.cb-lines b { color: #231a10; }
.cb-passes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: #5c4a30; }
.cb-passes.is-warn { color: #7a3d0a; font-weight: 600; }
.cb-passes .cx-icon { color: #b0632b; }
.cb-link {
  min-height: 44px; padding: 0; border: 0; background: none;
  color: #845c0f; font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.cb-passes .cb-link { min-height: 32px; }
.cb-fix { align-self: flex-start; }

/* The campaigns list drops from the bar rather than rising from the bottom. */
.cb-sheet.cb-sheet-switch {
  bottom: auto; left: 10px; right: 10px; top: 64px;
  max-height: calc(100dvh - 80px); gap: 2px; padding: 8px;
  border-radius: 20px; box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
@media (min-width: 580px) { .cb-sheet.cb-sheet-switch { left: 12px; right: auto; width: 420px; margin: 0; } }
.cb-heading { padding: 8px 10px 6px; font-size: 13px; font-weight: 700; color: #5c4a30; letter-spacing: .04em; text-transform: uppercase; }
.cb-sheet-sync .cb-heading { padding: 4px 0 0; font-size: 12px; letter-spacing: .05em; }
.cb-camps { display: flex; flex-direction: column; gap: 2px; }
.cb-camp, .cb-row {
  display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
  padding: 8px 12px; border-radius: 14px; border: 1px solid transparent; background: transparent;
  color: #231a10; font: inherit; text-align: left; cursor: pointer;
}
.cb-camp { min-height: 60px; }
.cb-camp.is-on { background: #efe4c3; border-color: #ddd0ab; }
.cb-camp-badge { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: #1f1712; font-size: 16px; font-weight: 800; }
.cb-camp-text, .cb-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cb-camp-name { font-size: 16px; font-weight: 700; }
.cb-camp-sub, .cb-row-sub { font-size: 13px; color: #5c4a30; }
.cb-camp-on { flex-shrink: 0; font-size: 12px; font-weight: 700; color: #845c0f; }
.cb-camp.cb-new { min-height: 52px; color: #845c0f; }
.cb-camp.cb-new .cb-camp-name { font-size: 15px; }
.cb-plus { border: 1px dashed #b9a77f; background: transparent; color: #845c0f; }
.cb-rule { height: 1px; margin: 6px 10px; background: #ddd0ab; }
.cb-row { min-height: 52px; }
.cb-row > .cx-icon { flex-shrink: 0; color: #845c0f; }
.cb-row-name { font-size: 15px; font-weight: 700; }
.cb-tag { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; border: 1px solid #b9a77f; font-size: 11px; font-weight: 700; color: #845c0f; }
.cb-camp:hover, .cb-row:hover { background: #efe4c3; }
.cb-camp:focus-visible, .cb-row:focus-visible, .cb-btn:focus-visible, .cb-link:focus-visible,
.campaign-bar button:focus-visible { outline: 2px solid #e8c069; outline-offset: 2px; }
.cb-sheet .cb-camp:focus-visible, .cb-sheet .cb-row:focus-visible, .cb-sheet .cb-btn:focus-visible, .cb-sheet .cb-link:focus-visible { outline-color: #845c0f; }

/* Sync */
.cb-sheet-sync { gap: 12px; }
.cb-sync-head { display: flex; align-items: center; gap: 12px; }
.cb-sync-badge { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #e3d5ae; color: #5c4a30; }
.cb-sync-head[data-state="live"] .cb-sync-badge { background: #e4ecd4; color: #2f6b3f; }
.cb-sync-head[data-state="saving"] .cb-sync-badge { background: #f6e6c4; color: #8a5a0a; }
.cb-sync-head[data-state="remote"] .cb-sync-badge { background: #dfe9f3; color: #2b5d8a; }
.cb-sync-head[data-state="error"] .cb-sync-badge { background: #f6e1db; color: #8a2f20; }
.cb-sync-title { font-size: 20px; font-weight: 700; }
.cb-sync-sub { font-size: 14px; color: #5c4a30; }
.cb-sync-body { margin: 0; font-size: 14px; line-height: 1.5; }
.cb-sheet-sync .cb-btn { min-height: 48px; font-size: 15px; }
.cb-legend { border-radius: 14px; border: 1px solid #ddd0ab; background: #efe4c3; overflow: hidden; }
.cb-state { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 12px; border-bottom: 1px solid #ddd0ab; }
.cb-state:last-child { border-bottom: 0; }
.cb-state > span:nth-child(2) { flex: 1 1 auto; display: flex; flex-direction: column; }
.cb-state-name { font-size: 14px; font-weight: 700; }
.cb-state-sub { font-size: 12px; color: #5c4a30; }
.cb-dot { flex-shrink: 0; width: 12px; height: 12px; border-radius: 999px; background: #8f8574; }
.cb-state[data-state="live"] .cb-dot { background: #4fb06b; }
.cb-state[data-state="saving"] .cb-dot { background: #e0a43a; }
.cb-state[data-state="remote"] .cb-dot { background: #5a9bd4; }
.cb-state[data-state="error"] .cb-dot { background: #a33a2a; }
.cb-state.is-now .cb-dot { box-shadow: 0 0 0 3px #efe4c3, 0 0 0 5px currentColor; color: #5c4a30; }
.cb-last { font-size: 12px; color: #5c4a30; }