/* WorkBuilt Trade Library — brand tokens (navy / orange / gold, Playfair Display + Inter) */
:root {
  --navy: #1B2A4A; --orange: #C75B00; --gold: #C9A96E;
  --bg: #f4f5f8; --panel: #ffffff; --fg: #1B2A4A; --muted: #5a6577; --line: #dde1e8; --soft: #eef1f6;
  --accent: #C75B00; --accent-ink: #ffffff; --accent-soft: #fbeee3;
  --mark: #ffe7a3; --mark-ink: #1B2A4A; --ok: #1f7a4d; --warn: #9a5b00; --err: #b42318;
  --elec: #b7791f; --plumb: #2563a8; --hvac: #0f7f78; --roof: #9b3b2a;
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, monospace;
  --radius: 10px; --shadow: 0 1px 2px rgba(27,42,74,.06), 0 8px 24px rgba(27,42,74,.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1626; --panel: #172238; --fg: #e8ecf3; --muted: #9ba7bb; --line: #26334d; --soft: #1d2a44;
    --accent: #ff8a3d; --accent-ink: #10182a; --accent-soft: #3a2615;
    --mark: #6b5310; --mark-ink: #fff6d6; --ok: #4cc38a; --warn: #f0b45a; --err: #ff8a80;
    --elec: #e0a83a; --plumb: #6aa5e8; --hvac: #3cc0b5; --roof: #e07a64; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font: 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0; text-wrap: balance; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 28px; } }

/* top bar */
.bar { background: var(--navy); color: #fff; padding-top: env(safe-area-inset-top, 0px); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.brand { display: flex; align-items: baseline; gap: 10px; color: #fff; text-decoration: none; }
.brand b { font: 700 21px var(--display); letter-spacing: .01em; }
.brand span { font: 600 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.bar nav { display: flex; gap: 6px; align-items: center; }
.bar nav a, .bar nav button { color: #dfe5f0; text-decoration: none; background: none; border: 0; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.bar nav a:hover, .bar nav button:hover { background: rgba(255,255,255,.08); color: #fff; }

/* buttons + fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: 12px 20px; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.06); }
.btn[disabled] { opacity: .55; cursor: wait; }
.btn.ghost { background: transparent; color: var(--fg); border: 1.5px solid var(--line); }
.btn.small { padding: 7px 12px; font-size: 14px; }
.field { width: 100%; border: 1.5px solid var(--line); background: var(--panel); border-radius: 8px; padding: 12px 14px; }
.field:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
label.lbl { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.msg { font-size: 14px; margin-top: 10px; }
.msg.ok { color: var(--ok); } .msg.err { color: var(--err); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.eyebrow { font: 600 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--muted); }
.tag { display: inline-block; font: 600 11px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--c, var(--muted)); border: 1px solid currentColor; border-radius: 4px; padding: 0 6px; line-height: 18px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- landing ---------- */
.hero { background: var(--navy); color: #fff; padding-block: 48px 64px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }
.hero h1 { font-size: clamp(34px, 5.4vw, 56px); }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero p.lead { font-size: 18px; color: #d6dceb; max-width: 54ch; margin: 18px 0 0; }
.demo { background: #fff; color: var(--navy); border-radius: 12px; padding: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
.demo .q { font-weight: 600; border: 1.5px solid #dde1e8; border-radius: 8px; padding: 10px 12px; }
.demo .a { font-size: 14.5px; margin-top: 12px; line-height: 1.6; }
.demo .cite { display: inline-block; background: #fbeee3; color: #C75B00; font: 700 11px var(--body); border-radius: 4px; padding: 0 5px; margin-left: 2px; }
.demo .src { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #dde1e8; font-size: 12.5px; color: #5a6577; }
.signin { padding: 22px; color: var(--fg); }
.signin h2 { font-size: 24px; margin-bottom: 6px; }
.signin form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.section { padding-block: 56px; }
.section h2 { font-size: clamp(26px, 3.2vw, 34px); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; }
@media (max-width: 860px) { .grid3 { grid-template-columns: minmax(0, 1fr); } }
.feature { padding: 20px; }
.feature h3 { font-size: 20px; margin-bottom: 6px; }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 24px; }
.book { padding: 14px 16px; border-left: 4px solid var(--c); }
.book b { display: block; font-weight: 600; margin-top: 6px; }
.book small { color: var(--muted); }
.footer { border-top: 1px solid var(--line); padding-block: 28px 40px; font-size: 13px; color: var(--muted); }

/* ---------- app ---------- */
.askband { background: var(--navy); padding-block: 22px 18px; }
.askform { display: flex; gap: 10px; }
.askform .field { font-size: 18px; padding: 14px 16px; border: 0; }
.askform .btn { padding-inline: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; align-items: center; }
.chip { border: 1.5px solid rgba(255,255,255,.25); background: transparent; color: #e8ecf3; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
.chip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--c); }
.chip[aria-pressed="true"] { background: #fff; color: var(--navy); border-color: #fff; }
.tries { color: #b9c3d6; font-size: 13px; margin-left: 8px; }
.tries button { background: none; border: 0; color: var(--gold); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; padding: 2px 4px; font-size: 13px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-block: 22px 60px; }
@media (min-width: 1000px) { .layout.with-viewer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.answer { padding: 20px 22px; }
.answer .head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.answer h2 { font-size: 22px; }
.answer .body { font-size: 16.5px; }
.answer .body p { margin: 0 0 10px; }
.answer .body ol { margin: 4px 0 12px; padding-left: 22px; }
.answer .body li { margin-bottom: 6px; }
.answer .safety { background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 10px 12px; border-radius: 6px; margin: 10px 0; }
.cite { display: inline-flex; margin-right: 0; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 5px; margin: 0 1px; border-radius: 5px; border: 0; background: var(--accent-soft); color: var(--accent); font: 700 11.5px var(--body); cursor: pointer; vertical-align: 1px; }
.cite:hover { background: var(--accent); color: var(--accent-ink); }
.cursor { display: inline-block; width: 8px; height: 1.05em; background: var(--accent); vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }
.notice { font-size: 14px; color: var(--muted); margin-top: 8px; }
.notice.warn { color: var(--warn); }
.sources { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; }
.srow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; background: var(--soft); border: 1px solid transparent; border-radius: 8px; padding: 8px 10px; cursor: pointer; width: 100%; }
.srow:hover, .srow.active { border-color: var(--accent); }
.srow .n { font: 700 12px var(--body); color: var(--accent); }
.srow .t { min-width: 0; font-size: 14px; }
.srow .t b { font-weight: 600; }
.srow .t span { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow .pg { font: 600 12px var(--body); color: var(--muted); }
.results h2 { font-size: 20px; margin: 26px 0 10px; }
.hit { padding: 14px 16px; border-left: 4px solid var(--c); margin-bottom: 10px; cursor: pointer; }
.hit:hover { border-color: var(--line) var(--line) var(--line) var(--accent); }
.hit .top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; }
.hit h3 { font: 600 15px var(--body); }
.hit .meta { font-size: 12.5px; color: var(--muted); }
.hit p { margin: 6px 0 0; font-size: 14.5px; overflow-wrap: anywhere; }
.hit .partial { font: 600 11px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
mark { background: var(--mark); color: var(--mark-ink); border-radius: 3px; padding: 0 2px; }
.empty { padding: 26px; text-align: center; color: var(--muted); }
.skeleton { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--soft), var(--line), var(--soft)); background-size: 200% 100%; animation: shimmer 1.2s infinite; margin: 8px 0; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* browse */
.browse h2 { font-size: 20px; margin: 4px 0 12px; }
.browse details { border-top: 1px solid var(--line); padding-block: 10px; }
.browse summary { cursor: pointer; display: flex; gap: 10px; align-items: flex-start; list-style: none; }
.browse summary::-webkit-details-marker { display: none; }
.browse summary b { font-weight: 600; display: block; }
.browse summary small { color: var(--muted); }
.browse ul { list-style: none; margin: 8px 0 0; padding: 0; }
.browse li button { width: 100%; display: flex; justify-content: space-between; gap: 10px; background: none; border: 0; border-bottom: 1px dotted var(--line); padding: 5px 2px; text-align: left; cursor: pointer; font-size: 14px; }
.browse li button:hover { color: var(--accent); }

/* viewer */
.viewer { position: sticky; top: 12px; align-self: start; display: flex; flex-direction: column; max-height: calc(100vh - 24px); overflow: hidden; }
.viewer .vhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.viewer .vtitle { min-width: 0; font-size: 14px; }
.viewer .vtitle b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.viewer .vtitle span { color: var(--muted); font-size: 12.5px; }
.viewer .tools { display: flex; gap: 4px; align-items: center; flex: none; }
.icon { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; font-size: 16px; }
.icon:hover { border-color: var(--accent); }
.pageno { font: 600 13px var(--body); min-width: 72px; text-align: center; }
.vbody { overflow: auto; background: var(--soft); padding: 12px; flex: 1; }
.pagebox { position: relative; margin: 0 auto; background: #fff; box-shadow: var(--shadow); }
.pagebox canvas { display: block; }
/* pdf.js 6 text layer (flattened from pdfjs-dist/web/pdf_viewer.css) */
.pagebox { --scale-round-x: 1px; --scale-round-y: 1px; }
.textLayer { color-scheme: only light; position: absolute; text-align: initial; inset: 0; overflow: clip; opacity: 1; line-height: 1; letter-spacing: normal; word-spacing: normal; text-size-adjust: none; -webkit-text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 2;
  --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); }
.textLayer span, .textLayer br { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; user-select: text; -webkit-user-select: text; }
.textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height)); --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.textLayer .markedContent { display: contents; }
.textLayer span[role="img"] { user-select: none; cursor: default; }
.textLayer ::selection { background: rgba(0, 0, 255, .25); color: transparent; }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
.hlLayer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hlbox { position: absolute; background: rgba(255, 186, 0, .42); border-radius: 2px; mix-blend-mode: multiply; }
.vnote { font-size: 12px; color: var(--muted); padding: 8px 12px; border-top: 1px solid var(--line); }
@media (max-width: 999px) {
  .viewer { position: fixed; inset: 0; z-index: 30; height: 100%; height: 100dvh; max-height: none; border-radius: 0; border: 0; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .viewer .vhead { flex-wrap: wrap; }
  .viewer .vtitle { flex: 1 1 100%; }
  .viewer .tools { flex: 1 1 100%; justify-content: space-between; }
}

/* account / admin */
.narrow { max-width: 720px; }
.stack { display: grid; gap: 18px; padding-block: 28px 60px; }
.panel { padding: 22px; }
.panel h2 { font-size: 22px; margin-bottom: 8px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--muted)); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.stat { padding: 14px 16px; }
.stat b { display: block; font: 700 28px var(--display); }
.stat span { font-size: 13px; color: var(--muted); }
.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
code.codebox { font: 600 14px var(--mono); background: var(--soft); padding: 3px 7px; border-radius: 5px; }
.formgrid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; }
@media (max-width: 700px) { .formgrid { grid-template-columns: minmax(0, 1fr); } }