/* Structural layout: app shell, page chromes, grid helpers. */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: var(--border-hairline);
}

.app-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
}

.app-header__brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  color: var(--ink-900);
  font-weight: 600;
  font-size: 18px;
}

.app-header__brand-mark {
  color: var(--apricot-400);
  font-size: 20px;
}

.app-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 1;
}

.app-header__nav a {
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

.app-header__nav a:hover,
.app-header__nav a[aria-current="page"] {
  color: var(--apricot-500);
  background: var(--apricot-50);
  text-decoration: none;
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Nav dropdowns */

.nav-dropdown {
  position: relative;
}

.nav-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 500;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
}

.nav-dropdown__trigger:hover,
.nav-dropdown__trigger[aria-expanded='true'] {
  color: var(--apricot-500);
  background: var(--apricot-50);
}

.nav-dropdown__trigger--active {
  color: var(--apricot-500);
}

.nav-dropdown__caret {
  font-size: 10px;
  transition: transform 0.15s ease;
  margin-left: 1px;
}

.nav-dropdown__trigger[aria-expanded='true'] .nav-dropdown__caret {
  transform: rotate(180deg);
}

.nav-dropdown__menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--paper);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  min-width: 160px;
  z-index: 100;
  padding: var(--space-1) 0;
}

.nav-dropdown__trigger[aria-expanded='true'] + .nav-dropdown__menu {
  display: block;
}

.nav-dropdown__menu a {
  display: block;
  padding: var(--space-2) var(--space-4);
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.nav-dropdown__menu a:hover,
.nav-dropdown__menu a[aria-current='page'] {
  color: var(--apricot-500);
  background: var(--apricot-50);
  text-decoration: none;
}

.app-main {
  flex: 1;
  padding: var(--space-8) var(--space-6);
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.app-footer {
  padding: var(--space-6);
  border-top: var(--border-hairline);
  color: var(--ink-500);
  font-size: 12px;
  text-align: center;
}

.ticker {
  padding: var(--space-2) 0;
  background: var(--ink-50);
  border-bottom: var(--border-hairline);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.ticker__track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding-left: var(--space-6);
  animation: ticker-scroll 90s linear infinite;
  will-change: transform;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

.ticker__cell {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-shrink: 0;
}

.ticker__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--data-neutral);
}

.ticker__cell[data-tag="DEMAND"]   .ticker__label,
.ticker__cell[data-tag="OPEN"]     .ticker__label { color: var(--data-alert); }

.ticker__cell[data-tag="MATCH"]    .ticker__label,
.ticker__cell[data-tag="ACTIVITY"] .ticker__label { color: var(--data-gain); }

.ticker__cell[data-tag="TREND"]    .ticker__label,
.ticker__cell[data-tag="CAPACITY"] .ticker__label { color: var(--data-neutral); }

.ticker__value {
  color: var(--ink-900);
  font-weight: 500;
}

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-wrap { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.spacer { flex: 1; }

@media (min-width: 640px) {
  .app-main { padding: var(--space-10) var(--space-8); }
}