/*
 * No :root here. This file redeclared the same five tokens shared.css defines, plus
 * --border which shared.css did not have — so the front page had a border token and every
 * other page had the literal. Both now live in shared.css, which every page loading this
 * one already loads first.
 */

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
}

.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.btn-brand:hover,
.btn-brand:focus {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
}

/* Navigation lives in lenses/shared.css — every page renders the same header. */

/* Hero */
.hero-section {
  background: linear-gradient(135deg, var(--brand-ground) 0%, var(--paper) 55%, #fff 100%);
  border-bottom: 1px solid var(--border);
  padding: 2rem 0 2.5rem;
  overflow-x: clip;
}

.hero-section .row > [class*="col-"] {
  min-width: 0;
  max-width: 100%;
}

.hero-headline {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
  font-weight: 700;
}

.hero-subhead {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.55;
  max-width: 36rem;
}

.hero-image-wrap {
  width: 100%;
  max-width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 12px 40px rgba(31, 41, 51, 0.08);
  overflow: hidden;
  line-height: 0;
}

.hero-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.hero-note {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Featured lenses — cards use lenses/shared.css (.lens-card) */
.featured-lenses-loading,
.featured-lenses-empty {
  font-size: 0.9rem;
  color: var(--muted);
  padding: 1rem;
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: 14px;
}

/* Feature cards */
.feature-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  background: var(--brand-ground);
  color: var(--brand);
  font-weight: 700;
  font-size: 1.1rem;
}

.card {
  border-color: var(--border);
  box-shadow: 0 1px 2px rgba(31, 41, 51, 0.05);
}

/* Secondary features, kept out of the card grid so the three main ones lead. */
.feature-also {
  margin-top: 1rem;
  font-size: 0.9rem;
}

.track-shared-note {
  margin-top: 0.75rem;
}

/* How it works */
.step-num {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}

.step-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  padding: 1.25rem;
  height: 100%;
}

/* Footer styles live in lenses/shared.css — every page renders the same footer. */

/* Focus visibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  background: var(--brand);
  color: #fff;
  z-index: 2000;
  border-radius: 4px;
}

/*
 * The extension's launch status in the hero.
 *
 * A link, not a button: until the Chrome Web Store listing exists this is
 * information rather than an action, and a third large button next to the two
 * real ones would compete with them for a click that does nothing yet.
 * render_chrome_cta() turns it into a proper button again on its own the day a
 * store URL is configured — this only styles the coming-soon state.
 */
