/* commons-app — site-specific structural CSS only.
   Design tokens + typography + base styles live in
   /agent-ui/colors_and_type.css (the canonical agentic-media brand).
   This file complements with structural rules and a few utility
   classes the agent-ui doesn't ship. */

@import url('/agent-ui/colors_and_type.css');

body { display: flex; flex-direction: column; min-height: 100vh; }

main {
  flex: 1;
  max-width: var(--am-content-max);
  width: 100%;
  margin: 0 auto;
  padding: var(--am-s-6) var(--am-s-4);
}

.site-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--am-s-3) var(--am-s-5);
  border-bottom: 1px solid var(--am-border);
  background: rgba(11, 12, 14, 0.7);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 10;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--am-text); text-decoration: none;
  font-weight: var(--am-fw-display); letter-spacing: var(--am-tracking-tight);
  font-size: 17px;
  min-width: 0;
}
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  /* `currentColor` inside the inlined SVG inherits this. */
  color: var(--am-accent);
  width: 28px; height: 28px;
}
.brand-wordmark { white-space: nowrap; }
.brand .wordmark-faded { opacity: 0.55; }

.primary-nav {
  display: flex; gap: var(--am-s-4); align-items: center;
  font-size: var(--am-fz-sm);
  min-width: 0;
}
.primary-nav .nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--am-muted); text-decoration: none;
  background: none; border: 0; cursor: pointer; font: inherit;
  transition: color var(--am-dur-fast) var(--am-ease);
  padding: 4px;
  border-radius: var(--am-radius-sm);
}
.primary-nav .nav-link:hover { color: var(--am-text); }
.primary-nav .nav-link svg { flex: 0 0 auto; }
.primary-nav .gh-handle {
  color: var(--am-muted-2); font-family: var(--am-font-mono);
  font-size: var(--am-fz-xs);
  max-width: 14ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.logout-form { display: inline-flex; margin: 0; }

/* ── mobile nav: collapse non-essential ── */
@media (max-width: 720px) {
  /* hide secondary text labels — icon-only nav links */
  .primary-nav .nav-text { display: none; }
  /* hide github handle entirely; user knows who they are */
  .primary-nav .gh-handle { display: none; }
  /* tighten gaps and pad icon hit-targets so they're tap-friendly */
  .primary-nav { gap: var(--am-s-2); }
  .primary-nav .nav-link {
    padding: 8px;
    border-radius: var(--am-radius-sm);
    min-width: 36px;
    min-height: 36px;
    justify-content: center;
  }
  .primary-nav .nav-link:hover { background: var(--am-surface-2); }
  /* shrink header padding */
  .site-header { padding: var(--am-s-2) var(--am-s-3); }
  /* sign-in button: keep readable but compact */
  .primary-nav .am-button { padding: 8px 12px; font-size: var(--am-fz-sm); }
}
@media (max-width: 480px) {
  /* drop the wordmark — keep only the agentic-media mark */
  .brand-wordmark { display: none; }
  /* pretty-narrow phone: shrink brand gap */
  .brand { gap: 0; }
}

.site-footer {
  padding: var(--am-s-5);
  text-align: center;
  color: var(--am-muted-2);
  border-top: 1px solid var(--am-border);
  font-size: var(--am-fz-xs);
}

/* ── am-* utility components (server-rendered subset of the v0 set) ── */

.am-button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: var(--am-radius);
  background: var(--am-accent); color: var(--am-base);
  border: 0; font: inherit; font-weight: var(--am-fw-ui);
  text-decoration: none; cursor: pointer;
  transition: background var(--am-dur-base) var(--am-ease);
}
.am-button:hover { background: var(--am-accent-2); color: var(--am-base); }
.am-button:active { background: var(--am-accent-d); }
.am-button[disabled],
.am-button.is-disabled {
  opacity: 0.45; cursor: not-allowed;
  background: var(--am-accent);
}
.am-button.secondary {
  background: transparent; color: var(--am-text);
  border: 1px solid var(--am-border);
}
.am-button.secondary:hover {
  background: var(--am-surface-2); border-color: var(--am-border-2); color: var(--am-text);
}
.am-button.iris {
  background: var(--am-iris); color: var(--am-text);
}
.am-button.iris:hover { background: var(--am-iris-2); color: var(--am-text); }
.am-button.danger {
  background: transparent; color: var(--am-danger);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.am-card {
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  padding: var(--am-s-5);
  margin: var(--am-s-4) 0;
}
.am-card h3 { margin-top: 0; }

.am-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--am-radius-pill);
  font-size: var(--am-fz-xs);
  font-weight: var(--am-fw-ui);
  letter-spacing: var(--am-tracking-wide);
  text-transform: lowercase;
}
.am-badge.active   { background: var(--am-accent-tint); color: var(--am-accent); }
.am-badge.linked   { background: var(--am-accent-tint); color: var(--am-accent); }
.am-badge.paused   { background: var(--am-warn-tint);   color: var(--am-warn);   }
.am-badge.pending  { background: var(--am-warn-tint);   color: var(--am-warn);   }
.am-badge.unset    { background: var(--am-warn-tint);   color: var(--am-warn);   }
.am-badge.archived { background: rgba(154, 160, 166, 0.15); color: var(--am-muted); }
.am-badge.expired  { background: var(--am-danger-tint); color: var(--am-danger); }
.am-badge.revoked  { background: var(--am-danger-tint); color: var(--am-danger); }

