/* ─── APOLLO DESIGN SYSTEM — COMPONENTS ────────────────────────────────────
   Distilled named building blocks for the Apollo replica. Each class is the
   smallest reusable unit observed in the live Apollo snapshot — applying
   them gives 1:1 visual fidelity without writing 60-character Tailwind
   strings on every screen.

   Conventions
   • Prefix:        `.ap-*` to namespace away from Cosmo's `.btn`, `.tag`, etc.
   • Tokens only:   no hardcoded hex, rgb, or font names — pull from tokens.css
   • Variants:      a base `.ap-x` plus modifier classes (`.ap-x.primary`)
   • States:        `:hover`, `:focus-visible`, `:disabled`, `.active` covered

   Order
     1. Reset / base
     2. Buttons             (.ap-btn)
     3. Top-nav tab          (.ap-nav-tab)
     4. Card                 (.ap-card)
     5. Form fields          (.ap-input, .ap-select, .ap-textarea)
     6. Status pill          (.ap-status-pill)
     7. Chat bubble          (.ap-chat-bubble)
     8. Task card            (.ap-task-card)
     9. Center-pane sub-tab  (.ap-tab)
   ────────────────────────────────────────────────────────────────────── */


/* ─── 1. RESET / BASE ────────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  font-size:   16px;
  line-height: var(--leading-normal);
  color:       hsl(var(--foreground));
  background:  hsl(var(--background));
}

body {
  margin: 0;
  font-family: inherit;
  color: inherit;
  background: inherit;
}

button { font-family: inherit; }


/* ─── 2. BUTTONS ──────────────────────────────────────────────────────────
   .ap-btn — base. Variants: .primary, .secondary, .ghost, .icon. Size: .sm.
   Used: every button in the app. Composed pattern from shadcn's Button.
   ────────────────────────────────────────────────────────────────────── */

.ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  white-space: nowrap;
  height: 2.5rem;                           /* 40px — shadcn `h-10` default */
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: hsl(var(--foreground));
  transition: background-color var(--duration-fast) var(--ease-in-out),
              color var(--duration-fast) var(--ease-in-out),
              border-color var(--duration-fast) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-in-out);
}
.ap-btn:focus-visible {
  outline: 2px solid hsl(var(--ring) / 0.5);
  outline-offset: 2px;
}
.ap-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Icon sizing inside any button */
.ap-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Variant: primary — filled indigo */
.ap-btn.primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.ap-btn.primary:hover { background: hsl(var(--primary) / 0.9); }

/* Variant: secondary — bordered, white surface */
.ap-btn.secondary {
  border-color: hsl(var(--input));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}
.ap-btn.secondary:hover {
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

/* Variant: ghost — transparent until hover */
.ap-btn.ghost {
  color: hsl(var(--muted-foreground));
}
.ap-btn.ghost:hover {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
}

/* Variant: icon — square, icon-only */
.ap-btn.icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  gap: 0;
}

/* Size: small — used in the auditor toolbar for compact controls */
.ap-btn.sm {
  height: 1.75rem;                          /* 28px — shadcn `h-7` */
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  border-radius: var(--radius-md);
}
.ap-btn.sm svg { width: 12px; height: 12px; }
.ap-btn.icon.sm { width: 1.75rem; height: 1.75rem; padding: 0; }


/* ─── 3. TOP-NAV TAB ──────────────────────────────────────────────────────
   .ap-nav-tab — single anchor in the header nav row. Active state is the
   filled indigo pill seen on /create-task, /auditor, /weekly-goals.
   Used: <header> nav.
   ────────────────────────────────────────────────────────────────────── */

.ap-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-in-out),
              color var(--duration-base) var(--ease-in-out),
              box-shadow var(--duration-base) var(--ease-in-out);
}
.ap-nav-tab svg { width: 16px; height: 16px; }
.ap-nav-tab:hover {
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
}
.ap-nav-tab.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-md);
}
.ap-nav-tab.active:hover { background: hsl(var(--primary) / 0.92); }


/* ─── 4. CARD ─────────────────────────────────────────────────────────────
   .ap-card — white surface with 1px border, 12px radius, soft shadow.
   Used: Create Task form, task list items (extended), pin panels, etc.
   ────────────────────────────────────────────────────────────────────── */

.ap-card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.ap-card-header {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}
.ap-card-title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.ap-card-subtitle {
  margin: 0;
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
}
.ap-card-body  { padding: 0 var(--space-6) var(--space-6); }


/* ─── 5. FORM FIELDS ──────────────────────────────────────────────────────
   .ap-input, .ap-select, .ap-textarea — same height (40px), same border,
   same radius. Match Apollo's Create Task form fields.
   ────────────────────────────────────────────────────────────────────── */

.ap-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  margin-bottom: var(--space-2);
  color: hsl(var(--foreground));
}
.ap-help {
  margin: var(--space-1-5) 0 0;
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
}

.ap-input,
.ap-select,
.ap-textarea {
  width: 100%;
  height: 2.5rem;
  padding: 0 var(--space-3);
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius-md);
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1;
  transition: border-color var(--duration-fast) var(--ease-in-out),
              box-shadow var(--duration-fast) var(--ease-in-out);
}
.ap-input::placeholder,
.ap-textarea::placeholder { color: hsl(var(--muted-foreground)); }

