/* 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"] { /* Sampled from the logo PNG itself, so the wordmark matches it exactly. */ --brand-ink: #102347; --brand-accent: #b91c1c; --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; } /* Company logo | product lockup */ .brand-divider { width: 1px; align-self: stretch; margin: 0.15rem 0.2rem; background: var(--border); } .product-lockup { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; } /* The wordmark: same typeface and weight as the logo, "Parse" in the logo's red. Both hexes are sampled from the logo file, so the lockup stays true to it even if the surrounding theme tokens change. */ .product-name { font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -0.02em; color: var(--brand-ink, var(--text)); white-space: nowrap; } .product-accent { color: var(--brand-accent, var(--accent)); } .product-descriptor { color: var(--text-muted); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } /* Sits against the wordmark so the label travels with the product name — the point is that nobody reads this as a shipping product. */ .demo-badge { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-accent, var(--accent)); border: 1px solid var(--brand-accent, var(--accent)); border-radius: var(--radius-chip); padding: 0.1rem 0.5rem; white-space: nowrap; align-self: center; } /* About panel */ .about { max-width: 68ch; line-height: 1.7; } .about h2 { font-size: 1.05rem; margin: 1.8rem 0 0.6rem; } .about p { margin-bottom: 0.9rem; } .about-lede { font-size: 1.05rem; border-left: 3px solid var(--brand-accent, var(--accent)); padding-left: 1rem; margin-bottom: 1.4rem; } .about-list { padding-left: 1.1rem; margin-bottom: 0.9rem; } .about-list li { margin-bottom: 0.4rem; } .about-note { color: var(--text-muted); font-size: 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-panel); padding: 0.8rem 1rem; margin-top: 1.6rem; } /* Constrain the wrapper, not the table — the wrapper carries the border and background, so capping only the table leaves an empty ledge beside it. */ .about .table-wrap { max-width: 40rem; } .block-table { width: 100%; } .block-name { font-family: var(--font-display); font-weight: 800; color: var(--brand-ink, var(--text)); white-space: nowrap; } .block-current { background: var(--accent-soft); } .block-badge { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-left: 0.5rem; white-space: nowrap; } @media (max-width: 640px) { .product-descriptor { display: none; } } .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; } /* Reviewer bar: who is reviewing, what state the document is in, and the actions that move it forward. */ .review-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.8rem 1rem; margin-bottom: 1.2rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-panel); } .review-bar-left, .review-bar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .reviewer-label { font-size: 0.85rem; color: var(--text-muted); } .reviewer-input, .field-input { font: inherit; font-size: 0.9rem; color: var(--text); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.35rem 0.6rem; } .reviewer-input:focus-visible, .field-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .field-input { min-width: min(28rem, 60vw); } .review-state { font-size: 0.85rem; font-weight: 600; } .review-state.is-approved { color: var(--conf-high); } .review-state.is-pending { color: var(--text-muted); } .primary-button { font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--accent-contrast); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 0.4rem 0.9rem; cursor: pointer; } .primary-button:hover:not(:disabled) { background: var(--accent-hover); } .primary-button:disabled { opacity: 0.6; cursor: default; } .ghost-button { font: inherit; font-size: 0.85rem; color: var(--text); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.35rem 0.75rem; cursor: pointer; } .ghost-button:hover { border-color: var(--accent); color: var(--accent); } /* Exception worklist */ .exceptions-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); padding: 1rem 1.2rem; margin-bottom: 1.2rem; } .exceptions-panel h3 { font-size: 1rem; margin-bottom: 0.7rem; } .exception-list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; } .exception { border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-sm); background: var(--bg-raised); padding: 0.6rem 0.8rem; } .exception.sev-error { border-left-color: var(--tone-bad-fg); } .exception.sev-warning { border-left-color: var(--tone-warn-fg); } .exception.sev-info { border-left-color: var(--tone-info-fg); } .exception-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; } .exception-message { font-weight: 600; font-size: 0.92rem; } .exception-detail { color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; margin-top: 0.3rem; white-space: pre-wrap; } .exception-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; } .exception-field { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0.05rem 0.35rem; } .severity-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: var(--radius-chip); padding: 0.05rem 0.5rem; white-space: nowrap; } .severity-chip.sev-error { color: var(--tone-bad-fg); background: var(--tone-bad-bg); border: 1px solid var(--tone-bad-bd); } .severity-chip.sev-warning { color: var(--tone-warn-fg); background: var(--tone-warn-bg); border: 1px solid var(--tone-warn-bd); } .severity-chip.sev-info { color: var(--tone-info-fg); background: var(--tone-info-bg); border: 1px solid var(--tone-info-bd); } .field-editor { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); } .field-error { color: var(--danger); font-size: 0.82rem; } /* Audit trail */ .audit-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel); padding: 1rem 1.2rem; margin-bottom: 1.2rem; } /* Reviewer queue filters */ .queue-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; } .queue-filter { font: inherit; font-size: 0.85rem; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-chip); padding: 0.3rem 0.85rem; cursor: pointer; } .queue-filter:hover { color: var(--text); } .queue-filter.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); font-weight: 600; } .status-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; font-weight: 600; white-space: nowrap; } .status-chip.is-approved { color: var(--conf-high); } .status-chip.is-pending { color: var(--text-muted); } /* 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; }