/* paper.css — the "Build a paper" tab (2026-09-13).
 *
 * Loaded by /app/index.html ONLY. Everything here is scoped to .pgen / #filterSide, so no other
 * page can be affected and no shared stylesheet had to change (a shared-file edit would have left
 * every other page on its 7-day-cached copy).
 *
 * Layout: the Browse filter panel (#filterSide) is MOVED into this tab by app.js showTab(), so
 * the generator draws from exactly the same filter object as Browse — one filter path, one set
 * of controls. Desktop = filters | setup-card + output. Phone = filters collapse to a toggle.
 */

.pgen { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 18px; align-items: start; }
.pgen__main { min-width: 0; }

/* ---------- step strip ---------- */
.pgen__steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.pgen__steps li {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--card-surface, var(--card));
  font: 500 12.5px/1 var(--font-ui, inherit); color: var(--muted);
}
.pgen__steps li b {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad-primary, var(--navy)); color: #fff; font: 700 11px/1 var(--font-ui, inherit);
}

/* ---------- setup card ---------- */
.pgen__setup { padding: 18px 18px 16px; }
.pgen__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.pgen__head h2 { margin: 0; font-size: 18px; }
.pgen__head .muted { font-size: 12.5px; margin: 0; }

.pgen__form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 14px; }
.pgen__form .fgroup { margin: 0; min-width: 0; }
.pgen__form .fgroup > .hint { font-size: 11.5px; color: var(--muted); margin: 5px 0 0; line-height: 1.35; }
.pgen__form .span3 { grid-column: span 3; }
.pgen__form .span2 { grid-column: span 2; }
.pgen__form .span6 { grid-column: 1 / -1; }
.pgen__mix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pgen__mix label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; letter-spacing: .04em; text-transform: uppercase; }
.pgen__mix .inp { width: 100%; }

/* pool + summary + generate: one bar under the form */
.pgen__go {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; align-items: center;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.pgen__pool { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pgen__pool b { font: 700 26px/1 var(--serif); color: var(--navy); }
.pgen__pool span { font-size: 13px; color: var(--muted); }
.pgen__pool.is-empty b { color: var(--warn-ink, #B45309); }
.pgen__sum { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; grid-column: 1 / -1; }
.pgen__sum .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pgen__sum .chip--none { opacity: .75; }
.pgen__go .btn--primary { min-width: 190px; padding: 12px 22px; font-size: 15px; }
.pgen__go .btn--primary:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- output ---------- */
.pgen__out { margin-top: 18px; }
.pgen__out .empty { padding: 40px 20px; }
.pgen__out .empty ol { text-align: left; display: inline-block; margin: 12px auto 0; padding-left: 20px; color: var(--body); font-size: 14px; line-height: 1.6; }

/* ---------- the shared filter panel while it sits on this tab ---------- */
.side__toggle {
  display: none; width: 100%; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 10px; padding: 11px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--card-surface, var(--card)); color: var(--ink);
  font: 600 14px/1 var(--font-ui, inherit); cursor: pointer;
}
.side__toggle .chip { font-weight: 600; }
.side__toggle i { font-style: normal; transition: transform .18s; }
.side--collapsed .side__toggle i { transform: rotate(-90deg); }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .pgen__form .span3 { grid-column: span 6; }
  .pgen__form .span2 { grid-column: span 3; }
}
@media (max-width: 1000px) {
  .pgen { grid-template-columns: minmax(0, 1fr); }
  .side__toggle { display: flex; }
  .side--collapsed .card { display: none; }
  .pgen__go { grid-template-columns: minmax(0, 1fr); }
  .pgen__go .btn--primary { width: 100%; }
}
@media (max-width: 640px) {
  .pgen__form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pgen__form .span3, .pgen__form .span2 { grid-column: span 2; }
  .pgen__form .fgroup.half { grid-column: span 1; }
  .pgen__setup { padding: 14px; }
  .pgen__steps li { font-size: 12px; }
}