/* One stylesheet, two brands. * * Everything below paints from these tokens, so a brand is a token swap rather * than a fork of the CSS. The default set is the dark Technoidentity look; the * [data-brand="twotheta"] block further down overrides it with TwoTheta's light * palette. The brand script in index.html stamps data-brand on from the * hostname before first paint. * * The "tone" tokens are the semantic chip colours (info / good / warn / bad / * estate / bank), each a text + border + fill triplet. They exist because those * combinations appear a dozen times across badges, confidence chips, review * flags and notices, and every one of them needs different values on a light * background than on a dark one. */ :root { --bg: #070b16; --bg-raised: #0d1425; --bg-panel: #101a30; --bg-header: rgba(7, 11, 22, 0.85); --border: #1e2a44; --text: #f4f7fc; --text-muted: #93a1bd; --accent: #3b82f6; --accent-hover: #2f6fe0; --accent-soft: rgba(59, 130, 246, 0.14); --accent-contrast: #fff; --hero-glow: rgba(59, 130, 246, 0.16); --row-stripe: rgba(255, 255, 255, 0.02); --danger: #f87171; --font-body: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-display: var(--font-body); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; --radius: 14px; --radius-sm: 10px; --radius-chip: 999px; /* Semantic tones: foreground / border / fill */ --tone-info-fg: #bfdbfe; --tone-info-bd: rgba(59, 130, 246, 0.4); --tone-info-bg: rgba(59, 130, 246, 0.12); --tone-good-fg: #a7f3d0; --tone-good-bd: rgba(52, 211, 153, 0.4); --tone-good-bg: rgba(52, 211, 153, 0.12); --tone-warn-fg: #fde68a; --tone-warn-bd: rgba(251, 191, 36, 0.4); --tone-warn-bg: rgba(251, 191, 36, 0.1); --tone-bad-fg: #fca5a5; --tone-bad-bd: rgba(248, 113, 113, 0.4); --tone-bad-bg: rgba(248, 113, 113, 0.1); --tone-estate-fg: #ddd6fe; --tone-estate-bd: rgba(167, 139, 250, 0.45); --tone-estate-bg: rgba(167, 139, 250, 0.13); --tone-bank-fg: #99f6e4; --tone-bank-bd: rgba(45, 212, 191, 0.45); --tone-bank-bg: rgba(45, 212, 191, 0.12); /* Confidence tiers — paired with an icon + word (never colour alone). */ --conf-high: #34d399; --conf-med: #fbbf24; --conf-low: #f87171; font-size: 16px; } /* TwoTheta: light, warm, red accent — matching twotheta.com. */ :root[data-brand="twotheta"] { --bg: #fafaf8; --bg-raised: #ffffff; --bg-panel: #f0efe9; --bg-header: rgba(250, 250, 248, 0.88); --border: #e5e3dc; --text: #111110; --text-muted: #6b7280; --accent: #b91c1c; --accent-hover: #991b1b; --accent-soft: rgba(185, 28, 28, 0.08); --accent-contrast: #ffffff; --hero-glow: rgba(185, 28, 28, 0.07); --row-stripe: rgba(17, 17, 16, 0.02); --danger: #b91c1c; --font-body: "DM Sans", system-ui, sans-serif; --font-display: "Plus Jakarta Sans", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Courier New", monospace; --radius: 8px; --radius-sm: 6px; /* Darkened foregrounds so every chip clears contrast on the warm off-white. */ --tone-info-fg: #1e40af; --tone-info-bd: rgba(30, 64, 175, 0.28); --tone-info-bg: rgba(30, 64, 175, 0.07); --tone-good-fg: #047857; --tone-good-bd: rgba(4, 120, 87, 0.28); --tone-good-bg: rgba(4, 120, 87, 0.07); --tone-warn-fg: #92400e; --tone-warn-bd: rgba(146, 64, 14, 0.28); --tone-warn-bg: rgba(146, 64, 14, 0.07); --tone-bad-fg: #b91c1c; --tone-bad-bd: rgba(185, 28, 28, 0.28); --tone-bad-bg: rgba(185, 28, 28, 0.07); --tone-estate-fg: #5b21b6; --tone-estate-bd: rgba(91, 33, 182, 0.28); --tone-estate-bg: rgba(91, 33, 182, 0.07); --tone-bank-fg: #0f766e; --tone-bank-bd: rgba(15, 118, 110, 0.28); --tone-bank-bg: rgba(15, 118, 110, 0.07); --conf-high: #047857; --conf-med: #92400e; --conf-low: #b91c1c; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3, .brand-name { font-family: var(--font-display); } /* Header */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 2rem; border-bottom: 1px solid var(--border); background: var(--bg-header); position: sticky; top: 0; backdrop-filter: blur(8px); z-index: 10; } .brand { display: flex; align-items: center; gap: 0.65rem; } .brand-logo { height: 30px; width: auto; display: block; } .header-tag { color: var(--text-muted); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; } /* Layout */ main { flex: 1; width: min(1060px, 92vw); margin: 0 auto; padding: 3rem 0 4rem; } .hero { text-align: center; margin-bottom: 2.5rem; background: radial-gradient(600px 220px at 50% 0%, var(--hero-glow), transparent 70%); padding-top: 1rem; } .hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.8rem; } .hero p { color: var(--text-muted); max-width: 560px; margin: 0 auto; line-height: 1.6; } /* Document-type selector */ .doc-type-row { display: grid; grid-template-columns: auto minmax(0, 22rem); align-items: center; gap: 0.5rem 0.9rem; margin-bottom: 1rem; } .doc-type-label { font-size: 0.9rem; font-weight: 600; } .doc-type-select { font: inherit; font-size: 0.92rem; color: var(--text); background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.7rem; width: 100%; } .doc-type-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .doc-type-hint { grid-column: 1 / -1; color: var(--text-muted); font-size: 0.83rem; line-height: 1.5; } @media (max-width: 640px) { .doc-type-row { grid-template-columns: 1fr; } } /* Upload card */ .upload-card { background: var(--bg-raised); border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 2.6rem 2rem; text-align: center; transition: border-color 0.15s ease, background 0.15s ease; } .upload-card.dragover { border-color: var(--accent); background: var(--accent-soft); } .upload-idle svg { color: var(--accent); margin-bottom: 0.8rem; } .upload-idle p { line-height: 1.7; } .hint { color: var(--text-muted); font-size: 0.85rem; } .link-button { background: none; border: none; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; } .upload-busy .spinner { width: 36px; height: 36px; margin: 0 auto 1rem; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .upload-error { color: var(--danger); margin-top: 1rem; line-height: 1.5; } .hidden { display: none !important; } /* Results */ .results { margin-top: 2.5rem; } .results-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; } .results-title { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .results-header h2 { font-size: 1.3rem; font-weight: 600; } .badge { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--tone-info-bd); background: var(--accent-soft); color: var(--tone-info-fg); white-space: nowrap; } .badge-sow { border-color: var(--tone-info-bd); color: var(--tone-info-fg); background: var(--tone-info-bg); } .badge-msa, .badge-contract { border-color: var(--tone-good-bd); color: var(--tone-good-fg); background: var(--tone-good-bg); } .badge-invoice { border-color: var(--tone-warn-bd); color: var(--tone-warn-fg); background: var(--tone-warn-bg); } .badge-other { border-color: var(--border); color: var(--text-muted); background: transparent; } /* Real estate */ .badge-lease, .badge-lease_amendment, .badge-psa, .badge-property_management, .badge-vendor_service { border-color: var(--tone-estate-bd); color: var(--tone-estate-fg); background: var(--tone-estate-bg); } /* Banking & lending */ .badge-appraisal, .badge-credit_memo, .badge-loan_agreement, .badge-security_instrument, .badge-guaranty { border-color: var(--tone-bank-bd); color: var(--tone-bank-fg); background: var(--tone-bank-bg); } .file-facts { color: var(--text-muted); font-size: 0.9rem; } .results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } @media (max-width: 800px) { .results-grid { grid-template-columns: 1fr; } } .panel { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; min-width: 0; } .panel h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 1.1rem; } .panel h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 1.2rem 0 0.5rem; } .panel dl { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 0.6rem 1rem; font-size: 0.95rem; } .panel dt { color: var(--text-muted); } .panel dd { overflow-wrap: anywhere; } .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .chip { background: var(--accent-soft); color: var(--tone-info-fg); border: 1px solid var(--tone-info-bd); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.82rem; } .chip.entity-people { border-color: var(--tone-good-bd); color: var(--tone-good-fg); background: var(--tone-good-bg); } .chip.entity-locations { border-color: var(--tone-warn-bd); color: var(--tone-warn-fg); background: var(--tone-warn-bg); } #text-preview, #json-output { font-family: var(--font-mono); } #text-preview { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.9rem; max-height: 300px; overflow: auto; font-size: 0.82rem; line-height: 1.55; white-space: pre-wrap; color: var(--text-muted); } /* Deep, type-specific extraction panel */ .panel-wide { margin-bottom: 1.2rem; } #deep-content dl { display: grid; grid-template-columns: minmax(130px, auto) 1fr; gap: 0.6rem 1rem; font-size: 0.95rem; margin-bottom: 0.4rem; } #deep-content dt { color: var(--text-muted); } #deep-content dd { overflow-wrap: anywhere; } .deep-note { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; } .table-wrap { overflow-x: auto; margin: 0.3rem 0 0.4rem; border: 1px solid var(--border); border-radius: 8px; } .data-table { border-collapse: collapse; width: 100%; font-size: 0.85rem; } .data-table th, .data-table td { text-align: left; padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border); white-space: nowrap; } .data-table th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; background: var(--bg-raised); } /* Zebra striping so rows read as distinct, not clubbed together. */ .data-table tbody tr:nth-child(even) td { background: var(--row-stripe); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table td { color: var(--text); overflow-wrap: anywhere; white-space: normal; } /* Tabs */ .tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.75rem; } .tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font: inherit; font-weight: 600; padding: 0.7rem 1.1rem; min-height: 44px; cursor: pointer; } .tab:hover { color: var(--text); } .tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); } .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* Upload progress queue */ .upload-queue { list-style: none; margin-top: 1rem; display: flex; flex-direction: column; gap: 0.4rem; } .queue-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.9rem; } .q-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-status { font-size: 0.82rem; white-space: nowrap; color: var(--text-muted); } .q-status--extracting { color: var(--accent); } .q-status--done { color: var(--conf-high); } .q-status--error { color: var(--danger); } /* "Not saved to history" notice */ .persisted-notice { background: var(--tone-warn-bg); border: 1px solid var(--tone-warn-bd); color: var(--tone-warn-fg); border-radius: 10px; padding: 0.6rem 0.9rem; margin-bottom: 1.2rem; font-size: 0.9rem; } /* Forced type disagreed with what Claude read */ .mismatch-notice { background: var(--tone-info-bg); border: 1px solid var(--tone-info-bd); color: var(--tone-info-fg); border-radius: 10px; padding: 0.6rem 0.9rem; margin-bottom: 1.2rem; font-size: 0.9rem; } /* Aggregate "N fields need review" banner above the results */ .review-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; background: var(--tone-warn-bg); border: 1px solid var(--tone-warn-bd); color: var(--tone-warn-fg); border-radius: 10px; padding: 0.6rem 0.9rem; margin-bottom: 1.2rem; font-size: 0.9rem; } /* History: expiry countdown + review count */ .expiry-chip, .review-flag { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; font-weight: 600; border-radius: 999px; padding: 0.05rem 0.5rem; margin-left: 0.4rem; white-space: nowrap; } .expiry-soon { color: var(--tone-warn-fg); border: 1px solid var(--tone-warn-bd); background: var(--tone-warn-bg); } .expiry-past { color: var(--tone-bad-fg); border: 1px solid var(--tone-bad-bd); background: var(--tone-bad-bg); } .review-clear { color: var(--text-muted); } /* Structured JSON output */ .json-panel { margin-top: 1.4rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); padding: 1rem 1.2rem; } .json-panel > summary { cursor: pointer; font-weight: 600; } .json-panel > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .json-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0.9rem 0 0.6rem; } .json-note { color: var(--text-muted); font-size: 0.85rem; max-width: 46ch; line-height: 1.5; } .json-actions { display: flex; gap: 0.4rem; } #json-output { max-height: 26rem; overflow: auto; } /* Fields the model wasn't confident about. Icon + word + colour, never colour alone — same rule the confidence chips follow. */ /* Layout comes from the shared .expiry-chip/.review-flag rule above. */ .review-flag { color: var(--tone-warn-fg); border: 1px solid var(--tone-warn-bd); background: var(--tone-warn-bg); } .review-icon { font-size: 0.85em; } .ci-field.needs-review { background: var(--tone-warn-bg); } /* Contract intelligence: value + confidence tier + source */ .ci-list { display: flex; flex-direction: column; margin: 0.4rem 0 0.6rem; } .ci-field { display: grid; grid-template-columns: minmax(140px, 200px) 1fr auto auto; align-items: center; gap: 0.6rem; font-size: 0.92rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); } .ci-field:last-child { border-bottom: none; } .ci-label { color: var(--text-muted); } .ci-value { overflow-wrap: anywhere; } .conf-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; font-weight: 600; padding: 0.12rem 0.5rem; border-radius: 999px; border: 1px solid; white-space: nowrap; } .conf-icon { font-size: 0.7rem; line-height: 1; } .conf-high { color: var(--conf-high); border-color: var(--tone-good-bd); background: var(--tone-good-bg); } .conf-med { color: var(--conf-med); border-color: var(--tone-warn-bd); background: var(--tone-warn-bg); } .conf-low { color: var(--conf-low); border-color: var(--tone-bad-bd); background: var(--tone-bad-bg); } .source-tag { font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; } /* Counterparty flag on a party row */ .cp-badge { display: inline-block; margin-left: 0.5rem; font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tone-warn-fg); border: 1px solid var(--tone-warn-bd); background: var(--tone-warn-bg); border-radius: 999px; padding: 0.08rem 0.45rem; vertical-align: middle; } /* History */ .history-state { color: var(--text-muted); text-align: center; padding: 2.5rem 1rem; line-height: 1.7; } .history-state--error { color: var(--danger); } .history-state .link-button { margin-left: 0.3rem; } .history-row { cursor: pointer; } .history-row:hover td { background: var(--accent-soft); } .history-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .history-table td { max-width: 240px; overflow: hidden; text-overflow: ellipsis; } /* History table collapses to cards on narrow screens (D5) */ @media (max-width: 640px) { .ci-field { grid-template-columns: 1fr; gap: 0.15rem; } #history-list .table-wrap { border: none; overflow: visible; } .history-table thead { display: none; } .history-table, .history-table tbody, .history-table tr, .history-table td { display: block; width: 100%; } .history-table tr { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 0.6rem; padding: 0.3rem 0.2rem; } .history-table td { border: none; display: flex; justify-content: space-between; gap: 1rem; white-space: normal; max-width: none; padding: 0.5rem 0.8rem; overflow: visible; text-overflow: clip; } .history-table td::before { content: attr(data-label); color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; /* Without this the flex row squeezes the label to one letter per line whenever the value is long — "V A L U E" down the left edge. */ flex: 0 0 auto; white-space: nowrap; align-self: flex-start; padding-top: 0.15rem; } .history-table td { align-items: flex-start; text-align: right; } .history-table td[data-label="File"] { font-weight: 600; } } /* Login overlay */ .login-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 1.5rem; } .login-card { width: min(380px, 100%); background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; display: flex; flex-direction: column; gap: 0.9rem; text-align: center; } .login-card h1 { font-size: 1.4rem; font-weight: 700; } .login-card p { color: var(--text-muted); font-size: 0.92rem; } .login-card input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.9rem; color: var(--text); font: inherit; } .login-card input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .login-button { background: var(--accent); color: var(--accent-contrast); border: none; border-radius: 10px; padding: 0.7rem 1rem; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; } .login-button:hover { background: var(--accent-hover); } .login-error { color: var(--danger); font-size: 0.88rem; } /* Header right side + logout */ .header-right { display: flex; align-items: center; gap: 1rem; } .logout-button { background: none; border: 1px solid var(--border); color: var(--text-muted); border-radius: 999px; padding: 0.35rem 0.8rem; font: inherit; font-size: 0.82rem; cursor: pointer; min-height: 32px; } .logout-button:hover { color: var(--text); border-color: var(--accent); } /* History toolbar + clear */ .history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .history-count { color: var(--text-muted); font-size: 0.9rem; } .history-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .danger-button { background: var(--tone-bad-bg); color: var(--danger); border: 1px solid var(--tone-bad-bd); border-radius: 10px; padding: 0.5rem 0.9rem; font: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer; min-height: 40px; } .danger-button:hover { background: var(--tone-bad-bg); filter: brightness(0.96); } .clear-confirm { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; } .confirm-msg { color: var(--text); font-size: 0.88rem; } /* Footer */ .site-footer { border-top: 1px solid var(--border); padding: 1.2rem 2rem; color: var(--text-muted); font-size: 0.85rem; text-align: center; }