.am-code-block {
  background: var(--am-base-2);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  padding: var(--am-s-4);
  font-family: var(--am-font-mono);
  font-size: var(--am-fz-code);
  line-height: var(--am-lh-code);
  letter-spacing: var(--am-tracking-code);
  font-weight: var(--am-fw-ui);
  color: var(--am-accent);
  text-align: center;
  user-select: all;
}

.am-wizard-steps {
  display: flex; gap: var(--am-s-2); padding: 0;
  margin: 0 0 var(--am-s-5) 0;
  list-style: none;
  font-size: var(--am-fz-xs);
  font-weight: var(--am-fw-ui);
  letter-spacing: var(--am-tracking-wide);
  text-transform: lowercase;
  color: var(--am-muted);
  flex-wrap: wrap;
}
.am-wizard-steps li {
  padding: 6px 12px;
  border-radius: var(--am-radius-pill);
  background: var(--am-surface);
  border: 1px solid var(--am-border);
}
.am-wizard-steps li.done   { color: var(--am-accent); border-color: rgba(110, 231, 183, 0.4); }
.am-wizard-steps li.active { color: var(--am-text);   border-color: rgba(232, 233, 235, 0.4); }

.am-channel-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--am-s-3);
  margin-top: var(--am-s-4);
}
@media (max-width: 600px) {
  .am-channel-grid { grid-template-columns: 1fr; }
}
.am-channel-card {
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
  background: var(--am-surface);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  padding: var(--am-s-5);
  color: var(--am-text);
  cursor: pointer;
  font: inherit;
  transition: border-color var(--am-dur-base) var(--am-ease), background var(--am-dur-base) var(--am-ease);
}
.am-channel-card:hover { border-color: var(--am-accent); background: var(--am-surface-2); }
.am-channel-card.is-selected { border-color: var(--am-accent); }
.am-channel-card .am-channel-mark {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  /* `currentColor` inside the inlined channel SVG inherits this. */
  color: var(--am-accent);
}
.am-channel-card .am-channel-mark svg { width: 32px; height: 32px; }
.am-channel-card:hover .am-channel-mark { color: var(--am-accent-2); }
.am-channel-card h3 { margin: 0; font-size: var(--am-fz-h3); color: var(--am-text); }
.am-channel-card p  { margin: 0; color: var(--am-muted); font-size: var(--am-fz-sm); }
.am-channel-card .hint { color: var(--am-muted-2); font-size: var(--am-fz-xs); margin-top: 4px; }
.am-channel-card .hint.warn { color: var(--am-warn); }

.am-trial-banner {
  display: inline-flex; gap: 6px; align-items: center;
  padding: 4px 10px; border-radius: var(--am-radius-pill);
  background: var(--am-warn-tint); color: var(--am-warn);
  font-size: var(--am-fz-xs); font-weight: var(--am-fw-ui);
}
.am-trial-banner.expired { background: var(--am-danger-tint); color: var(--am-danger); }

.am-poll-iframe {
  width: 100%; border: 0; height: 32px; min-height: 32px;
  background: transparent;
}

.am-form-field { display: block; margin-bottom: var(--am-s-3); }
.am-form-field > label { display: block; color: var(--am-text); font-size: var(--am-fz-sm); font-weight: var(--am-fw-ui); margin-bottom: 6px; }
.am-form-field input,
.am-form-field textarea {
  width: 100%;
  padding: 8px 10px;
  background: var(--am-base-2);
  border: 1px solid var(--am-border);
  border-radius: var(--am-radius);
  color: var(--am-text);
  font: inherit;
}
.am-form-field input:focus,
.am-form-field textarea:focus {
  outline: 0; border-color: var(--am-accent);
}

.qr-wrap { display: flex; justify-content: center; padding: var(--am-s-4) 0; }
.qr-wrap img {
  max-width: 280px; border-radius: var(--am-radius);
  background: white; padding: var(--am-s-2);
}

.am-feature-beat-grid {
  display: flex; gap: var(--am-s-5); flex-wrap: wrap;
  margin-top: var(--am-s-7);
}
.am-feature-beat {
  flex: 1 1 200px;
  border-top: 1px solid var(--am-border);
  padding-top: var(--am-s-3);
}
.am-feature-beat .am-eyebrow { color: var(--am-accent); margin-bottom: 6px; }
.am-feature-beat .body { color: var(--am-text-2); font-size: var(--am-fz-sm); }