/* ==========================================================================
   OG Control Room: layout + app components (control-room.css)
   Loads AFTER og-tokens.css (unchanged, OG house defaults = no theme file).
   Law: no new colors, no new font sizes. Every value below is a var(--og-*)
   token or a layout number (px widths/heights of app chrome).
   ========================================================================== */

/* ---- App shell ---- */
.cr { min-height: 100dvh; display: flex; flex-direction: column; }
.cr-main { flex: 1; width: 100%; max-width: 720px; margin-inline: auto;
  padding: var(--og-space-4) 18px calc(72px + env(safe-area-inset-bottom) + var(--og-space-6)); }
.cr-stack > *, .cr-col > * { min-width: 0; }
.cr-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--og-space-4); align-content: start; }
.cr-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--og-space-4); align-content: start; }

/* ---- Top app bar (brand band) ---- */
.cr-bar { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top); }
.cr-bar__in { display: flex; align-items: center; gap: var(--og-space-3); min-height: 56px; padding-inline: 18px; max-width: 1180px; margin-inline: auto; }
.cr-brand { display: inline-flex; align-items: center; gap: var(--og-space-2); min-height: var(--og-tap-compact);
  text-decoration: none; color: var(--og-brand-fg); font-weight: var(--og-weight-strong); font-size: var(--og-text-md); }
.cr-bar .cr-brand { color: var(--og-brand-fg); }
.cr-fresh { margin-left: auto; display: inline-flex; align-items: center; gap: var(--og-space-2);
  min-height: var(--og-tap-compact); padding: 0 var(--og-space-3); border: 1px solid var(--og-brand-line); border-radius: var(--og-radius-pill);
  background: transparent; color: var(--og-brand-muted); font: 600 var(--og-text-xs)/1 var(--og-font-ui); cursor: pointer; }
.cr-fresh svg { width: 16px; height: 16px; }
.cr-fresh[data-stale="true"] { color: var(--og-brand-fg); border-color: var(--og-brand-hi); }

/* ---- OG mark (text mark in tokens; no image logo) ---- */
.og-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--og-radius-sm);
  background: var(--og-accent); color: var(--og-accent-ink); font: 800 var(--og-text-sm)/1 var(--og-font-ui); letter-spacing: -0.04em; flex: none; }
.og-mark--lg { width: 64px; height: 64px; border-radius: var(--og-radius-md); font-size: var(--og-text-xl); }

/* ---- Bottom tab bar (phone) → left rail (≥ 1024px) ---- */
.cr-tabs { position: fixed; inset: auto 0 0 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--og-panel); border-top: 1px solid var(--og-line); padding-bottom: env(safe-area-inset-bottom); }
.cr-tab { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 64px;
  text-decoration: none; color: var(--og-muted); font-size: var(--og-text-xs); font-weight: 600; }
.cr-tab__ico { display: grid; place-items: center; width: 56px; height: 30px; border-radius: var(--og-radius-pill); transition: background-color var(--og-dur-fast) var(--og-ease); }
.cr-tab svg { width: 22px; height: 22px; }
.cr-tab[aria-current="page"] { color: var(--og-ink); font-weight: 800; }
.cr-tab[aria-current="page"] .cr-tab__ico { background: var(--og-accent); color: var(--og-accent-ink); }
.cr-badge { position: absolute; top: 6px; left: calc(50% + 8px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--og-radius-pill);
  display: grid; place-items: center; background: var(--og-ink); color: var(--og-white); font: 800 var(--og-text-xs)/1 var(--og-font-ui); box-shadow: 0 0 0 2px var(--og-panel); }
.cr-badge .og-placeholder { background: none; box-shadow: none; color: inherit; padding: 0; font-size: var(--og-text-xs); }

/* ---- Section header ---- */
.cr-head { display: flex; align-items: center; justify-content: space-between; gap: var(--og-space-3); margin: 0 0 var(--og-space-3); }
.cr-head h2 { font-size: var(--og-text-lg); line-height: var(--og-leading-snug); letter-spacing: 0; margin: 0; }
.cr-head a { font-size: var(--og-text-sm); font-weight: 700; min-height: var(--og-tap-compact); display: inline-flex; align-items: center; padding-inline: var(--og-space-2); margin-right: calc(-1 * var(--og-space-2)); }
.cr-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; margin-left: var(--og-space-2); vertical-align: 2px;
  border-radius: var(--og-radius-pill); background: var(--og-ink); color: var(--og-white); font-size: var(--og-text-xs); font-weight: 800; }
