/* layout.css — chrome bar + app shell + shared primitives (buttons, banners). */

.chrome {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 10px 20px;
  background: var(--chrome-bg);
  border-bottom: 1px solid var(--edge);
  /* the chrome is a fixed plane ABOVE the scrolling content — a hairline glow on
     top + a soft drop below sells that depth without competing with content. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 8px rgba(0, 0, 0, 0.35);
}
.chrome-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.chrome-title {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--accent-strong);
}
.chrome-sub a {
  font-size: 13px;
  color: var(--text-secondary);
}
.chrome-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.spine-pill {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--inset-bg);
  border: 1px solid var(--edge);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  cursor: pointer;
  transition: color var(--t-quick), border-color var(--t-quick),
    background var(--t-quick);
}
.spine-pill:hover {
  border-color: var(--hover-border);
  color: var(--text-primary);
}
.spine-pill.is-active {
  background: var(--accent);
  color: var(--text-on-active);
  border-color: var(--accent);
  font-weight: 600;
}
.chrome-right {
  margin-left: 8px;
}
.chrome-btn {
  font-size: 12px;
  color: var(--text-secondary);
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  transition: color var(--t-quick), border-color var(--t-quick);
}
.chrome-btn:hover {
  border-color: var(--hover-border);
  color: var(--text-primary);
  text-decoration: none;
}

.app {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px 20px 64px;
}

.loading,
.error-banner {
  padding: 24px;
  color: var(--text-secondary);
}
.loading {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-meta);
}
.error-banner {
  border: 1px solid var(--invalid);
  border-left: 3px solid var(--invalid);
  border-radius: var(--radius);
  background: var(--invalid-bg);
  color: var(--invalid-bright);
}

/* Buttons — the primary action is a confident filled control; secondary recedes.
   Hover lightens, active presses down 1px so the control feels physical. */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--panel-bg);
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius-sm);
  padding: 7px 15px;
  cursor: pointer;
  transition: color var(--t-quick), border-color var(--t-quick),
    background var(--t-quick), transform var(--t-quick);
}
.btn:hover {
  border-color: var(--hover-border);
  background: var(--card-bg-hover);
  text-decoration: none;
}
.btn:active {
  transform: translateY(1px);
}
.btn--primary {
  background: var(--accent);
  color: var(--text-on-active);
  border-color: var(--accent);
  font-weight: 600;
}
.btn--primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}
.muted {
  color: var(--text-meta);
}