/* tool.css — styles specific to /tool.html (the standalone web tool) and the
   live-engine embed on the SEO guide pages. Reuses tokens + site.css primitives
   (.pill, .cta, .copy, .termwrap, .result-*). Brand law: mint on black, no
   gradients, 0.6s cubic-bezier motion, reduced-motion respected. */

.tool-hero { max-width: var(--wrap); margin: 0 auto; padding: 56px 24px 8px; text-align: center; }
.tool-hero h1 { font-size: 42px; font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; }
.tool-hero .lede { color: var(--dim); font-size: 17px; max-width: 660px; margin: 16px auto 0; }

.tool { max-width: var(--wrap); margin: 0 auto; padding: 24px 24px 8px; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.tool-form { min-width: 0; }
.fields { display: grid; gap: 10px; margin: 14px 0 16px; }
.tool-form .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-form > .cta { width: 100%; }

.add-bib { margin-top: 4px; width: 100%; }

/* Output panel keeps a comfortable minimum so the layout doesn't jump. */
.tool .output { min-height: 260px; }

/* ---- N2 proof-point trust lines (above the workspace) ---- */
.proof-points { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.proof-points li { position: relative; padding-left: 20px; color: var(--dim); font-size: 13.5px; font-weight: 500; }
.proof-points li::before { content: "✓"; position: absolute; left: 0; color: var(--mint); font-weight: 700; }

/* ---- bibliography workspace ---- */
.workspace-wrap { max-width: var(--wrap); margin: 0 auto; padding: 8px 24px 8px; }
.ws { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 22px; }
.ws-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ws-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.ws-style { color: var(--mint); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; }
.ws-note { color: var(--dim); font-size: 13px; margin-top: 6px; }
.ws-empty { color: var(--dim); font-size: 15px; border: 1px dashed var(--border); border-radius: 12px; padding: 22px; text-align: center; margin-top: 16px; }

.ws-list { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: none; }
.ws-item { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--border); }
.ws-item:first-child { border-top: none; }
.ws-text { font-size: 15px; line-height: 1.5; word-break: break-word; padding-left: 0.5in; text-indent: -0.5in; }
.ws-text i { font-style: italic; }
.ws-rm { flex: none; background: transparent; border: 1px solid var(--border); color: var(--dim); font-family: var(--font); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.ws-rm:hover { border-color: var(--mint); color: var(--mint); }

.ws-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }

/* D4 — per-entry completeness dot. Filled (muted mint) = complete; hollow ring =
   has gaps and is a button that reopens the entry. Muted, never alarming. The
   dot lives only in the workspace DOM — copy/export builds from e.html/e.plain,
   so it never leaks into the output. */
.ws-dot.is-complete { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #4fd6ad; opacity: 0.6; margin-top: 6px; }
button.ws-dot.is-gap {
  flex: none; width: 44px; height: 44px; padding: 0; margin: -12px 0 -12px -14px;
  background: transparent; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: center;
}
button.ws-dot.is-gap::before {
  content: ""; width: 12px; height: 12px; margin-top: 14px; border-radius: 50%;
  border: 1.5px solid var(--dim); transition: border-color var(--dur) var(--ease);
}
button.ws-dot.is-gap:hover::before, button.ws-dot.is-gap:focus-visible::before { border-color: var(--mint); }
button.ws-dot.is-gap:focus-visible { outline: 2px solid var(--mint); outline-offset: -6px; border-radius: 50%; }

/* ---- extension CTA below the fold ---- */
.cta-ext { max-width: var(--wrap); margin: 24px auto 0; padding: 44px 24px 8px; border-top: 1px solid var(--border); text-align: center; }
.cta-ext h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; }
.cta-ext p { color: var(--dim); font-size: 16px; max-width: 620px; margin: 12px auto 0; }
.cta-ext .hero-actions { margin-top: 24px; }

/* ---- S2.5 auto-cite paste row + S2.6 batch (styles shared here so the slice
   diffs stay JS-only) ---- */
.paste-row { margin-bottom: 6px; }
.paste-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.paste-input-wrap { display: flex; gap: 8px; margin-top: 6px; }
.paste-input-wrap .input { flex: 1; }
.paste-go { flex: none; }
.batch-toggle { background: none; border: none; color: var(--mint); font-family: var(--font); font-weight: 600; font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }
.disclosure { color: var(--dim); font-size: 12px; margin-top: 8px; line-height: 1.45; }
.autocite-status { font-size: 13px; margin-top: 8px; min-height: 1.2em; color: var(--dim); }
.autocite-status.err { color: #ff9b9b; }

textarea.input { min-height: 96px; resize: vertical; font-family: var(--font); line-height: 1.5; }

.batch-rows { margin-top: 12px; display: grid; gap: 8px; }
.batch-item { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: #070707; }
.batch-url { font-size: 12px; color: var(--dim); word-break: break-all; }
.batch-state { font-size: 13px; font-weight: 600; margin-top: 4px; }
.batch-state.ok { color: var(--mint); }
.batch-state.warn { color: #ffcf7a; }
.batch-state.err { color: #ff9b9b; }
.batch-item .fields { margin-top: 10px; }
.batch-actions { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

/* ---- W2 Quick Access sticky toolbar ----
   Fixed bottom bar (no layout shift) that appears once the fold scrolls away.
   Thin remote over the real pickers. 44px touch targets, keyboard reachable. */
.quickbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 8px; align-items: center; justify-content: center;
  padding: 8px 12px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(5, 5, 5, 0.94); border-top: 1px solid var(--border);
  transform: translateY(110%); transition: transform var(--dur) var(--ease);
}
.quickbar.show { transform: none; }
.quickbar[hidden] { display: none; }
.qb-control { position: relative; }
.qb-btn, .qb-bib {
  min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); font-family: var(--font);
  font-weight: 600; font-size: 13px; cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.qb-btn:hover, .qb-bib:hover, .qb-btn:focus-visible, .qb-bib:focus-visible { border-color: var(--mint); }
.qb-k { color: var(--dim); font-weight: 500; }
.qb-v { color: var(--mint); }
.qb-bib { color: var(--text); text-decoration: none; }
.qb-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 160px;
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
}
.qb-menu[hidden] { display: none; }
.qb-opt {
  min-height: 44px; text-align: left; padding: 8px 12px; border: 1px solid transparent;
  border-radius: 8px; background: transparent; color: var(--text);
  font-family: var(--font); font-weight: 600; font-size: 14px; cursor: pointer;
}
.qb-opt:hover, .qb-opt:focus-visible { border-color: var(--mint); }
.qb-opt.on { color: #000; background: var(--mint); border-color: var(--mint); }
/* Keep the fixed bar from hiding the last workspace row / footer. */
@media (max-width: 760px) { body.dense main { scroll-padding-bottom: 72px; } }

/* ---- D1 Citation Coach — what a citation is missing + where to find it ---- */
.coach { max-width: var(--wrap); margin: 4px auto 0; padding: 18px 24px 8px; }
.coach-title { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.coach-sub { color: var(--dim); font-size: 13.5px; margin-top: 4px; }
.coach-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.coach-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); font-family: var(--font);
  font-weight: 600; font-size: 13.5px; line-height: 1;
}
.coach-mark { font-weight: 800; font-size: 13px; }
/* present = muted mint (calm, affirming — never a loud success color) */
.coach-chip.is-present { color: var(--dim); }
.coach-chip.is-present .coach-mark { color: #4fd6ad; } /* muted mint tick */
/* D2 staged (before the first Generate): present chips are neutral outlines, not
   affirming mint — students see which fields are filled without a "done" signal.
   Only the mark color changes, so there is ZERO layout shift on Generate. */
.coach-staged .coach-chip.is-present .coach-mark { color: var(--dim); }
/* missing = muted neutral (a dash, never red / alarming) */
.coach-chip.is-missing { color: var(--dim); cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.coach-chip.is-missing .coach-mark { color: var(--dim); }
.coach-chip.is-missing:hover, .coach-chip.is-missing:focus-visible { border-color: var(--mint); color: var(--text); }
.coach-chip.is-missing:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.coach-chip.is-missing[aria-expanded="true"] { border-color: var(--mint); color: var(--text); }
.coach-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* one-line hint region — single 0.6s ease expand (D5); reduced-motion = instant */
.coach-hint {
  max-height: 0; opacity: 0; overflow: hidden; color: var(--dim);
  font-size: 14px; line-height: 1.5; margin-top: 0;
  transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease), margin-top var(--dur) var(--ease);
}
.coach-hint.is-open { max-height: 8rem; opacity: 1; margin-top: 12px; }
.coach-no-motion .coach-hint { transition: none; }

/* P3 — empty-state: when the citation is complete, collapse to one quiet line
   with an on-demand checklist. No new animation (instant show/hide) — calm. */
.coach-complete { display: none; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.coach-complete-msg { color: var(--dim); font-size: 14px; }
.coach-complete-msg::first-letter { text-transform: none; }
.coach-showlist { min-height: 44px; padding: 6px 12px; background: transparent; border: 1px solid var(--border); border-radius: 9px; color: var(--mint); font-family: var(--font); font-weight: 600; font-size: 12.5px; cursor: pointer; transition: border-color var(--dur) var(--ease); }
.coach-showlist:hover, .coach-showlist:focus-visible { border-color: var(--mint); }
/* complete mode: hide the "usually includes" sub + chips, show the one-liner */
.coach.coach-complete-mode .coach-sub,
.coach.coach-complete-mode .coach-chips { display: none; }
.coach.coach-complete-mode .coach-complete { display: flex; }
/* expanded: reveal the checklist (the ✓ chips) again */
.coach.coach-complete-mode.coach-expanded .coach-chips { display: flex; }
@media (prefers-reduced-motion: reduce) {
  .coach-hint, .coach-chip.is-missing, button.ws-dot.is-gap::before { transition: none; }
}

/* ---- responsive ---- */
@media (max-width: 760px) {
  .tool-grid { grid-template-columns: 1fr; }
  .tool-hero h1 { font-size: 34px; }
  .termwrap { order: -1; }
}

@media (prefers-reduced-motion: reduce) {
  .cta:active { transform: none; }
  .quickbar { transition: none; }
}