/* marketing-site/report/report.css
 *
 * Builder UI chrome (task 18). Palette/typography copied from
 * /tool's tool-app.css so the report builder reads as a sibling of the
 * rest of the site, not a bolted-on tool. This file styles ONLY the
 * builder shell (topbar, tabs, left panel, preview chrome, dialogs); the
 * actual report `.page` elements are styled entirely by print.css, loaded
 * separately, so the on-screen preview is exactly what prints.
 */

:root {
  --bg: #F8FAFC; --white: #fff; --border: #E5E7EB; --border-light: #F1F5F9;
  --text: #111827; --text2: #6B7280; --text3: #9CA3AF;
  --primary: #0F4C5C; --primary-light: #1B7B94; --primary-bg: #E6F0F2;
  --success: #22C55E; --danger: #EF4444; --warning: #F59E0B;
  --red: #EF4444; --red-bg: #FEF2F2;
  --radius: 10px; --shadow: 0 1px 3px rgba(0,0,0,.06);
  --left-panel-w: 380px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 8px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .3px; color: var(--text2); margin-top: 18px; }
h4 { font-size: 12px; color: var(--text2); margin-top: 12px; }
p.tab-hint, p.muted-note { font-size: 12px; color: var(--text3); margin: 4px 0 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------------- */
/* Narrow-screen notice (ruling 2: below tablet width, a one-line notice, */
/* no broken layout -- the app shell itself is hidden at that breakpoint). */
/* ---------------------------------------------------------------------- */

.narrow-notice { display: none; }
@media (max-width: 767px) {
  #app-shell { display: none !important; }
  .narrow-notice {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px; text-align: center;
    font-size: 15px; color: var(--text2);
  }
}

/* ---------------------------------------------------------------------- */
/* Shell layout. */
/* ---------------------------------------------------------------------- */

.app-shell { display: flex; flex-direction: column; height: 100vh; }

.topbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--white); border-bottom: 1px solid var(--border);
  position: relative; z-index: 20;
}
.topbar-home { font-weight: 800; font-size: 15px; color: var(--text); text-decoration: none; margin-right: 6px; }
.topbar-home:hover { color: var(--primary); }
.topbar select, .menu select { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; background: var(--white); font-size: 13px; }
.topbar-subject { font-size: 13px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.topbar-spacer { flex: 1; }
.export-menu { position: relative; }
.export-dropdown {
  position: absolute; right: 0; top: calc(100% + 4px); min-width: 220px;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px; z-index: 30;
}
.export-dropdown .menu-item {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 9px 10px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.export-dropdown .menu-item:hover { background: var(--bg); }
.export-dropdown hr { border: none; border-top: 1px solid var(--border-light); margin: 6px 0; }

/* Redesign (spec §3): two screens. Screen 1 is a centred card; Screen 2 is
   the preview with a collapsible "Customize" drawer on the right. */
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.screen[hidden] { display: none; }
.screen-client { align-items: center; justify-content: flex-start; overflow-y: auto; padding: 40px 16px; }
.client-card { width: 100%; max-width: 560px; background: var(--white); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 24px 28px 28px; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.card-head-right { display: flex; gap: 8px; }
.card-title { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.card-subtitle { color: var(--text2); font-size: 13.5px; margin: 0 0 18px; }
.card-actions { margin-top: 20px; }
.btn-lg { width: 100%; justify-content: center; padding: 13px 16px; font-size: 15px; }
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--text2);
}
.card-foot-link {
  display: block; width: 100%; margin-top: 10px; text-align: center;
  font-size: 13px; color: var(--text2);
}
.card-foot-link:hover { text-decoration: underline; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-icon { padding: 7px 9px; }
.menu-anchor { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 260px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 8px; z-index: 40; }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px; font-size: 13px; }
.menu-row label { font-weight: 600; color: var(--text2); white-space: nowrap; }
.menu hr { border: none; border-top: 1px solid var(--border-light); margin: 6px 0; }
.menu .menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.menu .menu-item:hover { background: var(--bg); }
.menu .client-row { padding: 2px 0; }
.menu .account-bar { display: flex; flex-direction: column; gap: 6px; padding: 4px; font-size: 13px; }
.progress-bar { height: 3px; background: var(--border-light); overflow: hidden; }
.progress-fill { height: 100%; background: var(--primary); transition: width .2s; }
.progress-line { font-size: 12px; color: var(--text2); padding: 4px 16px; background: var(--white); border-bottom: 1px solid var(--border); }
.preview-main { flex: 1; display: flex; min-height: 0; }
.drawer { width: 0; overflow: hidden; display: flex; flex-shrink: 0; background: var(--white); border-left: 1px solid var(--border); transition: width .2s; }
.drawer.open { width: var(--left-panel-w); }
.drawer:not(.open) { visibility: hidden; } /* closed: out of the tab order too */
.drawer .tabs { width: 110px; border-right: 1px solid var(--border); border-left: 0; }
.drawer .panel-body { flex: 1; overflow-y: auto; padding: 16px; min-width: 0; }

.tabs { display: flex; flex-direction: column; width: 120px; flex-shrink: 0; background: var(--white); border-right: 1px solid var(--border); overflow-y: auto; }
.tab-btn {
  text-align: left; background: none; border: 0; border-left: 3px solid transparent;
  padding: 12px 12px; font-size: 12.5px; font-weight: 600; color: var(--text2); cursor: pointer;
}
.tab-btn:hover { background: var(--bg); color: var(--text); }
.tab-btn.active { color: var(--primary); border-left-color: var(--primary); background: var(--primary-bg); }

.panel-body { padding: 16px; }

.preview-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); }

