/* SyncBusy components: shared classes for every page.
 *
 * Load after tokens.css:
 *   <link rel="stylesheet" href="/static/tokens.css">
 *   <link rel="stylesheet" href="/static/components.css">
 * and put class="sb" on <body> for the base font, colors and link style.
 *
 * Hand-written from landing.html (main@45bb4ec) and the email theme. Class names are the
 * landing page's own where one exists. Every value is a token; a literal is a source one-off,
 * commented. Rules and component contracts: .claude/skills/syncbusy-design-system/SKILL.md.
 * Focus: 2px accent-text ring on every focusable element. Disabled: 50% opacity. (Decided 2026-11-02.) */

/* ── Base (landing L32-40) ─────────────────────────────────────── */
.sb { font-family: var(--font-sans); color: var(--ink); background: var(--bg); font-size: 1rem; line-height: 1.6; }
:where(.sb) a { color: var(--accent-text); text-decoration: none; }    /* decision: landing L39 uses accent (3.1:1). :where() = zero specificity, so component classes win */
:where(.sb) a:hover { text-decoration: underline; }
:where(.sb) :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }   /* decision 2026-11-02 */
.btn-primary, .btn-dark, .btn-secondary, .btn-danger, .btn-danger-solid, .card, .pricing-card, .detail-rows { box-sizing: border-box; }

/* ── Button ────────────────────────────────────────────────────── */
.btn-primary {                                                        /* landing L113-124 */
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  background: var(--accent); color: var(--on-accent); border: none;   /* decision: on-accent, not #fff */
  border-radius: var(--radius-sm); padding: 0.55rem 1.1rem;           /* default = app size (decision 2026-11-02) */
  font: 600 0.9rem/1.2 var(--font-sans); cursor: pointer; text-decoration: none;
  min-height: 40px;
  transition: background var(--duration-color, 0.15s);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover); text-decoration: none;   /* decision: lighten only; no lift, no glow (2026-11-02) */
}
.btn-block { width: 100%; }                                         /* any variant; .pricing-cta .btn-primary, L388 */

.btn-dark {                                                           /* .btn-nav, landing L66-72 */
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--bg); border: none;
  border-radius: var(--radius-sm); padding: 0.45rem 1.1rem;
  font: 600 0.9rem/1.2 var(--font-sans); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--duration-color, 0.15s);
}
.btn-dark:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 85%, var(--bg)); text-decoration: none; } /* no lift (2026-11-02) */

/* Secondary, danger, small, disabled (decisions 2026-11-02, for the app pages) */
.btn-secondary, .btn-danger, .btn-danger-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  border-radius: var(--radius-sm); padding: 0.55rem 1.1rem; min-height: 40px;
  font: 600 0.9rem/1.2 var(--font-sans); cursor: pointer; text-decoration: none;
  transition: background var(--duration-color, 0.15s), border-color var(--duration-color, 0.15s);
}
.btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--border-mid); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-inset); border-color: var(--ink-muted); text-decoration: none; }
.btn-danger { background: var(--surface); color: var(--danger-text); border: 1px solid var(--danger-text); }
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); text-decoration: none; }
.btn-danger-solid { background: var(--danger-text); color: var(--bg); border: 1px solid var(--danger-text); }   /* the confirm step only */
.btn-danger-solid:hover:not(:disabled) { text-decoration: none; filter: brightness(1.08); }
.btn-sm { padding: 0.3rem 0.75rem; min-height: 0; font-size: 0.8rem; }
/* .btn-lg = the big call to action (landing hero .btn-primary L113-124, signup cards). Any button variant. */
.btn-lg { padding: 0.85rem 1.75rem; font-size: 1rem; min-height: var(--control-min-height); }
.btn-primary.btn-lg { font-weight: 700; }
:is(.btn-primary, .btn-dark, .btn-secondary, .btn-danger, .btn-danger-solid):disabled,
:is(.btn-primary, .btn-dark, .btn-secondary, .btn-danger, .btn-danger-solid)[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none;
}

