/* ==========================================================================
   MARQUEE — App shell
   Sidebar is ordered by sponsorship lifecycle stage, not by feature. The
   navigation is the methodology; that is the whole product thesis.
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* --------------------------------------------------------------------------
   Sidebar — the second neutral layer
   -------------------------------------------------------------------------- */
.sidebar {
  grid-column: 1;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--chrome);
  color: var(--chrome-ink);
  border-right: 1px solid var(--chrome);
  z-index: var(--z-sticky);
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: 13px var(--s-4) 13px var(--s-4);
  height: var(--topbar-h);
  flex-shrink: 0;
}
.sidebar-top .brand { color: var(--chrome-ink); }

/* Org switcher */
.org-switch {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: calc(100% - var(--s-6));
  margin: 0 var(--s-3) var(--s-3);
  padding: 8px 9px;
  border-radius: var(--r-lg);
  background: var(--chrome-2);
  border: 1px solid var(--chrome-line);
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
.org-switch:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .org-switch:hover { background: var(--chrome-3); }
}
.org-switch .avatar { width: 26px; height: 26px; border-radius: var(--r-sm); }
.org-switch-name {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--chrome-ink);
  line-height: 1.25;
}
.org-switch-meta { font-size: var(--fs-3xs); color: var(--chrome-muted); line-height: 1.3; }
.org-switch .icon { color: var(--chrome-muted); margin-left: auto; width: 15px; height: 15px; }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Stage group header. These are numbered because the lifecycle genuinely is
   an ordered sequence — not decorative section scaffolding. */
.nav-stage {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) 9px 5px;
}
.nav-stage-num {
  width: 16px; height: 16px;
  border-radius: var(--r-xs);
  background: var(--chrome-3);
  color: var(--chrome-ink-2);
  font-size: 9.5px;
  font-weight: var(--fw-bold);
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.nav-stage[data-state='done'] .nav-stage-num { background: var(--success); color: var(--on-primary); }
.nav-stage[data-state='active'] .nav-stage-num { background: var(--primary); color: var(--on-primary); }
.nav-stage-name {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  color: var(--chrome-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--chrome-ink-2);
  min-height: 32px;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.nav-item .icon { width: 16px; height: 16px; color: var(--chrome-muted); flex-shrink: 0;
                  transition: color var(--dur-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover { background: var(--chrome-2); color: var(--chrome-ink); }
  .nav-item:hover .icon { color: var(--chrome-ink-2); }
}
.nav-item[aria-current='page'] {
  background: var(--primary);
  color: var(--on-primary);
  font-weight: var(--fw-semi);
}
.nav-item[aria-current='page'] .icon { color: var(--on-primary); }

.nav-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: var(--fw-bold);
  padding: 1px 5px;
  border-radius: var(--r-full);
  background: var(--chrome-3);
  color: var(--chrome-ink);
  font-variant-numeric: tabular-nums;
}
.nav-item[aria-current='page'] .nav-badge { background: oklch(1 0 0 / 0.22); color: var(--on-primary); }
.nav-badge-alert { background: var(--danger); color: var(--on-primary); }

.nav-sep { height: 1px; background: var(--chrome-line); margin: var(--s-4) 9px var(--s-2); }

.sidebar-foot {
  flex-shrink: 0;
  padding: var(--s-3);
  border-top: 1px solid var(--chrome-line);
}

/* Plan / usage card in the sidebar foot */
.plan-card {
  padding: 10px;
  border-radius: var(--r-lg);
  background: var(--chrome-2);
  border: 1px solid var(--chrome-line);
}
.plan-card-name { font-size: var(--fs-3xs); font-weight: var(--fw-bold); color: var(--signal); letter-spacing: 0.05em; }
.plan-card-meter { height: 4px; border-radius: var(--r-full); background: var(--chrome-3); overflow: hidden; }
.plan-card-meter span { display: block; height: 100%; background: var(--signal); border-radius: var(--r-full); }

.user-chip {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 7px;
  border-radius: var(--r-lg);
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .user-chip:hover { background: var(--chrome-2); }
}
.user-chip-name { font-size: var(--fs-xs); font-weight: var(--fw-semi); color: var(--chrome-ink); line-height: 1.25; }
.user-chip-role { font-size: var(--fs-3xs); color: var(--chrome-muted); line-height: 1.3; }
.user-chip .icon { margin-left: auto; color: var(--chrome-muted); width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   Main column
   -------------------------------------------------------------------------- */
.main {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-5);
  background: oklch(1 0 0 / 0.92);
  backdrop-filter: saturate(1.6) blur(8px);
  -webkit-backdrop-filter: saturate(1.6) blur(8px);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.topbar-search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 31px;
  padding: 0 9px 0 10px;
  min-width: 220px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-xs);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .topbar-search:hover { border-color: var(--muted); background: var(--bg); }
}
.topbar-search .icon { width: 15px; height: 15px; }
.topbar-search .kbd { margin-left: auto; }

/* Credit meter */
.credit-meter {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 31px;
  padding: 0 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--ink-2);
}
.credit-meter .icon { width: 14px; height: 14px; color: var(--primary); }
.credit-meter .bar { width: 42px; height: 4px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.credit-meter .bar span { display: block; height: 100%; background: var(--primary); border-radius: var(--r-full); }

.icon-btn {
  width: 31px; height: 31px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  position: relative;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-press) var(--ease-out);
}
.icon-btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover { background: var(--surface-2); color: var(--ink); }
}
.icon-btn .dot-alert {
  position: absolute;
  top: 5px; right: 5px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--danger);
  border: 1.5px solid var(--bg);
}
@media (pointer: coarse) { .icon-btn { width: 44px; height: 44px; } }

