/* Book Word Count to Pages Estimator — content styles.
   Prefix: --bp-  /  .bp-

   Reference point: a 4-row format-comparison table is the result —
   showing manuscript/mass-market/trade/hardcover side by side at once
   makes clear there is no single "the" answer, only a range depending on
   format. No hero figure, since none of the four rows is more "correct"
   than the others.

   THIS FILE STYLES THE CONTENT AREA ONLY. Chrome is owned by chrome.css. */

:root {
  --bp-surface: #ffffff;
  --bp-panel:   #f6f5f2;
  --bp-line:    #e2ded4;
  --bp-text:    #1a1712;
  --bp-muted:   #6c6558;
  --bp-bad:     #b3261e;
  --bp-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
}

.bp-wrap {
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ── Input panel ─────────────────────────────────────────────────────────── */

.bp-panel {
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--bp-line);
  border-radius: 2px;
  background: var(--bp-surface);
}

.bp-field {
  display: grid;
  gap: 0.375rem;
  margin-bottom: 1rem;
}

.bp-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bp-muted);
}

.bp-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.875rem;
  font-family: var(--bp-mono);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  color: var(--bp-text);
  background: var(--bp-surface);
  border: 1px solid var(--bp-line);
  border-radius: 2px;
}

.bp-field input:focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: -1px;
}

.bp-presets {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--bp-line);
  padding-top: 0.875rem;
}

.bp-preset-lbl {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bp-muted);
}

.bp-chip {
  padding: 0.3125rem 0.75rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--bp-text);
  background: var(--bp-panel);
  border: 1px solid var(--bp-line);
  border-radius: 2px;
  cursor: pointer;
}

.bp-chip:hover {
  border-color: var(--tf-accent);
  color: var(--tf-accent);
}

.bp-error {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--bp-bad);
  background: rgba(179, 38, 30, 0.06);
  border: 1px solid var(--bp-bad);
  border-radius: 2px;
}

/* ── Primary action button ──────────────────────────────────────────────── */

.bp-btn {
  display: block;
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--tf-accent-ink);
  background: var(--tf-accent);
  border: 1px solid var(--tf-accent);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 1.5rem;
}

.bp-btn:hover  { background: var(--tf-accent-hover);  border-color: var(--tf-accent-hover); }
.bp-btn:active { background: var(--tf-accent-active); border-color: var(--tf-accent-active); }

.bp-btn:focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: 2px;
}

/* ── Format comparison table ─────────────────────────────────────────────── */

.bp-table {
  display: grid;
  border: 1px solid var(--bp-line);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.bp-row {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 0.8fr;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--bp-line);
  background: var(--bp-surface);
}

.bp-row:last-child { border-bottom: none; }

.bp-row-head {
  background: var(--bp-panel);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bp-muted);
}

.bp-format-cell {
  font-weight: 600;
  color: var(--bp-text);
}

.bp-note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--bp-muted);
}

/* ── Ad slots ───────────────────────────────────────────────────────────── */

.bp-ad {
  min-height: 280px;
  margin: 2rem auto 0;
  max-width: 36rem;
  padding-inline: 1.5rem;
}

@media (max-width: 26rem) {
  .bp-wrap,
  .bp-ad { padding-inline: 1rem; }
  .bp-panel { padding: 1.25rem; }
  .bp-row { grid-template-columns: 1.3fr 0.7fr 0.7fr; font-size: 0.8125rem; }
}

/* tf:dark-palette — generated by migrate_chrome.py */
/* Neutrals inherit the shared chrome tokens so all tools share one
   ground; brand hues are kept and lightened, never inverted. */
[data-theme="dark"] {
  --bp-surface: var(--tf-surface);
  --bp-panel: var(--tf-surface);
  --bp-line: var(--tf-rule);
  --bp-text: var(--tf-ink);
  --bp-muted: var(--tf-ink-soft);
  --bp-bad: #da8581;
}