.cr-count .og-placeholder { background: none; box-shadow: none; color: inherit; padding: 0; }

/* Cards on phone: 20px pad (token 5) instead of 24 to buy width */
.cr .og-card { padding: var(--og-space-5); }
.cr-src { display: flex; flex-wrap: wrap; align-items: center; gap: var(--og-space-1) var(--og-space-2); margin: var(--og-space-3) 0 0; font-size: var(--og-text-sm); color: var(--og-muted); }

/* ---- Cash card ---- */
.cr-cash__total { font-size: var(--og-text-2xl); font-weight: var(--og-weight-display); line-height: var(--og-leading-tight); margin: 0 0 var(--og-space-4); }
.cr-kv { display: grid; grid-template-columns: 1fr 1fr; gap: var(--og-space-3); margin: 0; }
.cr-kv div { border-top: 1px solid var(--og-line); padding-top: var(--og-space-2); }
.cr-kv dt { font-size: var(--og-text-xs); font-weight: 700; letter-spacing: var(--og-tracking-label); text-transform: uppercase; color: var(--og-muted); }
.cr-kv dd { margin: 2px 0 0; font-weight: 700; }

/* ---- List rows (waiting, projects, bots) ---- */
.cr-list { list-style: none; margin: 0; padding: 0; }
.cr-list > li + li { border-top: 1px solid var(--og-line); }
.cr-row { display: flex; align-items: center; gap: var(--og-space-3); min-height: 64px; padding-block: var(--og-space-3); color: inherit; text-decoration: none; }
a.cr-row:hover .cr-row__title { text-decoration: underline; }
.cr-row__body { flex: 1; min-width: 0; }
.cr-row__title { display: block; font-weight: 700; line-height: var(--og-leading-snug); }
.cr-row__meta { display: block; font-size: var(--og-text-sm); color: var(--og-muted); line-height: var(--og-leading-snug); margin-top: 2px; }
.cr-chev { flex: none; width: 20px; height: 20px; color: var(--og-muted); }
.cr-type { display: inline-flex; align-items: center; gap: 6px; font-size: var(--og-text-xs); font-weight: 800; letter-spacing: var(--og-tracking-label); text-transform: uppercase; color: var(--og-muted); margin-bottom: 2px; }
.cr-type svg { width: 14px; height: 14px; }
.cr-row .og-btn { flex: none; }

/* ---- Progress bar (single value) ---- */
.cr-bar-track { display: block; position: relative; height: 10px; border-radius: var(--og-radius-pill); background: var(--og-line); overflow: hidden; margin-top: var(--og-space-2); }
.cr-bar-fill { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: var(--og-ink); border-radius: inherit; }
/* Unknown / placeholder value: hatched track, no fill, never a guessed width */
.cr-bar-track[data-state="unknown"] { background: repeating-linear-gradient(-45deg, var(--og-line) 0 6px, var(--og-panel) 6px 12px); outline: 1px solid var(--og-line); outline-offset: -1px; }
.cr-bar-track--lg { height: 14px; }
.cr-proj__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--og-space-3); }
.cr-pct { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- Status dot: shape + label, never color alone ---- */
.cr-dot { flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--og-ink); background: var(--og-accent); }
.cr-dot[data-s="stale"] { background: var(--og-panel); border-color: var(--og-muted); border-style: dashed; }
.cr-dot[data-s="down"] { background: var(--og-ink); border-radius: 2px; transform: rotate(45deg) scale(.85); }
.cr-dot[data-s="unknown"] { background: repeating-linear-gradient(-45deg, var(--og-line) 0 2px, var(--og-panel) 2px 4px); border-color: var(--og-line-strong); }
.cr-row--top { align-items: flex-start; }
.cr-row--top > .cr-dot { margin-top: 5px; }
.cr-status { font-size: var(--og-text-xs); font-weight: 800; letter-spacing: var(--og-tracking-label); text-transform: uppercase; }