/* --------------------------------------------------------------------------
   Page header + lifecycle rail
   -------------------------------------------------------------------------- */
.page {
  flex: 1;
  min-width: 0;
  padding: var(--s-6) var(--s-7) var(--s-10);
  max-width: var(--content-max);
  width: 100%;
}
.page-wide { max-width: none; }
.page-flush { padding: 0; }

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.page-title { font-size: var(--fs-xl); font-weight: var(--fw-semi); letter-spacing: var(--ls-title); }
.page-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; max-width: 74ch; }
.page-actions { display: flex; align-items: center; gap: var(--s-2); flex-shrink: 0; }

/* The stage rail: persistent orientation inside the lifecycle */
.rail {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: var(--s-5);
}
.rail::-webkit-scrollbar { display: none; }
.rail-step {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: var(--r-md);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--muted);
  white-space: nowrap;
  flex: 1;
  min-width: max-content;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .rail-step:hover { background: var(--surface-2); color: var(--ink); }
}
.rail-step[aria-current='step'] { background: var(--bg); color: var(--ink); font-weight: var(--fw-semi); box-shadow: var(--shadow-xs); }
.rail-num {
  width: 17px; height: 17px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 10px;
  font-weight: var(--fw-bold);
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.rail-step[aria-current='step'] .rail-num { background: var(--primary); color: var(--on-primary); }
.rail-step[data-state='done'] .rail-num { background: var(--success); color: var(--on-primary); }
.rail-step[data-state='done'] { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Toolbar above tables and boards
   -------------------------------------------------------------------------- */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.toolbar-search { min-width: 180px; max-width: 300px; flex: 1; }
.toolbar-search .input { height: 31px; min-height: 31px; font-size: var(--fs-xs); }

/* --------------------------------------------------------------------------
   Split layouts (editor + preview)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
}
.split-narrow { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
.split-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
@media (max-width: 1100px) {
  .split, .split-narrow, .split-wide { grid-template-columns: minmax(0, 1fr); }
}

.sticky-side { position: sticky; top: calc(var(--topbar-h) + var(--s-5)); }

/* --------------------------------------------------------------------------
   Responsive — structural collapse, never fluid type
   -------------------------------------------------------------------------- */

/* Sidebar collapses to icons */
@media (max-width: 1180px) {
  .app { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
  .sidebar-top { justify-content: center; padding: 13px 0; }
  .sidebar-top .brand-word,
  .org-switch-text, .org-switch .icon,
  .nav-item span:not(.nav-badge),
  .nav-stage-name,
  .plan-card-text,
  .user-chip-text, .user-chip .icon { display: none; }
  .org-switch { width: 40px; margin: 0 auto var(--s-3); justify-content: center; padding: 7px; }
  .nav-item { justify-content: center; padding: 8px 0; }
  .nav-item .nav-badge {
    position: absolute;
    margin: 0;
    transform: translate(11px, -9px);
    padding: 0 4px;
    font-size: 9px;
  }
  .nav-item { position: relative; }
  .nav-stage { justify-content: center; padding: var(--s-4) 0 5px; }
  .plan-card { padding: 7px; }
  .user-chip { justify-content: center; padding: 7px 0; }
  .page { padding: var(--s-5) var(--s-5) var(--s-9); }
}

/* Sidebar becomes an off-canvas sheet */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform var(--dur-panel) var(--ease-drawer);
    z-index: var(--z-drawer);
    box-shadow: var(--shadow-xl);
  }
  .sidebar[data-open='true'] { transform: translateX(0); }
  .sidebar-top { justify-content: space-between; padding: 13px var(--s-4); }
  .sidebar-top .brand-word,
  .org-switch-text, .org-switch .icon,
  .nav-item span:not(.nav-badge),
  .nav-stage-name,
  .plan-card-text,
  .user-chip-text, .user-chip .icon { display: block; }
  .org-switch { width: calc(100% - var(--s-6)); margin: 0 var(--s-3) var(--s-3); justify-content: flex-start; padding: 8px 9px; }
  .nav-item { justify-content: flex-start; padding: 8px 9px; }
  .nav-item .nav-badge { position: static; transform: none; margin-left: auto; padding: 1px 5px; font-size: 10px; }
  .nav-stage { justify-content: flex-start; padding: var(--s-4) 9px 5px; }
  .user-chip { justify-content: flex-start; padding: 7px; }
  .main { grid-column: 1; }
  .page { padding: var(--s-4) var(--s-4) var(--s-9); }
  .topbar { padding: 0 var(--s-4); }
}

@media (min-width: 861px) { .sidebar-close, .nav-toggle { display: none; } }

@media (max-width: 640px) {
  .page-head { flex-direction: column; align-items: stretch; }
  .page-actions { flex-wrap: wrap; }
  .toaster { left: var(--s-3); right: var(--s-3); width: auto; bottom: var(--s-3); }
}