.hero-status-link {
  color: var(--muted);
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.hero-status-link:hover,
.hero-status-link:focus-visible {
  color: var(--brand-dark);
}

/* Generic summary vs personal impact brief. */
.compare-card {
  border: 1px solid var(--border);
}

.compare-card-generic {
  background: #fcfcfd;
}

.compare-card-personal {
  border-color: #b2ddff;
  background: #f5faff;
}

.compare-list {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.95rem;
}

.compare-list li + li {
  margin-top: 0.35rem;
}

/*
 * The vocabulary, as <details>. Collapsed so the page does not open with three
 * definitions, and a native disclosure rather than a scripted one so it works
 * with the keyboard and a screen reader without any help from us.
 */
.term-card {
  height: 100%;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: #fff;
}

.term-card > summary {
  cursor: pointer;
  font-size: 0.95rem;
}

.term-card > summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.term-card[open] > summary {
  margin-bottom: 0.25rem;
}

/*
 * The demo video.
 *
 * aspect-ratio on the wrapper rather than a fixed height: the poster and the video
 * both fill it, so the space is reserved before either has loaded and the page does
 * not jump when they arrive. object-fit: contain because a screen recording is not
 * always exactly 16:9 — letterboxing is better than cropping the UI out of frame.
 */
.demo-video-wrap {
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
}

.demo-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Dropboxes callout on the home page. Reuses the brand tokens and the same numbered
   -step treatment as "How it works", so it reads as part of the same page. */
.dropbox-cta {
  border: none;
  background: linear-gradient(135deg, var(--brand-ground) 0%, var(--paper) 60%, #fff 100%);
}
.dropbox-cta-steps {
  list-style: none;
  counter-reset: dropbox-step;
  padding: 0;
  margin: 0;
}
.dropbox-cta-steps li {
  counter-increment: dropbox-step;
  position: relative;
  padding: 0.5rem 0 0.5rem 2.5rem;
}
.dropbox-cta-steps li::before {
  content: counter(dropbox-step);
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
}
/*
 * "Add SoWhatify to Claude in one link" band, above the fold of the main content.
 *
 * Server-rendered and static: the MCP URL is a constant and the OAuth flow needs
 * no token, so the whole band is markup. The copy buttons reuse the shared
 * .copy-field-wrap / .copy-field-btn wiring (bound in home-mcp.js).
 */
.home-claude-band {
  border: 1px solid var(--border-cool);
  border-radius: 18px;
  /* Brand wash in the top-left corner fading to white, so it reads as a highlight
     without turning the whole block a flat colour. */
  background: radial-gradient(135% 160% at 0% 0%, var(--brand-ground) 0%, #fff 62%);
  box-shadow: 0 12px 44px rgba(23, 92, 211, 0.1);
  overflow: hidden;
}

.home-claude-band-inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 1.75rem;
  align-items: center;
  padding: 1.9rem 2.1rem;
}

@media (max-width: 767.98px) {
  .home-claude-band-inner {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 1.5rem 1.35rem;
  }
}

.home-claude-eyebrow {
  color: var(--brand-dark);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.home-claude-title {
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  font-weight: 700;
  line-height: 1.2;
}

.home-claude-sub {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 34rem;
}

.home-claude-field-label {
  display: block;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--muted-strong);
  margin-bottom: 0.35rem;
}

/* Bigger, calmer field than the config textarea — this is the one thing to copy. */
.home-claude-field .form-control {
  padding: 0.72rem 6.5rem 0.72rem 0.85rem;
  height: auto;
  font-size: 0.95rem;
  background: #fff;
  border-color: var(--border-cool);
}

/* The single-line field is taller than the button, so centre it rather than pin
   it to the top the way the multi-line config panel does. */
.home-claude-field .copy-field-btn {
  top: 50%;
  transform: translateY(-50%);
}

/*
 * Bootstrap's own `.form-control:focus` / `.btn:focus` win over the sitewide
 * a/button/input/select/textarea/[tabindex]:focus-visible ring in shared.css by
 * specificity — two classes beat one class plus one type selector — and what they
 * substitute is a box-shadow that transitions in over 150ms, so a keyboard user
 * tabbing through sees nothing at the instant focus lands. Match the sitewide ring
 * here, at a specificity that wins, so it shows immediately instead.
 */
.home-claude-field .form-control:focus-visible,
.home-claude-cli .btn-outline-secondary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.home-claude-cli {
  margin-top: 0.95rem;
}

.home-claude-cli > summary {
  cursor: pointer;
  width: fit-content;
  font-size: 0.85rem;
  color: var(--brand-dark);
  font-weight: 600;
}

.home-claude-cli > summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.home-claude-clients {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Front-page "Start using now" MCP widget (home-mcp.js). */
.home-mcp-reveal {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 0.85rem;
}

.home-mcp-lede {
  font-weight: 600;
}

/* Room for the absolutely-positioned copy button so it never overlaps text. */
.home-mcp-reveal .copy-field-wrap .form-control {
  padding-right: 5.25rem;
}

.home-mcp-config {
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

/* Copy button as an icon plus a short label. */
.home-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.home-copy-icon {
  flex: 0 0 auto;
}

.home-mcp-details summary {
  cursor: pointer;
}

.home-mcp-note a {
  white-space: nowrap;
}