/* ── Badge ─────────────────────────────────────────────────────── */
.pro-badge {                                                          /* landing L356-361 */
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-text);          /* decision: accent-text, source accent */
  font: 700 0.65rem/1.4 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; vertical-align: middle;
}
.hero-badge {                                                         /* landing L92-101 */
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--surface); border: 1px solid var(--border-mid); border-radius: var(--radius-pill);
  padding: 0.3rem 0.85rem; font: 600 0.8rem/1.4 var(--font-sans); letter-spacing: 0.02em; color: var(--ink-muted);
}
.hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.status-chip {                                                        /* email theme */
  display: inline-flex; align-items: center; border-radius: var(--radius-pill);
  padding: 5px 12px; font: 700 13px/1.3 var(--font-sans);
}
.status-chip--success { background: var(--success-soft); color: var(--success-text); }
.status-chip--pro     { background: var(--accent-soft);  color: var(--accent-text); }
.status-chip--warning { background: var(--warning-soft); color: var(--warning-text); }
.status-chip--danger  { background: var(--danger-soft);  color: var(--danger-text); }
.status-chip--neutral { background: var(--neutral-soft); color: var(--neutral-text); }

/* ── Card ──────────────────────────────────────────────────────── */
.card {                                                               /* .step / .feat, landing L306-309, L326-329 */
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--card-pad-y) var(--card-pad-x);
}
.card h3 { font-size: 1rem; font-weight: 700; line-height: 1.3; margin: 0 0 0.4rem; }
.card p { font-size: 0.9rem; line-height: 1.6; color: var(--ink-muted); margin: 0; }
.step-num {                                                           /* landing L310-316 */
  width: 38px; height: 38px; border-radius: var(--radius-icon);
  background: var(--accent-soft); color: var(--accent-text);          /* decision: accent-text, source accent */
  font-size: 1rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.pricing-card {                                                       /* landing L368-392 */
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 2rem 1.75rem; display: flex; flex-direction: column; gap: 0.25rem;
}
.pricing-card.featured { border-color: var(--accent); }
.pricing-tier { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
.pricing-tier.accent { color: var(--accent-text); }                  /* decision: accent-text */
.pricing-price { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.pricing-period { font-size: 0.85rem; font-weight: 400; color: var(--ink-muted); letter-spacing: 0; }
.pricing-alt { font-size: 0.82rem; font-weight: 600; color: var(--success-text); margin-bottom: 0.75rem; } /* decision: success-text, source success (1.6:1) */
.pricing-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.pricing-list li { font-size: 0.875rem; color: var(--ink-muted); display: flex; gap: 0.5rem; line-height: 1.45; }
.pricing-list li::before { content: "✓"; color: var(--success-text); font-weight: 700; flex-shrink: 0; } /* decision: success-text */

/* ── Detail rows (email theme) ─────────────────────────────────── */
.detail-rows { background: var(--surface-inset); border-radius: var(--radius-sm); padding: 6px 20px; display: flex; flex-direction: column; }
.detail-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-solid); font-size: 14px; }
.detail-row:last-child { border-bottom: 0; }
.detail-row > :first-child { color: var(--ink-muted); }
.detail-row > :last-child { font-weight: 600; text-align: right; }

/* ── FAQ disclosure (landing L402-424, element selectors scoped under .faq) ── */
.faq details { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 0.5rem; background: var(--surface); overflow: hidden; }
.faq details[open] { border-color: var(--border-mid); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.1rem; font-weight: 400; color: var(--ink-muted); flex-shrink: 0; transition: transform var(--duration-disclose, 0.2s); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-answer { padding: 0.75rem 1.25rem 1rem; font-size: 0.9rem; color: var(--ink-muted); line-height: 1.7; border-top: 1px solid var(--border); }

/* ── Segmented toggle (.title-toggle, landing L215-238) ────────── */
.title-toggle { display: inline-flex; background: var(--surface); border: 1px solid var(--border-mid); border-radius: var(--radius-pill); padding: 0.25rem; gap: 0.15rem; font-size: 0.78rem; }
.title-toggle input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.title-toggle label { padding: 0.4rem 0.85rem; border-radius: var(--radius-pill); font-weight: 600; color: var(--ink-muted); cursor: pointer; white-space: nowrap; transition: background var(--duration-color, 0.15s), color var(--duration-color, 0.15s); }
.title-toggle label:hover { color: var(--ink); }
.title-toggle label:has(input:checked) { background: var(--ink); color: var(--bg); }
.title-toggle label:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: 2px; }   /* the input itself is hidden */

/* ── Form fields (decisions 2026-11-02) ────────────────────────── */
:where(.sb) :is(input:not([type]), input[type="text"], input[type="email"], input[type="url"], input[type="number"],
  input[type="date"], input[type="password"], input[type="search"], select, textarea), .input {
  font: 400 1rem/1.4 var(--font-sans); color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-mid); border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem; min-height: 44px; box-sizing: border-box; max-width: 100%;
}
:where(.sb) :is(input, select, textarea):focus-visible { border-color: var(--accent-text); }
:where(.sb) :is(input, select, textarea):disabled { opacity: 0.5; cursor: not-allowed; }
:where(.sb) input:is([type="checkbox"], [type="radio"]) { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; vertical-align: middle; margin: 0 0.3rem 0.15em 0; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field-label { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.field-hint { font-size: 0.8rem; color: var(--ink-muted); }
.check { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }

/* ── Nav (landing L43-75) ──────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 100; height: var(--nav-height); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } /* source: rgba(255,246,233,0.88) = bg at 88% */
.nav-logo { font-size: 1.2rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 0.25rem; font-size: 0.9rem; }
.nav-links a { color: var(--ink-muted); padding: 0.35rem 0.75rem; border-radius: var(--radius-xs); transition: background var(--duration-color, 0.15s), color var(--duration-color, 0.15s); }
.nav-links a:hover { background: var(--border); color: var(--ink); text-decoration: none; }
@media (max-width: 480px) { .nav-links a { display: none; } }

/* ── Section header (landing L285-299) ─────────────────────────── */
.section-eyebrow { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-text); margin-bottom: 0.6rem; } /* decision: accent-text */
.section-title { font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 0.75rem; }
.section-sub { font-size: 1rem; color: var(--ink-muted); max-width: var(--measure); margin: 0; }

/* ── Trust strip (landing L427-457) ────────────────────────────── */
.trust { background: var(--inverse); color: var(--on-inverse); padding: 3rem var(--gutter); text-align: center; }
.trust h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.75rem; }
.trust-sub { font-size: 1rem; color: color-mix(in srgb, var(--on-inverse) 65%, transparent); margin: 0 0 2rem; }   /* source rgba(255,255,255,0.65) */
.trust-items { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
.trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: color-mix(in srgb, var(--on-inverse) 80%, transparent); } /* source rgba(255,255,255,0.8) */
.trust-check { width: 20px; height: 20px; border-radius: 50%; background: var(--success); color: var(--on-success); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }

/* ── Footer (landing L460-468) ─────────────────────────────────── */
.footer { background: var(--inverse); border-top: 1px solid color-mix(in srgb, var(--on-inverse) 7%, transparent); padding: 1.75rem var(--gutter); display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap; font-size: 0.82rem; }
.footer a { color: color-mix(in srgb, var(--on-inverse) 55%, transparent); }                   /* source rgba(255,255,255,0.55) */
.footer a:hover { color: var(--on-inverse); text-decoration: none; }
.footer-copy { color: color-mix(in srgb, var(--on-inverse) 50%, transparent); }                /* source 35% failed (~3:1); 50% is 4.9-5.1:1 on inverse, still dimmer than links (2026-11-02) */

/* ── Email shell (email theme; production email inlines these as table cells) ── */
.email-shell { width: var(--email-width); box-sizing: border-box; padding: var(--email-pad); background: var(--bg); color: var(--ink); font-family: var(--font-email); display: flex; flex-direction: column; gap: var(--email-gap); }
.email-shell .email-wordmark { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; padding: 0 8px; }
.email-shell .email-card { background: var(--surface); border: 1px solid var(--border-solid); border-radius: var(--radius); padding: var(--email-pad); display: flex; flex-direction: column; gap: var(--email-gap); }
.email-shell h1 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.email-shell .email-intro { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-muted); }
.email-shell .email-fine { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.email-shell .email-footer { padding: 0 8px; font-size: 13px; line-height: 1.5; color: var(--ink-muted); display: flex; flex-direction: column; gap: 8px; }
.email-shell .email-footer a { color: var(--accent-text); text-decoration: underline; }
.email-shell .btn-primary { align-self: flex-start; font-family: var(--font-email); }