/* ---------------------------------------------------------------------- */
/* Form controls shared across every panel. */
/* ---------------------------------------------------------------------- */

.field { margin-bottom: 14px; }
.field label, .row-check { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.field input[type=text], .field input[type=date], .field input[type=number],
.field input[type=color], .field select, .field textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--white); font-size: 13px;
}
/* Fix round 1 (reviewer finding 5): `text-overflow: ellipsis` alone is a
   no-op without `overflow: hidden` + `white-space: nowrap` (it only
   controls what happens once content already can't be shown, spec-wise) --
   it was declared alone on the shared rule above, so a long single-line
   value (e.g. the client-name placeholder, visible clipped in builder.png)
   hard-clipped mid-character instead of showing "...". Scoped to the
   single-line text inputs only, deliberately excluding `select`/`textarea`
   -- `white-space: nowrap` on a `<textarea>` would break its normal
   multi-line wrapping (cover letter, next steps). */
.field input[type=text], .field input[type=date], .field input[type=number] {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.field input[type=color] { padding: 2px; height: 34px; }
.field textarea { resize: vertical; font-family: inherit; }
.field input:focus, .field select:focus, .field textarea:focus,
.panel-body select:focus, .panel-body input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.row-check { display: flex; align-items: center; gap: 6px; font-weight: 500; margin: 8px 0; cursor: pointer; }
.row-check input { accent-color: var(--primary); }

.btn {
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border);
  background: var(--white); border-radius: 7px; padding: 7px 12px; font-size: 12.5px;
  font-weight: 600; cursor: pointer; color: var(--text);
}
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { padding: 5px 9px; font-size: 12px; }
.btn-xs { padding: 2px 7px; font-size: 12px; line-height: 1.2; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { color: #fff; filter: brightness(1.05); }
.btn-danger { color: var(--red); border-color: var(--red-bg); }
.btn-danger:hover { color: var(--red); border-color: var(--red); }
.btn.active { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }

.segmented { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg-btn { flex: 1; padding: 8px; border: 0; background: var(--white); font-size: 12.5px; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border); }
.seg-btn.active { background: var(--primary); color: #fff; }

.field-error { color: var(--red); font-size: 12px; }

/* ---------------------------------------------------------------------- */
/* Fix 2 (2026-09 web-report-ux): court/judge/nationality combobox --      */
/* one text input + a popup listbox, replacing the old filter-input +      */
/* <select> pair. Reuses the shared `.field`/`label`/input styling above.  */
/* ---------------------------------------------------------------------- */

.combobox-field { position: relative; }
.combobox { position: relative; }
.combobox-input[disabled] { background: var(--bg); color: var(--text3); }
.combobox-listbox {
  list-style: none; margin: 2px 0 0; padding: 4px;
  position: absolute; left: 0; right: 0; top: 100%; z-index: 25;
  max-height: 232px; overflow-y: auto; /* ~8 rows visible, per spec */
  background: var(--white); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.combobox-listbox[hidden] { display: none; }
.combobox-option { padding: 7px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.combobox-option.is-highlighted { background: var(--primary-bg); color: var(--primary); }
.combobox-option.is-selected { font-weight: 700; }
.combobox-option.combobox-empty { color: var(--text3); cursor: default; font-style: italic; }

/* ---------------------------------------------------------------------- */
/* Fix 1 (2026-09 web-report-ux): the Presets tab's per-preset description */
/* card, and the preview pane's persistent "you're looking at a sample"    */
/* banner.                                                                 */
/* ---------------------------------------------------------------------- */

.preset-description-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 12px; margin-bottom: 14px; background: var(--bg);
}
.preset-description-card h4 { margin: 0 0 4px; font-size: 13px; }
.preset-desc-purpose { font-size: 12.5px; margin: 0 0 8px; }
.preset-desc-meta { font-size: 12px; color: var(--text2); margin: 0 0 2px; }
.preset-desc-chapters-heading { font-size: 11.5px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .3px; margin: 10px 0 4px; }
.preset-desc-chapters { margin: 0 0 10px; padding-left: 18px; font-size: 12.5px; }
.preset-desc-chapters li { margin: 2px 0; }

.sample-banner[hidden] { display: none; }
.sample-banner-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: #fff7ed; border-bottom: 1px solid #fed7aa; color: #9a3412;
}
.sample-banner-text { font-size: 13px; font-weight: 600; }

/* ---------------------------------------------------------------------- */
/* Client tab. */
/* ---------------------------------------------------------------------- */

.client-list { list-style: none; margin: 0; padding: 0; }
.client-row { display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }
.client-row.active { border-color: var(--primary); background: var(--primary-bg); }
.client-row-name { flex: 1; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------------- */
/* Chapters tab. */
/* ---------------------------------------------------------------------- */

.chapter-list { list-style: none; margin: 0 0 8px; padding: 0; }
.chapter-row { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
.chapter-row.off { opacity: .85; }
.chapter-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chapter-row-head .row-check { margin: 0; flex: 1; }
.chapter-row-actions { display: flex; gap: 4px; align-items: center; white-space: nowrap; min-width: 0; }
.chapter-row-actions .muted-note { white-space: normal; font-size: 12px; color: var(--text3); }
.block-list { list-style: none; margin: 6px 0 0 24px; padding: 0; }
.block-list .row-check { font-weight: 400; margin: 4px 0; font-size: 12.5px; }

/* ---------------------------------------------------------------------- */
/* Windows & comparators tab. */
/* ---------------------------------------------------------------------- */

.window-row { margin-bottom: 12px; }
.window-controls { display: flex; gap: 6px; align-items: center; }
.window-controls select.window-kind { flex: 1.3; }
.window-controls input.window-n { width: 64px; }
.window-unit { font-size: 12px; color: var(--text2); white-space: nowrap; }
.comparator-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.comparator-add label { flex-basis: 100%; font-size: 12.5px; font-weight: 600; }
.comparator-add input[type=text] { flex: 1; min-width: 100px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; }
.comparator-add select { flex: 2; min-width: 120px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; }
.comparator-list { list-style: none; margin: 0; padding: 0; }
.comparator-list li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid var(--border-light); }

/* ---------------------------------------------------------------------- */
/* Presets tab. */
/* ---------------------------------------------------------------------- */

.preset-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.preset-list { list-style: none; margin: 0; padding: 0; }
.preset-row { display: flex; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--border-light); }
.preset-name { flex: 1; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preset-save-row, .preset-io-row { display: flex; gap: 6px; align-items: center; margin-top: 10px; }
.preset-save-row input { flex: 1; padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; }
.danger-zone { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border-light); }

/* ---------------------------------------------------------------------- */
/* Preview pane. */
/* ---------------------------------------------------------------------- */

#preview-toolbar .preview-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--white); border-bottom: 1px solid var(--border);
}
.pager { display: flex; align-items: center; gap: 8px; }
.pager-label { font-size: 13px; font-weight: 600; min-width: 90px; text-align: center; }
.page-count-line { font-size: 12.5px; color: var(--text2); }
.load-failed-note { flex-basis: 100%; font-size: 11.5px; color: #b91c1c; }

.progress-list { padding: 8px 16px; background: var(--white); border-bottom: 1px solid var(--border); max-height: 140px; overflow-y: auto; }
.progress-list h3 { margin: 0 0 6px; }
.progress-list ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 12px; }
.progress-list li { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; padding: 1px 0; }
.leg-label { color: var(--text2); }
.leg-ms { color: var(--text3); }
.leg-failed .leg-label { color: var(--red); }
.leg-note { display: none; } /* shown via title tooltip instead of cluttering the grid */
.progress-list li.leg-failed { position: relative; }

.preview-pages { flex: 1; overflow: auto; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
/* Fix round 1 (reviewer finding 1): scaling lives ENTIRELY in ui/preview.js's
   inline `transform: scale(0.9)` + explicit width/height -- this rule used
   to ALSO set `zoom: 0.9` here, which compounded with the inline transform
   to a real 0.81 in Chromium/Safari (both apply) and did nothing in
   Firefox (no `zoom` support) -- browser-dependent and wrong almost
   everywhere. Keep exactly one mechanism. */
/* `flex-shrink: 0` is load-bearing, not decoration: `.preview-pages` is a
   column flex container with `overflow: auto` (scroll, don't compress),
   but a flex ITEM's `overflow: hidden` (added above, this fix round --
   the rounding safety net for the scaled-box sizing) makes its CSS
   "automatic minimum size" resolve to 0 instead of its content size --
   with 33 items whose combined declared height vastly exceeds the
   container's available space, the default `flex-shrink: 1` then
   compressed every page down to 0px height (verified live: computed
   height was literally "0px", rendering nothing). `flex-shrink: 0` opts
   every page frame out of that shrink entirely, so `.preview-pages`'
   `overflow: auto` is what handles the excess height, exactly as
   intended. */
.preview-page-frame { box-shadow: 0 2px 10px rgba(0,0,0,.15); flex-shrink: 0; }
.preview-empty-note, .preview-error { color: var(--text2); font-size: 13px; padding: 40px; text-align: center; }
.preview-error { color: var(--red); }

/* ---------------------------------------------------------------------- */
/* Letterhead dialog. */
/* ---------------------------------------------------------------------- */

.letterhead-dialog[hidden] { display: none; }
.letterhead-dialog { position: fixed; inset: 0; z-index: 100; }
.dialog-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.dialog-box {
  position: relative; max-width: 420px; margin: 8vh auto 0; background: var(--white);
  border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.25); padding: 20px;
  max-height: 82vh; overflow-y: auto;
}
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.lh-logo-preview { display: block; max-width: 160px; max-height: 60px; margin-bottom: 8px; object-fit: contain; }

/* ---------------------------------------------------------------------- */
/* Tablet: usable, stacked single column (ruling 2). */
/* ---------------------------------------------------------------------- */

/* Tablet (768-1023px): the drawer takes a narrower slice so the pages keep
   most of the width; the tab rail stays vertical. */
@media (min-width: 768px) and (max-width: 1023px) {
  .drawer.open { width: 320px; }
  .drawer .tabs { width: 96px; }
}

/* --- Phase 2: account, credits, checkout (accounts + Stripe) ------------- */
.topbar-account { display: flex; align-items: center; }
.account-bar { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
/* The client card is 460px wide: the account bar gets its own line under the
 * card's home/saved/settings row instead of squeezing five controls into it. */
.client-card .card-head-right { flex-wrap: wrap; justify-content: flex-end; }
.client-card .card-head-right .account-bar { flex-basis: 100%; order: 10; margin-top: 6px; justify-content: flex-end; }
.client-card .account-email { max-width: 240px; }
.account-bar .account-balance, .account-bar .btn { white-space: nowrap; }
.account-exports { display: flex; flex-direction: column; gap: 8px; }
.account-export { padding: 6px 0; border-bottom: 1px solid var(--border-light); }
.account-export-line1 { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; }
.account-export-date { color: var(--muted); white-space: nowrap; }
.account-export-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-export-line2 { margin: 2px 0 6px; }
.account-export-open { margin-top: 2px; }
.panel-section { margin-bottom: 18px; }
.panel-title { font-size: 13px; font-weight: 700; margin: 0 0 8px; }
.account-balance-lg { font-size: 20px; font-weight: 800; }
.account-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.account-table td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.account-email { color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-balance { font-weight: 600; }
.account-dialog-box .field input[type=email] {
  width: 100%; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px;
  font-size: 13.5px; background: var(--white); color: var(--ink); font-family: inherit;
}
.account-sent-note { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }
.account-error { margin-top: 10px; font-size: 12.5px; color: #B91C1C; }
.buy-packs { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.buy-pack { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.buy-pack-label { font-size: 13.5px; }
.buy-best { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 600; vertical-align: 1px; }
.export-credit-line { font-size: 12px; color: var(--muted); padding: 6px 10px; border-bottom: 1px solid var(--border-light); margin-bottom: 4px; }
button.export-credit-line { color: var(--primary); cursor: pointer; text-align: left; width: 100%; background: none; border: none; border-bottom: 1px solid var(--border-light); }
button.export-credit-line:hover { background: var(--bg); }
.app-notice {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px);
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-size: 13px; box-shadow: 0 8px 30px rgba(0,0,0,.3); z-index: 200;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.app-notice.show { opacity: 1; transform: translateX(-50%) translateY(0); }