/*
 * screens.css — Screen-specific styles
 * See BEM_CONVENTIONS.md for naming guidelines
 */

/*
 * screens.css — aggregator for per-screen stylesheets.
 * Each screen owns its own CSS file under styles/screens/.
 */

@import url("./screens/dashboard.css");
@import url("./screens/draft.css");
@import url("./screens/confirm.css");
@import url("./screens/send.css");
@import url("./screens/library.css");
@import url("./screens/onboarding.css");
@import url("./screens/grow.css");
@import url("./screens/auth.css");


/* ===== CONFIRM SCREEN - Calm Queue Markers (from layout-focus-queue-calm.html) ===== */
.lines { list-style: none; padding: 0; margin: 0; }

/* Default state - small dim dot, muted text */
.lines li {
  position: relative;
  padding: 4px 0 4px 18px;
  color: var(--muted-soft);
  cursor: default;
  border-radius: 4px;
  line-height: 1.45;
}

.lines li::before {
  content: "";
  position: absolute;
  left: 4px; top: 11px;
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--border);
}

/* Verified - quietly green text, no big check */
.lines li.is-verified { color: var(--success); }
.lines li.is-verified::before {
  background: var(--success-muted);
}

/* Pending - same dot, text in normal color, clickable */
.lines li.is-pending {
  color: var(--text);
  cursor: pointer;
}
.lines li.is-pending::before {
  background: var(--muted-soft);
}
.lines li.is-pending:hover {
  background: var(--surface-warm);
  margin-left: -8px; padding-left: 26px;
}
.lines li.is-pending:hover::before { left: 12px; }

/* Active - thin left rail, no fill, slight weight */
.lines li.is-active {
  color: var(--text);
  font-weight: var(--fw-medium);
  padding-left: 18px;
  cursor: default;
}
.lines li.is-active::before {
  content: "";
  width: 2px;
  height: calc(100% - 12px);
  border-radius: 2px;
  background: var(--studio);
  top: 6px;
  left: 5px;
}

.queue-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--border-soft);
  font-size: var(--fz-small); color: var(--muted); line-height: 1.5;
}
.queue-foot strong { color: var(--text); font-weight: var(--fw-medium); }


/* ===== DRAFT SCREEN - Fit Panel (from layout-draft.html) ===== */
.draft-fit {
  width: 280px; /* Fixed panel width - consider tokenizing */
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 22px;
  position: sticky;
  top: 24px;
  box-shadow: var(--shadow-sm);
}

.draft-fit h4 {
  font-size: var(--fz-small);
  font-weight: 720;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.draft-fit__stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
}

.draft-fit__stat:last-of-type {
  border-bottom: 0;
  padding-bottom: 16px;
}

.draft-fit__n {
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
}

.draft-fit__n--ok { color: var(--success); }
.draft-fit__n--warn { color: var(--warning); }
.draft-fit__n--miss { color: var(--muted); }

/* Phase 1 R6 — "reused from library" stat in the Draft sidebar. The number
   reads "N of M" where N=reused, M=total. The "of M" piece sits as a subtle
   trailing fragment so the eye lands on the reused count first. */
.draft-fit__stat--reuse .draft-fit__n {
  color: var(--studio, var(--text));
}
.draft-fit__n-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 4px;
  letter-spacing: 0;
}

.draft-fit__lbl {
  font-size: 13px;
  color: var(--text);
  line-height: 1.35;
}

.draft-fit__lbl span {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 1px;
}

.draft-fit__cta {
  margin-top: 16px;
  width: 100%;
  background: var(--studio);
  color: var(--surface);
  border: 1px solid var(--studio);
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 14px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
}

.draft-fit__cta .sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--studio-tone);
}

.draft-fit__secondary {
  width: 100%;
  margin-top: 8px;
  background: transparent;
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: var(--fw-medium);
  font-size: 13px;
  color: var(--text);
  text-align: center;
  cursor: pointer;
}

.draft-after__grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 36px;
  align-items: flex-start;
  max-width: 1080px;
  margin: 0 auto;
}