.ap-input:focus-visible,
.ap-select:focus-visible,
.ap-textarea:focus-visible {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.4);
}
.ap-input:disabled,
.ap-select:disabled,
.ap-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Select uses a button-like layout with a chevron */
.ap-select {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  text-align: left;
  cursor: pointer;
}
.ap-select.placeholder { color: hsl(var(--muted-foreground)); }
.ap-select svg { width: 16px; height: 16px; opacity: 0.5; flex: 0 0 auto; }

.ap-textarea {
  height: auto;
  min-height: 5rem;
  padding: var(--space-2) var(--space-3);
  line-height: var(--leading-normal);
  resize: vertical;
}


/* ─── 6. STATUS PILL ──────────────────────────────────────────────────────
   .ap-status-pill — small rounded-full label on task cards (e.g. Waiting,
   Pending TL, Done). Uses semantic color variants.
   Used: task card header row, anywhere a stage_status surfaces.
   ────────────────────────────────────────────────────────────────────── */

.ap-status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 1px var(--space-1-5);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}
.ap-status-pill.warning {
  background: hsl(var(--warning));
  color: hsl(var(--warning-foreground));
}
.ap-status-pill.pending-tl {                /* purple — observed in snapshot */
  background: hsl(270 80% 60%);
  color: #fff;
}
.ap-status-pill.success {
  background: hsl(var(--success));
  color: hsl(var(--success-foreground));
}
.ap-status-pill.destructive {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}
.ap-status-pill.muted {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}


/* ─── 7. CHAT BUBBLE ──────────────────────────────────────────────────────
   .ap-chat-bubble — agent reply (light indigo) and user reply (light gray).
   Wraps a single message body. Header (author/timestamp) is a sibling
   element styled inline; bubble owns just the body container.
   Used: Auditor → Chat tab.
   ────────────────────────────────────────────────────────────────────── */

.ap-chat-bubble {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  max-width: 70ch;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: hsl(var(--foreground));
}
.ap-chat-bubble.agent {                     /* Developer messages */
  background: hsl(var(--primary) / 0.15);
}
.ap-chat-bubble.user {                      /* Auditor messages */
  background: hsl(var(--secondary));
}
.ap-chat-bubble strong { font-weight: var(--weight-semibold); }
.ap-chat-bubble code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 1px 4px;
  border-radius: var(--radius-xs);
  background: hsl(var(--foreground) / 0.08);
}
.ap-chat-bubble p { margin: var(--space-1-5) 0; }
.ap-chat-bubble p:first-child { margin-top: 0; }
.ap-chat-bubble p:last-child  { margin-bottom: 0; }
.ap-chat-bubble ul,
.ap-chat-bubble ol { margin: var(--space-1-5) 0; padding-left: 1.25rem; }
.ap-chat-bubble li { margin: 2px 0; }


/* ─── 8. TASK CARD ────────────────────────────────────────────────────────
   .ap-task-card — single card in the right-rail task list. Adds a thicker
   indigo left border + tinted indigo shadow when `.is-active`.
   Used: Auditor right pane.
   ────────────────────────────────────────────────────────────────────── */

.ap-task-card {
  position: relative;
  padding: var(--space-3) var(--space-4);
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  border-top-left-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow var(--duration-base) var(--ease-in-out),
              border-color var(--duration-base) var(--ease-in-out);
  font-size: var(--text-sm);
}
.ap-task-card:hover { box-shadow: var(--shadow-md); }
.ap-task-card.is-active {
  border-color: hsl(var(--primary));
  box-shadow:
    0 4px 6px -1px hsl(var(--primary) / 0.30),
    0 2px 4px -2px hsl(var(--primary) / 0.30);
  background: hsl(var(--primary) / 0.04);
}

.ap-task-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.ap-task-card-pin {
  color: hsl(var(--muted-foreground) / 0.5);
}
.ap-task-card-id {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: hsl(var(--foreground));
}
.ap-task-card-version {
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
}
.ap-task-card-statusdot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: hsl(var(--success));
  margin-left: auto;
}
.ap-task-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
}
.ap-task-card-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: hsl(var(--foreground));
}
.ap-task-card-summary {
  display: flex;
  gap: var(--space-1-5);
  align-items: flex-start;
  font-size: var(--text-xs);
  color: hsl(var(--muted-foreground));
  line-height: 1.45;
  margin-bottom: var(--space-2);
}
.ap-task-card-summary svg {
  width: 12px; height: 12px;
  flex: 0 0 auto;
  margin-top: 2px;
}
.ap-task-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: hsl(var(--muted-foreground));
}


/* ─── 9. CENTER-PANE SUB-TAB ──────────────────────────────────────────────
   .ap-tab — one trigger in the Auditor center-pane tabstrip
   (Scene Editor / Chat / Pins / Files / Workspace). Active gets a
   white surface and a tiny shadow inside the gray strip container.
   Used: Auditor → tab list above whichever tab body is active.
   ────────────────────────────────────────────────────────────────────── */

.ap-tabstrip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  background: hsl(var(--muted));
}

.ap-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-2) var(--space-3-5, 0.875rem);
  border: none;
  border-radius: var(--radius-xs);
  background: transparent;
  color: hsl(var(--muted-foreground));
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-base) var(--ease-in-out),
              color var(--duration-base) var(--ease-in-out),
              box-shadow var(--duration-base) var(--ease-in-out);
}
.ap-tab svg { width: 14px; height: 14px; }
.ap-tab:hover { color: hsl(var(--foreground)); }
.ap-tab.active {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: var(--shadow-sm);
}