/* Intelligence Sales Service — style guide
   Look and feel follows done24bot.com; see DESIGN.md for the source values
   and the reasoning. That document is authoritative — if this file and it
   disagree, this file is what's wrong.
   Palette: done24bot blue ramp (primary → dark → deeper), green/red status.
   Type: Inter first, system stack behind it (no webfont request).
   Spacing: 4px base unit (--sp-1 .. --sp-6). */

:root {
  /* done24bot brand ramp. Interactive elements move DOWN the ramp on hover
     (primary → dark); structural chrome sits at --brand-deeper. */
  --brand: #5BA4D9;
  --brand-dark: #2D7AB8;
  --brand-deeper: #1B5A8C;
  --brand-light: #E8F4FD;
  --brand-subtle: #F0F7FC;
  --brand-gradient: linear-gradient(135deg, #5BA4D9, #3B7FBF);
  --ink: #1f2937;
  --ink-muted: #6b7280;
  --border: #e5e7eb;
  --surface: #ffffff;
  --bg: #f9fafb;
  /* Status colours are deliberately unchanged - orthogonal to the brand,
     and they still read correctly against blue. */
  --success: #16a34a;
  --danger: #dc2626;
  --warning-bg: #fffbeb;
  --warning-border: #fde68a;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 48px;

  --radius: 8px;
  /* Inter named first but NOT fetched - same as the source site. Anyone who
     has it gets it; everyone else falls through with no webfont request and
     no layout shift. */
  --font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font);
  /* The signature element: a fixed vertical wash from full brand blue at the
     top to white at the bottom, with white cards floating over it.
     background-attachment:fixed is load-bearing - without it the gradient
     repeats per scroll and the effect collapses. */
  background: linear-gradient(180deg, var(--brand), #fff);
  background-attachment: fixed;
  background-color: var(--bg);  /* fallback if the gradient can't paint */
  min-height: 100vh;
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4);
}

h1 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 var(--sp-2);
  color: var(--ink);
}

h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: var(--sp-5) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}