/* ---- Bot health strip (home) ---- */
.cr-strip { display: flex; gap: var(--og-space-2); overflow-x: auto; margin-inline: calc(-1 * var(--og-space-5)); padding: 2px var(--og-space-5) var(--og-space-1); scroll-snap-type: x proximity; scrollbar-width: none; }
.cr-strip::-webkit-scrollbar { display: none; }
.cr-chip { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: var(--og-space-2); min-height: var(--og-tap-compact);
  padding: 6px var(--og-space-3); border: 1px solid var(--og-line); border-radius: var(--og-radius-pill); background: var(--og-paper); text-decoration: none; color: inherit; font-size: var(--og-text-sm); }
.cr-chip b { font-weight: 700; }
.cr-chip small { color: var(--og-muted); font-size: var(--og-text-xs); }
.cr-chip[data-s="down"] { background: var(--og-ink); color: var(--og-white); border-color: var(--og-ink); }
.cr-chip[data-s="down"] small { color: var(--og-line); }
.cr-chip[data-s="down"] .cr-dot { background: var(--og-white); border-color: var(--og-white); }
.cr-sum { font-size: var(--og-text-sm); color: var(--og-muted); margin: 0 0 var(--og-space-3); }

/* ---- Page header (sub pages) ---- */
.cr-back { display: inline-flex; align-items: center; gap: 4px; min-height: var(--og-tap-compact); margin-left: -6px; padding-right: var(--og-space-3);
  font-weight: 700; font-size: var(--og-text-sm); text-decoration: none; color: var(--og-ink); }
.cr-back svg { width: 20px; height: 20px; }
.cr-title { font-size: var(--og-text-2xl); margin: var(--og-space-1) 0 var(--og-space-2); }
.cr-title .og-placeholder { font-size: .8em; white-space: normal; word-break: break-word; }
.cr-kicker { display: flex; margin: var(--og-space-3) 0 0; }

/* ---- Blockers ---- */
.cr-block { display: flex; gap: var(--og-space-3); padding-block: var(--og-space-3); }
.cr-block__mark { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--og-ink); color: var(--og-white); font-weight: 800; font-size: var(--og-text-xs); margin-top: 2px; }

/* ---- Decision (waiting detail) ---- */
.cr-facts { display: grid; gap: 0; margin: 0; }
.cr-facts div { display: flex; justify-content: space-between; gap: var(--og-space-4); padding-block: var(--og-space-3); border-top: 1px solid var(--og-line); }
.cr-facts dt { color: var(--og-muted); font-size: var(--og-text-sm); }
.cr-facts dd { margin: 0; font-weight: 700; text-align: right; }
.cr-decide { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 10; margin-inline: -18px; padding: var(--og-space-3) 18px var(--og-space-4);
  background: var(--og-paper); border-top: 1px solid var(--og-line); display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--og-space-3); }
.cr-decide p { grid-column: 1 / -1; margin: 0; font-size: var(--og-text-sm); color: var(--og-muted); }
.cr-main--decide { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

/* ---- States ---- */
.cr-skel { display: block; height: 14px; border-radius: var(--og-radius-sm); background: var(--og-line); animation: cr-pulse 1.4s var(--og-ease) infinite; }
.cr-skel--xl { height: 36px; width: 60%; margin-bottom: var(--og-space-4); }
@keyframes cr-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .cr-skel { animation: none; } }
.cr-empty { text-align: center; padding: var(--og-space-6) var(--og-space-4); color: var(--og-muted); }
.cr-empty b { display: block; color: var(--og-ink); font-size: var(--og-text-lg); margin-bottom: var(--og-space-1); }
.cr-alert { display: flex; gap: var(--og-space-3); align-items: flex-start; padding: var(--og-space-4); border: 1.5px solid var(--og-ink); border-radius: var(--og-radius-md); background: var(--og-panel); font-size: var(--og-text-sm); }
.cr-alert svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.cr-alert p { margin: 0; }
.cr-alert--stale { border-style: dashed; border-color: var(--og-muted); }

/* ---- Login ---- */
.cr-login { min-height: 100dvh; display: grid; place-items: center; padding: var(--og-space-6) 18px calc(var(--og-space-6) + env(safe-area-inset-bottom)); }
.cr-login__card { width: 100%; max-width: 400px; }
.cr-login h1 { font-size: var(--og-text-2xl); margin: var(--og-space-5) 0 var(--og-space-2); }
.cr-pw { position: relative; }
.cr-pw .og-input { padding-right: 64px; }
.cr-pw button { position: absolute; right: 2px; top: 2px; bottom: 2px; min-width: var(--og-tap-compact); padding: 0 var(--og-space-3); border: 0; border-radius: var(--og-radius-sm);
  background: transparent; color: var(--og-ink); font: 700 var(--og-text-sm)/1 var(--og-font-ui); cursor: pointer; }
