/* Borago Board website — theme colors follow boragosoft.com:
   primary #2472e5, accent #F97316, light background #F8FAFC. */

:root {
  color-scheme: light;
  --primary: #2472e5;
  --primary-dark: #1b5cbe;
  --accent: #f97316;
  --lightbg: #f8fafc;
  --surface: #ffffff;
  --heading: #111827;
  --text: #1f2937;
  --muted: #4b5563;
  --border: #e5e7eb;
}

/* Dark mode: html.dark is set before first paint by the head script (choice
   persisted in localStorage; 'system' follows the OS preference). */
html.dark {
  color-scheme: dark;
  --lightbg: #0f172a;
  --surface: #1e293b;
  --heading: #f1f5f9;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --border: #334155;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Keep [hidden] working on elements whose display is set by a class rule. */
[hidden] { display: none !important; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--lightbg);
  color: var(--text);
  line-height: 1.6;
  /* Sticky footer: main grows, footer sits at the bottom at any screen height. */
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

main { flex: 1; }

.container {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
header {
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.brand img { height: 3rem; width: 3rem; object-fit: contain; }

.brand span {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

nav { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }

nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

nav a:hover { color: var(--accent); }

/* Current page (same convention as boragosoft.com: accent-colored nav item). */
nav a.active { color: var(--accent); }

/* Theme cycle switch (same as the board UI): system / light / dark. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--lightbg);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.theme-toggle:hover { color: var(--text); background: var(--border); }

.theme-toggle svg { width: 1rem; height: 1rem; }

/* Releases page */
.release ul {
  list-style: disc;
  padding-left: 1.4rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.release ul li { margin-bottom: 0.4rem; }

.release .meta { font-size: 0.85rem; color: var(--muted); margin-bottom: 1rem; }

.release a { color: var(--primary); }

.release a:hover { color: var(--accent); }

/* Sign in stands out as a button. */
nav a.nav-signin {
  background: var(--primary);
  color: #fff;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  transition: background 0.15s;
}

nav a.nav-signin:hover { background: var(--accent); color: #fff; }

/* ── Hero (text left, animated board right) ─────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: stretch;
  text-align: left;
  padding: 4.5rem 0 3.5rem;
}

.hero .hero-text { align-self: center; }

.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--heading);
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.hero h1 em { color: var(--primary); font-style: normal; }

.hero p {
  font-size: 1.2rem;
  color: var(--muted);
  max-width: 44rem;
  margin: 0 0 2rem;
}

.hero .board-demo { margin: 0; max-width: none; height: 100%; }

@media (max-width: 52rem) {
  .hero { grid-template-columns: 1fr; }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--primary);
  color: #fff;
  font-weight: 500;
  padding: 0.85rem 2rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 0.15s;
}

.button svg { width: 1.1em; height: 1.1em; flex: none; }

.button:hover { background: var(--accent); }

.button.secondary {
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--primary);
}

.button.secondary:hover { color: var(--accent); border-color: var(--accent); background: var(--surface); }

.hero .note { font-size: 0.95rem; color: var(--muted); margin-top: 1rem; }

/* Hero CTA pair: download + create-account side by side, wrapping cleanly. */
.hero-text .button { margin-top: 0.5rem; }
.hero-text .button + .button { margin-left: 0.75rem; }

/* ── Sections ───────────────────────────────────────────────────────────── */
section { padding: 3rem 0; }

section.alt { background: var(--surface); }

h2 {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--heading);
  text-align: center;
  margin-bottom: 2.25rem;
}

/* Feature cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

section.alt .card { background: var(--lightbg); }

.card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.card p { color: var(--muted); font-size: 0.97rem; }

/* How it works */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem;
  counter-reset: step;
}

.step {
  counter-increment: step;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

.step h3 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Step number, inline with the heading. */
.step h3::before {
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}

.step p { color: var(--muted); font-size: 0.97rem; }

/* Centered call-to-action band */
.cta { text-align: center; }

.cta p { color: var(--muted); max-width: 40rem; margin: 0 auto 1.75rem; }

/* ── Download page ──────────────────────────────────────────────────────── */
.page-title { padding: 3.5rem 0 0.5rem; text-align: center; }

.page-title h1 { font-size: 2.2rem; font-weight: 800; color: var(--heading); margin-bottom: 0.75rem; }

/* Wide enough to keep the requirements line single-line on desktop. */
.page-title p { color: var(--muted); max-width: 72rem; margin: 0 auto; }

/* OS auto-detect suggestion (download page, below the description): a clone of
   the detected platform's card, full container width. The .downloads class on
   the wrapper makes the cloned .card pick up the same card/button styles. */
.suggest { margin: 2rem auto 0; text-align: left; }

/* The clone sits inside .page-title, whose `p { margin: 0 auto }` rule would
   center the card's paragraphs; pin them back to the left edge. */
.suggest .card p { margin-left: 0; margin-right: 0; max-width: none; }

.downloads .card { display: flex; flex-direction: column; }

/* Equal-size download buttons: bottom-aligned, full card width, single line. */
.downloads .card .button {
  margin-top: auto;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  white-space: nowrap;
}

/* A second (ARM64) button stacks under the first with a small gap. */
.downloads .card .button + .button { margin-top: 0.5rem; }

/* Secondary platform buttons keep their brand hover color as TEXT color. */
.downloads .card .button.secondary { border-color: var(--border); color: var(--muted); }
.downloads .card .button.secondary.btn-appimage:hover { background: var(--surface); color: #566069; border-color: #566069; }
.downloads .card .button.secondary.btn-deb:hover { background: var(--surface); color: #a81d33; border-color: #a81d33; }
.downloads .card .button.secondary.btn-rpm:hover { background: var(--surface); color: #3c6eb4; border-color: #3c6eb4; }
.downloads .card .button.secondary.btn-windows:hover { background: var(--surface); color: #0078d4; border-color: #0078d4; }

.downloads .card p { margin-bottom: 1.25rem; }

/* Environment-requirements tabs (download page) */
.tab-buttons { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: -1px; }

.tab-btn {
  font: inherit;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  padding: 0.6rem 1.4rem;
  border-radius: 0.5rem 0.5rem 0 0;
  cursor: pointer;
}

.tab-btn:hover { color: var(--accent); }

.tab-btn.active {
  background: var(--surface);
  border-color: var(--border);
  border-bottom-color: var(--surface);
  color: var(--primary);
  position: relative;
  z-index: 1;
}

.tab-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0.75rem 0.75rem 0.75rem;
  padding: 1.5rem;
}

.tab-panel ul { list-style: none; }

.tab-panel li { color: var(--muted); margin-bottom: 0.9rem; }

.tab-panel li:last-child { margin-bottom: 0; }

.tab-panel li strong { color: var(--text); }

.tab-panel a { color: var(--primary); }

.tab-panel a:hover { color: var(--accent); }

/* Download page only: platform brand colors on hover.
   AppImage slate (monochrome logo), Debian red, Fedora blue, Microsoft blue,
   Apple near-black. */
.btn-appimage:hover { background: #566069; }
.btn-deb:hover { background: #a81d33; }
.btn-rpm:hover { background: #3c6eb4; }
.btn-windows:hover { background: #0078d4; }
.btn-mac:hover { background: #1d1d1f; }

.downloads .meta { font-size: 0.85rem; color: var(--muted); margin-top: 0.75rem; }

.notice {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  color: var(--muted);
  max-width: 46rem;
  margin: 0 auto 2.5rem;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--lightbg);
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  padding: 0.1rem 0.4rem;
}

/* ── Prose pages (privacy) ──────────────────────────────────────────────── */
.prose { max-width: 46rem; margin: 0 auto; }

.prose h2 { text-align: left; font-size: 1.3rem; margin: 2rem 0 0.75rem; }

.prose p { color: var(--muted); margin-bottom: 1rem; }

.prose a { color: var(--primary); }

.prose a:hover { color: var(--accent); }

/* ── Animated board demo (homepage, "How it works") ─────────────────────── */
.board-demo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1rem;
  max-width: 46rem;
  margin: 2.5rem auto 0;
}

.demo-col {
  background: var(--lightbg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem;
  min-height: 13rem;
}

.demo-col h4 {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.demo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.6rem;
  margin-bottom: 0.6rem;
}

.demo-card .bar {
  display: block;
  height: 0.45rem;
  border-radius: 0.25rem;
  background: var(--border);
}

.demo-card .bar.short { width: 60%; }

.demo-card .bar + .bar { margin-top: 0.45rem; }

/* The task card that travels To Do → In Progress → Done (12s loop). Its left
   offset mirrors the grid: column width = (100% - 2rem padding - 2rem gaps)/3. */
.demo-task {
  position: absolute;
  top: 3.3rem;
  left: 1.75rem;
  width: calc((100% - 4rem) / 3 - 1.5rem);
  background: var(--surface);
  border: 1px solid var(--primary);
  border-radius: 0.4rem;
  padding: 0.6rem;
  box-shadow: 0 2px 8px rgba(36, 114, 229, 0.18);
  animation: demo-move 12s infinite;
}

.demo-task .demo-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.45rem;
}

/* AI output lines: "type" in while the card is In Progress. */
.demo-task .demo-line {
  display: block;
  height: 0.4rem;
  border-radius: 0.25rem;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: 0.55;
  width: 0;
  margin-bottom: 0.4rem;
  animation: demo-type 12s infinite;
}

.demo-task .demo-line.l2 { animation-name: demo-type-2; }
.demo-task .demo-line.l3 { animation-name: demo-type-3; }

.demo-task .demo-check {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #16a34a;
  opacity: 0;
  animation: demo-check 12s infinite;
}

@keyframes demo-move {
  0%, 26% { left: 1.75rem; }
  33%, 59% { left: calc(1.75rem + (100% - 4rem) / 3 + 1rem); }
  66%, 96% { left: calc(1.75rem + ((100% - 4rem) / 3 + 1rem) * 2); }
  98%, 100% { left: calc(1.75rem + ((100% - 4rem) / 3 + 1rem) * 2); opacity: 0; }
}

@keyframes demo-type {
  0%, 33% { width: 0; }
  42%, 100% { width: 90%; }
}

@keyframes demo-type-2 {
  0%, 42% { width: 0; }
  51%, 100% { width: 75%; }
}

@keyframes demo-type-3 {
  0%, 51% { width: 0; }
  60%, 100% { width: 85%; }
}

@keyframes demo-check {
  0%, 64% { opacity: 0; }
  70%, 96% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-task, .demo-task .demo-line, .demo-task .demo-check { animation: none; }
  .demo-task { left: calc(1.75rem + (100% - 4rem) / 3 + 1rem); }
  .demo-task .demo-line { width: 85%; }
  .demo-task .demo-line.l2 { width: 70%; }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer {
  background: var(--primary);
  color: #fff;
  padding: 2rem 0;
  margin-top: 2rem;
  text-align: center;
}

footer a { color: #fff; text-decoration: underline; }

footer a:hover { color: #ffe3cd; }

footer .privacy-line { font-size: 0.9rem; opacity: 0.85; margin-top: 0.5rem; }

/* ── Accessibility helpers ──────────────────────────────────────────────── */
/* Visually hidden but exposed to screen readers (headings, labels). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* "Skip to main content" — first focusable element on every page; hidden
   until keyboard focus reaches it. Uses the existing theme variables. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--primary);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0 0 0.5rem 0;
}

.skip-link:focus { left: 0; }