details.section {
  margin: var(--sp-5) 0 var(--sp-3);
}
details.section > summary,
.section-title {
  font-size: 1.125rem;
  font-weight: 600;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
details.section > summary {
  cursor: pointer;
}
details.section[open] > summary,
.section-title {
  margin-bottom: var(--sp-3);
}

h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

p { margin: 0 0 var(--sp-2); color: var(--ink); }
small { color: var(--ink-muted); font-weight: 500; }

/* Heavy and undecorated, per the source site (font-weight:800). Uses
   --brand-dark rather than --brand so link text keeps enough contrast
   against white cards - the raw brand blue is too light for body-size text. */
a { color: var(--brand-dark); text-decoration: none; font-weight: 800; }
a:hover { color: var(--brand-deeper); text-decoration: underline; }

/* Navbar per DESIGN.md §5: solid bar at the deepest step of the blue ramp,
   translucent white links that brighten on hover. Replaces the old
   underlined-row treatment, which disappeared against the gradient. */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
  background: var(--brand-deeper);
  border-radius: var(--radius);
}
.topbar .brand { font-weight: 700; font-size: 1.25rem; color: #fff; }
.topbar .meta { color: #ffffffbf; font-size: 0.875rem; }
.topbar .meta b { color: #fff; }
/* 55% white at rest, 75% on hover - the source site's nav-link ramp. The
   global `a` rule's brand blue would be unreadable on this bar. */
.topbar .meta a { margin-left: var(--sp-3); color: #ffffff8c; }
.topbar .meta a:hover { color: #ffffffbf; text-decoration: none; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  /* Deeper than the old flat-background shadow. A white card on #f9fafb
     separated itself; over the blue gradient - especially near the top,
     where the background is fully saturated - it needs the lift to stay
     legible as a raised surface. See DESIGN.md §10. */
  box-shadow: 0 2px 8px rgba(27, 90, 140, 0.10);
}

.card--info {
  background: var(--brand-light);
  border-color: #bfe0f7;  /* was indigo #c7d2fe - matched to the blue ramp */
}

.card--warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
}

input[type=text], input[type=email], input[type=password], textarea, select {
  font-family: var(--font);
  font-size: 0.9rem;
  padding: var(--sp-2) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}
textarea { min-height: 4.5em; resize: vertical; width: 100%; }

button, .btn {
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  border-radius: 6px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: white;
  cursor: pointer;
  transition: color .15s ease-in-out, background-color .15s ease-in-out,
              border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
/* The source site's focus affordance: a .25rem ring at 25% brand alpha.
   Easy to lose in a restyle, and it's the only visible focus cue buttons
   have once the UA outline is suppressed. */
button:focus-visible, .btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(91, 164, 217, 0.25);
}
button.btn--stop { background: var(--danger); border-color: var(--danger); }
button.btn--stop:hover { background: #b91c1c; }

pre {
  background: #111827;
  color: #e5e7eb;
  padding: var(--sp-3);
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.8rem;
  margin: var(--sp-2) 0;
}
.cmd-block {
  position: relative;
}
.cmd-block pre {
  padding-right: 2.5rem;
}
.cmd-block .copy-btn, .cmd-block .reveal-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #374151;
  background: #1f2937;
  color: #e5e7eb;
  line-height: 0;
}
.cmd-block .reveal-btn { right: 36px; }
.cmd-block .copy-btn:hover, .cmd-block .reveal-btn:hover { background: #374151; }
.cmd-block .copy-btn:disabled { cursor: default; color: var(--success); border-color: var(--success); }
.cmd-block--secret pre {
  letter-spacing: 2px;
  user-select: none;
  padding-right: 4.5rem;
}
code {
  background: var(--brand-light);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-muted);
  flex-shrink: 0;
}
.dot--up { background: var(--success); }
.dot--down { background: var(--danger); }
.dot--warn { background: #f59e0b; }

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(127, 127, 127, 0.3);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.exec-row {
  border-left: 3px solid transparent;
  padding-left: var(--sp-2);
  transition: background-color 0.3s ease, border-left-color 0.3s ease;
}
.exec-row--running { border-left-color: #f59e0b; background: rgba(245, 158, 11, 0.07); }
.exec-row--success { border-left-color: #16a34a; background: rgba(22, 163, 74, 0.05); }
.exec-row--failed { border-left-color: #dc2626; background: rgba(220, 38, 38, 0.08); }
/* Submitted but not started: waiting for a concurrency slot on a paid
   tier. Deliberately muted - it is not progress and not a result. */
.exec-row--queued { border-left-color: #94a3b8; background: rgba(148, 163, 184, 0.10); }
.exec-row--fade-in { animation: execFadeIn 0.6s ease; }
@keyframes execFadeIn { from { opacity: 0; } to { opacity: 1; } }

.status-label {
  font-size: 0.75rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.activity-feed {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.activity-row {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.activity-row:last-child { border-bottom: none; }
.activity-row .ts { color: var(--ink-muted); font-size: 0.8rem; }
.activity-row .detail { color: var(--ink-muted); }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.tier-card.current { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-light); }
.tier-price { font-size: 1.5rem; font-weight: 700; margin: var(--sp-2) 0; }

form.auth { max-width: 340px; margin: var(--sp-6) auto; }
form.auth input { display: block; width: 100%; margin-bottom: var(--sp-2); }

/* Model picker sits inline with the Run / Follow-up buttons it belongs to,
   so the choice reads as part of that action rather than a page-level
   setting. Constrained width because a metered option's label carries its
   remaining-run count and would otherwise stretch the row. */
.model-select {
  font-size: 0.8rem;
  padding: 4px 6px;
  margin-left: var(--sp-2);
  max-width: 22rem;
  vertical-align: middle;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
}
.model-select option:disabled { color: var(--ink-muted); }

/* Currency footnote under the tier grid - the prices themselves carry a
   USD suffix; this explains the bank-side conversion that a non-US
   customer will see on their statement. Muted: it's a clarification,
   not a selling point. */
.billing-currency-note { color: var(--ink-muted); font-size: 0.85rem; max-width: 46rem; }

/* Secondary payment route on a tier card. Deliberately a plain link, not
   a second button: card is the primary path and two equal-weight buttons
   would read as a choice the customer has to make before they can buy. */
.tier-paypal { display: block; margin-top: var(--sp-2); font-size: 0.85rem; color: var(--ink-muted); }
.tier-paypal:hover { color: var(--brand-dark); }

/* Issue list (/issues). Status drives the only colour on the card, so a
   queue of twenty reads as a queue rather than as twenty identical boxes. */
.issue-scope { color: var(--ink-muted); font-size: 0.85rem; }
.issue-card { margin-bottom: var(--sp-3); }
.issue-head { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; }
.issue-when, .issue-src { color: var(--ink-muted); font-size: 0.8rem; }
.issue-body { margin: var(--sp-2) 0 0; white-space: normal; }
.issue-status {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 999px; background: var(--brand-light); color: var(--brand-deeper);
}
.issue-status--drafted { background: var(--warning-bg); color: #92400e; }
.issue-status--replied { background: #dcfce7; color: #166534; }
.issue-status--failed  { background: #fee2e2; color: #991b1b; }
.issue-diagnosis { margin-top: var(--sp-2); font-size: 0.9rem; }
.issue-reply {
  margin-top: var(--sp-2); padding: var(--sp-2); border-left: 3px solid var(--brand);
  background: var(--brand-subtle); font-size: 0.9rem;
}

/* Unread-issue count in the topbar. Sits inside the /issues link so it
   inherits the link's hit area - a separate element next to it looked
   clickable but was not, which reads as a broken control.
   Uses its own colour rather than the topbar's muted white so it stays
   legible against the brand bar at the small size a count needs. */
.topbar .meta a .nav-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  min-width: 8px;
  border-radius: 999px;
  background: var(--danger, #d64545);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  vertical-align: baseline;
}
.topbar .meta a:hover .nav-badge { background: #e05a5a; }

/* Draft that reads like an internal diagnosis. Warning rather than a
   block: the operator may still have good reason to send it, they just
   should not do so without having been told. */
.issue-reply-warn {
  margin: var(--sp-2) 0;
  padding: 8px 10px;
  border-left: 3px solid var(--danger, #d64545);
  background: #d6454514;
  color: var(--ink, inherit);
  font-size: 0.85rem;
}