/* ============================================================
   BUILD / HOME THEME  —  Modern AI studio component grammar
   Soft, rounded, airy. Active under [data-theme="build"|"home"].
   All classes are namespaced .lw-* to avoid collisions.
   ============================================================ */

/* ---- Typography helpers ---- */
.lw-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.05;
}
.lw-body { font-family: var(--font-body); color: var(--ink); }
.lw-muted { color: var(--muted); }

/* Reusable section band + icon tile (studio, site-wide) */
.lw-band { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lw-icon-tile {
  width: 2.75rem; height: 2.75rem; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ---- Section band ---- */
.lw-section {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--surface);
  padding: 5rem 1.5rem;
}
.lw-section--alt { background: var(--surface-2); }
.lw-section--ink {
  background: var(--surface-ink);
  color: var(--c-ink-300);
}

/* ---- Card ---- */
.lw-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.lw-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

/* ---- Buttons ---- */
.lw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.lw-btn:hover { transform: translateY(-2px); }
.lw-btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent);
}
[data-theme="build"] .lw-btn--primary:hover,
[data-theme="home"] .lw-btn--primary:hover { background: var(--accent-strong); }
.lw-btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.lw-btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.lw-btn--ghost { background: transparent; color: var(--accent); }
.lw-btn--sm { padding: 0.42rem 0.9rem; font-size: 0.85rem; }

/* ---- Input ---- */
.lw-input {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lw-input::placeholder { color: var(--muted); }
.lw-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ---- Pill / tag ---- */
.lw-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: color-mix(in srgb, var(--accent) 70%, var(--ink));
}

/* Floating share buttons (components/floating_share.html). Token-driven, so it
   adopts the active theme (studio pill / terminal square). Icons use
   currentColor, so the button's `color` cascades to them on hover. */
.lw-share-btn {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.lw-share-btn:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: var(--accent);
  color: var(--accent);
}
.lw-share-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* "Copied!" confirmation state */
.lw-share-btn--active,
.lw-share-btn--active:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
}
.lw-share-label { color: var(--muted); }

/* ---- Ahrefs-style DR donut card (components/dr_badge.html) ----
   Coded replacement for the old DR screenshot; em-driven so the --sm
   variant scales as one unit. White bg is intentional fixed value:
   it mimics the Ahrefs report, not the theme. */
.dr-visual {
  font-size: 1rem;
  background: #fff;
  padding: 1.25em 1.5em 1.5em;
  border-radius: var(--radius-sm);
}
.dr-visual--sm { font-size: 0.55rem; }
.dr-visual__domain {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2em;
  letter-spacing: -0.03em;
  color: var(--c-ink);
  text-align: center;
  margin-bottom: 0.5em;
}
.dr-visual__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25em;
}
.dr-visual__donut {
  width: 6.5em;
  height: 6.5em;
  border-radius: 50%;
  background: conic-gradient(var(--accent-2) calc(var(--dr) * 1%), #e9e9ec 0);
  -webkit-mask: radial-gradient(circle, transparent 53%, #000 54%);
  mask: radial-gradient(circle, transparent 53%, #000 54%);
  flex-shrink: 0;
}
.dr-visual__label {
  font-family: var(--font-body);
  font-size: 1.25em;
  color: var(--c-ink);
  display: inline-flex;
  align-items: flex-start;
  gap: 0.3em;
}
.dr-visual__info {
  font-size: 0.65em;
  line-height: 1;
  color: var(--c-muted);
  font-style: italic;
  font-family: Georgia, serif;
}
.dr-visual__value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 2.4em;
  line-height: 1.1;
  color: var(--c-ink);
}