/* ───────────────────────────────────────────────────────────
   The Professor of Law · Bluebook 22 Citation Generator
   Page-scoped CSS (keeps your global main.css intact)
   Place at: ./sub_resources/bluebook_cite.css
   ─────────────────────────────────────────────────────────── */

:root {
  --polc-card: rgba(255,255,255,.92);
  --polc-card-border: rgba(255,255,255,.7);
  --polc-border: rgba(15,23,42,.08);
  --polc-shadow: 0 18px 60px rgba(2,6,23,.28);
  --polc-txt: #0f172a;
  --polc-muted: #64748b;
  --polc-accent: #111;
  --polc-accent-ghost: #e2e8f0;
  --polc-focus: rgba(122,167,255,.28);
  --polc-badge-bg: #111;
  --polc-badge-tx: #fff;
  --polc-error: #b91c1c;
  --polc-good: #065f46;
  --polc-good-bg: #eaffea;
}

#pol-cite-app {
  color: var(--polc-txt);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 0 auto; padding: clamp(16px, 3vw, 28px);
  max-width: 1100px;
}

#pol-cite-app h1, #pol-cite-app h2 {
  color: #eaf2ff; text-shadow: 0 1px 2px rgba(0,0,0,.35);
  text-align: center; margin: 12px 0 16px;
}

.polc-head { text-align:center; margin-bottom: 10px; }
.polc-tagline { color:#eaf2ff; opacity:.9; margin:4px 0 8px; }
.polc-tip { margin:0 auto 18px; max-width:780px; text-align:center; color:#eaf2ff; opacity:.85; }

/* Card sections */
.polc-controls, .polc-formwrap, .polc-output{
  background: var(--polc-card);
  border:1px solid var(--polc-card-border);
  border-radius:16px;
  box-shadow: var(--polc-shadow);
  padding: clamp(14px,2vw,22px);
  margin:16px auto; max-width: 1060px;
  backdrop-filter: blur(16px) saturate(1.2);
}

.polc-row{
  display:grid; gap: clamp(10px, 2vw, 16px);
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 980px){ .polc-row{ grid-template-columns: 1fr; } }

.polc-field{ display:grid; gap: 6px; }
.polc-field > span{ font-weight:700; color: var(--polc-txt); }
.polc-field small.help{ color: var(--polc-muted); }

.polc-field select,
.polc-field input[type="text"],
.polc-field input[type="number"],
.polc-field input[type="date"],
.polc-field textarea {
  width: 100%; appearance:none; padding:10px 12px;
  border-radius:12px; border:1px solid var(--polc-border);
  background: rgba(255,255,255,.96); color: var(--polc-txt); outline:none;
}
.polc-field textarea{ min-height: 90px; resize:vertical; }
.polc-field input:focus, .polc-field select:focus, .polc-field textarea:focus{
  box-shadow: 0 0 0 3px var(--polc-focus); border-color:#7aa7ff;
}

.polc-typewrap{ display:grid; gap:8px; }
.polc-type-search{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--polc-border);
  background: rgba(255,255,255,.96); color:var(--polc-txt);
}

.polc-actions{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.btn{
  border:1px solid var(--polc-border); border-radius:12px; padding:10px 14px;
  background:#fff; color:var(--polc-txt); font-weight:800; cursor:pointer;
}
.btn:hover{ filter:saturate(1.05); transform:translateY(-1px); }
.btn.primary{ background: linear-gradient(90deg, var(--polc-accent), #333); color:#fff; border-color: rgba(0,0,0,.2); }
.btn.ghost{ background: var(--polc-accent-ghost); }

.badge{
  display:inline-flex; align-items:center; justify-content:center;
  height:22px; padding:0 8px; border-radius:999px; font-weight:800;
  background: var(--polc-badge-bg); color: var(--polc-badge-tx);
  font-size:11px; border:1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 0 8px rgba(255,255,255,.08);
}

/* Generated form layout */
#dynForm{ display:grid; gap:12px; }
.polc-grid-2{ display:grid; gap:10px; grid-template-columns: 1fr 1fr; }
.polc-grid-3{ display:grid; gap:10px; grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 880px){ .polc-grid-2, .polc-grid-3{ grid-template-columns: 1fr; } }

.polc-inline{ display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:end; }
.polc-helpbar{ margin:6px 0 2px; color:var(--polc-muted); font-size:13px; }
.polc-err{ font-size:13px; color: var(--polc-error); margin-top:2px; }

.polc-preview{
  border:1px dashed var(--polc-border); border-radius:12px; background:#fff;
  padding:14px; min-height:60px; color:#111;
}

.polc-copyrow{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }

.polc-details{ margin-top:14px; }
.codebox{
  background:#0b1220; color:#eaf2ff; padding:12px; border-radius:12px;
  overflow:auto; max-height:360px; border:1px solid rgba(255,255,255,.25);
}

/* Footer */
.polc-foot{ margin:18px auto 0; max-width:1060px; color:#eaf2ff; }
.polc-footgrid{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
@media (max-width:880px){ .polc-footgrid{ grid-template-columns:1fr; } }

/* Italic/Underline switch for titles/case names */
#pol-cite-app .bb-ital{ font-style: italic; }
#pol-cite-app.mode-bluepages .bb-ital{ font-style: normal; text-decoration: underline; text-decoration-thickness: .06em; }

/* Signals: italic in whitepages, roman in bluepages */
#pol-cite-app .bb-signal{ font-style: italic; }
#pol-cite-app.mode-bluepages .bb-signal{ font-style: normal; }

/* Success strip */
.polc-notes{
  margin-top:10px; padding:10px 12px;
  background: var(--polc-good-bg); border:1px solid #b8e2b8;
  border-radius:10px; color: var(--polc-good);
}