.cr-login .og-card p { color: var(--og-muted); }
.cr-login .og-card .cr-err { color: var(--og-ink); }
.cr-err { display: none; margin: 0; font-size: var(--og-text-sm); font-weight: 700; }
.cr-field--err .og-input { border-color: var(--og-ink); border-width: 2px; }
.cr-field--err .cr-err { display: flex; gap: 6px; align-items: flex-start; }
.cr-err svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }

/* ---- Handoff notes (mock only, remove before live) ---- */
.cr-note { margin-top: var(--og-space-4); }

/* ---- Desktop ---- */
@media (min-width: 761px) {
  .cr-main { padding-inline: var(--og-gutter); }
  .cr-strip { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}
@media (min-width: 1024px) {
  .cr-bar__in { max-width: none; padding-inline: var(--og-space-7); }
  .cr-tabs { inset: 56px auto 0 0; width: 232px; grid-template-columns: none; grid-auto-rows: min-content; align-content: start; gap: var(--og-space-1);
    padding: var(--og-space-4) var(--og-space-3); border-top: 0; border-right: 1px solid var(--og-line); }
  .cr-tab { grid-auto-flow: column; justify-content: start; gap: var(--og-space-3); min-height: 48px; padding: 0 var(--og-space-3); border-radius: var(--og-radius-md); font-size: var(--og-text-md); }
  .cr-tab__ico { width: 40px; }
  .cr-tab[aria-current="page"] { background: var(--og-paper); }
  .cr-badge { position: static; margin-left: auto; box-shadow: none; }
  .cr-bar { padding-left: 0; }
  .cr-main { max-width: calc(1180px + 232px); margin: 0; padding: var(--og-space-7) var(--og-space-7) var(--og-space-9) calc(232px + var(--og-space-7)); }
  .cr-main--narrow { max-width: calc(760px + 232px); }
  .cr-home { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .cr-decide { position: static; margin: var(--og-space-2) 0 0; padding: var(--og-space-5) 0 0; background: none; grid-template-columns: auto auto 1fr; }
  .cr-decide p { grid-column: auto; align-self: center; }
  .cr-decide .og-btn { min-width: 180px; }
}

/* visually hidden (screen-reader heading) */
.cr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* v4 Personal tab: nav holds 5 tabs for the owner, 1 for the household account (same tab look) */
.cr-tabs[data-n="5"] { grid-template-columns: repeat(5, 1fr); }
.cr-tabs[data-n="1"] { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .cr-tabs[data-n] { grid-template-columns: none; } }

/* phase 2: Chat tab (owner gets 6 tabs when OG_CR_PHASE2=1), Ask OG CTO thread, 2FA setup */
.cr-tabs[data-n="6"] { grid-template-columns: repeat(6, 1fr); }
@media (min-width: 1024px) { .cr-tabs[data-n="6"] { grid-template-columns: none; } }
.cr-chat { padding: var(--og-space-4); }
.cr-chat__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--og-space-3); max-height: 56vh; overflow-y: auto; }
.cr-msg { max-width: 86%; padding: var(--og-space-3) var(--og-space-4); border-radius: var(--og-radius-md); border: 1px solid var(--og-line); background: var(--og-paper); }
.cr-msg--besh { align-self: flex-end; background: var(--og-accent-soft); border-color: var(--og-accent); }
.cr-msg--cto { align-self: flex-start; }
.cr-msg__meta { font-size: var(--og-text-xs); color: var(--og-muted); margin-bottom: 2px; }
.cr-msg__text { overflow-wrap: anywhere; line-height: var(--og-leading-body); }
.cr-msg__text a { color: inherit; text-decoration: underline; }
.cr-chat__input { min-height: 88px; resize: vertical; font: inherit; }
.cr-qr { display: flex; justify-content: center; }
.cr-qr svg { width: 220px; height: 220px; border-radius: var(--og-radius-sm); }
.cr-seed code, .cr-codes code { font-family: var(--og-font-mono); font-size: var(--og-text-md); letter-spacing: .04em; overflow-wrap: anywhere; }
.cr-codes { columns: 2; margin: 0; padding-left: 1.4em; line-height: 1.9; }