/* ============================================================ Paperglean — design system v2 "Reading Room" Warm paper ground, white panels, deep green-charcoal sidebar, pine-green primary, parchment-gold evidence accents. Type: Fraunces (display serif) · Public Sans (UI) · Spline Sans Mono. Class names consumed by review.js / template_editor.js are preserved. ============================================================ */ :root { --paper: #F4F2EB; --surface: #FFFFFF; --surface-2: #FAF8F2; --ink: #211F19; --ink-2: #4C4839; --muted: #7A7462; --line: #E4E0D2; --line-2: #D3CEBC; --brand: #2B614A; --brand-strong: #214C3A; --brand-soft: #E8EFE7; --brand-line: #C4D5C6; --brand-ink: #1D4634; --gold: #8A6A1B; --gold-soft: #F7EFD9; --gold-line: #E5D29F; --warn: #92560F; --warn-soft: #FBF1DC; --warn-line: #EBD3A0; --danger: #A93B2E; --danger-soft: #F9ECE8; --danger-line: #ECC9C0; --ok: #2B614A; --ok-soft: #E5EFE6; --ok-line: #BCD6C0; --sidebar: #20251F; --sidebar-2: #2A302A; --sidebar-ink: #EFEDE0; --sidebar-dim: #A6A48F; --focus: rgba(43, 97, 74, .25); --radius: 10px; --radius-sm: 7px; --shadow: 0 1px 2px rgba(33, 31, 25, .05); --shadow-md: 0 10px 30px -12px rgba(33, 31, 25, .22); --font-ui: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --sidebar-w: 248px; } *, *::before, *::after { box-sizing: border-box } html, body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.55 var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Establish a stacking context on so the env-glow's z-index:-1 layer paints above the body's (opaque) background but still behind page content. Without this the negative-z fixed element drops to the root and the body fill hides it. isolation also scopes the glow's mix-blend-mode to the body. */ body { isolation: isolate; } a { color: var(--brand-strong); text-decoration: none } a:hover { text-decoration: underline } code { font-family: var(--font-mono); font-size: .92em } ::selection { background: #DCE9DD } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0 } /* Local-dev only: a small branch banner (gated server-side on LITX_DEV, so it never ships to production). A pill hanging from the top-centre, floating above the layout so it disturbs nothing. */ .dev-branch-banner { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 400; display: inline-flex; align-items: center; gap: 7px; max-width: 60vw; padding: 3px 12px 4px; border: 1px solid var(--gold-line); border-top: none; border-radius: 0 0 8px 8px; background: var(--gold-soft); color: var(--gold); font: 600 12px/1.3 var(--font-mono); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: var(--shadow); pointer-events: none; /* never intercept clicks on the content beneath */ } .dev-branch-banner .dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } /* Non-production environment indicator: a soft glow at the top of the window so reviewers can tell at a glance which env they're looking at. Production renders no glow (the template gate omits the div); the gate's list also acts as a safelist, skipping any unknown environment value. Colors: local = purple. */ .env-glow { position: fixed; top: 0; left: 0; right: 0; height: 220px; pointer-events: none; /* purely decorative — never intercept clicks */ z-index: -1; /* above the body background paint, behind page content */ opacity: .4; /* one knob to soften every color glow */ mix-blend-mode: multiply; /* tint the light parchment background rather than sit as a flat overlay */ } .env-glow--local { background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(168, 85, 247, 0.85) 0%, rgba(139, 92, 246, 0.45) 35%, rgba(139, 92, 246, 0) 75%); } .env-glow--preview { background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(45, 212, 191, 0.85) 0%, rgba(20, 184, 166, 0.45) 35%, rgba(20, 184, 166, 0) 75%); } .env-glow--staging { background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(251, 146, 60, 0.9) 0%, rgba(249, 115, 22, 0.5) 35%, rgba(249, 115, 22, 0) 75%); } /* ============================================================ App shell — fixed sidebar + fluid content ============================================================ */ .shell { display: flex; min-height: 100vh } .sidebar { flex: 0 0 var(--sidebar-w); width: var(--sidebar-w); background: var(--sidebar); color: var(--sidebar-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; } .side-brand { padding: 22px 20px 16px; } .side-brand a { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: .2px; color: var(--sidebar-ink); text-decoration: none; } .side-brand a em { font-style: italic; color: #B9CDA9 } .side-brand a:hover { text-decoration: none } .side-project { margin: 0 14px 10px; padding: 12px; background: var(--sidebar-2); border-radius: var(--radius-sm); } .side-project label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; color: var(--sidebar-dim); margin-bottom: 6px; } .side-project .picker { position: relative } .side-project .picker-face { display: block; font: 600 13px/1.35 var(--font-ui); color: var(--sidebar-ink); border: 1px solid #454B40; border-radius: 6px; padding: 6px 26px 6px 9px; overflow-wrap: anywhere; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A6A48F' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; } .side-project .picker-face.is-placeholder { color: var(--sidebar-dim) } .side-project .picker select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; cursor: pointer; appearance: none; } .side-project .picker:focus-within .picker-face { border-color: #6F8A6B; box-shadow: 0 0 0 3px rgba(111,138,107,.25) } .side-project select option { color: var(--ink); background: #fff } .side-project .allproj { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--sidebar-dim); } .side-project .allproj:hover { color: var(--sidebar-ink); text-decoration: none } .side-nav { padding: 6px 14px; flex: 0 0 auto } .side-heading { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; color: var(--sidebar-dim); margin: 14px 8px 5px; } .side-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 1px 0; border-radius: var(--radius-sm); color: var(--sidebar-dim); font-weight: 500; font-size: 13.5px; transition: background .12s, color .12s; } .side-nav a svg { flex: 0 0 auto; opacity: .8 } .side-nav a:hover { color: var(--sidebar-ink); background: var(--sidebar-2); text-decoration: none } .side-nav a.active { color: #FDFCF6; background: var(--brand); } .side-nav a.active svg { opacity: 1 } .side-foot { margin-top: auto; padding: 14px; border-top: 1px solid #343A33; display: flex; flex-direction: column; gap: 10px; } .side-reviewer label { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .9px; color: var(--sidebar-dim); margin: 0 2px 5px; } .side-reviewer select { width: 100%; font: 500 12.5px/1.3 var(--font-ui); color: var(--sidebar-ink); background: var(--sidebar-2); border: 1px solid #454B40; border-radius: 6px; padding: 6px 26px 6px 9px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A6A48F' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; } .side-reviewer select:focus { outline: none; border-color: #6F8A6B } .side-reviewer select option { color: var(--ink); background: #fff } .side-credits { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid #454B40; border-radius: var(--radius-sm); color: var(--sidebar-dim); font-size: 12.5px; } .side-credits b { color: var(--sidebar-ink); font-size: 13.5px; font-weight: 700 } .side-credits:hover { text-decoration: none; border-color: #6F8A6B; color: var(--sidebar-ink) } .side-user { display: flex; align-items: center; gap: 4px } .side-user .user-link { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; padding: 4px 6px; margin: -4px 0 -4px -6px; border-radius: var(--radius-sm); } .side-user .user-link:hover { background: var(--sidebar-2); text-decoration: none } .side-user .avatar { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: var(--brand); color: #FDFCF6; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; text-transform: uppercase; } .side-user .who { min-width: 0; flex: 1; display: flex; flex-direction: column } .side-user .who .name { color: var(--sidebar-ink); font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-user .who .hint { font-size: 11.5px; color: var(--sidebar-dim) } .side-user .user-link:hover .hint { color: var(--sidebar-ink) } .side-user .signout { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--sidebar-dim); } .side-user .signout:hover { background: var(--sidebar-2); color: var(--sidebar-ink) } /* content column */ .content { flex: 1; min-width: 0; display: flex; flex-direction: column } main { width: 100%; max-width: 1160px; margin: 0 auto; padding: 28px 32px 64px } .review main { max-width: none } /* mobile top bar (hidden on desktop) */ .mobilebar { display: none; align-items: center; gap: 12px; padding: 10px 14px; background: var(--sidebar); color: var(--sidebar-ink); position: sticky; top: 0; z-index: 60; } .mobilebar .mbrand { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--sidebar-ink); } .mobilebar .mbrand:hover { text-decoration: none } .mobilebar .mbrand em { font-style: italic; color: #B9CDA9 } .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: transparent; border: 1px solid #454B40; border-radius: 8px; color: var(--sidebar-ink); cursor: pointer; } .scrim { display: none; position: fixed; inset: 0; background: rgba(24, 26, 22, .5); z-index: 90; } @media (max-width: 960px) { .mobilebar { display: flex } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100dvh; z-index: 100; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-md); } body.nav-open .sidebar { transform: translateX(0) } body.nav-open .scrim { display: block } main { padding: 20px 16px 56px } } /* ============================================================ Typography & page headers ============================================================ */ h1 { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: .1px; line-height: 1.25; margin: 0 0 4px; } h2 { font-size: 12px; font-weight: 700; margin: 28px 0 10px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 1px; } .sub { color: var(--muted); margin: 0 0 20px; font-size: 13.5px } .muted { color: var(--muted) } .small { font-size: 12px } .mono { font-family: var(--font-mono) } .page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center } .eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px; color: var(--brand); margin: 0 0 4px; } .backlink { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px } .backlink:hover { color: var(--ink) } /* ============================================================ Cards, panels, helpers ============================================================ */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .panel > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-weight: 700; font-size: 13px; } .panel > header .muted { font-weight: 400 } .row { display: flex; gap: 12px; align-items: center } .flex { display: flex; gap: 10px; flex-wrap: wrap; align-items: center } .spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap } .table-scroll { overflow-x: auto } /* Extraction comparison: AI original | per-reviewer stance | final adjudicated */ table.cmp { font-size: .9em } table.cmp th, table.cmp td { padding: 6px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top } table.cmp thead th { background: var(--surface-2); font-weight: 600; white-space: nowrap } table.cmp .cmp-field { background: var(--surface-2); font-weight: 600; white-space: nowrap } table.cmp .cmp-ai { color: var(--muted) } table.cmp .cmp-changed { background: var(--warn-soft) } table.cmp .cmp-final-changed { background: var(--ok-soft) } table.cmp .cmp-final-conflict { background: var(--danger-soft) } table.cmp .cmp-absent { color: var(--muted); text-align: center } .cmp-vmark { color: var(--ok) } .cmp-pill { padding: 0 6px; border-radius: 4px } .cmp-pill.cmp-changed { background: var(--warn-soft) } .cmp-pill.cmp-endorsed { color: var(--muted) } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--brand); color: #FDFCF6; border: 1px solid var(--brand); padding: 8px 16px; border-radius: var(--radius-sm); font: 600 13.5px/1.2 var(--font-ui); cursor: pointer; transition: background .12s, border-color .12s; text-decoration: none; white-space: nowrap; } .btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); text-decoration: none; color: #FDFCF6 } .btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px } .btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); } .btn.ghost:hover { background: var(--surface-2); border-color: var(--muted); color: var(--ink) } .btn.sm { padding: 5px 11px; font-size: 12.5px } .btn.danger { background: var(--danger); border-color: var(--danger); color: #fff } .btn.danger:hover { background: #8E3024; border-color: #8E3024 } .btn.ghost.danger { background: var(--surface); color: var(--danger); border-color: var(--danger-line) } .btn.ghost.danger:hover { background: var(--danger-soft) } .btn:disabled { opacity: .45; cursor: default } /* ============================================================ Tables ============================================================ */ table { width: 100%; border-collapse: collapse; background: var(--surface) } th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top } th { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); font-weight: 700; background: var(--surface-2); white-space: nowrap; } tr:last-child td { border-bottom: none } tbody tr:hover td { background: var(--surface-2) } /* ============================================================ Badges & status dots ============================================================ */ .badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; } .badge.high { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok) } .badge.medium { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn) } .badge.low { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger) } .badge.stage { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); text-transform: capitalize } .badge.flag { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn) } .badge.sec { background: #EEE9F6; border-color: #D8CCEC; color: #5B3E8E } .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } .dot.run { background: #D99A2B; animation: pulse 1s infinite } .dot.ok { background: var(--ok) } .dot.err { background: var(--danger) } .dot.idle { background: var(--line-2) } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} } /* ============================================================ Forms ============================================================ */ input[type=text], input[type=email], input[type=password], input[type=search], textarea, select { font: inherit; color: var(--ink); } .form-group { margin-bottom: 16px } .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 5px; } .form-group input[type=email], .form-group input[type=password], .form-group input[type=text], .form-group textarea, .form-group select { width: 100%; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); font-size: 14px; transition: border-color .12s, box-shadow .12s; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus); } .form-group .hint { font-size: 12px; color: var(--muted); margin: 5px 0 0 } .form-actions { margin-top: 20px } .form-actions .btn { width: 100%; padding: 10px } /* ============================================================ Alerts, notices, toast ============================================================ */ .alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 16px; } .alert.error { background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger) } .alert.info { background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-ink) } .alert.success { background: var(--ok-soft); border: 1px solid var(--ok-line); color: var(--ok) } /* ------------------------------------------------------------------ "Needs attention" advisories (Overview) — live, state-derived blockers/warnings/nudges, each with a cause and a concrete action. ------------------------------------------------------------------ */ .advisories-h { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 10px; font-weight: 600; } .advisory { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); margin-bottom: 10px; } .advisory:last-child { margin-bottom: 0 } .advisory-icon { font-size: 17px; line-height: 1.3; flex: none } .advisory-body { flex: 1; min-width: 0 } .advisory-body b { display: block; margin-bottom: 2px } .advisory-body p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.45 } .advisory-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: none; align-self: center; } .advisory.blocker { background: var(--danger-soft); border-color: var(--danger-line); border-left: 3px solid var(--danger) } .advisory.warning { background: var(--warn-soft); border-color: var(--warn-line); border-left: 3px solid var(--warn) } .advisory.info { background: var(--brand-soft); border-color: var(--brand-line); border-left: 3px solid var(--brand) } /* warning notice (quality gate, stale template, reduced mode) */ .reasons { background: var(--warn-soft); border: 1px solid var(--warn-line); border-left: 3px solid var(--warn); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12.5px; color: var(--warn); margin-bottom: 12px; } .reasons code { background: rgba(146, 86, 15, .1); padding: 1px 5px; border-radius: 4px } .toast { position: fixed; bottom: 22px; right: 22px; background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: var(--radius-sm); font-size: 13.5px; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; z-index: 200; pointer-events: none; max-width: min(420px, calc(100vw - 44px)); } .toast.show { opacity: 1; transform: none } /* ============================================================ Dashboard ============================================================ */ /* Light-themed select for content-area filters (cf. the dark sidebar ones). */ .inline-select { font: 600 12.5px/1.3 var(--font-ui); color: var(--ink); background-color: var(--surface); border: 1px solid var(--line-2); border-radius: 6px; padding: 5px 26px 5px 9px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A7462' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; } .inline-select:focus { outline: none; border-color: #6F8A6B; box-shadow: 0 0 0 3px rgba(111,138,107,.2) } .stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; } .stat .v { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.1; } .stat .l { font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .7px; margin-top: 2px } @media (max-width: 760px) { .stat-strip { grid-template-columns: repeat(2, 1fr) } } .dropzone { border: 1.5px dashed var(--line-2); border-radius: var(--radius); padding: 26px 24px; text-align: center; color: var(--muted); background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s, color .15s; margin-bottom: 18px; } .dropzone b { color: var(--ink-2) } .dropzone:hover, .dropzone.drag { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); } .dropzone:hover b, .dropzone.drag b { color: var(--brand-ink) } /* paper list — filter tabs (All / To do / Done) + search + pagination */ .filter-tabs { display: flex; gap: 8px; margin-bottom: 12px; align-items: center; flex-wrap: wrap } .filter-tabs .tabbtn .cnt { font-weight: 500; opacity: .75; margin-left: 2px } .paper-search { margin-left: auto; font: inherit; font-size: 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 7px; padding: 7px 10px; min-width: 260px; } .paper-search:focus { outline: 2px solid var(--brand); outline-offset: 1px } .pager-bar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); } /* paper list */ .paper-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; grid-template-areas: "dot main side"; gap: 4px 14px; align-items: start; padding: 13px 18px; border-bottom: 1px solid var(--line); } .paper-row:last-child { border-bottom: none } .paper-row:hover { background: var(--surface-2) } .pr-dot { grid-area: dot; padding-top: 5px } .pr-main { grid-area: main; min-width: 0 } .pr-side { grid-area: side; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; } .pr-name { font-weight: 600; font-size: 14px; color: var(--ink); overflow-wrap: anywhere } .pr-name:hover { color: var(--brand-strong) } .pr-bib { font-size: 12px; color: var(--muted); margin-top: 1px; overflow-wrap: anywhere } .pr-msg { font-size: 12px; color: var(--muted); margin-top: 1px; font-style: italic } .pr-err { color: var(--danger); font-style: normal } .pr-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px } .pr-review { text-align: right; min-width: 120px } .pr-review .frac { font-size: 12px; color: var(--ink-2); font-weight: 600; white-space: nowrap } .pr-review .frac .muted { font-weight: 400 } .meter { width: 120px; height: 4px; background: var(--line); border-radius: 4px; margin-top: 5px; overflow: hidden; } .meter i { display: block; height: 100%; background: var(--brand); border-radius: 4px } .pr-actions { display: flex; gap: 6px; align-items: center } @media (max-width: 700px) { .paper-row { grid-template-columns: 16px minmax(0, 1fr); grid-template-areas: "dot main" ". side"; } .pr-side { justify-content: flex-start } .pr-review { text-align: left } } .empty-state { padding: 36px 24px; text-align: center; color: var(--muted); } .empty-state b { color: var(--ink-2) } /* exports + agreement columns */ .dash-cols { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; margin-top: 24px; } @media (max-width: 900px) { .dash-cols { grid-template-columns: 1fr } } .export-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--line); } .export-item:last-child { border-bottom: none } .export-item .eicon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; } .export-item .etext { flex: 1; min-width: 0 } .export-item .etext b { font-size: 13.5px } .export-item .etext p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted) } .export-item form { flex: 0 0 auto; align-self: center } .agree-figure { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px 6px; } .agree-figure .big { font-family: var(--font-display); font-weight: 600; font-size: 34px; line-height: 1; } .agree-meta { padding: 6px 18px 16px; display: flex; gap: 6px; flex-wrap: wrap } /* ============================================================ Review page ============================================================ */ .review-head { margin-bottom: 14px } .review-head h1 { font-size: 22px } .prov { font-size: 12.5px; color: var(--muted); margin: 3px 0 0 } .prov code { background: var(--surface-2); border: 1px solid var(--line); padding: 1px 5px; border-radius: 4px; font-size: 11px } .prov-details { margin-top: 6px } .prov-details summary { cursor: pointer; font-size: 12px; color: var(--muted); -webkit-user-select: none; user-select: none; width: fit-content; } .prov-details summary:hover { color: var(--ink) } .review-wrap { display: grid; grid-template-columns: minmax(420px, 1fr) 14px minmax(440px, 46%); gap: 0; align-items: start; } .viewer { position: sticky; top: 16px; height: calc(100vh - 32px); display: flex; flex-direction: column; margin-bottom: 0; } .viewer .vhead { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap } .viewer .vbody { flex: 1; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); } .viewer img { width: 100%; display: block } .split-handle { position: sticky; top: 16px; height: calc(100vh - 32px); align-self: start; display: flex; align-items: center; justify-content: center; cursor: col-resize; touch-action: none; -webkit-user-select: none; user-select: none; } .split-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--line-2); transform: translateX(-50%); } .split-handle .grip { position: relative; width: 5px; height: 44px; border-radius: 6px; background: var(--line-2); transition: background .15s, box-shadow .15s; } .split-handle:hover .grip, .split-handle.dragging .grip, .split-handle:focus-visible .grip { background: var(--brand); box-shadow: 0 0 0 4px var(--focus); } .split-handle:focus-visible { outline: none } body.resizing-x { cursor: col-resize; -webkit-user-select: none; user-select: none } @media (max-width: 1100px) { .review-wrap { display: block } .split-handle { display: none } .viewer { position: static; height: 76vh; margin-top: 18px; } } /* ---- PDF overlay ---- */ .pdfwrap { position: relative; line-height: 0 } .hl-layer { position: absolute; inset: 0; pointer-events: none } .pdfhl { position: absolute; background: rgba(250, 204, 21, .45); mix-blend-mode: multiply; border-radius: 2px; box-shadow: 0 0 0 1px rgba(202, 138, 4, .5); } /* figure-evidence highlight: outline the whole figure region (gold, matching the evidence chips), not a text span — lighter fill since it covers a large area */ .pdfhl.fig { background: rgba(250, 204, 21, .12); box-shadow: 0 0 0 2px rgba(202, 138, 4, .7); } /* Cited quote couldn't be matched in the PDF text layer (e.g. image-only scan) */ .pdfmiss { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); max-width: 80%; padding: 7px 12px; background: #FFFBEB; border: 1px solid #FACC15; border-radius: 8px; color: #713F12; font: 13px/1.45 var(--sans, system-ui, sans-serif); box-shadow: 0 2px 8px rgba(0,0,0,.12); } /* ---- OCR text view ---- */ .ocrmd { padding: 22px 26px; color: #2A2820; font: 15.5px/1.75 "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, Cambria, "Times New Roman", serif; overflow-wrap: break-word; } .ocrmd > :first-child { margin-top: 0 } .ocrmd > :last-child { margin-bottom: 0 } .ocrmd.raw { max-width: none; white-space: pre-wrap; color: var(--ink); font: 13px/1.6 var(--font-mono); } .ocrmd.raw .ocrfig { white-space: normal } .ocrmd p, .ocrmd li { text-align: justify; -webkit-hyphens: auto; hyphens: auto } .ocrmd p { margin: 0 0 .85em } .ocrmd h1,.ocrmd h2,.ocrmd h3,.ocrmd h4,.ocrmd h5,.ocrmd h6 { font-family: var(--font-ui); line-height: 1.3; margin: 1.3em 0 .45em; color: var(--ink); font-weight: 700; letter-spacing: 0; text-transform: none; } .ocrmd h1 { font-size: 1.5em } .ocrmd h2 { font-size: 1.28em } .ocrmd h3 { font-size: 1.12em } .ocrmd h4 { font-size: 1em; color: var(--brand-strong); text-transform: uppercase; letter-spacing: .04em } .ocrmd h5, .ocrmd h6 { font-size: .95em; color: var(--muted) } .ocrmd ul,.ocrmd ol { margin: 0 0 .85em; padding-left: 1.5em } .ocrmd li { margin: .15em 0 } .ocrmd blockquote { margin: 0 0 .85em; padding: .15em 0 .15em 1em; border-left: 3px solid var(--line-2); color: var(--muted) } .ocrmd hr { border: none; border-top: 1px solid var(--line); margin: 1.4em 0 } .ocrmd a { color: var(--brand-strong); text-decoration: underline } .ocrmd code { font: .86em/1.4 var(--font-mono); background: var(--surface-2); border: 1px solid var(--line); padding: .08em .35em; border-radius: 4px } .ocrtwrap { overflow-x: auto; margin: 0 0 1em } table.ocrtable { border-collapse: collapse; width: auto; max-width: 100%; background: var(--surface); font-size: .9em } table.ocrtable th, table.ocrtable td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; vertical-align: top } table.ocrtable th { background: var(--surface-2); font-weight: 700; white-space: nowrap; font-family: var(--font-ui); font-size: .92em; letter-spacing: 0; text-transform: none; color: var(--ink) } table.ocrtable tr:hover td { background: var(--surface-2) } .ocrmd mark.hl { background: #FDE88A; color: inherit; border-radius: 2px; box-shadow: 0 0 0 2px #FDE88A; scroll-margin: 80px } .ocrmd mark.sx { background: #C8DCF2; color: inherit; border-radius: 2px; box-shadow: 0 0 0 2px #C8DCF2; scroll-margin: 80px } .ocrfig { margin: 1em 0; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); text-align: center } .ocrfig img { max-width: 100%; height: auto; border-radius: 4px; display: block; margin: 0 auto } .ocrfig figcaption { margin-top: 6px; color: var(--muted); font-size: 11px } /* figure evidence highlighted in the OCR view — gold, matching the text marks */ .ocrfig.fighl { border-color: var(--gold-line); background: var(--gold-soft); box-shadow: 0 0 0 2px var(--gold-line); scroll-margin: 80px } /* ---- viewer controls ---- */ .tabbtn { padding: 5px 12px; border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--radius-sm); cursor: pointer; font: 600 13px/1.3 var(--font-ui); color: var(--muted); transition: .12s; } .tabbtn.on { background: var(--ink); color: var(--paper); border-color: var(--ink) } .previewtog { align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; -webkit-user-select: none; user-select: none; } .previewtog input { margin: 0; cursor: pointer; accent-color: var(--brand) } .pager { display: flex; gap: 6px; align-items: center; margin-left: auto } .pager input { width: 48px; text-align: center; padding: 4px; border: 1px solid var(--line-2); border-radius: 6px; font: inherit } .pager input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus) } /* ---- in-paper search ---- */ .vsearch { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 8px } .vsearch input { flex: 1; min-width: 0; font: inherit; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); } .vsearch input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus) } .searchcount { white-space: nowrap; flex: 0 0 auto } .searchresults { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; display: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); max-height: 46vh; overflow: auto; } .searchhit { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; cursor: pointer; border-bottom: 1px solid var(--line) } .searchhit:last-child { border-bottom: none } .searchhit:hover { background: var(--surface-2) } .searchhit .hitpage { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--brand-strong) } .searchhit .hittext { font-size: 12px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .searchhit mark { background: #C8DCF2; color: inherit; border-radius: 2px; padding: 0 1px } .searchempty { padding: 8px 10px; color: var(--muted) } /* ---- processing placeholder ---- */ .card.processing { display: flex; gap: 14px; align-items: flex-start } .processing-txt b { font-size: 15px } .spinner { flex: 0 0 auto; width: 22px; height: 22px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .75s linear infinite; margin-top: 2px; } @keyframes spin { to { transform: rotate(360deg) } } /* ---- row / field editor ---- */ .rowcard { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); } .rowcard.needs { border-color: var(--warn-line) } .rowcard.conflict { border-color: var(--danger-line) } .rowcard.verified { border-color: var(--ok-line) } .rowhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); cursor: pointer; } .rowhead .title { font-weight: 700 } .fieldgrid { padding: 6px 14px 12px } .field { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); } .field:last-child { border-bottom: none } .field label { color: var(--muted); font-size: 12px; font-weight: 600; padding-top: 7px } .field .val { display: flex; flex-direction: column; gap: 6px; min-width: 0 } .field input[type=text], .field textarea, .field select { font: inherit; padding: 6px 9px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); width: 100%; background: var(--surface); transition: border-color .1s; } .field input[type=text]:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus); } .field textarea { min-height: 46px; resize: vertical } /* Auto-growing free-text controls (review.js autogrow): start at input height, fit to content via JS, still user-draggable taller. Hidden overflow so the fitted height never shows a phantom scrollbar. */ .field textarea.autogrow { min-height: 36px; overflow: hidden } .field .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap } @media (max-width: 560px) { .field { grid-template-columns: 1fr; gap: 4px } .field label { padding-top: 0 } } /* evidence chips — parchment gold, tying to the in-page highlight colour */ .chips { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0 } .echip { font-size: 11px; background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: 20px; padding: 2px 9px; cursor: pointer; color: var(--gold); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background .1s; } .echip:hover { background: #F1E4BC } .echip.nocite { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); cursor: default } /* figure-derived evidence — same gold as text citations, distinguished by the 🖼 marker */ .corr { font-size: 11px; color: var(--brand); font-weight: 600 } .metaright { margin-left: auto; display: flex; gap: 6px; align-items: center } /* per-field verify box */ .ctlrow { display: flex; gap: 8px; align-items: flex-start } .ctlrow > input[type=text], .ctlrow > select, .ctlrow > textarea { flex: 1; width: auto; min-width: 0 } .vbox { flex: 0 0 auto; width: 38px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--line-2); background: var(--surface); color: var(--line-2); border-radius: var(--radius-sm); cursor: pointer; font-size: 19px; line-height: 1; font-weight: 800; transition: .12s; } .vbox:hover { border-color: var(--ok); color: var(--ok); background: var(--ok-soft) } .vbox.on { background: var(--ok); border-color: var(--ok); color: #fff } .vbox.on:hover { background: var(--brand-strong); border-color: var(--brand-strong) } .vbadge { font-size: 11px; font-weight: 600; color: var(--ok); background: var(--ok-soft); border: 1px solid var(--ok-line); border-radius: 20px; padding: 2px 8px } .vbadge.other { background: var(--surface-2); border-color: var(--line); color: var(--muted); font-weight: 500 } .field.verified { background: #F4F9F3 } .field.verified input[type=text], .field.verified textarea, .field.verified select { background: #F4F9F3; color: var(--brand-strong); cursor: default; border-style: dashed; } /* completion bar */ .complete-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; box-shadow: var(--shadow); } .complete-bar span { font-weight: 500 } .complete-bar.ready { border-color: var(--ok-line); background: #F4F9F3 } .complete-bar.done { border-color: var(--ok-line); background: var(--ok-soft) } /* paper-level (study-scope) panel */ .linked-panel { border-color: var(--brand-line) } .linked-panel .rowhead { background: var(--brand-soft) } .rowhead.static { cursor: default } .section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); font-weight: 700; margin: 14px 14px 0 } /* ---- smart-collapse (split-field) cards -------------------- */ /* A collapsed card gathers rows that differ only in the split field: the shared fields are edited once, the split field listed one sub-row per underlying row. */ .rowcard.collapsed .rowhead { background: var(--brand-soft) } .badge.split { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 700 } .split-row { border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 8px 14px 0; background: var(--surface-2); } .split-row .split-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px dashed var(--line); } .split-row .split-idx { min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 700; } .split-row .fieldgrid { padding: 4px 10px 8px } .split-add { margin: 10px 14px 4px } .group-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 8px; border: 1px dashed var(--brand); border-radius: var(--radius-sm); background: var(--brand-soft); } .group-expanded { border-left: 3px solid var(--brand-soft); padding-left: 4px } /* ============================================================ Projects page ============================================================ */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin-bottom: 24px } .project-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: box-shadow .15s, border-color .15s; } .project-card:hover { box-shadow: var(--shadow-md); border-color: var(--line-2) } .project-card.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow) } .project-card h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 0 0 4px } .project-card .desc { font-size: 13px; color: var(--muted); margin: 0 0 12px } .project-card .meta { font-size: 12px; color: var(--muted); display: flex; gap: 12px } .project-card .cardfoot { margin-top: auto; padding-top: 14px } /* modal */ .modal-scrim { display: none; position: fixed; inset: 0; background: rgba(24, 26, 22, .5); z-index: 120; align-items: center; justify-content: center; padding: 16px; } .modal-scrim.open { display: flex } .modal { background: var(--surface); border-radius: 14px; padding: 28px; width: 100%; max-width: 500px; max-height: calc(100dvh - 32px); overflow-y: auto; box-shadow: var(--shadow-md); } .modal h2 { margin: 0 0 18px; font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0 } .modal-scrim.open { animation: scrim-in .15s ease-out } .modal-scrim.open .modal { animation: modal-in .18s cubic-bezier(.2, .9, .3, 1.08) } @keyframes scrim-in { from { opacity: 0 } } @keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.97) } } @media (prefers-reduced-motion: reduce) { .modal-scrim.open, .modal-scrim.open .modal { animation: none } } /* Adjudication table (un-blinded tabular judging) + row-assignment modal */ .adj-rowbar { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 16px 0 6px } /* One shared column grid for every table in the view (paper-level and per-row alike): Field and Adjudication are fixed-width, the two value columns split the remainder equally — so the column boundaries line up across the stacked tables. first/last-child (not nth) so the grid also holds for unmatched-row tables, whose two value columns are one merged colspan=2 header. */ table.cmp.adj { table-layout: fixed; width: 100%; min-width: 700px } table.cmp.adj th:first-child { width: 150px } table.cmp.adj th:last-child { width: 240px } table.cmp.adj .cmp-field { white-space: normal } table.cmp.adj td { overflow-wrap: anywhere } table.cmp.adj td.adj-open { background: #FBF287 } /* bright yellow — still needs a ruling */ table.cmp.adj td.adj-ruled { background: #F2E4C4 } /* a ruling is recorded — visible, changeable */ .modal.assign { max-width: min(1150px, 96vw) } .modal.assign table.assign-cmp { table-layout: fixed; width: 100% } .modal.assign table.assign-cmp th { white-space: normal; vertical-align: top; overflow-wrap: anywhere } .modal.assign table.assign-cmp td { overflow-wrap: anywhere } .modal.assign td.assign-match { background: var(--ok-soft) } .assign-nav { display: inline-flex; align-items: center; gap: 8px } /* Confirm/prompt dialogs (dialog.js) — in-app stand-ins for confirm()/prompt() */ .modal.dialog { max-width: 430px; padding: 24px 26px } .modal.dialog h2 { margin-bottom: 10px } .dialog-msg { margin: 0; color: var(--ink-2); font-size: 13.5px; white-space: pre-line; overflow-wrap: anywhere } .dialog-msg[hidden] { display: none } .dialog-input { width: 100%; margin-top: 14px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); font: 14px/1.4 var(--font-ui); transition: border-color .12s, box-shadow .12s; } .dialog-input.mono { font-family: var(--font-mono) } .dialog-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus) } .dialog-input[hidden] { display: none } .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px } .choice { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; font-size: 13px; } .choice input { margin-top: 2px; accent-color: var(--brand) } .choice:has(input:checked) { border-color: var(--brand); background: var(--brand-soft) } /* ============================================================ Extraction-template editor (per-project) ============================================================ */ .tpl-card { padding: 18px 20px } .tpl-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px } .tpl-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 18px } @media (max-width: 760px) { .tpl-grid2, .tpl-grid3 { grid-template-columns: 1fr } } .tpl-field { padding: 12px 14px; margin-bottom: 10px } .tpl-field-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap } .tpl-field-head .tpl-label { flex: 1; min-width: 140px; font: 600 14px/1.3 var(--font-ui); padding: 7px 10px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); } .tpl-field-head .tpl-label:focus, .tpl-field-head select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus) } .tpl-field-head select { font: inherit; font-size: 13px; padding: 7px 8px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); } .tpl-ordbtns { display: flex; flex-direction: column; gap: 1px } .tpl-ordbtns button { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 9px; line-height: 1.1; padding: 1px 4px; } .tpl-ordbtns button:hover:not(:disabled) { color: var(--brand-strong) } .tpl-ordbtns button:disabled { opacity: .25; cursor: default } .tpl-del { color: var(--danger) } .tpl-body { margin: 10px 0 0 26px } .tpl-body label { font-size: 12px } .tpl-body textarea { resize: vertical; line-height: 1.45 } .tpl-adv { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; margin: 10px 0 0 26px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); } .tpl-advitem { display: flex; flex-direction: column; gap: 3px } .tpl-advitem label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px } .tpl-advitem input, .tpl-advitem select { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--surface); } .tpl-advitem input { font-family: var(--font-mono); width: 220px; max-width: 100% } @media (max-width: 560px) { .tpl-body, .tpl-adv { margin-left: 0 } } .tpl-checks { display: flex; gap: 8px; flex-wrap: wrap } .tpl-check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--surface); cursor: pointer; } .tpl-check input { accent-color: var(--brand) } .tpl-check:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); font-weight: 600 } .tpl-raw { width: 100%; min-height: 480px; font-family: var(--font-mono); font-size: 12.5px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--surface); line-height: 1.5; } .tpl-raw:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus) } /* ============================================================ Auth pages — split brand panel + form ============================================================ */ .auth-page { background: var(--paper); min-height: 100vh; margin: 0 } .auth-split { display: flex; min-height: 100vh } .auth-brandpane { flex: 0 0 42%; max-width: 520px; background: radial-gradient(1100px 600px at -20% 110%, rgba(185, 205, 169, .14), transparent 60%), var(--sidebar); color: var(--sidebar-ink); display: flex; flex-direction: column; justify-content: space-between; padding: 44px 48px; } .auth-brandpane .brand { font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--sidebar-ink); } .auth-brandpane .brand em { font-style: italic; color: #B9CDA9 } .auth-brandpane .pitch h2 { font-family: var(--font-display); font-weight: 500; font-size: 30px; line-height: 1.3; color: var(--sidebar-ink); margin: 0 0 22px; text-transform: none; letter-spacing: 0; } .auth-brandpane .pitch h2 em { font-style: italic; color: #B9CDA9 } .auth-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px } .auth-points li { display: flex; gap: 11px; align-items: flex-start; color: var(--sidebar-dim); font-size: 13.5px; line-height: 1.5 } .auth-points li b { color: var(--sidebar-ink); display: block; font-size: 13.5px } .auth-points .pticon { flex: 0 0 30px; width: 30px; height: 30px; margin-top: 1px; border-radius: 8px; background: var(--sidebar-2); display: flex; align-items: center; justify-content: center; color: #B9CDA9; } .auth-brandpane .foot { font-size: 12px; color: var(--sidebar-dim) } .auth-brandpane .foot a { color: var(--sidebar-dim); text-decoration: underline } .auth-brandpane .foot a:hover { color: var(--sidebar-ink) } .auth-formpane { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px; } .auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md); padding: 36px 40px; width: 100%; max-width: 430px; } .auth-logo { display: none } .auth-card h1 { font-size: 24px; margin: 0 0 6px } .auth-card .sub { margin-bottom: 24px } .auth-link { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted) } .auth-link a { color: var(--brand-strong); font-weight: 600 } .auth-foot { display: none; margin-top: 18px; font-size: 12px; color: var(--muted); text-align: center } .auth-foot a { color: var(--muted); text-decoration: underline } @media (max-width: 860px) { .auth-split { flex-direction: column } .auth-brandpane { flex: 0 0 auto; max-width: none; padding: 22px 24px; gap: 10px; } .auth-brandpane .pitch h2 { font-size: 20px; margin-bottom: 0 } .auth-points, .auth-brandpane .foot { display: none } .auth-foot { display: block } .auth-formpane { padding: 28px 16px 48px; justify-content: flex-start } .auth-card { padding: 28px 24px } } /* ============================================================ Admin ============================================================ */ .admin-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; text-align: center; box-shadow: var(--shadow); } .admin-stat .val { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--brand-strong); margin-bottom: 4px } .admin-stat .lbl { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .7px; font-weight: 600 } .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px } .tabs-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px } .tabs-row a { padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 600; } .tabs-row a:hover { text-decoration: none; background: var(--surface-2) } .tabs-row a.on { background: var(--ink); border-color: var(--ink); color: var(--paper) } /* Project setup checklist (dashboard, pre-extraction) */ .setup-steps { list-style: none; margin: 0; padding: 4px 0 } .setup-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 13px 18px; border-bottom: 1px solid var(--line); } .setup-steps li:last-child { border-bottom: none } .setup-steps .step-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2); } .setup-steps li.done .step-mark { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); } .setup-steps .step-body { flex: 1; min-width: 0 } .setup-steps .step-body b { font-size: 14px } .setup-steps .step-body p { margin: 2px 0 0; font-size: 13px; color: var(--muted); max-width: 640px } .setup-steps li.done .step-body b { color: var(--ink-2) } .setup-steps form, .setup-steps .btn { flex: none; align-self: center } /* print: hide chrome */ @media print { .sidebar, .mobilebar, .toast { display: none !important } main { max-width: none; padding: 0 } }