@media (max-width: 880px) {
  .draft-after__grid { grid-template-columns: 1fr; }
  .draft-fit { position: static; width: 100%; }
}


/* ===== SEND SCREEN - Hero & Artifacts (from layout-send.html) ===== */
.send-hero {
  background: var(--surface);
  padding: 52px 32px 44px;
  border-bottom: 1px solid var(--border-soft);
  text-align: center;
}

.send-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 720;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--success);
  background: var(--success-soft);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--success-border);
  margin-bottom: 20px;
}
.send-hero__eyebrow--warn {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: var(--warning);
}

.send-hero__h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 760;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0 0 14px;
}

.send-hero__lede {
  font-size: 16px;
  color: var(--muted);
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.55;
}
.send-warning {
  max-width: 58ch;
  margin: 18px auto 0;
  padding: 12px 14px;
  border: 1px solid var(--warning);
  border-radius: var(--rad-sm);
  background: var(--warning-soft);
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.45;
}

.send-hero__lede strong { color: var(--text); font-weight: var(--fw-medium); }

/* Audit item #2 — "open Grow" CTA inside the Verified-but-incomplete warning.
   Distinguishes from the plain warning visually so the user reads the CTA. */
.send-warning--actionable {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.send-warning__body { margin: 0; }
.send-warning__cta {
  display: inline-block;
  font-weight: 600;
  color: var(--studio, var(--text));
  text-decoration: underline;
  text-underline-offset: 3px;
}
.send-warning__cta:hover { text-decoration: none; }

/* Audit item #10 — caption under the send stats explaining why the kit
   has these four artifacts together. */
.send-hero__kit-caption {
  margin: 14px auto 0;
  max-width: 56ch;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.4;
}

/* Phase 1 R6 — calm reuse-summary line under the send hero lede. Quietly
   advertises "X of Y bullets used pre-approved evidence from your library"
   so the finish line visibly cashes in the up-front evidence work. */
.send-hero__reuse {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--studio, var(--muted));
  font-weight: 500;
}

.send-stats {
  margin-top: 28px;
  display: inline-flex;
  gap: 0;
  font-size: 13px;
  color: var(--muted);
  background: var(--surface-warm);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 4px;
}

