/* =========================================================================
 * shell.css — the page frame: header and main container. Framework-owned.
 * Region layout (grid cols, spacing, etc.) lives in framework/regions.js's
 * per-display-type CSS (later step) and in each region's own CSS.
 * ========================================================================= */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background:
    linear-gradient(135deg,
      rgba(17,18,23,0.9)  0%,
      rgba(25,45,55,0.9)  50%,
      rgba(17,18,23,0.9)  100%);
  background-size: 200% 200%;
  animation: header-gradient 12s ease infinite;
  border-bottom: 1px solid var(--u-border-accent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@keyframes header-gradient {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
}

.logo {
  font-family: var(--u-mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 3px;
  color: var(--u-accent);
  text-shadow: 0 0 10px var(--u-accent-glow);
  user-select: none;
  white-space: nowrap;
}
.logo-bracket { opacity: 0.6; }
.logo-name    { color: var(--u-text); }
.logo-sep     { color: var(--u-text-dim); }
.logo-tag     { color: var(--u-accent); }

.controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.auth-user {
  font-family: var(--u-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--u-text-dim);
  text-transform: uppercase;
}
.auth-btn {
  font: 11px var(--u-mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 12px;
}

.dashboard {
  padding: 24px 24px 48px 24px;
  min-height: calc(100vh - var(--header-h));
}

@media (max-width: 720px) {
  .header-row { padding: 10px 14px; gap: 8px; }
  .logo       { font-size: 13px; letter-spacing: 2px; }
  .dashboard  { padding: 16px 14px 48px 14px; }
}