.send-stats__item {
  padding: 8px 16px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.send-stats__item + .send-stats__item {
  border-left: 1px solid var(--border-soft);
}

.send-stats__item strong {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.send-kit { background: var(--bg); padding: 56px 0 24px; }

.send-artifact {
  max-width: 760px;
  margin: 0 auto 48px;
  padding: 0 32px;
}

.send-artifact__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.send-artifact__eyebrow {
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}

.send-artifact__num {
  font-variant-numeric: tabular-nums;
  color: var(--muted-soft);
  font-weight: var(--fw-medium);
}

.send-artifact__h2 {
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -0.025em;
  margin: 0;
}

.send-artifact__body {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 36px 44px;
  box-shadow: var(--shadow-sm);
  font-size: 14.5px;
  line-height: 1.7;
}

.send-wrap {
  max-width: 760px;
  margin: 32px auto 64px;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--border-soft);
  padding-top: 22px;
}

.send-wrap__note strong { color: var(--text); font-weight: var(--fw-medium); }

.send-wrap__links { display: flex; gap: 16px; }

.send-wrap__link {
  color: var(--text);
  text-decoration: none;
  font-weight: var(--fw-medium);
  font-size: 13px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

/* Audit item #7 — "Save kit (coming soon)" inline qualifier so the button
   sets expectation before the click. Muted modifier so the label still
   reads as a primary affordance, but the qualifier signals "not yet wired." */
.send-wrap__link--soon { opacity: 0.85; }
.send-wrap__link-soon {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 4px;
  font-style: italic;
}


/* ===== DASHBOARD - Flywheel Stats (from layout-dashboard.html) ===== */
.dash-flywheel {
  background: var(--bg);
  padding: 24px 32px;
  border-bottom: 1px solid var(--border-soft);
}

.dash-flywheel__inner {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.dash-flywheel__cell {
  padding: 6px 16px;
  font-size: 12.5px;
  color: var(--muted);
  border-left: 1px solid var(--border-soft);
}

.dash-flywheel__cell:first-child {
  border-left: 0;
  padding-left: 0;
}

.dash-flywheel__cell strong {
  display: block;
  color: var(--text);
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 1px;
  line-height: 1.1;
}

.dash-flywheel__cell .lbl {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* Dashboard section headers */
.dash-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}

.dash-section__head h2 {
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -0.015em;
  margin: 0;
}

.dash-section__meta {
  font-size: 12.5px;
  color: var(--muted);
}

.dash-section__meta a {
  color: var(--text);
  font-weight: var(--fw-medium);
  text-decoration: none;
  margin-left: 12px;
}

@media (max-width: 720px) {
  .dash-flywheel__inner { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .dash-flywheel__cell:nth-child(3) { border-left: 0; padding-left: 0; }
}


/* ===== LIBRARY - Expanded Edit State (from layout-library.html) ===== */
.lib-fact.is-expanded {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 24px;
  box-shadow: var(--shadow-md);
  cursor: default;
}

.lib-fact.is-expanded:hover {
  background: var(--surface);
  margin: 0 -12px;
  padding: 24px;
}

.lib-expanded__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}

.lib-expanded__label {
  font-size: var(--fz-small);
  font-weight: 720;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.lib-expanded__close {
  font-size: 18px;
  color: var(--muted);
  cursor: pointer;
  background: transparent;
  border: 0;
  line-height: 1;
  padding: 0;
}

.lib-textarea {
  min-height: 60px;
  width: 100%;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
  outline: 0;
  resize: vertical;
  line-height: 1.55;
}

.lib-textarea:focus {
  border-color: var(--studio);
  box-shadow: 0 0 0 3px var(--studio-focus-ring);
}

.lib-textarea[readonly] {
  background: var(--surface-warm);
}

.lib-usage {
  background: var(--surface-warm);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
}

.lib-usage__row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  color: var(--text);
}

.lib-usage__row + .lib-usage__row {
  border-top: 1px dashed var(--border-soft);
}

.lib-usage__when {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.lib-expanded__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}

/* Edit hint hover effect */
.lib-edit-hint {
  font-size: var(--fz-small);
  color: var(--muted-soft);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease-out);
}

.lib-fact:hover .lib-edit-hint { opacity: 1; }


/* ===== ONBOARDING - Step 2 Seed Hero (from layout-onboarding.html) ===== */
.onboard-seed {
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
}

.onboard-hero {
  padding: 52px 32px 40px;
}

.onboard-hero__inner {
  max-width: 760px;
  margin: 0 auto;
}

.onboard-hero .eyebrow {
  font-size: 11.5px;
  font-weight: 720;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 14px;
}

.onboard-hero .hero-h1 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 14px;
}

.onboard-hero .hero-h1 em {
  color: var(--muted-soft);
  font-weight: 760;
}

.onboard-lede {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
  max-width: 60ch;
  line-height: 1.55;
}

.onboard-lede strong { color: var(--text); font-weight: var(--fw-medium); }

/* Sticky action bar */
.onboard-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
  padding: 14px 32px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.onboard-bar__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.onboard-bar__count {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

.onboard-bar__count strong {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.onboard-bar__bulk { display: flex; gap: 6px; }

.onboard-bar__bulk button {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  padding: 6px 4px;
  cursor: pointer;
}

.onboard-bar__bulk button:hover { color: var(--text); }

/* Phase 2 — per-bullet provenance trace under the Draft article. Collapsed
   by default (using native <details>); expanding it shows where each bullet
   came from and which JD requirement it answers. Calm visual treatment so
   it doesn't compete with the draft doc itself. */
.draft-trace {
  margin: 16px 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--rad-sm);
  background: var(--surface);
}
.draft-trace[open] {
  background: var(--surface-warm, var(--surface));
}
.draft-trace__summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13.5px;
  user-select: none;
}
.draft-trace__summary::-webkit-details-marker { display: none; }
.draft-trace__title {
  font-weight: var(--fw-medium);
  color: var(--text);
}
.draft-trace__title::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: var(--muted);
  transition: transform 120ms ease;
}
.draft-trace[open] .draft-trace__title::before {
  transform: rotate(90deg);
}
.draft-trace__meta {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.draft-trace__list {
  list-style: none;
  margin: 0;
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.draft-trace__row {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--rad-sm);
}
.draft-trace__bullet {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.draft-trace__quote {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text);
  font-style: italic;
  flex: 1 1 auto;
}
.draft-trace__badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  text-transform: uppercase;
}
.draft-trace__badge--lexical {
  background: var(--success-soft, rgba(20, 140, 80, 0.1));
  color: var(--success, #148c50);
}
.draft-trace__badge--ai {
  background: var(--studio-tint, rgba(107, 123, 255, 0.1));
  color: var(--studio, #4357e0);
}
.draft-trace__badge--ai-accepted {
  background: var(--studio-tint, rgba(107, 123, 255, 0.12));
  color: var(--studio, #4357e0);
  border: 1px solid var(--studio, #4357e0);
}
.draft-trace__badge--ai-low {
  background: var(--warning-soft, rgba(200, 120, 30, 0.1));
  color: var(--warning, #c8781e);
}
.draft-trace__meta-line {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.draft-trace__role {
  font-weight: var(--fw-medium);
  color: var(--text);
}
.draft-trace__role + .draft-trace__req::before {
  content: " · ";
  color: var(--border);
}
.draft-trace__rationale {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 2px solid var(--border);
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.45;
}

/* Phase 2 — numbered pins on composed bullets. Small chip that doesn't
   compete with the bullet text but is clearly clickable. Click jumps to
   the corresponding trace row (Variant C connection-clicking visualized
   inside the document itself). */
.draft-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  margin-right: 8px;
  vertical-align: 2px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--studio, var(--text));
  background: var(--studio-tint, rgba(107, 123, 255, 0.1));
  border: 1px solid var(--studio-tint, rgba(107, 123, 255, 0.25));
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
  user-select: none;
}
.draft-pin:hover {
  background: var(--studio, var(--text));
  color: var(--surface);
  transform: scale(1.06);
}
.draft-pin:focus-visible {
  outline: 2px solid var(--studio, var(--text));
  outline-offset: 2px;
}

/* Pin on the trace row mirrors the chip but sits as a marker (not clickable). */
.draft-trace__pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  margin-right: 10px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--studio, var(--text));
  background: var(--studio-tint, rgba(107, 123, 255, 0.12));
  border-radius: 999px;
  letter-spacing: 0;
}

/* Brief highlight when a pin click scrolls to a row. */
@keyframes draft-trace-flash {
  0%   { background: var(--studio-tint, rgba(107, 123, 255, 0.18)); }
  100% { background: var(--surface); }
}
.draft-trace__row--flash {
  animation: draft-trace-flash 1400ms ease;
}

/* ROADMAP §2.1 — "Pulling more matches…" indicator inline with the draft
   progress line. Sits next to the existing "Draft ready" copy as a quiet
   live-region while the bg job runs. Disappears via JS once the richer
   run lands and the draft is re-rendered. */
.draft-bg-upgrade {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--studio, var(--muted));
  background: var(--studio-tint, rgba(107, 123, 255, 0.08));
  border-radius: 999px;
  white-space: nowrap;
  animation: draft-bg-upgrade-pulse 2.4s ease-in-out infinite;
}
.draft-bg-upgrade__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--studio, var(--text));
  animation: draft-bg-upgrade-blink 1.2s ease-in-out infinite;
}
@keyframes draft-bg-upgrade-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@keyframes draft-bg-upgrade-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--studio-tint, rgba(107, 123, 255, 0.08)); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}